在父视图顶部的Jquery模式弹出窗口内渲染局部视图

Question

我在按钮单击时在父视图的顶部呈现部分视图,如下所示:

 $('.AddUser').on('click', function () {
$("#AddUserForm").dialog({
             autoOpen: true,
             position: { my: "center", at: "top+350", of: window },
             width: 1000,
             resizable: false,
             title: 'Add User Form',
             modal: true,
             open: function () {
                 $(this).load('@Url.Action("AddUserAction", "UserController")');
            }
        });

 });

当用户单击AddUser按钮时,我会弹出一个jquery模式,并在其中呈现部分视图.但是当用户在部分视图上单击"保存"时,我将输入的信息保存到数据库中.但我必须在父视图上再次显示弹出窗口以添加其他用户,直到他们单击取消.请帮我如何在父视图的顶部加载局部视图.

谢谢

Answer 1

我建议你创建一个jquery ajax函数来发布表单数据,然后使用回调函数来清除表单数据.这样,除非用户单击取消按钮,否则对话框始终显示.

见下面的例子:

主视图

<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,
        position: { my: "center", at: "top+350", of: window },
        width: 1000,
        resizable: false,
        title: 'Add User Form',
        modal: 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);
 }

更新

如果要在保存数据时出现错误时显示错误消息,可以按如下方式更改Json结果AddUserInfo:

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

最后,addUserInfoJS函数应该是这样的:

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