Peticiones Ajax desde ASP.NET MVC

Nuestro fragmento de hoy trata de facilitar algo muy común en nuestras aplicaciones: peticiones Ajax desde ASP.NET MVC a servidor intercambiando información mediante Json.

Para poder realizar la petición desde el cliente, vamos a crear un evento que se dispare al hacer clic en un botón, dicho botón recogerá los datos y los pasará al servidor mediante Json. Ojo!! Las propiedades del objeto Json han de llamarse igual (incluido case sensitive) que las del objeto que pretendemos gestionar en el servidor, ya que va a ser serializado automáticamente. La petición asíncrona la haremos desde Javascript (jQuery) de la siguiente manera:

// Evento que envía una petición Ajax al servidor $('#botonPrueba').click(function(e) { var coche = { marca: $('#marca').val().trim(), modelo: $('#modelo').val() }; $.ajax({ type: "POST", url: "http://localhost/Coches/NuevoCoche", content: "application/json; charset=utf-8", dataType: "json", data: JSON.stringify(data), success: function(d) { if (d.success == true) alert('Has introducido un nuevo coche!!'); else {} }, error: function (xhr, textStatus, errorThrown) { alert('Error!!'); } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// Evento que envía una petición Ajax al servidor $('#botonPrueba').click(function(e) {        var coche = {         marca: $('#marca').val().trim(),         modelo: $('#modelo').val()     };       $.ajax({         type: "POST",         url: "http://localhost/Coches/NuevoCoche",         content: "application/json; charset=utf-8",         dataType: "json",         data: JSON.stringify(data),         success: function(d) {             if (d.success == true)                 alert('Has introducido un nuevo coche!!');             else {}         },         error: function (xhr, textStatus, errorThrown) {               alert('Error!!');         }     }); });

En el código del controlador, nos crearemos un método que recibirá un parámetro que será del tipo de la clase a la que queramos serializar y mediante Data Annotations indicaremos que se le va realizar una llamada por post, veamos el ejemplo:

460// Teniendo esta clase... public class Coche { public string marca {get; set;} public string modelo {get; set;} } // Esté metodo lo mostramos como ejemplo private bool InsertarCoche(Coche nuevoCoche) { // Método que inserta en BBDD. } [HttpPost] // El Json recibido será serializado automáticamente al objeto nuevo cocche teniendo en cuenta que las propiedades han de tener el mismo nombre public JsonResult NuevoCoche(Coche nuevoCoche) { if(InsertarCoche(nuevoCoche)) return Json("'Success':'true'"); else return Json(String.Format("'Success':'false','Error':'Ha habido un error al insertar el registro.'")); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

460// Teniendo esta clase... public class Coche {     public string marca {get; set;} public string modelo {get; set;} }   // Esté metodo lo mostramos como ejemplo private bool InsertarCoche(Coche nuevoCoche) {   // Método que inserta en BBDD.    }   [HttpPost] // El Json recibido será serializado automáticamente al objeto nuevo cocche teniendo en cuenta que las propiedades han de tener el mismo nombre public JsonResult NuevoCoche(Coche nuevoCoche) {     if(InsertarCoche(nuevoCoche))       return Json("'Success':'true'");     else       return Json(String.Format("'Success':'false','Error':'Ha habido un error al insertar el registro.'")); }

Esperamos que os pueda ser de ayuda!