ASP.NET + jqGrid + Webservice asmx

Hola a todos.

Recientemente en uno de mis proyectos me he visto en la necesidad de investigar un poco las capacidades de integración entre jqGrid y webservices, motivo por el cual me he decidido a realizar este pequeño tutorial.

Como siempre vamos a empezar creando una solución con nuestro Visual Studio. En este caso un proyecto “Aplicación Web Vacia”

Con nuestro proyecto ya creado, vamos a empezar a diseñar el WebService que nos proveerá la información que ha de consumir nuestro grid.

Para ello agregamos al proyecto un nuevo WebService al que pondremos en nombre que queramos (yo he optado por “WsDataProvider”).

Se nos creara el webservice con su correspondiente WebMethod “HelloWord” que se genera por defecto.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace TestJqGrid { /// <summary> /// Summary description for WsDataProvider /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //[System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. //[System.Web.Script.Services.ScriptService] public class WsDataProvider : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } } }

Des comentamos la siguiente línea que necesitaremos para retornar los datos en Json.

[System.Web.Script.Services.ScriptService]

Vamos a proceder antes que nada a crear las clases que usaremos para almacenar la información que mostrará en grid.

Como el grid va a mostrar una lista de Pagos, la primera clase que crearemos es la clase “Pago”, la cual tendrá el siguiente código:

public class Pago { public int ID { set; get; } public DateTime FechaPago { set; get; } public string Concepto { set; get; } public decimal Importe { set; get; } public decimal Tasas { set; get; } public decimal Total {set; get;} public string Notas { set; get; } }

Además de esta clase, crearemos una nueva clase que es la que proveerá la información al grid, no solo con la lista de Pagos sino con otra información necesaria para el grid como es el número de página, el número de rows por página, etc, etc.

public class JqGridDataPagos { public int total { get; set; } public int page { get; set; } public int records { get; set; } public List<Pago> rows { get; set; } }

Con las clases creadas, ya podemos proceder a preparar el WebMethod que será consumido por nuestro grid.

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)] public JqGridDataPagos GetGridDataOrder(int page, int rows, string sidx, string sord, bool _search) { List<Pago> data = new List<Pago>(); for (int n = 0; n < 30; n++) { data.Add(new Pago() { ID = n + 1, FechaPago = DateTime.Today.AddDays(((n + 1) * -1)), Concepto = "JOHN DOE " + (n + 1).ToString(), Importe = Convert.ToDecimal(n * 1000), Tasas = Convert.ToDecimal(n * 100), Total = Convert.ToDecimal(n * 1100), Notas = "Nota " + (n + 1).ToString() }); } int recordsCount = data.Count; int startIndex = (page - 1) * rows; int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount; List<Pago> gridRows = new List<Pago>(rows); for (int i = startIndex; i < endIndex; i++) gridRows.Add(data[i]); return new JqGridDataPagos() { total = (recordsCount + rows - 1) / rows, page = page, records = recordsCount, rows = gridRows }; }

Es importante destacar que no selo hemos definido el método como “WebMethod”, sino que hemos especificado el formato de salida del mismo por ”ResponseFormat.Json”, ya que de lo contrario jqgrid no será capaz de consumir los datos retornados por el WebMethod.

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]

Como podéis ver este método simplemente crea una lista de 30 objetos Pago que vendrían a simular el resultado de una consultar en base de datos y retorna un objeto JqGridDataPagos con los elementos de la página especificada en los parámetros del método.

Antes de ponernos a crear la página que contendrá nuestro Grid, vamos a proceder a instalar el mismo en nuestro proyecto.

Empezaremos creando una carpeta “Scripts” donde dejaremos los ficheros del componente y una carpeta “Content” donde depositaremos otros archivos como pueden ser distintos css de estilo.

Ahora nos descargamos de la web del fabricante la última versión del grid

http://www.trirand.net/download.aspx

Una vez descargado y descomprimido, abrimos la carpeta en un explorador. Encontraremos varias carpetas y archivos. Abrimos la carpeta “js” y copiamos todo su contenido en la carpeta “Scripts” de nuestro proyecto.

Aprovecharemos también para copiar la carpeta “theme” y la carpeta “css” en la carpeta “Content” que creamos anteriormente.

con lo que nuestro proyecta quedara más o menos así

Ahora vamos a proceder a crear ya nuestra página.

Agregamos un nuevo WebForm Default.aspx a la solución.

Empezaremos agregando las referencias a los distintos scripts que vamos a necesitar, agregando las siguientes líneas al “head” de nuestra página

<title>Demonstration how use jqGrid to call ASMX-WebService rows</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="/Content/css/ui-darkness/jquery-ui-1.8.21.custom.css" /> <link rel="stylesheet" type="text/css" href="/Content/themes/ui.jqgrid.css" /> <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/Scripts/jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript" src="/Scripts/trirand/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="/Scripts/trirand/jquery.jqGrid.min.js"></script>

Ahora vamos a crear el body que vamos a utilizar

<body> <table id="contactsList"></table> <div id="gridpager"></div> </body>

Ya tenemos los script cargados y el body preparado. Es el memento de crar el código javascript que se encargará de cargar el grid. Para ello vamos a agregar el siguiente script al “head”

<script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function () { $("#contactsList").jqGrid({ url: '/WsDataProvider.asmx/GetGridDataOrder', datatype: 'json', mtype: 'POST', ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" }, colModel: [ { name: 'ID', label: 'ID', key: true, width: 60, align: "center", hidden: false }, { name: 'FechaPago', label: 'Fecha', width: 80, sortable: false, hidden: false, formatter: 'date', formatoptions: { srcformat: 'm/d/Y h:i:s', newformat: 'd-m-Y'} }, { name: 'Concepto', label: 'Concepto', width: 180, sortable: false, hidden: false }, { name: 'Importe', label: 'Importe', width: 180, sortable: false, align: "center", hidden: false }, { name: 'Tasas', label: 'Tasa', key: true, width: 60, align: "center", hidden: false }, { name: 'Total', label: 'Total', width: 80, sortable: false, align: "center", hidden: false }, { name: 'Notas', label: 'Notas', width: 180, sortable: false, hidden: false } ], rowNum: 10, rowList: [10, 20, 300], pager: "#gridpager", viewrecords: true, gridview: true, rownumbers: true, height: 230, caption: 'Lista de Pagos' }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true }); }); //]]> </script>

Ya tenemos nuestra página lista para ser usada. Si hemos agregado correctamente los scripts la página debería funcionar y ejecutarse mostrando un resultado similar a este:

Espero que os sirva de ayuda.

Podeis descargaros el proyecto desde este enlace:

https://www.dropbox.com/s/s9vam1ssvswj95p/TestJqGrid.rar

Un Saludo.-