Отобразить частичный вид внутри модального всплывающего окна JQuery поверх родительского представления

Я делаю частичное представление сверху родительского представления следующим образом:

Когда пользователь нажимает кнопку AddUser, я предоставляю jquery modal всплывающее окно с частичным представлением, отображаемым в нем. Но когда пользователь нажимает "Сохранить" на частичном представлении, я сохраняю введенную информацию в базу данных. Но я должен показать всплывающее снова на родительском представлении, чтобы добавить другого пользователя, пока они не нажмут на отмену. Пожалуйста, помогите мне, как загрузить частичный вид в верхней части родительского представления.

Ответы

Ответ 1

Я предлагаю вам создать функцию 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,
        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, как показано ниже:

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