渲染一个jQuery模式弹出内部的局部视图的父视图顶部 [英] Render a partial view inside a Jquery modal popup on top of a parent view

问题描述

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

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

 });

当用户点击按钮的adduser我给一个jQuery模态弹出在它呈现局部视图。但是，当用户点击保存部分观点我节省了输入的信息到数据库中。但我必须在父视图再次显示弹出添加其他用户，直到他们点击取消。请帮我如何加载父视图顶部的局部视图。

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.

感谢

推荐答案

我建议你创建一个jQuery AJAX功能发布表单数据，然后使用回拨功能来清除表单数据。这样一来，除非用户点击取消按钮，对话框始终显示。

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.

参见下面的例子：

主要查看

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

管窥（AddUserPartialView）

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文件

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

更新

如果你想显示错误消息时错误发生在保存数据时，你可以改变JSON结果在 AddUserInfo 象下面这样的动作：

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

然后添加一个 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功能应该是这样的：

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屋！