Universidad Nacional, Sede Regin Brunca, Escuela de Informtica Programacin IV, I Semestre Ao 2012

Demostracin C: agregar controles de servidor a un formulario Web Form

**************************** use******************************

En esta demostracin, veremos cmo agregar controles de servidor Web a un formulario Web Form.

Ejecutar esta demostracin

Agregar sencillos controles de servidor Web 1. Abrir la pgina WebForm1.aspx del proyecto de aplicacin Web Mod04. 2. Agregar un control de servidor TextBox, Button y Label a la pgina WebForm1.aspx. 3. Utilizando la ventana Propiedades, establecer las propiedades ID y Text de los controles a los valores en la siguiente tabla:

Control TextBox Button Label

ID txtName cmdSubmit lblMessage

Text Name Submit Message

4. Visualizar la pgina en vista HTML. El formulario Web Form ha sido creado con el atributo runat="server", y los atributos style se han agregado a los controles para ubicarlos en el formulario Web Form en modo GridLayout.

Demostracin03, Crear Formularios en Web Form con Microsoft ASP.NET

Universidad Nacional, Sede Regin Brunca, Escuela de Informtica Programacin IV, I Semestre Ao 2012

Observar cmo se han implementado las propiedades ID y Text en HTML para los distintos controles. 5. Generar y examinar WebForm1.aspx. 6. Introducir texto en el cuadro de texto y hacer clic en Submit para mostrar que el valor se conserva. 7. Visualizar la fuente de la pgina. Observar que el posicionamiento de los controles se realiza utilizando DHTML. 8. Cerrar la vista de la fuente de la pgina. Cambiar el navegador de destino 1. Hacer clic con el botn derecho sobre el formulario en la vista Diseo y hacer clic en Propiedades. 2. Cambiar Target Schema a Internet Explorer 3.02 / Navigator 3.0, y hacer clic en Aceptar. 3. Guardar los cambios y visualizar la pgina de nuevo en el navegador. 4. Visualizar el cdigo fuente de la pgina. Ahora, el posicionamiento de los controles se realiza utilizando tablas HTML. 5. Cerrar la vista de fuente de la pgina.

6. Hacer clic con el botn derecho sobre el formulario en vista Diseo y hacer clic en Propiedades. 7. En el cuadro de dilogo Pginas de propiedades, volver a establecer Target Schema como Internet Explorer 5.0. Cambiar la presentacin de la pgina 1. En el cuadro de dilogo Pginas de propiedades, seleccionar FlowLayout (en lugar de GridLayout) en el campo Page Layout, y hacer clic en Aceptar. La cuadrcula desaparece. 2. Agregar un control Button al formulario Web, y visualizar la pgina en vista HTML. El nuevo botn no tiene un atributo style. Agregar un control Calendar 1. En la vista Diseo, agregar un control de servidor Web Calendar en el formulario Web Form, y visualizar la pgina en vista HTML.
Demostracin03, Crear Formularios en Web Form con Microsoft ASP.NET

Universidad Nacional, Sede Regin Brunca, Escuela de Informtica Programacin IV, I Semestre Ao 2012

Localizar el cdigo HTML para el control Calendar: <asp:Calendar id="Calendar1" runat="server"></asp:calendar> 2. Guardar los cambios y visualizar la pgina en el navegador y, a continuacin, visualizar el cdigo fuente de la pgina. Observar el HTML generado por el control Calendar. 3. Cerrar la vista de fuente de la pgina. 4. Editar la pgina WebForm1 y ver las propiedades del control Calendar en la ventana Propiedades. 5. Hacer clic con el botn derecho en el control Calendar en el formulario Web Form en la vista Diseo y seleccionar Formato automtico para mostrar los diferentes estilos del cuadro de dilogo Formato automtico de Calendar. Hacer clic en Colorful 1, y clic en Aceptar. 6. Guardar los cambios y visualizar la pgina de nuevo en el navegador para ver el nuevo aspecto del control Calendar.

Demostracin03, Crear Formularios en Web Form con Microsoft ASP.NET