[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

Deja un comentario

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