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:
Así como Bootstrap (sí el de Twitter):
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:
|
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 = "julito_gtu@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 = "johana_espitia@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<Grid.Models.Client> (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:
<link href="@Url.Content(" rel="stylesheet" />
<link href="@Url.Content(" rel="stylesheet" /><script type="text/javascript" src="@Url.Content("></script><script type="text/javascript" src="@Url.Content("></script>
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:
Espero les haya gustado el post y les sea de utilidad, luego veremos más características de este helper.
, y el primer error que sale es:
