Grilla para ASP.NET MVC usando jqGrid

Vamos a crear unas clases en C# que nos permita usar el plugin jqGrid de manera práctica.

Rodríguez Patiño, Eduardo
9,100 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Bien vamos a explicar como crear una grilla automatizada usando jqgrid, la cual es una extensión de jquery que permite realizar grillas consumiendo los datos vía json.

http://www.trirand.com/blog/?page_id=6

Primero en nuestro HTML, en la parte de nuestro _layout.cshtml, en las etiquetas head agregamos el siguiente código el cual nos permitira saber cual es la url actual del proyecto.

function base_url(url) { return '@(Url.Content("~/"))' + url; } function redirect(href) { window.location.href = '@(Url.Content("~/"))' + href; }

La funcion que más nos interesa es jqGridStart, la cual recibe los siguientes parámetros:

<div id="products"><table id="list1"></table><div id="pager1"></div></div> 
$(document).ready(function () {
    CargarProductos();
})

function CargarProductos() {
    var config = {
        colNames: ['id', 'Nombre', 'Precio', 'Stock'],
        colModel: [
        { name: 'id', index: 'id', hidden: true },
            {
                name: 'ProductName', index: 'ProductName', formatter: function (cellvalue, options, rowObject) {
                    return '<a>' + ('product/ver/' + rowObject.id, cellvalue) + '</a>';
                }
            },
            {
                name: 'UnitPrice', index: 'UnitPrice', width: 30
            },
            {
                name: 'UnitsInStock', index: 'UnitsInStock', width: 40
            }
        ]
    };

    jqGridStart('list1', 'pager1', 'home/products', config);
}
  • ColName: son los títulos que queremos mostrar en la cabecera.
  • ColModel: es nuestra entidad actual a mapear, en nuestro caso la tabla Products de la DB Northwind.

Ahora para facilitar el mapeo, en C# he escrito unas clases para jqGrid

public class JqGrid
{
    public string sidx { get; set; }
    public string sord { get; set; }
    public int rows { get; set; }
    public int page { get; set; }
    public int count { get; set; }
}

public class JqGridModel
{
    public int page { get; set; }
    public int total { get; set; }
    public int records { get; set; }
    public int start { get; set; }
    public int limit { get; set; }

    public object extra { get; set; }

    public string sord { get; set; }
    public dynamic rows { get; set; }

    public void Config(JqGrid jq)
    {
        this.sord = jq.sidx + ' ' + jq.sord;

        double count = jq.count;
        double rows = jq.rows;

        int total_pages = jq.count > 0 ? Convert.ToInt32(Math.Ceiling(count / rows)) : 0;
        this.start = (jq.rows * jq.page - jq.rows);
        this.limit = jq.page == 1 ? jq.rows : jq.rows * jq.page;

        this.page = jq.page;
        this.total = total_pages;
        this.records = jq.count;
    }
    public void DataSource(dynamic data)
    {
        this.rows = data;
    }
}

La propiedad extra, lo usaremos para enviar valores adicionales a nuestro jqGrid, y lo podemos invocar desde el evento loadComplete

Cuando jqgrid es llamado por defecto envia unos parametros a la ruta de nuestro controlador, y por lo tanto con la clase JqGrid mapeamos esos datos y JqGridModel se encarga de configurar para que pueda realizar su objetivo.

En nuestro modelo tenemos lo siguiente usando Entity Framework:

public JqGridModel Listar(JqGrid jq)
{
    JqGridModel jqm = new JqGridModel();

    using (var ctx = new NorthwindContext())
    {
        // Traemos la cantidad de registros
        jq.count = ctx.Products.Count();

        // Configuramos el JqGridModel
        jqm.Config(jq);

        jqm.DataSource(ctx.Database.SqlQuery("SELECT * FROM Products ORDER BY " + jqm.sord + " OFFSET @OFFSET ROWS FETCH NEXT @FETCH ROWS ONLY;",
                new SqlParameter("OFFSET", jqm.start),
                new SqlParameter("FETCH", jqm.limit)).ToList());
    }

    return jqm;
}

De esa manera realizamos toda la lógica para nuestro jQGrid, teniendo como resultado nuestra grilla:

Bien, si queremos darle un estilo a nuestro jQGrid podemos usar jquery ui cualquier theme que nos guste, ya que jQGrid esta construido con las CSS de jquery ui o podemos decorarla nosotros mismo.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín