Как создать форму .NET MVC внутри модала с помощью jQuery с проверкой

Ответ 1

Вы можете использовать встроенные сценарии проверки MVC вместе с аннотациями данных на вашей модели

public class AccountProfileEditViewModel
{
    [Display(Name = "Address")]
    [Required()]
    [StringLength(200)]
    public string Address { get; set; }
}

Сделайте частичный вид для хранения вашей модальной формы.

_AccountProfileEdit.cshtml

@model AccountProfileEditViewModel

@using(Html.BeginForm("AccountProfileEdit", "Account",
           FormMethod.Post, new { id = "form-accountedit-appt" }) {
    @Html.ValidationSummary(true)

    @Html.LabelFor(m => m.Address)
    @Html.TextBoxFor(m => m.Address)
    @Html.ValidationMessageFor(m => m.Address)
    <button type="submit">Edit</button>
}

Затем укажите это в своем модальном поле. Если вам нужна предварительно заполненная модель, вам необходимо выполнить действие:

<div class="modal-body" id="form-container">
    @Html.Action("AccountProfileEdit", "Account", new { id=account.Id })
</div>

Если вам просто нужна пустая форма, вы можете просто использовать:

<div class="modal-body" id="form-container">
    @Html.Partial("_AccountProfileEdit")
</div>

Действие использует параметр id для извлечения и заполнения модели

[HttpGet]
public ActionResult AccountProfileEdit(int id)
{
    AccountProfileEditViewModel model = db.GetAccount(id);  // however you do this in your app

    return PartialView("_AccountProfileEdit", model);
}

AJAX POST

Теперь вам понадобится AJAX для отправки этой формы. Если вы полагаетесь на стандартное представление формы, браузер будет перемещаться от вашей страницы (и закрыть ваш модальный).

$("#myModal").on("submit", "#form-accountedit", function(e) {
    e.preventDefault();  // prevent standard form submission

    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        method: form.attr("method"),  // post
        data: form.serialize(),
        success: function(partialResult) {
            $("#form-container").html(partialResult);
        }
    });
});

Вам нужно использовать делегат события $(staticParent).on(event, target, handler) для события отправки, потому что содержимое формы может быть заменено позже.

Сообщение о действии

[HttpPost]
public ActionResult AccountProfileEdit(AccountProfileEditViewModel model)
{
    // Request.Form is model

    if (ModelState.IsValid)
    {
        // do work
        return PartialView("_AccountEditSuccess");
    }

    return PartialView("_AccountProfileEdit", model);
}

Сценарии проверки на стороне клиента должны препятствовать их отправке. Но если это как-то не удалось или если вы не можете проверить что-то на клиенте, то у вас есть ModelState.IsValid. Вы также можете сделать недействительным что-то серверное вручную.

_AccountEditSuccess.cshtml

И частичное представление "успех".

<div>Success! <button>Click to close</button></div>

Недействительно является ошибкой, правильно?

Из вашего обработчика успеха AJAX у вас есть

success: function(partialResult) {
    $("#form-container").html(partialResult);
}

Но проблема здесь в том, что мы не знаем, получаете ли вы "успех" или "отказ проверки". Добавление обработчика error: function(err){ } не поможет, поскольку отказ проверки считается ответом HTTP 200. В обоих случаях содержимое div заменяется, пользователю необходимо вручную закрыть модальный. Есть способы передать дополнительные данные, чтобы отличить оба условия, но это еще один длинный ответ.

Ответ 2

Рассмотрите возможность размещения iframe внутри модального div, вместо рендеринга partialView, таким образом вы можете развить модальный раздел так же, как вы разрабатываете простые страницы, которые представляют, модели, необходимые и т.д.

следующим образом:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modalAE" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3>
        </div>
            <div class="modal-body">
          <iframe src='myApp/AccountProfileEdit'/>
        </div>
        <div class="modal-footer">
            <button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;">Edit Account</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        </div>
        }
    </div>
</div>