Como saben asp mvc 2 no tiene componentes visuales que nos ayuden a mostrar la información.. e ilógicamente eso es lo que más me ha gustado de este framework ya que eso nos permite tener el control total de las aplicaciones web.. a diferencia de webforms que se incluía código de más y era muy tedioso mezclar componentes propios que utilizaran ajax con su scriptManager y su updatePanel..
Entonces esta vez nos encontramos con el ya conocido problema de que asp mvc no tenemos un componente de tipo grid nativo.. por lo que básicamente tenemos 3 opciones para implementar uno.. la primera solución es hacerlo a mano.. escribiendo un tabla y vaciando todos los datos, creando paginación, agregando ordenamiento de registros por columnas y estilizándola porque siempre es necesario que se vea bonito.. la segunda opción es utilizar componentes ya escritos y comerciales por su puesto.. (Telerik, DevExpress, Ext, jqGrid) o la tercera opción que sería buscar alternativas de código abierto como MVC Contrib (CPOL) .. que esta última opción sería nuestra elección.
Entonces para empezar lo primero que se debe de hacer es descargar MVC Contrib de esta dirección http://mvccontrib.codeplex.com/releases .. es importante mencionar que MVC Contrib es una suite de componentes, pero en este ejemplo solamente utilizaremos el componente grid..
Una vez que hayamos descargado los archivos lo que necesitaremos será descomprimirlo, ubicar el archivo MvcContrib.dll y agregarlo como referencia a nuestro proyecto en Visual Studio.. Para poder generar un grid con datos necesitamos un modelo que luego será el contenedor de la información.. entonces lo siguiente es crear una clase de tipo modelo.. que en mi ejemplo sería lo siguiente:
UsuariosModel.cs
namespace MvcContribExample.Models { public class UsuariosModel { public string nombre { get; set; } public string apellido { get; set; } public string deporte { get; set; } } } |
Listo.. ya tenemos nuestro modelo.. ahora vamos a trabajar con el controlador para manejar la primera petición a nuestra página y que automáticamente se cree el grid con datos.. entonces simplemente para generarlo damos clic derecho sobre la carpeta “controllers”, seleccionamos agregar y luego tomamos la opción “Controller…” — como esto es un ejemplo muy básico no necesitamos que se genere nada.. asi es que la opción de agregar otros métodos no la requerimos..
HomeController.cs
using System.Collections.Generic; using System.Web.Mvc; using MvcContribExample.Models; using FizzWare.NBuilder; namespace MvcContribExample.Controllers { public class HomeController : Controller { public ActionResult Index() { var listaRandom = Builder<UsuariosModel>.CreateListOfSize(20).TheFirst(1) .With(x => x.nombre = "Jack") .And(x => x.apellido = "Fiallos") .And(x => x.deporte = "Baloncesto") .Build(); var model = (List<UsuariosModel>)listaRandom; return View(model); } } } |
Por ahí verán que estoy utilizando NBuilder (using FizzWare.NBuilder;).. pero no es necesario que ustedes lo tengan en su proyecto.. NBuilder lo que hace es generar una lista arbitrária de datos.. es muy útil para hacer pruebas.. al final lo que NBuilder genera es una lista que se debe convertir a (List[UsuariosModel]) que es lo que espera el grid.
Ahora que en nuestro controlador tenemos un método llamado Index .. necesitaremos una vista con el mismo nombre.. entonces en la carpeta Views crearemos otra carpeta llamada Home y dentro de ella una vista llamada Index..
Y una vez con la vista Index generada pegamos el código del grid.. que sería algo como lo siguiente:
Views/Home/Index.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="MvcContrib.UI.Grid" %> <%@ Import Namespace="MvcContribExample.Models" %> <!DOCTYPE html> <html> <head runat="server"> <title>MVC Contrib Example, Ejemplo o como le quieran llamar</title> </head> <body> <div class="grid"> <% Html.Grid((List<UsuariosModel>)Model) .Columns(column => { column.For(c => c.nombre); column.For(c => c.apellido); column.For(c => c.deporte); }).Attributes(@class => "gridclass", @id => "gridview").Empty("Sin registros :(").Render(); %> </div> </body> </html> |
Y voilá.. habemus grid sin tener que escribir tanto código.. Ahora hay cosas extras que faltarían para tener un grid hecho y derecho.. como por ejemplo la paginación, ordenamiento datos por columnas y colorear las filas tipo zebra striped.. pero eso sería tema de otro artículo.. para adelantarme un poco.. yo utilicé los estilos de twitter bootstrap y agregué como estilo “zebra-striped bordered-table” .. además incluí jquery.tablesorter para permitirle al grid ordenarse por columnas.. algo de paginación con el mismo componente de MVC Contrib y ajax para paginar el grid sin recargar toda la página.
Espero les sirva para entender el funcionamiento de MVC Contrib, Nbuilder que no era parte del artículo pero que al final lo incluí para efectos de prueba y hasta casi un pequeño tutorial de ASP MVC. 😀
Y porque no quiero dejar nada inconcluso.. dejo el código fuente que utilicé para el ejemplo.. MvcContribExample
Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!
Si te ha servido compártelo y difunde nuestro blog..
Hola, esta chevere esta informacion, aunque considero que le falta la fecha, aunque si es MVC2 ya es un poco viejo, lo que me sirvio es el texto para el empty, ya que tengo el por defecto que esta en ingles… Gracias..
Que bueno que te ha servido.. específicamente usamos mvc 2 por la limitante del framework.. que no nos permitian usar .net 4.0.
Saludos
amigo disculpa podrias asersorarnos un poquito en la paginacion y filtrados por datos como expusiste en el comentario al finalizar tu ejemplo o dejarme donde contactar contigo estoy trabajando en la residencia profesional en la universidad en asp.net mvc 2
Hola Jose Alfredo, he publicado un nuevo artículo para explicar brevemente como se utiliza la paginación con MvcContrib.. espero te sirva de referencia.. http://qbit.com.mx/blog/2012/11/12/paginar-un-grid-con-mvc-contrib-en-asp/