1

Prctica A: Crear controles de usuario

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

*****************************illegal for non-trainer use******************************

Objetivos En este laboratorio, aprenderemos a:

Crear un control de usuario.
Utilizar un control de usuario en un formulario Web Form con Microsoft
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 utilizar controles Web de servidor en un
formulario Web Form ASP.NET.
Conocimientos sobre cmo utilizar los controles de validacin en un
formulario Web Form.
Conocimientos sobre cmo crear procedimientos de eventos para controles
en un formulario Web Form.
Conocimientos sobre cmo crear una propiedad en Microsoft Visual Basic
.NET o C#.

Escenario Coho Winery ofrece varios beneficios a sus empleados. En los laboratorios de
este curso, crearemos un sitio Web que permita a los empleados seleccionar y
configurar los beneficios que elijan.
En muchas pginas del sitio Web de la compaa, se recoge el nombre y fecha
de nacimiento del usuario. En este laboratorio, crearemos un control de usuario
Tiempo estimado para para recoger esa informacin y utilizar el control de usuario en la pgina
completar el laboratorio: medical.aspx del sitio Web.
30 minutos
2 Error! No hay texto con el estilo especificado en el documento.

Ejercicio 0
Configuracin del laboratorio
Para realizar este laboratorio, es necesario haber creado el proyecto de la
aplicacin Web Benefits. Si no se han creado estos proyectos, realizar 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:
a. En el men Archivo, seleccionar Nuevo, y hacer clic en Solucin en
blanco.
b. 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 el proyecto
Visual Basic .NET o en http://localhost/BenefitsCS para el 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, por ello,
debemos verificar que hemos escrito con maysculas el nombre del proyecto
Benefits. Pueden crearse dos versiones del proyecto; BenefitsVB sera una
solucin Visual Basic .NET y BenefitsCS sera una solucin Visual C#.
 3

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
BenefitsListVB o BenefitsListCS, seleccionar Agregar y hacer clic en
Agregar elemento existente:
Para el proyecto Visual a. Ir a la carpeta VB\Starter\BenefitsVB para los archivos de Visual Basic
Basic .NET .NET.
b. En el cuadro Archivos de tipo del cuadro de dilogo Agregar elemento
existente BenefitsVB, hacer clic en Todos los archivos.
Para el proyecto Visual a. Ir a la carpeta CS\Starter\BenefitsCS para los archivos de Visual C#.
C#
b. En el cuadro Archivos de tipo del cuadro de dilogo Agregar elemento
existente BenefitsCS, hacer clic en Todos los archivos.
Estas carpetas pueden encontrarse dentro del fichero labs07.zip
3. Seleccionar todos los archivos de la carpeta y hacer clic en Abrir.
4. Hacer clic en S a la pregunta de si sobrescribir o recargar los archivos.

Crear la biblioteca de clases BenefitsList

Importante Realizar este procedimiento nicamente si no se ha creado
anteriormente un proyecto BenefitsList, o si se ha eliminado.

1. Crear un nuevo proyecto de biblioteca de clases Visual Basic .NET con el

nombre BenefitsListVB o BenefitsListCS, y agregarlo a la solucin
LabApplication:
a. En el men Archivo, seleccionar Nuevo y hacer clic en Proyecto.
b. Crear el proyecto de biblioteca de clases.
Para el proyecto Visual En el cuadro de dilogo Nuevo proyecto, hacer clic en Proyectos de
Basic .NET Visual Basic en la lista Tipos de proyecto, hacer clic en Biblioteca de
clases en la lista Plantillas, establecer Name como BenefitsListVB,
hacer clic en Agregar a solucin, y hacer clic en Aceptar.
Para el proyecto Visual En el cuadro de dilogo Nuevo proyecto, hacer clic en Proyectos de
C# Visual C# en la lista Tipos de proyecto, hacer clic en Biblioteca de
clases en la lista Plantillas, establecer Name como BenefitsListCS,
hacer clic en Agregar a solucin, y hacer clic en Aceptar.

Precaucin Verificar que se han escrito correctamente las maysculas del

proyecto BenefitsList.
4 Error! No hay texto con el estilo especificado en el documento.
Para el proyecto Visual
Basic .NET:
Para el proyecto Visual
C#:
Para el proyecto Visual
Basic .NET:
Para el proyecto Visual
C#:
Actualizar el proyecto BenefitsList
1. En Visual Studio .NET, abrir el archivo de solucin LabApplication.
1. En el Explorador de soluciones, hacer clic con el botn derecho en
BenefitsListVB o BenefitsListCS, seleccionar Agregar y hacer clic en
Agregar elemento existente.
2. Copiar archivos de la carpeta Labfiles.
Ir a la carpeta VB\Starter\BenefitsListVB.
En el cuadro Archivos de tipo del cuadro de dilogo Agregar elemento
existente BenefitsListVB, seleccionar Todos los archivos (*.*).
Ir a la carpeta CS\Starter\BenefitsListCS.
En el cuadro Archivos de tipo del cuadro de dilogo Agregar elemento
existente BenefitsListCS, seleccionar Todos los archivos (*.*).
Estas carpetas pueden encontrarse dentro del fichero labs07.zip
3. Seleccionar todos los archivos de la carpeta y hacer clic en Abrir.
4. Hacer clic en S a la pregunta de sobrescribir o recargar los archivos.
Crear una referencia al componente BenefitsList del proyecto Benefits
1. En el proyecto BenefitsVB 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 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.
c. En la lista Componentes seleccionados, seleccionar el componente
BenefitsListVB, y hacer clic en Aceptar.
El componente se agrega a la carpeta Referencias en el Explorador de
soluciones.
1. En el proyecto BenefitsCS 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 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 BenefitsListCS.
c. En la lista Componentes seleccionados, seleccionar el componente
BenefitsListCS, y hacer clic en Aceptar.
El componente se agrega a la carpeta Referencias en el Explorador de
soluciones.
 5

Ejercicio 1
Crear un control de usuario
En este ejercicio, crearemos un control de usuario desde los controles Name y
Birth Date de la pgina life.aspx.

Crear la interfaz de usuario

1. Utilizando Visual Studio .NET, abrir la solucin LabApplication.
2. Agregar un nuevo control de usuario al proyecto BenefitsVB o BenefitsCS
denominado namedate.ascx:
a. Hacer clic con el botn derecho en el proyecto Benefits, seleccionar
Agregar, y hacer clic en Agregar control de usuario Web.
b. En el cuadro de dilogo Agregar nuevo elemento, escribir
namedate.ascx en el campo Nombre, y hacer clic en Abrir.
3. Abrir la pgina life.aspx del proyecto Benefits.
4. Copiar los controles Label, TextBox, y los controles de validacin para los
campos de entrada del nombre y fecha de nacimiento (siete controles en
total).
5. Pegar los controles que se acaban de copiar en la pgina namedate.ascx.
6. Utilizando la tecla Intro y la barra espaciadora, organizar los controles para
que tenga un aspecto similar al de la siguiente ilustracin.
6 Error! No hay texto con el estilo especificado en el documento.

Crear las propiedades del control de usuario

1. Abrir la pgina de cdigo subyacente de la pgina namedate.ascx,
denominada namedate.ascx.vb o namedate.ascx.cs.
2. Agregar una propiedad denominada strName de tipo String para leer y
escribir la propiedad Text del control txtName.
El cdigo debera ser similar al siguiente:
Visual Basic .NET Public Property strName() As String
Get
Return txtName.Text
End Get
Set(ByVal Value As String)
txtName.Text = Value
End Set
End Property

C# public String strName

{
get
{
return txtName.Text;
}
set
{
txtName.Text = value;
}
}

Precaucin Cuando se utilice C#, las palabras set y get se especifican en

minsculas.

3. Agregar una propiedad denominada dtDate para leer y escribir la propiedad

Text del control txtBirth.
Visual Basic .NET Agregar una propiedad denominada dtDate de tipo Date para leer y escribir
la propiedad Text del control txtBirth.
C# Agregar una propiedad denominada dtDate de tipo DateTime para leer y
escribir la propiedad Text del control txtBirth.
El tipo de datos de la propiedad dtDate es Date para Visual Basic .NET y
DateTime para C#, pero el control txtBirth guarda un valor String. Por
tanto, en la propiedad Get, es necesario convertir el valor del control a un
tipo de datos Date, y en la propiedad Set, es necesario convertir el valor de
entrada a un tipo de datos String.
 7

El cdigo debera ser similar al siguiente:

Visual Basic .NET Public Property dtDate() As Date
Get
Return CDate(txtBirth.Text)
End Get
Set(ByVal Value As Date)
txtBirth.Text = Value.ToString()
End Set
End Property

C# public DateTime dtDate

{
get
{
return Convert.ToDateTime(txtBirth.Text);
}
set
{
txtBirth.Text = value.ToString();
}
}

4. Guardar los cambios.

Visual Basic .NET Guardar los cambios de los archivos namedate.ascx y namedate.ascx.vb.
C# Guardar los cambios de los archivos namedate.ascx y namedate.ascx.cs
Probaremos el control de usuario en el Ejercicio 2.
8 Error! No hay texto con el estilo especificado en el documento.

Ejercicio 2
Uso del control de usuario
En este ejercicio, utilizaremos el control de usuario de la pgina medical.aspx
para solicitar el nombre y la fecha de nacimiento del usuario.

Ubicar un control de usuario en la pgina medical.aspx

1. Abrir la pgina medical.aspx del proyecto BenefitsVB o BenefitsCS.
2. Mediante una operacin de arrastrar y soltar, ubicar el control
namedate.ascx del Explorador de soluciones en la primera fila de la tabla de
la pgina medical.aspx.
La pgina debera tener un aspecto similar a la siguiente ilustracin.

3. Visualizar el cdigo HTML creado.

Introducir la directiva @ Register creada por Visual Studio .NET en las
siguientes lneas.
_____________________________________________________________

_____________________________________________________________

Introducir el cdigo HTML creado por Visual Studio .NET para el control
de usuario en las siguientes lneas.
_____________________________________________________________

_____________________________________________________________

4. Abrir la pgina de cdigo subyacente del formulario Web Form

medical.aspx, medical.aspx.vb o medical.aspx.cs.
 9

5. Declarar una variable Protected denominada Namedate1 de tipo de datos

namedate.
Visual Basic .NET Protected Namedate1 As BenefitsVB.namedate

C# protected BenefitsCS.namedate Namedate1;

6. Crear un procedimiento de evento Click para el botn Save.

Cuando el usuario haga clic en Save, el procedimiento de evento debera
devolver los valores del nombre y fecha de nacimiento del control de
usuario al control Label2 de la pgina medical.aspx.
El cdigo debera ser similar al siguiente:
Visual Basic .NET Private Sub cmdSave_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles cmdSave.Click

Label2.Text = Namedate1.strName & " born on " & _

Namedate1.dtDate.ToString()
End Sub

C# private void cmdSave_Click(object sender, System.EventArgs

e)
{
Label2.Text = Namedate1.strName + " born on " +
Namedate1.dtDate.ToString();
}

7. Generar y examinar la pgina medical.aspx.

8. En el explorador, introducir un nombre y una fecha de nacimiento, y hacer
clic en Guardar.