1

Prctica A: Crear un formulario Web Form con Microsoft ASP.NET

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

Benefits Benefits Home Home Page Page

Default.aspx Default.aspx

Registration Registration
Register.aspx Register.aspx

Menu Menu Component Component

Page Page Header Header

Header.ascx Header.ascx

ASPState

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

Web. config

tempdb

Life Life Insurance 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 User Control

namedate.ascx namedate.ascx

XML XML Web Web Service Service

dentalService1.asmx dentalService1.asmx

XML Files
******************************

Doctors

Dentists

Objetivos

En este laboratorio, aprenderemos a: Crear un formulario Web Form con Microsoft ASP.NET y poblarlo con controles Web. Establecer propiedades de los controles Web en un formulario Web Form ASP.NET. Nota Este laboratorio se centra en los conceptos de este mdulo y, por ello, podra no cumplir las recomendaciones de seguridad de Microsoft.

Requisitos previos Escenario

Para poder trabajar en este laboratorio, es necesario tener conocimientos sobre el entorno de desarrollo integrado (IDE) de Microsoft Visual Studio .NET. 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 2, Uso de Microsoft Visual Studio .NET, creamos una solucin Visual Studio .NET y un proyecto de aplicacin Web para al aplicacin Web Benefits. En este laboratorio, crearemos la interfaz de usuario (IU) de las pginas de formularios Web Form default.aspx y life.aspx en la aplicacin Web Benefits. El formulario Web Form default.aspx es la pgina de inicio del sitio Web Benefits. La pgina default.aspx muestra la lista de beneficios que ofrece la compaa. La pgina life.aspx permite al usuario introducir informacin relativa a su seguro de vida, como su nombre, fecha de nacimiento e importe de la cobertura.

Tiempo estimado para realizar este laboratorio: 30 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, 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 los archivos de proyecto Para el proyecto Visual Basic .NET Para el proyecto Visual C# Ir a la carpeta VB\Starter\BenefitsVB. Ir a la carpeta CS\Starter\BenefitsCS. Estas carpetas se pueden encontrar dentro del fichero labs03.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 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. Crear un proyecto de biblioteca de clases Para un proyecto Visual Basic .NET Crear un nuevo proyecto de biblioteca de clases Microsoft Visual Basic .NET con el nombre BenefitsListVB, y aadirlo a la solucin LabApplication: En el men Archivo, seleccionar Nuevo, y hacer clic en Proyecto. En el cuadro de dilogo Nuevo proyecto, en la lista Tipos de proyecto, hacer clic en Proyectos de Visual Basic. En la lista Plantillas, hacer clic en Biblioteca de clases, establecer el Nombre de BenefitsListVB, hacer clic en Agregar a solucin, y clic en Aceptar. Para un proyecto Visual C# Crear un nuevo proyecto de biblioteca de clases Microsoft Visual C# .NET con el nombre BenefitsListCS, y aadirlo a la solucin LabApplication: a. En el men Archivo, hacer clic en 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#. En la lista Plantillas, hacer clic en Biblioteca de clases, establecer el Nombre de BenefitsListCS, 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 los archivos de proyecto: Para el proyecto Visual Basic .NET Para el proyecto Visual C# Ir a la carpeta VB\Starter\BenefitsListVB. Ir a la carpeta CS\Starter\BenefitsListCS. Estas carpetas se pueden encontrar dentro del fichero labs03.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 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 del Explorador de soluciones.

Ejercicio 1 Crear el formulario Web Form Default.aspx

En este ejercicio, crearemos un nuevo formulario Web Form denominado default.aspx. A continuacin, agregaremos un control de usuario, un control enlazado a lista, un control Button, y un control Label a la pgina default.aspx. Finalmente, estableceremos atributos del control enlazado a lista para mostrar una lista esttica de informacin. Colocar controles en un formulario Web Form 1. Crear un nuevo Web Form denominado default.aspx. Este formulario Web Form ser la pgina de entrada principal de nuestra aplicacin Web. Para crear el formulario Web Form: a. Hacer clic con el botn derecho en el proyecto BenefitsVB o BenefitsCS, seleccionar Agregar y hacer clic en Agregar Web Form. b. En el cuadro de dilogo Agregar nuevo elemento, escribir default.aspx en el campo Nombre y hacer clic en Abrir. 2. Desde el Explorador de soluciones, utilizar una operacin de arrastrar y soltar para ubicar el archivo header.ascx desde el Explorador de soluciones a la parte superior del formulario Web Form. Nota Estudiaremos con mayor profundidad los controles de usuario en el Mdulo Crear controles de usuario. 3. Desde el Cuadro de herramientas, arrastrar un control CheckBoxList, un control Button, y un control Label al formulario Web Form. El formulario Web Form debera tener un aspecto similar a la siguiente ilustracin.

4. Establecer las propiedades ID y Text para los controles CheckBoxList, Button y Label como se muestra en la siguiente tabla.
Control CheckBoxList Button Label ID chkListBenefits cmdSubmit lblSelections Text Ninguno Submit Selected items:

5. Visualizar la pgina en la vista Hypertext Markup Language (HTML) haciendo clic en la ficha HTML situada en la parte inferior derecha de la ventana del editor.

Visual Studio .NET ha aadido el HTML dinmico (DHTML) a los controles CheckBoxList, Button, y Label. El atributo style que contiene los parmetros Z-INDEX, LEFT, POSITION y TOP posiciona los controles en la pgina. 6. Hacer clic con el botn derecho en la pgina default.aspx del Explorador de soluciones y hacer clic en Ver en el explorador. Nota El proyecto debe generarse aunque no hayamos escrito cdigo. Esto se debe a que cuando agregamos componentes de interfaz de usuario a la pgina, Visual Studio .NET genera cdigo para soportar estos elementos. La pgina debera tener un aspecto similar al de la ilustracin, sin ningn contenido en el control CheckBoxList.

Agregar elementos al control CheckBoxList 1. Visualizar la pgina default.aspx en la vista Diseo. 2. Hacer clic en el control CheckBoxList chkListBenefits del formulario Web Form default.aspx. 3. En la ventana Propiedades, hacer clic en la propiedad Items y hacer clic en el botn para abrir el cuadro de dilogo ListItem Collection Editor. 4. En el cuadro de dilogo ListItem Collection Editor, agregar los elementos que se muestran en la siguiente tabla (con la propiedad Selected establecida en False).
Texto First Item Second Item Third Item Valor First Item Second Item Third Item

5. Hacer clic en Aceptar para cerrar el cuadro de dilogo ListItem Collection Editor. 6. Guardar los cambios a default.aspx y visualizar la pgina en el navegador. Ahora que hemos agregado elementos al control CheckBoxList, la lista de elementos sobrescribe el botn Submit. 7. Visualizar de nuevo la pgina default.aspx en la vista Diseo. 8. Hacer clic en el fondo de la pgina default.aspx, y en la ventana Propiedades, establecer la propiedad pageLayout en FlowLayout (en lugar de GridLayout).

Aunque FlowLayout hace que el diseo de la pgina sea un poco ms difcil, permite que los elementos de interfaz de usuario se muevan automticamente cuando otros elementos de la pgina cambian de tamao. Por ejemplo, cuando el control chkListBenefits tena ms elementos agregados a la lista, se sobrescribi el botn Submit. Utilizando FlowLayout, el botn se mover automticamente para dejar espacio para una lista ms larga. 9. Mover los controles en la pgina, utilizando retornos de carro, para que la pgina tenga un aspecto similar al de la siguiente ilustracin.

10. Visualizar de nuevo la pgina en el explorador. Ahora la lista de casillas de verificacin no sobrescribe el botn Submit. 11. Cerrar la ventana del explorador.

Ejercicio 2 Crear el formulario Web Form Life.aspx

En este ejercicio, crearemos la interfaz de usuario de la pgina life.aspx. Esta pgina implementa el beneficio de seguro de vida de la compaa. Agregar controles a la pgina life.aspx 1. Crear un nuevo formulario Web Form denominado life.aspx. Para crear el formulario Web Form: a. Hacer clic con el botn derecho en el proyecto BenefitsVB o BenefitsCS, seleccionar Agregar y hacer clic en Agregar Web Form. b. En el cuadro de dilogo Agregar nuevo elemento, escribir life.aspx en el campo Nombre y hacer clic en Abrir. 2. Ubicar un control Calendar en el formulario Web Form. 3. Hacer clic con el botn derecho en el control Calendar en la vista Diseo y seleccionar Formato automtico para abrir el cuadro de dilogo Formato automtico de Calendar. 4. Hacer clic en Colorful 1 en la lista Seleccionar un esquema, y hacer clic en Aceptar. 5. Situar el control de usuario header.ascx, tres controles TextBox, dos controles CheckBox, un control Button, y cinco controles Label en la pgina.

6. Establecer las propiedades ID y Text de cada control como se muestra en la siguiente tabla.
Control Cuadro de texto Name Cuadro de texto Birth date Cuadro de texto Coverage Casilla de verificacin Short-term disability Casilla de verificacin Long-term disability Botn Save Label1 Label2 Label3 Label4 Label5 ID txtName txtBirth txtCoverage chkShortTerm chkLongTerm cmdSave default default default default default Texto ninguno ninguno ninguno Short-term disability Long-term disability Save Life Insurance Application Proof of good health appointment Name: Birth Date: Coverage:

Nota Cambiar el tamao de la fuente de Label1, en la ventana Propiedades de la etiqueta, expandir Fuente, seleccionar Tamao, y elegir Grande. 7. Hacer clic con el botn derecho en la pgina life.aspx del Explorador de soluciones y hacer clic en Ver en el explorador. 8. Escribir el nombre y fecha de nacimiento en los campos y hacer clic en Guardar. Los valores introducidos deberan permanecer en la pgina.