ASP.NET MVC: Formulario con AJAX y validación con Javascript

Ahora vamos a validar nuestro formulario desde el lado del cliente usando jquery unobtrusive y procesar la información con AJAX.

Rodríguez Patiño, Eduardo
26,694 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Señores, lo que tenemos que hacer ahora es agregar un par de plugins de jquery a nuestro proyecto, uno que se llama jquery unobtrusive, el cual lo descargamos desde el NuGet, y el otro que se llama jquery form el cual lo bajamos de esta web http://malsup.com/jquery/form/.

Adjuntado los plugins a nuestro Layout

Agregamos las referencias al final de nuestro Layout.cshtml

<script src="~/Assets/js/jquery.validate.min.js"></script>
    <script src="~/Assets/js/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Assets/js/jquery.form.min.js"></script>
</body>
</html>

Creando un evento para validar y enviar mediante ajax

Vamos a declarar un evento submit a nuestro formulario, y para validar los controles y enviar la información por AJAX solo debemos hacer lo siguiente:

$(document).ready(function () {
    $("#frm-alumno").submit(function () {
        var form = $(this);

        if (form.validate())
        {
            form.ajaxSubmit({
                dataType: 'JSON',
                type: 'POST',
                url: form.attr('action'),
                success: function (r) {
                    if (r.respuesta) {
                        window.location.href = r.redirect;
                    }
                    else {
                        $("#cursos-validacion").text(r.error)
                                                .show();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        return false;
    })
})

El form.validate() se encarga de mostrar las validaciones que hemos definido en las propiedades de la clase Alumno, este retorna un true o false.

Creando un JsonResult en nuestro controlador

Para recibir la data y procesar vamos a crear un JsonResult ya que vamos a responder desde el servidor un mensaje de éxito o error en caso que ocurriera algo.

Hemos creado una clase llamada ResponseModel que es bastante simple, en la práctica tengo una clase más robusta pero para el ejemplo que estamos haciendo es más que suficiente. Esta clase sera la que va a responder nuestra acción actual enviando información al cliente y ya este será el encargado de ver que es lo que hace con la información respondida.

public class ResponseModel
{
    public bool respuesta { get; set; }
    public string redirect { get; set; }
    public string error { get; set; }
}

Nuestra acción queda de la siguiente manera:

[HttpPost]
public JsonResult Guardar(Alumno model, int[] cursos_seleccionados = null)
{
    var respuesta = new ResponseModel
    {
        respuesta = true,
        redirect = "/home/crud/" + model.id,
        error = ""
    };

    if (cursos_seleccionados != null)
    {
        foreach (var c in cursos_seleccionados)
            model.Cursos.Add(new Curso { id = c });
    }
    else
    {
        ModelState.AddModelError("cursos", "Debe seleccionar por lo menos un curso");
        respuesta.respuesta = false;
        respuesta.error = "Debe seleccionar por lo menos un curso";
    }

    if (ModelState.IsValid)
    {
        model.Guardar();
    }

    return Json(respuesta);
}

Entonces, el evento que habíamos declarado para el formulario ya sabe como procesar la data.

success: function (r) {
    if (r.respuesta) {
        window.location.href = r.redirect;
    }
    else {
        $("#cursos-validacion").text(r.error)
                                .show();
    }
}

Las propiedades que maneja el objeto "r", son las que ha generado la respuesta de nuestra acción Guardar, la cual ha convertido el objeto ResponseModel a Json.

Conclusión

Validar de esta manera usando los Data Annotations y jQuery Unobtrusive nos da performance, ya que la información es validada desde el lado del cliente, además, si por A o B el javascript estuviera deshabilitado, la validación aún va a persistir ya que el servidor valida nuevamente que todo lo enviado cumpla las reglas que los Data Annotations han definido.

Partes

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín