3.- Crear Formularios Web Forms

Índice

Descripción 1

Lección: Crear formularios Web Forms 2

Lección: Uso de controles de servidor 12

Crear formularios Web Forms con Microsoft ASP.NET

Crear formularios Web Forms con Microsoft ASP.NET 1

Descripción

Crear formularios Web Forms

Uso de controles de servidor

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

En este módulo, estudiaremos cómo crear y poblar formularios Web Forms. Los formularios Web Forms son páginas Web programables que sirven como interfaz de usuario (IU) para un proyecto de aplicación Web utilizando ASP.NET. Un formulario Web Form presenta información al usuario visualizable en cualquier tipo de navegador, e implementa lógica de aplicación utilizando código ejecutable en el servidor.

En este módulo, aprenderemos a:

Agregar un formulario Web Form a un proyecto de aplicación Web ASP.NET.

Utilizar el Cuadro de herramientas de Microsoft Visual Studio® .NET para agregar controles de servidor a un formulario Web Form.

Introducción

Objetivos

2 Crear formularios Web Forms con Microsoft ASP.NET

Lección: crear formularios Web Forms

¿Qué es un formulario Web Form?

Crear un formulario Web Formcon Visual Studio .NET

Demostración: convertir una página HTML en un formulario Web Form

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

En esta lección, estudiaremos cómo crear un formulario Web Form. También aprenderemos cómo identificar las principales características de los formularios Web Forms.

En esta lección, aprenderemos a:

Identificar y explicar el código HTML (Hypertext Markup Language) que compone un formulario Web Form.

Crear un formulario Web Form utilizando Visual Studio .NET.

Introducción

Objetivos de la lección


¿Qué es un formulario Web Form?

<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true"%>

<html><body ms_positioning="GridLayout">

<form id="Form1" method="post" runat="server"></form>

</body></html>

<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true"%>

<html><body ms_positioning="GridLayout">

<form id="Form1" method="post" runat="server"></form>

</body></html>

Extensión .aspxAtributos de página

Directiva @ PageAtributos de cuerpoAtributos de formulario

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

Los formularios Web Forms están formados por una combinación de HTML, código y controles que se ejecutan en un servidor Web ejecutando Microsoft Internet Information Services (IIS). Los formularios Web Forms muestran una interfaz de usuario que genera HTML y que se envía al navegador, mientras que el código de soporte y los controles que la componen permanecen en el servidor Web. Esta división entre el interfaz en el cliente y el código en el servidor es una importante diferencia entre los formularios Web Forms y las páginas Web tradicionales. Mientras una página Web tradicional requiere que todo el código se envíe y se procese en el navegador, los formularios Web Forms únicamente necesitan enviar al navegador los controles de la interfaz, y el proceso de las páginas se mantiene en el servidor. Esta división entre IU y código aumenta el número de navegadores soportados e incrementa la seguridad y funcionalidad de la página Web.

Los formularios Web Forms se denominan habitualmente páginas ASP.NET o páginas ASPX. Los formularios Web Forms tienen una extensión .aspx y funcionan como contenedores para el texto y los controles que deseamos mostrar en el navegador.

Las páginas ASP.NET (.aspx) y Active Server Pages (ASP) (.asp) pueden coexistir en el mismo servidor. La extensión del archivo determina si la página la procesa ASP o ASP.NET.

Los formularios Web Forms están frecuentemente formados por dos archivos distintos: el archivo .aspx contiene la IU para el formulario Web Form, mientras que el archivo .aspx.vb o .aspx.cs, denominado página de código subyacente, contiene el código de soporte.

Introducción

Extensión .aspx


Las funciones de un formulario Web Form están definidas por tres niveles de atributos. Los atributos de página definen las funciones globales, los atributos de cuerpo definen cómo se mostrará una página y los atributos de formulario definen cómo se procesarán los grupos de controles.

La etiqueta <@Page> define atributos específicos de la página que utiliza el parseador de páginas ASP.NET y el compilador. Únicamente podemos incluir una etiqueta <@ Page> por archivo .aspx. Los siguientes ejemplos son etiquetas <@ Page> típicas para Microsoft Visual Basic® .NET y para Microsoft Visual C#™ .NET:

<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true" %> <%@ Page Language="c#" Codebehind="WebForm1.aspx.cs" SmartNavigation="true" %> Los atributos de una etiqueta <@ Page> incluyen:

Language El atributo Language define el lenguaje en el que está escrito el script de la página Web. Algunos de los valores de este atributo son: vb, c# y JScript.

Página Codebehind El atributo de página Codebehind identifica la página de código subyacente que tiene la lógica que soporta el formulario Web Form. Cuando Visual Studio .NET crea un formulario Web Form, como WebForm1.aspx, también crea una página de código subyacente, WebForm1.aspx.vb o WebForm1.aspx.cs.

Para más información sobre las páginas de código subyacente, consultar el Módulo “Agregar código a un formulario Web Form con Microsoft ASP.NET”.

SmartNavigation El atributo SmartNavigation de ASP.NET permite al navegador actualizar únicamente las secciones del formulario que han cambiado. Las ventajas de SmartNavigation son que la pantalla no parpadea mientras se actualiza; en lugar de ello, se mantiene la posición de desplazamiento y se mantiene la "última página" en el historial. Smartnavigation únicamente está disponible para los usuarios con Microsoft Internet Explorer 5 o superior.

Atributos de la página

Visual Basic .NET

C#

Nota


Los atributos de la etiqueta <Body> definen el aspecto de los objetos que se muestran en el navegador del cliente. La siguiente es una etiqueta <Body> típica:

<body ms_positioning="GridLayout"> Los atributos de una etiqueta <Body> incluyen:

PageLayout El atributo pageLayout (etiquetado como ms_positioning) determina cómo se posicionan los controles y el texto en la página. Existen dos opciones para pageLayout:

• FlowLayout En FlowLayout, el texto, las imágenes y los controles fluyen por la pantalla, dependiendo del ancho de la ventana del navegador.

• GridLayout En GridLayout, los campos de texto, las imágenes y los controles de una página están fijados por coordinadas absolutas. GridLayout es el valor de pageLayout predeterminado para Visual Studio .NET. El siguiente código de ejemplo muestra cómo implementar GridLayout y situar un cuadro de texto: <body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:textbox id="txtField1" style="Z-INDEX: 101; LEFT: 65px; POSITION: absolute; TOP: 98px" runat="server" Height="26px" Width="194px"> </asp:textbox> </form> </body>

La etiqueta <Form> define cómo se procesarán los grupos de controles. La etiqueta <Form> es diferente del término Web Form utilizado para definir la página Web completa. Los atributos de la etiqueta <Form> definen cómo se procesarán los controles. Aunque podemos tener muchos formularios HTML en una página, únicamente podemos tener un formulario del lado del servidor en una página .aspx.

El siguiente ejemplo es de una etiqueta <Form> típica:

<form id="Form1" method="post" runat="server"> ... </form>

Atributos del cuerpo

Atributos del formulario


Los atributos de una etiqueta <Form> incluyen:

Method El atributo Method identifica el método para enviar valores de control de retorno al servidor. Las opciones de este atributo son:

• Post Los datos se pasan en pares nombre/valor dentro del cuerpo de la petición HTTP (Hypertext Transfer Protocol).

• Get Los datos se pasan en una cadena de consulta.

Runat Una de las principales características de un formulario Web Form es que los controles se ejecutan en el servidor. El atributo runat="server" hace que el formulario publique información de control de retorno a la página ASP.NET en el servidor donde se ejecuta el código de soporte. Si el atributo runat no está establecido en "server", el formulario funciona como un formulario HTML normal.

El siguiente código procede del formulario Web Form predeterminado de Visual Studio .NET al crear un nuevo proyecto de aplicación Web ASP.NET con Visual Basic .NET:

<%@Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>WebForm1</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.1"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.1"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> 'HTML y controles aquí </form> </body> </html>

Ejemplo con Visual Basic .NET


El siguiente código procede del formulario Web Form predeterminado de Visual Studio .NET al crear un nuevo proyecto de aplicación Web ASP.NET con Visual C#:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> 'HTML y controles aquí </form> </body> </html>

Ejemplo de C#


Crear un formulario Web Form con Visual Studio .NET

Las nuevas aplicaciones Web ASP.NET crean un formulario Web predeterminado: WebForm1.aspx

Crear formularios Web Forms adicionales desde el Explorador de soluciones

Actualizar páginas HTML existentes en formularios Web Forms

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

Dependiendo del punto en que nos encontremos en el proceso de desarrollo, existen varios modos de crear un formulario Web Form.

Cuando creamos un nuevo proyecto en Visual Studio .NET, se incluye automáticamente en el proyecto un formulario Web Form predeterminado denominado WebForm1.aspx.

Crear un nuevo proyecto de aplicación Web ASP.NET y un formulario Web Form predeterminado

1. En Visual Studio .NET, en la Página de inicio, hacer clic en Nuevo proyecto.

2. En el cuadro de diálogo Nuevo proyecto, hacer clic en Aplicación Web ASP.NET, escribir el nombre del proyecto en el campo Ubicación y hacer clic en Aceptar.

Visual Studio .NET crea una nueva aplicación Web y un formulario Web Form predeterminado denominado WebForm1.aspx.

Si estamos expandiendo un proyecto existente, podemos utilizar el Explorador de soluciones para agregar rápidamente formularios Web Forms adicionales.

Agregar formularios Web Forms adicionales a un proyecto de aplicación Web

1. En la ventana del Explorador de soluciones, hacer clic con el botón derecho en el nombre del proyecto, seleccionar Agregar, y hacer clic en Agregar formulario Web Form. Se abrirá el cuadro de diálogo Agregar nuevo elemento - NombreProyecto.

2. En el cuadro de diálogo Agregar nuevo elemento - NombreProyecto, cambiar el nombre del formulario Web Form, y hacer clic en Abrir.

Se creará un nuevo formulario Web Form y se agregará al proyecto.

Introducción

Aplicaciones Web nuevas

Crear formularios Web Forms adicionales


Si estamos revisando un sitio Web existente, podemos importar páginas HTML a Visual Studio .NET y actualizar esas páginas a formularios Web Forms.

Actualizar páginas HTML existentes

1. En el Explorador de soluciones, hacer clic con el botón derecho en el nombre del proyecto, seleccionar Agregar y hacer clic en Agregar elemento existente.

2. En el cuadro de diálogo Agregar elemento existente, navegar hasta la ubicación del archivo HTML, hacer clic en el nombre del archivo y posteriormente en Abrir.

3. Cambiar el nombre del archivo nombreArchivo.htm por nombreArchivo.aspx, y hacer clic en Sí a la pregunta de si estamos seguros de desear cambiar la extensión del archivo.

4. Cuando se nos pregunte si deseamos crear un nuevo archivo de clase, hacer clic en Sí.

Actualizar páginas HTML


Demostración: convertir una página HTML en un formulario Web Form

Cambiar la extensión .htm por la extensión .aspx

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

Un modo rápido de crear páginas Web ASP.NET es convertir las páginas HTML existentes.

Ejecutar esta demostración

1. Iniciar Visual Studio .NET. 2. Crear un nuevo Proyecto de aplicación Web ASP.NET y establecer la

ubicación en http://localhost/Demos03. 3. Hacer clic en Agregar elemento existente en el menú Archivo. 4. En el cuadro Archivos de tipo del cuadro de diálogo Agregar elemento

existente, hacer clic en Todos los archivos (*.*). 5. Seleccionar la página HTMLPage.htm y hacer clic en Abrir. Este

archivo se puede encontrar dentro del fichero demos03.zip. 6. Abrir la página HTMLPage.htm y cambiar a la vista HTML. 7. Agregar una cuarta opción al cuadro de lista que contenga Lead

Program Manager para mostrar que la ayuda de contexto IntelliSense® está funcionando en el archivo HTML.

El código debería ser parecido el siguiente: <option>Lead Program Manager</option>

8. Guardar los cambios de la página. 9. En el Explorador de soluciones, hacer clic con el botón derecho en

HTMLPage.htm y hacer clic en Cambiar nombre. Cambiar la extensión .htm de la página por .aspx, hacer clic en Sí cuando se nos pregunte si se estamos seguros, y hacer clic en Sí de nuevo cuando se nos pregunte si deseamos crear un nuevo archivo de clase.

10. En la página HTMLPage.aspx, observamos que se ha añadido una directiva @Page a la página.


11. Hacer clic en Mostrar todos los archivos en el Explorador de soluciones para mostrar la página de código subyacente que se ha creado.

12. Hacer clic en Guardar para guardar el proyecto. 13. Hacer clic con el botón derecho sobre HTMLPage.aspx en el Explorador

de soluciones, clic en Generar y examinar para generar el proyecto y visualizar la página en el navegador de Visual Studio .NET.

Debemos generar el proyecto puesto que Visual Studio .NET necesita compilar la nueva página de código subyacente.

14. Escribir un nombre en el cuadro de texto Nombre, hacer clic en una profesión en la lista Profession y hacer clic en Guardar.

Cuando se muestre la página de nuevo, la información en los controles se habrá perdido. Es el comportamiento predeterminado de los formularios HTML.

15. Hacer clic con el botón derecho en la página y clic en Ver fuente para mostrar el HTML fuente en el cliente.

El HTML enviado al cliente es el mismo que el HTML creado en el servidor.

16. Cerrar la vista del código fuente HTML en el navegador.


Lección: uso de controles de servidor

¿Qué es un control de servidor?Tipos de controles de servidorGuardar View StateDemostración: convertir controles HTML en controles de servidorControles de servidor HTML Controles de servidor Web Práctica: identificar el código HTML generado por los controles de servidor Web Seleccionar el control adecuadoDemostración: agregar controles de servidor a un formulario Web

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

En esta lección, estudiaremos cómo utilizar controles de servidor ASP.NET, como botones, cuadros de texto y listas desplegables. Estos controles de servidor son diferentes de los controles HTML en los que la lógica de soporte se ejecuta en el servidor y no en el navegador del usuario.

En esta lección, aprenderemos a:

Describir las características de los controles de servidor. Describir los tipos de controles de servidor disponibles. Explicar cómo los formularios Web Forms guardan el control de servidor

Web ViewState. Agregar controles de servidor HTML a formularios Web Forms. Agregar controles de servidor Web a formularios Web Forms. Seleccionar el control adecuado para una determinada situación.

Introducción

Objetivos de la lección


¿Qué es un control de servidor?

Runat="server"

Los eventos ocurren en el servidor

View state saved

Have built-in functionality

Common object model

Todos tiene atributos Id y Text

Crear browser-specific HTML

<asp:Button id="Button1" runat="server" Text="Submit"/><asp:Button id="Button1" runat="server" Text="Submit"/>

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

Los controles de servidor ASP.NET son componentes que se ejecutan en el servidor y encapsulan la IU y demás funcionalidades relacionadas. Los controles de servidor se utilizan en páginas ASP.NET y en las clases de código subyacente. Los controles de servidor incluyen botones, cuadros de texto y listas desplegables.

El siguiente ejemplo es el de un control de servidor Button:

<asp:Button id="Button1" runat="server" Text="Submit" /> Los controles de servidor tienen un atributo runat="server", el mismo atributo que los formularios Web Forms. Esto significa que la lógica del control se ejecuta en el servidor y no en el navegador del usuario. Los controles de servidor se diferencian de los controles HTML en que éstos últimos únicamente se ejecutan en el navegador del cliente y no realizan ninguna acción en el servidor.

Otra característica de los controles de servidor es que el estado de la vista, las opciones de configuración y la entrada de datos de usuario en el control se guardan automáticamente cuando la página viaja entre el cliente y el servidor. Los controles HTML tradicionales no tienen estado y vuelven a su configuración predeterminada cuando la página retorna del servidor al cliente.

La funcionalidad de un control es lo que se produce cuando el usuario hace clic en un botón o en un cuadro de lista. A estos procesos se denominan procedimientos de eventos. Como programadores del formulario Web Form, debemos determinar los procedimientos de eventos asociados a cada control de servidor.

Para más información sobre la funcionalidad del control de servidor, consultar el Módulo “Agregar código a un formulario Web Form con Microsoft ASP.NET”.

Introducción

Runat=“server”

Funcionalidad incluida

Nota


En ASP.NET, los controles de servidor se basan en un modelo de objetos común, y por tanto, comparten varios atributos entre sí.

Por ejemplo, cuando deseamos establecer el color de fondo de un control, siempre utilizamos el mismo atributo BackColor, independientemente del control. El código HTML siguiente del botón de un control de servidor Web muestra algunos de los atributos típicos de un control de servidor:

<asp:Button id="Button1" runat="server" BackColor="red" Width="238px" Height="25px" Text="Web control"></asp:Button> Cuando un navegador interpreta una página, los controles de servidor Web determinan el tipo de navegador que solicita la página, y envía el código HTML adecuado.

Por ejemplo, si el navegador soporta scripting de cliente, como Internet Explorer versión 4.0 o posterior, los controles generan scripts de cliente para implementar su funcionalidad. Sin embargo, si el navegador no soporta scripting de cliente, los controles crean código del lado del servidor y requieren más viajes de ida y vuelta al servidor para obtener el mismo comportamiento.

El siguiente ejemplo es el código HTML de ASP.NET en un formulario Web Form que deberíamos escribir para crear un cuadro de texto con el texto predeterminado: "Introduzca su nombre de usuario"

<asp:TextBox id="TextBox1" runat="server" Width="238px" Height="25px">Introduzca su nombre de usuario</asp:TextBox> Cuando un usuario con Internet Explorer 6 accede a esta página, el CLR crea el siguiente código HTML personalizado para Internet Explorer 6:

<input name="TextBox1" type="text" value="Introduzca su nombre de usuario" id="TextBox1" style="height:25px;width:238px" /> Como el control de servidor crea código HTML personalizado en función de las características disponibles en el navegador del cliente, podemos escribir código para las últimas versiones de navegadores sin tener que preocuparnos de que los usuarios que no estén actualizados puedan ser bloqueados por errores del navegador.

Modelo de objetos común

Crear código HTML específico del navegador


Tipos de controles de servidor

Controles de servidor HTML

Controles de servidor Web

Controles intrínsecos

Controles de validación

Controles ricos

Controles List-bound

Controles Web de Internet Explorer

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

Existen numerosos tipos de controles de servidor disponibles en ASP.NET. Algunos controles de servidor se parecen mucho a los controles HTML tradicionales, mientras que otros son nuevos en ASP.NET. Esta amplia variedad de controles nos permite personalizar nuestro formulario Web Form para que se adapte a la aplicación que estamos creando.

Por defecto, el servidor no tiene disponibles los elementos HTML de una página de un formulario Web Form; los elementos HTML son tratados como texto opaco que pasa a través del navegador. Sin embargo, al agregar el atributo runat="server" se convierten los elementos HTML en controles de servidor HTML, exponiéndolos por tanto como elementos que podemos programar con código del lado del servidor.

Los controles de servidor Web no sólo incluyen controles de tipo formulario, como botones y cuadros de texto, sino también controles con funcionalidad especial, como el control calendario. Los controles de servidor Web son más abstractos que los controles de servidor HTML, porque su modelo de objetos no refleja necesariamente la sintaxis HTML.

Los controles de servidor Web se clasifican como:

Controles intrínsecos Los controles intrínsecos concuerdan con los sencillos elementos HTML, como botones o cajas de listas. Utilizamos estos controles del mismo modo que utilizamos los controles de servidor HTML.

Controles de validación Los controles de validación incorporan lógica que permite verificar la entrada de datos de un usuario. Para probar la entrada de un usuario, adjuntamos un control de validación al control de entrada y especificamos las condiciones de entrada de datos de usuario correctas.

Para más información sobre los controles de validación, consultar el

Introducción



Nota


Módulo “Validar la entrada de datos de usuario”. Controles ricos estándar

Los controles estándar son controles complejos que incluyen múltiples funciones. Ejemplos de controles estándar incluyen el control AdRotator, que se utiliza para mostrar una secuencia de anuncios o el control Calendar, que proporciona un calendario de citas.

Controles enlazados a listas Los controles enlazados a listas pueden mostrar listas de datos en una página ASP.NET. Estos controles nos permiten mostrar, reformatear, clasificar y editar datos.

Para más información sobre los controles enlazados a listas y el acceso a datos, consultar el Módulo “Acceso a datos relacionales utilizando Microsoft Visual Studio .NET,” y el Módulo “Acceso a datos con Microsoft ADO.NET”.

Controles Web de Internet Explorer Los controles Web de Internet Explorer son un conjunto de controles complejos, como MultiPage, TabStrip, Toolbar y TreeView, que pueden descargarse desde Internet e integrarse en el entorno de Visual Studio .NET para ser reutilizados en cualquier aplicación Web con ASP.NET. Estos controles pueden ser interpretados en todos los navegadores utilizados habitualmente, y al mismo tiempo aprovechan las potentes características soportadas por las versiones de Internet Explorer 5.5 o superior. Podemos descargar estos controles desde: http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/overview/overview.asp.

Este ejemplo muestra el código HTML de tres controles de tipo botón: un botón HTML, un botón de control de servidor HTML y un botón de control de servidor Web. Todos los controles botón parecen idénticos en el navegador del usuario. El botón HTML únicamente puede invocar eventos del lado del cliente, mientras que el botón de control de servidor HTML y el botón de control de servidor Web producen eventos del lado del servidor.

El siguiente es el código de un control de botón HTML: <INPUT type="button" value="HTML Button">

Si agregamos el atributo runat="server" el control de botón HTML anterior se convierte en un control de servidor HTML que se ejecutará en el servidor. Además del atributo runat="server", también debemos agregar un atributo id para que el control funcione como un control de servidor. El botón de control de servidor HTML se muestra en el siguiente ejemplo: <INPUT type="button" value="HTML Server Control" id="button1" runat="server">

El botón de control de servidor Web utiliza código HTML de ASP.NET: <asp:Button id="Button1" runat="server" Text="Web control"/>

Nota

Ejemplo de controles equivalentes


Guardar el estado de la vista

Control oculto ViewState de pares de nombre y valor almacenados en el formulario Web Form

De forma predeterminada, ajustable a nivel de formulario Web Form y control

<%@ Page EnableViewState="False" %>

<asp:ListBox id="ListName" EnableViewState="true" runat="server">

</asp:ListBox>

<%@ Page EnableViewState="False" %>

<asp:ListBox id="ListName" EnableViewState="true" runat="server">

</asp:ListBox>

<input type="hidden" name="__VIEWSTATE" value="dDwtMTA4MzE0MjEwNTs7Pg==" />

<input type="hidden" name="__VIEWSTATE" value="dDwtMTA4MzE0MjEwNTs7Pg==" />

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

Uno de los retos de los sitios Web es resolver el almacenamiento del estado de los controles (configuración o entrada de datos del usuario) en una página Web mientras el código HTML viaja entre el cliente y el servidor. Como con cualquier tecnología basada en HTTP, los formularios Web Forms no tienen estado, lo que significa que el servidor no conserva ninguna información sobre las peticiones anteriores del cliente.

Los formularios Web Forms ASP.NET gestionan este problema de almacenamiento del estado del control de servidor Web agregando un control oculto denominado _VIEWSTATE que registra el estado de los controles en el formulario Web Form. Concretamente, _VIEWSTATE se añade al formulario del lado del servidor indicado por la etiqueta <Form … runat="server">, y únicamente registra el estado de los controles en esta sección. Mientras la página viaja desde el cliente al servidor, el estado del control de servidor Web se almacena con la página y puede actualizarse en cualquier extremo de la transacción (en el cliente o el servidor).

Como el estado de la página Web se guarda dentro del formulario del servidor, la página Web puede ser aleatoriamente enrutada en una granja de servidores Web y no necesita volver al mismo servidor. La ventaja del proceso _VIEWSTATE es que el programador puede concentrarse en el diseño de la página y no necesita generar la infraestructura necesaria para realizar el seguimiento del estado de la misma.

Introducción


El control _VIEWSTATE es un control oculto que contiene el valor de una cadena de pares nombre-valor que lista el nombre de cada control y el último valor de ese control.

Con cada petición, el control _VIEWSTATE se actualiza y se envía al servidor. La respuesta del servidor puede a su vez actualizar el control _VIEWSTATE, que se devuelve con la respuesta. El resultado es que la configuración de la página permanece coherente de una solicitud a la siguiente.

El siguiente ejemplo incluye el código HTML generado por un formulario Web Form y enviado al cliente:

<form name="Form1" method="post" action="WebForm1.aspx" id="Form1"> <input type="hidden" name="__VIEWSTATE" value="dDw3NzE0MTExODQ7Oz4=" /> 'HTML aquí </form> De forma predeterminada, un formulario Web Form guarda el estado de la vista de los controles en el formulario Web Form. Para formularios Web Forms con múltiples controles, el tamaño del campo valor de las propiedades _VIEWSTATE puede ralentizar el rendimiento. Para maximizar el rendimiento de la página, podemos deshabilitar el atributo ViewState a nivel de página y habilitar ViewState únicamente para determinados controles.

Para deshabilitar el almacenamiento del estado de la vista a nivel de página Web, estableceremos el atributo EnableViewState de la directiva @Page, como se muestra en el siguiente código:

<%@ Page EnableViewState="False" %> Para habilitar el almacenamiento del estado de la vista de un control específico, estableceremos el atributo EnableViewState del control, como se muestra en el siguiente código:

<asp:ListBox id="ListName" EnableViewState="true" runat="server"></asp:ListBox>

Para más información sobre guardar el estado, consultar el Módulo “Gestionar el estado”.

Control oculto

Deshabilitar y habilitar ViewState

Nota


Demostración: convertir controles HTML en controles de servidor

Actualizar controles HTML a controles de servidor HTML

Agregar un control de servidor Web

Utilizar SmartNavigation

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

Visual Studio .NET facilita la conversión de controles HTML en controles de servidor.


1. Visualizar la página HTMLPage.aspx que convertimos de una página HTML en la demostración anterior, en la vista HTML, y agregar un atributo runat="server" a los controles de cuadro de texto, selección y el de envío.

2. Hacer clic en Guardar para guardar el proyecto. 3. Visualizar la página HTMLPage.aspx en el navegador haciendo clic con

el botón derecho en la página en el Explorador de soluciones y haciendo clic en Visualizar en el navegador. No es necesario volver a generar el proyecto, ya que no se ha cambiado el código.

4. Visualizar el código fuente de la página para mostrar los cambios realizados. Se ha agregado un atributo name a cada control de servidor.

5. Cerrar la vista del código fuente HTML en el navegador. 6. En el navegador, introducir información en los controles, y hacer clic en

Guardar. Los controles todavía pierden sus valores. 7. Editar la página y agregar un atributo runat="server" al formulario. 8. Guardar los cambios y visualizar la página de nuevo en el navegador. No

es necesario volver a generar el proyecto ya que no se ha agregado ningún código.

9. Visualizar el código fuente de la página para mostrar los cambios realizados. Entre otros cambios, se han agregado los atributos action y method a la etiqueta del formulario y se ha creado un control oculto denominado __VIEWSTATE.

10. Cerrar la vista del código fuente HTML en el navegador. 11. Introducir información en los controles y hacer clic en Guardar. Ahora,

los controles guardan sus valores.


12. Editar la página y agregar un control de servidor Web Label al formulario Web Form, debajo del botón Guardar:

<asp:label id="lblMessage" runat="server">Label</asp:label>

13. Guardar los cambios y visualizar la página en el navegador. 14. Visualizar el código fuente de la página. El control de servidor Web

Label genera un elemento <span>. 15. Cerrar la vista del código fuente HTML en el navegador. 16. Visualizar la página http://localhost/Demos03/HTMLPage.aspx en

Internet Explorer y modificar el tamaño del navegador para que muestre verticalmente menos que la página completa. La barra de desplazamiento vertical debería estar visible.

17. Desplazarse hacia abajo y hacer clic en Guardar. Seremos redirigidos a la parte superior de la página debido al postback.

18. Cerrar el navegador. 19. Editar la página en la vista HTML y agregar SmartNavigation= "true"

a la directiva @ Page. El código HTML debería ser parecido al siguiente: <%@ Page SmartNavigation="true" Language="vb" CodeBehind="HTMLPage.aspx.vb" AutoEventWireup="false" Inherits="Mod04.HTMLPage" %> <%@ Page SmartNavigation="true" Language="c#" CodeBehind="HTMLPage.aspx.cs" AutoEventWireup="false" Inherits="Mod04.HTMLPage" %>

20. Guardar los cambios y visualizar la página en otro navegador cuyo tamaño se haya modificado.

21. Desplazarse hacia abajo y hacer clic en Guardar. Esta vez, no somos redireccionados a la parte superior de la página durante el postback, la página mantiene su posición actual.

22. Visualizar el código fuente de la página en el navegador. En Internet Explorer 4.0 y posterior, el atributo SmartNavigation crea IFrames para actualizar únicamente la parte modificada de la página.

23. Cerrar la vista del código fuente HTML en el navegador.

Agregar una etiqueta al formulario Web Form

Uso de SmartNavigation

Visual Basic .NET

C#



Basados en elementos HTML

Existen en el espacio de nombres System.Web.UI.HtmlControls

<input type="text" id="txtName"runat="server" />

<input type="text" id="txtName"runat="server" />

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

Los controles HTML de un formulario Web Form no están disponibles en el servidor. Si convertimos los controles HTML en controles de servidor HTML, podemos exponerlos como elementos a nuestro código del lado del servidor. Esta conversión nos permite utilizar los controles para disparar eventos que son gestionados en el servidor.

Los controles de servidor HTML incluyen el atributo runat="server", y deben residir en una etiqueta contenedora <form …runat="server">…</form>.

La ventaja de los controles de servidor HTML es que nos permiten actualizar rápidamente páginas existentes a formularios Web Forms. Además, podemos optimizar el rendimiento de una página ajustando qué controles deben funcionar localmente en el navegador y qué controles se procesan en el servidor.

El siguiente código de ejemplo muestra un sencillo cuadro de texto HTML que el navegador procesa en el lado del cliente:

<input type="text" id="txtName" > Si agregamos el atributo runat="server", el control se convierte en un control de servidor HTML que ASP.NET procesa en el lado del servidor:

<input type="text" id="txtName" runat="server" />

Introducción

Ejemplo




Existen en el espacio de nombresSystem.Web.UI.WebControls

Sintaxis del control

HTML generado por el control

<asp:TextBox id="TextBox1"runat="server">Text_to_Display</asp:TextBox>

<asp:TextBox id="TextBox1"runat="server">Text_to_Display</asp:TextBox>

<input name="TextBox1" type="text" value="Text_to_Display"Id="TextBox1"/>

<input name="TextBox1" type="text" value="Text_to_Display"Id="TextBox1"/>

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

Los controles de servidor Web son controles de servidor creados específicamente para ASP.NET. A diferencia de los controles de servidor HTML, los controles de servidor Web no funcionarán si falta el atributo runat="server".

Los controles de servidor Web se basan en un modelo de objetos común; por ello, todos los controles comparten varios atributos, incluyendo la etiqueta <asp:TipoControl...>, y un atributo id. Los controles de servidor Web existen en el espacio de nombres System.Web.UI.WebControls y pueden utilizarse en cualquier formulario Web Form.

Los controles de servidor Web intrínsecos corresponden a elementos HTML simples. La siguiente tabla muestra algunos de los controles de servidor Web intrínsecos utilizados más habitualmente.

Control de servidor Web

Control HTML equivalente

Función del control de servidor Web

<asp:button> <input type=submit> Crea un botón que envía una

petición al servidor.

<asp:checkbox> <input type=checkbox> Crea una casilla de verificación que puede seleccionarse haciendo clic.

<asp:hyperlink> <a href="…"> </a> Crea un hiperenlace a una etiqueta anchor HTML.

<asp:image> <img src="…"> Crea un área que se utiliza para mostrar una imagen.

<asp:imagebutton> <input type=image> Crea un botón que incorpora la visualización de una imagen en lugar de texto.

<asp linkButton> Ninguno Crea un botón que tiene el aspecto de un hiperenlace.

Introducción

Controles de servidor Web intrínsecos


(continuación) Control de servidor Web

Control HTML equivalente

Función del control de servidor Web

<asp:label> <span> </span> Crea texto que los usuarios no

pueden modificar.

<asp:listbox> <select size="5"> </select>

Crea una lista de opciones. Permite múltiples selecciones.

<asp:panel> <div> </div> Crea una división sin bordes en el formulario que se utiliza como contenedor para otros controles.

<asp:radiobutton> <input type=radiobutton> Crea un único control de botón de opción.

<asp:table> <table> </table> Crea una tabla.

<asp:textbox> <input type=text> Crea un control de cuadro de texto.

Los controles de validación son controles ocultos que validan la entrada de datos del usuario comparándolos con patrones predeterminados. La siguiente tabla muestra algunos de los controles de validación que se utilizan más habitualmente.

Control Función CompareValidator Requiere que la entrada concuerde con una segunda

entrada o campo existente.

CustomValidator Requiere que la entrada concuerde con una condición como que sean números primos o impares.

RangeValidator Requiere que la entrada concuerde con un intervalo especificado.

RegularExpressionValidator Requiere que la entrada concuerde con un formato especificado como un número de teléfono de un determinado país o una contraseña que tenga números y letras.

RequiredFieldValidator Requiere que el usuario introduzca algún valor antes de que el control sea procesado.

ValidationSummary Recopila todos los mensajes de error de los controles de validación para una visualización centralizada.

Para más información sobre los controles de validación, consultar el Módulo “Validar la entrada de datos del usuario”.

Los controles estándares proporcionan una rica funcionalidad a nuestro formulario Web Form insertando funciones complejas. La siguiente tabla muestra los controles ricos disponibles actualmente.

Control Función AdRotator Muestra una secuencia (predefinida o aleatoria) de

imágenes.

Calendar Muestra un calendario gráfico en el que los usuarios pueden seleccionar fechas.

Controles de validación

Nota

Controles ricos estándares


Los controles enlazados a listas pueden mostrar datos desde una fuente de datos. La siguiente tabla muestra algunos de los controles de lista que se utilizan habitualmente.

Control Función CheckBoxList Muestra datos como una columna de casillas de verificación.

Repeater Muestra información desde un conjunto de datos utilizando el conjunto de elementos y controles HTML que especifiquemos. El control Repeater repite el elemento una vez por cada registro del DataSet.

DataList Similar al control Repeater, pero con más opciones de formato y presentación, incluyendo la posibilidad de mostrar información en una tabla. El control DataList también nos permite especificar el comportamiento de edición.

DataGrid Muestra información, normalmente enlazada a datos en forma tabular, con columnas. También proporciona mecanismos para permitir editar y clasificar.

DropDownList Muestra datos en un menú desplegable.

Listbox Muestra datos en una ventana.

RadioButtonList Muestra datos en una columna de botones de opción.

Para más información sobre los controles enlazados a listas y el acceso a datos, consultar el Módulo “Acceso a datos con Microsoft ADO.NET”.

Controles enlazados a listas

Nota


Práctica: identificar el código HTML generado por los controles de servidor Web

Los estudiantes:

Agregarán controles de servidor Web a un formulario Web e identificarán el código HTML que se envía al cliente

Tiempo: 5 minutos

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

En esta práctica, agregaremos controles de servidor Web a un formulario Web Form y visualizaremos el código fuente en un navegador para determinar qué código HTML se ha enviado al cliente.

Cumplimentar la tabla inferior siguiendo los pasos

1. Iniciar Visual Studio .NET. 2. Crear un proyecto de aplicación Web y establecer la ubicación en

http://localhost/Practices03. 3. Abrir la página WebForm1.aspx. 4. Agregar los controles TextBox, Button, Label, ListBox, Image,

Hyperlink y Calendar al formulario Web Form. 5. Hacer clic con el botón derecho en WebForm1.aspx en el Explorador de

soluciones y clic en Generar y examinar. 6. Hacer clic con el botón derecho en el navegador y clic en Ver fuente

para ver el código HTML enviado al cliente. 7. Cumplimentar la siguiente tabla con las etiquetas HTML del control.

Control de servidor Web HTML enviado al cliente asp:textbox

asp:button

asp:label


asp:listbox

asp:image

asp:hyperlink

asp:calendar

Seleccionar el control adecuado

Se necesitan funcionalidades específicas como un calendario o rotación de publicidad

El control interactuará con scripts cliente y servidor

Se está escribiendo una página que puede ser utilizada por varios navegadores

Se está trabajando con páginas HTML existentes y se desea agregar funcionalidades de página ASP.NET Web

Se prefiere un modelo de programación Visual Basic

Se prefiere un modelo de objetos como HTML

Utilizar controles de Utilizar controles de servidor Web si:servidor Web si:

Utilizar controles de servidor Utilizar controles de servidor HTML si:HTML si:

El ancho de banda no es un problemaEl ancho de banda es limitado

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

Cuando creamos páginas ASP.NET, tenemos la opción de utilizar controles de servidor HTML o controles de servidor Web. Podemos mezclar estos tipos de controles en la misma página para actualizar rápidamente una página HTML.

Como ejemplo de mezcla de tipos de controles, nuestra página ASP.NET podría incluir un elemento HTML que listase la hora local, un botón basado en un control de servidor HTML convertido a partir de un elemento HTML, y un control de servidor basado en una caja de texto Web que acceda a datos desde el servidor.

Lo mejor es evitar los controles de servidor HTML. Los controles de servidor Web tienen mayor capacidad y un modelo de objetos más rico que los controles de servidor HTML.

Los controles de servidor HTML son elementos HTML modificados que se ejecutan en el servidor en lugar de en el navegador cliente.

Utilizar controles de servidor HTML si:

Se prefiere un modelo de objetos como HTML. Los controles de servidor HTML tienen prácticamente el mismo código HTML que los controles HTML básicos. Los controles de servidor HTML también tienen funcionalidad del lado del servidor como los controles de servidor Web.

Introducción



Se está trabajando con páginas HTML existentes y se desea agregar rápidamente funcionalidad incorporada en un formulario Web Form. Debido a que los controles de servidor HTML se mapean exactamente a elementos HTML, no es necesario reemplazar los controles y arriesgarse a tener errores de sustitución o problemas de formato de página.

El control necesita ejecutarse tanto utilizando scripting del lado del cliente como del lado del servidor. Podemos escribir un script del lado del cliente y trabajar con un control HTML normal ya que los controles están visibles en el cliente. Al mismo tiempo, podemos tener código del lado del servidor, ya que también es un control de servidor.

El ancho de banda es limitado y se necesita realizar una gran cantidad de procesamiento en el cliente para reducir el uso del ancho de banda.

Los controles de servidor Web de ASP.NET no sólo son equivalentes a los controles HTML, sino que también incluyen varios controles nuevos que no existen en HTML.

Utilizar controles de servidor Web si:

Se prefiere un modelo de programación como Visual Basic. Se podrá utilizar programación orientada a objetos, identificar controles por su atributo ID y separar fácilmente la lógica de página de la lógica del interfaz de usuario. Con los controles de servidor Web, también pueden crearse aplicaciones con controles anidados y capturar eventos a nivel de contenedor.

Se está creando una página Web que puede ser visualizada en diversos navegadores. Como la lógica de los controles de servidor Web puede crear código HTML adaptado a las características disponibles en el navegador del cliente, podemos escribir para los navegadores más recientes sin necesidad de preocuparse de que los errores de navegador no permitan a los usuarios menos actualizados acceder a todas las funciones de la página Web.

Se necesitan funcionalidades específicas, como calendario o anuncios, o rotación de publicidad, disponibles únicamente como controles de servidor Web.

El ancho de banda no está limitado y los ciclos de petición-respuesta de los controles de servidor Web no causan problemas de ancho de banda.



Demostración: agregar controles de servidor a un formulario Web Form

Crear un formulario Web

Agregar controles TextBox, Button y Label

Agregar un control Calendar

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

En esta demostración, veremos cómo agregar controles de servidor Web a un formulario Web Form.


1. Abrir la página WebForm1.aspx del proyecto de aplicación Web Mod04. 2. Agregar un control de servidor TextBox, Button y Label a la página

WebForm1.aspx. 3. Utilizando la ventana Propiedades, establecer las propiedades ID y Text

de los controles a los valores en la siguiente tabla: Control ID Text TextBox txtName Name

Button cmdSubmit Submit

Label lblMessage Message

4. Visualizar la página 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. Observar cómo se han implementado las propiedades ID y Text en HTML para los distintos controles.

5. Generar y examinar WebForm1.aspx.

Agregar sencillos controles de servidor Web


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 página. Observar que el posicionamiento de los controles se realiza utilizando DHTML.

8. Cerrar la vista de la fuente de la página. 1. Hacer clic con el botón derecho sobre el formulario en la vista Diseño 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 página de nuevo en el navegador. 4. Visualizar el código fuente de la página. Ahora, el posicionamiento de los controles se realiza utilizando tablas HTML.

5. Cerrar la vista de fuente de la página. 6. Hacer clic con el botón derecho sobre el formulario en vista Diseño y

hacer clic en Propiedades. 7. En el cuadro de diálogo Páginas de propiedades, volver a establecer

Target Schema como Internet Explorer 5.0. 1. En el cuadro de diálogo Páginas de propiedades, seleccionar

FlowLayout (en lugar de GridLayout) en el campo Page Layout, y hacer clic en Aceptar.

La cuadrícula desaparece. 2. Agregar un control Button al formulario Web, y visualizar la página en

vista HTML. El nuevo botón no tiene un atributo style.

1. En la vista Diseño, agregar un control de servidor Web Calendar en el formulario Web Form, y visualizar la página en vista HTML.

Localizar el código HTML para el control Calendar: <asp:Calendar id="Calendar1" runat="server"></asp:calendar>

2. Guardar los cambios y visualizar la página en el navegador y, a continuación, visualizar el código fuente de la página.

Observar el HTML generado por el control Calendar. 3. Cerrar la vista de fuente de la página. 4. Editar la página WebForm1 y ver las propiedades del control Calendar

en la ventana Propiedades. 5. Hacer clic con el botón derecho en el control Calendar en el formulario

Web Form en la vista Diseño y seleccionar Formato automático para mostrar los diferentes estilos del cuadro de diálogo Formato automático de Calendar. Hacer clic en Colorful 1, y clic en Aceptar.

6. Guardar los cambios y visualizar la página de nuevo en el navegador para ver el nuevo aspecto del control Calendar.

Cambiar el navegador de destino

Cambiar la presentación de la página

Agregar un control Calendar

3.- Crear Formularios Web Forms

Documents

Transcript of 3.- Crear Formularios Web Forms