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

我在父视图的顶部渲染局部视图如下按钮单击：

$('.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模态弹出，部分视图呈现在它。但是当用户点击保存部分视图时，我将输入的信息保存到数据库中。但我必须在父视图上再次显示弹出来添加另一个用户，直到他们点击取消。请帮助我如何加载部分视图在父视图的顶部。

谢谢

解决方法

见下面的例子：

主视图

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

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!