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);
 }

<强>更新

如果要在保存数据时出现错误时显示错误消息，可以在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", "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);
            }
        }
    });
}

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

1 个答案: