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
2020-11-27 | 10,830 lecturas

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.