[Evento] Springboard Series Tour en Pamplona

¿Conoces el Springboard Series Tour? Es EL evento para los profesionales de Sistemas TIC, gerentes y directores de Sistemas de cualquier empresa y  cualquier persona en general interesada en la mejor administración de sus sistemas informáticos.

La gira de este año enseñará todo lo que hace falta conocer para desplegar Windows7 y Office 2010 sin problemas, como gestionar los diversos accesos a nuestros sistemas de empresa con seguridad y confianza y todo lo que necesitas saber para virtualizar aplicaciones.

Además, tenemos todo un elenco de ponentes de primera fila:

– Miguel Hernández

– Paulo Días

– Fernando Guillot

– David Nudelman

– Dani Alonso

Miguel HernandezPaulo DiasFernando GuillotDavid NudelmanDani Alonso

Anímate y comparte con nosotros una jornada que ha sido un éxito en toda Europa y que por primera vez traemos a Pamplona.

Toda la información de la jornada está disponible en este enlace de nuestra página web.

[ASP.NET MVC] Ordenar datos en un Datagrid II

En este artículo vamos a ver como se puede realizar la acción de ordenar los elementos de un Datagrid en una aplicación ASP.NET MVC. Para ello vamos a utilizar la aplicación que creamos en el último articulo, y la cual vamos a ir personalizando con las clases, acciones y vistas correspondientes.

Inicialmente vamos a añadir todos los recursos que necesitamos para su correcta implementación. Que son:

– 2 imágenes, que utilizaremos para señalar el tipo de orden que llevan nuestros elementos ascendente/descendente (arrow_down.png, arrow_up.png), y que añadiremos a la carpeta Content

– una clase llamada Dynamic.cs, que se puede descargar aquí, y en la que se encuentran los métodos que nos permiten realizar operaciones dinámicas mediante linq, y que añadiremos en una carpeta llamada HtmlHelpers.

A continuación pasamos a personalizar la clase StoreGridModel, y añadimos las variables que nos permitan indicar la expresión de orden que vamos a aplicar a nuestro modelo:

  1. // Propiedades de ordenación
  2.         public string SortBy { get; set; }
  3.         public bool SortAscending { get; set; }
  4.         public string SortExpression
  5.         {
  6.             get
  7.             {
  8.                 return this.SortAscending ? this.SortBy + " asc" : this.SortBy + " desc";
  9.             }
  10.         }

Dentro del controlador StoreController añadimos un nuevo resultado de acción que por defecto nos devolverá los elementos ordenados en forma ascendente, en función del nombre del “Store”, y que tendrá el siguiente código,  :

  1. public ActionResult Sortable(string sortBy = "Name", bool ascending = true)
  2. {
  3.     var model = new StoreGridModel
  4.     {
  5.         SortBy = sortBy,
  6.         SortAscending = ascending
  7.     };
  8.  
  9.     model.Stores = this.context.Stores.OrderBy(model.SortExpression);
  10.  
  11.     return View(model);
  12. }

Creamos la vista asociada a la acción Sortable, cuyas propiedades son las siguientes:

image

Y añadimos su código correspondiente:

  1. <table class="grid">
  2.     <tr>
  3.         <th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "Name" }, { "DisplayName", "Store" } }); %></th>
  4.         <th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "Customer.AccountNumber" }, { "DisplayName", "Customer" } }); %></th>
  5.         <th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "SalesPersonID" }, { "DisplayName", "SalesPersonID" } }); %></th>
  6.  
  7.     </tr>
  8.  
  9. <% foreach (var item in Model.Stores)
  10.     { %>
  11.     <tr>
  12.         <td class="left"><%= item.Name%></td>
  13.         <td class="left"><%= item.Customer.AccountNumber%></td>
  14.         <td class="left"><%= item.SalesPersonID%></td>
  15.     </tr>
  16.  
  17. <% } %>
  18.     
  19. </table>

Tal y como se observa en esta vista, estamos indicando que se rendericen distintas vistas parciales de nuestro modelo, basadas en SmartLink, pero en cada una de ellas se mostrará el modelo según los parámetros de entrada seleccionados. Las propiedades de dicha vista son las siguientes:

image

Y el código de la misma, en la que se aplican una serie de atributos html en función del nombre de la columna seleccionada y del orden, será:

  1. <%
  2.     var isDescending = string.CompareOrdinal(Model.SortBy, ViewData["ColumnName"].ToString()) == 0 && Model.SortAscending;
  3.     var routeData = new RouteValueDictionary { { "sortBy", ViewData["ColumnName"].ToString() }, { "ascending", !isDescending } };
  4.     var htmlAttributes = new Dictionary<string, object>();
  5.     if (string.CompareOrdinal(Model.SortBy, ViewData["ColumnName"].ToString()) == 0)
  6.     {
  7.         if (Model.SortAscending)
  8.             htmlAttributes.Add("class", "sortAsc");
  9.         else
  10.             htmlAttributes.Add("class", "sortDesc");
  11.     }
  12. %>
  13.  
  14. <%= Html.ActionLink(
  15.                         ViewData["DisplayName"].ToString(),                             // Texto de enlace
  16.                         Html.ViewContext.RouteData.Values["action"].ToString(),         // Acción
  17.                         Html.ViewContext.RouteData.Values["controller"].ToString(),     // Contrlador
  18.                         routeData,                                                      // Ruta
  19.                             htmlAttributes                                              // Atributos HTML para aplicar a los hipervinculos
  20.                    )
  21. %>

Por último añadimos las clases que vamos a aplicar para personalizar el formato de orden dentro de la hoja de estilos Site.css, y que será el siguiente:

  1. /* Sorting UI */
  2. a.sortAsc {
  3.     padding-right: 16px;
  4.     background-image: url(arrow_up.png);
  5.     background-position: right;
  6.     background-repeat: no-repeat;
  7. }
  8.  
  9. a.sortDesc {
  10.     padding-right: 16px;
  11.     background-image: url(arrow_down.png);
  12.     background-position: right;
  13.     background-repeat: no-repeat;
  14. }

Si compilamos la aplicación y navegamos a la ruta /Store/Sortable, vemos como obtenemos todo el listado de elementos de nuestro modelo tal y como esta definido. Y si seleccionamos la flecha, o cualquiera de los títulos de la tabla podemos cambiar el valor de los parámetros de orden.

imageimage