使用部分視圖更新jQuery .dialog中的數據後更新視圖模型

Question

我有一個MVC 4視圖，其中包含多個「詳細」部分視圖，每個視圖都有自己的「編輯」部分視圖，該視圖在jQuery.dialog中打開，使用保存和取消按鈕。 「編輯」部分視圖有一個@using（Ajax.BeginForm ...）標記，在用戶單擊.dialog上的Save後，數據成功提交給控制器。然後使用OnSuccess事件處理更新的數據，在此時重建受影響的表體，然後使用tbody.replaceWith更新「詳細」部分視圖。

看起來，MVC 4提供的所有內容都應該有一種更簡單的方法來從控制器中獲取更新的數據，並在原始視圖上重新載入更新後的局部視圖。有沒有什麼比所有JavaScript和jQuery代碼更好，如下所示，這是原始視圖中第一個「細節」部分視圖的示例？並且，繼續使用jQuery.dialog/partial視圖。

感謝， lv2rftak

@model Models.DemographicsViewModel 
@using System.Web.Helpers 
@using Newtonsoft.Json; 
@using Newtonsoft.Json.Converters; 
<p> 
    <button class="showModal" id="ShowDemographicsEdit" name="ShowDemographicsEdit" onclick="OpenDemographicsEdit(@Model.Demographic.PK_DemographicsID);">Edit</button> 
</p> 
<div id="DemographicsMessage"></div> 

<div id="DemographicsList"> 
    <table id="DemographicsTable" class="grid"> 
     <tbody id="DemographicsTableBody"> 
      <tr> 
       <td style="width:200px">@Html.DisplayNameFor(model => model.Demographic.PK_DemographicsID)</td> 
       <td>@Html.DisplayFor((model => model.Demographic.PK_DemographicsID), new { id = "PK_DemographicsID" })</td>     
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.fk_StatusID_Demographics)</td> 
       <td>@Html.DisplayFor(model => model.v_L_Statuses.Single(s => s.PK_StatusID == Model.Demographic.fk_StatusID_Demographics).Status, new { id = "Status" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.fk_GenderID)</td> 
       <td>@Html.DisplayFor(model => model.v_L_Genders.Single(s => s.PK_GenderID == Model.Demographic.fk_GenderID).Gender, new { id = "Gender" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.HispanicOrLatino)</td> 
       <td>@Html.CheckBoxFor(model => model.Demographic.HispanicOrLatino, new { disabled = "disabled", id = "HispanicOrLatino" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DateOfBirth)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.DateOfBirth, new { id = "DateOfBirth" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DateOfBirthIncomplete)</td> 
       <td>@Html.CheckBoxFor(model => model.Demographic.DateOfBirthIncomplete, new { disabled = "disabled", id = "DateOfBirthIncomplete" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.BirthMonth)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.BirthMonth, new { id = "BirthMonth" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.BirthDay)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.BirthDay, new { id = "BirthDay" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.BirthYear)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.BirthYear, new { id = "BirthYear" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DateOfDeath)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.DateOfDeath, new { id = "DateOfDeath" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DateOfDeathIncomplete)</td> 
       <td>@Html.CheckBoxFor(model => model.Demographic.DateOfDeathIncomplete, new { disabled = "disabled", id = "DateOfDeathIncomplete" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DeathMonth)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.DeathMonth, new { id = "DeathMonth" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DeathDay)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.DeathDay, new { id = "DeathDay" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DeathYear)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.DeathYear, new { id = "DeathYear" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.Deceased)</td> 
       <td>@Html.CheckBoxFor(model => model.Demographic.Deceased, new { disabled = "disabled", id = "Deceased" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.DeathCertificateNumber)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.DeathCertificateNumber, new { id = "DeathCertificateNumber" })</td> 
      </tr> 
      <tr> 
       <td>@Html.DisplayNameFor(model => model.Demographic.Comments)</td> 
       <td>@Html.DisplayFor(model => model.Demographic.Comments, new { id = "Comments" })</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

<div id="DemographicsEdit" style="display:none;">@Html.Partial("_DemographicsEdit", Model)</div> 

<script type="text/javascript"> 
    function OpenDemographicsEdit(pkid) { 
     $('#DemographicsEdit').dialog('open');   
    }; 

    $('#DemographicsEdit').dialog({ 
     autoOpen: false, title: 'Edit Demographics', modal: true, width: 800, resizable: false, cache: false, 
     buttons: { 
      "Save": function() { 
       $('#DemographicsEditForm').submit(); 
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      $(this).dialog("close"); 

     } 
    }).height("auto"); 

    function SaveDemographics(data, status, xhr) { 
     if ($.isArray(data)) { 
      $(function() { ModifyDemographicsTable(data) }); 
      $('#DemographicsMessage').html("Saved demographics"); 
     } 
     else { 
      $('#DemographicsMessage').html(data); 
     } 
    }; 

    function ModifyDemographicsTable(data){ 
     var content = ''; 
     content += '<tbody id="DemographicsTableBody">'; 
     for (var i = 0; i < data.length; i++) { 
      var holchkd = ''; 
      var idobchkd = ''; 
      var idobchkd = ''; 
      var dcchkd = ''; 
      if (data[i].HispanicOrLatino == true) { var holchkd = 'checked="checked"'; }; 
      if (data[i].IncompleteDOB == true) { var idobchkd = 'checked="checked"'; }; 
      if (data[i].IncompleteDOD == true) { var idodchkd = 'checked="checked"'; }; 
      if (data[i].Deceased == true) { var dcchkd = 'checked="checked"'; }; 
      var jsdob = moment(data[i].DateOfBirth).format("l"); 
      var jsdod = moment(data[i].DateOfDeath).format("l"); 
      content += '<tr><td style="width:200px">Demographics ID</td><td>' + data[i].PK_DemographicsID + '</td></tr>'; 
      content += '<tr><td>Status</td><td>' + data[i].Status + '</td></tr>'; 
      content += '<tr><td>Gender</td><td>' + data[i].Gender + '</td></tr>'; 
      content += '<tr><td>Hispanic Or Latino</td><td><input ' + holchkd + ' class="check-box" disabled="disabled" type="checkbox" /></td></tr>'; 
      content += '<tr><td>Date of Birth</td><td>' + jsdob + '</td></tr>'; 
      content += '<tr><td>Incomplete DOB</td><td><input ' + idobchkd + ' class="check-box" disabled="disabled" type="checkbox" /></td></tr>'; 
      content += '<tr><td>Birth Month</td><td>' + data[i].BirthMonth + '</td></tr>'; 
      content += '<tr><td>Birth Day</td><td>' + data[i].BirthDay + '</td></tr>'; 
      content += '<tr><td>Birth Year</td><td>' + data[i].BirthYear + '</td></tr>'; 
      content += '<tr><td>Date of Death</td><td>' + jsdod + '</td></tr>'; 
      content += '<tr><td>Incomplete DOD</td><td><input ' + idodchkd + ' class="check-box" disabled="disabled" type="checkbox" /></td></tr>'; 
      content += '<tr><td>Death Month</td><td>' + data[i].DeathMonth + '</td></tr>'; 
      content += '<tr><td>Death Day</td><td>' + data[i].DeathDay + '</td></tr>'; 
      content += '<tr><td>Death Year</td><td>' + data[i].DeathYear + '</td></tr>'; 
      content += '<tr><td>Deceased</td><td><input ' + dcchkd + ' class="check-box" disabled="disabled" type="checkbox" /></td></tr>'; 
      content += '<tr><td>Death Certificate Number</td><td>' + data[i].DeathCertificateNumber + '</td></tr>'; 
      content += '<tr><td>Comments</td><td>' + data[i].Comments + '</td></tr>'; 
     } 
     content += '</tbody>'; 
     $('#DemographicsTableBody').replaceWith(content); 

    }; 
</script> 

Answer 1

說下面是你的阿賈克斯開始形式：

@using(Ajax.BeginForm("DetailOnePost", "Controller", new AjaxOptions() { UpdateTargetId = "detailOne", InsertionMode = InsertionMode.Replace })){ 
    // Your edit form is here 
} 

及以下爲您Details局部視圖，包含一個<div>，便於更換內：

<div id="detailOne"> 
    @Html.Partial("PartialName", passmodelforinitialpageload) 
</div> 

現在你[R後的行動：

public PartialViewResult DetailOnePost(YourModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     // Save your data 
     var updatedData = // Retrieve updated details; 
     return PartialView("PartialName", updatedData); 
    } 
    // Handle errors if model state is not valid 
} 

使用這種方法，你就可以擺脫ModifyDemographicsTable JavaScript函數。