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.net

Todos 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 demos

Demos jqgrid

Ahora sí, es momento de empezar con nuestro control.

Descarga del control

Lo 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 jqgrid

Preparando el sitio

Una 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 control

Para 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ámetros

3. La url que direcciona al webservice

4. A la variable cars le asignamos el valor obtenido del Json

5. y Por ultimo con un each recorremos cada campo y lo metemos en el arreglo.

El código del Jqgrid

Al 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:  
  13:                    dataType: "json",
  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:  
  13:                     return JSON.stringify(postData);
  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({
   8:                 dataType: "json",
   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:  
  36:                     dataType: "json",
  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) {
  89:                     return JSON.stringify(postData);
  90:                 }
  91:             });
  92:  
  93:             jQuery.extend(jQuery.jgrid.del, {
  94:                 ajaxDelOptions: { contentType: "application/json" },
  95:                 serializeDelData: function (postData) {
  96:  
  97:                     return JSON.stringify(postData);
  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]
   2:    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   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]
   2:     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   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:  
   9:             using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DataConnection"].ConnectionString))
  10:             {
  11:                 using (SqlCommand command = new SqlCommand("insert into person (name,lastname,birthdate,weight)values(@name,@lname,@date,@peso)", conn))
  12:                 {
  13:                     conn.Open();
  14:                     command.Parameters.AddWithValue("@id", id);
  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));
  19:                     command.ExecuteNonQuery();
  20:                 }
  21:             }
  22:  
  23:         }
  24:         else if (String.Compare(oper, "edit", StringComparison.Ordinal) == 0)
  25:         {
  26:             using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DataConnection"].ConnectionString))
  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();
  31:                     command.Parameters.AddWithValue("@id", id);
  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));
  36:                     command.ExecuteNonQuery();
  37:                 }
  38:             }
  39:         }
  40:        
  41:  
  42:     }

 

Finalmente así se verá el trabajo

Ejemplo de descarga