[ASP.NET MVC] Utilizando el Grid.MVC paso a paso

Posted on Actualizado enn


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 = "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:

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

Descarga el código!

5 comentarios sobre “[ASP.NET MVC] Utilizando el Grid.MVC paso a paso

    […] [ASP.NET MVC] Utilizando el Grid.MVC paso a paso […]

    marketing escribió:
    05/17/2013 en 20:57

    Thanks for sharing your info. I truly appreciate your efforts and I will be
    waiting for your next write ups thanks once again.

    Juan David Nicholls escribió:
    10/08/2013 en 09:30

    wwowww super genial ese paquete nuget!😀 Pero la paginación si es eficiente? ps me refiero con respecto a muchos datos🙂

    William Murcia escribió:
    05/09/2014 en 11:39

    Hola Julio espero que estes bien, muchas gracias por tu tutorial esta excelente pero tengo una duda lo que pasa es que estoy tratando de implementar ese ejemplo que pones funciona perfecto, pero el icono de filtro aparece al lado de email cuando realmente el filtro se hace por el nombre, intente ponerle filtro al email pero el icono aparece despues de la columna email (aparece perdido), tu de pronto sabes porque puede estar pasando esto?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s