Crear Formularios Web Forms PDF

ndice
Descripcin 1
Leccin: Crear formularios Web Forms 2
Leccin: Uso de controles de servidor 12

Crear formularios Web Forms con
Microsoft ASP.NET
Crear formularios Web Forms con Microsoft ASP.NET 1

Descripcin
Crear formularios Web Forms
Uso de controles de servidor

***************************** use******************************
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.

Introduccin
Objetivos
2 Crear formularios Web Forms con Microsoft ASP.NET

Leccin: crear formularios Web Forms
Qu es un formulario Web Form?
Crear un formulario Web Formcon Visual Studio .NET
Demostracin: convertir una pgina HTML en un
formulario Web Form

***************************** use******************************
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.

Introduccin
Objetivos de la leccin

Qu es un formulario Web Form?
<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb"
SmartNavigation="true"%>
<html>
<body ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
</form>
</body>
</html>
SmartNavigation="true"%>
<html>
</form>
</body>
</html>
Extensin .aspx
Atributos de pgina
Directiva @ Page
Atributos de cuerpo
Atributos de formulario

***************************** use******************************
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.
Introduccin
Extensin .aspx

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:
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.

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 de la pgina
Visual Basic .NET
C#
Nota

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

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
parapageLayout:
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:
<asp:textbox id="txtField1" style="Z-INDEX: 101;
LEFT: 65px; POSITION: absolute; TOP: 98px"
runat="server" Height="26px" Width="194px">
</asp:textbox>
</form>
</body>

La etiqueta <Form> define 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>

Atributos del cuerpo
Atributos del formulario

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.

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">
'HTML y controles aqu
</form>
</body>
</html>

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 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">
'HTML y controles aqu
</form>
</body>
</html>

Ejemplo de C#

Crear un formulario Web Form con Visual Studio .NET
Las nuevas aplicaciones Web ASP.NET crean un
formulario Web predeterminado: WebForm1.aspx
Crear formularios Web Forms adicionales desde el
Explorador de soluciones
Actualizar pginas HTML existentes en formularios
Web Forms

***************************** use******************************
Dependiendo del punto en que nos encontremos en el proceso de desarrollo,
existen varios modos de crear un formulario Web Form.
Cuando creamos un nuevo proyecto en Visual Studio .NET, se incluye
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.

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.

Introduccin
Aplicaciones Web
nuevas
Crear formularios Web
Forms adicionales

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.

Actualizar pginas
HTML

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. 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
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******************************
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.

Introduccin
Objetivos de la leccin

Qu es un control de servidor?
Runat="server"
Los eventos ocurren en el servidor
Viewstatesaved
Have built-in functionality
Common object model
Todos tiene atributos Id y Text
Crear browser-specific HTML
<asp:Button id="Button1" runat="server"
Text="Submit"/>
<asp:Button id="Button1" runat="server"
Text="Submit"/>

***************************** use******************************
Los controles de servidor ASP.NET son componentes que se ejecutan en el
servidor y encapsulan la IU y 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" />

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.
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.

Para ms informacin sobre la funcionalidad del control de servidor,
consultar el Mdulo Agregar cdigo a un formulario Web Form con Microsoft
ASP.NET.

Introduccin
Runat=server
Funcionalidad incluida
Nota

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>

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.
Modelo de objetos
comn
Crear cdigo HTML
especfico del
navegador

Tipos de controles de servidor
Controles intrnsecos
Controles de validacin
Controles ricos
Controles List-bound
Controles Web de Internet Explorer

***************************** use******************************
Existen numerosos tipos de controles de servidor disponibles en ASP.NET.
Algunos controles de servidor se parecen mucho a los controles HTML
tradicionales, mientras que otros son nuevos en ASP.NET. Esta amplia variedad
de controles nos permite personalizar nuestro formulario Web Form para que se
adapte a la 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.
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.

Para ms informacin sobre los controles de validacin, consultar el
Introduccin
Controles de servidor
HTML
Web
Nota

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.

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.

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"/>

Nota
Ejemplo de controles
equivalentes

Guardar el estado de la vista
Control oculto ViewState de pares de nombre y valor
almacenados en el formulario Web Form
De forma predeterminada, ajustable a nivel de
formulario Web Form y control
<%@ Page EnableViewState="False" %>
<asp:ListBox id="ListName"
EnableViewState="true" runat="server">
</asp:ListBox>
<asp:ListBox id="ListName"
EnableViewState="true" runat="server">
</asp:ListBox>
<input type="hidden" name="__VIEWSTATE"
value="dDwtMTA4MzE0MjEwNTs7Pg==" />
value="dDwtMTA4MzE0MjEwNTs7Pg==" />

***************************** use******************************
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.
Introduccin

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">
value="dDw3NzE0MTExODQ7Oz4=" />
'HTML aqu
</form>

De forma predeterminada, un formulario Web Form guarda el estado de la vista
de los controles en el formulario Web Form. Para formularios Web Forms con
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:

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>

Para ms informacin sobre guardar el estado, consultar el Mdulo
Gestionar el estado.

Control oculto
Deshabilitar y habilitar
ViewState
Nota

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.
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.
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.
11. Introducir informacin en los controles y hacer clic en Guardar. Ahora,
los controles guardan sus valores.

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>.
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:
<%@ Page SmartNavigation="true" Language="vb"
CodeBehind="HTMLPage.aspx.vb" AutoEventWireup="false"
Inherits="Mod04.HTMLPage" %>

<%@ Page SmartNavigation="true" Language="c#"
CodeBehind="HTMLPage.aspx.cs" AutoEventWireup="false"
Inherits="Mod04.HTMLPage" %>

20. Guardar los cambios y visualizar la 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.

Agregar una etiqueta al
formulario Web Form
Uso de SmartNavigation
Visual Basic .NET
C#

Basados en elementos HTML
Existen en el espacio de nombres
System.Web.UI.HtmlControls
<input type="text" id="txtName"
runat="server" />
<input type="text" id="txtName"
runat="server" />

***************************** use******************************
Los controles HTML de un formulario Web Form no 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.
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" />

Introduccin
Ejemplo

Existen en el espacio de nombres
System.Web.UI.WebControls
Sintaxis del control
HTML generado por el control
<asp:TextBox id="TextBox1"
runat="server">Text_to_Display
</asp:TextBox>
<asp:TextBox id="TextBox1"
runat="server">Text_to_Display
</asp:TextBox>
<input name="TextBox1" type="text"
value="Text_to_Display"
Id="TextBox1"/>
<input name="TextBox1" type="text"
value="Text_to_Display"
Id="TextBox1"/>

***************************** use******************************
Los controles de servidor Web son controles de servidor creados
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.
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
Control HTML
equivalente
Funcin del control de
servidor Web

<asp:button> <input type=submit> Crea un botn que enva una
peticin al servidor.
<asp:checkbox> <input type=checkbox> Crea una casilla de verificacin
que puede seleccionarse
haciendo clic.
<asp:hyperlink> <a href=""> </a> Crea un hiperenlace a una
etiqueta anchor HTML.
<asp:image> <img src=""> Crea un rea que se utiliza para
mostrar una imagen.
<asp:imagebutton> <input type=image> Crea un botn que incorpora la
visualizacin de una imagen en
lugar de texto.
<asp linkButton> Ninguno Crea un botn que tiene el
aspecto de un hiperenlace.
Introduccin
Web intrnsecos

(continuacin)
Control de
servidor Web
Control HTML
equivalente
Funcin del control de servidor
Web

<asp:label> <span> </span> Crea texto que los usuarios no
pueden modificar.
<asp:listbox> <select size="5">
</select>
Crea una lista de opciones. Permite
mltiples selecciones.
<asp:panel> <div> </div> Crea una divisin sin bordes en el
formulario que se utiliza como
contenedor para otros controles.
<asp:radiobutton> <input type=radiobutton> Crea un nico control de botn de
opcin.
<asp:table> <table> </table> Crea una tabla.
<asp:textbox> <input type=text> Crea un control de cuadro de texto.

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 Funcin

CompareValidator Requiere que la entrada concuerde con una segunda
entrada o campo existente.
CustomValidator Requiere que la entrada concuerde con una condicin
como que sean nmeros primos o impares.
RangeValidator Requiere que la entrada concuerde con un intervalo
especificado.
RegularExpressionValidator Requiere que la entrada concuerde con un formato
especificado como un nmero de telfono de un
determinado pas o una contrasea que tenganmeros y
letras.
RequiredFieldValidator Requiere que el usuario introduzca algn valor antes de
que el control sea procesado.
ValidationSummary Recopila todos los mensajes de error de los controles de
validacin para una visualizacin centralizada.

Para ms informacin sobre los controles de validacin, consultar el
Mdulo Validar la entrada de datos del usuario.

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 Muestra una secuencia (predefinida o aleatoria) de
imgenes.
Calendar Muestra un calendario grfico en el que los usuarios
pueden seleccionar fechas.

Nota
Controles ricos
estndares

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

CheckBoxList Muestra datos como una columna de casillas de verificacin.
Repeater 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.
DataList 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.
DataGrid Muestra informacin, normalmente enlazada a datos en forma
tabular, con columnas. Tambin proporciona mecanismos para
permitir editar y clasificar.
DropDownList Muestra datos en un men desplegable.
Listbox Muestra datos en una ventana.
RadioButtonList Muestra datos en una columna de botones de opcin.

Para ms informacin sobre los controles enlazados a listas y el acceso a
datos, consultar el Mdulo Acceso a datos con Microsoft ADO.NET.

Controles enlazados a
listas
Nota

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 HTML enviado al cliente

asp:textbox
asp:button
asp:label

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

Seleccionar el control adecuado
Se necesitan funcionalidades
especficas como un calendario
o rotacin de publicidad
El control interactuar con
scripts cliente y servidor
Se est escribiendo una pgina
que puede ser utilizada por
varios navegadores
Se est trabajando con pginas
HTML existentes y se desea
agregar funcionalidades de
pgina ASP.NET Web
Se prefiere un modelo de
programacin Visual Basic
Se prefiere un modelo de
objetos como HTML
Utilizar controles de Utilizar controles de
servidor Web si: servidor Web si:
Utilizar controles de servidor Utilizar controles de servidor
HTML si: HTML si:
El ancho de banda no es un
problema
El ancho de banda es limitado

***************************** use******************************
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.
Introduccin
HTML

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.

Web

Demostracin: agregar controles de servidor a un formulario Web
Form
Crear un formulario Web
Agregar controles TextBox, Buttony
Label
Agregar un control Calendar

***************************** use******************************
En esta demostracin, veremos cmo agregar controles de servidor Web a un
formulario Web Form.
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 ID Text

TextBox txtName Name
Button cmdSubmit Submit
Label lblMessage 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.
Agregar sencillos
controles de servidor
Web

6. Introducir texto en el cuadro de texto y hacer clic en Submit para mostrar
que el valor se conserva.
7. Visualizar la fuente de la pgina. Observar que el posicionamiento de los
controles se realiza utilizando DHTML.
8. Cerrar la vista de la fuente de la pgina.

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
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.

1. En el cuadro de dilogo Pginas de propiedades, seleccionar
FlowLayout (en lugar de GridLayout) en el campo Page Layout, y
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.

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.
Cambiar el navegador
de destino
Cambiar la presentacin
de la pgina
Agregar un control
Calendar

Crear Formularios Web Forms PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Crear Formularios Web Forms PDF

Cargado por

Copyright:

Formatos disponibles

ndice

También podría gustarte