Enriquecer la UI de aplicaciones ASP.NET MVC mediante Ajax

Ya que me encuentro realizando mis primeros pinitos con Ajax dentro de las aplicaciones ASP.NET MVC, me parece interesante mostrar un pequeño ejemplo de como podemos implementar MicrosoftAjax.js y MicrosoftMvcAjax.js  para enriquecer la interfaz de usuario de nuestras aplicaciones de manera sencilla.

Para ello creamos una aplicación de tipo ASP.NET MVC 2 Web Application que llamaremos IntegracionAjax, y en la que vamos a mostrar los datos de nuestros clientes (almacenados en una base de datos), seleccionando un cliente en concreto a partir de un desplegable.

Inicialmente, añadimos la base de datos donde se encuentran nuestros datos, que en nuestro caso será la base de datos Northwind.mdf. A continuación creamos el modelo de datos que nos permita interactuar con dicha base de datos. Para ello hacemos clic con el botón derecho sobre la carpeta Models y seleccionamos Add > New Item > LinqToSql Classes y le damos el nombre CustomerModel.

image 

Por últimos arrastramos sobre él la tabla Customer, de forma que ya queda definido el modelo.

Antes de comenzar a desarrollar el contenido y la lógica de nuestra aplicación, es necesario añadir las referencias a los scripts de ajax que vamos a utilizar para que todo funcione correctamente. Por ello abrimos la página maestra que se encuentra en Views >Shared> Site.Master y arrastramos los archivos MicrosoftAjax.js y MicrosoftMvcAjax.js a la cabecera de dicha página, de forma que se generan las referencias automáticamente:

  1. <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
  2. <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

A continuación creamos un controlador que nos permita gestionar todas las acciones relacionadas con los clientes, para ello hacemos clic con el botón derecho sobre la carpeta Controllers y le damos el nombre de CustomerController.

image

Para poder utilizar nuestro modelo desde el controlador es necesario:

  1. Añadir la referencia a nuestro modelo:
    1. using IntegracionAjax.Models;

  2. Crear el contexto de datos:
    1. CustomerModelDataContext cust = new CustomerModelDataContext();

Además, en dicho controlador vamos a definir dos resultados de acción:

El primero de ellos es Index(), que se encargará de mostrarnos la página principal compuesta por un dropdownbox implementado en ajax que contendrá el nombre y apellido de los clientes, así como un botón que al pulsarlo nos permitirá ver los detalles del cliente seleccionado. El código de está acción será el siguiente:

  1. public ActionResult Index()
  2.         {
  3.             var customers = cust.Customers.ToList();
  4.             ViewData["id"] = new SelectList(customers, "CustomerID", "ContactName");
  5.             return View();
  6.  
  7.         }

A continuación pasamos a configurar la vista correspondiente. Para ello hacemos clic con el botón derecho sobre la acción y seleccionamos AddView

image

Dentro de la vista, implementamos el siguiente código, que se encargará de cargar el desplegable con los valores de los clientes, y de lanzar la acción Details, cuando se pulse el botón definido

  1. <h2>Customers</h2>
  2.     <div>
  3.     <%
  4.         using (Ajax.BeginForm("Details", new AjaxOptions { UpdateTargetId = "customerDetails" })){ %>
  5.         <p>Customer:<%=Html.DropDownList("id")%></p>
  6.         <p><input type="submit" value="Details"/></p>
  7.         <% } %>
  8.     </div>
  9.     <div id="customerDetails">
  10.     </div>

Por lo tanto el segundo resultado de acción que tenemos que definir es Details(), que se encargará de hacer una consulta en nuestro contexto de datos, de coger el elemento coincidente con el id del valor buscado, y de devolvérnoslo a través de una vista parcial.

  1. public ActionResult Details(string id)
  2.         {
  3.             var customer = cust.Customers.Single(m => m.CustomerID == id);
  4.             return PartialView("customerDetails", customer);
  5.  
  6.         }

Para ello es necesario crear una vista parcial que se llame, tal y como indicamos, “customerDetails”. Hacemos clic con el botón derecho en Views > Customer > AddView y creamos una vista con las siguientes características:

image

Si queremos podemos modificar el estilo de dicha vista para que nos pinte los título de negrita, o podemos mostrar todos los detalles del elemento en línea horizontal, pero eso a gusto del consumidor 😉

De esta forma conseguimos dotar de mayor interactividad a nuestra aplicación, y de una interfaz de usuario más atractiva.

image image

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *