Usando Grid.MVC en VS2012

En una entrada dedicada a bootstrap hablé muy por arriba de este popular paquete. En esta oportunidad quiero dedicarle un post entero para comentar su funcionamiento y la manera que creo mas optima para usarlo. Pueden visitar el proyecto original.

Para descargarlo a nuestro proyecto lo buscamos en el MUG

foto1

foto3

Estilo y diseño

Por defecto vamos a utilizar el css que nos sugiere la misma librería


	<link href="@Url.Content('~/Content/bootstrap.min.css')"                rel="stylesheet" type="text/css" />

Bindeo simple

Y nos metemos de lleno en el bindeo. Es realmente muy sencillo y rápido. En mi proyecto, para no hacerlo mas complicado, vamos a generar una Lista de la clase Cliente (List<Cliente>), la llenamos en el Controller y se la enviamos al View.

 public class TestController : Controller
    {
        //Genero una lista para bindearla al Grid
        private readonly List<Cliente> clients = new List<Cliente>()
        {
            new Cliente { Id = 1, Nombre = "Julio Avellaneda", Email = "julito_gtu@hotmail.com" },
            new Cliente { Id = 2, Nombre = "Juan Torres", Email = "jtorres@hotmail.com" },
            new Cliente { Id = 3, Nombre = "Oscar Camacho", Email = "oscar@hotmail.com" },
            new Cliente { Id = 4, Nombre = "Gina Urrego", Email = "ginna@hotmail.com" },
            new Cliente { Id = 5, Nombre = "Nathalia Ramirez", Email = "natha@hotmail.com" },
            new Cliente { Id = 6, Nombre = "Raul Rodriguez", Email = "rodriguez.raul@hotmail.com" },
            new Cliente { Id = 7, Nombre = "Johana Espitia", Email = "johana_espitia@hotmail.com" }
         };

        public ActionResult TestGridView()
        {
            //Envio la lista al cliente
            return View(clients);
        }

    }

y en primera instancia el View es lo mas simple posible, para luego hacerlo lo mas flexible que podamos.

&amp;lt;div style="width:700px;"&amp;gt;
        @Html.Grid(Model).Columns(columns =&amp;gt;
                    {
                        //columns.Add().RenderValueAs();

                        //columna 1
                        columns.Add(c =&amp;gt; c.Id, true).Titled("Cliente ID");

                        //columna 2
                        columns.Add(c =&amp;gt; c.Nombre).Titled("Name")
                            .Sanitized(false)
                            .Encoded(false);

                        //columna 3
                        columns.Add(c =&amp;gt; c.Email).Titled("Email");
                    }).WithPaging(3).Sortable(true)&amp;lt;/div&amp;gt;

foto4

 

Propiedades importantes

  • La propiedad WithPaging es la que me permite indicarle cuantas filas puede tener.
  • La propiedad Titled que me permite darle un nombre a la columna.
  • La propiedad para generar Columnas ocultas que me permite hacerla invisible con el “True”:
     columns.Add(c => c.Id, true).Titled("Cliente ID");
    
  • La propiedad sorteable para realizar ordenamientos ascendentes o descendentes.
    columns.Add(c => c.Nombre).Titled("Name").Sortable(true);
    
    //o si quiero especificar el orden
    columns.Add(c => c.Nombre).Titled("Name").Sortable(true).SortInitialDirection(GridSortDirection.Descending);
    

La propiedad RenderValueAs

En esta propiedad vamos a detallarla un poco mas porque nos permite realizar acciones muy amplias.

Supongamos que yo quiero poner un link en mi grilla que me permita realizar alguna acción( ir a MiController y ejecutar mi método “ActionResultfunction”, entonces puedo usar esta propiedad para renderearlo de la siguiente manera, en la columna del nombre:


columns.Add()
   .Encoded(false)
   .Sanitized(false)
   .RenderValueAs(o => Html.ActionLink(((string)"Eliminar"),
   "EliminarGrid",  //Action Result
   "Persona",  // Controller
   new { id = (int)o.Id }, //Parametros
   null //attributes...nulo
   ).ToHtmlString());

La grilla nos quedará formada de la siguiente manera con un link que irá hacia MiController y el actionResult ActionResultfunction

foto6

Ahora supongamos que quiero enviarle parámetros:

Y nuestro PersonaController nos queda de una manera muy simple:

    public class PersonaController : Controller
    {
 public ActionResult EliminarGrid(int id)
        {
            List<Cliente> clients = (List<Cliente>)Session["Lista"];

            foreach (Cliente element in clients)
            {
                if (id == element.Id)
                {
                    clients.Remove(element);
                    break;
                }
            }

            Session["Lista"] = clients;
            return RedirectToAction("TestGridView", "Test");
        }      

    }

Agregar un nuevo Row
Si uno agrega una grilla, una de las cosas mas básicas es poder agregar nuevas filas a la misma.

<table id="footer">
<tr class="group-footer">
<td colspan="2">
                        @if (Model.Count()==0)
                        {
                          <span class="label label-alert"@Html.ActionLink(((string)"Nueva"),
                                                                "Nueva",  //Action Result
                                                                "Persona",  // Controller
                                                                null, //Parametros
                                                                null //attributes...nulo
                                                                )                         </span>
                        }else{
                          <span class="label label-info"@Html.ActionLink(((string)"Agregar"),
                                                                    "Nueva",  //Action Result
                                                                    "Persona",  // Controller, se agrega sin usar la palabra "Controller"
                                                                    null, //Parametros
                                                                    null //attributes...nulo
                                                                    )
                          </span>
                        }<lt;/>
</tr>
<table>

De esta manera agregamos el link para poder ingresar nuevos valores a la grilla.
Esto se va a administrar desde PersonaController y se visualizará en la view Persona/Nueva.

@{
    ViewBag.Title = "Nueva Persona";
}
<h2>Nueva</h2>

@using (Html.BeginForm("Alta","Persona"))
{
<table style="width: 100%;">
<tr>
<td>Nombre</td>
<td>@Html.TextBox("txtNombre")</td>
</tr>
</table>

<input id="btnGuardar" type="submit" value="Guardar" />
    /*vuelve al menu anterior*/
<input type="button" value="Volver"             onclick="@("window.location.href='" + @Url.Action("TestGridView", "Test") + "'");" />
}

Los 2 métodos del Controller permiten agregar y eliminar un valor de la grilla y siempre retornan a la misma view: TestGridView:

        [HttpPost]
        public ActionResult Alta(string txtID, string txtNombre)
        {
            List<Cliente> clients = (List<Cliente>)Session["Lista"];
            clients.Add(new Cliente { Id = clients.Count + 1, Nombre = txtNombre, Email = "" });

            Session["Lista"] = clients;
            return RedirectToAction("TestGridView", "Test");
        }

        public ActionResult EliminarGrid(int id)
        {
            List<Cliente> clients = (List<Cliente>)Session["Lista"];

            foreach (Cliente element in clients)
            {
                if (id == element.Id)
                {
                    clients.Remove(element);
                    break;
                }
            }

            Session["Lista"] = clients;
            return RedirectToAction("TestGridView", "Test");
        }

Dejo el ejemplo como siempre. Espero que les sirva el ejemplo como una introducción.
Saludos

LINK:
GoogleDrive

PASSWORD:
https://trytocatch.wordpress.com/

Anuncios

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