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!!');
}
});
});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>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!!');
}
});
});Podemos observar que en la propiedad «data» hemos indicado el identificador del div y el tipo de campos que queremos tomar.
De esta forma optimizamos el código y su mantenimiento ya que si algún día se añaden nuevos campos al formulario no es necesario que hagamos nada más para que el cliente envíe también los datos al servidor.
¡Esperemos que sea de utilidad!
