Hola a todos, una de las funcionalidades más comunes a la hora de mostrar datos es que dichos datos se puedan mostrar de una forma ordenada, se pueda filtrar, ordenar, paginar, etc… y cuando trabajamos con ASP.NET Web Forms es casi tan simple como el arrastrar un control GridView, enlazarlo a datos y setearle algunas propiedades.

Pero como ya sabemos en ASP.NET MVC no tenemos esos controles disponibles, así que para solucionar el problema vamos a utilizar el Grid.MVC, este grid me gusta bastante y entre sus principales características tiene:

  • Paginación
  • Ordenamiento
  • Filtros
  • Localización

Pero bueno, ahora si a ver la implementación, lo primero que vamos a tener es un clase Client que será nuestro modelo:


public class Client 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 

    public string Email { get; set; } 
}

Luego agregamos por medio de Nuget el paquete Grid.MVC:

image

Así como Bootstrap (sí el de Twitter):

image

Una vez que añadimos el Grid.MVC se han creado varios archivos nuevos en el proyecto, un par de vistas para manejar el grid, el archivo Gridmvc.css para los estilos y tres archivos JavaScript:

image

image

image|

Luego necesitamos un controlador, en este caso solo vamos a tener una acción y los datos los vamos a definir de manera local (acá podrías obtener los datos de una fuente externa como una base de datos):


public class ClientController : Controller 
{ 
    private readonly List clients = new List() 
    { 
        new Client { Id = 1, Name = "Julio Avellaneda", Email = "julitogtu@hotmail.com" }, 
        new Client { Id = 2, Name = "Juan Torres", Email = "jtorres@hotmail.com" }, 
        new Client { Id = 3, Name = "Oscar Camacho", Email = "oscar@hotmail.com" }, 
        new Client { Id = 4, Name = "Gina Urrego", Email = "ginna@hotmail.com" }, 
        new Client { Id = 5, Name = "Nathalia Ramirez", Email = "natha@hotmail.com" }, 
        new Client { Id = 6, Name = "Raul Rodriguez", Email = "rodriguez.raul@hotmail.com" }, 
        new Client { Id = 7, Name = "Johana Espitia", Email = "johanaespitia@hotmail.com" } 
    }; 

    public ActionResult Index() 
    { 
        return View(clients); 
    }       
}

Ahora viene la vista, lo importante en la vista es que será fuertemente tipada a una colección de nuestra clase cliente, es decir: @model IEnumerable (si quieres dale una mirada a Una referencia sobre las vistas), luego se debe hacer un using GridMvc.Html: @using GridMvc.Html

@model IEnumerable @using GridMvc.Html

Luego las referencias a los estilos y a los js:

y finalmente la implementación del helper:


@Html.Grid(Model)
    .Columns(
        columns => { 
            columns.Add(c => c.Id).Titled("Client ID"); 
            columns.Add(c => c.Name).Titled("Name").Filterable(true); 
            columns.Add(c => c.Email).Titled("Email"); })
    .WithPaging(3)
    .Sortable(true)

Observando el código anterior, vemos que para aplicar paginación se utiliza el método WithPaging(#registrosxpágina), para el ordenamiento Sortable el cual puede ser aplicado a todas las columnas como en el ejemplo o a una columna determinada utilizando en la definición de la columna, y Filterable para especificar que la columna permite aplicarle filtros, Filterable al igual que Sortable se pueden aplicar de manera global a todas las columnas o de forma individual.

Y el resultado:

image image
Espero les haya gustado el post y les sea de utilidad, luego veremos más características de este helper.

Descarga el código!