ASP.NET MVC 3: Unobtrusive AJAX

Una de las características de ASP.NET MVC 3 relacionadas a las peticiones AJAX y a Javascript es “Unobtrusive AJAX”. Que quiere decir esto?… la traducción directa no es del todo clara, así que vamos a decir que básicamente se trata de realizar invocaciones AJAX sin necesidad de “meter” o “mezclar” código Javascript o jQuery dentro de nuestro HTML.

Antes de poder comenzar a utilizarlo debemos hacer una modificación en nuestro web.config para activar dicha funcionalidad. Para ello vamos a setear en true la key UnobtrusiveJavaScriptEnabled:

1: <appSettings> 

2:   <add key="UnobtrusiveJavaScriptEnabled" value= "true"/>  

3: </appSettings>

También podemos habilitar esta funcionalidad en contextos particulares y no de manera global. Para ello en lugar de modificar la entrada anterior en el web.config podemos hacerlo mediante código, por ejemplo en una vista agregando la siguiente linea:

1:  @{ HtmlHelper.UnobtrusiveJavaScriptEnabled = true;  }

También es importante agregar las referencias de los siguientes archivos de script en la vista:

1: <script src=" @Url.Content("~/Scripts/jquery-1.4.1.js")"  

2:         type="text/javascript"></script>

3: <script src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"

4:         type="text/javascript"></script>

Vamos a comentar rápidamente de que se tratan estos scripts. El primero de ellos es la librería de jQuery y el segundo es plugin de que nos provee el framework que nos permitirá trabajar con “Unobtrusive AJAX” en conjunto con jQuery utilizando para ello el helper de Ajax. Nota: anteriormente los AjaxHelper solo funcionaban con los scripts de la Microsoft Ajax Library.

Bien, ya tenemos todo configurado, para darnos una mejor idea de que se trata todo esto vamos a crear un vista desde la cual se podrá calcular la edad  de una persona ingresando su fecha de nacimiento.

Para esto vamos a crear un nuevo controlador llamado DateController y un método de acción Index() que nos va a generar el formulario en cuestión. También crearemos un método HttpPost que se invocará por Ajax al cual le pondremos como nombre CalcularEdad y que es el encargado de  calcular y retornar la edad a la vista:

1: public class DateController : Controller 

2: {

3:     public ActionResult Index()

4:     {

5:         return View();

6:     }

7:

8:     [HttpPost]

9:     public string CalcularEdad(DateTime fecha)

10:     {

11:         return string.Format("{0} años.", ObtenerEdad(fecha));

12:     }

13:

14:     private double ObtenerEdad(DateTime fecha)

15:     {

16:         double edad = DateTime.Now.Subtract(fecha).TotalDays / 365.25;

17:         return System.Math.Truncate(edad);

18:     }

19: }

La vista vamos a armarla de la siguiente forma, utilizando para ello el atributo Ajax (del tipo AjaxHelper) que nos provee el WebViewPage para dibujar el formulario:

1:  @{

2:     ViewBag.Title = "Index" ;

3:     Layout = "~/Views/Shared/_Layout.cshtml" ;

4:  }

5:

6: <script  src=" @Url.Content("~/Scripts/jquery-1.4.1.js")"  

7:         type="text/javascript"></script> 

8: <script  src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"  

9:         type="text/javascript"></script> 

10:

11: <h2> Calculador de edad</h2> 

12:

13:  @using  ((Ajax.BeginForm("CalcularEdad", 

14:                          new  AjaxOptions () { 

15:                             HttpMethod= "Post" , 

16:                             UpdateTargetId= "resultRegion" }

17:                         )

18:         ))

19: {

20:

21:     <label>Fecha de nacimiento:</label>  

22:     <input type="text" name="fechaNacimiento" id="fechaNacimiento"/> 

23:     <input type="submit" value="Calcular"  /> 

24: }

25: <hr/> 

26: <b>Usted tiene </b><div id="resultRegion" /> 

27: <hr/>

28:

Notemos que al crear el formulario estamos indicando como primer parámetro que método vamos a invocar al hacer el submit del mismo, y ademas seteando algunas opciones, como ser el tipo de invocación http (en nuestro caso POST ) y en que región del HTML queremos volcar el resultado (para este ejemplo dentro del div con id resultRegion).

Ejecutamos y vamos a obtener la siguiente vista, ingresando una fecha y presionando el botón “Calcular” obtendremos la edad sin necesidad de refrescar el contenido:

Vista resultante

Si vamos a inspeccionar nuestro html notaremos que no posee ningún script!

HTML sin scripts

Abran notado que los AjaxOptions que definimos en la creación del formulario por medio del objeto AjaxHelper que nos provee MVC se rendizaron con el nombre “data-”. Esto es porque HTML 5 reserva dichos atributos para el uso de scripts, por lo que ya nos permite tenerlo preparado para el caso que trabajemos con dicha versión de HTML.

Les dejo dos links muy interesantes y recomendables sobre el tema. El primero de Brad Wilson y el segundo de Eduard Tomàs i Avellana.