Prctica A: agregar funcionalidades a una aplicacin Web

Logon
Logon Page
Page
Login.aspx
Login.aspx
Benefits
Benefits
Coho Home
Home Page
Page Page
Page Header
Header ASPState
Winery Default.aspx
Default.aspx Header.ascx
Menu
Menu Header.ascx
Registration
Registration Component
Component
Register.aspx
Register.aspx Class1.vb Web.
Class1.vb or
or Class1.cs
Class1.cs tempdb
config

Life
Life Insurance
Insurance Retirement
Retirement Medical
Medical Dental
Dental
Life.aspx
Life.aspx Retirement.aspx
Retirement.aspx Medical.aspx
Medical.aspx Dental.aspx
Dental.aspx

Prospectus Doctors User XML

XML Web
Web
Prospectus Doctors User Control
Lab Web Prospectus.aspx
Prospectus.aspx Doctors.aspx
Doctors.aspx namedate.ascx
namedate.ascx Service
Service
Application dentalService1.asmx
dentalService1.asmx

XML
Doctors Dentists
Files

***************************** ******************************

Objetivos En este laboratorio, aprenderemos a:

Crear un procedimiento de evento Page_Load para una pgina Web
Microsoft ASP.NET.
Crear procedimientos de evento Click para controles Web en una pgina
Web ASP.NET.

Nota Este laboratorio se centra en los conceptos de este mdulo. Por ello,
podra no cumplir las recomendaciones de seguridad de Microsoft.

Requisitos previos Para trabajar en este laboratorio, es necesario tener:

Conocimientos sobre cmo invocar una funcin en Microsoft Visual Basic
.NET.
Conocimientos sobre cmo utilizar controles Web en un formulario Web
Form.

Escenario Coho Winery ofrece varios beneficios a sus empleados. En los laboratorios del
curso, crearemos un sitio Web que permita a los empleados seleccionar y
establecer los beneficios que elijan.
En el Laboratorio 3, Generar un componente Microsoft Visual Studio .NET,
creamos un componente que devolva una lista de todos los beneficios que
ofreca la compaa. En este laboratorio, invocaremos ese componente desde la
pgina default.aspx del sitio Web de la compaa, mostraremos la informacin
en un control CheckBoxList, e implementaremos el botn Submit en el
formulario para mostrar los beneficios seleccionados.

Tiempo estimado para

completar el laboratorio:
45 minutos
Ejercicio 0
Configuracin del laboratorio
Para realizar este laboratorio, es necesario haber creado el proyecto de
aplicacin Web denominado Benefits y un proyecto de biblioteca de clases
BenefitsList. Estos proyecto pueden crearse utilizando Visual Basic .NET o
Visual C# .NET.
Si no se han creado estos proyectos, seguir los siguientes pasos:

Crear la solucin LabApplication

Importante Realizar este procedimiento nicamente si no se ha creado un

archivo de solucin LabApplication .

1. Utilizando Visual Studio .NET, crear una nueva solucin en blanco

denominada LabApplication :
En el men Archivo, seleccionar Nuevo, y hacer clic en Solucin en
blanco.
En el cuadro de dilogo Nuevo proyecto, escribir LabApplication en
el cuadro de texto Nombre y hacer clic en Aceptar.

Crear el proyecto Benefits

Importante Realizar este procedimiento nicamente si no se ha creado

anteriormente un proyecto Benefits, o si se ha eliminado.

1. Crear un nuevo proyecto de aplicacin Web ASP.NET, denominado

BenefitsVB o BenefitsCS, en la solucin LabApplication:
a. En el men Archivo, seleccionar Nuevo, y hacer clic en Proyecto.
b. En el cuadro de dilogo Nuevo proyecto, en la lista Tipos de proyecto,
hacer clic en Proyectos de Visual Basic o Proyectos de Visual C#.
c. En la lista Plantillas, hacer clic en Aplicacin Web ASP.NET,
establecer la Ubicacin en http://localhost/BenefitsVB para un
proyecto Visual Basic .NET o en http://localhost/BenefitsCS para un
proyecto Visual C#.
d. Hacer clic en Agregar a Solucin, y hacer clic en Aceptar.

Precaucin Cuando se agregan proyectos a la solucin, es importante el

uso de maysculas en el nombre del proyecto. Probablemente, utilizaremos
algunos formularios Web Forms ya generados en ste y en otros
laboratorios, y por ello, debemos verificar que hemos escrito en maysculas
el nombre del proyecto Benefits.
 Actualizar el proyecto Benefits
1. En Visual Studio .NET, abrir el archivo de solucin LabApplication .
2. En el Explorador de soluciones, hacer clic con el botn derecho en
BenefitsVB o BenefitsCS, seleccionar Agregar, y hacer clic en Agregar
elemento existente.
3. Buscar el proyecto Benefits.
Para el proyecto Visual VB\Starter\BenefitsVB para los archivos de Visual Basic .NET.
Basic .NET

Para el proyecto Visual CS\Starter\BenefitsCS para los archivos de Visual C#.

C#
Estas carpetas se pueden encontrar dentro del fichero labs04.zip.
4. En el cuadro Archivos de tipo del cuadro de dilogo Agregar elemento
existente Benefits, hacer clic en Todos los archivos (*.*).
5. Seleccionar todos los archivos de la carpeta y hacer clic en Abrir.
6. Hacer clic en S a la pregunta de si sobrescribir o cargar de nuevo los
archivos.

Crear la biblioteca de clases BenefitsList

Importante Realizar estos pasos nicamente si no se ha creado anteriormente
un proyecto BenefitsList, o si se ha eliminado el proyecto BenefitsList segn
los pasos del Apndice A, Recuperacin del laboratorio.

1. Crear un proyecto de biblioteca de clases.

Para el proyecto Visual Crear un nuevo proyecto de biblioteca de clases Microsoft
Basic .NET Visual Basic .NET con el nombre BenefitsListVB, y aadirlo a la solucin
LabApplication:
a. En el men Archivo, seleccionar Nuevo, y hacer clic en Proyecto.
b. En el cuadro de dilogo Nuevo proyecto, en la lista Tipos de proyecto,
hacer clic en Proyectos de Visual Basic.
c. En la lista Plantillas, hacer clic en Biblioteca de clases, establecer el
Nombre de BenefitsListVB.
d. Hacer clic en Agregar a solucin, y clic en Aceptar.
Para el proyecto Visual Crear un nuevo proyecto de biblioteca de clases Visual C# .NET con el
C# nombre BenefitsListCS, y aadirlo a la solucin LabApplication:
a. En el men Archivo, seleccionar Nuevo, y hacer clic en Proyecto.
b. En el cuadro de dilogo Nuevo proyecto, en la lista Tipos de proyecto,
hacer clic en Proyectos de Visual C#.
c. En la lista Plantillas, hacer clic en Biblioteca de clases, establecer el
Nombre de BenefitsListCS.
d. Hacer clic en Agregar a solucin, y clic en Aceptar.

Precaucin Verificar que se han escrito correctamente las maysculas del

proyecto BenefitsList.
 Actualizar el proyecto BenefitsList
1. En Visual Studio .NET, abrir el archivo de solucin LabApplication .
2. En el Explorador de soluciones, hacer clic con el botn derecho en
BenefitsListVB o BenefitsListCS, seleccionar Agregar y hacer clic en
Agregar elemento existente.
3. Buscar el proyecto BenefitsList.
Para el proyecto Visual Ir a la carpeta VB\Starter\BenefitsListVB.
Basic .NET

Para el proyecto Visual Ir a la carpeta CS\Starter\BenefitsListCS.

C#
Estas carpetas se pueden encontrar dentro del fichero labs04.zip.
4. En el cuadro Archivos de tipo del cuadro de dilogo Agregar elemento
existente BenefitsList, hacer clic en Todos los archivos (*.*).
5. Seleccionar todos los archivos de esta carpeta y hacer clic en Abrir.
6. Hacer clic en S a la pregunta de si sobrescribir o cargar de nuevo los
archivos.

Crear una referencia al componente BenefitsList en el proyecto Benefits

1. En el proyecto Benefits de la solucin LabApplication, completar los
siguientes pasos para agregar una referencia al componente BenefitsList
que acabamos de crear:
a. Hacer clic con el botn derecho en el proyecto BenefitsVB o
BenefitsCS en el Explorador de soluciones y hacer clic en Agregar
referencia.
b. En el cuadro de dilogo Agregar referencia, en la pestaa Proyectos,
hacer doble clic en el proyecto BenefitsListVB o BenefitsListCS.
c. En la lista Componentes seleccionados, seleccionar el componente
BenefitsListVB o BenefitsListCS, y hacer clic en Aceptar.
El componente se agrega a la carpeta Referencias en el Explorador de
soluciones.
Ejercicio 1
Crear un procedimiento de evento Page_Load
En este ejercicio, crearemos el procedimiento de evento Page_Load para la
pgina default.aspx. En el procedimiento de evento Page_Load, agregaremos
cdigo para leer la lista de beneficios del componente BenefitsListVB o
BenefitsListCS. A continuacin, mostraremos los beneficios en un control
CheckBoxList.

Invocar el componente BenefitsListVB o BenefitsListCS

1. Utilizando Visual Studio .NET, abrir la solucin LabApplication.
2. Abrir la pgina default.aspx del proyecto BenefitsVB o BenefitsCS.
3. Hacer doble clic en el fondo de la pgina default.aspx en vista de Diseo
para crear un procedimiento de evento Page_Load.
La pgina de cdigo subyacente se abre y se agrega una plantilla para el
procedimiento de evento Page_Load, que contiene el siguiente cdigo:
Visual Basic .NET Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub

C# private void Page_Load(object sender, System.EventArgs e)

{
// Put user code to initialize the page here
}

4. Crear una nueva instancia de la clase BenefitsList.Benefits y guardarla en

una variable denominada clBenefits.
El cdigo debera ser similar al siguiente:
Visual Basic .NET Dim clBenefits As New _
BenefitsListVB.Benefits()

C# BenefitsListCS.Benefits clBenefits = new

BenefitsListCS.Benefits();

5. Si se est realizando este laboratorio en Visual Basic .NET, declarar una

variable de tipo BenefitsListVB.Benefits.BenefitInfo y nombrarla bi.
El cdigo debera ser similar al siguiente:
Visual Basic .NET Dim bi As BenefitsListVB.Benefits.BenefitInfo

C# Si se est realizando este laboratorio en Visual C#, la variable bi se declara

en el bucle foreach ms adelante en este laboratorio.
6. Invocar el mtodo GetBenefitsList de la clase, el cual devuelve una matriz
de las variables BenefitsListVB.Benefits.BenefitInfo o
BenefitsListCS.Benefits.BenefitInfo.
7. Repetir en la matriz devuelta con un bucle For Each.
 8. Para cada elemento de la matriz, generar una cadena del siguiente formato:
<a href=item.strPage> item.strName </a>

Agregar la cadena a la coleccin Items del control chkListBenefits

CheckBoxList utilizando el mtodo chkListBenefits.Items.Add.
El cdigo debera ser similar al siguiente:
Visual Basic .NET For Each bi In clBenefits.GetBenefitsList()
chkListBenefits.Items.Add("<a href=" & bi.strPage & _
">" & bi.strName & "</a>")
Next

C# foreach (BenefitsListCS.Benefits.BenefitInfo bi
in clBenefits.GetBenefitsList())
{
chkListBenefits.Items.Add("<a href=" + bi.strPage +
">" + bi.strName + "</a>");
}

9. Hacer clic con el botn derecho en la pgina default.aspx en el Explorador

de soluciones y clic en Generar y examinar.
Ahora, la lista chkListBenefits contiene hiperenlaces a otras pginas,
adems de la coleccin inicial de valores, como muestra la siguiente
ilustracin.
 10. Hacer clic en el hiperenlace Life Insurance.
Se muestra la pgina life.aspx.
11. Hacer clic en el hiperenlace Home para regresar a la pgina default.aspx.
12. Hacer clic en Submit dos veces. Qu ocurre? Por qu?
_____________________________________________________________

_____________________________________________________________

La vista del cuadro de lista chkBenefitsList debera mostrar nicamente la

lista de beneficios que proporciona el componente BenefitsList, no los tres
primeros elementos temporales. Adems, la lista de beneficios no debera
aadirse al cuadro de lista con cada actualizacin de la pgina. Para
solventar estos aspectos, seguir los siguientes procedimientos.

Eliminar la lista temporal de elementos

1. Abrir la pgina default.aspx.
2. Seleccionar el control de cuadro lista chkListBenefits.
3. En la ventana Propiedades, hacer clic en Elementos, y clic en junto a
(Collection).
4. En el ListItem Collection Editor, seleccionar un elemento de la lista
Miembros y hacer clic en Eliminar. Repetir este paso hasta que los tres
miembros hayan sido eliminados de la coleccin y hace clic en Aceptar.

Agregar una prueba Page.IsPostBack

1. En la pgina default.aspx, agregar una prueba Page.IsPostBack al
procedimiento de evento Page_Load.
Agregar nicamente elementos desde el componente al control
CheckBoxList si la pgina se muestra por primera vez.
Cuando finalice, el procedimiento de evento Page_Load completo debera
ser similar al siguiente (el nuevo cdigo est en negrita):
Visual Basic .NET Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
Dim clBenefits As New BenefitsListVB.Benefits()
Dim bi As BenefitsListVB.Benefits.BenefitInfo

For Each bi In clBenefits.GetBenefitsList()

chkListBenefits.Items.Add("<a href=" & _
bi.strPage & ">" & bi.strName & "</a>")
Next
End If
End Sub
C# private void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
BenefitsListCS.Benefits clBenefits = new
BenefitsListCS.Benefits();

foreach (BenefitsListCS.Benefits.BenefitInfo bi
in clBenefits.GetBenefitsList())
{
chkListBenefits.Items.Add("<a href=" +
bi.strPage + ">" + bi.strName + "</a>");
}
}
}

2. Generar y examinar la pgina default.aspx.

Ahora, la lista muestra los elementos del componente BenefitsList.
3. Hacer clic en Submit dos o ms veces. Qu ocurre? Por qu?
____________________________________________________________

____________________________________________________________
Ejercicio 2
Crear un procedimiento de evento Click
En este ejercicio, crearemos un procedimiento de evento Click para el botn
Submit de la pgina default.aspx. Cuando el usuario hace clic en Submit, el
procedimiento de evento lee la lista de beneficios y enva los beneficios
seleccionados de la lista en una etiqueta en la pgina default.aspx.

Leer los beneficios seleccionados

1. Abrir la pgina default.aspx.
2. Hacer doble clic en el botn Submit en vista de Diseo para crear un
procedimiento de evento Click para el botn Submit.
Se abre la pgina default.aspx.vb o default.aspx.cs con el nuevo
procedimiento de evento cmdSubmit_Click ya creado.
3. En el procedimiento de evento Click, iterar por la lista de elementos del
control CheckBoxList. Para cada elemento, si la propiedad Selected es
True, aadir una cadena a la propiedad Text del control lblSelections
Label.
El cdigo debera ser similar al siguiente:
Visual Basic .NET Dim li As ListItem
For Each li In chkListBenefits.Items
If li.Selected Then
lblSelections.Text &= ", " & li.Value
End If
Next

C# foreach (ListItem li in chkListBenefits.Items)

{
if (li.Selected)
{
lblSelections.Text += ", " + li.Value;
}
}

4. Generar y examinar la pgina default.aspx.

5. Seleccionar algunos beneficios de la lista y hacer clic en Submit.
La etiqueta muestra una lista de los elementos seleccionados como
hiperenlaces.
Ejercicio 3 (si se dispone de tiempo)
Uso de un componente en un control de usuario
Cada pgina del sitio Web Benefits muestra una parte de la misma informacin.
Esta informacin se almacena en un control de usuario que se denomina
header.ascx. Este control cabecera no lee su lista de beneficios desde el
componente BenefitsList. La lista de beneficios est codificada internamente en
la pgina.
En este ejercicio, redisearemos la pgina header.ascx para leer la lista de
beneficios desde el componente BenefitsList y mostrarlos en controles
hiperenlace.

Invocar el componente BenefitsList

1. Abrir la pgina header.ascx.
2. Completar los siguientes pasos para cambiar cada uno de los cuatro
hiperenlaces a beneficios que se encuentran en la parte superior de la
pgina, excluyendo el hiperenlace Home, a controles de servidor Web:

Nota No realizar los siguientes pasos para el hiperenlace Home. Este

hiperenlace permanecer codificado internamente en este laboratorio.

a. En vista Diseo, hacer clic con el botn derecho en cada hiperenlace y

hacer clic en Ejecutar como control de servidor.
b. Hacer clic en el botn HTML para ver el cdigo Hypertext Markup
Language (HTML) de la pgina.
Hacer una lista del id de cada uno de los cuatro controles de hiperenlace
utilizados para los beneficios:
__________________________________________________________

__________________________________________________________

3. Crear un procedimiento de evento Page_Load para la pgina header.ascx.

4. Crear una nueva instancia de la clase BenefitsList.Benefits y almacenarla en
una variable con el nombre clBenefits.
5. Declarar una matriz de variables BenefitsList.Benefits.BenefitInfo con el
nombre arBenefits.
6. Invocar el mtodo GetBenefitsList de la clase, que devuelve una matriz de
variables BenefitsList.Benefits.BenefitInfo.
 7. Establecer las propiedades HRef y InnerText de cada hiperenlace en las
propiedades strPage y strName de un elemento en la matriz devuelta.
El cdigo debera ser similar al siguiente:
Visual Basic .NET Dim clBenefits As New BenefitsListVB.Benefits()
Dim arBenefits As BenefitsListVB.Benefits.BenefitInfo()

arBenefits = clBenefits.GetBenefitsList()
A1.HRef = arBenefits(0).strPage
A1.InnerText = arBenefits(0).strName
A2.HRef = arBenefits(1).strPage
A2.InnerText = arBenefits(1).strName
A3.HRef = arBenefits(2).strPage
A3.InnerText = arBenefits(2).strName
A4.HRef = arBenefits(3).strPage
A4.InnerText = arBenefits(3).strName

C# BenefitsListCS.Benefits clBenefits = new

BenefitsListCS.Benefits();
BenefitsListCS.Benefits.BenefitInfo[] arBenefits;

arBenefits = clBenefits.GetBenefitsList();
A1.HRef = arBenefits[0].strPage;
A1.InnerText = arBenefits[0].strName;
A2.HRef = arBenefits[1].strPage;
A2.InnerText = arBenefits[1].strName;
A3.HRef = arBenefits[2].strPage;
A3.InnerText = arBenefits[2].strName;
A4.HRef = arBenefits[3].strPage;
A4.InnerText = arBenefits[3].strName;

8. Generar el proyecto Benefits.

Debido a que header.ascx es un control de usuario, no podemos visualizarlo
directamente en un explorador.
9. Visualizar la pgina default.aspx en un explorador.
La pgina tiene el mismo aspecto, pero si cambiamos los elementos
devueltos por el componente BenefitslistVB o BenefitsCS, tanto el control
chkListBenefits del formulario Web Form default.aspx como el conjunto
de hiperenlaces del control de usuario header.ascx reflejarn el cambio.