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

Question

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

Answer 1

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