使用局部视图更新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

说以下是您的Ajax开始表单：

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

现在你的帖子了：

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函数。