3.B-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 1 8
Universidad Nacional, Sede Regin Brunca, Escuela de Informtica Programacin IV, I Semestre Ao 2012
Descripcin
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. Objetivos 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.
Leccin: crear formularios Web Forms

Introduccin En esta leccin, estudiaremos cmo crear un formulario Web Form. Tambin aprenderemos cmo identificar las principales caractersticas de los formularios Web Forms. Objetivos de la leccin 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.
Qu es un formulario Web Form?

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
Crear Formularios en Web Form con Microsoft ASP.NET
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. Extensin .aspx 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. 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
<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true" %>
C#
<%@ 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: 4
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="Wepplication1.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>bA <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

Introduccin Dependiendo del punto en que nos encontremos en el proceso de desarrollo, existen varios modos de crear un formulario Web Form. Aplicaciones Web nuevas 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.
Demostracin A: convertir una pgina HTML en un formulario Web Form
***************************** 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/Demos01. 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 en la carpeta Demo01 dentro de la Leccion3\3.-Practica. 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. 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.
Leccin: uso de controles de servidor

Introduccin:
**************************** use******************************
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. Objetivos de la leccin: 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.
Qu es un control de servidor?
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. 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.
10
Tipos de controles de servidor

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. Controles de servidor HTML: 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. Controles de servidor Web: 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. Nota: Para ms informacin sobre los controles de validacin, consultar el 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.
11
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"/>
Guardar el estado de la vista

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.
12
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. 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:
13
<asp:ListBox id="ListName" EnableViewState="true" runat="server"></asp:ListBox> Nota: Para ms informacin sobre guardar el estado, consultar el Mdulo Gestionar el estado.
Demostracin B: convertir controles HTML en controles de servidor
***************************** use****************************** Visual Studio .NET facilita la conversin de controles HTML en controles de servidor.

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.
14
11. Introducir informacin en los controles y hacer clic en Guardar. Ahora, los controles guardan sus valores. 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" %> C# <%@ Page SmartNavigation="true" Language="c#" CodeBehind="HTMLPage.aspx.cs" AutoEventWireup="false" Inherits="Mod04.HTMLPage" %> 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.
15
Controles de servidor HTML

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" />
Controles de servidor Web

Introduccin ***** use****************************** 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:
16
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.
Controles del servidor Web <asp:button> <asp:checkbox> <asp:hyperlink> <asp:image> <asp:imagebutton> <asp linkButton> <asp:label> <asp:listbox> <asp:panel> <asp:radiobutton> <asp:table> <asp:textbox> Control HTML equivalente <input type=submit> <input type=checkbox> <a href=""> </a> <img src=""> <input type=image> Ninguno <span> </span> <select size="5"> </select> <div> </div> <input type=radiobutton> <table> </table> <input type=text> 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. 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.
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 RequiredFieldValidator ValidationSummary 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.
17
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 Funcin
AdRotator Calendar
RangeValidator RegularExpressionValidator RequiredFieldValidator ValidationSummary
Muestra una secuencia (predefinida o aleatoria) de imgenes. Muestra un calendario grfico en el que los usuarios pueden seleccionar fechas. 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.
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 Funcin
AdRotator Calendar CheckBoxList Repeater
DataList
DataGrid DropDownList Listbox RadioButtonList
Muestra una secuencia (predefinida o aleatoria) de imgenes. Muestra un calendario grfico en el que los usuarios pueden seleccionar fechas. 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 delDataSet. 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.
18
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.
Prctica A: identificar el cdigo HTML generado por los controles de servidor Web
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 http://localhost/Practica01. 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
aplicacin
Web
establecer
la
ubicacin
en
HTML enviado al cliente
19
asp:label asp:listbox asp:image asp:hyperlink asp:calendar
Seleccionar el control adecuado

**************************** 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. 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. 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.
Controles de servidor Web 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:
20
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.
Demostracin C: agregar controles de servidor a un formulario Web Form
**************************** use******************************
En esta demostracin, veremos cmo agregar controles de servidor Web a un formulario Web Form.

Agregar sencillos controles de servidor Web
21
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. 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.
22
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.
23

3.B-Crear Formularios Web Forms

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

3.B-Crear Formularios Web Forms

Caricato da

Copyright:

Formati disponibili

Crear formularios Web Forms con Microsoft ASP.

Leccin: crear formularios Web Forms

Qu es un formulario Web Form?

Crear Formularios en Web Form con Microsoft ASP.NET

Los atributos de una etiqueta <Form> incluyen:

Crear Formularios en Web Form con Microsoft ASP.NET

Crear Formularios en Web Form con Microsoft ASP.NET

Crear un formulario Web Form con Visual Studio .NET

Crear un nuevo proyecto de aplicacin Web ASP.NET y un formulario Web Form

Agregar formularios Web Forms adicionales a un proyecto de aplicacin Web

Actualizar pginas HTML existentes

Demostracin A: convertir una pgina HTML en un formulario Web Form

Ejecutar esta demostracin

5. Seleccionar la pgina HTMLPage.htm y hacer clic en Abrir. Este archivo se puede

16. Cerrar la vista del cdigo fuente HTML en el navegador.

Crear Formularios en Web Form con Microsoft ASP.NET

Leccin: uso de controles de servidor

Crear Formularios en Web Form con Microsoft ASP.NET

Tipos de controles de servidor

Crear Formularios en Web Form con Microsoft ASP.NET

Guardar el estado de la vista

Crear Formularios en Web Form con Microsoft ASP.NET

Crear Formularios en Web Form con Microsoft ASP.NET

Demostracin B: convertir controles HTML en controles de servidor

Ejecutar esta demostracin

Controles de servidor HTML

Controles de servidor Web

Crear Formularios en Web Form con Microsoft ASP.NET

Crear Formularios en Web Form con Microsoft ASP.NET

AdRotator Calendar CheckBoxList Repeater

DataGrid DropDownList Listbox RadioButtonList

Crear Formularios en Web Form con Microsoft ASP.NET

Cumplimentar la tabla inferior siguiendo los pasos

HTML enviado al cliente

asp:label asp:listbox asp:image asp:hyperlink asp:calendar

Seleccionar el control adecuado

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

Ejecutar esta demostracin

Crear Formularios en Web Form con Microsoft ASP.NET

Control TextBox Button Label

ID txtName cmdSubmit lblMessage

Text Name Submit Message

Crear Formularios en Web Form con Microsoft ASP.NET

Crear Formularios en Web Form con Microsoft ASP.NET

Potrebbero piacerti anche