Cómo hacer un formulario .NET MVC dentro de un modal usando jQuery con validación

Solución:

Puede usar los scripts de validación MVC incorporados junto con las anotaciones de datos en su modelo

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

Haga una vista parcial para mantener su forma modal.

_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>
}

Luego haga referencia a esto en su cuadro modal. Si desea un modelo precargado, deberá representar una acción:

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

Si solo desea un formulario en blanco, puede usar:

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

La acción usa el id parámetro para recuperar y completar el modelo

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

    return PartialView("_AccountProfileEdit", model);
}

POSTE AJAX

Ahora necesitará AJAX para enviar este formulario. Si confía en un envío de formulario estándar, el navegador navegará fuera de su página (y cerrará su modal).

$("#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);
        }
    });
});

Necesitas usar el delegado de eventos. $(staticParent).on(event, target, handler) para el evento de envío porque el contenido del formulario puede reemplazarse más adelante.

Acción posterior

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

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

    return PartialView("_AccountProfileEdit", model);
}

Los scripts de validación del lado del cliente deberían evitar que se envíen. Pero si eso de alguna manera falló o si no puede validar algo en el cliente, entonces tiene ModelState.IsValid. También puede invalidar algo del lado del servidor manualmente.

_AccountEditSuccess.cshtml

Y la vista parcial del “éxito”.

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

No válido es un fracaso, ¿verdad?

Desde su controlador de éxito AJAX tiene

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

Pero el problema aquí es que no sabemos si está obteniendo un “éxito” o un “error de validación”. Añadiendo un error: function(err){ } handler no ayudará porque el error de validación se considera un HTTP 200 respuesta. En ambos casos, el contenido div se reemplaza, el usuario deberá cerrar manualmente el modal. Allí están formas de pasar datos adicionales para distinguir ambas condiciones, pero esa es otra publicación de respuesta larga.

Considere poner un iframe dentro del div modal, en lugar de representar la vista parcial, de esta manera puede desarrollar la sección modal de la misma manera que desarrolla páginas simples, que envían, modelan, requieren, etc.

Por aquí:

<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="https://foroayuda.es/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>

---

---

Utiliza Nuestro Buscador