1

Twitter ブートストラップを使用する .Net MVC アプリには、多くのフィールドを描画するビューがあります。各フィールドの値は、長さが 100 文字の短縮された文字列です。元の文字列の長さは常に 1000 文字を超えます (場合によっては 10 万文字)。

string long = result[i]; // really long string that's over 1000 characters long
string short = long.Substring(0, 99);
<section>
    <div class="row-fluid">
        <div class="span12">@short</div>
    </div>    
</section>

描画するフィールドごとに、ユーザーがクリックして、短縮されていないテキストを表示するモーダル ウィンドウを表示できるリンクが必要です。

したがって、同じページにモーダル ウィンドウへの 100 個のリンクを配置すると、各モーダル ウィンドウに独自のテキストが表示されます。

このようなもの: http://jqueryui.com/dialog/

しかし、私の問題は次のとおりです。

1) 同じページに多数のモーダル ダイアログを配置するので、それぞれに固有の ID が必要になると思います。

2) 長いテキスト ("string long") を各モーダル ダイアログに渡す必要があります。クライアントコードでそれらを描画するときにそれを行うことができるかもしれませんし、長いテキストをコントローラーに送信することでそれを行うことができるかもしれません。最善のアプローチが何であるかはわかりません。

私はこれを見てきました: ASP.NET MVCモーダルダイアログ/ポップアップのベストプラクティスですが、チェックされた回答が何を参照しているのかよくわかりません(「ランチーのダイアログの提案」?)。

4

2 に答える 2

2

考えられる戦略は、1 つのモーダル ダイアログのみに html を使用し、文字列のすべての長いバージョンを、ハッシュ配列などの何らかの JavaScript データ構造に格納することです。これにより、何百ものモーダル ダイアログの HTML によってページが肥大化するのを防ぐことができます。

次に、ユーザーが「長いバージョンを表示」リンクをクリックすると、モーダル ダイアログ内の内部テキストを、ハッシュ配列から取得した適切な「長いバージョン」の文字列に置き換えて表示するクエリがあります。ダイアログ。

もっと手の込んだものにしたい場合は、短いバージョンの文字列のみをページにロードし、ユーザーがリンクをクリックすると、AJAX を介して「長いバージョン」の文字列を取得します。

Twitter Bootstrap には Modal Dialog (こちらを参照) が付属しており、JQuery には要素に HTML を挿入するためのメソッドがいくつかあります (こちらを参照) 。

Twitter Bootstrap Modal Dialog のドキュメントを見ると、remote:オプションを使用して AJAX 経由でリモートでデータをロードできることがわかります。

以下は、AJAX 経由でこれを行うために Twitter ブートストラップを利用する方法の大まかな例です。

コントローラー

public ActionResult Index()
{
    var model = GetLongStrings(); 
    return View(model);
}

public ActionResult FindLongString(string shortString)
{
    var longStrings = GetLongStrings();
    var longStringToReturn = longStrings
                            .FirstOrDefault(x => x.StartsWith(shortString));

    return Content(longStringToReturn);
}

次に、ビューは次のようになります

@foreach (var result in results)
{
    var shortString = result.Substring(0, 5);
    <section>
        <div class="row-fluid">
            <div class="span12">@shortString</div>
            @Html.ActionLink("See long version", "FindLongString", 
                             new { shortString = shortString }, 
                             new { data_toggle = "modal", 
                                   data_target = "#myModal", 
                                   aria_hidden = "true" })
        </div>
    </section>
}

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn"  data-dismiss="modal">Close</a>
    </div>
</div>

ActionLink のデータ属性は、ダイアログに使用するオプションを Twitter Bootstrap に指示するため、重要です。

コード例は、各文字列に ID があれば改善される可能性がFindLongStringあります。つまり、`int をパラメーターとして受け入れることができます。つまり、これを ActionLink に渡すだけで済みます。

于 2013-03-26T21:18:39.957 に答える
1

StanK の回答はあなたが必要としているものです。そのため、それが役立つ場合は、躊躇せずに受け入れてください。

ただし、観察事項があります。短い文字列で長い文字列を取得することは、実際には信頼できません。理論的には、すべての文字列が同じ100文字で始まる可能性があることを意味します（すべての文字列が同じになることさえあります:)）。同じ 100 文字で始まる文字列が 2 つある場合、どちらの短い文字列をクリックしても、最初の文字列のみが返されます。

はるかに信頼できる方法は、各文字列に一意の ID を提供することです。一意である限り、これは何でもかまいません。サーバー側のロジックによって異なります。

  • 文字列がリレーショナル データベースからのものである場合、通常はテーブルの主キー (または任意の一意のキー) を使用できます。ほとんどのテーブルで一意のインクリメント ID を使用することをお勧めします)。この方法では、非常に高速でクリーンなデータベース クエリも得られます。ただし、この方法を使用すると、データベース構造から必要な情報をさらに明らかにできることに注意してください。
  • 文字列が順序付きリストにあり、順序が固定されている場合は、要素のインデックスを使用できます。

したがって、StanK のサンプル コードを使用して、それにデータベース接続を導入します (私の場合は Entity Framework ですが、これは何でもかまいません)。

コントローラーのアクション:

public ActionResult Index()
{
    using (Context ctx = new MyEntities())
    {
        var model = ctx.Strings.Select(o => new { Id = o.Id, longString = o.String });
        return View(model);
    }

}

public ActionResult FindLongString(string id)
{
    using (Context ctx = new MyEntities())
    {
        var record = ctx.Strings.SingleOrDefault(o => o.Id == id);
        if (record == null)
        {
            throw new HttpException(404, "The long string cannot be found");
        }
        else
        {
            return record.String;
        }
    }
}

景色：

@foreach (var result in results)
{
    var shortString = result.String.Substring(0, 99);
    <section>
        <div class="row-fluid">
            <div class="span12">@shortString</div>
            @Html.ActionLink("See long version", "FindLongString", 
                             new { id = result.Id }, 
                             new { data_toggle = "modal", 
                                   data_target = "#myModal", 
                                   aria_hidden = "true" })
        </div>
    </section>
}

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn"  data-dismiss="modal">Close</a>
    </div>
</div>
于 2013-03-27T07:33:25.770 に答える