[Tutorial] Biblia del Gridview en Aplicaciones Web (VB || C#)
Hadess_inf:
Usos del Gridview
Aplicaciones Web en .NET 2005
Hola a todos, cansado de recibir, me anime a escribir este documento, mi primer tuto especialmente hecho para elhacker.net, esperando que sea útil a la toda la gente del foro y comunidad de programadores, tratare de hacer una guía de los usos que se le pueden dar al control Gridview, sin más que decir empecemos:
Trabajaremos con la siguiente Base de Datos:
Citar
Create database ejemplo
Go
Use ejemplo
Go
Create table categoría
(id_categoria int primary key,
Categoría varchar(30))
Go
Create table sub_categoria
(id_sub_categoria int primary key,
Id_categoria int foreign key references categoría(id_categoria),
Sub_categoria varchar(30),
vacantes int)
Go
Insert into categoría values (1,'Matematica')
Insert into categoría values (2,'Lenguaje')
Insert into categoría values (3,'Ciencias')
Insert into sub_categoria values (1,1,'Algebra',0)
Insert into sub_categoria values (2,1,'Geometria',0)
Insert into sub_categoria values (3,1,'Trigonometria',0)
Insert into sub_categoria values (4,2,'Gramatica',0)
Insert into sub_categoria values (5,2,'Literatura',0)
Insert into sub_categoria values (6,3,'Fisica Elemental',0)
Insert into sub_categoria values (7,3,'Quimica Elemental',0)
Insert into sub_categoria values (8,3,'Biologia',0)
Para empezar crearemos un nuevo Sitio Web:
Por defecto aparecerá el WebForm Default.aspx en blanco. Dentro de esta página agregaremos el control Gridview y empezaremos con los posibles usos que le podemos dar a este control.
Vista antes de realizar alguna conexion
Por medio del SmartTag realizaremos la conexión a la base de datos Ejemplo, tabla categoría:
Vista despues de realizar conexion con tabla Categoria
En este caso no se desea mostrar el campo código de la categoría (id_categoria) para ocultarlo damos clic en el smartTag y seleccionamos Editar Columnas, de la nueva ventana que nos muestra seleccionamos la columna id_categoria y le cambiamos la propiedad Visible a False y aceptamos:
Ocultamos la columna id_categoria
Gridview con la columna id_categoria oculta
Los ejemplos que se vallan adicionando, tomaran como inicio este Primer Post.
Edito: Por favor abstenerse de publicar comentarios hasta que se terminen los articulos. Gracias por su comprencion.
Comentarios ¿? ---- Sugerencias ¿? ---- Recomendaciones ---- Enviar Mensaje Privado.
Me interesaria saber que piensan los usuarios acerca del tuto.
:rolleyes: :rolleyes: :rolleyes: :rolleyes:
Hadess_inf:
Uso de TemplateField
Caso 1 - Button
Bueno supongamos que se desea agregar un botón al final de cada fila y que al pulsarlo, se abra una nueva página con las subcategorías de la categoría seleccionada, veamos un ejemplo:
Elemento adicional para el ejemplo: WebForm llamado Subcategoría.
Para este ejemplo seleccionamos el GridView, nos dirigimos al SmartTag y seleccionamos Editar Columnas. En campos disponibles seleccionamos TemplateField y damos clic en Agregar, esto agregara el TemplateField a la lista de Campos Seleccionados. Para terminar por ahora damos clic en aceptar.
Ahora para agregar el boton, nos dirigimos al smartTag y seleccionamos Editar Plantillas, esto nos abrirá una nueva vista (imagen A), de la barra de herramientas arrastraremos un Botón (Button1) al cuadro, una vez hecho esto daremos nuevamente en el smartTag y seleccionaremos el link Terminar edición de Plantilla (Imagen B).
Imagen A
Imagen B
Una vez hecho esto, el aspecto del Gridview habrá cambiado, en el caso que el botón no se encuentre dentro del gridview, daremos clic en la pestaña Código (Source) de la página, y dentro del código del Gridview buscaremos el siguiente bloque de código:
Citar
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>
Una vez hallado, eliminaremos todo el style del botón, con esto el botón se colocara dentro de la columna del gridview (donde corresponde Imagen C).
Citar
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ItemTemplate>
</asp:TemplateField>
Imagen C
Hacemos doble clic en la pagina y nos mostrara el código ASPX de la pagina, del combo de eventos seleccionamos: PreRender (este ocurre cuando la pagina termina de cargarse). Lo que se hará será recorrer cada fila del gridview y buscar el control Button, una vez encontrado se le agregara una función en javascript.
Finalmente abrimos la pagina subcategoría.aspx, damos doble clic en la pagina, y en el evento load de la pagina mostramos el codigo de la categoría (el codigo se le fue enviado de la pagina default.aspx en la variable id), en este caso solo lo mostraremos ya que existen mil formas de uso que se le pueden dar.
Default.aspx
Citar
VB
Protected Sub Page_PreRender(ByVal sender As Object…)…
Dim i As Integer
Dim row As GridViewRow
Dim but As Button
For i = 0 To GridView1.Rows.Count - 1
row = GridView1.Rows(i)
If row.RowType = DataControlRowType.DataRow Then
but = row.FindControl("Button1")
but.Attributes.Add("onclick", "javascript:window.open('subcategoria.aspx?id=" & GridView1.DataKeys(i).Value.ToString & "','','menubar=no');")
End If
Next
End Sub
Citar
C#
protected void Page_PreRender(object sender, EventArgs e)
{
int i;
GridViewRow row;
Button but;
for(i=0;i<GridView1.Rows.Count ;i++)
{
row = GridView1.Rows[ i ];
if (row.RowType == DataControlRowType.DataRow)
{
but = (Button)row.FindControl("Button1");
but.Attributes.Add("onclick", "javascript:window.open('subcategoria.aspx?id=" + GridView1.DataKeys[ i ].Value.ToString() + "','','menubar=no')");
}
}
}
Subcategoria.aspx
Citar
VB
Protected Sub Page_Load(ByVal sender As Object,…) Handles Me.Load
Response.Write(Request.Params("id").ToString())
End Sub
Citar
C#
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(Request.Params["id"].ToString());
}
Ejecurar y aplicarlo a lo que se desee
Hadess_inf:
Uso de TemplateField
Caso 2 - Checkbox
Se desea agregar un checkbox al final de cada fila y que solo se pueda marcar uno de todos los mostrados, veamos un ejemplo:
Elemento adicional para el ejemplo: JScript: llamado JScript.js.
Para este ejemplo seleccionamos el GridView, nos dirigimos al SmartTag y seleccionamos Editar Columnas. En campos disponibles seleccionamos TemplateField y damos clic en Agregar, esto agregara el TemplateField a la lista de Campos Seleccionados. Para terminar por ahora damos clic en aceptar.
Ahora para agregar el checkbox, nos dirigimos al smartTag y seleccionamos Editar Plantillas, esto nos abrirá una nueva vista (imagen A), de la barra de herramientas arrastraremos un checkbox (CheckBox1) al cuadro, una vez hecho esto daremos nuevamente en el smartTag y seleccionaremos el link Terminar edición de Plantilla (Imagen B).
Imagen A
Imagen B
Una vez hecho esto, el aspecto del Gridview habrá cambiado, en el caso que el checkbox no se encuentre dentro del gridview, daremos clic en la pestaña Código (Source) de la página, y dentro del código del Gridview buscaremos el siguiente bloque de código:
Citar
<asp:TemplateField>
<ItemTemplate>
<asp: CheckBox ID="CheckBox1" runat="server" style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>
Una vez hallado, eliminaremos todo el style del checkbox, con esto el checkbox se colocara dentro de la columna del gridview (donde corresponde Imagen C). Y agregaremos los parámetros AutoPostBack="False" y name="CheckBox1"
Citar
<asp:TemplateField>
<ItemTemplate>
<asp: CheckBox ID="CheckBox1" name="CheckBox1" runat="server" Autopostback=”false”/>
</ItemTemplate>
</asp:TemplateField>
Imagen C
Hacemos doble clic en la pagina y nos mostrara el código ASPX de la pagina, del combo de eventos seleccionamos: PreRender (este ocurre cuando la pagina termina de cargarse). Lo que se hará será recorrer cada fila del gridview y buscar el control CheckBox1, una vez encontrado se le agregara una función en javascript.
Default.aspx
Citar
VB
Protected Sub Page_PreRender(ByVal sender As Object…)…
Dim i As Integer
Dim row As GridViewRow
Dim ch As CheckBox
For i = 0 To GridView1.Rows.Count - 1
row = GridView1.Rows(i)
If row.RowType = DataControlRowType.DataRow Then
ch = row.FindControl("CheckBox1")
ch.Attributes.Add("onclick", "javascript:valida(this.name)")
End If
Next
End Sub
Citar
C#
protected void Page_PreRender(object sender, EventArgs e)
{
int i;
GridViewRow row;
Checkbox ch;
for(i=0;i<GridView1.Rows.Count ;i++)
{
row = GridView1.Rows[ i ];
if (row.RowType == DataControlRowType.DataRow)
{
ch = (CheckBox)row.FindControl("CheckBox1");
ch.Attributes.Add("onclick", "javascript:valida(this.name)");
}
}
}
Abrimos el archivo JScript.js y colocamos lo siguiente:
Citar
function valida(obj){
for (i=0;i<document.form1.elements.length;i++)
{
if(document.form1.elements[ i ].type == "checkbox")
{
if(obj!=document.form1.elements[ i ].name)
{
document.form1.elements[ i ].checked=0;
}
}
}
}
Recordar agregar la referencia al inicio de la pagina Default.aspx
Citar
<head runat="server">
<script src="JScript.js" type="text/javascript"></script>
</head>
Ejecutar y aplicar para lo que se necesite.
Hadess_inf:
Uso de TemplateField
Caso 3 – TextBox ( Validación )
Se desea agregar 2 textbox al final de cada fila, en el primero solo se podran ingresar numeros y en el segundo solo letras:
Elemento adicional para el ejemplo: JScript: llamado JScript.js.
Para este ejemplo seleccionamos el GridView, nos dirigimos al SmartTag y seleccionamos Editar Columnas. En campos disponibles seleccionamos TemplateField y damos clic en Agregar, esto agregara el TemplateField a la lista de Campos Seleccionados(Repetir el proceso 2 veces). Para terminar por ahora damos clic en aceptar.
Ahora para agregar el TextBox, nos dirigimos al smartTag y seleccionamos Editar Plantillas, esto nos abrirá una nueva vista (imagen A).
Imagen A
Para este ejemplo hemos agregado 2 TemplateField, para poder agregar un textbox para cada uno, seleccionamos el smart Tag y clickeamos en el combo(Imagen B). Como se puede apreciar en la imagen se tienen las Column [2] y [3], en nuestro caso necesitamos agregar 1 textbox para cada calumna TextBox1 y Textbox2 respectivamente. Para esto seleccionamos la opcion ItemTemplate de cada Column, y agregamos el Textbox.
Imagen B
Este proceso se repite tanto para la column [2] (TextBox1) y [3] (TextBox2).
Repetir proceso para Column [2] y Column [3]
Bien, nuevamente, el aspecto del Gridview habrá cambiado, en el caso que el TextBox no se encuentre dentro del gridview, daremos clic en la pestaña Código (Source) de la página, y dentro del código del Gridview buscaremos el siguiente bloque de código (debido a que hemos agregado dos TextBox, debemos repetir el mismo proceso para ambos):
Citar
<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox1" runat="server" style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox2" runat="server" style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>
Una vez hallado, eliminaremos todo el style del TextBox, con esto el TextBox se colocara dentro de la columna del gridview (donde corresponde Imagen C), en el caso que se quiera dar un tamaño y que el texto salga centrado se definen los atributos siguientes: width="60px" y style="text-align:center":
Citar
<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox1" runat="server" width="60px" style="text-align:center"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox2" runat="server" width="60px" style="text-align:center"/>
</ItemTemplate>
</asp:TemplateField>
Imagen C
Hacemos doble clic en la pagina y nos mostrara el código ASPX de la pagina, del combo de eventos seleccionamos: PreRender (este ocurre cuando la pagina termina de cargarse). Lo que se hará será recorrer cada fila del gridview y buscar el control TextBox1 y TextBox2, una vez encontrado se le agregara una función en javascript, el TextBox1 solo permitira letras y el TextBox2 solo numeros.
Citar
VB
Protected Sub Page_PreRender(ByVal sender As Object…)…
Dim i As Integer
Dim row As GridViewRow
Dim t1,t2 As TextBox
For i = 0 To GridView1.Rows.Count - 1
row = GridView1.Rows(i)
If row.RowType = DataControlRowType.DataRow Then
t1 = row.FindControl("TextBox1")
t2 = row.FindControl("TextBox2")
t1.Attributes.Add("onkeypress", "javascript:return validaletra(event);")
t2.Attributes.Add("onkeypress", "javascript:return validanumero(event);")
End If
Next
End Sub
Citar
C#
protected void Page_PreRender(object sender, EventArgs e)
{
int i;
GridViewRow row;
TextBox t1,t2;
for(i=0;i<GridView1.Rows.Count ;i++)
{
row = GridView1.Rows[ i ];
if (row.RowType == DataControlRowType.DataRow)
{
t1 = (TextBox)row.FindControl("TextBox1");
t2 = (TextBox)row.FindControl("TextBox2");
t1.Attributes.Add("onkeypress", "javascript:return validaletra(event);");
t2.Attributes.Add("onkeypress", "javascript:return validanumero(event);");
}
}
}
Abrimos el archivo JScript.js y colocamos lo siguiente:
Citar
function validanumero(e)
{
tecla = (document.all)?e.keyCode:e.which;
if (tecla==8) return true;
patron = /\d/;
return patron.test(String.fromCharCode(tecla));
}
function validaletra(e) {
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8) return true;
patron =/[A-Za-z\s]/;
te = String.fromCharCode(tecla);
return patron.test(te);
}
Recordar agregar la referencia al inicio de la pagina Default.aspx
Citar
<head runat="server">
<script src="JScript.js" type="text/javascript"></script>
</head>
Ejecutar y aplicar para lo que se necesite.
Hadess_inf:
Mostrar campo cambiado de una BD
Caso 4 - Definir Sexo
Para este ejemplo se creara una nueva tabla en la base de datos Ejemplo y se trabajara con la misma:
Citar
Create table usuario
(id_usuario int primary key,
usuario varchar(30),
sexo char(1))
go
insert into usuario values (1,'Jose',1)
insert into usuario values (2,'Maria',0)
insert into usuario values (3,'Silvia',0)
insert into usuario values (4,'Carlos',1)
En la tabla usuario, se tiene el campo sexo los valores son 0=mujer | 1=hombre, mostrar el sexo del usuario.
Agregar un Gridview a la pagina, realizar la conexión a la tabla usuario (imagen A) y ocultar el id_usuario, habiendo realizado todo ese procedimiento el gridview quedara como se ve en la imagen B.
Imagen A
Se seleccionan todos los campos
Imagen B
El id_usuario esta oculto
Acontinuacion seleccionamos el Gridview y del panel de Propiedades seleccionamos la vista de eventos y damos doble click en el evento RowDataBound (Imagen C), esto nos mostrara el codigo ASP.
Imagen C
En aquel evento RowDataBound ejecutamos el siguiente codigo:
Citar
VB
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ...) Handles ...
If e.Row.RowType = DataControlRowType.DataRow Then
If e.Row.Cells(2).Text = "0" Then
e.Row.Cells(2).Text = "Mujer"
Else
e.Row.Cells(2).Text = "Hombre"
End If
End If
End Sub
Citar
C#
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.Cells[2].Text == "0")
{
e.Row.Cells[2].Text = "Mujer";
}
else
{
e.Row.Cells[2].Text = "Hombre";
}
}
}
Ejecutar y aplicar para lo que se necesite.
Navegación
[#] Página Siguiente