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.

Queremos mejorar la calidad de nuestros cursos. Por favor ayúdanos llenando esta pequeña encuesta
Grilla para ASP.NET MVC usando jqGrid
Actualizado el 11 Diciembre, 2014 y leído 8,896 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!

  • 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#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

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

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

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
© 2019 Anexsoft, blog y cursos online de TI.