我在父视图的顶部渲染局部视图如下按钮单击：
$('.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模态弹出，部分视图呈现在它。但是当用户点击保存部分视图时，我将输入的信息保存到数据库中。但我必须在父视图上再次显示弹出来添加另一个用户，直到他们点击取消。请帮助我如何加载部分视图在父视图的顶部。
谢谢
解决方法
我建议你创建一个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,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);
}
}
});
}
