在父视图之上的 Jquery 模态弹出窗口中呈现局部视图 [英] Render a partial view inside a Jquery modal popup on top of a parent view
问题描述
我在单击按钮时在父视图之上呈现局部视图，如下所示:
$('.AddUser').on('click', function () {$("#AddUserForm").dialog({自动打开:真，位置:{我的:中心"，在:顶部+350"，:窗口}，宽度:1000，可调整大小:假，title: '添加用户表单',模态:真，打开:函数(){$(this).load('@Url.Action("AddUserAction", "UserController")');}});});当用户单击 AddUser 按钮时，我会弹出一个 jquery 模式弹出窗口，其中呈现部分视图.但是当用户在局部视图上单击保存时，我将输入的信息保存到数据库中.但是我必须在父视图上再次显示弹出窗口以添加另一个用户，直到他们单击取消.请帮助我如何在父视图之上加载局部视图.
谢谢
建议你创建一个jquery ajax函数来发布表单数据，然后使用回调函数来清除表单数据.这样，除非用户单击取消按钮，否则对话框始终显示.
见下例:
主视图
<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)</表单>
Js 文件
$('.AddUser').on('click', function () {$("#AddUserForm").dialog({自动打开:真，位置:{我的:中心"，在:顶部+350"，:窗口}，宽度:1000，可调整大小:假，title: '添加用户表单',模态:真，打开:函数(){$(this).load('@Url.Action("AddUserPartialView", "Home")');},纽扣: {添加用户":函数(){添加用户信息()；},取消:函数(){$(this).dialog("close");}}});返回假；});函数 addUserInfo() {$.ajax({url: '@Url.Action("AddUserInfo", "Home")',类型:'POST'，数据:$("#myForm").serialize(),成功:功能(数据){如果(数据){$(':input', '#myForm').not(':button, :submit, :reset, :hidden').val('').removeAttr('检查').removeAttr('选择');}}});}行动
public PartialViewResult AddUserPartialView(){return PartialView("AddUserPartialView", new AddUserViewModel());}[HttpPost]公共 JsonResult AddUserInfo(AddUserViewModel 模型){bool isSuccess = true;如果(模型状态.IsValid){//isSuccess = 在此处保存数据返回布尔值}返回 Json(isSuccess);}更新
如果您想在保存数据时发生错误时显示错误消息，您可以在 AddUserInfo 操作中更改 Json 结果，如下所示:
[HttpPost]公共 JsonResult AddUserInfo(AddUserViewModel 模型){bool isSuccess = false;如果(模型状态.IsValid){//isSuccess = 在此处保存数据返回布尔值}return Json(new { result = isSuccess, responseText = "出错了！" });}然后在你的局部视图中添加一个 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)</表单>
最后，addUserInfo JS 函数应该是这样的:
function addUserInfo() {$.ajax({url: '@Url.Action("AddUserInfo", "Home")',类型:'POST'，数据:$("#myForm").serialize(),成功:功能(数据){如果(数据.结果){$(':input', '#myForm').not(':button, :submit, :reset, :hidden').val('').removeAttr('检查').removeAttr('选择');} 别的 {$("#showErrorMessage").append(data.responseText);}}});}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.
Thanks
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.
See below example:
Main View
<button class="AddUser">Add User</button>
<div id="AddUserForm"></div>
Partial View (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
$('.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 AddUserInfo action like below:
[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 div element in your partial view:
@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 addUserInfo JS function should be like :
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 模态弹出窗口中呈现局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
