Crear Formularios Web Forms

Crear formularios Web Forms con Microsoft ASP.
NET
ndice Descripcin Leccin: Crear formularios Web Forms Leccin: Uso de controles de servidor 1 2 12
Crear formularios Web Forms con Microsoft ASP.NET
Descripcin
Crear formularios Web Forms Uso de controles de servidor
***************************** use******************************
Introduccin
En este mdulo, estudiaremos cmo crear y poblar formularios Web Forms. Los formularios Web Forms son pginas Web programables que sirven como interfaz de usuario (IU) para un proyecto de aplicacin Web utilizando ASP.NET. Un formulario Web Form presenta informacin al usuario visualizable en cualquier tipo de navegador, e implementa lgica de aplicacin utilizando cdigo ejecutable en el servidor. En este mdulo, aprenderemos a: Agregar un formulario Web Form a un proyecto de aplicacin Web ASP.NET. Utilizar el Cuadro de herramientas de Microsoft Visual Studio .NET para agregar controles de servidor a un formulario Web Form.
Objetivos
Leccin: crear formularios Web Forms

Qu es un formulario Web Form? Crear un formulario Web Form con Visual Studio .NET Demostracin: convertir una pgina HTML en un formulario Web Form
***************************** use******************************
Introduccin
En esta leccin, estudiaremos cmo crear un formulario Web Form. Tambin aprenderemos cmo identificar las principales caractersticas de los formularios Web Forms. En esta leccin, aprenderemos a: Identificar y explicar el cdigo HTML (Hypertext Markup Language) que compone un formulario Web Form. Crear un formulario Web Form utilizando Visual Studio .NET.
Objetivos de la leccin
Qu es un formulario Web Form?

Extensin .aspx Atributos de pgina Directiva @ Page Atributos de cuerpo Atributos de formulario
<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" <%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true"%> SmartNavigation="true"%> <html> <html> <body ms_positioning="GridLayout"> <body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> <form id="Form1" method="post" runat="server"> </form> </form> </body> </body> </html> </html>
***************************** use******************************
Introduccin
Los formularios Web Forms estn formados por una combinacin de HTML, cdigo 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 enva al navegador, mientras que el cdigo de soporte y los controles que la componen permanecen en el servidor Web. Esta divisin entre el interfaz en el cliente y el cdigo en el servidor es una importante diferencia entre los formularios Web Forms y las pginas Web tradicionales. Mientras una pgina Web tradicional requiere que todo el cdigo se enve 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 pginas se mantiene en el servidor. Esta divisin entre IU y cdigo aumenta el nmero de navegadores soportados e incrementa la seguridad y funcionalidad de la pgina Web. Los formularios Web Forms se denominan habitualmente pginas ASP.NET o pginas ASPX. Los formularios Web Forms tienen una extensin .aspx y funcionan como contenedores para el texto y los controles que deseamos mostrar en el navegador. Las pginas ASP.NET (.aspx) y Active Server Pages (ASP) (.asp) pueden coexistir en el mismo servidor. La extensin del archivo determina si la pgina la procesa ASP o ASP.NET. Los formularios Web Forms estn 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 pgina de cdigo subyacente, contiene el cdigo de soporte.
Extensin .aspx
Atributos de la pgina
Las funciones de un formulario Web Form estn definidas por tres niveles de atributos. Los atributos de pgina definen las funciones globales, los atributos de cuerpo definen cmo se mostrar una pgina y los atributos de formulario definen cmo se procesarn los grupos de controles. La etiqueta <@Page> define atributos especficos de la pgina que utiliza el parseador de pginas ASP.NET y el compilador. nicamente podemos incluir una etiqueta <@ Page> por archivo .aspx. Los siguientes ejemplos son etiquetas <@ Page> tpicas para Microsoft Visual Basic .NET y para Microsoft Visual C# .NET:
Visual Basic .NET C#
<%@ 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 pgina Web. Algunos de los valores de este atributo son: vb, c# y JScript. Pgina Codebehind El atributo de pgina Codebehind identifica la pgina de cdigo subyacente que tiene la lgica que soporta el formulario Web Form. Cuando Visual Studio .NET crea un formulario Web Form, como WebForm1.aspx, tambin crea una pgina de cdigo subyacente, WebForm1.aspx.vb o WebForm1.aspx.cs. Nota Para ms informacin sobre las pginas de cdigo subyacente, consultar el Mdulo Agregar cdigo 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 posicin de desplazamiento y se mantiene la "ltima pgina" en el historial. Smartnavigation nicamente est disponible para los usuarios con Microsoft Internet Explorer 5 o superior.
Atributos del cuerpo
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> tpica:
<body ms_positioning="GridLayout">
Los atributos de una etiqueta <Body> incluyen: PageLayout El atributo pageLayout (etiquetado como ms_positioning) determina cmo se posicionan los controles y el texto en la pgina. Existen dos opciones para pageLayout: FlowLayout En FlowLayout, el texto, las imgenes y los controles fluyen por la pantalla, dependiendo del ancho de la ventana del navegador. GridLayout En GridLayout, los campos de texto, las imgenes y los controles de una pgina estn fijados por coordinadas absolutas. GridLayout es el valor de pageLayout predeterminado para Visual Studio .NET. El siguiente cdigo de ejemplo muestra cmo 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>
Atributos del formulario
La etiqueta <Form> define cmo se procesarn los grupos de controles. La etiqueta <Form> es diferente del trmino Web Form utilizado para definir la pgina Web completa. Los atributos de la etiqueta <Form> definen cmo se procesarn los controles. Aunque podemos tener muchos formularios HTML en una pgina, nicamente podemos tener un formulario del lado del servidor en una pgina .aspx. El siguiente ejemplo es de una etiqueta <Form> tpica:
<form id="Form1" method="post" runat="server"> ... </form>
Los atributos de una etiqueta <Form> incluyen: Method El atributo Method identifica el mtodo 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 peticin HTTP (Hypertext Transfer Protocol). Get Los datos se pasan en una cadena de consulta. Runat Una de las principales caractersticas de un formulario Web Form es que los controles se ejecutan en el servidor. El atributo runat="server" hace que el formulario publique informacin de control de retorno a la pgina ASP.NET en el servidor donde se ejecuta el cdigo de soporte. Si el atributo runat no est establecido en "server", el formulario funciona como un formulario HTML normal. Ejemplo con Visual Basic .NET El siguiente cdigo procede del formulario Web Form predeterminado de Visual Studio .NET al crear un nuevo proyecto de aplicacin 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 de C#
El siguiente cdigo procede del formulario Web Form predeterminado de Visual Studio .NET al crear un nuevo proyecto de aplicacin 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>
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 pginas HTML existentes en formularios Web Forms
***************************** use******************************
Introduccin Aplicaciones Web nuevas
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 automticamente en el proyecto un formulario Web Form predeterminado denominado WebForm1.aspx. Crear un nuevo proyecto de aplicacin Web ASP.NET y un formulario Web Form predeterminado 1. En Visual Studio .NET, en la Pgina de inicio, hacer clic en Nuevo proyecto. 2. En el cuadro de dilogo Nuevo proyecto, hacer clic en Aplicacin Web ASP.NET, escribir el nombre del proyecto en el campo Ubicacin y hacer clic en Aceptar. Visual Studio .NET crea una nueva aplicacin Web y un formulario Web Form predeterminado denominado WebForm1.aspx.
Crear formularios Web Forms adicionales
Si estamos expandiendo un proyecto existente, podemos utilizar el Explorador de soluciones para agregar rpidamente formularios Web Forms adicionales. Agregar formularios Web Forms adicionales a un proyecto de aplicacin Web 1. En la ventana del Explorador de soluciones, hacer clic con el botn derecho en el nombre del proyecto, seleccionar Agregar, y hacer clic en Agregar formulario Web Form. Se abrir el cuadro de dilogo Agregar nuevo elemento - NombreProyecto. 2. En el cuadro de dilogo 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.
Actualizar pginas HTML
Si estamos revisando un sitio Web existente, podemos importar pginas HTML a Visual Studio .NET y actualizar esas pginas a formularios Web Forms. Actualizar pginas HTML existentes 1. En el Explorador de soluciones, hacer clic con el botn derecho en el nombre del proyecto, seleccionar Agregar y hacer clic en Agregar elemento existente. 2. En el cuadro de dilogo Agregar elemento existente, navegar hasta la ubicacin 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 extensin del archivo. 4. Cuando se nos pregunte si deseamos crear un nuevo archivo de clase, hacer clic en S.
10
Demostracin: convertir una pgina HTML en un formulario Web Form

Cambiar la extensin .htm por la extensin .aspx
***************************** use******************************
Un modo rpido de crear pginas Web ASP.NET es convertir las pginas HTML existentes. Ejecutar esta demostracin 1. Iniciar Visual Studio .NET. 2. Crear un nuevo Proyecto de aplicacin Web ASP.NET y establecer la ubicacin 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 dilogo Agregar elemento existente, hacer clic en Todos los archivos (*.*). 5. Seleccionar la pgina HTMLPage.htm y hacer clic en Abrir. Este archivo se puede encontrar dentro del fichero demos03.zip. 6. Abrir la pgina HTMLPage.htm y cambiar a la vista HTML. 7. Agregar una cuarta opcin al cuadro de lista que contenga Lead Program Manager para mostrar que la ayuda de contexto IntelliSense est funcionando en el archivo HTML. El cdigo debera ser parecido el siguiente:
<option>Lead Program Manager</option>
8. Guardar los cambios de la pgina. 9. En el Explorador de soluciones, hacer clic con el botn derecho en HTMLPage.htm y hacer clic en Cambiar nombre. Cambiar la extensin .htm de la pgina 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 pgina HTMLPage.aspx, observamos que se ha aadido una directiva @Page a la pgina.
11
11. Hacer clic en Mostrar todos los archivos en el Explorador de soluciones para mostrar la pgina de cdigo subyacente que se ha creado. 12. Hacer clic en Guardar para guardar el proyecto. 13. Hacer clic con el botn derecho sobre HTMLPage.aspx en el Explorador de soluciones, clic en Generar y examinar para generar el proyecto y visualizar la pgina en el navegador de Visual Studio .NET. Debemos generar el proyecto puesto que Visual Studio .NET necesita compilar la nueva pgina de cdigo subyacente. 14. Escribir un nombre en el cuadro de texto Nombre, hacer clic en una profesin en la lista Profession y hacer clic en Guardar. Cuando se muestre la pgina de nuevo, la informacin en los controles se habr perdido. Es el comportamiento predeterminado de los formularios HTML. 15. Hacer clic con el botn derecho en la pgina 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 cdigo fuente HTML en el navegador.
12
Leccin: uso de controles de servidor

Qu es un control de servidor? Tipos de controles de servidor Guardar View State Demostracin: convertir controles HTML en controles de servidor Controles de servidor HTML Controles de servidor Web Prctica: identificar el cdigo HTML generado por los controles de servidor Web Seleccionar el control adecuado Demostracin: agregar controles de servidor a un formulario Web
***************************** use******************************
Introduccin
En esta leccin, estudiaremos cmo 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 lgica de soporte se ejecuta en el servidor y no en el navegador del usuario. En esta leccin, aprenderemos a: Describir las caractersticas de los controles de servidor. Describir los tipos de controles de servidor disponibles. Explicar cmo 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 situacin.
Objetivos de la leccin
13
Qu es un control de servidor?
<asp:Button id="Button1" runat="server" <asp:Button id="Button1" runat="server" Text="Submit"/> Text="Submit"/>
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
***************************** use******************************
Introduccin
Los controles de servidor ASP.NET son componentes que se ejecutan en el servidor y encapsulan la IU y dems funcionalidades relacionadas. Los controles de servidor se utilizan en pginas ASP.NET y en las clases de cdigo 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" />
Runat=server
Los controles de servidor tienen un atributo runat="server", el mismo atributo que los formularios Web Forms. Esto significa que la lgica 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 accin en el servidor. Otra caracterstica de los controles de servidor es que el estado de la vista, las opciones de configuracin y la entrada de datos de usuario en el control se guardan automticamente cuando la pgina viaja entre el cliente y el servidor. Los controles HTML tradicionales no tienen estado y vuelven a su configuracin predeterminada cuando la pgina retorna del servidor al cliente.
Funcionalidad incluida
La funcionalidad de un control es lo que se produce cuando el usuario hace clic en un botn 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.
Nota Para ms informacin sobre la funcionalidad del control de servidor, consultar el Mdulo Agregar cdigo a un formulario Web Form con Microsoft ASP.NET.
14
Modelo de objetos comn
En ASP.NET, los controles de servidor se basan en un modelo de objetos comn, 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 cdigo HTML siguiente del botn de un control de servidor Web muestra algunos de los atributos tpicos de un control de servidor:
<asp:Button id="Button1" runat="server" BackColor="red" Width="238px" Height="25px" Text="Web control"></asp:Button>
Crear cdigo HTML especfico del navegador
Cuando un navegador interpreta una pgina, los controles de servidor Web determinan el tipo de navegador que solicita la pgina, y enva el cdigo HTML adecuado. Por ejemplo, si el navegador soporta scripting de cliente, como Internet Explorer versin 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 cdigo del lado del servidor y requieren ms viajes de ida y vuelta al servidor para obtener el mismo comportamiento. El siguiente ejemplo es el cdigo HTML de ASP.NET en un formulario Web Form que deberamos 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 pgina, el CLR crea el siguiente cdigo 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 cdigo HTML personalizado en funcin de las caractersticas disponibles en el navegador del cliente, podemos escribir cdigo para las ltimas versiones de navegadores sin tener que preocuparnos de que los usuarios que no estn actualizados puedan ser bloqueados por errores del navegador.
15
Tipos de controles de servidor

Controles de servidor HTML Controles de servidor Web Controles intrnsecos Controles de validacin Controles ricos Controles List-bound Controles Web de Internet Explorer
***************************** use******************************
Introduccin
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 aplicacin que estamos creando. Por defecto, el servidor no tiene disponibles los elementos HTML de una pgina de un formulario Web Form; los elementos HTML son tratados como texto opaco que pasa a travs del navegador. Sin embargo, al agregar el atributo runat="server" se convierten los elementos HTML en controles de servidor HTML, exponindolos por tanto como elementos que podemos programar con cdigo del lado del servidor. Los controles de servidor Web no slo incluyen controles de tipo formulario, como botones y cuadros de texto, sino tambin controles con funcionalidad especial, como el control calendario. Los controles de servidor Web son ms 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 intrnsecos Los controles intrnsecos 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 validacin Los controles de validacin incorporan lgica que permite verificar la entrada de datos de un usuario. Para probar la entrada de un usuario, adjuntamos un control de validacin al control de entrada y especificamos las condiciones de entrada de datos de usuario correctas.
Controles de servidor HTML
Controles de servidor Web
Nota Para ms informacin sobre los controles de validacin, consultar el
16
Mdulo Validar la entrada de datos de usuario. Controles ricos estndar Los controles estndar son controles complejos que incluyen mltiples funciones. Ejemplos de controles estndar 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 pgina ASP.NET. Estos controles nos permiten mostrar, reformatear, clasificar y editar datos.
Nota Para ms informacin sobre los controles enlazados a listas y el acceso a datos, consultar el Mdulo Acceso a datos relacionales utilizando Microsoft Visual Studio .NET, y el Mdulo 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 aplicacin Web con ASP.NET. Estos controles pueden ser interpretados en todos los navegadores utilizados habitualmente, y al mismo tiempo aprovechan las potentes caractersticas 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/o verview/overview.asp.
Ejemplo de controles equivalentes
Este ejemplo muestra el cdigo HTML de tres controles de tipo botn: un botn HTML, un botn de control de servidor HTML y un botn de control de servidor Web. Todos los controles botn parecen idnticos en el navegador del usuario. El botn HTML nicamente puede invocar eventos del lado del cliente, mientras que el botn de control de servidor HTML y el botn de control de servidor Web producen eventos del lado del servidor. El siguiente es el cdigo de un control de botn HTML:
<INPUT type="button" value="HTML Button">
Si agregamos el atributo runat="server" el control de botn HTML anterior se convierte en un control de servidor HTML que se ejecutar en el servidor. Adems del atributo runat="server", tambin debemos agregar un atributo id para que el control funcione como un control de servidor. El botn de control de servidor HTML se muestra en el siguiente ejemplo:
<INPUT type="button" value="HTML Server Control" id="button1" runat="server">
El botn de control de servidor Web utiliza cdigo HTML de ASP.NET:

<asp:Button id="Button1" runat="server" Text="Web control"/>
17
Guardar el estado de la vista

Control oculto ViewState de pares de nombre y valor almacenados en el formulario Web Form
<input type="hidden" name="__VIEWSTATE" <input type="hidden" name="__VIEWSTATE" value="dDwtMTA4MzE0MjEwNTs7Pg==" /> value="dDwtMTA4MzE0MjEwNTs7Pg==" />
De forma predeterminada, ajustable a nivel de formulario Web Form y control

<%@ Page EnableViewState="False" %> <%@ Page EnableViewState="False" %> <asp:ListBox id="ListName" <asp:ListBox id="ListName" EnableViewState="true" runat="server"> EnableViewState="true" runat="server"> </asp:ListBox> </asp:ListBox>
***************************** use******************************
Introduccin
Uno de los retos de los sitios Web es resolver el almacenamiento del estado de los controles (configuracin o entrada de datos del usuario) en una pgina Web mientras el cdigo HTML viaja entre el cliente y el servidor. Como con cualquier tecnologa basada en HTTP, los formularios Web Forms no tienen estado, lo que significa que el servidor no conserva ninguna informacin 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 aade al formulario del lado del servidor indicado por la etiqueta <Form runat="server">, y nicamente registra el estado de los controles en esta seccin. Mientras la pgina viaja desde el cliente al servidor, el estado del control de servidor Web se almacena con la pgina y puede actualizarse en cualquier extremo de la transaccin (en el cliente o el servidor). Como el estado de la pgina Web se guarda dentro del formulario del servidor, la pgina 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 diseo de la pgina y no necesita generar la infraestructura necesaria para realizar el seguimiento del estado de la misma.
18
Control oculto
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 peticin, el control _VIEWSTATE se actualiza y se enva 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 configuracin de la pgina permanece coherente de una solicitud a la siguiente. El siguiente ejemplo incluye el cdigo 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>
Deshabilitar y habilitar ViewState
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 mltiples controles, el tamao del campo valor de las propiedades _VIEWSTATE puede ralentizar el rendimiento. Para maximizar el rendimiento de la pgina, podemos deshabilitar el atributo ViewState a nivel de pgina y habilitar ViewState nicamente para determinados controles. Para deshabilitar el almacenamiento del estado de la vista a nivel de pgina Web, estableceremos el atributo EnableViewState de la directiva @Page, como se muestra en el siguiente cdigo:
<%@ Page EnableViewState="False" %>
Para habilitar el almacenamiento del estado de la vista de un control especfico, estableceremos el atributo EnableViewState del control, como se muestra en el siguiente cdigo:
<asp:ListBox id="ListName" EnableViewState="true" runat="server"></asp:ListBox>
Nota Para ms informacin sobre guardar el estado, consultar el Mdulo Gestionar el estado.
19
Demostracin: 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 conversin de controles HTML en controles de servidor. Ejecutar esta demostracin 1. Visualizar la pgina HTMLPage.aspx que convertimos de una pgina HTML en la demostracin anterior, en la vista HTML, y agregar un atributo runat="server" a los controles de cuadro de texto, seleccin y el de envo. 2. Hacer clic en Guardar para guardar el proyecto. 3. Visualizar la pgina HTMLPage.aspx en el navegador haciendo clic con el botn derecho en la pgina 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 cdigo. 4. Visualizar el cdigo fuente de la pgina para mostrar los cambios realizados. Se ha agregado un atributo name a cada control de servidor. 5. Cerrar la vista del cdigo fuente HTML en el navegador. 6. En el navegador, introducir informacin en los controles, y hacer clic en Guardar. Los controles todava pierden sus valores. 7. Editar la pgina y agregar un atributo runat="server" al formulario. 8. Guardar los cambios y visualizar la pgina de nuevo en el navegador. No es necesario volver a generar el proyecto ya que no se ha agregado ningn cdigo. 9. Visualizar el cdigo fuente de la pgina 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 cdigo fuente HTML en el navegador. 11. Introducir informacin en los controles y hacer clic en Guardar. Ahora, los controles guardan sus valores.
20
Agregar una etiqueta al formulario Web Form
12. Editar la pgina y agregar un control de servidor Web Label al formulario Web Form, debajo del botn Guardar:
<asp:label id="lblMessage" runat="server">Label</asp:label>
13. Guardar los cambios y visualizar la pgina en el navegador. 14. Visualizar el cdigo fuente de la pgina. El control de servidor Web Label genera un elemento <span>. 15. Cerrar la vista del cdigo fuente HTML en el navegador.
Uso de SmartNavigation
16. Visualizar la pgina http://localhost/Demos03/HTMLPage.aspx en Internet Explorer y modificar el tamao del navegador para que muestre verticalmente menos que la pgina completa. La barra de desplazamiento vertical debera estar visible. 17. Desplazarse hacia abajo y hacer clic en Guardar. Seremos redirigidos a la parte superior de la pgina debido al postback. 18. Cerrar el navegador. 19. Editar la pgina en la vista HTML y agregar SmartNavigation= "true" a la directiva @ Page. El cdigo HTML debera ser parecido al siguiente:
Visual Basic .NET
<%@ 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" %>
C#
20. Guardar los cambios y visualizar la pgina en otro navegador cuyo tamao se haya modificado. 21. Desplazarse hacia abajo y hacer clic en Guardar. Esta vez, no somos redireccionados a la parte superior de la pgina durante el postback, la pgina mantiene su posicin actual. 22. Visualizar el cdigo fuente de la pgina en el navegador. En Internet Explorer 4.0 y posterior, el atributo SmartNavigation crea IFrames para actualizar nicamente la parte modificada de la pgina. 23. Cerrar la vista del cdigo fuente HTML en el navegador.
21

Basados en elementos HTML Existen en el espacio de nombres System.Web.UI.HtmlControls
<input type="text" id="txtName" <input type="text" id="txtName" runat="server" /> runat="server" />
***************************** use******************************
Introduccin
Los controles HTML de un formulario Web Form no estn disponibles en el servidor. Si convertimos los controles HTML en controles de servidor HTML, podemos exponerlos como elementos a nuestro cdigo del lado del servidor. Esta conversin 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 rpidamente pginas existentes a formularios Web Forms. Adems, podemos optimizar el rendimiento de una pgina ajustando qu controles deben funcionar localmente en el navegador y qu controles se procesan en el servidor.
Ejemplo
El siguiente cdigo 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" />
22

Controles de servidor W eb
Existen en el espacio de nom bres System .W eb.UI.W ebControls Sintaxis del control
<asp:TextBox id="TextBox1" <asp:TextBox id="TextBox1" runat="server">Text_to_Display runat="server">Text_to_Display </asp:TextBox> </asp:TextBox>
HTML generado por el control

<input name="TextBox1" type="text" <input name="TextBox1" type="text" value="Text_to_Display" value="Text_to_Display" Id="TextBox1"/> Id="TextBox1"/>
***************************** use******************************
Introduccin
Los controles de servidor Web son controles de servidor creados especficamente para ASP.NET. A diferencia de los controles de servidor HTML, los controles de servidor Web no funcionarn si falta el atributo runat="server". Los controles de servidor Web se basan en un modelo de objetos comn; 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.
Controles de servidor Web intrnsecos
Los controles de servidor Web intrnsecos corresponden a elementos HTML simples. La siguiente tabla muestra algunos de los controles de servidor Web intrnsecos utilizados ms habitualmente.
Control de servidor Web <asp:button> <asp:checkbox> Control HTML equivalente <input type=submit> <input type=checkbox> Funcin del control de servidor Web Crea un botn que enva una peticin al servidor. Crea una casilla de verificacin que puede seleccionarse haciendo clic. Crea un hiperenlace a una etiqueta anchor HTML. Crea un rea que se utiliza para mostrar una imagen. Crea un botn que incorpora la visualizacin de una imagen en lugar de texto. Crea un botn que tiene el aspecto de un hiperenlace.
<asp:hyperlink> <asp:image> <asp:imagebutton>
<a href=""> </a> <img src=""> <input type=image>
<asp linkButton>
Ninguno
Crear formularios Web Forms con Microsoft ASP.NET (continuacin) Control de servidor Web <asp:label> <asp:listbox> <asp:panel> Control HTML equivalente <span> </span> <select size="5"> </select> <div> </div>
23
Funcin del control de servidor Web Crea texto que los usuarios no pueden modificar. Crea una lista de opciones. Permite mltiples selecciones. Crea una divisin sin bordes en el formulario que se utiliza como contenedor para otros controles. Crea un nico control de botn de opcin. Crea una tabla. Crea un control de cuadro de texto.
<asp:radiobutton> <asp:table> <asp:textbox>
<input type=radiobutton> <table> </table> <input type=text>
Controles de validacin
Los controles de validacin son controles ocultos que validan la entrada de datos del usuario comparndolos con patrones predeterminados. La siguiente tabla muestra algunos de los controles de validacin que se utilizan ms habitualmente.
Control CompareValidator CustomValidator RangeValidator RegularExpressionValidator Funcin Requiere que la entrada concuerde con una segunda entrada o campo existente. Requiere que la entrada concuerde con una condicin como que sean nmeros primos o impares. Requiere que la entrada concuerde con un intervalo especificado. Requiere que la entrada concuerde con un formato especificado como un nmero de telfono de un determinado pas o una contrasea que tenga nmeros y letras. Requiere que el usuario introduzca algn valor antes de que el control sea procesado. Recopila todos los mensajes de error de los controles de validacin para una visualizacin centralizada.
RequiredFieldValidator ValidationSummary
Nota Para ms informacin sobre los controles de validacin, consultar el Mdulo Validar la entrada de datos del usuario. Controles ricos estndares
Los controles estndares proporcionan una rica funcionalidad a nuestro formulario Web Form insertando funciones complejas. La siguiente tabla muestra los controles ricos disponibles actualmente.
Control AdRotator Calendar Funcin Muestra una secuencia (predefinida o aleatoria) de imgenes. Muestra un calendario grfico en el que los usuarios pueden seleccionar fechas.
24
Controles enlazados a listas
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 CheckBoxList Repeater Funcin Muestra datos como una columna de casillas de verificacin. Muestra informacin 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. Similar al control Repeater, pero con ms opciones de formato y presentacin, incluyendo la posibilidad de mostrar informacin en una tabla. El control DataList tambin nos permite especificar el comportamiento de edicin. Muestra informacin, normalmente enlazada a datos en forma tabular, con columnas. Tambin proporciona mecanismos para permitir editar y clasificar. Muestra datos en un men desplegable. Muestra datos en una ventana. Muestra datos en una columna de botones de opcin.
DataList
DataGrid
DropDownList Listbox RadioButtonList
Nota Para ms informacin sobre los controles enlazados a listas y el acceso a datos, consultar el Mdulo Acceso a datos con Microsoft ADO.NET.
25
Prctica: identificar el cdigo HTML generado por los controles de servidor Web
Los estudiantes: Agregarn controles de servidor Web a un formulario Web e identificarn el cdigo HTML que se enva al cliente Tiempo: 5 minutos
***************************** use******************************
En esta prctica, agregaremos controles de servidor Web a un formulario Web Form y visualizaremos el cdigo fuente en un navegador para determinar qu cdigo HTML se ha enviado al cliente. Cumplimentar la tabla inferior siguiendo los pasos 1. Iniciar Visual Studio .NET. 2. Crear un proyecto de aplicacin Web y establecer la ubicacin en http://localhost/Practices03. 3. Abrir la pgina WebForm1.aspx. 4. Agregar los controles TextBox, Button, Label, ListBox, Image, Hyperlink y Calendar al formulario Web Form. 5. Hacer clic con el botn derecho en WebForm1.aspx en el Explorador de soluciones y clic en Generar y examinar. 6. Hacer clic con el botn derecho en el navegador y clic en Ver fuente para ver el cdigo HTML enviado al cliente. 7. Cumplimentar la siguiente tabla con las etiquetas HTML del control.
Control de servidor Web asp:textbox asp:button asp:label HTML enviado al cliente
26
Crear formularios Web Forms con Microsoft ASP.NET asp:listbox asp:image asp:hyperlink asp:calendar
Seleccionar el control adecuado

Utilizar controles de servidor HTML si:
Se prefiere un modelo de objetos como HTML Se est trabajando con pginas HTML existentes y se desea agregar funcionalidades de pgina ASP.NET Web El control interactuar con scripts cliente y servidor El ancho de banda es limitado
Utilizar controles de servidor Web si:

Se prefiere un modelo de programacin Visual Basic Se est escribiendo una pgina que puede ser utilizada por varios navegadores Se necesitan funcionalidades especficas como un calendario o rotacin de publicidad El ancho de banda no es un problema
***************************** use******************************
Introduccin
Cuando creamos pginas ASP.NET, tenemos la opcin de utilizar controles de servidor HTML o controles de servidor Web. Podemos mezclar estos tipos de controles en la misma pgina para actualizar rpidamente una pgina HTML. Como ejemplo de mezcla de tipos de controles, nuestra pgina ASP.NET podra incluir un elemento HTML que listase la hora local, un botn 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 ms 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 prcticamente el mismo cdigo HTML que los controles HTML bsicos. Los controles de servidor HTML tambin tienen funcionalidad del lado del servidor como los controles de servidor Web.
27
Se est trabajando con pginas HTML existentes y se desea agregar rpidamente 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 sustitucin o problemas de formato de pgina. 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 estn visibles en el cliente. Al mismo tiempo, podemos tener cdigo del lado del servidor, ya que tambin 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 slo son equivalentes a los controles HTML, sino que tambin incluyen varios controles nuevos que no existen en HTML. Utilizar controles de servidor Web si: Se prefiere un modelo de programacin como Visual Basic. Se podr utilizar programacin orientada a objetos, identificar controles por su atributo ID y separar fcilmente la lgica de pgina de la lgica del interfaz de usuario. Con los controles de servidor Web, tambin pueden crearse aplicaciones con controles anidados y capturar eventos a nivel de contenedor. Se est creando una pgina Web que puede ser visualizada en diversos navegadores. Como la lgica de los controles de servidor Web puede crear cdigo HTML adaptado a las caractersticas disponibles en el navegador del cliente, podemos escribir para los navegadores ms 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 pgina Web. Se necesitan funcionalidades especficas, como calendario o anuncios, o rotacin de publicidad, disponibles nicamente como controles de servidor Web. El ancho de banda no est limitado y los ciclos de peticin-respuesta de los controles de servidor Web no causan problemas de ancho de banda.
28
Demostracin: 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 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. Observar cmo se han implementado las propiedades ID y Text en HTML para los distintos controles. 5. Generar y examinar WebForm1.aspx.
29
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. 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.

Crear Formularios Web Forms

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Crear Formularios Web Forms

Încărcat de

Drepturi de autor:

Formate disponibile

Crear formularios Web Forms con Microsoft ASP.

Crear formularios Web Forms con Microsoft ASP.NET

Crear formularios Web Forms con Microsoft ASP.NET

Leccin: crear formularios Web Forms

Crear formularios Web Forms con Microsoft ASP.NET

Qu es un formulario Web Form?

Crear formularios Web Forms con Microsoft ASP.NET

Visual Basic .NET C#

Crear formularios Web Forms con Microsoft ASP.NET

Atributos del cuerpo

Atributos del formulario

Crear formularios Web Forms con Microsoft ASP.NET

Crear formularios Web Forms con Microsoft ASP.NET

Crear formularios Web Forms con Microsoft ASP.NET

Crear un formulario Web Form con Visual Studio .NET

Introduccin Aplicaciones Web nuevas

Crear formularios Web Forms adicionales

Crear formularios Web Forms con Microsoft ASP.NET

Actualizar pginas HTML

Crear formularios Web Forms con Microsoft ASP.NET

Demostracin: convertir una pgina HTML en un formulario Web Form

Crear formularios Web Forms con Microsoft ASP.NET

Crear formularios Web Forms con Microsoft ASP.NET

Leccin: uso de controles de servidor

Crear formularios Web Forms con Microsoft ASP.NET

Crear formularios Web Forms con Microsoft ASP.NET

Modelo de objetos comn

Crear cdigo HTML especfico del navegador

Crear formularios Web Forms con Microsoft ASP.NET

Tipos de controles de servidor

Controles de servidor HTML

Controles de servidor Web

Nota Para ms informacin sobre los controles de validacin, consultar el

Crear formularios Web Forms con Microsoft ASP.NET

Ejemplo de controles equivalentes

El botn de control de servidor Web utiliza cdigo HTML de ASP.NET:

Crear formularios Web Forms con Microsoft ASP.NET

Guardar el estado de la vista

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

Crear formularios Web Forms con Microsoft ASP.NET

Deshabilitar y habilitar ViewState

Crear formularios Web Forms con Microsoft ASP.NET

Demostracin: convertir controles HTML en controles de servidor

Crear formularios Web Forms con Microsoft ASP.NET

Agregar una etiqueta al formulario Web Form

Visual Basic .NET

Crear formularios Web Forms con Microsoft ASP.NET

Controles de servidor HTML

Crear formularios Web Forms con Microsoft ASP.NET

Controles de servidor Web

HTML generado por el control

Controles de servidor Web intrnsecos

<asp:hyperlink> <asp:image> <asp:imagebutton>

<a href=""> </a> <img src=""> <input type=image>

<asp:radiobutton> <asp:table> <asp:textbox>

<input type=radiobutton> <table> </table> <input type=text>

Crear formularios Web Forms con Microsoft ASP.NET

Controles enlazados a listas

DropDownList Listbox RadioButtonList

Crear formularios Web Forms con Microsoft ASP.NET

Seleccionar el control adecuado

Utilizar controles de servidor Web si:

Controles de servidor HTML