Prof: LIN RODRGUEZ, Julio Csar Pgina 1

1
COLUMNAS DEL GRIVIEW EN ASP .NET

GridView con Columna Imagen

1.- Nos aseguraremos de tener la base de datos BDPEDIDOS, en nuestro servidor
SQL Server y luego de esta comprobacin, digitaremos las siguientes lneas de
cdigo que crearan los siguientes procedimientos almacenados:

CREATE PROC LISTAR_PAISES
AS
SELECT DISTINCT PAIS FROM CLIENTES
GO

CREATE PROC LISTAR_CLIENTES_PAIS
@NOMPAIS VARCHAR(30)
AS
SELECT COD_CLI, NOM_CLI, PAIS FROM CLIENTES
WHERE ESTADO=1 AND PAIS=@NOMPAIS
GO

2.- Luego crearemos una aplicacin Web con el lenguaje Visual C#, y sobre el
formulario predeterminado (Default.aspx) agregaremos un control DropDownList y
un control GridView.

3.- Al control DropDownList le asignaremos en su propiedad ID el valor ddlPaises.

4.- Luego sobre la tarjeta inteligente del GridView, seleccionaremos Editar
Columnas (Edit column) y adicionaremos 3 columnas o campos enlazados
(BoundField) y una columna ImageField.


Nota: Desmarcaremos la casilla de verificacin: Generar Campos Automticamente


5.- A cada uno de los campos enlazados, estableceremos 2 propiedades principales:
DataField = Nombre de la columna que se va a mostrar del origen de datos
HeaderText = Texto del Ttulo de la columna

1er BoundField
DataField: cod_cli
HeaderText: Codigo

2do BoundField
DataField: nom_cli
HeaderText: Nombre del Cliente

3er BoundField
DataField: pais
HeaderText: pais

Para la columna de tipo ImageField deberemos establecer 4 propiedades aparte del
HeaderText:

DataImageUrlField = Nombre de la columna que ser utilizada como
argumento en la cadena DataImageUrlFormatString para acceder al nombre
del archivo de imagen.
DataImageUrlFormatString = Cadena de texto que indica la ruta en
donde se encuentra la foto a mostrar en la columna Imagen.

Prof: LIN RODRGUEZ, Julio Csar Pgina 2

2
COLUMNAS DEL GRIVIEW EN ASP .NET

Ejemplo:

DataImageUrlField: Codigo Si el cdigo toma los
valores; 1, 2, 3, etc.
DataImageUrlFormatString = ~/Carpeta_Fotos/{0}.jpg Alt + 126 = ~

Aqu {0} corresponde al valor del campo indicado en la propiedad:
DataImageUrlField, en este caso a Cdigo, por lo que la propiedad
DataImageUrlFormatString para cada fila estara apuntando a:
~/Carpeta_Fotos/1.jpg,
~/Carpeta_Fotos/2.jpg, etc

DataAlternateTextField = Nombre del campo de donde se puede
obtener mayor informacin relativa a la fila.
DataAlternateTextFormatString = Texto que se mostrar por encima de la
columna Imagen incluyendo el contenido del campo indicado en
DataAlternateTextField.

Ejemplo:

DataAlternateTextField: Nombre
DataAlternateTextFormatString = Informacin de: {0}

Columna
ImageField

HeaderText : Fotos
DataImageUrlField : foto_cli
DataImageUrlFormatString :
DataAlternateTextField : nom_cli
DataAlternateTextFormatString : Datos de: {0}

Al final el formulario se mostrara de la siguiente
manera:


Esta cadena est en blanco
porque traemos en foto_cli la
ruta de las imgenes.

Prof: LIN RODRGUEZ, Julio Csar Pgina 3

3
COLUMNAS DEL GRIVIEW EN ASP .NET


Despus de haber agregado los controles faltantes y haber establecido las
propiedades correspondientes (Paginacin, AllowPaging = True), comenzaremos
con el cdigo de nuestra aplicacin Web.

6.- Primero configuraremos la cadena de conexin en el archivo Web.Config,
especficamente en la seccin connectionString, tal como se muestra a continuacin:

<connectionStrings>
<add name="cnx2" connectionString="server=(local);database=bdpedidos;
integrated security=true;"/>
</connectionStrings>

7.- Luego crearemos un archivo de clase que nos permita Leer la cadena de
conexin y ejecutar cualquier procedimiento almacenado, sin importar la cantidad
de parmetros que utilice (con la nica excepcin que los parmetros tienen que
ser de Entrada). Este archivo de clase deber ser creado obligatoriamente dentro
de una carpeta de ASP.Net llamada App_Code (Men contextual sobre el sitio
Web, y elegir Carpetas de ASP.NET y seleccionar App_Code) el nombre del archivo
de clase ser: cls_Datos.cs,

8.- Para que nuestro archivo de clase pueda leer al archivo Web.Config, deberemos
importar a la librera: System.Web.Configuration, quedando nuestro cdigo relativo
a esta clase de la siguiente manera:

using System.Web.Configuration;
using System.Data;
using System.Data.SqlClient;

partial Class cls_Datos
{

//Funcion que devuelve el valor almacenado en el elemento cnx
/ / de la seccion connectionStrings del archivo Web.Config
string Leer_cn()
{
return
WebConfigurationManager.ConnectionStrings["cnx"].ConnectionString;
}


'Procedimiento que se encarga de poblar los distintos parmetros
'que utilice un procedimiento almacenado en el objeto SqlCommand
private void Llenar_Parametros(ref SqlCommand cmd, Params object[]
parametros)
{
int n As byte = 0;
'Descubriendo y construyendo los parmetros que utiliza el objeto
'SqlCommand
SqlCommandBuilder.DeriveParameters(cmd);
'Recorremos todos los parmetros del objeto SqlCommand y le asignamos
un 'valor
foreach( SqlParameter oPrm in cmd.Parameters)
{
if (oPrm.ParameterName != "@RETURN_VALUE")
{

Prof: LIN RODRGUEZ, Julio Csar Pgina 4

4
COLUMNAS DEL GRIVIEW EN ASP .NET
oPrm.Value = parametros[n]
n = n + 1;
}
}
}

'Funcin que devuelve un DataTable como resultado de ejecutar al objeto
'SqlCommand a traves de un SqlDataReader
public DataTable Eje_SP_Dev_Tabla(string NomSP,
params object[] Parametros)
{
SqlCommand comando = new SqlCommand(NomSP,
new SqlConnection(Leer_cn()));
comando.CommandType = CommandType.StoredProcedure;
comando.Connection.Open();
'Si hemos enviado parmetros, entonces los poblamos
if (parametros.length > 0)
Llenar_Parametros(comando, Parametros);

DataTable Tabla1 = new DataTable();
'Poblamos un Lector de Datos que al momento de Cerrarlo, cierra tambin
'automticamente a su objeto SqlConnection asociado.

SqlDataReader Lector =
comando.ExecuteReader(CommandBehavior.CloseConnection);

Tab1a1.Load(Lector);
Lector.Close();
return Tabla1;
}

'Procedimiento que ejecuta un procedimiento almacenado que no
'devuelve datos, procedimientos almacenados dedicados a
'mantenimientos de tablas.
public void Eje_SP(string NomSP, params object[] Parametros)
{
SqlCommand comando = new SqlCommand(NomSP, new
SqlConnection(Leer_cn()));
comando.CommandType = CommandType.StoredProcedure;
comando.Connection.Open();

if (Parametros.Lengkt > 0)
Llenar_Parametros(comando, Parametros);

comando.ExecuteNonQuery(
)
comando.Connection.C1ose()
}
}

9.- Ahora que ya tenemos a nuestro archivo de clase cls_Datos creado y
programado, pasaremos a crear una nueva carpeta (simple, no de tipo ASP.NET)
con el nombre Fotos y en ella nos aseguraremos que tengan las fotos que
necesitaremos para esta aplicacin.
Nota: Tambin se puede realizar la accin de Copiar y Pegar, es decir, copiar la
carpeta desde su ubicacin de origen, y luego estando en el sitio Web, seleccionar el
nombre de nuestro Sitio, men contextual y elegir Pegar, luego de esta accin,
nuevamente, men contextual Actualizar Carpeta (Refresh Folder).

Prof: LIN RODRGUEZ, Julio Csar Pgina 5

5
COLUMNAS DEL GRIVIEW EN ASP .NET

10.- Como ltimo paso, procederemos a programar el formulario, para lo cual
digitaremos lo siguiente:

using System.Data;

partial Class _Default: System.Web.UI.Page
{

cls_Datos objD = new cls_Datos();

protected void Page_Load(object sender, System.EventArgs e)
{

if (Page.IsPoskBack) return;

Listar_Paises();
}


void Listar_Paises()
{
ddlPaises.DataSource = objD.Eje_SP_Dev_Tabla("Listar_Paises");
ddlPaises.DataTextField = "pais";
ddlPaises.DataValueField = "pais";
ddlPaises.DataBind();
}


protected void ddlPaises_SelectedIndexChanged(object sender,
System.EventArgs e)
{
Listar_Clientes_Pais();
}


void Listar_Clientes_Pais()
{

String spais = ddlPaises.SelectedValue
DataTable Tab1a1 = new DataTable();
Tabla1 = objD.Eje_SP_Dev_Tabla("Listar_Clientes_Pais", spais);
GridView1.DataSource = Tabla1;
GridView1.DataBind()
lblCant.Text = Tabla1.Rows.Count.ToString();
}


protected void GridView1_PageIndexChanging(object sender,
System.Web.UI.WebControls.GridViewPageEvenkArgs e)
{

Me.GridView1.PageIndex = e.NewPageIndex;
Listar_Clientes_Pais();
}
}



Prof: LIN RODRGUEZ, Julio Csar Pgina 6

6
COLUMNAS DEL GRIVIEW EN ASP .NET
11.- El formulario en funcionamiento con la columna Imagen en nuestro GridView se
muestra a continuacin:



Prof: LIN RODRGUEZ, Julio Csar Pgina 7

7
COLUMNAS DEL GRIVIEW EN ASP .NET

GridView con Columna Plantilla

1.- Para no volver a crear un Nuevo sitio Web o adicionar un Nuevo formulario Web,
vamos a trabajar con nuestro nico formulario del sitio anterior, en donde vimos la
utilizacin de la columna Imagen.

2.- Para esto slo necesitaremos adicionar una nueva columna de tipo TemplateField,
la cual la colocaremos despus de nuestra columna Imagen, la nica propiedad que
estableceremos ser: HeaderText en la cual digitaremos Eliminar.



3.- Luego seleccionamos el GridView, y en su Smart Tag (Tarjeta Inteligente),
seleccionaremos la opcin: Editar Plantilla (Edit Templates). En la seccin de la
plantilla ItemTemplate arrastraremos y soltaremos un control de tipo CheckBox de
la caja de herramientas de tipo Standard, tal como se muestra a continuacin:

Prof: LIN RODRGUEZ, Julio Csar Pgina 8

8
COLUMNAS DEL GRIVIEW EN ASP .NET





























4.- Finalmente, click en la flecha superior derecha para dar por terminada la
edicin de la columna plantilla (para esta demo) seleccionando Finalizar la
edicin de la plantilla (End Template Editing). Finalmente en la ltima Fila
adicionaremos un control de tipo Botn (Button, LinkButton o ImageButton) con el ID:
BtnEliminar y con el Text: Eliminar Marcados. Quedando nuestro diseo del
formulario:






























Prof: LIN RODRGUEZ, Julio Csar Pgina 9

9
COLUMNAS DEL GRIVIEW EN ASP .NET


5.- Finalmente slo nos queda realizar 2 acciones:
Primero, crear el procedimiento almacenado que nos permita eliminar los
clientes de manera logica, estableciendo el valor de su columna ESTADO
de 1 por 0 (Cero).
Segundo, programar el evento click del control BtnEliminar.


CREATE PROC ELIMINAR_CLIENTE
@COD_CLI INT
AS
UPDATE CLIENTES SET ESTADO=0
WHERE COD_CLI=@COD_CLI
GO

6.- Finalmente programaremos el botn BtnEliminar en su evento Click, con el siguiente
codigo:

protected void BtnEliminar_Click(object sender, System.EventArgs e)
{
Int ncod, conta;
foreach (GridViewRow fila in GridView1.Rows)
{
CheckBox chk = fila.FindControl("CheckBox1") as CheckBox;
if (chk.Checked==true)
{
ncod = Convert.ToInt32(fila.Cells[0].Text);
objD.Eje_SP("ELIMINAR_CLIENTE_1", ncod);
conta = conta + 1;
}
}

String msj = String.Format("Se han eliminado {0} Clientes", conta);
Response.Write(msj);
Listar_Clientes_Pais();
}

7.- Finalmente veremos a nuestro formulario en ejecucin:




















Prof: LIN RODRGUEZ, Julio Csar Pgina 10

10
COLUMNAS DEL GRIVIEW EN ASP .NET