1

Prctica A: Crear controles de usuario

Logon Page Logon Page
Login.aspx Login.aspx Coho Winery

Benefits Benefits Home Page Home Page

Default.aspx Default.aspx

Registration Registration
Register.aspx Register.aspx

Menu Menu Component Component

Page Header Page Header

Header.ascx Header.ascx

ASPState

Class1.vb or Class1.cs Class1.vb or Class1.cs

Web. config

tempdb

Life Insurance Life Insurance

Life.aspx Life.aspx

Retirement Retirement
Retirement.aspx Retirement.aspx

Medical Medical

Medical.aspx Medical.aspx

Dental Dental

Dental.aspx Dental.aspx

Lab Web Application

Prospectus Prospectus
Prospectus.aspx Prospectus.aspx

Doctors Doctors

Doctors.aspx Doctors.aspx

User Control User

namedate.ascx namedate.ascx

XML Web XML Web Service Service

dentalService1.asmx dentalService1.asmx

XML Files
*****************************illegal for non-trainer use******************************

Doctors

Dentists

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 para recoger esa informacin y utilizar el control de usuario en la pgina medical.aspx del sitio Web.

Tiempo estimado para completar el laboratorio: 30 minutos

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#.

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 Basic .NET a. Ir a la carpeta VB\Starter\BenefitsVB para los archivos de Visual Basic .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 C# a. Ir a la carpeta CS\Starter\BenefitsCS para los archivos de Visual 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 Basic .NET En el cuadro de dilogo Nuevo proyecto, hacer clic en Proyectos de 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. En el cuadro de dilogo Nuevo proyecto, hacer clic en Proyectos de 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.

Para el proyecto Visual C#

Error! No hay texto con el estilo especificado en el documento.

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. Para el proyecto Visual Basic .NET: Para el proyecto Visual C#: 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 Para el proyecto Visual Basic .NET: 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. Para el proyecto Visual C#: 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.

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.

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 public String strName { get { return txtName.Text; } set { txtName.Text = value; } }

C#

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 C# Agregar una propiedad denominada dtDate de tipo Date para leer y escribir la propiedad Text del control txtBirth. 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.

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 public DateTime dtDate { get { return Convert.ToDateTime(txtBirth.Text); } set { txtBirth.Text = value.ToString(); } }

C#

4. Guardar los cambios. Visual Basic .NET C# Guardar los cambios de los archivos namedate.ascx y namedate.ascx.vb. Guardar los cambios de los archivos namedate.ascx y namedate.ascx.cs Probaremos el control de usuario en el Ejercicio 2.

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.

5. Declarar una variable Protected denominada Namedate1 de tipo de datos namedate. Visual Basic .NET C#
Protected Namedate1 As BenefitsVB.namedate 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.