Llamada ajax en MVC usando el $.post de jquery

Omar del Valle Rodríguez — Mon, 29 Nov 2010 15:22:00 GMT

Hace poco pasé por la necesidad de enviar un formulario al servidor usando ajax en una aplicación MVC. El problema principal que tenía era que el formulario incluía un número “grande” de campos (o no tan grande pero resulta que soy un vago), por lo que no quería pasar el trabajo de tener que convertir todo eso a JSON como parámetros individuales. Tampoco deseaba, evidentemente, tener un método en el controlador al cual le llegaran 5 o más parámetros.

Pues bien… la vista en mi caso estaba diseñada para trabajar con un modelo definido por mí:

public class CustomerModel
{
   public string UserName { get; set; }
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public string Language { get; set; }

   [DataType(DataType.Password)]
   public string Password { get; set; }
   [DataType(DataType.Password)]
   public string ConfirmPassword { get; set; }
}

La vista:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<CustomerModel>" %>

Mi formulario:

<% using (Html.BeginForm()) { %>
<div>
   <fieldset>
      <legend>Customer Information</legend>
      <div class="editor-label">
        <%: Html.LabelFor(m => m.FirstName) %>
      </div>
      <div class="editor-field">
        <%: Html.TextBoxFor(m => m.FirstName) %>
      </div>
      <div class="editor-label">
        <%: Html.LabelFor(m => m.LastName) %>
      </div>
      <div class="editor-field">
        <%: Html.TextBoxFor(m => m.LastName) %>
      </div>
      <div class="editor-label">
        <%: Html.LabelFor(m => m.UserName) %>
      </div>
      <div class="editor-field">
        <%: Html.TextBoxFor(m => m.UserName) %>
      </div>
      <div class="editor-label">
        <%: Html.LabelFor(m => m.Password) %>
      </div>
      <div class="editor-field">
        <%: Html.PasswordFor(m => m.Password) %>
      </div>
      <div class="editor-label">
        <%: Html.LabelFor(m => m.ConfirmPassword) %>
      </div>
      <div class="editor-field">
        <%: Html.PasswordFor(m => m.ConfirmPassword) %>
      </div>
      <p>
        <input type="button" onclick="uploadCustomerForm()" value="Register" />
      </p>
    </fieldset>
</div>
<% } %>

La solución ideal para mí era poder pasar un objeto en javascript desde el cliente y que el controlador lo recibiera como el modelo asociado a la vista. Yo quería que el método en mi controlador se viera así:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveCustomer(CustomerModel model)
{
return Content(string.Format("This is my content: {0}, {1}",
model.LastName, model.FirstName));
}

Después de mucho andar por los rincones oscuros del mundo Google, hallé una solución limpia, elegante y simple.

Mi script:

function insertCallback(data)
{
alert(data);
}

</script>

Pues sí, así de simple resultó pasar el formulario al controlador y que este recibiera como parámetro el modelo asociado a la vista. Esta instrucción resume todo lo que necesitamos:

var data = $('form').serialize();

Pero, ¿dónde está el truco?

Cada elemento input de mi formulario se crea usando el helper Html.TextBoxFor el cual es asociado a una propiedad del modelo. Esto, si miramos el HTML generado, crea un input cuyo ID Name corresponde con el nombre de la propiedad que, al ser serializado, crea un JSON que hace corresponder ID=valor una representación en el formato clásico de URL (param=valor&m2=valor2&...).

Formulario serializado:

FirstName=aa&LastName=bb&UserName=aa.bb&Password=123&ConfirmPassword=123

Una curiosidad a tener en cuenta es: si miran el formulario podrán ver que he dejado fuera del formulario la propiedad Language de mi modelo, esto lo he hecho con toda intensión para que veamos que no es necesario que nuestro formulario se corresponda 100% con el modelo que tenemos asociado a la vista, pero, sí es necesario que cada ID Name de los elementos del formulario se corresponda con una propiedad llamada exactamente igual a la existente en el modelo.

Con esto… ya tenemos un post por ajax al controlador que recibe como parámetro el modelo asociado a la vista. Esto es posible también hacerlo usando ASP.NET, pero eso lo dejo para un próximo artículo.

;)

JSONP

Omar del Valle Rodríguez — Sat, 28 Nov 2009 23:28:00 GMT

Este ejemplo me decidí a escribirlo después de leer la serie de artículos publicados en el blog de José Alarcón sobre JSONP.

1- Llamadas AJAX a servidores remotos.
2- Soporte desde ASP.NET AJAX 4.0
3- Cuestiones de seguridad y ASP.NET rompiendo la compatibilidad en 3.5

Requisitos: Crear un input tipo text con auto completamiento de las ciudades de España. Para esto usaré geonames.org, que es un servicio gratuito que nos permite obtener geo-localizaciones a partir de determinados parámetros y cuya documentación la encontramos en su sitio:

http://www.geonames.org/export/geonames-search.html

Como JQuery está de moda… y este soporta JSONP, voy a usar el pluging que existe para el auto-completamiento y que lo pueden encontrar en http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.

Con esto creo que completo todo lo que necesito así que vamos con el código. Empezamos con lo de siempre, indicando cual es el control al cual le vamos a aplicar el “autocomplete” y cuál será la fuente de datos.

$("#txt_city").autocomplete("http://ws.geonames.org/searchJSON",

Vamos a realizar un pequeño truco, porque al final el objetivo de este artículo es justificar el uso de JSONP, así empezamos indicando los parámetros del “autocomplete” esperando como respuesta un JSON.

dataType: 'json',

Seguimos especificando una función que realizará un Parse de los datos que me retorna geonames, para poder entregárselos al autocomplete de la manera que él lo entiende.

parse: function(data)
{
var rows = new Array();
data = data.geonames;

      for(var i=0; i<data.length; i++)
      {
         rows[i] =
         {
            data:data[i],
            value:data[i].name,
            result:data[i].name
         };
      }

return rows;
},

Nada importante hasta aquí.. una función que convierte el resultado en un arreglo que contiene el dato, el valor de cada elemento y el resultado. Seguimos con la función que se llamará a la hora de mostrar el autocomplete e indicamos que solo mostraremos el nombre de la ciudad.

formatItem: function(row, i, n)
{
return row.name;
},

Continuamos incluyendo los parámetros necesarios para realizar la búsqueda (País, indicar que no deseo lugares geográficos, etc.) Todos estos parámetros están bien documentados en el sitio de geoname.

extraParams:
{
      q: '',
      limit: '',
      country: 'ES',
      featureClass: 'P',
      maxRows: 50,
      name_startsWith: function ()
      {
        return $("#txt_city").val()
      }
},

Luego decimos que nuestro autocomplete espera un máximo de 50 elementos y listo.

max: 50

Con definir nuestro html con un input cuyo ID=”txt_city”, tendremos nuestro autocomplete, así que ejecutamos….

OPS!!! Acceso denegado… Este error proviene precisamente por la imposibilidad de hacer un pedido a un dominio que no es el nuestro, estamos intentando hacer un Cross Site Scripting.

¿Cómo lo resolvemos? Un buen comienzo es estudiando la serie de artículos propuestos al inicio de este post, pero para nuestro ejemplo, JQuery lo hace tan simple como ya nos tiene acostumbrado. Cambiamos el tipo de dato que espera el autocomplete a jsonp:

dataType: 'jsonp',

y….

We are happy :-)

Aquí les dejo un enlace al ejemplo completo, que no es más que una simple página html ya que no usamos ASP.NET para nada, es código html duro y puro.

Ejemplo

Omar del Valle Rodríguez : ajax

Llamada ajax en MVC usando el $.post de jquery

JSONP