Luego de Varios Días de Intenso Trabajo

Luego de varios días de intenso trabajo, hoy he tomado un pequeño espacio de tiempo para dedicar un post al trabajo con datos en forma de tablas en asp.netTodos los que hemos trabajado desde hace bastante con asp.net, hemos aprendido a querer al GridView, un excelente control que nos permite mostrar los datos directamente desde una base de datos y trabajar con ellos, llamase trabajar a las operaciones de: editar, buscar, agregar y eliminar. Por supuesto que existen muchas otras opciones que no son el objetivo de este post.A pesar de que e GridView es una buena herramienta para trabajar, tiene un inconveniente, es un control que funciona del lado del servidor, lo cual ocasiona un postback hacia el servidor, afectando muchas veces el rendimiento y obligándonos a controlar los parpadeos de la página con controles adicionales.Así que, para evitarnos todo eso, hoy veremos como trabajar con jqGrid, un control basado en jquery para realizar las operaciones básicas (CRUD). La principal ventaja de trabajar con este control, es que, al ser creado en jquery, es del lado del cliente, lo cual hace mucho mas eficiente y por supuesto, cuenta con opciones adicionales que el gridview no posee.Antes de continuar, debo recalcar que existe ya un control basado en jqGrid para asp.net, pero este tiene un costo superior a $300 lo cual para muchos no es accesible, así que tendremos que trabajar con el control opensource y hacer algunas adaptaciones.Para todos aquellos que les gusta ver un ejemplo antes de sumergirse en un proceso de estos, les dejo la pagina de demosDemos jqgridAhora sí, es momento de empezar con nuestro control.Descarga del controlLo primero que requerimos para iniciar nuestro trabajo es descargar el control de la página oficial, en ella pueden escoger cuales serán las funciones que desean descargar, generalmente recomiendo que las descarguen todas.Descarga jqgridPreparando el sitioUna vez descargado abrimos Visual Studio seleccionamos Archivo>Nuevo>Sitio Web (en blanco sería mejor)Ahora creamos una nueva carpeta y la llamamos js y ponemos en ella todos los scripts del jqgrid que descargamos anteriormente.Nuevamente creamos una nueva carpeta llamada css y de igual forma ponemos hay todos los archivos CSS y las imágenes. Si en la descarga no están incluidos los archivos css, no se preocupen, los encontrarán en el archivo para descargar al final del post.Con esto, ya estaríamos listos para iniciar a codificar el control.Creando el controlPara este primer acercamiento, veremos como implementar la funcionalidades básicas. En otros post, veremos como crear un maestro detalle y como utilizar un SubGrid.Primer paso, agregar las referencias javascript a la página 1: <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

2: <script type="text/javascript" src="js/grid.locale-es.js"></script>

3: <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

4: <script type="text/javascript" src="js/grid.base.js"></script>

5: <script type="text/javascript" src="js/grid.common.js"></script>

6: <script type="text/javascript" src="js/grid.formedit.js"></script>

7: <script type="text/javascript" src="js/jquery.fmatter.js"></script>

8: <script type="text/javascript" src="js/jsonXml.js"></script>

9: <script type="text/javascript" src="js/jquery.tablednd.js"></script>

10: <script type="text/javascript" src="js/ui.multiselect.js"></script>

11: <script type="text/javascript" src="js/grid.inlinedit.js"></script>

12: <script type="text/javascript" src="js/jQDNR.js"></script>

13: <script type="text/javascript" src="js/jqModal.js"></script>

Si vemos las referencias, únicamente hemos agregado algunas, que serán las que nos brinden las funcionalidades que requerimos para trabajar con las operaciones básicas.Una vez agregadas, crearemos una nueva función javascript en la cual codificaremos el jqgrid.Si vemos la documentaciónoriginal de jqGrid, veremos que jqgrid utiliza un atributo llamado colModel para crear las columnas del grid y que su definición es manual, es decir, se hace directamente en el control. Algo así: 1: colNames:['ID Number','Notes'],

2: colModel:[

3: {name:'id',index:'id', width:90, sorttype:"int", editable: true},

4: {name:'note',index:'note', width:200, sortable:false,editable:

true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}

5: ],

Esto, a mi parecer es algo no muy agradable, porque simplemente obligaría a tener que tocar código sensible del control cada vez que queramos mostrar información distinta. Así que, me di a la tarea de crear una nueva funcionalidad para el jqGrid que obtiene una serie de elementos desde un webservice vía Json y los mete en un array de jquery, de forma tal que podamos tener las columnas dinámicas. Este método, lo ejecutare antes de empezar la definición del jqGrid, es decir antes de la línea 1: $("#grid").jqGrid(

Nuestro nuevo método luce así 1: //aca es modificacion

2: $.ajax({

3: dataType: "json",

4: type: "post",

5: url: "JqGridEjemplo.aspx/GetNames",

6: data: "{}",

7: contentType: "application/json;",

8: async: false, //esto es requerido, de otra forma el jqgrid se cargaria

antes que el grid

9: success: function (data) {

10: var cars = JSON.parse(data.d);

11: $.each(cars, function (index, car) {

12: colMode.push({ name: car.Name, index: car.index, width:

car.width, align: 'left', editable: true, editrules: { edithidden: true }, hidden: false });

13: })

14:

15: } //or

16:

17: }),

El método anterior no tiene mucho especial que explicar:1. Primero con el type=”post” hacemos referencia a la forma en que obtendremos los datos.2.Con el data:”{}” le decimos al json que no vamos a enviarle parámetros3. La url que direcciona al webservice4. A la variable cars le asignamos el valor obtenido del Json5. y Por ultimo con un each recorremos cada campo y lo metemos en el arreglo.El código del JqgridAl igual que el procedimiento anterior, para el jqgri tenemos que especificar los tipos de datos, la url y en este caso algunos parámetros que luego utilizaremos para traer los datos 1: $("#grid").jqGrid(

2: {

3: datatype: function () {

4: $.ajax(

5: {

6: url: "JqGridEjemplo.aspx/GetPersons", //PageMethod

7:

8: data: "{'pPageSize':'" + $('#grid').getGridParam("rowNum") +

9: "','pCurrentPage':'" + $('#grid').getGridParam("page") +

10: "','pSortColumn':'" + $('#grid').getGridParam("sortname") +

11: "','pSortOrder':'" + $('#grid').getGridParam("sortorder") + "'}",

//PageMethod Parametros de entrada

12:


14: type: "post",

15: contentType: "application/json; charset=utf-8",

16: complete: function (jsondata, stat) {

17: if (stat == "success")

18: jQuery("#grid")

[0].addJSONData(JSON.parse(jsondata.responseText).d);

19: else

20: alert(JSON.parse(jsondata.responseText).Message);

21: }

22: });

23: },

24: jsonReader: //Set the jsonReader to the JQGridJSonResponse squema to bind

the data.

25: {

26: root: "Items",

27: page: "CurrentPage",

28: total: "PageCount",

29: records: "RecordCount",

30: repeatitems: true,

31: cell: "Row",

32: id: "ID" //index of the column with the PK in it

33: },

Luego, establecemos las columnas utilizando el colmodel y algunos parámetros de configuración de nuestro grid 1: colModel: colMode,

2:

3: pager: "#pager", //Pager.

4: loadtext: 'Cargando datos...',

5: recordtext: "{0} - {1} de {2} elementos",

6: emptyrecords: 'No hay resultados',

7: pgtext: 'Pág: {0} de {1}', //Paging input control text format.

8: rowNum: "10", // PageSize.

9: rowList: [10, 20, 30], //Variable PageSize DropDownList.

10: viewrecords: true, //Show the RecordCount in the pager.

11: multiselect: true,

12: sortname: "Name", //Default SortColumn

13: sortorder: "asc", //Default SortOrder.

14: width: "800",

15: height: "230",

16: caption: "Personas",

17: ondblClickRow: function (id) {

18: gdCustomers.restoreRow(lastSel);

19: gdCustomers.editRow(id, true);

20: lastSel = id;

21: }

Jqgrid tiene la posibilidad de mostrar en su barra inferior las opciones de insert,delete, add, update y refresh, así que las configuraremos de la siguiente manera 1: }).navGrid("#pager", { edit: true, add: true, search: true, del: true },

2: { url: "jqGridEjemplo.aspx/EditData", closeAfterEdit: true },

3: { url: "jqGridEjemplo.aspx/EditData", closeAfterAdd: true },

4: { url: "jqGridEjemplo.aspx/DeleteData" });

Acá vemos que al pager, le estamos diciendo que si vamos a permitir todas las opciones y además, para cada una de ellas estamos asignando una dirección en especifico, que de igual forma, apuntan a un procedimiento en un webservice. Estas opciones son completamente configurables y por supuesto que bueno estar deshabilitadas o no presentes por ahora, tenemos que colocarlas manualmente, luego trabajaremos en hacerlo de forma dinámica.Para concluir con la configuración de nuestro jqgrid, necesitamos configurar las opciones de agregar y borrar utilizando el método jquery.extend, de otra forma aunque configuremos el jqgrid estas opciones nos devolverían un error. 1: jQuery.extend(jQuery.jgrid.edit, {

2: ajaxEditOptions: { contentType: "application/json" },

3: recreateForm: true,

4: serializeEditData: function (postData) {

5: return JSON.stringify(postData);

6: }

7: });

8:

9: jQuery.extend(jQuery.jgrid.del, {

10: ajaxDelOptions: { contentType: "application/json" },

11: serializeDelData: function (postData) {

12:


14: }

15: });

16:

17:

18:

19: });

Finalizando el código completo seria 1: <script type="text/javascript">

2: var $table = $('#grid');

3: var lastSel;

4: var colMode = [];

5: jQuery(document).ready(function () {

6: //aca es modificacion

7: $.ajax({


9: type: "post",

10: url: "JqGridEjemplo.aspx/GetNames",

11: data: "{}",

12: contentType: "application/json;",

13: async: false, //esto es requerido, de otra forma el jqgrid se cargaria

antes que el grid

14: success: function (data) {

15: var cars = JSON.parse(data.d);

16: $.each(cars, function (index, car) {

17: colMode.push({ name: car.Name, index: car.index, width:

car.width, align: 'left', editable: true, editrules: { edithidden: true }, hidden: false });

18: })

19:

20: } //or

21:

22: }),

23: //acá

24: $("#grid").jqGrid(

25: {

26: datatype: function () {

27: $.ajax(

28: {

29: url: "JqGridEjemplo.aspx/GetPersons", //PageMethod

30:

31: data: "{'pPageSize':'" + $('#grid').getGridParam("rowNum") +

32: "','pCurrentPage':'" + $('#grid').getGridParam("page") +

33: "','pSortColumn':'" + $('#grid').getGridParam("sortname") +

34: "','pSortOrder':'" + $('#grid').getGridParam("sortorder") + "'}",

//PageMethod Parametros de entrada

35:


37: type: "post",

38: contentType: "application/json; charset=utf-8",

39: complete: function (jsondata, stat) {

40: if (stat == "success")

41: jQuery("#grid")

[0].addJSONData(JSON.parse(jsondata.responseText).d);

42: else

43: alert(JSON.parse(jsondata.responseText).Message);

44: }

45: });

46: },

47: jsonReader: //Set the jsonReader to the JQGridJSonResponse squema to bind

the data.

48: {

49: root: "Items",

50: page: "CurrentPage",

51: total: "PageCount",

52: records: "RecordCount",

53: repeatitems: true,

54: cell: "Row",

55: id: "ID" //index of the column with the PK in it

56: },

57:

58: colModel: colMode,

59:

60: pager: "#pager", //Pager.

61: loadtext: 'Cargando datos...',

62: recordtext: "{0} - {1} de {2} elementos",

63: emptyrecords: 'No hay resultados',

64: pgtext: 'Pág: {0} de {1}', //Paging input control text format.

65: rowNum: "10", // PageSize.

66: rowList: [10, 20, 30], //Variable PageSize DropDownList.

67: viewrecords: true, //Show the RecordCount in the pager.

68: multiselect: true,

69: sortname: "Name", //Default SortColumn

70: sortorder: "asc", //Default SortOrder.

71: width: "800",

72: height: "230",

73: caption: "Personas",

74: ondblClickRow: function (id) {

75: gdCustomers.restoreRow(lastSel);

76: gdCustomers.editRow(id, true);

77: lastSel = id;

78: }

79: }).navGrid("#pager", { edit: true, add: true, search: true, del: true },

80: { url: "jqGridEjemplo.aspx/EditData", closeAfterEdit: true },

81: { url: "jqGridEjemplo.aspx/EditData", closeAfterAdd: true },

82: { url: "jqGridEjemplo.aspx/DeleteData" });

83:

84:

85: jQuery.extend(jQuery.jgrid.edit, {

86: ajaxEditOptions: { contentType: "application/json" },

87: recreateForm: true,

88: serializeEditData: function (postData) {


90: }

91: });

92:

93: jQuery.extend(jQuery.jgrid.del, {

94: ajaxDelOptions: { contentType: "application/json" },

95: serializeDelData: function (postData) {

96:


98: }

99: });

100:

101:

102:

103: });

104:

105: </script>

Ahora que la configuración el grid esta completa, es hora de trabajar el html donde se mostrarán los datos, siendo tan sencillo como agregar una tabla y un div 1: <table id="grid">

2: </table>

3: <div id="pager">

Los datos a mostrar, los traeremos de SQL utilizando un procedimiento almacenado que luce asi 1: USE [JqGrid]

2: GO

3: /****** Object: StoredProcedure [dbo].[GetPersons] Script Date: 05/19/2011

13:29:50 ******/

4: SET ANSI_NULLS ON

5: GO

6: SET QUOTED_IDENTIFIER ON

7: GO

8:

9: -- GetPersons 3, 4, 'LastName', 'desc'

10:

11: ALTER procedure [dbo].[GetPersons]

12:

13: @PageSize int ,

14: @CurrentPage int ,

15: @SortColumn varchar(20),

16: @SortOrder varchar(4)

17:

18: as

19:

20: declare @RecordCount int

21: declare @PageCount int

22: declare @PageIndex int

23:

24: Select @RecordCount = count(ID)

25: from Person

26:

27: set @PageCount = Ceiling(cast (@RecordCount as float) / cast (@PageSize as float))

28:

29: if (@CurrentPage > @PageCount) set @CurrentPage = @PageCount

30:

31: set @PageIndex = @CurrentPage - 1

32:

33: Select RecordCount = @RecordCount, PageCount = @PageCount, CurrentPage = @CurrentPage

34:

35: declare @Query varchar(300)

36:

37: set @Query =

38: 'Select ID, Name, LastName, BirthDate, Weight,

39: RowNumber = ROW_NUMBER() OVER (ORDER BY ' + @SortColumn + ' ' + @SortOrder + ')

40: from Person'

41:

42: set @Query =

43: 'Select ID, Name, LastName, BirthDate, Weight

44: from (' + @Query + ' )as result

45: where RowNumber BETWEEN ' + cast(@PageSize * @PageIndex + 1 as varchar(10)) + '

46: AND ' + cast(@PageSize * (@PageIndex + 1) as varchar(10))

47:

48:

49: Exec (@Query)

Si observamos bien el Stored Procedure veremos que recibe algunos parámetros que estamos enviando por Json cuando la url que carga los datos es activada.El primer metodo que utilizaremos para cargar los datos con base en el stored procedure será 1: internal static JQGridJsonResponse GetPersonasJSon(int pPageSize, int pPageNumber,

string pSortColumn, string pSortOrder)

2: {

3: SqlConnection sqlCon = new

SqlConnection(ConfigurationManager.ConnectionStrings["DataConnection"].ConnectionString);

4: SqlCommand command = new SqlCommand("GetPersons", sqlCon);

5: command.CommandType = CommandType.StoredProcedure;

6: command.Parameters.Add("PageSize", SqlDbType.Int).Value = pPageSize;

7: command.Parameters.Add("CurrentPage", SqlDbType.Int).Value = pPageNumber;

8: command.Parameters.Add("SortColumn", SqlDbType.VarChar, 20).Value =

pSortColumn;

9: command.Parameters.Add("SortOrder", SqlDbType.VarChar, 4).Value = pSortOrder;

10:

11: DataSet dataSet = new DataSet();

12: SqlDataAdapter dataAdapter = new SqlDataAdapter(command);

13: dataAdapter.Fill(dataSet);

14:

15: var persons = new List<Person>();

16: foreach (DataRow row in dataSet.Tables[1].Rows)

17: {

18: Person person = new Person

19: {

20: ID = Convert.ToInt32(row["ID"]),

21: Name = row["Name"].ToString(),

22: LastName = row["LastName"].ToString(),

23: BirthDate = Convert.ToDateTime(row["BirthDate"]),

24: Weight = Convert.ToSingle(row["Weight"])

25: };

26: persons.Add(person);

27: }

28:

29: return new JQGridJsonResponse(Convert.ToInt32(dataSet.Tables[0].Rows[0]

["PageCount"]), Convert.ToInt32(dataSet.Tables[0].Rows[0]["CurrentPage"]),

30: Convert.ToInt32(dataSet.Tables[0].Rows[0]["RecordCount"]), persons);

31: }

Sin embargo, este método solo llena los datos, pero aun no los devuelve, eso lo haremos a través de un webservice de la siguiente forma 1: [WebMethod]

2: [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

3: public static JQGridJsonResponse GetPersons(int pPageSize, int pCurrentPage, string

pSortColumn, string pSortOrder)

4: {

5: return GetPersonasJSon(pPageSize, pCurrentPage, pSortColumn, pSortOrder);

6: }

Es importante que las líneas ResponseFormat=ResponseFormat.Json estén incluidas para que la información que se envié sea codificada de la forma correcta.También debemos notar que ambos metodos hacen referencia a JQGridJsonResponse que es una clase definida para almacenar los datos y llenar cada item 1: /// <summary>

2: /// Respuesta JSON para JQGrid.

3: /// </summary>

4: public class JQGridJsonResponse

5: {

6: #region Passive attributes.

7:

8: private int _pageCount;

9: private int _currentPage;

10: private int _recordCount;

11: private List<JQGridItem> _items;

12:

13: #endregion

14:

15: #region Properties

16:

17: /// <summary>

18: /// Cantidad de páginas del JQGrid.

19: /// </summary>

20: public int PageCount

21: {

22: get { return _pageCount; }

23: set { _pageCount = value; }

24: }

25: /// <summary>

26: /// Página actual del JQGrid.

27: /// </summary>

28: public int CurrentPage

29: {

30: get { return _currentPage; }

31: set { _currentPage = value; }

32: }

33: /// <summary>

34: /// Cantidad total de elementos de la lista.

35: /// </summary>

36: public int RecordCount

37: {

38: get { return _recordCount; }

39: set { _recordCount = value; }

40: }

41: /// <summary>

42: /// Lista de elementos del JQGrid.

43: /// </summary>

44: public List<JQGridItem> Items

45: {

46: get { return _items; }

47: set { _items = value; }

48: }

49:

50: #endregion

51:

52: #region Active attributes

53:

54: /// <summary>

55: /// Constructor.

56: /// </summary>

57: /// <param name="pItems">Lista de elementos a mostrar en el JQGrid</param>

58: public JQGridJsonResponse(int pPageCount, int pCurrentPage, int pRecordCount,

List<Person> pPersons)

59: {

60: _pageCount = pPageCount;

61: _currentPage = pCurrentPage;

62: _recordCount = pRecordCount;

63: _items = new List<JQGridItem>();

64: foreach (Person person in pPersons)

65: _items.Add(new JQGridItem(person.ID, new List <string>

{ person.ID.ToString(),person.Name, person.LastName, person.BirthDate.ToShortDateString(),

person.Weight.ToString() }));

66: }

67:

68:

69:

70: #endregion

71: }

Pero, nuevamente debemos tener cuidado, ya que esta clase llama a otra clase que contiene los atributos del grid llamada JQGridItem 1:

2: /// <summary>

3: /// Item del JQGrid. Elemento de la propiedad Items de la clase JsonJQGridResponse.

4: /// </summary>

5: public class JQGridItem

6: {

7: #region Passive attributes

8:

9: private long _id;

10: private List<string> _row;

11:

12: #endregion

13:

14: #region Properties

15:

16: /// <summary>

17: /// RowId de la fila.

18: /// </summary>

19: public long ID

20: {

21: get { return _id; }

22: set { _id = value; }

23: }

24: /// <summary>

25: /// Fila del JQGrid.

26: /// </summary>

27: public List<string> Row

28: {

29: get { return _row; }

30: set { _row = value; }

31: }

32:

33: #endregion

34:

35: #region Active Attributes

36:

37: /// <summary>

38: /// Contructor.

39: /// </summary>

40: public JQGridItem(long pId, List<string> pRow)

41: {

42: _id = pId;

43: _row = pRow;

44: }

45:

46: #endregion

47: }

Con esto, nuestro jqGrid sería totalmente funcional para mostrar los datos, paginar y ordenar pero aún no lo es para guardar, editar o borrar.Estos método al igual que los anteriores, serán definidos en un webservice y serán más sencillos de utilizar pues básicamente reciben los datos mediante Json y lo demás se traduce en código que ya conocemos.

1: [WebMethod]


3: public static void DeleteData(string id,string oper)

4: {

5:

6: if (String.Compare(oper, "del", StringComparison.Ordinal) == 0)

7: {

8: using (SqlConnection conn = new

SqlConnection(ConfigurationManager.ConnectionStrings["DataConnection"].ConnectionString))

9: {

10: using (SqlCommand command = new SqlCommand("delete from person where

id=@id", conn))

11: {

12: conn.Open();

13: command.Parameters.AddWithValue("@id", id);

14: command.ExecuteNonQuery();

15: }

16: }

17:

18:

19:

20: }

21:

22: }

1: [WebMethod]


3: public static void EditData(string BirthDate, string LastName, string Name, string

Weight, string id, string oper)

4: {

5: if (String.Compare(id, "_empty", StringComparison.Ordinal) == 0 ||

6: String.Compare(oper, "add", StringComparison.Ordinal) == 0)

7: {

8:



10: {

11: using (SqlCommand command = new SqlCommand("insert into person

(name,lastname,birthdate,weight)values(@name,@lname,@date,@peso)", conn))

12: {

13: conn.Open();


15: command.Parameters.AddWithValue("@name", Name);

16: command.Parameters.AddWithValue("@lname", LastName);

17: command.Parameters.AddWithValue("@date",

Convert.ToDateTime(BirthDate));

18: command.Parameters.AddWithValue("@peso", double.Parse(Weight));


20: }

21: }

22:

23: }

24: else if (String.Compare(oper, "edit", StringComparison.Ordinal) == 0)

25: {



27: {

28: using (SqlCommand command = new SqlCommand("update person set

name=@name,lastname=@lname,birthdate=@date,weight=@peso where id=@id", conn))

29: {

30: conn.Open();


32: command.Parameters.AddWithValue("@name", Name);

33: command.Parameters.AddWithValue("@lname", LastName);

34: command.Parameters.AddWithValue("@date",

Convert.ToDateTime(BirthDate));

35: command.Parameters.AddWithValue("@peso", double.Parse(Weight));


37: }

38: }

39: }

40:

41:

42: }

Finalmente así se verá el trabajo

Ejemplo de descarga

Luego de Varios Días de Intenso Trabajo

Documents

Transcript of Luego de Varios Días de Intenso Trabajo