asp.net-mvc – 在父视图顶部的Jquery模态弹出窗口中渲染局部视

见下面的例子：

主视图

<button class="AddUser">Add User</button>
<div id="AddUserForm"></div>

部分视图(AddUserPartialView)

@model  Demo.Models.AddUserViewModel
<form id="myForm">
   <div id="AddUserForm">
       @Html.LabelFor(m => m.Name)
       @Html.TextBoxFor(m => m.Name)
    </div>
</form>

Js文件

$('.AddUser').on('click',function () {
    $("#AddUserForm").dialog({
        autoOpen: true,open: function () {
            $(this).load('@Url.Action("AddUserPartialView","Home")');
        },buttons: {
            "Add User": function () {
                addUserInfo();
            },Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
    return false;
});
function addUserInfo() {
    $.ajax({
        url: '@Url.Action("AddUserInfo","Home")',type: 'POST',data: $("#myForm").serialize(),success: function(data) {
            if (data) {
                $(':input','#myForm')
                  .not(':button,:submit,:reset,:hidden')
                  .val('')
                  .removeAttr('checked')
                  .removeAttr('selected');
            }
        }
    });
}

行动

public PartialViewResult AddUserPartialView()
{
    return PartialView("AddUserPartialView",new AddUserViewModel());
}

[HttpPost]
public JsonResult AddUserInfo(AddUserViewModel model)
{
    bool isSuccess = true;
    if (ModelState.IsValid)
    {
        //isSuccess = Save data here return boolean
    }
    return Json(isSuccess);
 }

更新

如果要在保存数据时出现错误时显示错误消息，可以按如下所示更改AddUserInfo操作中的Json结果：

[HttpPost]
public JsonResult AddUserInfo(AddUserViewModel model)
{
    bool isSuccess = false;
    if (ModelState.IsValid)
    {
        //isSuccess = Save data here return boolean
    }
    return Json(new { result = isSuccess,responseText = "Something wrong!" });
}

然后在局部视图中添加一个div元素：

@model  MyParatialView.Controllers.HomeController.AddUserViewModel

<div id="showErrorMessage"></div>
<form id="myForm">
    <div id="AddUserForm">
        @Html.LabelFor(m => m.Name)
        @Html.TextBoxFor(m => m.Name)
    </div>
</form>

最后，addUserInfo的JS函数应该是这样的：

function addUserInfo() {
    $.ajax({
        url: '@Url.Action("AddUserInfo",success: function (data) {
            if (data.result) {
                $(':input','#myForm')
                    .not(':button,:hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            } else {
                $("#showErrorMessage").append(data.responseText);
            }
        }
    });
}