0

ユーザーのリスト（ループ）を含む部分ビューがあり、各ユーザーが1つの詳細を含む別の部分ビューであるとします。

foreach (var user in Model.Users)
 {
  <a href="#" onclick="JavascriptFunction(user.Id);">Details<a>
 }

リストアイテムの1つについて上記の[詳細]リンクをクリックすると、ポップアップ（JQueryモーダルダイアログ（））がポップアップし、選択したユーザーの詳細が表示されます。または、少なくともそれが目標です。選択したユーザーの詳細を、開いた新しいポップアップに表示する必要があります。

したがって、.dialog（'Open'）がトリガーされる前に、ポップアップに含まれる部分ビューの背後にあるモデルにユーザーの詳細を入力する必要があります。

質問：Javascript関数（上記の例ではJavascriptFunction関数をクリック）内からActionMethodを呼び出し、ダイアログが表示される前に部分ビューモデルにデータを入力するための最良の方法は何ですか？

現在、私は次の方法でそれを行っていますが、何らかの理由で、ページにレンダリングされるデータに大きな遅延が発生しています。.html（）が最終的にデータを表示する前に、5〜10秒間空白のdivが表示されます。

メインリストページ：

<div id="userPopup"></div>

ActionMethodからユーザーの詳細を含む部分ビューをロードすることを想定したJavascript：

        $.post('@Url.Action("Details","User")', { id: userId},
        function (data) {

            $("#userPopup").html(data);
        });

おそらく、ページに部分ビューをプリロードしてから、PartialView全体を書き直さずにデータをモデルにロードする方法がありますか？それは理想的なシナリオですが、それを行う方法はないと思いますね。

前もって感謝します ！紛らわしいことがあれば、遠慮なく質問してください。

4

1 に答える 1

1

メインページにすべてのユーザー詳細をプリロードする必要はないと思います.1000人以上のユーザーがいて、訪問者が詳細リンクをクリックしていない場合はどうなりますか? 私はこのようにします。ユーザーがリンクをクリックするたびに、データを返すアクション メソッドを呼び出します。

したがって、メインビューでは、

@foreach(var user in Model.Users)
{
  @Html.ActionLink(user.Name, "Details", "User",
                             new { Id = user.ID, }, new { @class ="popupLink" })

}

<script type="text/javascript">
$(function(){
    $(".popupLink").click(function (e) {
        e.preventDefault();
        var url = this.href;
        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,
                    width: 460
                });
            }
        );         

    });
});
</script>

ユーザーコントローラーで、IDをパラメーターとして受け取り、ユーザーの詳細のビューを返す「詳細」というアクションメソッドを用意します

public ActionResult Details(int id)
{
  var usre=repositary.GetUser(id);
  return View(user);
}

詳細の HTML マークアップを DetailsView に用意します。

このコードは、jQuery UI モデル ダイアログを使用します。したがって、それを含める必要があります。

于 2012-05-11T20:38:53.757 に答える