Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

ASP.NET MVC: Formulario con AJAX y validación con Javascript
Actualizado el 21 Enero, 2016 y leído 10,787 veces
Calificación: 10.00 / 10

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

Anexsoft

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 nugget, 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:

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.