パーシャルビューモデルにデータを送信し、遅い.html（）を送信する最適な方法

Question

私は、各ユーザーが別の部分ビューで、その詳細について1つのユーザーリスト（ループ）を持つ部分ビューがあるとします。

私は上記の詳細は、リスト項目の1ポップアップ（jQueryのモーダルダイアログ（））のリンクをクリックし

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

は、その選択したユーザーの詳細がポップアップ表示されます。それとも少なくともそれが目標です。選択したユーザーの詳細を新しいポップアップに表示する必要があります。

これで、ポップアップに表示される部分ビューの背後にモデルを配置し、.dialog（ 'Open'）トリガーの前にユーザーの詳細を設定する必要があります。

質問：ActionMethodを呼び出し、ダイアログが表示される前にPartial Viewモデルにデータを入力するには、Javascript関数（上記の例ではonclick JavascriptFunction関数）の中から最善の方法はありますか？

私はそれを次のようにしていますが、何らかの理由で私はページに表示されるデータに大きな遅れが生じています。 ActionMethodからユーザーの詳細をパーシャルビューをロードすると仮定

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

Javascriptを：メインリストページ

：私は（）最終的にデータが表示される.htmlを前に良い5〜10秒間空白のdivを参照してください。

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

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

おそらくページの部分図を事前にロードする方法があり、その後、ちょうど再書き込み全体PartialViewをすることなく、そのモデルに私のデータをロードしますか？ それは理想的なシナリオでしょうが、私はそれを行う方法はないと思います、ありますか？

ありがとうございます！紛らわしい音がする場合は、躊躇しないでください。

Answer 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> 

、パラメータとしてイドを受け入れる「詳細と呼ばれるアクションメソッドを持っていると

ユーザー詳細の表示を返す

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

あなたを持っていますDetailsViewの詳細については、HTMLマークアップを参照してください。

このコードでは、jQuery UIモデルダイアログを使用していますので、それを含めてください。