GridView Editable en ASP.Net y C#

GridView Editable en ASP.Net y C#

En esta ocasión vamos a hacer un GridView editable, por editable quiero decir que nos permitirá actualizar nuestros registros directamente hacia la base de datos, para ello vamos a partir del supuesto de que se tiene un componente GridView lleno de datos, así que, comencemos entonces.

Lo primero que tenemos que hacer es seleccionar el GridView, posteriormente desplegar las opciones ocultas en la etiqueta inteligente o Smart Tag ubicada en la esquina superior derecha del componente seleccionado, elegir la opción Editar Columnas.

En la ventana emergente Campos, agregar un campo de Tipo: Editar, Actualizar, Cancelar, para ello será necesario desplegar de la columna Campos Disponibles, la opción CommandField, seleccionar dicho campo y hacer clic en el botón Agregar.

Una vez agregado el campo, nos dirigimos a la columna de propiedades del CommandField para personalizarlo un poco, por ejemplo, cambiamos la apariencia del tipo de componente que se nos mostrará con la leyenda Editar, donde podremos elegir de tres tipos diferentes, link, imagen y botón, para nuestro caso seleccionamos, botón, posteriormente puedes personalizar la apariencia tanto como desees, al finalizar solo da clic en la opción Aceptar para regresar a la página de contenido.

Resultado final del diseño del componente:

Lo siguiente consiste en generar los eventos asociados al control GridView que nos permitirán realizar la actualización de los datos; los eventos que intervienen en tal proceso son los siguientes:

                RowEditing:- El evento RowEditing se produce cuando se hace clic en el botón Editar de una fila, pero antes de que el control GridView entre en modo de edición.

       RowUpdating:- El evento RowUpdating se produce al hacer clic en el botón Actualizar de una fila, pero antes de que el control GridView actualice la fila.

       RowCancelingEdit:- El evento RowCancelingEdit se produce cuando se hace clic en el botón Cancelar de una fila en modo de edición, pero antes de que la fila abandone el modo de edición.

Dentro del evento RowEditing será necesario controlar el modo de edición, para lo cual colocamos dentro de dicho evento el siguiente código:

 //Se indica que el componente entra en modo de edicion indicando el indice de la fila seleccionada

        gvVehiculo.EditIndex = e.NewEditIndex;

       

        //Complementariamente, se recargan los datos del componente para que al momento de entrar en modo de edicion se visualicen los datos de la fila seleccionada

        gvVehiculo.DataSource = Page.Session["ds"];

        //Se enlaza con el origen de datos inidicado anteriormente el cual se almaceno en una variable de sesion.

        gvVehiculo.DataBind();

Dentro del evento RowUpdating es donde realizaremos la actualización de los datos hacia nuestra base de datos, para ello será necesario colocar el siguiente código, donde debemos notar que los nuevos datos se obtienen a través del parámetro e, por lo cual debemos realizar lo siguiente: e.NewValues[0].ToString()  para obtener el valor de la primera columna, cabe mencionar que los valores se enumeran desde 0 a n-1, por lo que la segunda columna quedaría de la siguiente manera: e.NewValues[1].ToString(), tal como se muestra en la siguiente imagen:

Código que debe ir dentro del evento RowUpdating:

//Manejo de errores

        try

        {

            //Asignamos la cadena de conexion al objeto ODBCConexion

            Conexion.ConnectionString = Met.RetornaConexion;

            //Se indica al comando la conexion que utilizara

            Comando.Connection = Conexion;

            //Abrimos la conexion

            Conexion.Open();

            //Asignar los valores proporcionados por el usuario a los parametros

            //Los valores se encontraran almacenados en la variable e que controla el evento de edicion, recordar que los elementos se enumeran desde 0 a n -1

            pId.Value = e.NewValues[0].ToString();

            pMarca.Value = e.NewValues[1].ToString();

            pModelo.Value = e.NewValues[2].ToString();

            pAnio.Value = e.NewValues[3].ToString();

            //Agregamos los parametros al comando

            Comando.Parameters.Clear();

            Comando.Parameters.Add(pMarca);

            Comando.Parameters.Add(pModelo);

            Comando.Parameters.Add(pAnio);

            Comando.Parameters.Add(pId);

            //Indicar al comando la instrucción SQL a ejecutar

            Comando.CommandText = "UPDATE Vehiculo SET Marca = ?, Modelo = ?, Anio = ? WHERE Id = ?";

            //Ejecutamos la instrucción previamente indicada

            Comando.ExecuteNonQuery();

            //Cerramos la conexion

            Conexion.Close();

            //

            lblMensaje.Text = "Registro Insertado Exitosamente!!!";

            //Se indica que se termino la edicion de la fila seleccionada

            gvVehiculo.EditIndex = -1;

            //Se recarla la tabla con la funcion creada para llenarla

            LLenaTabla();

        }

        catch (Exception Exd)

        {

            //Se muestra un error al usuario si existiera

            lblMensaje.Text = Exd.Message;

        }

Si todo lo anterior ha sido correcto, deberíamos poder actualizar un registro hacia nuestra base de datos desde el componente gridview.

Antes de la edición:

Durante de la edición:

Al finalizar la edición:

Les dejo el vídeo del ejercicio realizado, aclaro que no esta editado y no contiene audio, pero esta completo el proceso de la creación del ejercicio.

Acá les dejo el proyecto completo junto con la DB y todo lo necesario.

Descargue Aquí... peso aproximado 5MB



Saludos y espero les sea de utilidad!!! Gracias!!!