MVC3でAjaxを使用してHTML.RenderPartialをリフレッシュする方法を教えてください。

Question

I次のビューがあります。このコントローラのアクションによって移入

@model ViewModels.Shared.BaseViewModel 
    <div class="rep_tb0"> 
     <div class="rep_tr0"> 
      <div class="rep_td0">@Html.LabelFor(model => Model.Link.Position)</div> 
      <div class="rep_td0">@Html.LabelFor(model => Model.Link.Title)</div> 
     </div> 
     @for (var i = 0; i < Model.AdminDetails.Count; i++) 
     { 
      var qs = "&ac=" + Model.Meta.AccountID + 
        "&me=" + Model.AdminDetails[i].RowKey; 
     <div class="rep_tr0"> 
      <div class="rep_td0"> 
       @Html.TextBox(("Position_" + @i), Model.AdminDetails[i].Position, new { size = 2 }) 
      </div> 
      <div class="rep_td0">@Model.AdminDetails[i].Title</div>    
     </div> 
     } 
    </div>  

を：

public ActionResult Detail(string ac, string me) 
    { 
      vm.AdminDetails = _link.Detail(ac + me).ToList(); 
     return View(vm); 
    } 

私が要求する必要があるとき、私は時間があるようアヤックス、jQueryとHTML.Renderpartialを使用したいですたとえば、positionの値を変更したときにデータをリフレッシュします。

私はこれを行うという考え方に全く新しいです。私に役立つリンクが見つかりましたが、主にMVCの以前のバージョンではAjaxについてであり、MVC3についてはそうではありませんでした。誰かが私にいくつかの指摘を与えることができます。私はコードを探していません。アクションメソッドでコーディングを行う方法、Ajaxなどを呼び出す方法についてのいくつかの行の例です。

Answer 1

部分的な表示ではなく、子のアクションが必要です。

あなたは、あなたはあなたの部分図を更新したいときにAJAX要求をオフに解雇するjQueryのを使用することになります

<div id="#thingy">@Html.Action("Detail", new { ac, me })</div> 

$('#thingy').load("@Server.JavaScriptStringEncode(Url.Action("Detail", new { ac, me }))"); 

Answer 2

基本的な考え方を書き込むことができます。

AJAXリクエストはコントローラアクションの1つを呼び出し、PartialViewResultを返します。

JQuery AJAX結果の「成功」部分はHTML応答を取得し、ビュー内の特定のコンテナを新しいHTMLに置き換えます。

あなたのビューは次のようになります。

@model ViewModels.Shared.BaseViewModel 
<script type="text/javascript"> 
    $(function() { 
     $('#RefreshButton').click(function() { 
      $.ajax({ 
       url: *href*, 
       dataType: 'html', 
       cache: false, 
       success: function (responseText) { 
        $('#PanelToUpdate').html(responseText); 
       } 
      }); 
     }); 
    }); 
</script> 
<div id="PanelToUpdate" class="rep_tb0"> 
    <div class="rep_tr0"> 
     <div class="rep_td0">@Html.LabelFor(model => Model.Link.Position)</div> 
     <div class="rep_td0">@Html.LabelFor(model => Model.Link.Title)</div> 
    </div> 
    @for (var i = 0; i < Model.AdminDetails.Count; i++) 
    { 
     var qs = "&ac=" + Model.Meta.AccountID + 
        "&me=" + Model.AdminDetails[i].RowKey; 
    <div class="rep_tr0"> 
     <div class="rep_td0"> 
      @Html.TextBox(("Position_" + @i), Model.AdminDetails[i].Position, new { size = 2 }) 
     </div> 
     <div class="rep_td0">@Model.AdminDetails[i].Title</div>    
    </div> 
    } 
</div>  
<button id="RefreshButton"></button> 

のhrefがあなたのコントローラのアクションのためのURLです。また、AJAXのポストメソッドを見て、必要な場合はフォームデータをシリアル化することもできます。その後

、お使いのコントローラのアクションに小さな微調整、それはAJAXを介して、または、通常どちらかと呼ばれて扱うことができるように：

public ActionResult Detail(string ac, string me) 
{ 
    vm.AdminDetails = _link.Detail(ac + me).ToList(); 

    if (Request.IsAjaxRequest()) 
     return PartialView(vm); 
    return View(vm); 
} 

return PartialView(vm);なしAJAX要求のためのHTML応答は、あなたのページが

ヘッダ含まれるであろう