asp.net-mvc 在父视图顶部的 Jquery 模态弹出窗口中呈现部分视图

Render a partial view inside a Jquery modal popup on top of a parent view

提问by user1882705

I am rendering a partial view on top of the parent view as follows on a button click:

我在单击按钮时在父视图之上呈现局部视图，如下所示：

 $('.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")');
            }
        });

 });

When user click AddUser button i am giving a jquery modal pop up with partial view rendered in it. But when user click save on partial view I am saving the entered information into database. But i have to show the pop up again on the parent view to add another user, until they click on cancel. Please help me how to load the partial view on top of the parent view.

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

Thanks

谢谢

回答by Lin

I suggest you create a jquery ajax function to post form data, then use the call back function to clear the form data. This way unless the user clicks the cancel button, the dialog is always showing.

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

See below example:

见下面的例子：

Main View

主视图

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

Partial View(AddUserPartialView)

局部视图(AddUserPartialView)

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

Js file

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

Action

行动

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

Update

更新

If you want to show the error message when errors occurred while saving the data, you could change the Json result in AddUserInfoaction like below:

如果您想在保存数据时发生错误时显示错误消息，您可以更改 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!" });
}

then add a divelement in your partial view:

然后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>

finally, the addUserInfoJS function should be like :

最后，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);
            }
        }
    });
}