DataGridView con botones en ASP.NET

 

En la clase pasada de Desarrollo de Aplicaciones III, surgió la duda de como hacer funcionar un botón en un objeto (componente) DataGridView.

En aquellos años mozos del 2005 nos comentaban que estos componentes ponían a temblar a los servidores de aplicaciones por el tiempo de respuesta. Parece ser que esto ha quedado en el pasado (hay que ver las opiniones de los testers) pero vamos a desarrollar un artículo de Hitesh Vikani [1], donde da un ejemplo de como trabajar con esto.

Para ello creamos una aplicación web vacía con soporte para WebForms (ustedes pueden usar MVC o otros tipos de proyectos, yo creo que funcionará).

Entramos a la opción Archivo – Nuevo – Proyecto

Elegimos (en mi caso) la única opción disponible, asignamos un nombre y damos click en el botón “Aceptar”.

Se muestra el siguiente dialogo:

En mi caso elijo “Empty” y selecciono el checkbox “Web Forms”. Antes de continuar no hay relación entre las pantallas anteriores y las que se explican a continuación.

Esto es debido a que quise que vieran como se genera el nuevo proyecto. Por lo que el proyecto a mostrar desde ahora es WebAppGridWithButtons.

Ahora en el explorador de soluciones agregamos una nueva Web Form a la que he llamado FrmGridView.aspx.

No me quise complicar y del ejemplo me traje el código aspx, como mi tabla es muy pequeña por ahora no agregue uno de los eventos del DataGridView, el que cambia de página.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”FrmGridView.aspx.cs” Inherits=”WebAppGridWithButtons.FrmGridView” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

<title></title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:GridView runat=”server” ID=”datagridview” CssClass=”mydatagrid” AllowPaging=”True”

CellPadding=”4″ ForeColor=”#333333″ GridLines=”None” BorderColor=”#003300″ BorderStyle=”Solid”

BorderWidth=”1px” Font-Size=”11pt” Font-Names=”Century” OnRowCommand=”datagridview_RowCommand”>

<RowStyle BackColor=”#EFF3FB” BorderColor=”Black” BorderWidth=”1px” />

<FooterStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />

<PagerStyle BackColor=”#2461BF” ForeColor=”White” HorizontalAlign=”Center” />

<SelectedRowStyle BackColor=”#D1DDF1″ Font-Bold=”True” ForeColor=”#333333″ />

<HeaderStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />

<EditRowStyle BackColor=”#2461BF” BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”1px” />

<AlternatingRowStyle BackColor=”White” BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”1px” />

<Columns>

<asp:ButtonField ButtonType=”Button” HeaderText=”ClickHere” Text=”ViewDetails” CommandName=”ViewDetails”

ControlStyle-BackColor=”#507CD1″ ControlStyle-ForeColor=”White” ControlStyle-Font-Size=”15px” />

</Columns>

</asp:GridView>

<br />

<asp:Label runat=”server” Text=”Click On a Button to view details of a product” ID=”lblname” ForeColor=”#507CD1″ Font-Size=”20px”></asp:Label>

<br />

<asp:Label runat=”server” Text=”” ID=”lbldesc” ForeColor=”#507CD1″ Font-Size=”20px”></asp:Label>

</div>

</form>

</body>

</html>

Aquí dos cosas fundamentales, el evento que revisará el botón “clickeado” es OnRowCommand que hace referencia al método que hace la mágia. Así mismo la inserción del botón se hace en la etiqueta <Colums></Columns>. Aquí muestro lo anterior en modo diseño.

Además se agrega una etiqueta para mostrar uno de las columnas del renglón donde el usuario clickea el botón.

Como hace algunos cuatrimestres tengo mi servidor de base de datos en una máquina virtual, así que hice una base de datos y una tabla que será la que muestre el DataGridView, aquí la tabla creada.Es una base de datos de SQL Server, por lo que pueden consultar como obtener la cadena de conexión en VS en el artículo (http://utags.alejandriatics.kiubix.link/2018/03/21/xaml-en-wpf-c-segunda-parte/).

No había tocado el tema de la cadena de conexión en el archivo Web.config, en este archivo se guardan parámetros necesarios para el funcionamiento y configuración del sitio web. Aquí vamos a agregar nuestra cadena de conexión.

<configuration>

<connectionStrings>

<add name=”myconn” connectionString=”Data Source=x.x.x.x;Initial Catalog=DbArticle;User ID=sa;Password=********”/>

</connectionStrings>

<system.web>

Dos cosas que se omiten y que quizas sea porque va dirigido para un grupo de programadores con más alto expertise es que se omite el agregar el uso de System.Data.SqlClient – System.Data. Así como definir los objetos SqlConnection, SqlCommand, SqlAdapter, y el DataSet.

Así mismo tuve que dar otra búsqueda para investigar como leer la cadena de conexión del archivo Web.config esto lo encontré en el sitio de Microsoft[2].

Aquí el código del webform (code-behind).

using System;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;

namespace WebAppGridWithButtons

{

public partial class FrmGridView : System.Web.UI.Page

{

SqlConnection con;

SqlCommand com;

SqlDataAdapter da;

DataSet ds;

protected void Page_Load(object sender, EventArgs e)

{

FillDataGridView();

}

private void FillDataGridView()

{

System.Configuration.Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration(“/”);

System.Configuration.ConnectionStringSettings connS;

connS = rootWebConfig.ConnectionStrings.ConnectionStrings[“myconn”];

con = new SqlConnection(connS.ConnectionString);

com = new SqlCommand(“select * from T_Tabulate”, con);

con.Open();

da = new SqlDataAdapter(com);

ds = new DataSet();

da.Fill(ds,”T_Tabulate”);

datagridview.DataSource = ds.Tables[0];

datagridview.DataBind();

con.Close();

}

public void datagridview_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == “ViewDetails”)

{

int rowno = Int32.Parse(e.CommandArgument.ToString());

string sdescription = datagridview.Rows[rowno].Cells[5].Text.ToString();

lbldesc.Text = sdescription;

}

}

}

}

El código del método FillDataGridView() es como accesamos a la base de datos solo que a diferencia del ejercicio de wpf, ahora usamos un DataSet, que es el que “carga” el DataGridView. Aquí es donde accesamos el web.config para obtener la cadena de conexión.

En el evento Load del formulario asp es donde mandamos llamar este método.

Donde se genera la mágia es cuando programamos el evento datagridview_RowCommand. Primero identificamos que botón fue pulsado y una vez que se identifique botón fue se agrega en la etiqueta el valor de una de las columnas. Es muy importante saber que renglón es donde fue clickeado – int rowno = Int32.Parse(e.CommandArgument.ToString()) – ya que en base a este índice es como recuperamos los valores de determinada columna o columna – string sdescription = datagridview.Rows[rowno].Cells[5].Text.ToString().

Aquí una pantalla donde vemos el ejemplo corriendo:

Y bueno, hasta aquí el ejercicio, con esto podemos hacer muchas más cosas como un CRUD con este tipo de componentes.

Hasta la próxima.

Atte.

Profesor Miguel Araujo.

Webgrafía.

[1] http://www.parallelcodes.com/gridview-with-buttons-asp-net-c/

[2] https://msdn.microsoft.com/es-es/library/ms178411(v=vs.100).aspx

 

Deja un comentario