3

ユーザーのリストを含む単純なページを想像してみてください。ユーザーを選択すると、編集可能なさまざまな詳細を含むJQueryモーダルダイアログが表示されます。何かのようなもの：

@model IEnumerable<UserRole>


@if (Model.Any())
{
    foreach (var user in Model.Users)
    {
      <a href="#" id="user-details-link" onclick="userDetailsOpen(@user.id)">Details</a>
    }
}

投稿を通じてより具体的な例を示しますが、私が探しているのは、モデルにバインドされた部分ビューをJQueryダイアログボックスとしてロードして表示するための最良の方法に関する一般的な「経験豊富な」意見です。

私はそれをコード的に行う方法を知っていますが、もっと良い方法があるに違いないと思います。私はそれを行うための一般的な既知の方法はあまり効率的ではないと信じています。

私のルールと私が望むのは、部分ビューポップアップに関連付けられたすべてのコードをその部分ビューに保持することです。ポップアップを次のUserDetails部分ビューのような構造にしたいと思います。

@model User
<script src="@Url.Content("~/Scripts/UserScripts.js")" type="text/javascript"></script>

<div id="placeholder">

...The modal dialog content...

</div>

このようにして、別の開発者がそれを見るようになると、簡単にすべてをつなぎ合わせることができます。

私の知る限り、部分ビューをダイアログとして表示する方法は2つあり、両方に問題があります。

1）上に表示した部分ビュー構造を使用し、を使用してマスターページからdivダイアログをプリロードし@Html.Partial("UserDetails", new User)、ダイアログにユーザーデータを入力して表示する必要がある場合は、ActionMethodへのAjax呼び出しを実行します。必要なデータを含む部分ビューのモデルをJQuery.html()メソッドで再レンダリングします。

部分ビュー/ダイアログにデータが読み込まれると、JQueryで表示するだけです。.dialog('open')

これは機能しますが、このロジックにはいくつかの問題があります。

a）同じ部分ビューを2回ロードしています（最初は空白、2番目はデータがロードされています）

b）マスターページが読み込まれると、プレースホルダーDIVの内容が画面に点滅します。display:none.html（）メソッドがトリガーされる前にDIVをここで機能しないように設定すると、そのdisplay:noneタグが含まれる部分ビューが読み込まれ、ポップアップが空白のウィンドウとして表示されます。

c）ページがリクエストされたときに、大きい場合、ページが表示されるまでに時間がかかります

2）部分ビューに入れる代わり<div id="placeholder"></div>に、マスターページに空白を配置してから、ajaxを使用して、またはJQueryを使用して現在行っているように、部分ビューのコンテンツをそのdivにロードできます。

var url = "/MyController/MyAction/" + Id;
$("#palceholder").load(url).dialog('open');

繰り返しますが、それは機能しますが、この方法で私が見るいくつかの大きな問題があります：

a）それは私の「すべてをまとめるルール」を破ります。を見るとき、他の開発者の周りを検索しないと、このDivにどの部分ビューがロードされるかわかりません。

b）部分ビューポップアップのすべてのJavascriptは、部分ビュー自体ではなく、マスターページで参照する必要があります。

c）ページがリクエストされたときに、大きい場合、ページが表示されるまでに時間がかかります

一番下の質問は、コードを整理したまま、モデルにバインドされた入力済みの部分ビューをモーダルダイアログとして表示するための最良の方法は何だと思いますか？

私の完璧なシナリオは、すべての部分ビューフィールドをプリロードし、ダイアログにデータが入力されていることを表示するように要求されたときに、モデルがプリロードされた部分ビューを新しいJSonデータセットにバインド/再ロードせずにバインドすることです。 -すべての部分ビューフィールドをロードします。方法はありますか？

PS私が試したことの1つは、部分ビューフィールドをプリロードして@Html.Partial("UserDetails", new User)から、JQuery.replaceWith()メソッドを使用してDivの内容を置き換えることですが、残念ながらそれを機能させることができませんでした。

どんな考えでもありがたいです。悪い考えのように考えはありません。ありがとう。

4

1 に答える 1

2

コードの一部を部分的にロードしてから、アクションからの戻りで部分コンテナを更新するだけでも問題はありません。

<div id="ParitalContainer">
    @Html.Partial("_PartialView", Model.PartialModel)
</div>

または、JSONデータを操作するシナリオを検討することもできます。$.ajaxつまり、またはを呼び出して、すべてのデータを非同期でロードします$.getJSON。アクションの結果が返さJsonResultれたら、必要な要素を更新するだけです。さらに、より堅牢なソリューションが必要な場合は、Knockout.jsの使用を検討できます。これは、「すべてをまとめる」アプローチが必要な場合に行うことです。

于 2012-06-29T16:55:38.883 に答える