Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Grilla para ASP.NET MVC usando jqGrid
Actualizado el 11 Diciembre, 2014 y leído 6,718 veces
Calificación: 10.00 / 10

Grilla para ASP.NET MVC usando jqGrid

Anexsoft

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.

Entre las bondades a destacar es paginación y ordenación, ya que se nos hará más fácil trabajar de esta manera en ves de estar invirtiendo tiempo en crearla nosotros mismo.

Descargamos jqgrid de su web oficial:

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:

id: “El id del elemento que necesitaremos para ejecutar la grilla, en este caso es necesario una tabla”
pager
: un div que usaremos para mostrar la paginación de nuestra tabla
url
: la ruta necesaria para poder consumir el json
config
: los parametros necesarios para configurar la grilla de acuerdo al modelo con el que trabajemos

Bien en nuestro HTML debemos tener lo siguiente:

<div id="products"><table id="list1"></table><div id="pager1"></div></div>  

Y para ejecutar la grilla hacemos lo siguiente:

$(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.

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.