Usando AJAX con JQuery y ASP.NET MVC

Jquery es una librería para escribir código javascript mas rápido ya que trae varias funcionas predefinidas. Utilizar ajax con jquery es bastante sencillo.

Este tutorial asume que ya tienen conocimiento de ASP.NET MVC, si no es asi y estan interesados en aprender lean el tutorial de ASP.NET MVC que escribi.

Paso 1. Creando el controlador AJAX en ASP.NET MVC

Agreguen un nuevo controlador al proyecto llamado “AJAXController”.

Luego agreguen la siguiente accion al controlador:

public ActionResult GetMensaje()   {  
         if (Request.IsAjaxRequest())    {   
                  return Content("Hola, usastes AJAX para ver este mensaje"); 
          }    
         return Content("<h1>No usastes AJAX</h1>");     
}

Paso 2. Creando la vista.

En el caso de este ejemplo voy usar la vista “Index” del controlador “Home”

Reemplacen el HTML por el siguiente, o si no simplemente reemplacen el contenido del tag <asp:Content> de su archivo porque el que yo les pongo abajo.

 <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
 
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
 
Home Page
 
</asp:Content>
 
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
 
<script src="http://www.google.com/jsapi"></script>
 
<script>
 
google.load("jquery", "1.3.2");
 
</script>
 
<a href="/AJAX/GetMensaje">Mostrar mensaje</a>
 
<p>
 
</p>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$("a").click(function(e) {
 
$.ajax({ url: this.href, success: function(data) {
 
$("p").html(data);
 
} 
 
});
 
e.preventDefault();
 
})
 
}
 
);
 
</script>
 
</asp:Content>

Explicación

En las líneas 8 a 11 cargamos jQuery desde el CDN de Google.

Luego creamos un hipervínculo hacia el controlador AJAX que creamos, el propósito de usar un vinculo es demostrarles lo que es javascript unobstrusivo, y la funcionalidad del metodo Request.IsAjaxRequest() que usamos en nuestra acción del controlador.

El tag <p> que ven después del hipervínculo es donde vamos a mostrar el resultado de nuestra acción que será ejecutada a través de AJAX.

Por ultimo tenemos el javascript. Bueno, en la parte de javascript utilizamos jQuery y su función “$(document).ready()”, esta función lo que hace es que ejecutar los comandos que le pasamos como argumento hasta que el documento termina de descargarse, así evitamos errores por la falta de elementos que todavía se están cargando.

Luego usamos un selector de jQuery para agregar una función al evento clic de todos mis vínculos en el documento, en este caso solo tengo uno, y dentro de la función que quiero que se ejecute en el evento clic utilizamos la función $.ajax de jQuery,  a la función $.ajax de jQuery le enviamos un arreglo asociativo con las opciones de la función, en este caso, le mandamos la url y la función que queremos que se ejecute en caso de que la petición se exitosa (sucess). Noten que para definir la URL simplemente agarro la del hipervínculo actual, es decir en el que se hizo clic, esto lo hago usando “this.href”, this se refiere al objeto que disparo el evento, y como ya sabes cada link tiene una propiedad href.

En la función success lleva un parámetro llamado “data”, este parámetro se refiere al resultado de la petición, lo que hacemos es mostrar el contenido del resultado dentro del tag p que pusimos, si todo funciona correctamente, debería de aparecer el mensaje “Hola, usaste AJAX para ver este mensaje” en nuestra pagina. También pueden accesar el la acción GetMensaje del controlador usando el navegador y les va tirar el otro mensaje que dice que no usaron AJAX, de esta manera si entra un usuario a la pagina que no tiene habilitado javascript ene l navegador, al dar clic en el hipervínculo los llevara a la pagina como un hipervínculo normal pero lo importante es que igual va funcionar, sin importar si no tienen javascript habilitado.

Related posts:

1. Tutorial de ASP.NET MVC

Tagged as: ajax, asp.net mvc, jquery, mvc