使用模型弹出窗口更新模型更新后的部分视图

Question

我有索引页面，其中包含2个部分视图。一个用于显示角色，另一个用于显示相应的权限。

@model IEnumerable<sample.Models.Role_Privilege_Map>

@{
    ViewBag.Title = "RolePrivilgeMapping";
}

<h2>RolePrivilgeMapping</h2>

<script>

    $(document).ready(function () {
        registerTableClick();
        //$("#tblRole tbody tr:first").trigger();
    });

    function registerTableClick() {
        $("#tblRole tbody tr").on("click", function () {

            $(this).siblings().removeClass('selected_row');

            $(this).addClass("selected_row");

            var roleId = parseInt($(this).find("td:eq(0)").text());
            loadPrivilege(roleId);
        });


        function loadtrackPrivilege(roleId) {
            $("#PrivilegeWrapper").load("@Url.Action("PrivilegesPartial", "RolePrivilegeMapping")",
                                         { 'roleID': roleId },
                                        function (response, status, xhr) {
                                            if (status == "error") {
                                                alert("An error occurred while loading privileges.");
                                            }
                                        });
        }


    }

</script>

<div id="RolePrivilgeMappingWrapper">

    <div class="float-left" id="roleWrapper">
        @Html.Partial("_Role", sample.Models.DataProvider.DataProvider.GetRoleNames())
    </div>

    <div class="float-left" id="PrivilegeWrapper">
        @Html.Partial("_Privilege", sample.Models.DataProvider.Provider.GetPrivilegeNames())
    </div>


</div>

这是我的_Role.cshtml

@model IEnumerable<sample.Models.webpages_Roles>

@{
    ViewBag.Title = "Index";
}

<script type="text/ecmascript">
    $(document).ready(function () {

        $.ajaxSetup({ cache: false });

        $(".editDialog").live("click", function (e) {
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Edit Role',
                autoOpen: false,
                resizable: false,
                height: 255,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });
    });
</script>

<div class="settingsTable" style="position: relative; width: 100%; margin: 0 auto">

    <div style="width: 50%; margin: 0 auto">
        <div style="width: 50%; margin: 0 auto">
            <h2>Role</h2>
        </div>
    </div>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table id="tblRole">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.RoleId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RoleName)
            </th>
            <th>Action</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleName)
                </td>
                <td>
                    @Html.ActionLink("Edit", "OpenEditRoleDialog", "RolePrivilegeMapping", new { id = item.RoleId }, new { @class="editDialog"}) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>
        }
    </table>

    <div id="dialog-edit" style="display: none">
    </div>
</div>

在角色局部视图上，我有显示的每一行的编辑链接。

这是我的_editrole.cshtml

  @model sample.Models.webpages_Roles

        @{
            ViewBag.Title = "Edit";
        }

        <h2>Edit</h2>

        @using (Ajax.BeginForm("EditRole", "RolePrivilegeMapping", new AjaxOptions { HttpMethod = "POST" }))
        {
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>webpages_Roles</legend>

                @Html.HiddenFor(model => model.RoleId)

                <div class="editor-label">
                    @Html.LabelFor(model => model.RoleName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.RoleName)
                    @Html.ValidationMessageFor(model => model.RoleName)
                </div>

                <p>
                    <input type="submit" value="Save" />
                </p>
            </fieldset>
        }

现在，当我点击编辑链接时，会显示一个jquery模式框以供编辑细节。我以异步方式提交更改

@using (Ajax.BeginForm("EditRole", "RolePrivilegeMapping", new AjaxOptions { HttpMethod = "POST" }))

编辑方法是

 public ActionResult EditRole(webpages_Roles webpages_roles)
        {
            if (ModelState.IsValid)
            {
                db.Entry(webpages_roles).State = EntityState.Modified;
                db.SaveChanges();
            }

            return View("index");
        }

我的问题是 1.对话框未关闭。我必须手动点击十字架 酒吧。
2.在我必须刷新页面之前，角色部分视图不会更新。

我点了这个链接http://www.mindstick.com/Articles/279bc324-5be3-4156-a9e9-dd91c971d462/CRUD%20operation%20using%20Modal%20dialog%20in%20ASP%20NET%20MVC#.VVlyBLmqpHx