Peticiones Ajax desde ASP.NET MVC (Parte II)

Luis del Valle Hernández

hace 10 años

En este fragmento de código os mostramos cómo realizar llamadas Ajax en un proyecto ASP.NET MVC pero no queríamos dejar de mostrar otra forma de realizarlo que en algunos casos puede ser más óptimo y más eficiente.

Antes de nada, es importante indicar que este ejemplo solo nos servirá siempre y cuando el formulario que vayamos a pasar al backend corresponda al modelo que estemos gestionando y que tengamos implementado en la vista.

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

// Evento que envía una petición Ajax al servidor

$('#botonPrueba').click(function(e) {

$.ajax({

type: "POST",

url: "/Coches/NuevoCoche",

content: "application/json; charset=utf-8",

dataType: "json",

data: $('#IdDelFormulario').serialize(),

success: function(d) {

if (d.success == true)

alert('Has introducido un nuevo coche!!');

else {}

error: function (xhr, textStatus, errorThrown) {

alert('Error!!');

}

});

Podemos observar que lo único que hemos tenido que hacer es indicarle el identificador del formulario y automáticamente Jquery ya sabe que es lo que tiene que enviar al servidor, este método es el más eficiente siempre y cuando todos los campos del formulario se correspondan con el modelo que estamos gestionando.

En el caso de que no se corresponda exactamente la mejor opción creemos que es la que ya os indicamos en el fragmento anteriormente citado o la siguiente opción: englobar todos los elementos del formulario en un «div» e indicárselo en el data de una forma similar aunque con algún matiz, veamos cómo englobaríamos los campos del formulario en la vista:

<!-- En nuestra vista tenemos unos campos y los hemos englobado en un div -->
<div id="camposCoche">
  <input type="text" id="marca"/>
  <input type="text" id="modelo"/>
</div>

</div>

Ahora veamos el código de Javascript que manda los datos de forma asíncrona al servidor:

// Evento que envía una petición Ajax al servidor
$('#botonPrueba').click(function(e) {
    $.ajax({
        type: "POST",
        url: "/Coches/NuevoCoche",
        content: "application/json; charset=utf-8",
        dataType: "json",
        // De la siguiente manera indicamos que del div tome los input.
        data: $('#camposCoche input').serialize(),
        success: function(d) {
            if (d.success == true)
                alert('Has introducido un nuevo coche!!');
            else {}
        },
        error: function (xhr, textStatus, errorThrown) {
              alert('Error!!');
        }
    });
});