ASP .NET Framework 3.5

la WEB
ǁǁǁ͘ŝŶĂĚĞĐŽ͘ĐŽŵ
MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5
www.depurando.com 1

El proceso de comunicación entre el navegador y el servidor a través del protocolo

HTTP se puede resumir de la siguiente forma:
1. El explorador Web inicia una petición de un recurso a un servidor Web.

2. HTTP se utiliza para enviar la solicitud GET al servidor Web.
3. El servidor Web procesa la solicitud.
4. El servidor Web envía una respuesta al navegador Web. Protocolo HTTP se utiliza
para enviar la respuesta HTTP al navegador Web.
5. El navegador web procesa la respuesta, y muestra la página Web.
6. El usuario introduce los datos y realiza una acción, como hacer clic en un botón
"Enviar" que hace que los datos se envían de vuelta al servidor Web.
7. HTTP se utiliza para enviar los datos al servidor.
8. El servidor Web procesa los datos.
9. El servidor Web envía la respuesta al navegador Web.
10. HTTP se utiliza para enviar la respuesta HTTP al navegador Web.
11. El navegador web procese la respuesta, y muestra la página Web.
Servidor Web
Los servidores Web son responsables de la recepción y tramitación de las solicitudes de los
navegadores a través de HTTP. Cada servidor Web maneja la solicitud y envía una respuesta al
navegador Web. Después de eso, el servidor Web cierra la conexión y todos los recursos
liberados que habían participado en la solicitud. Todos los recursos fueron liberados debido a
que el servidor Web debe ser capaz de manejar miles de solicitudes por minuto, y el original
son simples páginas web, páginas HTML estáticas.
Ningún dato se conserva de la respuesta entre el servidor web y el navegador y la conexión se

cierra después de enviar la respuesta
www.depurando.com 2

Además de servir archivos HTML, los servidores Web también pueden tramitar las solicitudes
de páginas que contienen código que se ejecutará en el servidor.
También tienen la capacidad de almacenar datos a través de las solicitudes de páginas Web, lo
que significa que las páginas Web pueden estar conectadas para formar aplicaciones web.
Debido a que muchos sitios Web están configurados como aplicaciones Web
que contiene muchas páginas web, la idea de que un servidor Web entrega una sola página
para el navegador Web y el cierre de la conexión es bastante anticuado.
El navegador Web
El navegador Web proporciona una plataforma independiente de la plataforma para mostrar
páginas web que fueron escritas con HTML. El explorador Web también tiene que mostrar las
imágenes y responder a los hipervínculos. Cada solicitud de una página web al servidor
provoca el refresco de la pantalla del navegador y su sustitución por la nueva página web.
Aunque el papel del explorador Web es simplemente presentar los datos y la recogida de
datos, existen nuevas tecnologías del lado del cliente que permiten a los navegadores web
ejecutar código, como JavaScript y AJAX , sin necesidad de refrescar la página web actual. Estas
tecnologías permiten una experiencia de usuario mucho mejor y más robusta que la
experiencia de usuario proporcionada por de los navegadores Web primitivos.
www.depurando.com 3

HTTP, Protocolo de Transferencia de Hipertexto

HTTP en el protocolo de comunicación basado en texto que se utiliza para solicitar las páginas
Web del servidor Web y enviar las respuestas de vuelta al navegador Web. Mensajes HTTP
suelen ser mensajes enviados entre el servidor Web y el navegador Web usando el puerto 80,
o, cuando se utiliza HTTP seguro (HTTPS), el puerto 443
Cuando una página Web se solicita, un texto como el siguiente comando se envía al servidor
Web
GET /default.aspx HTTP/1.1
Host: www.northwindtraders.com
La primera línea contiene el método, también conocido como un verbo o un comando,

llamado GET, y es seguido por la URL, de la página Web para ser recuperado, que es seguido
por un indicador de la versión de HTTP para ser utilizado. El método indica qué acción se
llevará a cabo por el servidor Web utilizando la dirección URL que sigue el método.
La segunda línea identifica el nombre del host que puede ser utilizado por el servidor Web si el
servidor Web sirve más de un sitio Web. Este proceso se conoce como el uso de encabezados
de host para identificar el sitio Web que se encargará de la petición (s).
Método Significado
GET Devuelve el recurso identificado en la URL pedida.
HEAD Funciona como el GET, pero sin que el servidor
devuelva el cuerpo del mensaje. Es decir, sólo se
devuelve la información de cabecera.
POST Indica al servidor que se prepare para recibir
información del cliente. Suele usarse para enviar
información desde formularios.
PUT Envía el recurso identificado en la URL desde el
cliente hacia el servidor.
OPTIONS Pide información sobre las características de
comunicación proporcionadas por el servidor. Le
permite al cliente negociar los parámetros de
comunicación.
TRACE Inicia un ciclo de mensajes de petición. Se usa para
depuración y permite al cliente ver lo que el servidor
www.depurando.com 4

recibe en el otro lado.

DELETE Solicita al servidor que borre el recurso identificado
con el URL.
CONNECT Este método se reserva para uso con proxys.
Permitirá que un proxy pueda dinámicamente
convertirse en un túnel. Por ejemplo para
comunicaciones con SSL.
El objeto Request representa la comunicación desde el navegador al Servidor solicitando un

recurso
El objeto Response representa la respuesta del servidor al navegador
HTTP/1.1 200 OK
Server: MicrosoftIIS/6.0
ContentType: text/html
ContentLength: 38
<html><body>Hello, world.</body><html>
La primera línea contiene el protocolo, la versión del protocolo, un código de estado y la razón.
Los posibles códigos de estado se identifican con números de tres cifras y se clasifican en cinco
grupos:
1. Números del estilo 1XX que representan mensajes de tipo informativo.
2. Números del estilo 2XX que indican que se completó satisfactoriamente la solicitud del
cliente.
3. Números del estilo 3XX que indican que la solicitud fue redirigida.
4. Números del estilo 4XX que indican un error en la solicitud del cliente.
5. Números del estilo 5XX que indican un error en el lado del servidor.
Código Significado
200 OK La solicitud del cliente fue satisfactoria y el
servidor ha devuelto la información solicitada.
204 No El cuerpo de la respuesta no tiene contenido.
Content Esto puede indicar, por ejemplo, un problema
con un CGI que no devuelve datos.
301 Moved El URI solicitado no está disponible en el
Permanently servidor. Ha sido movido a otra ubicación. Las
solicitudes futuras deberán hacerse a esa
ubicación.
400 Bad Hay un error de sintaxis en la solicitud del
Request cliente. Por ejemplo mandar una solicitud
indicando que el cliente soporta HTTP/1.1 y no
www.depurando.com 5

enviar el encabezado de Host.

404 Not Este es junto con el 200 OK, el código más
Found habitual. Indica que el documento solicitado no
está disponible, probablemente el URI haya sido
mal escrito.
500 Internal Este mensaje indica que algo ha ido mal en el
Server Error servidor, casi siempre tiene que ver con
problemas en programas CGI.
La segunda línea de la respuesta indica el tipo de servidor web. La tercera línea indica el tipo
de recurso que está siendo enviado al navegador web. Este indicador es el tipo MIME. En este
caso el fichero es un fichero de texto HTML estático. El tipo MIME es una designación de dos
partes "tipo / subtipo", en el que la primera parte es el tipo de recurso y la segunda parte es el
subtipo de recursos
El registro de los tipos MIME los controla la IANA (Internet Asigned Numbers Authority) según
lo especificado en el RFC 2048 [102], y en su sitio Web podemos obtener la lista completa y
actualizada de los tipos registrados. Es importante el registro de tipos MIME, esto asegura que
dos tipos de contenido distintos no acaban con el mismo nombre. El prefijo especial x queda
reservado para tipos experimentales (desplegados sin que haya terminado el proceso de
registro) o tipos de uso interno de organizaciones, por ejemplo:
image/xfwf
El protocolo HTTP usa tipos MIME en sus encabezados, por ejemplo para:
x Informar al cliente el tipo de datos que está recibiendo del servidor. Esto se hace con
el encabezado ContentType . Por ejemplo, un navegador típico puede manejar los
datos de tres maneras distintas según el tipo MIME indicado en ContentType :
1. Visualizar el documento, por ejemplo con tipos text/html .
2. Llamar a una aplicación externa, por ejemplo con tipos application/pdf .
3. O preguntarle al usuario que hacer ante un tipo que no se entiende, por

ejemplo image/xfwf .
x Permitir la negociación de contenido. El cliente, en su petición incluye los tipos MIME

que acepta. Por ejemplo, un navegador puede soportar documentos de tipo
application/zip , lo indicará con el encabezado HTTP:
x Allow: application/zip
x Encapsular una o más entidades dentro del cuerpo de mensaje, mediante los tipos
MIME multipart (definidos en el RFC 2046 [100]). Quizá el ejemplo más conocido sea el
tipo:
x multipart/formdata
www.depurando.com 6

El tipo multipart/formdata ha sido definido en el RFC 1867 [96] para encapsular los datos de
un formulario en su envío hacia el servidor mediante el método POST. !
Tipo MIME Descripción

text Información de texto. No se requiere
software especial para obtener el significado
completo del texto. Un subtipo es plain, lo
que significa que el texto se puede leer sin
necesidad de software adicional. Otros
subtipos son HTML y XML, que indican el tipo
de archivo apropiado
image Los datos de la imagen. Requiere un
dispositivo de pantalla (por ejemplo, un
gráfico o una impresora de gráficos) para ver
la información. Subtipos se definen dos
formatos de imagen ampliamente utilizado,
jpeg y gif
audio Datos de audio. Requiere un dispositivo de
salida de audio (como un altavoz o
auriculares) para "oír" los contenidos. Un
primer subtipo llamado basic se define de
este tipo.
video Datos de vídeo. Requiere la capacidad para

mostrar imágenes en movimiento, por lo
general
incluyendo hardware y software
especializados. Un primer subtipo
llamado MPEG se define para este tipo
application Otros tipos de datos, normalmente no

interpretados ya sea binaria o de
información de datos para ser procesados por
una aplicación.
El registro contiene una lista de tipos MIME:
HKEY_CLASSES_ROOT\MIME\Database\Content Type.
Después de la línea con el tamaño del contenido, la respuesta envía el mensaje.
Enviando datos de formulario al Servidor

La etiqueta HTML <form> se puede utilizar para crear un formulario Web que recoge datos y
envía los datos al servidor Web. Un uso típico de etiqueta <form> es el siguiente
<form method="POST" action = "getCustomer.aspx" >

Enter Customer ID:
<input type="text" name="Id">
<input type="submit" value="Get Customer">
</form>
www.depurando.com 7

Hay dos métodos HTTP que se pueden utilizar para enviar el formulario de datos de vuelta al
servidor Web: GET y POST. Cuando el verbo GET se usa, el que contiene los datos de "
QueryString se adjunta a la dirección URL. La QueryString es una colección de estados clave =
valor, separados por ampersand (&),los caracteres que se pueden pasar al servidor Web
concatenando un signo de interrogación (?) a la final de la URL y, a continuación,
concatenando la QueryString como sigue
GET /getCustomer.aspx?Id=123&color=blue HTTP/1.1
Una de las ventajas de utilizar el verbo GET es que la QueryString URL es enviada completa
y puede ser vista y modificada en la barra de direcciones del explorador Web, según sea
necesario.
Dependiendo de la situación, esto también podría ser una desventaja. La URL completa y
QueryString son fáciles de guardar como una unidad.
Una desventaja es que el QueryString tiene un tamaño limitado por el navegador Web y el
servidor Web que se utilice. Por ejemplo, cuando se utiliza Microsoft Internet Explorer e IIS, el
límite es de 1024 caracteres. Otra consideración es que puede que no desea permitir que un
usuario escriba la dirección URL y QueryString directamente en la barra de direcciones sin
navegar por otras páginas Web en primer lugar.
Cuando se usa el método POST. Los datos se colocan en el cuerpo del mensaje como sigue:
POST /getCustomer.aspx HTTP/1.1

Id=123&color=blue
Con el método POST se elimina la limitación de tamaño en los datos, se han probado con hasta
10 MB. Este método no permite al usuario simplemente escribir los datos ya que estos datos
se esconden en el cuerpo del mensaje. En la mayoría de escenarios es el método más
conveniente de enviar datos al servidor.
Una página Web ASP.NET contiene una propiedad denominada IsPostBack que se utiliza para
determinar si los datos se envían de vuelta al servidor Web o si la página Web es simplemente
que se solicita.
1. What is the name of the Web page property that you can query to determine that a Web page
is being requested without data being submitted? (Choose one.)
A. FirstGet
B. Initialized
C. IncludesData
D. IsPostBack
www.depurando.com 8

%
& ''(

#$$

MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5
www.depurando.com 9
% & '(
#$

% & '(

#$

Desarrollar aplicaciones Web ASP.NET sobre el .NET Framework es similar a desarrollar

aplicaciones Windows. El componente fundamental de ASP.NET es el formulario Web Form.
Un formulario Web Form es la página Web que los usuarios visualizan en un navegador. Una
aplicación Web ASP.NET consta de uno o más formularios Web Form. Un Web Form es una
página dinámica que puede acceder a recursos del servidor.
Por ejemplo, una página Web tradicional puede ejecutar scripts en el cliente para realizar
tareas básicas. En cambio, un formulario Web Form ASP.NET también puede ejecutar código
en el lado servidor para acceder a una base de datos, generar formularios Web Forms
adicionales, o aprovechar la seguridad incorporada en el servidor.
Además, como un formulario Web Form ASP.NET no depende de utilizar scripts en el cliente,
no depende del tipo de navegador del cliente o del sistema operativo. Esta independencia
permite desarrollar un único formulario Web Form que puede ser visualizado prácticamente
en todos los dispositivos que dispongan de acceso a Internet y de un navegador Web.
Debido a que ASP.NET forma parte del .NET Framework, podemos desarrollar aplicaciones
Web ASP.NET en cualquier lenguaje basado en .NET.
La tecnología ASP.NET también permite la creación de servicios Web XML. Los servicios Web
XML son aplicaciones distribuidas que utilizan XML para transferir información entre clientes,
aplicaciones y otros servicios Web XML.
www.depurando.com 10
% & '(
#$

AplicaciónWeb de ASP.NET

Una aplicación Web ASP.NET contiene distintas partes y componentes. Crear aplicaciones Web
ASP.NET implica utilizar y trabajar con todos ellos
Formularios Web Forms o páginas .aspx
Los formularios Web Forms y las páginas .aspx proporcionan la interfaz de usuario para la
aplicación Web.
Páginas con código trasero
Las páginas con código trasero están asociadas a los formularios Web Forms y contienen el
código del servidor para el formulario Web Form.
Archivos de configuración
Los archivos de configuración son archivos XML que definen la configuración predeterminada
para la aplicación Web y para el servidor Web. Cada aplicación Web tiene un archivo de
configuración Web.config. Además, cada servidor Web tiene un archivo machine.config.
Archivo Global.asax
Los archivos Global.asax contienen el código necesario para responder a los eventos a nivel de
aplicación provocados por ASP.NET.
% & '(
#$

Enlaces a servicios Web XML

Los enlaces a servicios Web XML permiten a la aplicación Web enviar y recibir datos de un
servicio Web XML.
Conectividad a bases de datos
La conectividad a bases de datos permite a la aplicación Web transferir datos desde y hacia
fuentes de base de datos.
Caché
El uso de caché permite a la aplicación Web devolver más rápidamente formularios Web
Forms y datos tras la primera petición.
Proceso de una solicitud

Cuando el cliente solicita una página Web por primera vez, se genera el siguiente conjunto
de eventos:
1. El navegador cliente envía una solicitud GET HTTP al servidor.
2. El parseador ASP.NET interpreta el código fuente.
3. Si el código no se ha compilado todavía en una biblioteca de enlace dinámico (DLL), ASP.NET

invoca el compilador.
4. El CLR carga y ejecuta el código Microsoft intermediate language (MSIL)
Cuando el usuario invoca la misma página Web por segunda vez, se genera el siguiente
conjunto de eventos:
1. El navegador cliente envía una solicitud GET HTTP al servidor.
2. El CLR carga y ejecuta inmediatamente el código MSIL que ya se ha compilado durante el

primer intento de acceso del usuario.
Creando un sitio web

En la primera parte del tutorial, creará un sitio web de ASP.NET con una página
predeterminada. Este sitio web será un sitio web de sistema de archivos que no requiere
Microsoft Internet Information Services (IIS). Esto permite crear y ejecutar la página desde el
sistema de archivos local de su equipo.
Para crear un sitio web de sistema de archivos
1. Abra Visual Web Developer.
2. En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web, como se muestra en la siguiente ilustración.
% & '(
#$

3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
4. En el cuadro Ubicación, seleccione la casilla Sistema de archivos y escriba el nombre de

la carpeta donde desea guardar las páginas del sitio web.
Por ejemplo, escriba el nombre de carpeta C:\Tasks.
5. En la lista Lenguaje, haga clic en Visual Basic o Visual C# para seleccionar el lenguaje de
programación que utilizará en todo el proyecto web
6. Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx. De forma
predeterminada, cuando se crea una nueva página, Visual Web Developer muestra la página
en la vista Código fuente, donde puede ver los elementos HTML de la página. La ilustración
siguiente muestra una página web predeterminada en vista Código fuente.
% & '(
#$

Visita guiada por Visual Web Developer
Antes de continuar, resultará útil familiarizarse con el entorno de desarrollo de Visual Web
Developer. La ilustración siguiente muestra algunas de las ventanas y herramientas de Visual
Web Developer.
Diagrama del entorno de Visual Web Developer
Examine la ilustración anterior y relacione el texto con la lista siguiente, que describe las
ventanas y herramientas que se utilizan con más frecuencia. (Aquí no se muestran todas las
ventanas y herramientas disponibles, sólo las marcadas en la ilustración anterior.)
% & '(
#$

x Barras de herramientas. Proporcionan los comandos que permiten dar formato al

texto, buscar texto, etc. Algunas barras de herramientas sólo están disponibles cuando !
se trabaja en la vista Diseño.
x Explorador de soluciones. Muestra los archivos y carpetas del sitio web.
x Ventana Documento. Muestra los documentos en los que se está trabajando en

ventanas con fichas. Puede pasar de un documento a otro haciendo clic en las fichas.
x Fichas de vistas. Presentan distintas vistas del mismo documento. La vista Diseño es un
área de edición prácticamente WYSIWYG. La vista Código fuente es el editor de la
página que muestra el marcado. La vista en dos paneles muestra la vista Diseño y la
vista Código fuente del documento. Trabajará con las vistas Diseño y Código fuente
más adelante en este tutorial. Si prefiere abrir las páginas web en la vista Diseño, en el
menú Herramientas haga clic en Opciones, seleccione el nodo Diseñador HTML y
cambie la opción Iniciar páginas en.
x Ventana Propiedades. Permite cambiar la configuración de la página, los elementos

HTML, los controles y otros objetos.
x Ventana Propiedades de CSS. Muestra los estilos CSS actuales cuando la vista Diseño
está activa.
x Ventanas Administrar estilos y Aplicar estilos. Ayudan a controlar los estilos CSS del
sitio web.
x Cuadro de herramientas. Proporciona los controles y elementos HTML que se pueden

arrastrar a una página. Los elementos del Cuadro de herramientas se agrupan por
funcionamiento común.
x Explorador de bases de datos. Muestra las conexiones de las bases de datos. Si no ve la

ventana Explorador de bases de datos en Visual Web Developer, en el menú Ver, haga
clic en Otras ventanas y, a continuación, haga clic en Explorador de bases de datos.
Puede reorganizar, cambiar el tamaño y acoplar las ventanas para adaptarlas a sus
preferencias. El menú Ver permite mostrar otras ventanas.
Para recorrer el entorno de desarrollo
1. En el menú Ver, haga clic en Barras de herramientas.
Se muestra un submenú de barras de herramientas disponibles. Las barras de herramientas

que están seleccionadas actualmente aparecen con una casilla junto a ellas.
2. Desplácese hasta el final de la lista de barras de herramientas y haga clic en

Personalizar.
Se muestra el cuadro de diálogo Personalizar.
3. Revise las barras de herramientas disponibles. Cuando termine, haga clic en Cerrar.
% & '(
#$

4. En el menú Ver, haga clic en el Explorador de soluciones.

"
Se mostrará la ventana Explorador de soluciones. De forma predeterminada, esta ventana se
acopla en un lado del entorno de Visual Web Developer.
5. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el

elemento superior de la lista de sitios.
Se muestra un menú de acceso directo con las operaciones de sitio web más habituales.
6. Presione ESC para cerrar el menú de acceso directo.
7. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el

archivo Web.config y, a continuación, haga clic en Abrir para abrir el archivo en la
ventana de documento.
8. Haga doble clic en la página Default.aspx para abrirla en la ventana de documento.

Hacer doble clic en un archivo es una alternativa a utilizar el comando Abrir del menú
de acceso directo.
Observe que el nombre de cada página abierta se muestra en una ficha en la parte superior de
la ventana de documento.
9. En la parte inferior de la ventana de documento, haga clic en Dividir para mostrar vista
Código fuente y la vista Diseño al mismo tiempo.
10. En el menú Ver, haga clic en Ventana Propiedades.
Se mostrará la ventana Propiedades.
Al seleccionar un objeto en la ventana de documento, la ventana Propiedades muestra las

propiedades del objeto seleccionado.
11. En el panel de vista Código fuente, seleccione el elemento form y, a continuación, en

la ventana Propiedades, examine las propiedades disponibles.
12. En el menú Ver, haga clic en Cuadro de herramientas.
Se mostrará la ventana Cuadro de herramientas.
13. En vista Diseño, en la ficha Estándar del Cuadro de herramientas, arrastre un control
Button hacia el documento y colóquelo en el elemento div.
Observe que la vista Código fuente se actualiza con el marcado correspondiente.
14. En el menú Ver, haga clic en Explorador de bases de datos.
Se mostrará la ventana Explorador de bases de datos.
15. Haga clic con el botón secundario del mouse en Conexiones de datos para ver las
opciones de bases de datos disponibles.
% & '(
#$

Crear una página web ASP.NET

)
Al crear un nuevo sitio web, Visual Web Developer agrega una página web ASP.NET (página de
formularios Web Forms) denominada Default.aspx. Puede utilizar la página Default.aspx como
página principal de su sitio web. Sin embargo, en este tutorial, creará una nueva página y
trabajará con ella.
Para agregar una página al sitio Web
1. En la ventana de documento, haga clic con el botón secundario en la ficha de la página

Default.aspx y, a continuación, haga clic en Cerrar.
2. Si se le pide que guarde los cambios, haga clic en No.
3. En el Explorador de soluciones, haga clic con el botón secundario en el sitio web, (por
ejemplo, C:\Tasks) y, a continuación, haga clic en Agregar nuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
4. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
5. En el cuadro Nombre, escriba Home.aspx.
6. En la lista Lenguaje, seleccione el lenguaje de programación con el que desea trabajar

(Visual Basic o C#).
7. Desactive la casilla Colocar el código en un archivo independiente.
La ilustración siguiente muestra el cuadro de diálogo Agregar nuevo elemento.
% & '(
#$

8. Haga clic en Agregar.
Visual Web Developer crea la nueva página. De forma predeterminada, la página se muestra
en la vista Código fuente.
Agregar HTML a la página
En esta parte del tutorial, agregará texto estático a la página.
Para agregar texto a la página
1. En la parte inferior de la ventana de documento, haga clic en la ficha Diseño para pasar
a la vista Diseño.
2. En la página, escriba ToDo List.
Ejecutar la página
Antes de continuar, puede probar la página. Para ejecutar una página, necesita un servidor
Web. En un sitio web de producción, se utiliza IIS como servidor web. Sin embargo, para
probar una página puede utilizar el servidor de desarrollo de ASP.NET, que se ejecuta
localmente y no requiere IIS. En los sitios web de sistema de archivos, el servidor web
predeterminado de Visual Web Developer es el servidor de desarrollo de ASP.NET.
Para ejecutar la página
1. Presione CTRL+F5 para ejecutar la página.
% & '(
#$

Visual Web Developer inicia el servidor de desarrollo de ASP.NET. En la barra de herramientas

de Windows aparece un icono que indica que el servidor web de Visual Web Developer se está
ejecutando, como se muestra en la ilustración siguiente:
La página se muestra en el explorador. Aunque la página creada tiene una extensión .aspx, se
ejecuta como cualquier página HTML.
2. Cierre el explorador.
Tipos de Sitios Web

En lugar de crear sólo sitios Web que se ejecutan como aplicaciones de Servicios de Internet Information
Server (IIS), ahora puede crear los tipos siguientes:
x Sitio Web del sistema de archivos Puede almacenar archivos en cualquier carpeta, y abrir
y trabajar con cualquier colección de páginas Web, independientemente de dónde se
encuentren. Una característica importante es que no necesita tener IIS instalado para ejecutar
las páginas de un sitio Web del sistema de archivos. En su lugar, puede probar los sitios Web
utilizando el Servidor de desarrollo de ASP.NET, un servidor de pruebas poco complicado.
x Sitio Web de FTP Puede abrir y editar archivos de sitios Web utilizando el Protocolo de
transferencia de archivos (FTP) directamente desde Visual Web Developer.
x Sitio Web de IIS local Puede seguir creando sitios Web que se ejecutan en la copia local de
IIS, como lo hacía con versiones anteriores de Visual Studio. Los sitios Web de IIS locales no
requieren Extensiones de servidor de FrontPage.
x Sitio Web remoto Puede crear sitios Web que se ejecutan en IIS en un equipo distinto que
esté ejecutando Extensiones de servidor de FrontPage 2000 o extensiones de servidor
FrontPage 2002.
% & '(
#$

Carpetas Especiales
Como en versiones anteriores de Visual Studio, las páginas Web se conservan en la raíz del
sitio Web y en subcarpetas, tal como sea necesario para la aplicación. No obstante, el sitio
Web de Visual Web Developer puede contener las subcarpetas siguientes que tienen
características concretas:
x Carpeta App_Browsers Contiene archivos de definición de exploradores que ASP.NET

utiliza para identificar exploradores individuales y determinar sus funciones.
x Carpeta App_Data Contiene bases de datos de Microsoft Access (archivos .mdb),

archivos XML y otros datos almacenadas en archivos locales. La cuenta de usuario que
se utiliza para ejecutar la aplicación (por ejemplo, la cuenta ASPNET local) tiene
permisos de lectura, escritura y creación de archivos en esta carpeta. Varias funciones
de aplicación ASP.NET, como proveedores para suscripciones y funciones, así como la
herramienta Administración de sitios Web, están configuradas para trabajar con la
carpeta App_Data específicamente.
x Carpeta Bin Contiene el código compilado, como en versiones anteriores de Visual

Studio. Se hace referencia automáticamente a cualquier clase representada por el
código en la carpeta Bin del sitio Web.
x Carpeta App_LocalResources Contiene archivos .resx enlazados a una página

determinada. Puede definir varios archivos .resx para cada página ya que cada archivo
.resx representa un idioma o una combinación de idioma/referencia cultural diferente.
x Carpeta App_GlobalResource Igual que las carpetas App_LocalResources pero

contiene archivos .resx que no están enlazados a una página determinada. Se puede
tener acceso a valores de recursos de archivos .resx en las carpetas
App_GlobalResource mediante programación a partir del código de aplicación.
x Carpeta App_Code Contiene archivos de código fuente. El código se compila como

parte de la aplicación y se hace referencia a él automáticamente. La carpeta App_Code
funciona como la carpeta Bin, salvo que se puede colocar código fuente en lugar de
código compilado. Mientras trabaja en Visual Web Developer, el código fuente de la
carpeta App_Code se compila dinámicamente para que IntelliSense puede hacer
referencia a cualquier clase definida en los archivos.
x Carpeta App_Themes Contiene una colección de archivos que definen el aspecto de

las páginas Web y controles ASP.NET.
x Carpeta App_Browsers Contiene archivos .browser que definen funciones del

explorador.
x Carpeta App_WebReferences Contiene archivos que se utilizan para crear una

referencia a un servicio Web (en el mismo proyecto o externas al proyecto), incluidos
archivos .disco y .wsdl.
% & '(
#$

Visual Web Developer no crea de manera predeterminada estas carpetas, excepto la carpeta
App_Data. En algunos casos, hay utilidades que crean carpetas. Al ejecutar el comando
Generar recurso local, por ejemplo, se crea la carpeta App_LocalResources. En otros casos,
puede crear las carpetas manualmente.
TEST
1. If you want to create a Web site on a remote computer that does not have Front Page Server
Extensions installed, which Web site type will you create? (Choose one.)
A. Remote HTTP
B. File
C. FTP
D. Local HTTP
2. If you want to create a new Web site on a Web server that is hosted by your ISP and the Web
server has Front Page Server Extensions installed, what type of Web site would you create?
(Choose one.)
A. Local HTTP
B. File
C. FTP
D. Remote HTTP
3. If you want to separate your server-side code from your client-side code on a Web page, what
programming model should you implement? (Choose one.)
A. Separation model
B. Code-Behind model
C. In-Line model
D. ClientServer model
4. Joe created a new Web site using Visual Studio 2005, setting the Web site type to File, and
the programming language to C#. Later, Joe received an elaborate Web page from his vendor,
which consisted of the Vendor.aspx file and the Vendor.aspx.vb code-behind page. What must
Joe do to use these files? (Choose one.)
A. Joe can simply add the files into the Web site, because ASP.NET 2.0 supports Web
sites that have Web pages that were programmed with different languages.
B. The Vendor.aspx file will work, but Joe must rewrite the code-behind page using C#.
C. Both files must be rewritten in C#.
D. Joe must create a new Web site that contains these files and set a Web reference to
the new site.

+

, -

, $

MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5
+

, -
, $

+
/ -

, $

Los Sitios Web se han configurado sobre la base de una jerarquía de archivos de configuración
XML, como se muestra en la Figura 19. El primer archivo de configuración es el archivo
Machine.config. Este archivo se encuentra en la carpeta de configuración de la versión de. NET
Framework instalado en el equipo, y generalmente se encuentra en la siguiente ubicación:
%WINDIR%\Microsoft.NET\Framework\version\Config\machine.config
El archivo Machine.config contiene configuración para todo tipo de aplicaciones. NET, como
Windows, la consola, Librerias de Clases, y aplicaciones Web. Estos ajustes son globales a la
máquina. Algunos de los ajustes en el archivo Machine.config pueden ser anulados por los
ajustes Web.config en archivos que están en la jerarquía, mientras que otros son globalesLos
globales están protegidos y no pueden ser anulados por los archivos Web.config
El siguiente archivo en la jerarquía es el principal archivo Web.config, que se encuentra en el

mismo directorio que el archivo Machine.config. Este archivo contiene la configuración Web
predeterminada del servidor, algunas de las cuales pueden anular los ajustes en el archivo
Machine.config.
En el directorio raíz de cada sitio Web, usted tiene la posibilidad de añadir un archivo
Web.config. Este archivo es opcional y puede contener ajustes adicionales para el sitio Web,
así como anular configuraciones. En cada aplicación Web, también puede tener un archivo
Web.config para proporcionar más opciones y ajustes. Por último, cada subdirectorio en una
aplicación Web Opcionalmente, puede tener un archivo Web.config en que sólo un
subconjunto de las opciones es válida.
+

, -
, $

Procesar Ficheros de Configuración

Cuando se ejecuta la aplicación Web, en tiempo de ejecución se crea una caché de la
configuración efectiva de la aplicación Web por el anidamiento de las capas de los archivos de
configuración de la siguiente manera:
1. Se recuperan los ajustes del archivo Machine.config

2. La configuración del archivo raíz Web.config se añaden a la caché, sobrescribiendo
cualquier configuración que se creó anteriormente.
3. Si existe un archivo Web.config en la raíz del sitio Web, este archivo se lee en la
memoria caché, sobrescribir las entradas existentes.
4. Si existe un archivo Web.config en la aplicación Web, que es leído en la caché, también
sobrescribe cualquier configuración existente. El resultado de la caché contiene la
configuración de este sitio Web
5. Si tiene subdirectorios en su aplicación Web, los subdirectorios pueden tener un
Web.conifg archivo que incluye los ajustes que son específicos para los archivos y
carpetas que están contenidas dentro de esta carpeta.
Modificando el archivo de configuración

Debido a que son archivos XML, los archivos de configuración se pueden abrir y modificar con
cualquier editor de texto o editor XML. También puede usar el. NET Framework 2.0
Configuración complemento con la Microsoft Management Console (MMC), que proporciona
una interfaz gráfica de usuario (GUI) para modificar algunos de los archivo de configuración de
los ajustes que un administrador puede querer cambiar.
Visual Studio 2005 también proporciona el Sitio Web Herramienta de administración, que
puede ser usado para modificar muchos de los ajustes de archivo de configuración. Puede
acceder a esta herramienta mediante la selección de Sitio Web | ASP.NET Configuración.
La Herramienta de administración del sitio Web permite editar las siguientes categorías de los
archivos de configuración:
x Seguridad Esta configuración permite la configuración de seguridad para su sitio web.

En esta categoría, puede agregar los usuarios, roles, y permisos para su sitio Web.
x Configuración de la Aplicación esta categoría se utiliza para modificar la configuración
de las aplicaciones.
x Configuración de Proveedor Este archivo contiene los ajustes de configuración que
permiten especificar el proveedor de la base de datos a utilizar para el mantenimiento
de la composición y funciones
+

, -
, $

El Sitio Web Herramienta de administración le permite crear y modificar la configuración del

sitio Web que no son hereditarios. Si una propiedad se hereda y no puede ser anulada,
aparecerá, pero será atenuado cuando la configuración está desactivada.
+

, -
, $

<system.web>
<!
Establezca debug "true" en la compilación para insertar símbolos
de depuración en la página compilada. Dado que este
proceso afecta al rendimiento, debe establecer este valor como true
durante la depuración.
>
<compilation debug "true">
</system.web>
Test
1. You want to make a configuration setting change that will be global to all Web and Windows
applications on the current computer. Which file do you change? (Choose one.)
A. Global.asax
B. Web.config
C. Machine.config
D. Global.asa
2. You want to make a configuration setting change that will affect only the current Web
application. Which file will you change? (Choose one.)
A. Web.config that is in the same folder as the Machine.config file
B. Web.config in the root of the Web application
C. Machine.config
D. Global.asa
3. You want to make a configuration setting change that will affect only the current Web
application, and you want to use a tool that has a user-friendly Graphical User Interface (GUI).
Which tool should you use? (Choose one.)
A. The Microsoft Management Utility
B. Microsoft Word
C. Visual Studio, using the | Tools | Options path
D. Web Site Administration Tool

:
'%;
MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5
: '%;
<

: =
>= #$

Se puede utilizar para solucionar problemas y diagnosticar problemas con su sitio Web.
También puede utilizar la traza para explorar la utilización de recursos en cada página Web.
Esta lección se refiere a la habilitación y configuración de la traza y, a continuación, analiza los
datos que son puestos a disposición por la traza.
Activar y Configurar Traza

La traza se puede activar en el archivo Web.Config. Pero también se puede utilizar la
Herramienta de administraciónd el Sitio Web para proporcionar una interfaz gráfica fácil de
usar para habilitar y configurar esta opción
Atributo Descripción
enabled Atributo Boolean opcional.
: '%;
Especifica si el seguimiento está habilitado o no para una aplicación.

Para poder utilizar el visor Trace.axd, el seguimiento debe estar
habilitado. El valor predeterminado es false.

localOnly Atributo Boolean opcional.
Especifica si el visor de seguimiento (Trace.axd) sólo está disponible
en el servidor Web del host. Si es false, el visor de seguimiento
está disponible en cualquier equipo.
El valor predeterminado es true.
mostRecent Atributo Boolean opcional.
Especifica si se muestran los resultados de seguimiento de
aplicación más recientes y se descartan los datos de seguimiento
más antiguos que superen los límites indicados por requestLimit.
Si es false, se muestran los datos de seguimiento de las solicitudes
hasta alcanzar el valor del atributo requestLimit.
Se trata de un atributo nuevo en .NET Framework, versión 2.0.
El valor predeterminado es false.
pageOutput Atributo Boolean opcional.
Especifica si se debe mostrar el resultado del seguimiento al final de
cada página. Si es false, el acceso al resultado del seguimiento sólo
es posible a través de la herramienta de seguimiento.
El valor predeterminado es false.
requestLimit Atributo Int32 opcional.
Especifica el número de solicitudes de seguimiento que deben
almacenarse en el servidor. Si se alcanza el límite y el atributo
mostRecent es false, se deshabilita el seguimiento
automáticamente.
El límite máximo de la solicitud es 10.000. Si se especifica un valor
superior, ASP.NET lo redondeará automáticamente a la baja hasta
10.000.
El valor predeterminado es 10.
traceMode Atributo TraceDisplayMode opcional.
Especifica el orden en el que se mostrará la información de
seguimiento.
El atributo traceMode puede ser uno de los siguientes valores
posibles:
Valor Description
SortByCategory Especifica que la información de

seguimiento se muestra en el orden en que
se procesa.
SortByTime Especifica que la información de

seguimiento debe mostrarse ordenada
alfabéticamente por las categorías
definidas por el usuario.
El valor predeterminado es SortByTime.

writeToDiagnosticsTrace Atributo Boolean opcional.
Especifica si los mensajes de seguimiento de ASP.NET se han de
reenviar a la infraestructura de seguimiento de System.Diagnostics
para que los agentes de escucha registrados muestren los mensajes
de Trace. El valor predeterminado es false.
<configuration>
<system.web>
<trace enabled "true"
pageOutput "true"
requestLimit "15"
mostRecent "true" />
<system.web>
: '%;
</configuration>
Si ha habilitado el seguimiento para la aplicación, al solicitar cualquier página, ésta reúne

información de seguimiento y ejecuta cualquier instrucción de seguimiento que contenga.
Puede ver el resultado del seguimiento en el visor de seguimiento. El visor de seguimiento
permite elegir una solicitud específica entre las páginas solicitadas a la aplicación.
Si se reciben múltiples solicitudes para una aplicación que tiene habilitado el seguimiento, en
el visor de seguimiento aparecen las solicitudes en el orden en que se procesaron. La
información de la página inicial del visor de seguimiento incluye la hora de la solicitud, el
archivo solicitado, el código de estado, el verbo HTTP asociado y un vínculo Ver detalles que
permite ver información más detallada acerca de la solicitud. El número de solicitudes
disponibles no superará el límite requestLimit especificado en el archivo Web.config.
En la captura de pantalla siguiente se muestra un visor de seguimiento con las siete solicitudes
enviadas a la aplicación desde que se habilitó el seguimiento.
Para ver los detalles de seguimiento de una solicitud específica

1. Desplácese a Trace.axd en la raíz de la aplicación.
Por ejemplo, si la dirección URL de la aplicación es http://localhost/SampleApplication, vaya a

http://localhost/SampleApplication/trace.axd para ver información de seguimiento para la
aplicación.
2. Seleccione el vínculo Ver detalles de la solicitud que desee investigar.
Para borrar las solicitudes del visor de seguimiento

1. Desplácese a Trace.axd en la raíz de la aplicación.
2. Seleccione el vínculo borrar rastro actual para quitar todas las solicitudes almacenadas en el
visor de seguimiento.
: '%;
Habilitar seguimiento a una página

Puede controlar si se habilita o deshabilita el seguimiento para páginas individuales. Si el
seguimiento está habilitado, cuando se solicita la página, ASP.NET agrega a la página una serie
de tablas que contienen detalles de ejecución sobre la solicitud de la página. De forma
predeterminada, el seguimiento está deshabilitado.
Para habilitar el seguimiento de una página
1. Incluya una directiva @ Page al principio del archivo .aspx.
2. Agregue un atributo Trace y establezca su valor en true, tal como se muestra en el

ejemplo siguiente:
<%@ Page Trace="true" %>
Test
1. You want to identify which event in the Web page life cycle takes the longest time to execute.
How can you accomplish this? (Choose one.)
A. Turn on ASP.NET trace and run the Web application. After that, review the trace
results.
B. Add a line of code to each of the life-cycle events that will print the current time.
C. In the Web.config file, add the monitorTimings attribute and set it to True.
D. In the Web site properties, turn on the performance monitor and run the Web
application. After that, open performance monitor to see the timings.
2. You want to run the trace continuously to enable you to quickly look at the 10 most recent
traces from anyone using your Web site, but you are concerned about filling your hard drive
with an excessive amount of data. Which of the following settings will accomplish your
objective? (Choose one.)
A. <trace enabled="false" requestLimit="10"pageOutput="false" traceMode="SortByTime"
localOnly="true" mostRecent="true"
/>
B. <trace enabled="true" requestLimit="10"pageOutput="true"traceMode="SortByTime"
localOnly="true" mostRecent="true"
/>
C. <trace enabled="true" requestLimit="10"pageOutput="false" traceMode="SortByTime"
localOnly="true" mostRecent="false"
/>
D. <trace enabled="true" requestLimit="10"pageOutput="false" traceMode="SortByTime"

localOnly="false"mostRecent="true"
/>
3. You are interested in examining the data that is posted to the Web server. What trace result
section can you use to see this information? (Choose one.)
A. Control Tree
B. Headers Collection
C. Form Collection
D. Server Variables

'(( &

, $$

%

MC
M CTS::
Apliicaciones Webb
on .NE
co . ET 3.5
5
'( &
, $
%
<

%
Cuando crea páginas Web ASP.NET, puede utilizar estos tipos de controles:
x Controles de servidor HTML Elementos HTML expuestos al servidor para que se

puedan programar. Los controles de servidor HTML exponen un modelo de objeto que
se relacionan muy estrechamente con los elementos HTML que representan.
x Controles de servidor Web Controles con más funciones incorporadas que los
controles de servidor HTML. Los controles de servidor Web incluyen no sólo controles
de formulario como botones y cuadros de texto, sino también controles con fines
especiales como un calendario, menús y un control de vista de árbol. Los controles de
servidor Web son más abstractos que los controles de servidor HTML pues su modelo
de objetos no refleja necesariamente la sintaxis HTML.
x Controles de validación Controles que incorporan lógica para permitirle comprobar

los controles de entrada de los usuarios como el control TextBox. Los controles de
validación le permiten comprobar un campo necesario, su adecuación a un valor o un
modelo de caracteres concreto, comprobar que un valor se encuentra en un intervalo
predefinido, etc.
x Controles de usuario Controles que crea como páginas Web ASP.NET. Se pueden
incrustar controles de usuario de ASP.NET en otras páginas Web ASP.NET; esta es una
forma sencilla de crear barras de herramientas y otros elementos reutilizables.
Controles de Servidor HTML

Los controles de servidor HTML son elementos HTML (o elementos en otro marcado
compatible, como XHTML) que contienen atributos que los convierten en programables en
código del servidor. De forma predeterminada, los elementos HTML en una página Web
ASP.NET no están disponibles para el servidor. En su lugar, se tratan como texto opaco y se
pasan al explorador. Sin embargo, cuando se convierten en controles de servidor HTML, los
elementos HTML quedan expuestos como elementos programables en el servidor.
'( &
, $
%
El modelo de objetos de los controles de servidor HTML se relaciona estrechamente con el de

los elementos correspondientes. Por ejemplo, los atributos HTML se exponen en controles de
servidor HTML como propiedades.
Cualquier elemento HTML de una página se puede convertir en control de servidor HTML
agregando el atributo runat="server". Durante el análisis, el marco de trabajo de la página
ASP.NET crea instancias de todos los elementos que contienen el atributo runat="server". Si
desea hacer referencia al control como un miembro dentro del código, también deberá
asignarle un atributo id al control.
El marco de trabajo de la página proporciona controles de servidor HTML predefinidos para los
elementos HTML que se utilizan con más frecuencia dinámicamente en una página: el
elemento form, los elementos input (cuadro de texto, casilla, botón Enviar), el elemento
select, etc. Estos controles de servidor HTML predefinidos comparten las propiedades básicas
del control genérico y, además, cada control normalmente proporciona su propio conjunto de
propiedades y su propio evento.
Los controles de servidor HTML ofrecen las funciones siguientes:
x Un modelo de objetos que pueda volver a programar en el servidor con las técnicas
habituales orientadas a objetos. Los controles de servidor exponen propiedades que
permiten manipular los atributos de marcado del control mediante programación en el
código del servidor.
x Un conjunto de eventos para los que pueda escribir controles de eventos de la misma
forma que lo haría en un formulario basado en cliente, con la excepción de que un
evento se controla en código del servidor.
x La capacidad de controlar eventos en un script de cliente.
x Mantenimiento automático del estado del control. Cuando la página realiza una acción
de ida y vuelta al servidor, los valores que el usuario escriba en los controles de
servidor HTML se mantendrán automáticamente y la página se devuelve al explorador.
x Interacción con los controles de validación ASP.NET para poder comprobar que un
usuario ha escrito la información adecuada en un control.
x Enlace de datos a una o varias de las propiedades del control.
x Compatibilidad con estilos si la página Web ASP.NET se muestra en un explorador que

admite hojas de estilos en cascada.
x Paso a través de atributos personalizados. Pueden agregarse los atributos que se

necesiten a un control de servidor HTML: el marco de trabajo de páginas los
representará sin ningún cambio en la funcionalidad. Esto permite agregar atributos
específicos del explorador a los controles.
'( &
, $
%
Controles de Servidor Web

Los controles de servidor Web son un segundo conjunto de controles diseñado con otro
enfoque. No se asignan necesariamente uno a uno a controles de servidor HTML. En lugar de
ello, se definen como controles abstractos, en los que el marcado real representado por el
control puede ser muy diferente al modelo con respecto al que se han programado. Por
ejemplo, un control RadioButtonList de servidor Web podría representarse en una tabla o
como un texto en línea con otro marcado.
Los controles de servidor Web incluyen controles de formulario tradicionales como botones y
cuadros de texto, además de controles complejos, como, por ejemplo, las tablas. También
incluyen controles que proporcionan funcionalidad de formulario de uso frecuente, como la
presentación de datos en cuadrícula, la elección de fechas, la visualización de menús, etc.
Los controles de servidor Web ofrecen todas las funciones descritas anteriormente para los
controles de servidor HTML (excepto la asignación uno a uno a elementos) y estas funciones
adicionales:
x Un modelo de objetos enriquecido que proporciona capacidades de programación de

tipo seguro.
x Detección automática del explorador. Los controles pueden detectar las funciones del
explorador y representar el marcado adecuado.
x Para algunos controles, la capacidad para definir su propio diseño para el control
utilizando Templates.
x Para algunos controles, la capacidad de especificar si un evento del control provoca un

envío inmediato al servidor o, en su lugar, se almacena en caché y se activa cuando se
envía la página.
x Compatibilidad para temas, lo que le permite definir un aspecto uniforme para los
controles en todo el sitio.
x Capacidad para pasar eventos de un control anidado (como un botón en una tabla) al
control contenedor.
Los controles utilizan una sintaxis como la que se muestra a continuación:
<asp:button atributos runat="server" id="Button1" />

En este caso los atributos no son los de los elementos HTML. En lugar de ello, son propiedades
del control Web.
Cuando se ejecuta la página Web ASP.NET, el control de servidor Web se representa en la

página utilizando el marcado apropiado, que con frecuencia no sólo depende del tipo de
explorador sino también de la configuración que haya realizado para el control. Por ejemplo,
un control TextBox podría representarse como una etiqueta input o una etiqueta textarea
dependiendo de sus propiedades.
'( &
, $
%
Ciclo de Vida de una página web y sus Controles

Cuando se ejecuta una página ASP.NET, ésta recorre un ciclo de vida en el que realiza una serie
de pasos de procesamiento. Entre ellos se incluyen la inicialización, la creación de instancias de
controles, la restauración y el mantenimiento del estado, la ejecución del código del
controlador de eventos y la representación. Es importante que comprenda el ciclo de vida de
la página para que pueda escribir código en la fase del ciclo de vida apropiada y conseguir el
efecto deseado. Además, si crea controles personalizados, debe estar familiarizado con el ciclo
de vida de la página para poder inicializarlos, asignar datos de estado de vista a las
propiedades de los controles y ejecutar el código de comportamiento de éstos correctamente.
(El ciclo de vida de un control está basado en el ciclo de vida de la página, pero ésta produce
en un control más eventos de los que están disponibles para la página ASP.NET por sí sola.)
Fase Descripción
Solicitud de página La solicitud de página se produce antes de que comience el ciclo de
vida de la página. Cuando un usuario solicita la página, ASP.NET
determina si ésta se debe analizar y compilar (a fin de que comience
el ciclo de vida de la página) o si se puede enviar una versión en
caché de la página como respuesta sin ejecutar la página.
Inicio En el paso de inicio, se establecen las propiedades de la página, como
Request y Response. En esta fase, la página también determina si la
solicitud es una devolución de datos o una nueva solicitud, y establece
la propiedad IsPostBack. Además, durante esta fase se establece la
propiedad UICulture de la página.
Inicialización de Durante la inicialización de la página, los controles incluidos en ella
página están disponibles y se establece la propiedad UniqueID de cada uno
de ellos. Además, se aplican los temas correspondientes a la página.
Si la solicitud actual es una devolución de datos, los datos de
devolución aún no se han cargado y los valores de las propiedades del
control no se han restaurado a los valores del estado de vista.
Carga Durante la carga, si la solicitud actual es una devolución de datos, las
propiedades del control se cargan con información recuperada del
estado de vista y del estado del control.
Validación Durante la validación, se llama al método Validate de todos los
controles de validación, que establece la propiedad IsValid de cada
uno de los controles de validación y de la página.
Control de eventos Si la solicitud es una devolución de datos, se llama a los controladores
de devolución de de eventos.
datos
Representación Antes de representar los datos, se guarda el estado de vista de la
página y de todos los controles. Durante la fase de representación, la
página llama al método Render para cada control, proporcionando un
escritor de texto que escribe su resultado en OutputStream de la
propiedad Response de la página.
Descarga Se llama a la descarga cuando la página se ha representado
completamente, se ha enviado al cliente y está lista para ser
descartada. Llegado este momento, se descargan las propiedades de
la página, como Response y Request, y se llevan a cabo las
operaciones de limpieza correspondientes.
ViewState
Una de las diferencias más importantes que había hasta ahora entre la programación de un
programa para PC y la programación de una Web, es que en las aplicaciones Web el cliente
realiza una petición (de una página), el servidor ejecuta el código asociado a la petición y le
devuelve un resultado al cliente. A partir de ese momento, el servidor no tiene consciencia de
cómo está actuando el cliente.
'( &
, $
%
Para explicarlo mejor, veamos un sencillo ejemplo:
paginaEjemplo.aspx
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
paginaEjemplo.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
En este ejemplo, cuando el cliente hace clic en el Button1, el servidor devolverá una página en
la que en Label1 estará el texto que haya escrito el cliente en TextBox1... pero sucede algo
más: en TextBox1 sigue estando el texto que ha escrito el cliente.
Esto, que parece tan normal y que en los programas para PC es tan típico, esconde una
complejidad muy grande. Pensémoslo bien... el cliente envío los resultados de un formulario
mediante el método POST, el servidor los procesa y devuelve un resultado en forma de HTML,
con los controles en el mismo estado que cuando el cliente hizo el envío, en este caso con el
TextBox1 rellenado...
Ese es el concepto de ViewState: el mantener el estado de los controles de una misma página
entre una ida y venida al servidor.
Pero es que ViewState no se queda sólo ahí. Rellenemos, por ejemplo, tanto el TextBox1 como
el TextBox2, y comprobamos que aunque al TextBox2 no se le hace alusión alguna en nuestro
código, también mantiene el mismo estado...
Pero, ¿dónde está el truco? Como ya sabrás, lo único que no se puede hacer en programación
es magia. Por ejemplo, échale un vistazo al código fuente de esta página (o cualquier otra
página ASP.NET), y verás que hay un campo hidden llamado ViewState con un valor
incomprensible y generalmente muy largo (depende de la página, de la cantidad de controles
de los que haya que controlar el estado, etc.).
En ese valor tan extraño está almacenado el estado de todos los controles de la página (como
imaginarás es una codificación de los valores legibles). Pero el ViewState no sólo es eso, el
ViewState permite otras muchísimas cosas, como por ejemplo, averiguar si es la primera vez
que ejecutamos una página o la hemos llamado antes ya.
Desde código se puede acceder al ViewState y guardar las variables que quieras en él, incluso
'( &
, $
%
de tipos de datos que te hayas inventado tú (siempre que sean Serializables).

!
Por ejemplo, puedes guardar una variable en ViewState...
ViewState["ejemplo"] = 21;
... y acceder a su valor cuando has hecho clic en tres botones y has hecho un postback con 2
listas desplegables
int i = (int)ViewState["ejemplo"];
Sólo tienes que recordar dos cosas básicas:

1. Hay que parsear el dato al tipo de datos que corresponde cuando leemos el valor del
ViewState (en este caso al tipo integer, pero puede tratarse de cualquier tipo de datos)
2. El ViewState es una variable del ámbito de petición una misma página. Es decir, tú puedes
trabajar con el ViewState siempre que estés en la misma página y siempre que lo único que
hagas en ella sean postBack. Por ejemplo, el ViewState se resetearía a su valor inicial si
estando en una página presionamos el "Go" de nuestra barra de direcciones.
Si lo queremos pensar de otra forma, el ViewState es lo mismo que una variable de Session en
el ámbito de una página
Eventos de Página
Evento de página Uso típico
PreInit Utilice este evento para lo siguiente:
x Examine la propiedad IsPostBack para determinar si es la
primera vez que se procesa la página.
x Crear o volver a crear controles dinámicos.
x Establecer una página maestra de forma dinámica.
x Establecer la propiedad Theme de forma dinámica.
x Leer o establecer los valores de las propiedades de perfil.
Init Se provoca cuanto todos los controles se han inicializado y se ha
aplicado la configuración de máscara. Utilice este evento para leer o
inicializar las propiedades del control.
InitComplete Lo provoca el objeto Page. Utilice este evento para tareas de
procesamiento que requieran que todo el proceso de inicialización
haya finalizado.
PreLoad Utilice este evento si necesita realizar tareas de procesamiento en su
página o control antes de que se provoque el evento Load.
Después de que Page provoca este evento, carga su estado de vista y
el de todos los controles y, después, procesa todos los datos de
devolución incluidos con la instancia de Request.
Load Page llama al método del evento OnLoad en Page, realiza la misma
operación de forma recursiva para cada control secundario, los cuales
realizan la misma operación para cada uno de sus controles
secundarios hasta que se cargan la página y todos los controles.
Utilice el método del evento OnLoad para establecer las propiedades
'( &
, $
%
de los controles y establecer las conexiones a bases de datos.

Eventos de control Utilice estos eventos para controlar eventos de control específicos, "
como un evento Click del control Button o un evento TextChanged del
control TextBox.
LoadComplete Utilice este evento para las tareas que requieran que se carguen todos
los demás controles en la página.
PreRender Antes de que se produzca este evento:
x El objeto Page llama a EnsureChildControls para cada control y
para la página.
x Cada control enlazado a datos cuya propiedad DataSourceID esté
establecida llama a su método DataBind. Para obtener más
información, vea Eventos de enlace de datos de controles
enlazados a datos más adelante.
El evento PreRender se produce para cada control de la página.
Utilice el evento para realizar cambios finales en el contenido de la
página o en sus controles.
SaveStateComplete Antes de que se produzca este evento, ViewState se ha guardado para
la página y para todos los controles. Se omitirán todos los cambios
que se realicen en este momento en la página o en los controles.
Utilice este evento para realizar tareas que requieran guardar el
estado de vista, pero que no efectúen cambios en los controles.
Render Éste no es un evento; en esta fase del procesamiento, el objeto Page
llama a este método en cada control. Todos los controles de servidor
Web de ASP.NET tienen un método Render que escribe el marcado
del control que se envía al explorador.
Si crea un control personalizado, normalmente reemplazará este
método para generar el marcado del control. Sin embargo, si el control
personalizado sólo incorpora controles de servidor Web de ASP.NET
estándar y ningún marcado personalizado, no necesita reemplazar el
método Render.
Un control de usuario (un archivo .ascx) incorpora automáticamente la
representación, por lo que no necesita representar explícitamente el
control en el código.
Unload Este evento se produce para cada control y después para la página. En
los controles, utilice este evento para realizar tareas finales de
limpieza en controles específicos, como cerrar las conexiones a bases
de datos específicas del control.
Para la propia página, utilice este evento para hacer un último trabajo
de limpieza, como cerrar archivos abiertos y conexiones a bases de
datos, finalizar el registro u otras tareas específicas de la solicitud.
Manejadores de Eventos
La página Web y sus controles de servidor tienen un evento predeterminado. Por ejemplo,el
evento por defecto de las páginas web es el de Carga, y el evento por defecto del botón es el
evento Click. En Microsoft Visual Studio 2008, entorno en tiempo de diseño, puede agregar un
método al controlador de eventos para el evento predeterminado simplemente haciendo
doble clic en la superficie del objeto. Un controlador de eventos se crea en el archivo de código
subyacente. Por ejemplo, si hace doble clic en la página web, un evento Page_Load método se
crea en la página de código subyacente, y puede agregar su código personalizado en este
método.
'( &
, $
%
¿Controles de Servidor Web o Controles de Servidor HTML?

Las siguientes secciones cubren HTML y controles de servidor Web. Con frecuencia, la cuestión )
se plantea: ¿qué debo utilizar? Aquí hay algunas directrices que pueden ayudarle a elegir el
tipo de control adecuado.
Considerar la utilización de los controles de servidor HTML cuando tengan lugar cualquiera de
las condiciones siguientes:
Va a migrar las páginas ASP a ASP.NET.
El control necesita javascript del lado del cliente para sus eventos
Creando Controles de Servidor HTML
Para agregar un control de servidor HTML
x Escriba la sintaxis HTML del elemento que desea utilizar como un control. Incluya la
sintaxis HTML normal para el elemento y, además, haga lo siguiente:
x Establezca el atributo (propiedad) ID del control en un valor único para esa

página, a menos que el control forme parte de un control complejo y se
repetirá (como en los controles Repeater, DataList y GridView).
x Establezca el atributo runat="server" para convertir el elemento en control.
El ejemplo siguiente muestra cómo declarar unos controles HtmlInputText, HtmlInputText,

HtmlInputButton y HtmlAnchor:
<input id="Name" type="text" size="40" runat="server" />
'( &
, $
%
<input type="submit" id="Enter" value="Enter" runat="server" />

*
Click <a id="Anchor1" runat="server" href="more.html">More </a> to see the next page.
Ejemplo
<html>
<head>
<title>Customer Page</title>
</head>
<body>
<form name "Form1" method "post" action "update.asp" id "Form1">
<input type "text" name "CustomerName" id "CustomerName">
<input type "submit" name "SubmitButton" value "Submit" id "SubmitButton">
</form>
</body>
</html>
<html>
<head>
<title>Customer Page</title>
</head>
<body>
<form name "Form1" method "post" id "Form1" runat "server">
<input type "text" name "CustomerName" id "CustomerName" runat "server">
<input type "submit" name "SubmitButton" value "Submit" id "SubmitButton"
runat "server">
</form>
</body>
</html>
En esencia, se observa que se han usado los típicos controles HTML pero añadiéndoles
runat="server"
También se puede observar que el atributo de acción fue retirado de la etiqueta del
formulario, porque es la costumbre de enviar los datos de vuelta a la misma página.
Los controles HTML también los podemos crear desde la barra de herramientas
'( &
, $
%
Propiedad Descripción
Attributes Una lista de todos los pares de atributos nombre / valor
indicados en la etiqueta del control de servidor. Esto es
accesible a través de código.
Disabled Desabilita el control
Id Identificador para programación
Style Propiedades CSS aplicadas al control
TagName Nombre del elemento
'( &
, $
%
Visible Oculta o hace visible al control

<input type "button" id "myButton" runat "server" style "position: absolute; top: 50px;
left: 100px;" value "Click Me" visible "true" />
<input id "Button1" name "myButton" type "button" style "position: absolute; top: 50px;
left: 100px;" value "Click Me" />
Además de establecer las propiedades de los controles desde código, también las podemos
establecer desde la ventana de diseño
Otra posibilidad sería establecer las propiedades programáticamente:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Default : System.Web.UI.Page

{
protected void Page Load(object sender, EventArgs e)
{
myButton.Visible true;
myButton.Style.Add("position", "absolute");
myButton.Style.Add("left", "75px");
myButton.Style.Add("top", "150px");
}
}
'( &
, $
%
protected void myButton ServerClick(object sender,System.EventArgs e)

{
DIV1.InnerText Text1.Value;
}
Desventajas de los Controles Web HTML

Hay un par de inconvenientes a la utilización de controles de servidor HTML. Una desventaja es
que los controles HTML no tiene un modelo de programación que sea compatible con Win
Forma de programación. Por ejemplo, en WinForm programación, los datos que se teclean en
el cuadro de texto está disponible a través de la propiedad Text, mientras que el control de
servidor HTML del cuadro de texto se dispone de datos a través de la propiedad Value.
Otra desventaja de los controles de servidor HTML es que un control de servidor HTML se
mapea directamente a una sola etiqueta HTML.
Controles de Servidor WEB

Los controles de servidor Web ASP.NET son objetos de páginas Web ASP.NET que se ejecutan
cuando se solicita la página y representan el formato en un explorador. Muchos controles de
servidor Web son similares a elementos HTML conocidos, como botones y cuadros de texto.
Sin embargo, otros controles abarcan un comportamiento complejo, por ejemplo un control
de calendario o los controles que administran conexiones de datos.
Los temas de esta sección describen qué son los controles de servidor Web ASP.NET y cómo
trabajar con ellos. La sección también contiene información sobre todos los controles de
servidor Web ASP.NET integrados y sobre cómo puede crear sus propios controles.
'( &
, $
%
<asp:textbox attributes runat="server" />

Para añadir controles de servidor web a una página web podemos hacerlo de las siguientes
formas:
1. En vista Diseño
2. Con código
3. De forma dinámica vía código
protected void Page_Init(object sender,System.EventArgs e)

{
TextBox c = new TextBox();
c.ID = "txtUserName";
c.Visible = true;
form1.Controls.Add(c);
}
Propiedades de los Controles de Servidor Web
Propiedades Descripción
Tecla de acceso para añadir a [alt]
AccessKey
Attributes Atributos
BackColor Color de Fondo
BorderColor Color del borde
BorderWidth Ancho del borde
BorderStyle Estilo del Borde
CssClass Clase CSS
Style Propiedades de Css
'( &
, $
%
Enabled Activar o desactivar el control

EnableTheming Permitir Temas para el control
EnableViewState Activar View State
Font Fuente
ForeColor Color de la fuente
Height Altura
SkinID Skin a aplicar al control
TabIndex Posición en el Tab order. Si no tiene establecido valor es un 0
ToolTip Texto de ayuda
Width Anchura
<asp:Button ID "btnWebButton" runat "server" Style "position: absolute; top: 50px;

left: 300px;" Text "WebButton" />
<input id "Submit1" type "submit" name "btnWebButton" value "WebButton" style "position:
absolute;
top: 50px; left: 300px;" />
btnWebButton.Visible true;
btnWebButton.Style.Add("position", "absolute");
btnWebButton.Style.Add("top", "200px");
btnWebButton.Style.Add("left", "350px");
PostBack
En ASP.NET los WebForms están diseñados para enviar información hacia al servidor
para su procesamiento. Esa operación es denominada POSTBACK. El PostBack tiene
lugar cuando el usuario hace click en un control Button o cuando se establece la
propiedad AutoPostBack a true en un control de servidor y se produce algún cambio
en ese control.
Trabajar con nombres de los contenedores y los controles hijos

Una página Web se compone de una jerarquía de los controles. la página web tiene una
colección de controles, cada uno de los controles en esa colección tiene su propia colección de
controles, y así sucesivamente.
'( &
, $
%
Dentro de un contenedor de controles, cada control debe ser identificable inequivocamente.

Normalmente, esto se logra mediante la asignación de un valor único para el control de
servidor en la propiedad ID.
Control c = FindControl("lblMessage");
Control c = GridView1.FindControl("ctl08");
TEST
1. To add an HTML Web server control to the Web page, you must drag an HTML element
from the ToolBox to the Web page and then perform which of the following tasks? (Choose
one.)
A. Right-click the HTML element and click Run=Server.
B. Double-click the HTML element to convert it to an HTML server control.
C. Right-click the HTML element and click Run As Server Control.
D. Click the HTML element and set ServerControl to true in the Properties window.
2. You noticed that clicking a CheckBox does not cause a PostBack; you need the CheckBox to
PostBack so you can update the Web page based on server-side code. How do you make the
CheckBox cause a PostBack? (Choose one.)
A. Set the AutoPostBack property to true.
B. Add JavaScript code to call the ForcePostBack method.
C. Set the PostBackAll property of the Web page to true.
D. Add server-side code to listen for the click event from the client.
3. After writing code to create a new instance of a TextBox server control, what do you need to
do to get the TextBox to display on the Web page? (Choose one.)
A. Call the ShowControl method on the TextBox.
B. Set the VisibleControl to true on the TextBox.
C. Add the TextBox instance to the form1.Controls collection.
D. Execute the AddControl method on the Web page.

%

MC
M CTS::
Apliicaciones Webb
on .NE
co . ET 3.5
5

%

%

Label
Representa un control de etiqueta que muestra texto en una página Web. Utilice el control
Label para mostrar texto en una ubicación establecida de la página. A diferencia del texto
estático, se puede personalizar el texto que se muestra mediante la propiedad Text.
También es posible utilizar los controles Literal y PlaceHolder para mostrar texto en la página
de formularios Web Forms. Sin embargo, al contrario de lo que ocurre con el control Label,
estos controles no representan etiquetas adicionales.
<%@ Page Language "C#" AutoEventWireup "True" %>
<!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd">
<html >
<head>
<title>Label Example</title>
<script language "C#" runat "server">
void Button Click(Object Sender, EventArgs e)

{
Label1.Text Server.HtmlEncode(Text1.Text);
}
</script>
</head>
<body>
<form id "Form1" runat "server">
<h3>Label Example</h3>
<asp:Label id "Label1"
Text "Label Control"
runat "server"/>
<p>
<asp:TextBox id "Text1"
Text "Copy this text to the label"
Width "200px"
runat "server" />
<asp:Button id "Button1"
Text "Copy"
OnClick "Button Click"
runat "server"/>
</p>
</form>
</body>
</html>
TextBox
Muestra un control de cuadro de texto para la entrada de datos del usuario. El control de
servidor TextBox es un control de entrada que permite al usuario escribir texto. De manera

%
predeterminada, se establece la propiedad TextMode del control en TextBoxMode.SingleLine,

que muestra un cuadro de texto de una sola línea. No obstante, también puede usar el control
TextBox para mostrar un cuadro de texto multilínea o un cuadro de texto que enmascara los
datos proporcionados por el usuario al cambiar el valor de la propiedad TextMode a
TextBoxMode.MultiLine o TextBoxMode.Password, respectivamente. El texto mostrado en el
control TextBox se especifica o determina con la propiedad Text.
El control TextBox contiene varias propiedades que permiten controlar la apariencia del
control. El ancho de presentación del cuadro de texto, expresado en caracteres, viene
determinado por la propiedad Columns. Si el control TextBox es un cuadro de texto multilínea,
el número de filas que muestra lo determina la propiedad Rows. Para mostrar texto que se
ajusta dentro del control TextBox, establezca la propiedad Wrap en true.
También se puede especificar cómo se incluyen los datos en el control TextBox estableciendo
algunas propiedades. Para impedir que se modifique el texto mostrado en el control,
establezca la propiedad ReadOnly en true. Para limitar los datos proporcionados por el usuario
a un número especificado de caracteres, establezca la propiedad MaxLength.
Button
Muestra un control de botón de comando en la página Web. Utilice el control Button para
crear un botón de comando en la página Web. Se puede crear un botón Enviar o un botón
Comando.
De manera predeterminada, un control Button es un botón Enviar. Un botón Enviar no tiene

asociado un nombre de comando (especificado por la propiedad CommandName) y
simplemente devuelve la página Web al servidor. Se puede proporcionar un controlador de
eventos para el evento Click con el fin de controlar mediante programación las acciones
realizadas cuando se hace clic en el botón Enviar.
Un botón Comando puede tener asociado un nombre de comando, como Sort, mediante el
establecimiento de la propiedad CommandName. Esto permite crear varios controles Button
en una página Web y determinar mediante programación en qué control Button se hace clic.
También se puede usar la propiedad CommandArgument con un botón de comando para
facilitar información adicional sobre el comando que se va a ejecutar, como Ascending. Se
puede proporcionar un controlador de eventos para el evento Command con el fin de
controlar mediante programación las acciones realizadas cuando se hace clic en el botón
Comando.
De manera predeterminada, se realiza la validación de la página cuando se hace clic en un

control Button. La validación de la página determina si todos los controles de entrada
asociados a un control de validación en la página cumplen las reglas de validación
especificadas por el control de validación. Para evitar que se realice la validación de la página,
establezca la propiedad CausesValidation en false.


%
<html >
<head>
<title>Button Example</title>
void SubmitBtn Click(Object sender, EventArgs e)

{
Message.Text "Hello World!!";
}
</script>
</head>
<body>
<form id "form1" runat "server">
<h3>Button Example</h3>
Click on the submit button.<br /><br />
<asp:Button id "Button1"
Text "Submit"
OnClick "SubmitBtn Click"
runat "server"/>
<br />
<asp:label id "Message" runat "server"/>
</form>
</body>
</html>
CheckBox
Muestra una casilla de verificación que permite al usuario seleccionar una condición
true o false. Utilice el control CheckBox para permitir que el usuario seleccione un
estado true o false.
Si piensa utilizar varios controles CheckBox, el control CheckBoxList es un control

alternativo que aporta funciones prácticas de enlace de datos. Sin embargo, los controles
CheckBox individuales permiten un mayor control sobre el diseño.
RadioButton
Representa un control de botón de opción. El control de servidor RadioButton permite
intercalar botones de opción en un grupo con otro contenido dentro de la página. Los botones
se agrupan de forma lógica si todos ellos comparten la misma propiedad GroupName.
<html >
<head>
<title>RadioButton Example</title>
void SubmitBtn Click(Object Sender, EventArgs e) {
if (Radio1.Checked) {
Label1.Text "You selected " + Radio1.Text;
}
else if (Radio2.Checked) {
}
else if (Radio3.Checked) {
}

%
</script>
</head>
<body>
<h3>RadioButton Example</h3>
<h4>Select the type of installation you want to perform:</h4>
<asp:RadioButton id "Radio1" Text "Typical" Checked "True"

GroupName "RadioGroup1" runat "server" /><br />
This option installs the features most typically used. <i>Requires 1.2 MB disk
space.</i><br />
<asp:RadioButton id "Radio2" Text "Compact" GroupName "RadioGroup1"

runat "server"/><br />
This option installs the minimum files required to run the product.
<i>Requires 350 KB disk space.</i><br />
<asp:RadioButton id "Radio3" runat "server" Text "Full" GroupName "RadioGroup1"

/><br />
This option installs all features for the product. <i>Requires 4.3 MB disk
space.</i><br />
<asp:button ID "Button1" text "Submit" OnClick "SubmitBtn Click"

runat "server"/>
<asp:Label id "Label1" font bold "true" runat "server" />
</form>
</body>
</html>
1. If you want multiple RadioButton controls to be mutually exclusive, what property must you set? (Choose one.)
A. Exclusive
B. MutuallyExclusive
C. Grouped
D. GroupName
2. You are creating a Web page that has several related buttons, such as fast forward, reverse, play, stop, and pause.
You want to create a single event handler that processes the PostBack from these Button controls. Other than the
normal Submit button, what type of button can you create as a solution? (Choose one.)
A. OneToMany
B. Command
C. Reset
D. ManyToOne
3. When in Design view, what is the simplest way to create an event handler for the default event of a server control?
(Choose one.)
A. Open the code behind page and write the code.
B. Right click the control and select Create Handler.
C. Drag an event handler from the ToolBox to the desired control.

%
D. Double click the control.

Ejemplo 1
<%@ Page Language "C#" AutoEventWireup "true" CodeFile "Default.aspx.cs"

Inherits " Default" %>

<html xmlns "http://www.w3.org/1999/xhtml" >

<head runat "server">
<title>Untitled Page</title>
</head>
<body>
<form id "form1" runat "server" >
<div>
<div>
<asp:Label ID "Label1" runat "server" Style "z index: 100; left: 95px;
position: absolute;
top: 30px" Text "MyLabel" Width "65px"></asp:Label>
<asp:TextBox ID "TextBox1" runat "server" Style "z index: 101; left: 95px;
position: absolute;
top: 55px"></asp:TextBox>
<asp:Button ID "Button1" runat "server" OnClick "Button1 Click" Style "z
index: 102;
left: 95px; position: absolute; top: 85px" Text "MyButton" />
<asp:CheckBox ID "CheckBox1" runat "server"
OnCheckedChanged "CheckBox1 CheckedChanged"
Style "z index: 103; left: 95px; position: absolute; top: 115px"
Text "MyCheckBox" />
<asp:RadioButton ID "RadioButton1" runat "server"
OnCheckedChanged "RadioChanged"
Text "MyRadioButton1" />
</div>
</div>
</form>
</body>
</html>
using System;

%
using System.Data;
using System.Configuration;
using System.Web; !
using System.Web.Security;
public partial class Default : System.Web.UI.Page

{
protected void Page Load(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("Page Load");
}
protected void Page Init(object sender, EventArgs e)

{
System.Diagnostics.Debug.WriteLine("Page Init");
}
protected void Page PreRender(object sender, EventArgs e)

{
System.Diagnostics.Debug.WriteLine("Page PreRender");
}
protected void Page PreInit(object sender, EventArgs e)

{
System.Diagnostics.Debug.WriteLine("Page PreInit");
}
protected void Page Unload(object sender, EventArgs e)

{
System.Diagnostics.Debug.WriteLine("Page Unload");
}
protected void Button1 Click(object sender, EventArgs e)
{
Label1.Text Server.HtmlEncode(TextBox1.Text);
}
protected void CheckBox1 CheckedChanged(object sender, EventArgs e)
{
if (CheckBox1.Checked)
{
CheckBox1.Text DateTime.Now.ToString();
}
}
protected void RadioChanged(object sender, EventArgs e)

{
RadioButton r (RadioButton)sender;
TextBox1.Text r.Text;
}
}

%
Ejemplo 2
"
<%@ Page Language="C#"%>
<html>
<head>
<link rel "stylesheet"href "intro.css">
</head>
<body>
<center>
<form action "intro2 cs.aspx" method "post">
<h3> Name: <input id "Name" type text>
Category: <select id "Category" size 1>

<option>psychology</option>
<option>business</option>
<option>popular comp</option>
</select>
</h3>
<input type submit value "Lookup">
<p>
<% for (int i 0; i <8; i++) { %>

<font size "<% i%>"> Welcome to ASP.NET </font> <br>
<% }%>
</form>
</center>
</body>
</html>

%
Ejemplo 3
)
<%@ Page Language="C#" %>
<html>
<head>
</head>
<body>
<center>
<form action "intro3 cs.aspx">
<h3> Name: <input name "Name" type text

value "<% HttpUtility.HtmlEncode(Request.QueryString["Name"])%>">
Category: <select name "Category" size 1>
<%
String [] values { "psychology", "business",
"popular comp" };
for (int i 0; i<values.Length; i++) {

%>
<option <% if (Request.QueryString["Category"]

values[i]) { Response.Write("selected"); } %>>
<% values[i]%>
</option>
<% } %>
</select>
</h3>
<input type submit name "Lookup" value "Lookup">
<p>
<% if (Request.QueryString["Lookup"] ! null) { %>
Hi <% HttpUtility.HtmlEncode(Request.QueryString["Name"]) %>, you

selected: <% HttpUtility.HtmlEncode(Request.QueryString["Category"]) %>
<% } %>
</form>
</center>
</body>
</html>
Ejemplo 4

%
<html>
<head> *
</head>
<body>
<center>
<form action "intro4 cs.aspx" method "post" runat server>
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="Category" runat=server>

<asp:listitem>psychology</asp:listitem>
<asp:listitem>business</asp:listitem>
<asp:listitem>popular comp</asp:listitem>
</asp:dropdownlist>
</h3>
<asp:button text="Lookup" runat="server"/>
</form>
</center>
</body>
</html>
Ejemplo 5
<html>
<head>
</head>
<script language "C#" runat server>
void SubmitBtn Click(Object sender, EventArgs e) {

Message.Text "Hi " + HttpUtility.HtmlEncode(Name.Text) + ", you selected: "
+ Category.SelectedItem;
}
</script>
<body>
<center>
<form action "intro6 cs.aspx" method "post" runat "server">
<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1

runat="server"/>
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="Category" runat=server>

<asp:listitem>psychology</asp:listitem>
<asp:listitem>business</asp:listitem>
<asp:listitem>popular comp</asp:listitem>
</asp:dropdownlist>
</h3>
<asp:button text="Lookup" OnClick="SubmitBtn Click" runat="server"/>
<p>
<asp:label id="Message" runat="server"/>
</form>
</center>

%
</body>
</html>
Ejemplo 6
<html>
void Page Load(Object Src, EventArgs E) {

Message.Text "You last accessed this page at: " + DateTime.Now;
}
</script>
<body>
<h3><font face "Verdana">Manipulating Server Controls</font></h3>
This sample demonstrates how to manipulate the <asp:label> server control

within
the Page Load event to output the current time.
<p>
<hr>
<asp:label id="Message" font-size="24" font-bold="true" runat=server/>
</body>
</html>
Ejemplo 7
<html>
void EnterBtn Click(Object Src, EventArgs E) {

Message.Text "Hi " + Name.Text + ", welcome to ASP.NET!";
}
</script>
<body>
<h3><font face "Verdana">Handling Control Action Events</font></h3>
<p>
This sample demonstrates how to access a <asp:textbox> server control

within the "Click"
event of a <asp:button>, and use its content to modify the text of a
<asp:label>.
<p>
<hr>
<form action "controls3.aspx" runat server>
<font face "Verdana">
Please enter your name: <asp:textbox id="Name" runat=server/>

<asp:button text="Enter" Onclick="EnterBtn Click"
runat=server/>
<p>
<asp:label id="Message" runat=server/>

%
</font>
</form>
</body>
</html>
Ejemplo 8
<html>
void AddBtn Click(Object Src, EventArgs E) {
if (AvailableFonts.SelectedIndex ! 1) {
InstalledFonts.Items.Add(new
ListItem(AvailableFonts.SelectedItem.Value));
AvailableFonts.Items.Remove(AvailableFonts.SelectedItem.Value);
}
}
void AddAllBtn Click(Object Src, EventArgs E) {
while (AvailableFonts.Items.Count ! 0) {
InstalledFonts.Items.Add(new ListItem(AvailableFonts.Items[0].Value));
AvailableFonts.Items.Remove(AvailableFonts.Items[0].Value);
}
}
void RemoveBtn Click(Object Src, EventArgs E) {
if (InstalledFonts.SelectedIndex ! 1) {
AvailableFonts.Items.Add(new
ListItem(InstalledFonts.SelectedItem.Value));
InstalledFonts.Items.Remove(InstalledFonts.SelectedItem.Value);
}
}
void RemoveAllBtn Click(Object Src, EventArgs E) {
while (InstalledFonts.Items.Count ! 0) {
AvailableFonts.Items.Add(new ListItem(InstalledFonts.Items[0].Value));
InstalledFonts.Items.Remove(InstalledFonts.Items[0].Value);
}
}
</script>
<body>
<h3><font face "Verdana">Handling Multiple Control Action Events</font></h3>
<p>
This sample demonstrates how to handle multiple control action events raised from
different <asp:button> controls.
<p>
<hr>
<table>
<tr>
<td>
Available Fonts
</td>
<td>

%
<! Filler >

</td>
<td>
Installed Fonts
</td>
</tr>
<tr>
<td>
<asp:listbox id="AvailableFonts" width="100px" runat=server>
<asp:listitem>Roman</asp:listitem>
<asp:listitem>Arial Black</asp:listitem>
<asp:listitem>Garamond</asp:listitem>
<asp:listitem>Somona</asp:listitem>
<asp:listitem>Symbol</asp:listitem>
</asp:listbox>
</td>
<td>
<! Filler >
</td>
<td>
<asp:listbox id="InstalledFonts" width="100px" runat=server>
<asp:listitem>Times</asp:listitem>
<asp:listitem>Helvetica</asp:listitem>
<asp:listitem>Arial</asp:listitem>
</asp:listbox>
</td>
</tr>
<tr>
<td>
<! Filler >
</td>
<td>
<asp:button text="<<" OnClick="RemoveAllBtn Click" runat=server/>
<asp:button text="<" OnClick="RemoveBtn Click" runat=server/>
<asp:button text=">" OnClick="AddBtn Click" runat=server/>
<asp:button text=">>" OnClick="AddAllBtn Click" runat=server/>
</td>
<td>
<! Filler >
</td>
</tr>
</table>
</form>
</body>
</html>
Ejemplo 9
Controls 5.cs
<html>
void Page Load(Object Src, EventArgs E) {
Random randomGenerator new Random(DateTime.Now.Millisecond);
int randomNum randomGenerator.Next(0, 3);
switch(randomNum) {
case 0:
Name.Text "Scott";
break;
case 1:
Name.Text "Fred";
break;
case 2:

%
Name.Text "Adam";
break;
}
AnchorLink.NavigateUrl "controls navigationtarget cs.aspx?name " +
System.Web.HttpUtility.UrlEncode(Name.Text);
}
</script>
<body>
<h3><font face "Verdana">Performing Page Navigation (Scenario 1)</font></h3>
<p>
This sample demonstrates how to generate a HTML Anchor tag that will cause the
client to
navigate to a new page when he/she clicks it within the browser.
<p>
<hr>
<p>
<asp:hyperlink id="AnchorLink" font-size=24 runat=server>

Hi <asp:label id="Name" runat=server/> please click this link!
</asp:hyperlink>
</body>
</html>
Controls NavigationTarget cs.aspx

<html>
void Page Load(Object Sender, EventArgs e) {
if (!Page.IsPostBack) {
NameLabel.Text Server.HtmlEncode(Request.QueryString["Name"]);
}
}
</script>
<body>
<h3><font face "Verdana">Handling Page Navigation</font></h3>
<p>
This sample demonstrates how to receive a navigation request from another

page, and extract the querystring argument within the Page Load event.
<p>
<hr>
<form action "controls NavigationTarget.aspx" runat server>
Hi <asp:label id="NameLabel" runat=server/>!
</font>
</form>
</body>
</html>

%
Ejemplo 10

Controls6 cs.aspx
<html>
void EnterBtn Click(Object Src, EventArgs E) {
// Navigate to a new page (passing name as a querystring argument) if

// user has entered a valid name value in the <asp:textbox>
if (Name.Text ! "") {
Response.Redirect("Controls NavigationTarget cs.aspx?name " +
System.Web.HttpUtility.UrlEncode(Name.Text));
}
else {
Message.Text "Hey! Please enter your name in the textbox!";
}
}
</script>
<body>
<h3><font face "Verdana">Performing Page Navigation (Scenario 2)</font></h3>
<p>
This sample demonstrates how to navigate to a new page from within a

<asp:button> click event,
passing a <asp:textbox> value as a querystring argument (validating first
that the a legal
textbox value has been specified).
<p>
<hr>
Please enter your name: <asp:textbox id="Name" runat=server/>

<asp:button text="Enter" Onclick="EnterBtn Click"
runat=server/>
<p>
<asp:label id="Message" forecolor="red" font-bold="true" runat=server/>
</font>
</form>
</body>
</html>
Controls NavigationTarget cs.aspx

<html>
void Page Load(Object Sender, EventArgs e) {
if (!Page.IsPostBack) {
NameLabel.Text Server.HtmlEncode(Request.QueryString["Name"]);
}
}
</script>
<body>

%
<h3><font face "Verdana">Handling Page Navigation</font></h3>
<p>
This sample demonstrates how to receive a navigation request from another
page, and extract the querystring argument within the Page Load event.
<p>
<hr>
<form action "controls NavigationTarget.aspx" runat server>
Hi <asp:label id="NameLabel" runat=server/>!
</font>
</form>
</body>
</html>
Ejemplo 11
<%@ page language="C#" %>
<script runat "server">
void Button1 Click(object sender, EventArgs e)

{
Label1.Text "Hello " + TextBox1.Text;
}
</script>
<html>
<head>
<title>ASP.NET Inline Pages</title>
</head>
<body>
<h1>Welcome to ASP.NET 2.0!</h1>
<b>Enter Your Name:</b>
<asp:TextBox ID="TextBox1" Runat="server"/>
<asp:Button ID="Button1" Text="Click Me" OnClick="Button1 Click" Runat="server"/>
<br />
<br />
<asp:Label ID="Label1" Text="Hello" Runat="server" />
</form>
</body>
</html>
Ejemplo 11
CodeBehind cs.aspx
<%@ page language="C#" CodeFile="CodeBehind cs.aspx.cs" Inherits="CodeBehind cs aspx" %>
<html>
<head>
<title>ASP.NET CodeBehind Pages</title>
</head>
<body>
<form runat "server">
<br />
<br />

%

</form>
</body> !
</html>
CodeBehind cs.aspx.cs
using System;
public partial class CodeBehind cs aspx : System.Web.UI.Page

{
protected void Button1 Click(object sender, EventArgs e)
{
Label1.Text "Hello " + TextBox1.Text;
}
Ejemplo 12
CodeFolder cs.aspx
<%@ page language="C#" %>
<script runat "server">
void Button1 Click(object sender, EventArgs e)

{
CustomClass c new CustomClass();
Label1.Text c.GetMessage(TextBox1.Text);
}
</script>
<html>
<head>
<title>ASP.NET Inline Pages</title>
</head>
<body>
<br />
<br />
</form>
</body>
</html>
CustomClass.cs (AppCode)
using System;
public class CustomClass

{
public String GetMessage(String input) {
return "Hello " + input;
}
}
Ejemplo 13
<%@ Page Language="C#" %>
<html>
<body>
<% for (int i 0; i<8; i++) { %>

<font size "<% i%>"> Hello World! </font> <br>
<% } %>
</body>

%
</html>
"
Ejemplo 14
<html>
int subtract(int num1, int num2) {

return num1 num2;
}
</script>
<body>
<%
int number 100;
while (number > 0) {

Response.Write("Value: " + number + "<br>");
number subtract(number, 1);
}
%>
</body>
</html>
Ejemplo 15
<html>
void Page Load(Object sender, EventArgs e) {

Message.Text "Welcome to ASP.NET";
}
</script>
<body>
<asp:label id="Message" font-size=24 runat=server/>
</body>
</html>
Ejemplo 16
<html>

Message.InnerHtml "Welcome to ASP.NET";
}
</script>
<body>
<span id "Message" style "font size:24" runat server/>
</body>
</html>

%
Ejemplo 17
<html> )
ArrayList items new ArrayList();
items.Add("One");
items.Add("Two");
items.Add("Three");
MyList.DataSource items;
MyList.DataBind();
}
</script>
<body>
<asp:datalist id="MyList" runat=server>
<ItemTemplate>
Here is a value: <%# Container.DataItem %>
</ItemTemplate>
</asp:datalist>
</body>
</html>
Ejemplo 18
<%@ Page Language "C#"%>
<html>
<body>
The below content has been hidden from browser clients using a server side comment
(view the .aspx source to see what we mean : )
<%
<asp:calendar id "MyCal" runat server/>
<% for (int i 0; i<45; i++) { %>

Hello World <br>
<% } %>
%>
</body>
</html>
Ejemplo 19
<html>
<body>
<! #Include File "Header.inc" >
<br/>
<h3> Main page content </h3>

%
<br/>
<! #Include File "Footer.inc" > *

</body>
</html>
?

%

== ::

MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5
?

%
= :

%

= :

Lite
eral
Reserrva una ubicación en la página
p Web para
p mostrarr texto estático. Utilice eel control
Syste
em.Web.UI.W WebControlss.Literal paraa reservar un na ubicación en la páginaa Web para
mostrar texto. El control Literral es similarr al control Laabel, excepto por el hech ho de que el
contrrol Literal no
o permite apllicar un estilo
o al texto mo ostrado. Se puede
p contro olar mediantte
progrramación el texto
t mostraado en el con ntrol, estableeciendo la prropiedad Texxt.
<%@ Page
P Languag
ge "C#" AutoEventWireup "True" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
"http://www. w3.org/TR/xhtml1/DTD/xh
html1 transi
itional.dtd"
">
<html
l >
<head
d>
<
<title>Liter
ral Example</title>
ipt runat "server">
<scri
onClick(Object sender, EventArgs

void Butto E e)
)
{
Literal1.Text "Welcome to ASP.NET!!";
}
</
/script>
</hea
ad>
<body
y>
<f
form id "forrm1" runat "server">
al Example</h3>
<h3>Litera
ral id "Literal1"
<asp:Liter
Text "Hello World!!"
runat
t "server"/>
<br /><br />
on id "Button1"
<asp:Butto
Text "Change Literal Text"
OnClick "ButtonClick"
runat
t "server"/>
</
/form>
</bod
dy>
</htm
ml>
?

%
= :
La propiedad Liteeral.Mode Obbtiene o estaablece un valor de enumeración que especifica có

ómo
se rep
presenta el contenido
c deel control Literal.
Utilicce la propiedad Mode para especificaar cómo se debe representar el conteenido de un

contrrol Literal. Essta propiedad se establecce mediante
e uno de los valores
v de en
numeración
LiteraalMode. En la l siguiente tabla
t se enum
meran los po
osibles valorees.
Valorr Descripción
D
Pass
sThrough N se modific
No ca el conteniddo del contro
ol.
Enco
ode E contenido del control se
El e convierte en
e una cadena codificada e en HTML.
Transform L elemento
Los os del lenguajje de marcad do no compattibles se quita an del
c
contenido del control. Si el
e control Lite
eral se repre esenta en un explorador
q
que admite HTML
H o XHTM ML, no se mod difica el conte
enido de conttrol.
Si esp
pecifica PasssThrough, el contenido coompleto de la propiedad d Text se pasa al dispositiivo o
exploorador sin ninnguna modifficación. Por ejemplo, si la
l propiedad d Text de un control Literral
contiene una etiq queta <hr>, se
s envía a toddos los dispo
ositivos y exp
ploradores ya sea o no
comp patible.
Si esp
pecifica Enco
ode, el conteenido de la propiedad Texxt se convierrte en una caadena codificcada
en HTTML antes dee representaarse. Por ejemmplo, si la prropiedad Texxt de un control Literal
contiene una etiqqueta <hr>, primero
p se coonvierte en <Hr>
& y luego se envvía al disposiitivo
o expplorador.
Si esp
pecifica Tran
nsform, el comportamien nto de repressentación dee la propiedaad Text depende
del tipo de marcaado que se vaa a representar. Cuando se representa el control Literal para un
dispoositivo o expllorador que admite HTMML o XHTML, al especificar Transform,, se genera el e
mismmo comportamiento que al especificaar PassThrouggh. Todas lass etiquetas d de marcado y
elementos de la propiedad
p Te
ext se repressentan para el
e exploradoor que realizóó la solicitud.
Cuando se repressenta el conttrol Literal paara un lenguaje de marcaado distinto de HTML o

XHTM
ML, como WM ML o cHTMLL, puede utilizar el valor Transform
T paara quitar los elementos de
marcado no comp patibles. En este
e caso, lo os elementoss de lenguajee de marcado o de la propiedad
Text no admitidos en el lengu uaje de marccado de destino no se reppresentan paara el contro ol. Por
ejemplo, si la pro
opiedad Text de un control Literal con ntiene una etiqueta
e <hr>>, se quita la
?

%
= :
etiqueta antes dee que se envííe el contenido a un dispositivo WMLL. Si una etiqueta no
comppatible contieene conteniddo, sólo se quita la etiqueta, y se envvía al contenido al dispossitivo
o exp
plorador. Porr ejemplo, si la propiedad d Text contie
ene el contennido <XYZ>Test</XYZ>, laas
etiquetas <XYZ> y </XYZ> se quitan,
q y el texto "Test" se
s envía al diispositivo o eexplorador.
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
g System.Collections;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
using b.UI.WebControls.WebPart
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c LiteralControl : System.Web.U
S UI.Page
{
p
protected vo
oid Page Load(object sennder, EventA
Args e)
{
Literal1.Text
@"This is <font size 7>cool</foont><script>
>alert(""Hi"
"");</script
t>";
Literal2.Text
>alert(""Hi"
"");</script
t>";
Literal3.Text
>alert(""Hi"
"");</script
t>";
Literal1.Mode LiteralMode.Tra
ansform;
Literal2.Mode LiteralMode.Pas
ssThrough;
Literal3.Mode LiteralMode.Enc
code;
}
}
<asp:L
Label ID="lblEjemplo" runat="
"server" Text="
"Que la Fuerza te acompañe.">
></asp:Label>
<br />
>
<asp:L
Literal ID="ltl
lEjemplo" runat
t="server" Text
t="Que la Fuerz
za te acompañe."></asp:Litera
al>
El reesultado es:
<span ID=”lblEjemplo
o">Que la Fuerz
za te acompañe.</span>
<br />
>
Que la
a Fuerza te aco
ompañe.
?

%
= :
Con
ntroles Ta
able, Tab
bleRow y TableCe
ell

Table
Muesstra una tabla en una pággina Web. El control Table permite construir unaa tabla HTMLL y
especcificar sus caaracterísticass de una form
ma sencilla. Las
L tablas se pueden creaar en tiempoo de
diseñ
ño proporcionando conteenido estáticco, pero la po otencia de un
n control de servidor We
eb
Table
e sólo se pon ne de manifieesto cuando la tabla se crea mediantte programacción con
conteenido dinámico.
Es im
mportante reccordar que cualquier
c moodificación o adición realiizada en las ffilas o celdass de la
tabla mediante programación n no se conseervará en loss envíos al seervidor. Esto se debe a que las
filas y las celdas de
d la tabla so mas controles y no propieedades del control Table
on en sí mism e.
Para almacenar lo os cambios ene la tabla, see deben reco onstruir las filas
f y celdas después de cada
devolución de datos. De hech ho, si se prevvén modificaciones sustanciales, se reecomienda
utilizaar un control DataList, DataGrid o GrridView en lu ugar del conttrol Table. Laa consecuenccia de
todo ello es que la clase Table e suelen utiliizarla princip
palmente loss desarrolladores de
contrroles.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
d id "Head1" runat "serv
<head ver">
<
<title>Untittled Page</title>
</hea
ad>
<body
y>
<
<form orm1" runat "server">
id "fo
<
<div>
<h3>Table ex
< xample, constructed at design
d time<
</h3>
<
<asp:Table id "Table1" runat "serve
er"
?

%
= :
CellPadd
ding "10"
GridLine
es "Both"
Horizont
talAlign "Center">
<asp:Tab
bleRow>
<asp
p:TableCell>
Row 0, Col 0
</asp:TableCell>
<asp
p:TableCell>
Row 0, Col 1
</asp:TableCell>
</asp:Ta
ableRow>
<asp:Tab
bleRow>
<asp
p:TableCell>
Row 1, Col 0
</asp:TableCell>
<asp
p:TableCell>
Row 1, Col 1
</asp:TableCell>
</asp:Ta
ableRow>
<
</asp:Table>
>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
En el siguiente ejeemplo de có ódigo se mueestra cómo co onstruir una tabla mediaante

progrramación. Laa creación dee una tabla de forma dináámica constaa de tres passos. En prime er
lugar, crear los ob bjetos TableC
Cell que reprresenten las celdas de unna fila. El con
ntenido de laas
celdaas se agrega estableciend
e do la propieddad Text o aggregando conntroles a la ccolección
Contrrol.Controls de TableCelll. A continuaación, cree un control Tab bleRow que represente una u
fila de la tabla. Aggregue los ob
bjetos TableCell creadoss anteriormente a la colección Cells ded
Table eRow. Por último, agregu ue el control TableRow a la colecciónn Rows del co ontrol Table.
Repitta este proceeso para cadaa fila de la taabla.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http://www
w.w3.org/TR/xhtml1/DTD/x
xhtml1 trans
sitional.dtd
d">
<scri
ipt runat "server">
private void
p d Page Load(Object sende er, EventArg
gs e)
{
// Gener
rate rows and cells.
int numr
rows 3;
int numc
cells 2;
for (int
t j 0; j < numrows; j+++)
{
TableRow r new
w TableRow()
);
for (int i 0; i < numcell
ls; i++) {
TableCell c new Table
eCell();
c.Controls.A eralControl("row "
Add(new Lite
+ j.ToString() + ",, cell " + i.ToString()
i ));
r.Cells.Add(c);
}
Table1.Rows.Add(r);
}
}
</scr
ript>
<html
l >
<head
ver">
< tled Page</title>
<title>Untit
</hea
ad>
<body
y>
<
id "fo
<
<div>
xample, constructed prog

<h3>Table Ex
< grammaticall
ly</h3>
<
<asp:Table id "Table1"
?

%
= :
GridLine
es "Both"
Horizont
talAlign "Center"
mes "Verdana"
Font Nam !
Font Size "8pt"
CellPadd
ding "15"
CellSpac
cing "0"
Runat "server"/>
</div>
<
<
</form>
</bod
dy>
</htm
ml>
TableRow
Repreesenta una fila
f de un con
ntrol Table. La
L clase TableRow repressenta una fila de un conttrol
Table
e.
Esta clase
c permite controlar cómo
c se mueestra el contenido de la fila.
f La alineaación del
conteenido de la fiila se especiffica mediante el estableccimiento de las
l propiedades
HorizzontalAlign y VerticalAlign.
Las ceeldas de la fiila pueden ad

dministrarsee mediante programación
p n utilizando la colección Cells.
La colección Cellss es una colección de objetos TableCe ell que repreesentan las celdas de la fila.
TableCell
Repreesenta una celda
c en un control
c Tablee. La clase TaableCell representa una ccelda en un
contrrol Table. Se puede utilizar la propieddad Text para especificarr o determinar el conteniido
de la celda.
La claase TableCell permite controlar cómo o se muestraa el contenid

do de la celdaa. La alineaciión
del coontenido de la celda se especifica
e meediante el esstablecimientto de las pro
opiedades
HorizzontalAlign y VerticalAlign. Se puede utilizar la propiedad Wraap para espeecificar si el
conteenido de la celda se ajustta dentro de la misma.
Se pu
uede especifiicar asimismo el número o de filas o co
olumnas de la tabla, reprresentada po
or un
contrrol Table, que ocupa unaa celda individual. Las proopiedades RoowSpan y Co olumnSpan
contrrolan cuántas filas y columnas se utiliizan, respecttivamente.
<html
l>
<head
d>
?

%
= :
<
<script lang
guage "C#" runat "server
r">
"
void Pag
ge Load(Object sender, EventArgs
E e)
) {
// Generate
G rows and cells
int numrows opDown1.Sele

int.Parse(Dro ectedItem.Va
alue);
int numcells int.Parse(Dr
ropDown2.Sel
lectedItem.V
Value);
for (int j 0; j<numrows; j+

++) {
TableRow r new TableR

Row();
for (int i 0; i<numcell

ls; i++) {
TableCell c new TableCell();
T ;
c.Controls.Add(new LiteralCont
trol("row " + j.ToStrin
ng() + ", cell "
+ i.T
ToString()));
r.Cells.Add(c);
}
Table1.Rows.Add(r);
}
}
<
</script>
</hea
ad>
<body
y>
<
<h3><font fa
ace "Verdana">Table Exam
mple</font><
</h3>
<
<form runat server>
ble id="Table
<asp:Tab e1" Font-Nam
mes="Verdana
a" Font-Size
e="8pt" Cell
lPadding=5
CellS
Spacing=0 Bo
orderColor="b
black" Borde
erWidth="1" Gridlines="
"Both" runat
t="server"/>
<p>
Table ro
ows:
opDownList id
<asp:Dro d=DropDown1 runat="serv
ver">
p:ListItem Value="1">1</
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
ropDownList>
</asp:Dr
<br>
Table ceells:
<asp:DroopDownList idd=DropDown2 runat="serv
ver">
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
</asp:DrropDownList>
<p>
tton Text="Ge
<asp:but enerate Tabl
le" runat=se
erver/>
<
</form>
</bod
dy>
</htm
ml>
Ima
age
Muesstra una imagen en una página
p Web.
?

%
= :
Utilicce el control Image para mostrar cuallquier image en válida adm mitida por el explorador que
d en la página Web. Paraa especificar la ruta de accceso a la imagen que se
realizza la solicitud
muesstra, establezzca la propieedad ImageU Url. Para espe
ecificar el texxto que se haa de mostrarr en
lugar de la imagen cuando ésta no está diisponible, establezca la propiedad
p AlternateText.. La
alineaación de la immagen con respecto
r a los demás elem mentos de laa página Web b se especifica
estab bleciendo la propiedad
p Im
mageAlign.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<head
d>
<
<title>Image
e Example</title>
<scri e "C#" runat "server">
ipt language
on Click(Object sender, EventArgs e)

void Butto e
{
switch(DropList1.SelectedIndex
x)
{
case
e 0:
Image1.ImageA
Align Imag
geAlign.NotS
Set;
b
break;
case
e 1:
Image1.ImageA
Align Imag
geAlign.Left
t;
b
break;
case
e 2:
Image1.ImageA
Align Imag
geAlign.Righ
ht;
b
break;
case
e 3:
Image1.ImageA
Align Imag
geAlign.Base
eline;
b
break;
case
e 4:
Image1.ImageA
Align Imag
geAlign.Top;
;
b
break;
case
e 5:
Image1.ImageA
Align Imag
geAlign.Midd
dle;
b
break;
?

%
= :
case
e 6:
Image1.ImageA
Align Imag
geAlign.Bott
tom;
b
break; *
case
e 7:
Image1.ImageA
Align Imag
geAlign.AbsB
Bottom;
b
break;
case
e 8:
Image1.ImageA
Align Imag
geAlign.AbsM
Middle;
b
break;
case
e 9:
Image1.ImageA
Align Imag
geAlign.Text
tTop;
b
break;
defa
ault:
Image1.ImageA
Align Imag
geAlign.NotS
Set;
b
break;
</
/script>
</hea
ad>
<body
y>
<f
form id "for
rm1" runat "server">
<h3>Image Example</h3>
e "font size:large">
<div style
Text Te
ext Text Text Text Text Text Text Text
T Text Te
ext Text
Text Te
T Text Te
ext Text
Text Te
T Text Te
ext Text
</div>
e id "Image1" runat "ser

<asp:Image rver"
Alter
rnateText "Im
mage text"
eAlign "left"
Image
eUrl "images/image1.jpg"
Image "/>
<hr />
age Align: <b

Select Ima br />
<asp:DropD
DownList id "DropList1"
runat
t "server">
<asp:ListItem>NotSet</asp:List
tItem>
<asp:ListItem>Left</asp:ListIt
tem>
<asp:ListItem>Right</asp:ListI
Item>
<asp:ListItem>BaseLine</asp:Li
istItem>
<asp:ListItem>Top</asp:ListIte
em>
<asp:ListItem>Middle</asp:List
tItem>
<asp:ListItem>Bottom</asp:List
tItem>
<asp:ListItem>AbsBottom</asp:L
ListItem>
<asp:ListItem>AbsMiddle</asp:L
ListItem>
<asp:ListItem>TextTop</asp:Lis
stItem>
</asp:Drop
pDownList>
<br /><br />
on id "Button1"
<asp:Butto
Text "Apply Image Alignment"
"
runat
t "server"/>
</
/form>
</bod
dy>
?

%
= :
</htm
ml>

using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c Image Control : Syystem.Web.UI
I.Page
{
p
protected vo
Args e)
{
Image1.ImageUrl "~/Images/Gir
rl.gif";
Image1.D
DescriptionUrl "~/Imag
geDescriptio
on.htm";
Image1.A
AlternateText s a picture of a girl";
"This is
}
}
l>
<html
<head
d>
<
<script lang
r">
void Subm
mitBtn Click(Object send
der, EventAr
rgs e) {
Image1.ImageUrl "images/" + DropDown1.Se

D electedItem.Value;
Image1.AlternateText DropDown
n1.SelectedI
Item.Text;
}
<
</script>
</hea
ad>
<body
y>
<
<h3><font fa
ace "Verdana">Simple Htm
mlImage Samp
ple</font></
/h3>
<
<form runat server>
age ID="Image
<asp:Ima e1" ImageUrl
l="images/ce
ereal1.gif" AlternateTe
ext="Healthy
Grain
ns" runat="s
server" />
<p>
Select image file:
opDownList id
ver">
p:ListItem Value="Cereal
<asp l1.gif">Heal
lthy Grains<
</asp:ListIt
tem>
<asp l2.gif">Corn
n Flake Cere
eal</asp:Lis
stItem>
?

%
= :
<asp l3.gif">U.F.
.O.S</asp:Li
istItem>
<asp ey O's</asp:ListItem>
l4.gif">Oate
<asp l5.gif">Stri
ike</asp:Lis
stItem>
<asp l7.gif">Frui
ity Pops</as
sp:ListItem>
>
ropDownList>
</asp:Dr
tton text="Ap
<asp:but pply" OnClic
ck="SubmitBt
tn Click" ru
unat=server/>
<
</form>
</bod
dy>
</htm
ml>
Ima
ageButton
n
Contrrol que muesstra una imaagen y respon
nde a los cliccs del mousee (ratón) en la imagen.
Espaccio de nomb
bres: System..Web.UI.WebControls
Utilicce el control ImageButton para mostrar una imaggen que resp

ponde a los clics del mouse.
Se provocan los eventos

e d cuando se hace clic en el control Im
Clickk y Command mageButton.
Utilizando el conttrolador de eventos

e OnCClick, se pued
den determinnar mediantee programacción
las co
oordenadas del
d punto do ón, se puede crear
onde se ha heecho clic en la imagen. A continuació
códiggo de respuesta tomando o como base los valores ded las coordeenadas. Observe que el
origen (0, 0) está situado en la esquina su
uperior izquie
erda de la im
magen.
De manera
m predeeterminada, la validación n de la páginaa se realiza ala hacer clic een un contro
ol
ImageButton. La validación de la página determina
d si todos los coontroles de eentrada asociados
a un control
c de vaalidación en la página cumplen las re eglas de valid dación especcificadas por el
contrrol de validacción. Para evvitar que se realice
r la valiidación de laa página, estaablezca la
propiiedad CausessValidation en e false.
?

%
= :
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c ImageButton Controol : System.
.Web.UI.Page
e
{
p
protected vo
Args e)
{
ImageBut
tton1.ImageUrl "~/Imag
ges/Girl.gif
f";
ImageBut
tton1.DescripptionUrl "
"~/ImageDesc
cription.htm
m";
ImageBut
tton1.AlternateText "T icture of a girl";
This is a pi
}
p
protected vo
oid ImageButton1 Click(oobject sende
er, ImageCli
ickEventArgs e)
{
ImageBut
tton1.AlternateText
Format("Button Clicked at
string.F a {0},{1}",, e.X, e.Y);
}
}
?

%
= :
<html
l>
<head
d>

<
<script lang
r">
void Ima
ageButton1 OnClick(objec
ct Source, ImageClickEv
I ventArgs e) {
int x e.X;
int y e.Y;
Labe
el1.Text "X: " + x.ToS
String();
Labe
el2.Text "Y: " + y.ToS
String();
if ( x > 60 ) {
Label3.Text "You clic
cked on the Purple Rain
n!";
} else {
Label3.Text "You clic
cked on some
e Extreme Or
range!";
}
}
<
</script>
</hea
ad>
<body
y>
<
<h3><font fa
ace "Verdana">Using Imag
geButton as an Image Ma
ap</font></h
h3>
<
<form runat server>
<table width
w "100%" border 0>
<tr>
<td width "25%">
utton id=But
<asp:ImageBu tton1 ImageU
Url="images/
/imagebutton
n4.gif"
Borde
erWidth="2px
x" onclick="ImageButton11 OnClick" runat="serve
r er" />
</td
d>
<td>
>
<asp:Label id=Label1 Te
ext="X:" run
nat="SERVER"
"/>
<br>
<asp:Label id=Label2 Te
ext="Y:" run
nat="SERVER"
"/>
</tdd>
</tr>
</table>>
bel id=Label3 font-bold=

<asp:Lab ="true" Text
t="" runat="
"SERVER"/>
<
</form>
</bod
dy>
</htm
ml>
Ima
ageMap
Crea un control que
q muestra una imagen en una página. Cuando se s hace clic een una región de
la zon
na activa deffinida dentroo del control ImageMap, el control geenera una deevolución de e
datoss al servidor o se desplazza a una direccción URL esspecificada.
Utilicce el control ImageMap para

p crear unna imagen qu ue contenga las regioness de zona acttiva
definidas. Cuando o un usuario hace clic en una región de zona activva, el contro
ol puede generar
una devolución
d de datos al seervidor o dessplazarse a una dirección
n URL especifficada. Por
ejemplo, puede utilizar
u este control
c para mostrar un mapa
m de unaa región geoggráfica. Cuan
ndo
un ussuario hace clic
c en una reegión concreeta del mapa, el control se s desplaza a una direccióón
URL que
q proporciiona datos adicionales so obre la región seleccionaada. Tambiénn puede utilizzar
?

%
= :
este control
c para generar unaa devolución de datos al servidor y ejjecutar códiggo concreto en
función de la regiión de zona activa
a en la que
q se hizo clic.
c Por ejem mplo, puede u utilizar un co
ontrol
ImageMap para capturar
c las respuestas del
d usuario en forma de votos.
v Cuand do un usuarioo
hace clic en la reggión de zona activa definnida para los votos afirmaativos, se llam
ma al código o para
registtrar una resp
puesta afirmativa en unaa base de dattos. Cuando un usuario h hace clic en laa
región de zona acctiva definidaa para los vootos negativo
os, se registraa una respueesta negativaa.
Tamb bién puede mezclar
m estoss dos escenaarios dentro de
d un controol ImageMap p único. Por
ejemplo, puede especificar
e unna región dee zona activa para desplazarse a una d dirección UR RL y
otra región
r de zona activa para devolver losl datos al servidor.
s
Utilicce la propiedad ImageUrl para especificar la ruta de acceso a la imagen qu ue se va a mostrar

en el control ImageMap. Puede definir cu mero de objettos HotSpot dentro de un
ualquier núm
contrrol ImageMaap. Puede utiilizar las clases CircleHotSpot, RectanngleHotSpot y
PolyggonHotSpot para
p definir las regiones de zona actiiva. También
n, puede deriivar de la clase
HotSpot abstracta para definir un objeto propio de zo ona activa peersonalizado.
Hay dos
d manerass de especificcar el compo ortamiento de un objeto HotSpot en un control
ImageMap cuand do se hace clic en el objeto HotSpot. Puede utilizaar la propied
dad HotSpotM Mode
ontrol Image
del co eMap o la prropiedad HottSpotMode ded un objeto o HotSpot ind dividual. Estaas
propiiedades se establecen mediante uno de los valorres de enumeeración HotSSpotMode. Si se
estabblecen ambas propiedadees, la propiedad HotSpottMode especcificada en ccada objeto
HotSpot individuaal tiene prioridad sobre la
l propiedad
d HotSpotMo ode del control ImageMaap.
?

%
= :
Para desplazarse a una direccción URL, esttablezca la prropiedad ImaageMap.HottSpotMode o la

propiiedad HotSpot.HotSpotM Mode en HottSpotMode.Navigate. Uttilice la propiedad
NaviggateUrl para especificar la
l URL a la quue desplazarrse.
Para generar una devolución de datos al servidor,

s establezca la prropiedad
ImageMap.HotSp potMode o la propiedad HotSpot.Ho otSpotMode en HotSpotMode.Postb back.
Utilicce la propiedad PostBackValue para especificar
e un nombre paara la región de zona actiiva.
Este nombre
n se pasa
p en los daatos del evento ImageMapEventArgss cuando se p produce un
eventto de devolu ución de dato os. Cuando se hace clic en un objeto HotSpot de devolución ded
datoss, se producee el evento Click.
C ontrolar mediante prograamación las aacciones
Para co
realizzadas cuando o se hace clicc en un objetto HotSpot de
d devolució proporcione un
ón de datos, p
contrrolador de evventos para el evento Cliick.
Para hacer que toodos los objeetos HotSpott de un contrrol ImageMaap tengan el mismo
compportamiento,, utilice la prropiedad ImaageMap.HottSpotMode para
p especificar el
compportamiento. A continuacción, estableezca la propieedad HotSpoot.HotSpotMMode de cadaa
objetto HotSpot in
ndividual en HotSpotMo ode.NotSet o no especifiq
que ningún vvalor para la
propiiedad HotSpot.HotSpotM Mode.
Para especificar diferentes

d co
omportamien ntos para loss objetos HottSpot de un objeto
ImageMap, estab blezca la propiedad HotSSpot.HotSpottMode de caada objeto HotSpot indivvidual
en Ho
otSpotMode e.Navigate o HotSpotMo ode.PostBackk.
<%@ page
p languag
ge "C#" %>
CTYPE html PUBLIC

<!DOC P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
d id "head1" runat "serv
<head ver">
<ti ap Class Navigate Exampl
itle>ImageMa le</title>
</hea
ad>
<bo
ody>
<
<form id "fo
orm1" runat "server">
<h3>ImageM
Map Class Nav
vigate Examp
ple</h3>
<h4>Shopping Choices:</h4>
<asp:image
emap id "Shop
p"
imageurl "Images/ShopChoice.jpg
g"
width "150"
height "360"
alternat
tetext "Shopp
ping choices
s"
runat "Server">
<asp:cir
rclehotspot
naviga
ateurl "http://www.tails
spintoys.com
m"
x "75"
y "290"
radius "75"
hotspo
otmode "Navigate"
natetext "Shop for toys"
altern ">
</asp:circlehotspot>
<asp:cir
rclehotspot
ateurl "http://www.cohow
naviga winery.com"
x "75"
y "120"
radius "75"
hotspo
otmode "Navigate"
natetext "Shop for wine"
altern ">
</asp:circlehotspot>
?

%
= :
</asp:imag
gemap>
<
</form> !
</b
body>
</htm
ml>
using
g System;
using
g System.Datta;
using
g System.Connfiguration;
using
using
g System.Webb;
using
g System.Webb.Security;
using
g System.Webb.UI;
using
g System.Webb.UI.WebControls;
using
g System.Webb.UI.WebControls.WebPart ts;
using
g System.Webb.UI.HtmlControls;
publi
ic partial class
c ImageMap Control : System.Webb.UI.Page
{
p
protected vooid Page Load(object sen nder, EventA
Args e)
{
ImageMapp1.ImageUrl "~/Images//Girl.gif";
ImageMapp1.DescriptionUrl "~/I
ImageDescrip
ption.htm";
ImageMapp1.AlternateText "Thiss is a pictu
ure of a girrl";
ImageMapp1.HotSpotMode HotSpottMode.PostBa
ack;
CircleHootSpot chs;
RectangleHotSpot rhs;
PolygonHHotSpot phs;
chs neew CircleHotSpot();
chs.X 75;
chs.Y 75;
chs.Radius 6;
chs.PosttBackValue "Left Eye Center";
C
ImageMapp1.HotSpots.A Add(chs);
chs.X 100;
chs.Y 75;
chs.Radius 6;
chs.PosttBackValue "Right Eye Center";
ImageMapp1.HotSpots.A Add(chs);
phs neew PolygonHotSpot();
phs.Coorrdinates "76,57,82,64,,81,76,76,82
2,71,76,70,663";
phs.PosttBackValue "Left Eye";;
ImageMapp1.HotSpots.A Add(phs);
phs.Coorrdinates "99,57,105,644,104,76,99,
,82,94,76,933,63";
phs.PosttBackValue "Right Eye"";
rhs neew RectangleHotSpot();
rhs.Top 101;
rhs.Botttom 110;
rhs.Leftt 74;
rhs.Righht 110;
rhs.PosttBackValue "Mouth";
ImageMapp1.HotSpots.A Add(rhs);
phs.Coorrdinates "92,82,101,955,85,95";
phs.PosttBackValue "Nose";
phs.Coorrdinates
"28,150,17,141,10,129,22,57,46, ,21,80,9,"
+
"103,9,129,22,141,47,152,93,152 2,142,144,15
56,"
+
"135,154,128,142,129,71,117,47, ,93,34,69,34
4,"
+
"51,56,42,81,44,140";
phs.PosttBackValue "Hair";
chs.X 87;
chs.Y 81;
chs.Radius 50;
chs.PosttBackValue "Face";
?

%
= :
ImageMapp1.HotSpots.A
Add(chs);
rhs neew RectangleHotSpot();
rhs.Top 127; "
rhs.Botttom 142;
rhs.Leftt 69;
rhs.Righht 107;
rhs.PosttBackValue "Neck";
ImageMapp1.HotSpots.A
Add(rhs);
}
p
protected vo
oid ImageMap1 Click(obje
ect sender, ImageMapEve
entArgs e)
{ Label1.Tex
xt "You clicked the " + e.PostBac
ckValue; }
}
<%@ Page
P Languag
ge="C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
org/TR/xhtml1/DTD/xhtml1
1 transition
nal.dtd">
ipt runat "server">
<scri
</scr
ript>
<html
l xmlns "htt
tp://www.w3.org/1999/xht
tml">
<head
d runat "ser
rver">
<
<title>Untit
tled Page</title>
</hea
ad>
<body
y>
<
<form id "fo
<div>
<h3>
><font face "Verdana">Im
mageMap Clas
ss Mixed Hot
tSpotMode
Examp
ple</font></h3>
<asp
p:imagemap id
d="Buttons" imageurl="h
hotspot.jpg"
" alternatet
text="Navigate
butto
ons"
runat="Serve
er">
<asp:Rectang
gleHotSpot
hotspotmode=
="Navigate"
="navigate1.htm"
NavigateUrl=
alternatetex
xt="Button 1"
1
top="30"
left="175"
bottom="110"
right="355">
ngleHotSpot>
</asp:Rectan >
<asp:Rectang
gleHotSpot
hotspotmode=
="Navigate"
?

%
= :
NavigateUrl=
="navigate2.htm"
alternatetex
xt="Button 2"
2
top="155" )
left="175"
bottom="240"
right="355">
ngleHotSpot>
</asp:Rectan >
<asp:Rectang
gleHotSpot
hotspotmode=
="Navigate"
="navigate3.htm"
NavigateUrl=
alternatetex
xt="Button 3"
3
top="285"
left="175"
bottom="365"
right="355">
ngleHotSpot>
</asp:Rectan >
sp:imagemap>
</as
</div>
</form>
<
</bod
dy>
</htm
ml>
<%@ Page
P Languag
ge="C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt runat "server">
v
void Buttons Clicked(object sender,
, ImageMapEv
ventArgs e)
{
Text
label1.T e.PostBackValue + " clicked!
!";
}
</scr
ript>
<html
l xmlns "htt
tml" >
<head
d runat "ser
rver">
<
<title>Untit
tled Page</title>
</hea
ad>
<body
y>
<
id "fo
<div>
<h3>
><font face "Verdana">Im
mageMap Clas
ss Mixed Hot
tSpotMode
Examp
ple</font></h3>
<asp
p:imagemap id
d="Buttons" imageurl="h
hotspot.jpg"
" alternatet
text="Navigate
butto
ons"
hotspotmode=
="Postback" onclick="Bu
uttons Click
ked" runat="Server">
<asp:Rectang
gleHotSpot
hotspotmode=
="Postback"
postbackvalu
ue="Button1""
alternatetex
xt="Button 1"
1
top="30"
left="175"
bottom="110"
right="355">
ngleHotSpot>
</asp:Rectan >
<asp:Rectang
gleHotSpot
hotspotmode=
="Postback"
postbackvalu
ue="Button2""
alternatetex
xt="Button 2"
2
top="155"
left="175"
bottom="240"
right="355">
ngleHotSpot>
</asp:Rectan >
<asp:Rectang
gleHotSpot
hotspotmode=
="Postback"
postbackvalu
ue="Button3""
alternatetex
xt="Button 3"
3
?

%
= :
top="285"
left="175"
bottom="365" *
right="355">
ngleHotSpot>
</asp:Rectan >
<asp:Rectang
gleHotSpot
hotspotmode=
="Postback"
postbackvalu
ue="Backgrouund"
alternatetex
xt="Backgrouund"
top="0"
left="0"
bottom="390"
right="540">
ngleHotSpot>
</asp:Rectan >
sp:imagemap>
</as
<p>
<h3><font face "verdana el id="label
a"><asp:labe l1" runat="s
server"
></as
sp:label></f
font></h3>
</p>
>
</div>
</form>
<
</bod
dy>
</htm
ml>
Cale
endar
Muesstra un calenndario de un solo mes qu
ue permite all usuario seleeccionar fech
has y desplazzarse
al mees siguiente o al mes anteerior.
Utilicce el control Calendar para mostrar un

u solo mes ded un calend dario en una página Web. El
contrrol permite seleccionar
s plazarse al mes siguiente o al mes antterior. El con
feechas y desp ntrol
Calen ndar admite todos los tip
pos System.G Globalization
n.Calendar deel espacio dee nombres
Systeem.Globalization. Ademáás del calendario gregoriaano, también n se incluyen
n calendarioss que
utilizaan diferentes sistemas de año y mes,, como el callendario Hjirri.
Se pu
uede especifiicar si el control Calendaar permite se
eleccionar un na semana o un
n solo día, un
mes completo
c meediante la prropiedad SeleectionMode.
De manera
m predeeterminada, el control muestra los díías del mes, los l encabezaados de los días
d
de la semana, un encabezado o con el nombre del mes y año, vínculos para seleeccionar díass del
mes de
d forma ind dividual y vín
nculos para desplazarse
d al
a mes siguiente y al mes anterior. See
puede personalizar la aparien ncia del control Calendarr estableciendo las propieedades que
contrrolan el estilo
o de las diferrentes partes del controll. La siguiente tabla contiiene las
propiiedades que especifican el estilo de las diferentes partes del control.
?

%
= :
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<head
d>
<
<title>ASP.N
NET Example</title>
</hea
ad>
<body
y>
<f rm1" runat "server">

form id "for
ndar id "calendar1" runa

<asp:Calen at "server">
>
<Othe
erMonthDayStyle ForeColo
or "LightGra
ay">
</Oth
herMonthDayStyle>
<TitleStyle BackColor "Blue"

"
ForeColor "White
e">
</Tit
tleStyle>
<DayStyle BackColor "gray">

</Day
yStyle>
ectedDayStyle BackColor "LightGray"

<Sele "
Font Bold "True">
</SelectedDayStyle>
</asp:Cale
endar>
?

%
= :
</
/form>
</bod
dy>
</htm
ml>
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c Calendar Control : System.Web b.UI.Page
{
H
Hashtable sc
chedule neww Hashtable();
p
protected oid Page Load(object sen
vo nder, EventAArgs e)
{
GetSched
dule();
Calendar
r1.Style.Add("position", , "absolute"");
Calendar
r1.Style.Add("left", "5p px");
Calendar
r1.Style.Add("top", "50p px");
Calendar
r1.Caption "Special Daays";
Calendar
r1.FirstDayOfWeek Firs
stDayOfWeek..Sunday;
Calendar
r1.NextPrevFormat Next
tPrevFormat..ShortMonth;
Calendar
r1.TitleFormat TitleFo
ormat.MonthYYear;
Calendar
r1.ShowGridLines true;
;
Calendar
r1.DayStyle.HorizontalAl lign Horiz
zontalAlign.Left;
Calendar
r1.DayStyle.V VerticalAliggn Vertica
alAlign.Top;
Calendar
r1.DayStyle.Height new
w Unit(75);
Calendar
r1.DayStyle.W Width new Unit(100);
r1.OtherMonthDayStyle.Ba
Calendar ackColor
System.D
Drawing.Color.WhiteSmoke e;
Calendar
r1.TodaysDate new DateeTime(2006, 12, 1);
Calendar
r1.VisibleDate Calenda
ar1.TodaysDaate;
}
p
private void
d GetSchedule()
{
schedule
e["11/23/2006"] ksgiving";
"Thank
schedule
e["12/5/2006"] "Birthd
day";
schedule
e["12/16/2006"] "First
t day of Chaanukah";
schedule
e["12/23/2006"] "Last day of Channukah";
e["12/24/2006"]
schedule "Chris
stmas Eve";
schedule
e["12/25/2006"] "Chris
stmas";
schedule
e["12/26/2006"] "Boxin
ng Day";
schedule
e["12/31/2006"] "New Year's
Y Eve";
;
schedule
e["1/1/2007"] "New Yeaar's Day";
}
p
protected vo
oid Calendar1 SelectionC Changed(objeect sender, EventArgs e
e)
{
Response
e.Write("Selection chang ged to: "
+ Calend
dar1.SelectedDate.ToShor rtDateStringg());
}
p
protected vo
oid Calendar1 VisibleMon nthChanged(oobject sende
er,
M
MonthChanged
dEventArgs e)
{
Response
e.Write("Month changed to:t " + e.Ne
ewDate.ToSho
ortDateStrin
ng());
}
p
protected vo
oid Calendar1 DayRender(object send der, DayRend
derEventArgs e)
{
Literal lit new Literal();
lit.Visible true;
lit.Text
t "<br />";
e.Cell.C
Controls.Add(lit);
edule[e.Day.Date.ToShort
if (sche tDateString()] ! null)
{
Labe
el lbl new Label();
lbl.Visible true;
lbl.Text (string)schedule e[e.Day.Datee.ToShortDat
teString()];
e.Ce
ell.Controls.Add(lbl);
}
}
?

%
= :

<html
l>
<head
d>
<
<script lang
r">
void Dat
te Selected(object s, Ev
ventArgs e) {
Labe
el1.Text "Selected dat
te is: " +
Calen
ndar1.Select
tedDate.ToShortDateStrin
ng();
}
<
</script>
</hea
ad>
<body
y>
<
<h3><font fa
ace "Verdana">Calendar Example</fon
E nt></h3>
<
<form runat server>
lendar id=Calendar1 onse

<asp:Cal electionchan
nged="Date Selected"
S ru
unat="server" />
<p>
bel id=Label1 runat="ser

<asp:Lab rver" />
<
</form>
</bod
dy>
</htm
ml>
?

%
= :

<html
l>
<head
d>
<
<script lang
r">
void Pag
ge Load(Object Sender, EventArgs
E e)
) {
Cale
endar1.SelectionMode (CalendarSel
lectionMode)lstSelMode.SelectedIndex;
if (Calendar1.SelectionMode
e Calenda
arSelectionM
Mode.None)
Calendar1.SelectedDates
s.Clear();
}
te Selected(object s, Ev
void Dat ventArgs e) {
swit
tch (Calendar1.SelectedD Dates.Count)
) {
case (0): //None
Label1.Text "No dates
d are cu
urrently sel
lected";
break;
case (1): //Day
Label1.Text "The selected da
ate is " +
Calen tedDate.ToShortDateStrin
ndar1.Select ng();
break;
case (7): //Week
Label1.Text "The selection is
i a week beeginning " +
ndar1.Select ng();
break;
default: //Month
i a month beginning
b " +
ndar1.Select ng();
break;
}
}
<
</script>
</hea
ad>
<body
y>
<h3><font fa
< ace "Verdana">Date Selec
ction Modes<
</font></h3>
>
<
<p>
<
<form runat server>
Choose a Selection Mode:

M
<asp:Dro
opDownList id
d="lstSelMod
de" runat=se
erver
Auto
oPostBack=tru
ue>
p:ListItem Value="None" >None</asp:
<asp :ListItem>
p:ListItem Se
<asp elected Valu
ue="Day" >Da
ay</asp:List
tItem>
p:ListItem Value="DayWee
<asp ek" >DayWeek
k</asp:ListI
Item>
p:ListItem Value="DayWee
<asp ekMonth" >Da
ayWeekMonth<
</asp:ListIt
tem>
?

%
= :
ropDownList>
</asp:Dr
<p>
<asp:Cal
lendar id=Calendar1 runa
at="server"
onse
electionchang
ged="Date Se
elected"
Font
t-Names="Arial" Font-Siz
ze="12px"
Heig
ght="180px" Width="200px
W x"
Sele
ectorStyle-BackColor="ga
ainsboro"
Toda
ayDayStyle-BackColor="ga
ainsboro"
DayH
HeaderStyle-B
BackColor="g
gainsboro"
Othe
erMonthDaySty
yle-ForeColo
or="gray"
Titl
leStyle-BackC
Color="gray"
"
Titl
leStyle-Font-Bold="True"
"
Titl
leStyle-Font-Size="12px"
"
Sele
ectedDayStyle
e-BackColor=
="Navy"
Sele
ectedDayStyle
e-Font-Bold=
="True"
/>
<p>
<asp:Lab rver" />
<
</form>
</bod
dy>
</htm
ml>
<html
l>
<head
d>
<
<script lang
r">
void Dat
te Selected(object sende
er, EventArg
gs e) {
swit
tch (Calendar1.SelectedD
Dates.Count)
) {
case (0): //None

Label1.Text "No dates
d are cu
urrently sel
lected";
break;
case (1): //Day
Label1.Text "The selected da
ate is " +
ndar1.Select ng();
break;
case (7): //Week
i a week beeginning " +
ndar1.Select ng();
break;
default: //Month
i a month beginning
b " +
ndar1.Select ng();
break;
}
}
<
</script>
</hea
ad>
?

%
= :
<body
y>
<h3><font fa
< ace "Verdana">Selection Link Graphi
ics</font></
/h3>
<
<p>
<
<form runat server>
lendar id=Calendar1 runa

<asp:Cal at="server"
onse
electionchangged="Date Seelected"
DayN
NameFormat="Short"
Sele
ectionMode="DDayWeekMonthh"
Font
t-Names="Verddana;Arial" Font-Size=""12px"
Heig
ght="180px" Width="230px
W x"
Toda
ayDayStyle-Font-Bold="Tr rue"
DayH
HeaderStyle-Font-Bold="T True"
Othe
erMonthDayStyyle-ForeColoor="gray"
Titl
leStyle-BackCColor="#33666ff"
Titl
leStyle-ForeCColor="whitee"
Titl
leStyle-Font-Bold="True" "
Sele
ectedDayStylee-BackColor=="#ffcc66"
Sele
ectedDayStylee-Font-Bold=="True"
tMonthText = "<img src='images/mont
Next thright.gif' border=0>"
Prev
vMonthText thleft.gif' border 0>"
"<img src 'images/mont
ectorStyle BackColor "#9
Sele 99ccff"
Sele
ectWeekText "<img src 'images/sel
lweek.gif' border
b 0
onmou
useover this.style.backgroundColor '#ffcc66'
useout this.style.backgroundColor '#99ccff'>"
onmou
Sele
ectMonthText "<img src elmonth.gif' border 0
c 'images/se
onmou
useover this.style.backgroundColor '#ffcc66'
useout this.style.backgroundColor '#99ccff'>"
onmou
/>
<p>

<asp:Lab rver" />
<
</form>
</bod
dy>
</htm
ml>
File
eUpload
Muesstra un contrrol de cuadro
o de texto y un botón de búsqueda que
q permiten
n a los usuariios
seleccionar un archivo para caargarlo al servidor.
La claase FileUploaad muestra un

u control dee cuadro de texto y un botón de búsq queda que
permmiten a los ussuarios selecccionar un arcchivo en el cliente y carggarlo en el seervidor Web. El
?

%
= :
usuarrio especificaa el archivo que

q desea caargar escribie
endo su rutaa de acceso ccompleta en el
equip
po local (por ejemplo, C:\\MyFiles\TeestFile.txt) en
n el cuadro de
d texto del ccontrol. Tam
mbién !
puede seleccionaar el archivo haciendo clicc en el botón
n Examinar y buscándolo o después en
n el
cuadrro de diálogoo Elegir archivo.
El con
ntrol FileUpload no guarrda automátiicamente un archivo en el e servidor después de que el
usuarrio lo seleccione para carrgarlo. Debe proporcionaar explícitam mente un con ntrol o un
mecaanismo que permita
p al ussuario enviarr el archivo especificado.
e Por ejemplo o, proporcionne un
botónn donde el usuario pueda hacer clic para p cargar el
e archivo. El código que escriba paraa
guarddar el archivo o especificaddo debe llam
mar al método ue guarda el contenido de un
o SaveAs, qu
archivvo en una ru uta especificaada del servidor. Normalmente, se llaama al méto odo SaveAs ene un
métoodo de contro ol de eventoos para un evvento que iniicia una devo olución de daatos al servid
dor.
Por ejemplo,
e si prroporciona un
u botón quee permite en nviar un archivo, podría in
ncluir un cód
digo
para guardar el archivo en el método de control
c del evento hacer clic.
Antess de llamar al
a método SaaveAs para guardar el arcchivo en el seervidor, commpruebe por
medio de la propiedad HasFile si el contro d contiene un archivo. Si la propiedad
ol FileUpload d
HasFiile devuelve true, llame al método SaaveAs. Si devvuelve false,, muestra unn mensaje al
usuarrio que indicca que el control no contiiene un archivo. No compruebe la prropiedad
PosteedFile para averiguar si existe
e hivo para carrgar, porque esta propiedad contiene
un arch e de
maneera predeterminada 0 byytes. Como co onsecuenciaa, la propiedaad PostedFilee devuelve un
u
valor no nulo aun nque el contrrol FileUploaad esté en blanco.
Cuando llame al método

m SaveeAs, especifique la ruta de
d acceso completa del d directorio en el
que deba
d guardarse el archivo o cargado. Si no especificca explícitam
mente una ru uta de acceso o en
el códdigo de su applicación, se producirá unna excepciónn cuando un usuario inteente cargar un u
archivvo. Este commportamiento o ayuda a mantener seguros los arch hivos del servvidor, al impedir
que los usuarios puedan
p escribir en ubicaciones arbitrrarias de la estructura
e dee directorios de la
aplicaación y, a la vez,
v evitar el acceso a loss directorioss raíz confideenciales.
El méétodo SaveAs escribe el archivo

a cargaado en el dirrectorio espeecificado. Por consiguiente, la
aplicaación ASP.NEET debe teneer derechos de d escritura en el directo orio del serviidor. La apliccación
dispo
one de dos medios
m para obtener
o acceeso de escritura. Se pued de otorgar exxplícitamente e
accesso de escritura a la cuentta bajo la cuaal se ejecuta la aplicación
n, en el direcctorio dondee
deseee guardar loss archivos caargados. O biien, puede aumentar el nivel
n de conffianza que se e
conceede a la apliccación ASP.N
NET.
Utilicce la propiedad FileNamee para obtener el nombre e de un archivo de un clieente que dessee
cargaar utilizando el control FileUpload. El nombre de archivo que devuelve essta propiedad d no
incluyye la ruta dee acceso al arrchivo en el cliente.
c
La propiedad FileContent obttiene un objeeto Stream que señala a un archivo p para cargarlo.
Utilicce esta propiedad para ob btener accesso al conteniido del archivvo en forma de bytes. Poor
ejemplo, puede usaru el objeto o Stream devvuelto por laa propiedad FileContent
F para leer el
conteenido del arcchivo en formma de bytes y almacenarlo en una maatriz de bytees. O bien, pu uede
utilizaar la propied
dad FileBytess para recupeerar todos lo
os bytes del archivo.
a
?

%
= :
La propiedad PosstedFile obtieene el objeto o HttpPosted dFile subyaceente para el archivo que se va
a carggar. Puede utilizar
u esta propiedad
p paara tener accceso a otras propiedades
p del archivo. La "
propiiedad Conten ntLength obttiene la longgitud del archhivo. La prop
piedad ConteentType obtie ene el
tipo de
d contenido o MIME del archivo.
a Tam
mbién puede utilizar la pro opiedad PosstedFile paraa
obtenner acceso a la propiedad d FileName, la propiedad d InputStream y el métod do SaveAs. Por
P
otro lado, la prop
piedad FileNaame, la prop piedad FileCo ontent y el método
m SaveA As proporcio
onan
la missma funcionalidad.
Un prrocedimiento o para proteegerse de los ataques porr denegaciónn de servicio consiste en

limitaar el tamañoo de los archivos que pueeden cargarse e, por medioo del control FileUpload.
Estabblezca un lím
mite de tamañ ño que sea adecuado para los tipos ded archivos qque prevea que
q se
cargaarán. El límitee de tamañoo predeterminado es de 4096
4 KB (4 MB).
M Puede p permitir la carga
de arrchivos mayo ores establecciendo el atriibuto maxReequestLength h del elemennto httpRunttime.
Para aumentar el tamaño máximo de arch hivo permitid
do para la ap
plicación com
mpleta, definna el
atribuuto maxReq uestLength e el archivo
en o Web.configg. Para aumeentar el tamaaño máximo de
archivvo permitido o para una página determ minada, definna el atributo
o maxRequeestLength en n el
elemento location del archivo o Web.configg.
Durante la carga de archivos grandes,

g un usuario también podría recibir el meensaje de errror
siguieente:
aspneet_wp.exe (P PID: 1520) was

w recycled because
b mem
mory consum
mption exceeeded 460 MB
B (60
perceent of availab
ble RAM).
Si los usuarios recciben este mensaje

m de errror, aumentte el valor deel atributo m
memoryLimit en el
elemento processsModel del archivo
a Web.config de la aplicación. El atributo m memoryLimitt
especcifica la cantidad de memmoria máximma que puede e utilizar un proceso
p de ttrabajo. Si el
proceeso de trabajjo rebasa la cantidad
c esp
pecificada po or memoryLimit, se crea un proceso
nuevo para reemplazarlo, y see reasignan todas
t las solicitudes actu
uales al nuevvo proceso.
Puede controlar si
s el archivo cargado se almacena
a tem
mporalmentee en la memoria o en el
dor, mientraas se procesaa la solicitud, estableciendo el atributto
servid
requeestLengthDisskThreshold d del elementto httpRuntime. Este atributo permitte administraar el
tamaño del búferr de la secuencia de entraada. El valor predetermin nado es 256 bytes. El vallor
especcificado no debe
d excederr del valor esspecificado para
p el atribu
uto maxRequ uestLength
En el ejemplo de código siguieente se mueestra cómo crrear un control FileUploaad que guardda los
archivvos en una ruta
r pecifica en el código. Se llama al méttodo SaveAs para
de accesso que se esp
guard
dar el archivo d acceso esspecificada en el servidorr.
o en la ruta de
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt runat "server">
pro
otected void
d UploadButton Click(obj
ject sender,
, EventArgs e)
{
/ Specify the
// t path on the server to
t
?

%
= :
// save the uploaded file to.

/
S
String saveP
Path @"c:\temp\uploads
s\";
)
//
/ Before at
ttempting to perform ope
erations
/
// on the file, verify that the Fil
leUpload
/
// control contains
c a file.
i
if oad1.HasFile)
(FileUplo
{
// Get the
e name of the file to up
pload.
String fileName FileUpload1.Fil
leName;
// Append the name of the file to

o upload to the path.
savePath + fileName;
he SaveAs method to save

// Call th e the
// uploade
ed file to the specifiedd path.
xample does not perform all
// This ex
cessary error checking.
// the nec
// If a file with the same name
y exists in the specifie
// already ed path,
// the uploaded file overwrites it.
i
FileUpload
d1.SaveAs(sav
vePath);
// Notify the user of the name of

f the file
// was sav
ved under.
UploadStat
tusLabel.Text "Your fi
ile was save
ed as " + fi
ileName;
}
e
else
{
// Notify the user that a file wa
as not uploa
aded.
UploadStat
tusLabel.Text "You did
d not specif
fy a file to
o upload.";
}
}
</scr
ript>
<html
l >
<head ver">
<
<title>FileUUpload Example</title>
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
<h4>Selec
ct a file to upload:</h4
4>
<asp:File
eUpload id "FileUpload1"
"
runat
t "server">
</asp:FileUpload>
<br /><br
r />
<asp:Butt
ton id "UploadButton"
Text "Upload file"
OnClick "UploadButton Click"
"
runat
t "server">
</asp:But
tton>
<hr />
<asp:Labe
el id "UploadStatusLabel
l"
runat
t "server">
</asp:Lab
bel>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
En el ejemplo de código siguieente se mueestra cómo crrear un control FileUploaad que guard da los
archivvos en un directorio espeecificado del sistema de archivos de la aplicación n. La propied dad
Syst tem.Web.Ht ttpRequest t.Physical lApplicati ionPath perrmite obtene er la ruta física del
sistem
ma de archivvos del directtorio raíz parra la aplicación de servid
dor actualmeente ejecutad da. Se
?

%
= :
llamaa al método SaveAs

S para guardar el archivo
a en la ruta de acceeso especificcada en el
servid
dor. *
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt runat "server">
protected vo
p oid UploadButton Click(oobject sende
er, EventArggs e)
{
// Save the uploaded file to ann "Uploads" directory
// that already exists in the file
f system of the
// curre
ently executing ASP.NET applicationn.
// Creat
ting an "Uploads" directtory isolate
es uploaded
// files in a separate directorry. This hel
lps prevent
// users from overwriting existting applica
ation files by
// uploa
ading files with
w names like
l "Web.co
onfig".
string saveDir @"\Uploads\";
// Get the
t physical file system
m path for the
t currentl
ly
// execu
uting application.
string appPath
a Request.Physic
calApplicati
ionPath;
// Befor
re attempting to save thhe file, ver
rify
// that the FileUpload control contains a file.
if (File
eUpload1.HasFile)
{
string savePath appPath + saveDir +
Server.HtmlEncode(FileU
Upload1.File
eName);
// Call
C the SaveAs method to
t save the
// uploaded
u file to the spe
ecified path
h.
// This
T example does not pe
erform all
// the
t necessary error chec
cking.
// If a file with the same name
// already
a exists in the sp
pecified pat
th,
// the
t uploaded file overwr
rites it.
File
eUpload1.SaveAs(savePathh);
// Notify
N the user that the
e file was uploaded
u suc
ccessfully.
Uplo
oadStatusLabel.Text "Y as uploaded successfully.";
Your file wa
}
else
{
// Notify
N the user that a file
f was not
t uploaded.
Uplo
oadStatusLabel.Text You did not specify a file
"Y f to uplo
oad.";
}
}
</scr
ript>
<html
l >
<head
d id "Head1" runat "servver">
<
<title>FileUUpload Class Example</ti
itle>
</hea
ad>
<body
y>
<
<h3>FileUplooad Class Example: Save To Applicat
tion Directo
ory</h3>
<
id "fo
<
<div>
<h4>Selec
4>
<asp:File
"
runat
t "server">
</asp:FileUpload>
<br/><br/>
<asp:Butt
Text "Upload file"
"
runat
t "server">
?

%
= :
</asp:But
tton>
<hr />
<asp:Labe
l"
runat
t "server">
</asp:Lab
bel>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
r de accesso que se esppecifica en el código. El control
c limitaa el tamaño de
archivvo que se puuede cargar a 5 MB. La propiedad PostedFile se utiliza
u para obtener accesso a
la pro
opiedad ContentLength subyacente
s y devolver el tamaño dell archivo. Si eel tamaño de el
archivvo que se caarga es inferior a 2 MB, see llama al mé
étodo SaveA As para guard darlo en la ru
uta
especcificada del servidor.
s Adeemás de com mprobar la co onfiguración de tamaño máximo de
archivvo en el código de la aplicación, pued de estableceer el atributo
o maxRequesstLength del
elem mento http pRuntime en n un tamaño o máximo permitido, en el e archivo dee configuración de
la apllicación.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt runat "server">
protected vo
p oid UploadButton Click(o
object sende
er, EventArg
gs e)
{
// Specify the path on the serv
ver to
string savePath @"c:\temp\upl
loads\";
// Befor
re attempting to save th
he file, ver
rify
if (File
eUpload1.HasFile)
{
// Get
G the size in bytes of
f the file to
t upload.
int fileSize FileUpload1.PostedFile.
.ContentLeng
gth;
// Allow
A only files less th
han 2,100,00
00 bytes (ap
pproximately
y 2 MB) to be
uploa
aded.
if (fileSize < 2100000)
{
// Append the name of the

t uploaded
d file to th
he path.
savePath + Server.HtmllEncode(File
eUpload1.Fil
leName);
// Call the SaveAs meth

hod to save the
e specified path.
// uploaded file to the
// This exam
mple does no
ot perform all
a
// the necessary error checking.
// If a file with the same
s name
// already exists in th
he specified
d path,
// the uploaded file ov
verwrites it
t.
FileUpload1.SaveAs(save
ePath);
// Notify the user thatt the file was

w d successfully.
uploaded
UploadStatusLabel.Text "Your fil aded successfully.";
le was uploa
}
else
e
{
// Notify the user why their file was not upl
loaded.
UploadStatusLabel.Text "Your fil
le was not uploaded
u bec
cause " +
"it excee
eds the 2 MB
B size limit
t.";
}
?

%
= :
}
else
{
// Notify
N the user that a file
f was not
t uploaded.
Uplo
oadStatusLabel.Text You did not specify a file
"Y f to uplo
oad.";
}
}
</scr
ript>
<html
l >
<head ver">
<
<title>FileUUpload Class Example</ti
itle>
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
<h4>Selec 4>
<asp:File
"
runat
t "server">
</asp:FileUpload>
<br/><br/>
<asp:Butt
Text "Upload file"
"
runat
t "server">
</asp:But
tton>
<hr />
<asp:Labe
l"
runat
t "server">
</asp:Lab
bel>
</div>
<
<
</form>
</bod
dy>
</htm
ml>
r de accesso que se esp pecifica en el código. Este ejemplo sóólo permite cargar
c
archivvos con la exxtensión .docc o .xls. Se llaama al método Path.Ge etExtensio on para devo olver
la exttensión del archivo
a que se
s carga. Si el e archivo tiene una exten nsión .doc o .xls, se llamaa al
métoodo SaveAs para
p guardarrlo en la ruta especificadaa del servido or.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt runat "server">
protected vo
p ect sender, EventArgs e)
oid UploadBtn Click(obje e
{
// Specify the path on the serv
ver to
string savePath @"c:\temp\upl
loads";
// Befor
re attempting to save th
he file, ver
rify
if (File
eUpload1.HasFile)
{
// Get
G the name of the file
e to upload.
.
string fileName Server.Ht
tmlEncode(Fi
ileUpload1.F
FileName);
// Get
G the extension of the
e uploaded file.
f
string extension System.I
IO.Path.GetE
Extension(fi
ileName);
?

%
= :
// A
Allow only files with .ddoc or .xls extensions
// to
t be uploaded.
if ((extension ".doc") | (extension
n ".xls"))
{
// Append the name of the
t file to upload to the
t path.
savePath + fileName;
// Call the SaveAs meth

hod to save the
// uploaded file to the
e specified path.
// This exam
mple does no
ot perform all
a
// the necessary error checking.
// If a file with the same
s name
// already exists in th
he specified
d path,
// the uploaded file ov
verwrites it
t.
FileUpload1.SaveAs(save
ePath);
// Notify the user thatt their file

e was succes
ssfully uplo
oaded.
UploadStatusLabel.Text "Your fil aded successfully.";
le was uploa
}
else
e
{
// Notify the user why their file was not upl
loaded.
UploadStatusLabel.Text "Your fil
le was not uploaded
u bec
cause " +
"it does not have a .doc or .xls extension.";
}
</scr
ript>
<html
l >
<head ver">
< Upload Class Example</ti
<title>FileU itle>
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
<h4>Sele
ect a file to upload:</h
h4>
<asp:FileUpload id "FileUpload1
1"
runa
at "server">
</asp:FileUpload>
<br/><br
r/>
<asp:But
tton id "UploadBtn"
t "Upload file"
Text
OnClick "UploadBtn Click"
runa
at "server">
</asp:Bu
utton>
<hr />
<asp:Lab
bel id "UploadStatusLabe
el"
runa
at "server">
</asp:La
abel>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c FileUpload : Syste
em.Web.UI.Pa
age
{
p
protected vo
oid Button1 Click(object
t sender, Ev
ventArgs e)
{
if (File
eUpload1.HasFile)
?

%
= :
{
Labe
el1.Text "File Length: "
+
File
eUpload1.FileBytes.Lengt
th
+
"<br
r />"
+
"File Name: "
+
File
eUpload1.FileName
+
"<br
r />"
+
"MIM
ME Type: "
+ FileUpload1.PostedFile.Co
ontentType;
File
eUpload1.SaveAs(
MapP
Path("~/Uploads/" + File
eUpload1.Fil
leName));
}
else
{
Labe
el1.Text "N
No file rece
eived.";
}
}
}
Pan
nel
Repreesenta un co
ontrol que acctúa como co ontenedor de e otros contrroles. El conttrol Panel ess un
conteenedor de ottros controlees. Resulta esspecialmentee útil si desea generar coontroles med diante
progrramación, occultar o mosttrar un grupo o de controle
es o adaptarr un grupo dee controles.
La propiedad Direection es útill para adaptaar el contenido de un conntrol Panel ccon el fin de
mostrar texto parra idiomas que se escribeen de derech da, como el áárabe o el hebreo.
ha a izquierd
El con
ntrol Panel proporciona
p varias propieedades que le permiten personalizarr el
comp portamiento y la presentación de su contenido.
c Utilice
U piedad BackImageUrl para
la prop
mostrar una imaggen personallizada del control Panel. Utilice la proopiedad Scro
ollBars para
especcificar las barras de desp
plazamiento del
d control.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<hea
ad>
<
<title>Panel Example</title>
ipt runat "server">
<scri
?

%
= :
void Page
e Load(Object sender, Ev
ventArgs e) {

// Sho
ow or hide the Panel con
ntents.
if (Ch
heck1.Checked) {
nel1.Visible false;
Pan
}
else {
Pan
nel1.Visible true;
}
nerate the Label control

// Gen ls.
int nu
umlabels Int32.Parse(D
DropDown1.Se
electedItem.Value);
for (int i 1; i< numlabels; i++)

i {
Lab
bel l new Label();
l.T
Text "Label" + (i).ToS
String();
l.ID "Label" + (i).ToStr
ring();
Pan
nel1.Controls.Add(l);
nel1.Controls.Add(new Li
Pan ol("<br />"));
iteralContro
}
nerate the Textbox contr

// Gen rols.
int nu
umtexts Int32.Parse(Dr
ropDown2.Sel
lectedItem.V
Value);
for (int i 1; i< numtexts; i+++) {

Tex
xtBox t new
w TextBox();
;
t.T
Text "TextBox" + (i).T
ToString();
t.ID "TextBox" + (i).ToSString();
Pan
nel1.Controls.Add(t);
nel1.Controls.Add(new Li
Pan ol("<br />"));
iteralContro
}
}
<
</script>
</he
ead>
<bod
dy>
<
<h3>Panel Ex
xample</h3>
<
<form id "fo
<asp:Pane
el id "Panel1" runat "se
erver"
Back
kColor "gainsboro"
Heig
ght "200px"
Widt
th "300px">
el1: Here is some static

Pane c content...
.
<br />
nel>
</asp:Pan
<br />
Generate Labels:
<asp:Drop
pDownList id "DropDown1"
" runat "ser
rver">
<asp:L
ListItem Value "0">0</as
sp:ListItem>
>
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
</asp:Dro
opDownList>
<br />
Generate TextBoxes:
<asp:Drop
pDownList id "DropDown2"
" runat "ser
rver">
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
<asp:L
sp:ListItem>
>
</asp:Dro
opDownList>
?

%
= :
<br />
<asp:Chec
ckBox id "Check1" Text "Hide
" Panel"
" runat "ser
rver"/>
<br />
<asp:Butt
ton ID "Button1" Text "R
Refresh Pane
el" runat "s
server"/>
<
</form>
</bo
ody>
</ht
tml>
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c Panel Control : Sy
ystem.Web.UI
I.Page
{
p
protected vo
oid Button2 Click(objectt sender, Ev
ventArgs e)
{
Panel1.V
Visible !Panel1.Visibl
le;
}
p
protected vo
ventArgs e)
{
Unit lef
ft new Unit(Panel1.Sty
yle["left"])
);
left n
new Unit((double)left.Vaalue 10, left.Type);
l
Panel1.Style["left"] left.ToS
String();
}
p
protected vo
ventArgs e)
{
Unit lef
ft new Unit(Panel1.Sty
yle["left"])
);
left n
new Unit((double)left.Vaalue + 10, left.Type);
l
Panel1.Style["left"] left.ToS
String();
}
}
?

%
= :
<html
l>
<head
d>
!
<
<script lang
r">
void Pag
ge Load(Object sender, EventArgs
E e)
) {
// Show/Hide Panel Contents

s
if (Check1.Checked) {
ble false;
Panel1.Visib
}
else
e {
Panel1.Visib
ble true;
}
// Generate
G label controls
int numlabels DropDown1.Se

int.Parse(D electedItem.Value);
for (int i 1; i< numlabels;; i++) {

System.Web.UI.WebContro
ols.Label l new
Syste
em.Web.UI.We
ebControls.Label();
l.Text "Label" + i.To
oString();
l.ID "Label" + i.ToSt
tring();
Panel1.Controls.Add(l);
;
Panel1.Controls.Add(new
w LiteralCon
ntrol("<br>"
"));
}
// Generate
G textbox control
ls
int numtexts int.Parse(Dr

ropDown2.Sel
lectedItem.V
Value);
for (int i 1; i< numtexts; i++) {

System.Web.UI.WebContro
ols.TextBox t new
Syste
em.Web.UI.We
ebControls.TextBox();
t.Text "TextBox" + i.ToString();
;
t.ID "TextBox" + i.To
oString();
Panel1.Controls.Add(t);
;
Panel1.Controls.Add(new
w LiteralCon
ntrol("<br>"
"));
}
}
<
</script>
</hea
ad>
<body
y>
<
<h3><font fa
ace "Verdana">Panel Exam
mple</font><
</h3>
<
<form runat server>
nel id="Panel1" runat="s

<asp:Pan server"
Back
kColor="gainsboro"
Heig
ght="200px"
Widt
th="300px">
Paneel1: Here is some static

c content...
.
<p>
anel>
</asp:Pa
<p>
Generate
e Labels:
opDownList id
ver">
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
ropDownList>
</asp:Dr
<br>
Generate
e TextBoxes:
opDownList id
ver">
?

%
= :
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
<asp /asp:ListIte
em> "
<asp /asp:ListIte
em>
<asp /asp:ListIte
em>
ropDownList>
</asp:Dr
<p>
eckBox id="Ch
<asp:Che heck1" Text=
="Hide Panel
l" runat="se
erver"/>
<p>
tton Text="Re
<asp:But efresh Panel
l" runat="se
erver"/>
</font>
<
<
</form>
dy>
</bod
</htm
ml>
MulltiView y View
Multiview
Repreesenta un co ontrol que acctúa como co ontenedor de e un grupo ded controles View. El control
MultiView es un contenedor para un grup po de controoles View. Peermite definiir un grupo ded
contrroles View en n el que cadaa control Vie ew contiene controles seecundarios. A continuació ón, la
aplicaación puede representarr un control View V concreto en el cliennte basándosse en criterioos
como o la identidad d del usuario o, las prefereencias del usuario e inforrmación pasaada en un
parám metro de cad dena de conssulta. El conttrol MultiVie ew también se s puede utilizar para crear
asisteentes. En estte escenario,, cada contro ol View conte enido en un control MultiView
repreesenta un paso o página diferente deel asistente. Este E control también se d debe utilizar para
desarrrollar aplicaciones de múltiples panttallas para dispositivos móviles.
m Sólo se puede de efinir
un coontrol View a la vez como o vista activaa en un control MultiView w. Cuando u un control View
está definido
d com mo la vista acctiva, los conntroles secunndarios que contiene
c se rrepresentan en el
clientte. Puede utiilizar la proppiedad ActiveeViewIndex o el método SetActiveVieew para definir la
vista activa. Si la propiedad
p A
ActiveViewIn ol MultiView no represen
dex está vaccía, el contro nta
conteenido en el cliente.
c Si la vista
v activa se establece en un contro ol View que no existe en el
contrrol MultiView w, se producce una excep pción Argume entOutOfRan ngeException n en tiempo de
ejecuución.
La vissta activa se puede definir mediante programació ón o mediante declaració ón. Si la

propiiedad Active eViewIndex ses establece mediante de eclaración all definir el co
ontrol MultiV
View,
se proovoca que el control View estableciddo como la vista activa see representee en el cliente
e la
primeera vez que ses llama al co
ontrol MultiV
View. En el ejemplo
e de código
c siguieente se muesstra
cómo o establecer la propiedad d ActiveView
wIndex mediante declaraación.
<asp::MultiView id
d="MultiView
w1" ActiveViiewIndex=0 runat="Serveer">
Si la propiedad
p AcctiveViewInd dex se estab
blece mediannte programaación o mediiante una llamada
al méétodo SetActtiveView, la aplicación puuede determminar qué control View see va a
repreesentar en el cliente en tiempo de ejeecución segú
ún criterios como
c la identtidad o las
prefeerencias del usuario.
u
?

%
= :
Para permitir a lo
os usuarios desplazarse entre
e los controles View dentro de un n control
MultiView, puede agregar un n control LinkkButton o Bu
utton a cada control Vieww. Para )
aprovvecharse de la actualizacción automáttica en el conntrol MultiViiew del conttrol View
actuaalmente activvo, establezcca la propied
dad Comman ndName del botón o botón de vínculo en
el vallor de uno dee los camposs de nombre de comando o siguientes que corresponda al
comp portamiento de desplazamiento deseeado: PreviousViewComm mandName,
NextV ViewCommaandName, Sw witchViewByIDCommand dName o
SwitcchViewByIndexCommand dName.
En el ejemplo de código siguieente se mueestra cómo utilizar un con ntrol MultiView para cre ear
una encuesta
e bássica. Cada control View es
e una pregunta independiente de la encuesta.
Cuando el usuario n el botón Anterior en cu
o hace clic en ualquier pággina, el valor de la propie
edad
ActivveViewIndexx disminuye para
p desplazarse al contrrol View anteerior. Cuando el usuario hace
clic en el botón Siguiente en cualquier
c página, el valor de la propiedad ActiveV ViewIndex
aumeenta para desplazarse al control View w siguiente.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<head
d>
<
<title>Multi View ActiveV
ViewIndex Ex
xample</titl
le>
<scri
ipt runat "server">
pro
otected void
d NextButton Command(obj , EventArgs e)
ject sender,
{
/ Determine
// e which button was click
ked
/ and set the
// t ActiveViewIndex prop
perty to
/ the view selected by the user.
//
i (DevPollM
if MultiView.ActiveViewInde
ex > 1 & DeevPollMultiV
View.ActiveV
ViewIndex < 3)
?

%
= :
{
// Increme
ent the Activ
veViewIndex property
// by one to advance to the next view. *
veViewIndex + 1;
DevPollMultiView.Activ
}
e
else if (Dev
vPollMultiView.ActiveVieewIndex 3)
3
{
// This is the final view.
v
// The use
er wants to save the surrvey results
s.
// Insert code here to save surveey results.
// Disable
e the navigation buttonss.
Page4Save.Enabled false;
Page4Resta
art.Enabled false;
}
e
else
{
throw new Exception("AAn error occ
curred.");
}
}
pro
otected voidd BackButton Command(objject sender,
, EventArgs e)
{
i (DevPollM
if MultiView.ActiveViewIndeex > 0 & Dev
vPollMultiVi
iew.ActiveViewIndex < 2)
{
// Decreme
ent the Activ
veViewIndex property
// by one to return to the previoous view.
veViewIndex 1;
}
e
else if (Dev
vPollMultiView.ActiveVieewIndex 3)
3
{
// This is the final view.
v
// The use
er wants to restart the survey.
// Return to the first view.
veViewIndex 0;
}
e
else
{
throw new Exception("A
An error occcurred.");
}
}
</s
script>
</hea
ad>
<body
y>
<
<form id "Fo
orm1" runat "Server">
<h3>Mult
tiView ActiveViewIndex Example</h3>
E >
<asp:Pan
nel id "Page1ViewPanel"
Widt
th "330px"
Heig
ght "150px"
HorizontalAlign "Left"
Font
t size "12"
Back
kColor "#C0C0FF"
derColor "#404040"
Bord
derStyle "Double"
Bord
runa
at "Server">
p:MultiView id "DevPollM
<asp MultiView"
ActiveViewIndex "0"
runat "Server">
<asp:View id "Page1"
runat "Server">
bel id "Page
<asp:Lab e1Label"
Font bold "truee"
Text "What kindd of applica
ations do yo
ou develop?"
runat "Server"
AssociatedContrrolID "Page1
1">
</asp:Label><br /><<br />
<asp:RadioButton id
d "Page1Radi
io1"
Text "Web Appl
lications"
Checked "False
e"
GroupName "Rad
dioGroup1"
?

%
= :
runat "server"
" >
</asp:RadioButton><
<br />

<asp:RadioButton id
d "Page1Radi
io2"
Text "Windows Forms Appli
ications"
Checked "False
e"
GroupName "Rad
dioGroup1"
runat "server"
" >
</asp:RadioButton>
><br /><br /><br
/ />
<asp:Button id "Pag
ge1Next"
Text "Next"
OnClick "NextBu
utton Comman
nd"
Height "25"
Width "70"
runat "Server"">
</asp:Button>
</asp:View>
runat "Server">
<asp:Lab
bel id "Pagee2Label"
Font bold "truee"
Text "How long have you beeen a develo
oper?"
runat "Server"
2">
<asp:RadioButton id
d "Page2Radi
io1"
Text "Less tha
an five year
rs"
Checked "False
e"
GroupName "Rad
dioGroup1"
runat "Server"
">
</asp:RadioButton>
><br />
<asp:RadioButton id
d "Page2Radi
io2"
Text "More tha
an five year
rs"
Checked "False
e"
GroupName "Rad
dioGroup1"
runat "Server"
">
</asp:RadioButton>
><br /><br /><br
/ />
<asp:Button id "Pag
ge2Back"
Text "Previou
us"
OnClick "BackBu
utton Comman
nd"
Height "25"
Width "70"
runat "Server"">
</asp:Button>
<asp:Button id "Pag
ge2Next"
Text "Next"
OnClick "NextBu
utton Comman
nd"
Height "25"
Width "70"
runat "Server">
>
</asp:Button>
</asp:View>
runat "Server">
<asp:Lab
bel id "Pagee3Label1"
Font bold "truee"
Text "What is your primar ry programmi
ing language
e?"
runat "Server"
3">
<asp:RadioButton id
d "Page3Radi
io1"
Text "Visual Basic
B .NET"
Checked "False
e"
GroupName "Rad
dioGroup1"
runat "Server"
">
?

%
= :
</asp:RadioButton>
><br />
<asp:RadioButton id
d "Page3Radi
io2"
Text "C#"
Checked "False
e"
GroupName "Rad
dioGroup1"
runat "Server"
">
</asp:RadioButton>
><br />
<asp:RadioButton id
d "Page3Radi
io3"
Text "C++"
Checked "False
e"
GroupName "Rad
dioGroup1"
runat "Server"
">
</asp:RadioButton>
><br /><br />
/
<asp:Button id "Pa
age3Back"
Text "Previou
us"
OnClick "BackBu
utton Comman
nd"
Height "25"
Width "70"
runat "Server">
>
</asp:Button>
<asp:Button id "Pag
ge3Next"
Text "Next"
OnClick "NextBu
utton Comman
nd"
Height "25"
Width "70"
runat "Server">
>
</asp:Button><br />
>
</asp:View>
runat "Server">
<asp:Lab
bel id "Labeel1"
Font bold "truee"
Text "Thank you
y for taki
ing the surv
vey."
runat "Server"
AssociatedContrrolID "Page44">
</asp:Label>
<br /><b
br /><br /><
<br /><br />
><br />
<asp:Button id "Pag
ge4Save"
Text "Save Re
esponses"
OnClick "NextBu
utton Comman
nd"
Height "25"
Width "110"
runat "Server">
>
</asp:Button>
<asp:Button id "Pag
ge4Restart"
Text "Retake Survey"
OnClick "BackBu
utton Comman
nd"
Height "25"
Width "110"
runat "Server"">
</asp:Button>
</asp:View>
</asp:MultiView>
</asp:Pa
anel>
<
</form>
</bod
dy>
</htm
ml>
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
?

%
= :
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c MultiView and Vieww Controls : System.Webb.UI.Page
{
p
protected vo
ventArgs e)
{
MultiVie
ew1.ActiveViewIndex 1;;
}
p
protected vo
ventArgs e)
{
MultiVie
ew1.ActiveViewIndex 2;;
}
p
protected vo
ventArgs e)
{
MultiVie
ew1.SetActiveView((View))MultiView1.
.FindControll("View1"));
}
p
protected vo
Args e)
{
if (!IsP
PostBack)
{
Mult
tiView1.Activ
veViewIndex 0;
}
}
}
?

%
= :
<%@ Page
P Languag
ge="C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
ipt runat "server">
<scri
protected vo
p oid DropDownList1 Select nged(object sender, Eve
tedIndexChan entArgs e)
{
MultiVie
ew1.ActiveViewIndex Co
onvert.ToInt
t32(DropDown
nList1.Selec
ctedValue);
}
</scr
ript>
<html
l xmlns "htt
tp://www.w3.org/1999/xht tml">
<head ver">
< tled Page</title>
<title>Untit
</hea
ad>
<body
y>
<
<form id "fo
<div>
<h3>
>
<font face "Verdana">MuultiView wit
th 3 Views<//font>
</h3>
p:DropDownList ID="DropD
<asp DownList1" runat="serve
r er" AutoPost
tBack="True"
OnSel
lectedIndexC
Changed="Drop pDownList1 SelectedInde
S exChanged">
<asp:ListIteem Value="0"
">View 1</as
sp:ListItem>>
">View 2</as
sp:ListItem>>
">View 3</as
sp:ListItem>>
sp:DropDownList><br />
</as
<hr />
p:MultiView ID="MultiVie
<asp ew1" runat="
"server" ActtiveViewInde
ex="0">
<asp:View IDD="View1" ru
unat="server
r">
Now showwing View #1
1<br />
<asp:TexxtBox ID="Te
extBox1" run
nat="server""></asp:Text
tBox><strong>
</str
rong>
<asp:Button ID="Buttton1" runat
t="server" Text="Button
T n" /></asp:View>
unat="server
r">
2<br />
<asp:HypperLink ID="
"HyperLink1"
" runat="serrver"
Navig
gateUrl="htt
tp://www.asp.net">HyperL Link</asp:Hy
yperLink>
<asp:HypperLink ID="
"HyperLink2"
" runat="serrver"
Navig
gateUrl="htt
tp://www.asp.net">HyperL Link</asp:Hy
yperLink></aasp:View>
unat="server
r">
3<br />
<asp:Calendar ID="CCalendar1" runat="serve
r er"></asp:Ca
alendar>
</asp:View>
sp:MultiView></div>
</as
<
</form>
</bod
dy>
</htm
ml>
View
w
Repreesenta un coontrol que acctúa como co
ontenedor de
e un grupo de
d controles contenidos en
e un
contrrol MultiView
w.
ntrol View es un conteneedor de un grupo

El con g de controles. Un co
ontrol View ssiempre deb
be
estar contenido dentro
d de un
n control MultiView. Sólo
o se puede definir un con
ntrol View a la vez
como o vista activaa en un contrrol MultiView
w.
La propiedad ActiveViewIndeex especifica el control View activo deentro de la ccolección Vie ews
de unn control MuultiView. El control
c de vissta activa se representa en
e el cliente,, siempre y
cuanddo el control MultiView contenedor esté visible. Utilice la propiedad Visible para
deterrminar si un control Vieww y sus contrroles secundaarios están visibles
v en la página y se
repreesentan en el cliente.
?

%
= :
Un co
ontrol View puede
p conteener controlees de cualquier tipo, inclu
uidos otros ccontroles
MultiView. Un co
ontrol View no
n admite prropiedades de d estilo. Parra aplicar esttilos a un con
ntrol
w, agregue un
View no o más con ntroles Panell al control View.
V
La claase View prooporciona loss eventos Activate y Deactivate. Se provoca el evento Activatte
cuand do el control View actual se conviertte en la vista activa. Esto ocurre cuanndo el valor de
d la
propiiedad ActiveeViewIndex cambia
c o se llama al méttodo SetActivveView para especificar unu
contrrol View difeerente. Por ejjemplo, si View1 es la vissta activa en un control M
MultiView,
cuand do cambie laa propiedad ActiveViewI
A ndex para esspecificar Vieew2, se geneerará el even
nto
Activvate para Vieew2 y el even
nto Deactivate para View w1.
os usuarios desplazarse entre

Para permitir a lo e varios controles
c Vie
ew contenidoos en un conntrol
MultiView, puede agregar un n control LinkkButton o Buutton a cada control View
w. Establezcaa la
propiiedad Comm mandName del d control LinkButton o Button en ell Id. del control View al que
q
deseee desplazarse.
Wizzard
Propoorciona exploración y un na interfaz dee usuario (IU) para recop
pilar datos relacionados en
e
varios pasos. Pueede utilizar ell control Wizzard para:
x Recopilarr datos relacionados en varios

v pasos.
x Separar en
e pasos lógiicos menoress una páginaa Web mayorr utilizada paara recopilar
datos pro
oporcionados por el usuaario.
x Permitir la
l exploració
ón lineal o no
o lineal en los pasos.
El con
ntrol Wizard
d está formad omponentes siguientes:
do por los co
x Una coleccción Wizard

dStepCollectiion de pasoss que contien
nen la interfaaz de usuario
o para
cada paso
o, según lo definido
d por el
e desarrollador de páginnas.
x Funcionees de desplazzamiento inteegradas que determinan

n los botoness adecuados para
e función del valor de StepType.
mostrar en
x Un área de
d encabezado que se pu uede personalizar con el fin de mostrrar información
concreta para el paso
o en el que see encuentra el usuario.
x Un área de
d barra lateeral que se pu
uede utilizarr para desplaazarse rápidaamente por los
pasos dell control.
Puede utilizar el control

c Wizaard para:
x Recopilarr datos relacionados en varios

v pasos.
x Separar en
e pasos lógiicos menoress una páginaa Web mayorr utilizada paara recopilar
datos pro
oporcionados por el usuaario.
x Permitir la
l exploració
ón lineal o no
o lineal en los pasos.
?

%
= :
El con
ntrol Wizard
d está formad
do por los co
omponentes siguientes:

x Una coleccción Wizard
dStepCollectiion de pasoss que contien
nen la interfaaz de usuario
o para
cada paso
o, según lo definido
d por el
e desarrollador de páginnas.
x n los botoness adecuados para

Funcionees de desplazzamiento inteegradas que determinan
mostrar en
e función del valor de StepType.
x Un área de
d encabezado que se pu uede personalizar con el fin de mostrrar información
concreta para el paso
o en el que see encuentra el usuario.
x Un área de uede utilizarr para desplaazarse rápidaamente por los

d barra lateeral que se pu
pasos dell control.
Puede utilizar el método

m opiedad ActivveStepIndexx para cambiar
MovveTo o la pro
micamente el
dinám e paso que se muestra acctualmente en el controll Wizard.
El asp
pecto del conntrol Wizard nte personalizable a través de las plantillas, másccaras
d es totalmen
y con uede utilizar las propiedaades HeaderTTemplate,
nfiguración de estilo. Por ejemplo, pu
SideBBarTemplate, StartNavigaationTemplaate, FinishNaavigationTem mplate y
StepNNavigationTeemplate paraa personalizaar la interfaz del control Wizard.
W
Tengaa en cuenta que el control Wizard noo admite la representació

r ón especial d
de Microsoftt
Intern
net Explorerr para el moddo no estánd
dar o quirks. Para obteneer la mejor reepresentació
ón de
Intern
net Explorerr utilizando el
e control Wizzard, use el tipo de docu
umento XHTM ML, que se agrega
de manera predeeterminada en e Visual Web Developerr y en Visual Studio.
El siguiente ejemplo de código muestra có ómo definir un control Wizard

W para rrecopilar el
nomb bre y la direccción del usu
uario, con la opción
o de esscribir una diirección de eenvío por
separrado. Si el ussuario no selecciona SepaarateShippin ngCheckBox y, por lo tan nto, envía una
petición para agreegar una direección de en nvío separada, el control Wizard pasaa directamen nte de
Step2 2 a Finish. En
n el paso Finiish, el usuario tiene la op
pción de volvver al princip
pio del controol
Wizard haciendo clic en GoBaackButton; sin s embargo, lleva al usuaario a Step2,, porque la
propiiedad AllowR Return de Sttep1 está esttablecida en false.
<%@ Page
P Languag
ge "C#" CodeFile "Wizard
dClass.cs" Inherits
I "Wi
izardClasscs aspx" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.oorg/TR/xhtml1/DTD/xhtml11 transition
nal.dtd">
<html
l>
<head ver">
<
<title>ASP.NNET Example</title>
</hea
ad>
<body
y>
<
<form id "foorm1" runat "server">
<
<asp:Wizard ID "Wizard1" runat "ser
rver" OnFini ick "OnFinishButtonClick"
ishButtonCli
BackColoor "#EFF3FB" Font Names "Verdana" Font
F Size "0 erWidth "1px"
0.8em" Borde
BorderCoolor "#B5C7DE" Style "fo edium; font family: Ver
ont size: me rdana;"
OnAct
tiveStepChannged "OnActivveStepChange
ed">
<StepStyyle ForeColor "#333333" Font Size "0.8em"
" />
<WizardSteps>
<aspp:WizardStep ID "Step1" Title "One"" AllowRetur runat "server">
rn "false" r
Welcome to the Wizard example.
e Thi
is step's Al property is set
llowReturn p
to fa
alse,
so after you leave this
s step you will
w not be able to ret
turn to it.
?

%
= :
</asp:WizardStep p>
<asp
p:WizardStep ID "Step2" Title "Two"" runat "ser
rver">
<! ... Put UI element
ts here ... > !
Please enter your billi
ing informat
tion.
<br />
Name:<br />
<asp:TextBox runat "ser
rver" ID "Bi
illingName" Width "226p
px" Height "17px"
/>
<br />
E mail Address:<br />
rver" ID "Em " Width "224px"
mailAddress"
Heigh
ht "17px" />
>
<br />
Address Line 1:
<br />
rver" ID "Bi
illingAddres
ssLine1" Wid
dth "314px"
Heigh
ht "17px" />
>
<br />
Address Line 2:
<br />
rver" ID "Bi
illingAddres
ssLine2" Wid
dth "314px"
Heigh
ht "17px" />
>
<br />
City:
<br />
rver" ID "Bi px" Height "17px"
illingCity" Width "155p
/>
<br />
State:
<br />
rver" ID "Bi
illingState"
" Width "75p
px" Height "17px"
/>
<br />
ZIP Code:
<br />
<asp:TextBox runat "serrver" ID "Bi
illingZip" Height
H "17px
x" />
<br />
<br />
<asp:CheckBox runat "seerver" ID "S
SeparateShip
ppingCheckBo
ox" Text "Please
check
k here if yo
ou would like to add a separate
s shi
ipping addre
ess." />
</asp:WizardStep p>
<asp
p:WizardStep ID "Step3" Title "Thre ee" runat "s
server">
<! Gather the shippin
ng address in
i this stepp if CheckBo
ox1 was selected.
>
Please enter your shippping informa
ation.
<br />
Name:<br />
<asp:TextBox runat "serrver" ID "Sh
hippingName"
" Height "17px" />
<br />
Address Line 1:
<br />
<asp:TextBox runat "serrver" ID "Sh ess1" Width "370px"
hippingAddre
Heigh
ht "17px" />
>
<br />
Address Line 2:
<br />
<asp:TextBox runat "serrver" ID "Sh ess2" Width "370px"
hippingAddre
Heigh
ht "17px" />
>
<br />
City:
<br />
hippingCity"
" Height "17px" />
<br />
State:
<br />
hippingState
e" Width "65px"
Heigh
ht "17px" />
>
<br />
ZIP Code:
<br />
hippingZip" Height "17p
px" />
</asp:WizardStep p>
<asp
p:WizardStep ID "Finish" " Title "Fin
nish" runat "server">
<! Put UI elements he
ere for the Finish step
p. >
<asp:Button runat "servver" ID "GoB ack to Step 2"
BackButton" Text "Go Ba
OnCli
ick "OnGoBac
ckButtonClick"
?

%
= :
ForeColor "#284E98"
" Font Names
s "Verdana" Font Size "1.0em"
erStyle "Solid"
Borde
BorderWidth "1px" BorderColor
B "#507CD1" BackColor
B "WWhite" /> "
</asp:WizardStepp>
<asp
p:WizardStep runat "servver" StepTyp
pe "Complete
e" Title "Coomplete"
ID "C
Complete">
<asp:Label runat "serve
er" ID "Comp
pleteMessage
eLabel" Widtth "408px"
Heigh
ht "24px">
</asp:Label>
</asp:WizardStepp>
</WizarddSteps>
<NavigattionButtonStyle ForeColoor "#284E98"
" Font Names
s "Verdana" Font
Size "1.0em"
Bord
derStyle "Solid" BorderWWidth "1px" BorderColor
r "#507CD1"
BackC
Color "Whitee" />
<HeaderStyle ForeColor "White" HorizontalA er" Font Size "0.9em" Font
Align "Cente
Bold "True"
Back
kColor "#284E98" BorderSStyle "Solid
d" BorderCol
lor "#EFF3FBB"
Borde
erWidth "2pxx" />
<SideBarrStyle VerticalAlign "Toop" Horizont
talAlign "Ce
enter" Font Size "0.8em"
ForeC
Color "#000099"
Back
kColor "#EFF3FB" Width "45px"
" />
<HeaderTTemplate>
<b>W
Wizard Example</b>
</HeaderrTemplate>
<
</asp:Wizardd>
<
</form>
</bod
dy>
</htm
ml>
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using b.UI.WebControls;
g System.Web
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c Wizard Control : System.Web.U
S UI.Page
{
p
protected vo
oid Page Load(object sen nder, EventA
Args e)
{
if (!IsP
PostBack) { Wizard1.Acti
W iveStepIndex
x 0; }
}
p
protected vo
oid Wizard1 FinishButton nClick(objec
ct sender, WizardNaviga
W ationEventArgs e)
{
Wizard1.Visible false; Responnse.Write("F
Finished<br />" + Label1.Text);
}
p
protected vo
oid Wizard1 NextButtonCl
N zardNavigationEventArgs e)
lick(object sender, Wiz
{
if (Wiza
ard1.WizardSteps[e.NextS StepIndex].T
Title "Su
ummary")
{
Labe
el1.Text String.Empty;; foreach (W
WizardStep ws
w in Wizardd1.WizardSteps)
{
foreach (Control c in ws.Controls)
w )
{
if (c is CheckBox)
{
CheckBox cb (CheckBox)c;
; if (cb.Che
ecked)
{
t + cb.Text
Label1.Text t + "<br />"
";
}
}
}
}
}
}
}
?

%
= :
)
<%@ Page
P Languag
ge="C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt languagee "C#" runat "server">
id GetFavoriteNumberOnActiveStepInd
voi dex(Object Sender,
S Even
ntArgs e)
{
L
Label1.Text "Thank you for tellin
ng that your
r favorite number
n is:" +
DropD
DownList1.SeelectedItem.Text;
}
</scr
ript>
<html
l xmlns "htttp://www.w3.org/1999/xhttml">
<head ver">
itle>Simple Single Step Wizard Cont
<ti trol</title>
>
</hea
ad>
<body
y>
<fo
orm id "formm1" runat "server">
<
<div>
<h2>Simple
e Single Stepp Wizard Con
ntrol</h2>
<asp:Wizar
rd ID="Wizardd1" runat="s
server" Acti
iveStepIndex
x="0"
OnAct
tiveStepChannged="GetFavoriteNumberOOnActiveStep
pIndex"
BackColo
or="#FFFBD6" BorderColorr="#FFDFAD" BorderWidth
h="1px" Cell
lPadding="5"
Font-
-Names="Verddana"
Font-Siz
ze="0.8em" Width="322px"">
<WizardSteps>
WizardStep ID
<asp:W D="WizardSte
ep1" runat="
"server" Tit
tle="Step 1">
<str
rong>Wizard Step 1</stroong>
<br /><br />
Favo
orite Number:
p:DropDownList ID="DropD
<asp DownList1" runat="serve
r er">
asp:ListItem>1</asp:List
<a tItem>
<a tItem>
<a tItem>
<a tItem>
<a tItem>
<a tItem>
<a tItem>
<a tItem>
<a tItem>
asp:ListItem>10</asp:Lis
<a stItem>
sp:DropDownList>
</as
<br />
</asp:WizardStep>
WizardStep ID
<asp:W D="WizardSte
ep2" runat="
"server" Tit
tle="Step 2"
StepT
Type="Compleete">
<str
rong>Wizard Step 2</stroong><br />
<br />
p:Label ID="L
<asp Label1" runa
at="server"/
/>
</asp:WizardStep>
</Wizard
dSteps>
<SideBar
rStyle Width "75px" VertticalAlign "Top"/>
"
ard>
</asp:Wiza
<
</div>
</f
form>
</bod
dy>
</htm
ml>
?

%
= :
Xmll
Muesstra un documento XML sin formato o que utilizaa Extensible Stylesheet
S Laanguage *
Transsformations (XSLT). El control Xml se utiliza para mostrar el contenido de un documento
XML sin formato o utilizando transformacciones XSL.
Para especificar el
e documento o XML que se va a mostrrar, establezcca una de lass tres propiedades
que figuran
f a con
ntinuación. Estas tres pro
opiedades representan loos distintos tipos de
documento XML que se pued den mostrar. Se puede mostrar un System.Xml.Xm mlDocumentt, una
cadenna XML o un archivo XML si se establece la propiedad adecuaada. En la sigguiente tablaa se
recoggen las propiiedades paraa especificar el documentto XML.
Propie
edad Descripción
Docuument Establece el docume
ento XML mediante un objjeto
Systemm.Xml.XmlD Document.
Docu
umentConte
ent Establece el docume
ento XML mediante una ca
adena.
Docu
umentSourc
ce Establece el docume
ento XML mediante un arc
chivo.
De manera
m opcional, se puede especificarr una hoja de e estilo de transformació ón XSL (XSLT)) que
da formato al doccumento XM ML antes de que
q se escrib ba éste en la secuencia dee salida
estabbleciendo una de las dos propiedadess que figuran n a continuacción. Las doss propiedade es
repreesentan los diferentes
d tip
pos de hojas de estilo de transformacción XSL que se pueden
utilizaar para dar formato
f al do
ocumento XM ML. Se puede dar formatto al documeento XML
mediante un objeeto System.X Xml.Xsl.XslCo
ompiledTransform o med diante un arcchivo de hojaa de
estilo
o de transforrmación XSL, estableciendo la propied dad adecuad da. Si no se eespecifica nin
nguna
hoja de estilo de transformacción XSL, se mostrará
m el documento
d X
XML con el foormato
predeeterminado. En la siguien nte tabla se enumeran
e laas propiedad des para espeecificar una hoja
h
de esstilos de tran
nsformación XSL.
Propie
edad Descripcción
Transform Aplica fo
ormato al doc
cumento XML
L mediante ell objeto
System.Xml.Xsl.XslTransform esp
pecificado.
?

%
= :
TransformSourc
ce Aplica fo
ormato al doc
cumento XML L mediante ell archivo de h
hoja de estilo
o
de transsformación XS
SL especificad
do.

<!
The following
f ex
xample demonstrates how to create XmlDocument
X and
XslTrransform objects from the sample XM
ML and XSL Transform
T fiiles.
The objects
o are then used by the Xml co
ontrol to di
isplay the XML
X
documment. Make sure the samp e is called People.xml and
ple XML file
the sample
s XSL Transform
T file is called
d Peopletabl
le.xsl.
>
<%@ Page
P Languag
<%@ Import
I Namespace "Systemm.Xml" %>
<%@ Import
I Namespace "Systemm.Xml.Xsl" %>
%
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<s
script runat
t "server">
void Page Load(Object sender, EveentArgs e)
{
XmlDocu
ument doc new XmlDocum
ment();
doc.Loa
ad(Server.MappPath("peopl
le.xml"));
XslTran
nsform trans new XslTr
ransform();
trans.L
Load(Server.MMapPath("peo
opletable.xs
sl"));
xml1.Do
ocument doc;
xml1.Tr
ransform trans;
}
</
/script>
<head
<
<title>Xml C
Class Example</title>
</hea
ad>
<body
y>
<h
h3>Xml Exampple</h3>
ml id "xml1" runat "serv
<asp:Xm ver" />
</form>
</bod
dy>
</htm
ml>
<!
For this
t example
e to work, paste the fol
llowing code
e into a fil
le
d peopletable.xsl. Store the file in
named i the same directory as
a
your .aspx file.
<?xml
l version "1.0" encoding "utf 8"?>
<xsl:stylesheet version "1.0" xmlns:xsl

l "http://ww
ww.w3.org/19
999/XSL/Tran
nsform">
<xs
sl:template match "/Peop
ple">
<
<xsl:apply t
templates select "Person
n" />
</x
xsl:template
e>
<xs
sl:template match "Person">
<
<table h "100%" border "1">
width
<tr>
<td>
<b>
<xsl:value of select "Name/
/FirstName" />

<xsl:value of select "Name/
/LastName" />
/
</b>
</td>
</tr>
<tr>
<td>
<xsl:vvalue of select "Address
s/Street" />
><br />
s/City" />
,
s/State" />
s/Zip" />
</td>
</tr>
?

%
= :
<tr>
<td>
Job Title: <xsl:value of sele
ect "Job/Tit
tle" /><br />
/
Description: <xsl:value of se
elect "Job/D
Description"
" />
</td>
</tr>
<
</table>
</x
xsl:templatee>
<xs
sl:template match "bookstore">
e>
<bookstore
pply templates select "b
<xsl:ap book"/>
</bookstor
re>
</
/xsl:templat
te>
xsl:template
<x e match "book">
<book>
<xsl:atttribute name "ISBN">
<xsl:value of select "@ISBN
N"/>
</xsl:aattribute>
<price>>
<xsl:value of select "price
e"/>
</pricee>
<xsl:teext>
</xsl:ttext>
</book>
</
/xsl:templatte>
</xsl
l:stylesheet
t>
>
<!
For this
t example
e to work, paste the fol
llowing code
e into a fil
le
d people.xml. Store the file in the
named e same direc
ctory as
your .aspx file.
<?xml
l version "1.0" encoding "utf 8" ?>
>
<Peop
ple>
<Pe
erson>
<
<Name>
<FirstName
e>Joe</FirstN
Name>
<LastName>
>Suits</LastN
Name>
<
</Name>
<
<Address>
<Street>1800 Success Way</Street>
W >
<City>Redm
mond</City>
<State>WA<
</State>
<ZipCode>98052</ZipCode>
<
</Address>
<
<Job>
<Title>CEO
O</Title>
<Description>Wears the nice suit<
</Descriptio
on>
<
</Job>
</P
Person>
<Pe
erson>
<
<Name>
<FirstName
e>Linda</FirstName>
<LastName>
>Sue</LastNam
me>
<
</Name>
<
<Address>
<Street>1302 American St.</Street
t>
<City>Paso
o Robles</City>
<State>CA<
</State>
<
</Address>
<
<Job>
<Title>Att
torney</Title>
<Description>Stands up
p for justic
ce</Descript
tion>
<
</Job>
</P
Person>
<Pe
erson>
<
<Name>
<FirstName
e>Jeremy</FirstName>
?

%
= :
<LastName>
>Boards</LastName>
</Name>
<
<
<Address>
<Street>34 Palm Avenue</Street>
<City>Waik
kiki</City>
<State>HI<
</State>
<
</Address>
<
<Job>
<Title>Pro
o Surfer</Title>
<Description>Rides the big waves<
</Descriptio
on>
<
</Job>
</P
Person>
<Pe
erson>
<
<Name>
e>Joan</FirstName>
<FirstName
>Page</LastName>
<LastName>
<
</Name>
<
<Address>
<Street>700 Webmaster Road</Stree
et>
<City>Redm
mond</City>
<State>WA<
</State>
<
</Address>
<
<Job>
<Title>Web
b Site Developer</Title>
>
<Description>Writes the pretty pa
ages</Descri
iption>
<
</Job>
</P
Person>
</Peo
ople>
>
XML File – CarLis

st.xml
<?xml version="1.0" encoding="u
utf 8" ?>
ist>
<CarLi
<Car Vin="1A59B"
V Make="Chevrole
et" Model="Imp
pala" Year="19
963" Price="1125.00" />
<Car Vin="9B25T"
V Make="Ford" Mo
odel="F 250" Year="1970"
Y Pr
rice="1595.00" />
<Car Vin="3H13R"
V Make="BMW" Mod
del="Z4" Year=
="2006" Price=
="55123.00" />
>
<Car Vin="7D67A"
V Make="Mazda" Model="Miata"
M Year="2003" Price="28250.
P 00" />
<Car Vin="4T21N"
V Make="VW" Mode
el= "Beetle" Year="1956"
Y Pr
rice="500.00" /></CarList>
>
XSL Transformat
T tion File – Ca
arList.xsl
<?xml version="1.0" encoding="u
utf 8" ?> <xsl
l:stylesheet
on="1.0"xmlns:xsl="http://
versio /www.w3.org/19
999/XSL/Transf
form" xmlns:msxsl="urn:sch
hemas microsof
ft
com:xs
slt" xmlns:labs="http://la
abs.com/myname
espace">
<xsl:t
template match="/"> <html>
> <head>
<title
e>Car List</title> </head>
> <body>
<cente
er> <h1>Car List</h1> <xsl:call templat
te name="Creat
teHeading"/>
</cent
ter> </body> </html> </xsl:template>
<xsl:t ="CreateHeading"> <table border="1"
template name= b cel
llpadding="5">
> <tr > <th b
bgcolor="yello
ow">
<font size="4" > <b>VIN</b>
t> </th> <th bgcolor="yellow">
</font
<font size="4" > <b>Make</b>
</font
<font size="4" > <b>Model</b>
</font
<font size="4"> <b>
>Year</b>
</font
<font size="4" > <b>Price</b> </font>
<
</th> </tr> <xsl:call template name="CreateT
Table"/>
</tabl
le> </xsl:template>
<xsl:t
template name=
="CreateTable
e"> <xsl:for each
e select="/
/CarList/Car">
> <tr> <td align="center">
>
<xsl:v
value of select="@Vin"/> </td>
<
?

%
= :
<td al
lign="center">
>
value of select="@Make"/> </td> <td>
<xsl:v
value of select="@Model"/>
<xsl:v ></td> <td>

value of select="@Year"/> </td> <td ali
<xsl:v ign="right">
<xsl:v
value of select="format nu
umber(@Price,'
'$#,##0.00')"/
/> </td> </tr>
> </xsl:for e
each>
</xsl:template> </xsl:styleshee
et>
publi
ic partial class
c Xml Control : Syst
tem.Web.UI.P
Page
{
protecte
ed void Page Load(object
t sender, Ev
ventArgs e)
{
Xml1.DocumentSource "~/Ap
pp Data/CarL
List.xml";
Xml1.TransformSource "~/A
App Data/Car
rList.xsl";
}
}
Test
1. Which
W of the following represents
r thhe best use of the Tablle, TableRow w, and Table-Cell
contrrols? (Choosee one.)
A. To creeate and popuulate a Tablee in Design view
v
B. To creeate a custommized controll that needs too display datta in a tabulaar fashion
C. To creeate and popuulate a Tablee with imagess
D. To dissplay a tabulaar result set
2. Yoour graphics department just j completeed an elaborate image that shows thee product linees that
your company sellls. Some of the product line graphicss are circularr, while otheers are rectan ngular,
and others
o are commplex shapees. You want to use this im mage as a menu
m on your Web site. What
W is
the beest way to inncorporate thhe image intoo your Web site?
s (Choosee one.)
A. Use Im mageButton and use the x- and y-co oordinates thhat are returnned when thee user
clicks to figure
f out whhat product line
l the user clicked.
B. Use thhe Table, TaableRow, andd TableCell controls, breeak the imagge into piecees that
are displaayed in the cells, and usse the TableeCell controll’s Click eveent to identify the
product liine that was clicked.
C. Use thhe MultiView w control andd break up thhe image into pieces thatt can be disp played
in each View
V U the Clickk event of the View to id
control for each prooduct line. Use dentify
the produuct line that was
w clicked.
D. Use ann ImageMap control and define hot spot areas forr each of the product lines. Use
the PostBBackValue to identify the product linee that was cliicked.
?

%
= :
3. Yoou are writinng a Web sitee that collectts lots of datta from yourr users, and tthe data colleection
spreaads over multtiple Web paages. When the t user reacches the last page,
p you neeed to gatherr all of
data, validate the data, and savve the data too the databasse. You noticce that it cann be rather difficult
to gaather the dataa that is spreead over mulltiple pages and you wannt to simpliffy this appliccation.
Whatt is the easieest control too implementt that can be used to colllect the dataa on a singlee Web
page?? (Choose onne.)
A. The View
Vi control
B. The TeextBox controol
C. The Wizard
W controol
D. The DataCollectio
D on control

%

:

MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5

%
:

%

:

El enlace a datos fue una de las sorpresass más agradaables con las que se enco ontraron los
desarrrolladores en
e ASP.NET 1.x.
1 Comparaado con la co ompatibilidad d de las páginas Active Seerver
para el acceso a datos,
d el enlaace a datos supuso
s una mezcla
m extraordinaria de simplicidad y
efectividad. No obstante, al enfrentarse
e a las necesidaades de los desarrollado
d res reales, re
esultó
hastaa cierto punto imperfecto o. Las limitacciones no se encuentran en la funcionalidad gene eral,
m bien en el hecho de que los desaarrolladores deben escrib
sino más bir una gran cantidad de
códiggo para contrrolar incluso las operacio ones sencillas y habitualees tales comoo la paginación,
ordennación o elim
minación. Para aportar un na solución a este probleema, en ASP.NET 2.0 se
agregga un nuevo modelo de origen
o de dattos.
Éste consiste
c en diferentes
d co
ontroles nuevos sin IU qu ue completann el vacío existente entre
e las
partees visuales dee los controles enlazadoss a datos y lo
os contenedoores de datos. Básicamen nte, la
inmensa mayoría del código que q los desarrolladores debían
d escrib
bir en ASP.NEET 1.x,
correectamente faactorizado y creado,
c se encuentra aho ora incrustad
do en una nu ueva familia de
contrroles: los com
mponentes de d origen de datos.
El uso
o de compon nentes de origen de dato os aporta num
merosas ven ntajas: la prim
mera y
fundaamental consiste en la po osibilidad dee un modelo de enlace a datos complletamente
declaarativo. Este nuevo modeelo reduce ell código flexible insertado en línea en n los recurso
os de
ASPXX o repartido entre las claases de códiggo subyacentte. La nueva arquitecturaa de enlace a
datoss obliga a loss desarrolladores a seguir unas reglass estrictas. Además, cambia la calidad del
códiggo de forma inherente. Lo os extensos bloques de código
c asociaados a eventtos tienden a
desap parecer y son n sustituidoss por componentes que simplemente
s e se conectan al marco
existeente. Los commponentes de d origen de datos se derivan de classes abstractaas, implemen ntan
interffaces conocidas y ofrecen, en generaal, un nivel más
m alto de reeutilización.
using
g System;
using
g System.Datta;
using
g System.Connfiguration;
using
g System.Webb;
using
g System.Webb.Security;
using
g System.Webb.UI;
using
using
g System.Webb.UI.WebControls.WebPartts;
using
g System.Webb.UI.HtmlControls;
g System.Collections.Generic;
using
/// <summary>
<
/// Summary
S cription for Car
desc
/// </summary>
<
publi
ic class Carr
{
p
public Car() { }
p
public Car(string vin, string make,, string mod
del, int yea
ar, decimal price) { Vin
vin; Make make
e; Model model; Year year; Pric
ce price; }
p
public strin
ng Vin
{
get { reeturn vin; }
set { vin value; }
}
p
private string vin;
p
public strin
ng Make

%
:

{
get { re
eturn make; }
set { ma
ake value; }
}
p
private string make;
p
public strin
ng Model
{
get { reeturn model; }
set { moodel value; }
}
p
private string model;
p
public int Year
Y
{
get { reeturn year; }
set { yeear value; }
}
p
private int year;
p
public decim
mal Price
{
get { reeturn price; }
set { prrice value; }
}
p
private decimal price;
p
public static List<Car> GetList()
{
List<Carr> carList new List<Ca
ar>(); carLi
ist.Add(new Car("1A59B", "Chevrolet",
ala", 1963, 1125.00M)); carList.Add
"Impa d(new Car("9 rd", "F 250", 1970,
9B25T", "For
1595.00M)); carLList.Add(new Car("3H13R"", "BMW", "Z
Z4", 2006, 55123.00M));
5 carList.Add(new
Car("
"7D67A", "Maazda", "Miata", 2003, 28 d(new Car("4T21N", "VW",
8250.00M)); carList.Add
tle", 1956, 500.00M)); return carLi
"Beet ist;
}
}
Controles Enlazados a Datos

Los coontroles DattaBound sonn controles que
q se enlazaan o conectaan a las fuenttes de datos. Los
contrroles DataBoound se clasifican en Sim
mples, Compu
uestos o Jeraarquicos.
x Los contrroles Simpless son aquello

os que hereddan de ListCo
ontrol y AdRo
otator.
x Los contrroles Compuestos son aq quellos que heredan
h de GridView,
G DeetailsView, y
FormsVieew.
x Los jerárq
quicos son aqquellos relaccionados con d menú y TreeView
n controles de
s utilizan paara proporcionar propied

. NETT Frameworkk proporcionaa varias clasees base que se dades
comu unes y el com
mportamientto de los dato os concretoss sujetos a co
ontroles.
El HieerarchicalDattaBoundCon
ntrol hereda de la BaseDaataBoundCon ntrol y es la cclase padre a los
contrroles que muuestran datos jerárquicoss, como el menú
m y contro
oles TreeView w.
El DataBoundCon ntrol hereda de la BaseDaataBoundControl y es la clase padre a la

Comp positeDataBooundControll y la ListControl, que son
n las clases de otros controles
d padres a o
que deben
d mostrrarse en form
ma de cuadro o de datos, taales como el GridView y DropDownList.

%
:

La claase DataBoundControl tieene un méto odo llamado DataBind. Lllamaremos a este métod do
cuand do los datos estén listos para ser llam
mados desde e el origen dee datos. Cuan
ndo se llamaa a
este método
m en un
u control, reecursivamen nte se llama a este mismo o método enn todos los
contrroles.
Usan
ndo Objettos DataS
Source
El BasseDataBoundControl es un control de Web que hereda
h directamente de Control. Estaa
clase contiene lass propiedadees DataSourcce y DataSou
urceID.
La propiedad DattaSource Obttiene o estab blece el obje

eto del que el control enlazado a dato
os
recup os de datos. El objeto DaataSource es un ejemplo típico de un
pera su lista de elemento na
clase que implem menta IEnumeerable, IListSSource, IDataaSource, o IH
HierarchicalD
Datasource.
La propiedad DattaSourceID Obtiene

O o esttablece el Id. del control del cual el control enlazado a
datoss recupera su
u lista de eleementos de datos.
d
Norm
malmente, fijaremos una de las propiedades DataaSource o DaataSourceID. Si fijamos laas
dos, toma
t priorid
dad DataSourrceID.
El con
ntrol DataBo
ound se coneecta automátticamente al control de origen
o de dattos en tiemp
po de
ejecuución llamand
do al métodoo DataBind en
e este control.

%
:

Tenemos una serrie de objetos fuente de datos

d que po
odemos coneectar a un ob
bjeto DataBo
ound

x AccessDaataSource
x SqlDataSSource
x XmlDataSSource
x ObjectDaataSource
x SiteMapD DataSource
Map
pear Camp
pos a las Plantillas
P s
Un coontrol de plaantilla es un control
c que no
n tiene inte
erface de usu
uario por deffecto. El conttrol
simpllemente provee el mecanismo para enlazar los datos.
d Los Deesarrolladorees usaran lass
planttillas para determinar el interface
i de usuario.
Los co
ontroles con
n soporte a plantillas
p son:
GridV
View, DetailssView, and Fo
ormView
En un demos usar las siguientes plantillas:

n control pod
x HeaderTeemplate
x FooterTemplate
x ItemTemplate
x Alternatin
ngItemTemp
plate
x SelectedItemTemplatte
x SeparatorTemplate
x EditItemTTemplate
Usan
ndo la cla
ase DataB
Binder
Propo
orciona compatibilidad conc diseñado ores de desarrrollo rápido
o de aplicacio
ones (RAD) para
p
generar y analizar la sintaxis de
d expresion
nes de enlace
e de datos. Esta
E clase no se puede
hered
dar.

%
:

Las exxpresiones ded enlace de datos están contenidas dentro de lo os delimitado ores <%# y %>,
% y
ones Eval y Bind. La funciión Eval se utiliza para deefinir un enlaace de tipo
utilizaan las funcio
unidireccional (dee sólo lecturaa). La función Bind se utiiliza para el enlace
e po bidireccional
de tip
(actualizable). Ad demás de llammar a los méétodos Eval y Bind para realizar el enlace de dato os en
una expresión
e dee enlace de datos, puede llamar a cuaalquier códiggo de ámbito o público incluido
en los delimitado ores <%# y %> para ejecutar dicho código y devolvver un valor durante el
proceesamiento dee la página.
d enlace de datos se ressuelven cuan

Las exxpresiones de ndo se llama al método D DataBind de un
contrrol o de la claase Page. Para los contro
oles como GrridView, DetaailsView y Fo
ormView, lass
expreesiones de en nlace de datos se resuelvven automátticamente duurante el eveento PreRender
del co
ontrol y no es
e necesario llamar al méétodo DataBiind de formaa explícita.
d las expresiones de enlace de datoss con

En el ejemplo de código siguieente se mueestra el uso de
ontrol FormV
un co View en una propiedad IttemTemplate
<asp
p:FormView
w ID="Form
mView1"
Da
ataSourceI
ID="SqlDat
taSource1"
"
Da
ataKeyName
es="Produc
ctID"
Ru
unAt="serv
ver">
ItemTempla
<I ate>
<table>
d align="r
<tr><td right"><b>>Product ID:</b></t
I td> <td><%#
l("Product
Eval tID") %></
/td></tr>
<tr><td
d align="r
right"><b>>Product Name:</b><
N </td> <td><%#
l("Product
Eval tName") %>
></td></trr>
<tr><td
d align="r
right"><b>>Category ID:</b></
/td> <td><%#
l("Categor
Eval ryID") %><
</td></tr>>
<tr><td
d align="r
right"><b>>Quantity Per Unit:
:</b></td>
><td><%#
l("Quantit
Eval tyPerUnit"
") %></td>></tr>
<tr><td
d align="r
right"><b>>Unit Pric
ce:</b></t
td> <td><%#
l("UnitPri
Eval ice") %></
/td></tr>
</table>
/ItemTempl
</ late>
</as
sp:FormVie
ew>
Utilizzar el método Eval
El méétodo Eval evvalúa las exp

presiones de datos enlazaados tardíam mente en las plantillas dee
contrroles enlazad
dos a datos, como
c GridViiew, DetailsV
View y FormmView. En tieempo de
ejecuución, el método Eval llamma al método Eval del ob bjeto DataBinder, hacien
ndo referenciia al
elemento de dato os actual del contenedorr de nombress. El conteneedor de nombres suele se er la
partee más pequeña del contro ol enlazado a datos que contiene un registro com mpleto, como o una
fila de un control GridView. Por
P consiguieente, el méto odo Eval sólo
o se puede utilizar para el
e
enlacce dentro de las plantillass de un control enlazadoo a datos.
El méétodo Eval to
oma el nomb
bre de un cam mpo de dato os y devuelvee una cadenaa que contien
ne el
valor de dicho campo desde el
e registro acctual en el orrigen de dato
os. Puede pro
oporcionar un
u
segunndo parámettro opcional a fin de espeecificar un fo
ormato para la cadena deevuelta. El

%
:

parámmetro de forrmato de cad

dena utiliza laa sintaxis definida para el
e método Fo
ormat de la clase
c
Stringg. !
Utilizzar el método Bind
El méétodo Bind tiiene algunass similitudes con el método Eval, pero o hay diferenncias
signifficativas. Aun
nque los valo
ores de los caampos enlazzados a datoss se pueden recuperar coon el
métoodo Bind o co on el métodoo Eval, el méétodo Bind taambién se uttiliza cuando
o se pueden
modificar los dato os.
En ASSP.NET, los controles enlazados a dattos como GridView, DetaailsView y Fo ormView pueden
utilizaar automáticcamente las operacioness de actualizaación, supressión e inserción de un co ontrol
de orrigen de dato os. Por ejemp plo, si ha deffinido instruccciones SQL Select, Inserrt, Delete y
Updaate para el co ontrol de origgen de datoss, el uso de Bind
B en un co
ontrol GridVView o
DetaiilsView, o en n una plantilla de controll FormView permite al co ontrol extraeer los valores de
los coontroles secuundarios de la plantilla y pasarlos al control
c de orrigen de datoos. El control de
origen de datos a su vez ejecu uta el coman ndo correspo ondiente para la base de datos. Por esta
e
razón n, la función Bind se utilizza dentro dee las propiedades EditItemTemplate o
InserrtItemTemplate de un co ontrol enlazaado a datos.
El méétodo Bind suele emplearse con conttroles de enttrada como TextBox

T reprresentado poor una
fila GridView
G en modo
m de ediición. Cuando el control enlazado
e a datos
d crea esstos controle
es de
entraada como parte de su pro
opia representación, pue ede extraer lo
os valores dee entrada.
<Edi
itItemTemp
plate>
<t
table>
<tr>
ign=right>
<td ali >
<b>Em
mployee ID
D:</b>
</td>
<td>
<%# Eval("Empl
E loyeeID") %>
</td>
</tr>
<tr>
ign=right>
<td ali >
<b>Fi
irst Name:</b>
</td>
<td>
<asp:TextBox ID="EditFi
I irstNameTe
extBox" Ru
unAt="Serv
ver"
xt='<%# Bi
Tex ind("First
tName") %>
>' />
</td>
</tr>
<tr>
ign=right>
<td ali >
<b>La
ast Name:<
</b>
</td>
<td>
<asp:TextBox ID="EditLa
I astNameTex
xtBox" Run
nAt="Serve
er"
T
Text='<%# Bind("Las
stName") %>'
% />
</td>
</tr>
<tr>
lspan="2">
<td col >
<asp:LinkButto
on ID="Upd
dateButton
n" RunAt="
"server"

%
:

Tex
xt="Update
e" Command
dName="Upd
date" />
&nbsp
p; "
<asp:LinkButto
on ID="Can
ncelUpdate
eButton" RunAt="ser
R rver"
xt="Cancel
Tex l" Command
dName="Can
ncel" />
</td>
</tr>
/table>
</
</Ed
ditItemTem
mplate>
<%# Eval("Vin") %>
C}" ) %>
<%# Eval("Vin", "{0:C
<%# Bi
ind("Vin") %>
<%# Bi
ind("Vin", "{0:C}" ) %>
Rep
peater
El con
ntrol Repeatter es un con ntrol con vincculación a daatos que mueestra datos u usando una
dispoosición perso onalizada. Funciona por repetición
r de
e una plantillla ASP.NET d
determinada para
cada elemento visualizado en n la lista. Estee control es básico
b en cuanto al funciionamiento con
c
planttillas. No tien
ne características de dispposición interrna ni de estilo. Toda la información de
formaato y de disp posición debe ser declaraada explícitamente y cod dificada mediiante etiquettas
HTML y clases ASSP.NET
Prog
gramació
ón de la in
nterfaz del control Repeaterr.
La claase Repeaterr hereda de Control
C y acttúa como un contenedorr implementaando la interrfaz
INammingContaineer.
Contiiene las siguiientes propieedades:
Propiiedad Descripción
AlterrnatingItemTTemplate La plaantilla utilizaada para dibuujar cada uno de
los elementos resstantes
DataM
Member Modifica o obtien ne la tabla esspecífica de
DataSource que tiene t que vinncularse con este
contrrol
DataSSource Modifica u obtien ne el origen de datos
IEnummerable quee proporciona cualquier dato d
para rellernar la lista
l
DataSSourceID Modifica u obtien ne el nombree del control de
orige
en de datos que q proporciiona los dato os
para rellernar lass lista
Foote
erTemplate La plaantilla que define cómo se dibuja la
partee inferior
Head
derTemplate La plaantilla que define cómo se dibuja la
partee superior

%
:

Itemss Devuuelve un objeeto RepeaterrItemcollection,

esto es, una coleccción de elemmentos )
RepeeaterItem. Caada elemento de la coleccción
repreesenta una fiila de datos m
mostrados en
e
repeaater
ItemTTemplate La Plaantilla que define cómo se dibujan lo
os
elementos
SeparatorTemplaate La plaantilla que dibuja los sep
paradores en
ntre
los elementos
Las propiedades son

s elementtos de la plan
ntilla que forrman la interrfaz de usuarrio de los
contrroles.
La propiedad Item
ms contiene la lista de eleementos hijo
os que están
n asociados ccon cada fila de
datoss mostrada.
El con
ntrol Repeatter rellena la colección Iteems enumerrando todos los objetos d
de datos en la
l
fuentte de datos vinculada.
v
Even
ntos
Item
mCommand
Se desenccadena cuan
ndo un botón
n se pulsa de
entro del con
ntrol Repeateer
mCreated
Item
Se desenccadena cuan
ndo se está creando uno de los elemeentos de la reepetición. En
n este
punto
o, la propied
dad DataItem
m, siempre deevuelve nulo
o.
Item
mDataBound d
Se desenccadena desp pués de que un
u elemento nculado con los
o de Repeateer se haya vin
datoss subyacentees. Esta vez, la propiedad
d DataItem no es nula.
Para responder a eventos de

e botón en co
ontroles DattaList y Repe
eater
1 Incluya un control Button, LinkButton o Image

1. u plantilla de control.
eButton en una
2 Establezcca la propiedad Comman

2. ndName del botón en una cadena que identifique
e su
función, como
c "sort" o "copy".
3 Cree un método
3. m paraa el evento IttemComman
nd del contro or. En el método,
ol contenedo
haga lo siiguiente:
a. C
Compruebe la propiedad CommandN Name del objjeto argumento del even
nto
p
para ver qué cadena de comando se ha
h transferid
do.
b. Ejecute
E la lóggica adecuada para el bottón en que hizo
h clic el ussuario.
En el ejemplo sigu uiente se muuestra cómo se puede responder a un clic del bottón en un coontrol
DataLList. En el ejeemplo, la pro
opiedad Item
mTemplate co ontiene un control
c ImageeButton que e
muesstra un carro o de la comprra. El botón envía
e el com
mando AddTo oCart. El conttrolador de

%
:

eventtos ItemCommmand deterrmina el botó ón en que se

e hizo clic y, si
s fue el botó
ón del carro de
d la
comppra, ejecuta la
l lógica corrrespondientee. *
1. protected
d void DataL
List1 ItemCo
ommand(object source,
2. DataL
ListCommandE
EventArgs e)
3. {
4. if (e.CommandName
e "AddToC
Cart")
5. {
6. // Add code he
ere to add the
t item to the shopping
g cart.
7. // Use the val
lue of e.Ite
em.ItemIndex to retrieve
e the data
8. // item in the
e control.
9. }
10. }
<%@ Page
P ge "C#" AutoEventWireup "true" Code
Languag eFile "eRepe
eater1.aspx.cs"
Inher
rits "eRepea
ater1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title>Págin
na sin título</title>
</hea
ad>
<body
y>
<
id "fo
<
<div>
peater ID "Repeater1" ru
<asp:Rep unat "server
r" DataSourc
ceID "ObjecttDataSource1"
onit
temcommand "Repeater1 IttemCommand" >
<Hea
aderTemplate><h1>Venta de
d Coches</h /HeaderTemplate>
h1><table></
<Ite
emTemplate><tr><td>
<asp:Button ID "Button1
1" runat "se
erver" Text "Button"
Comma
andName "Imp
par" CommandAArgument '<%
%# Eval("Vin
n") %>' /><%
%# Eval("Vinn")
%></t
td><td><asp:TextBox ID "TextBox1" runat
r "serve
er" Text '<%
%# Eval("Moddel") %>'
></as
sp:TextBox><
</td></tr></ItemTemplatee>
<Alt
ternatingItemmTemplate><t
tr bgcolor "#eeeeee"><t
" td>
<asp:Button ID "Button2 erver" Text "Button" Co
2" runat "se ommandName "Par"
Comma
andArgument '<%# Eval("VVin") %>'/><
<%# Eval("Vi
in") %></td>
><td><%# Evaal("Model")
%></t
td></tr></AlternatingItemTemplate>
<Foo
oterTemplate></table><% DateTime.N Now.ToLongDa
ateString()
%></F
FooterTempla
ate>
</asp:Re
epeater>
<asp:ObjectDataSource ID "ObjecctDataSource
e1" runat "s
server"
Sele
ectMethod "GetList" TypeeName "Car">
></asp:Objec
ctDataSourcee>
</div>
<
<
<asp:Label ID "Label1" runat "serve abel"></asp:Label>
er" Text "La
<
</form>
</bod
dy>
</htm
ml>
proteected void Repeater1

R ItemCommand(ob
bject source
e, RepeaterC
CommandEvent
tArgs e)
{
Label1.Text mmandName + " : " + e.C
e.Com CommandArgum
ment;
Responsee.Write(e.Item.ItemIndex
x);
Respoonse.Write(((TextBox)(e.Item.Controols[e.Item.I FindControl("TextBox1"))).Te
ItemIndex].F
xt); }
ListtControl
Actúaa como la claase base absttracta que define las pro
opiedades, métodos
m y eveentos comun
nes a
todoss los controlees de tipo dee lista.

%
:

No see puede creaar directamente una instaancia de la clase abstractta ListContro

ol. En lugar de
d
ello, otras
o clases heredan estaa clase como
o, por ejempplo, las clasess CheckBoxLiist, DropDowwnList,
ListBoox y RadioBuuttonList, y así
a se proporciona una funcionalidad básica comú ún.
Las propiedades de d la clase LiistControl peermiten espe ecificar el oriigen de los d

datos que rellenan
el con
ntrol de listaa. Utilice la propiedad DataSource para especificaar el origen d de datos que se va
a enlaazar al contrrol de lista. Si el origen dee datos contiene más de una tabla, u utilice la
propiiedad DataM Member paraa especificar la tabla que se va a utilizzar. Se puedeen vincular
distin
ntos campos del origen de d datos a lass propiedade es ListItem.Text y ListItemm.Value de lo
os
elementos del control de listaa establecien ndo las propiiedades DataaTextField y DataValueField,
respeectivamente.. Se puede dar formato al a texto que se
s muestra para
p cada eleemento en el
contrrol de lista esstableciendo o la propiedaad DataTextFFormatString.
Todos los elemen ntos mostraddos en el con

ntrol de lista se almacenaan en la coleccción Items.
Utilicce la propiedad SelectedIndex para esspecificar o determinar
d m
mediante proogramación el
índicee de un elemmento seleccionado en ell control de lista. Se pued
de obtener aacceso a la
propiiedad del eleemento selecccionado meediante la pro opiedad SeleectedItem.
La claase ListContrrol proporcio

ona el evento
o SelectedIndexChanged d que se provvoca cuando la
selección del control de lista cambia
c valorres de un envío a otro en
nvío en el serrvidor. Esto
permmite incluir un
n controladoor personalizaado para estte evento.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >

<head ver">
<
<title> tControl SelectedValue Example
List E </ti
itle>
ipt runat "server">
<scri
on Click(Object sender, EventArgs e)

void Butto e
{
// Perfform this operation in a try catch block in caase the item

m is not found.
try
{
List
t.SelectedValue ItemTeextBox.Text;
;
MessageLabel.Text "You seelected " + List.Select
tedValue + ".";
}
catch (Exception ex)
{
List
t.SelectedValue null;
MessageLabel.Text "Item not
n found in
n ListBox co
ontrol.";
}
</
/script>
</hea
ad>
<body
y>
<f
form id "for
Control SelectedValue Ex
<h3> ListC xample </h3>
>
<asp:ListB
Box ID "List"
runat
t "server">
<asp:ListItem>Item 1</asp:List
tItem>
tItem>

%
:

tItem>
tItem>

</asp:List
tBox>
<hr />
Enter the value of the item to se

elect: <br />
/
<asp:TextB
Box ID "ItemTextBox"
MaxLe
ength "6"
Text "Item 1"
runat
t "server"/>

on ID "SelectButton"
<asp:Butto
Text "Select Itemm"
runat
t "server"/>
<br /><br />
<asp:Label ID "MessageLabel"
t "server"/>
runat
</
/form>
</bod
dy>
</htm
ml>

%
:

Dro
opDownL
List
Repreesenta un co
ontrol que peermite al usu
uario seleccio
onar un único elemento de una lista
despllegable.
Utilicce el control DropDownLList para creaar un control de lista desp

plegable de selección ún
nica.
Para controlar la apariencia deld control DropDownList, establezcaa las propiedades
BordeerColor, Bord derStyle y Bo
orderWidth.
Para especificar lo
os elemento
os que debenn aparecer en n el control DropDownLi
D ist, coloque un
u
objetto ListItem, por
p cada entrrada, entre las etiquetas de aperturaa y de cierre del control
DropDownList.
ntrol DropDo
El con ownList admmite asimismo d datos. Parra enlazar el control a un
o el enlace de
origen de datos, cree
c un origeen de datos, como un ob bjeto System.Collections.ArrayList, qu ue
conteenga los elem
mentos que se s van a mosstrar en el coontrol. A continuación, uttilice el méto
odo
Contrrol.DataBindd para enlazaar el origen de
d datos al coontrol DropDDownList.
Utilicce la propiedad SelectedIndex para determinar mediante

m programación eel índice del
elemento seleccio onado por el usuario en el control DrropDownListt.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<s
script runat
t "server" >
void Selec
ction Change(Object send
der, EventAr
rgs e)
{
// Set the background color fo

or days in the
t Calendarr control
// base
ed on the value selected
d by the use
er from the
// Drop
pDownList control.
ar1.DayStyle.BackColor
Calenda
System.Drawing.Color.FromN
Name(ColorLi
ist.SelecteddItem.Value);
</
/script>
<head
ver">
<
<title> pDownList Example </titl
Drop le>
</hea
ad>
<body
y>

%
:

<f
form id "for

<h3> DropD
DownList Exam
mple </h3>
Select a background
b color for day
ys in the ca
alendar.
<br /><br />
ndar id "Calendar1"
<asp:Calen
GridLines "True"
ShowG
ShowT
Title "True"
runat
t "server"/>
<br /><br />
<table cellpadding "5">
<tr>
>
<td>
B
Background color:
</td
d>
</tr>
<tr>
>
<td>
<asp:DropDownList id "Co
< olorList"
AutoPostBack "True"
"
OnSelectedIndexChan
nged "Select
tion Change"
"
runat "server">
<asp:ListItem ed "True" Va
Selecte alue "White"
"> White </a
asp:ListItem>
<asp:ListItem Value "Silver">
" Si
ilver </asp:ListItem>
<asp:ListItem Value "DarkGray">
" Dark Gray </asp:ListIt
< tem>
<asp:ListItem Value "Khaki">
" Kha
aki </asp:Li
istItem>
<asp:ListItem Value "DarkKhaki">
" > Dark Khaki
i </asp:List
tItem>
<
</asp:DropDow
wnList>
</td
d>
</tr>
</table>
</
/form>
</bod
dy>
</htm
ml>
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
g System.Web
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
//add
ded
using
publi
ic partial class
c DropDowwnList Contr
rol : System
m.Web.UI.Pag
ge
{
p
private List
t<Car> carList Car.Get
tList();
p
protected vo
Args e)
{
PostBack)
if (!IsP

%
:

{
Drop
pDownList1.DataSource carList; Dr
ropDownList1
1.DataTextField "Price";
DropD ataValueField
DownList1.Da "Price";
; DropDownLi xtFormatString
ist1.DataTex "Price:
{0:C}
}"; DropDown
nList1.DataBind();
}
}
p
protected oid Button1 Click(object
vo t sender, EvventArgs e) { Label1.Te
ext
DropD
DownList1.Se
electedValue; }
}
<%@ Page
Languag eFile "Dropd
dDownList1.a
aspx.cs"
Inher
rits "DropdD
DownList1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title>Págin
</hea
ad>
<body
y>
<
id "fo
<
<div>
opDownList ID "DropDownL
<asp:Dro List1" runat
t "server" AutoPostBack
A k "True"
onse
electedindexchanged "Dro
opDownList1 SelectedInd
dexChanged">>
<asp
p:ListItem Value "E1">El
lemento1</as
sp:ListItem>
>
<asp
lemento2</as
sp:ListItem>
>
<asp
lemento3</as
sp:ListItem>
>
</asp:Dr
ropDownList>
<asp:Lab
bel ID "Label1" runat "s
server" Text
t "Label"></
/asp:Label><<br />
<asp:Lab
server" Text
t "Label"></
/asp:Label><<br />
<asp:Lab
server" Text
t "Label"></
/asp:Label>
<br />
<asp:Dro
opDownList ID "DropDownL
List2" runat
t "server" AppendDataBo
A oundItems "True"
Auto
oPostBack "True" DataSou
urceID "Obje
ectDataSourc
ce1" DataTexxtField "Model"
Data
aValueField "Vin"
electedindexchanged "Dro
onse opDownList2 SelectedInd
dexChanged">>
<asp
p:ListItem></asp:ListIte
em>
</asp:Dr
ropDownList>
<asp:ObjectDataSource ID "Objec
ctDataSource
e1" runat "s
server"
Sele
ectMethod "GetList" Type
eName "Car">
></asp:Objec
ctDataSourcee>
<br />
<asp:Lab
server" Text
t "Label"></
/asp:Label>
<br />
<asp:Lab
server" Text
t "Label"></
/asp:Label>
<br />
<asp:Lab
server" Text
t "Label"></
/asp:Label>
</div>
<
<
</form>

%
:

</bod
dy>
</htm
ml>

using
g System;
using
using
g System.Con
nfiguration;
using
g System.Dat
ta;
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.HtmlControls;
using
g b.UI.WebControls;
System.Web
using
g b.UI.WebControls.WebPart
System.Web ts;
using
g System.Xml.Linq;
publi
ic partial class
c DropdDownList1 : System.Web.U
S UI.Page
{
p
protected vo
oid Page Load(object sen
nder, EventA
Args e)
{
}
p
protected vo
oid DropDownList1 Select
tedIndexChan
nged(object sender, Eve
entArgs e)
{
Label1.T
Text "El elemento sele
eccionado es
s " + DropDo
ownList1.SelectedItem;
Label2.T
Text "El Valor selecci
ionado es " + DropDownL
List1.Select
tedValue;
Label3.T
Text "El Indice selecc
cionado es " + DropDown
nList1.Selec
ctedIndex;
}
p
protected vo
oid DropDownList2 Select
tedIndexChan
nged(object sender, Eve
entArgs e)
{
Label4.T
Text "El elemento sele
eccionado es
s " + DropDo
ownList2.SelectedItem;
Label5.T
Text "El Valor selecci
ionado es " + DropDownL
List2.Select
tedValue;
Label6.T
Text "El Indice selecc
cionado es " + DropDown
nList2.Selec
ctedIndex;
}
}
ListtBox
Repreesenta un co
ontrol de cuaadro de lista que permite
e la selección
n de uno o vaarios elemen
ntos.
Utilicce el control ListBox paraa crear un control de listaa que permitte la selecció
ón de uno o varios
v
elementos. Utilicee la propiedaad Rows para especificarr el alto del control.
c Para habilitar la
selección de vario os elementos, establezcaa la propiedaad SelectionM Mode en
ListSe electionMod de.Multiple.

%
:

Utilicce la colecció
ón Items paraa examinar lo
os objetos ListItem incluiidos en el co
ontrol ListBox. Por
ejemplo, puede determinar
d loos elementos seleccionaddos en el conntrol ListBoxx enumerand do la !
coleccción Items y comproban ndo el valor Selected
S de cada
c elemennto ListItem.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<head
d>
<
<title>ListB
Box Example</title>
ipt language
void SubmitBtn Click(Object sende

er, EventArg
gs e)
{
if (ListBox1.SelectedIndex > 1)
Labe
el1.Text "You chose: " + ListBox1.S
SelectedItem
m.Text;
}
</
/script>
</hea
ad>
<body
y>
<h
h3>ListBox Example</h3>
E
form id "for
<asp:ListB
Box id "ListBox1"
Rows "6"
Width
h "100px"
Selec
ctionMode "Single"
runat
t "server">
<asp:ListItem>Item tItem>
1</asp:List
tItem>
tItem>
tItem>
tItem>
tItem>
</asp:List
tBox>
<asp:butto
on id "Button1"
Text "Submit"
OnClick "SubmitBtn Click"
runat
t "server" />
<asp:Label id "Label1"
Font Names "Verdana"
Font Size "10pt"
runat
t "server"/>
</
/form>
</bod
dy>
</htm
ml>
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
g System.Web
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;//addeed using Sys
stem.Collecttions.Generic;
publi
ic partial class
c ListBox Control : System.Web..UI.Page
{
p
private List
t<Car> carList tList();
Car.Get
p
protected vo
Args e)
{
ListBox1.SelectionMode ListSe
electionMode
e.Multiple;

%
:

ListBox2.SelectionMode ListSeelectionMode
e.Multiple;
if (!IsP
PostBack)
{ "
List
tBox1.DataSource carLi
ist;
List
tBox1.DataTextField "P
Price";
List
tBox1.DataValueField "
"Price";
List
tBox1.DataTextFormatStriing "Price
e: {0:C}";
List
tBox1.DataBind();
}
}
p
protected oid Button1 Click(object
vo t sender, Ev
ventArgs e)
{
foreach (ListItem item in ListBBox1.Items)
{
if (item.Selected)
{
ListBox2.Items.Add(item
m);
}
}
ListBox2.DataBind();
}
}
Che
eckBoxLisst
Crea un grupo dee casillas de verificación
v d selección múltiple cuyya creación p
de podría realizaarse
de forma dinámicca enlazando o el control al
a origen de datos.
d

%
:

El conntrol CheckB
BoxList propoorciona un grupo de casillas de verificación de seelección múlttiple
que se
s pueden geenerar dinám micamente mediante
m el enlace
e de dattos. Contienee una colección
de Iteems con mieembros que se
s correspon nden a eleme entos individuales de la liista. Para
deterrminar cuáles son los elementos seleeccionados, recorra
r la collección en iteeración y
comp pruebe la pro
opiedad Seleected de cadaa elemento de
d la lista.
Es po osible especifficar la formaa en que se muestra

m la lista utilizando las propied dades
RepeatLayout y RepeatDirect
R tion. Si RepeaatLayout se establece en n RepeatLayo out.Table (el
valor predeterminado), la lista se presentta en una tab bla. Si se estaablece en ReepeatLayout.Flow,
la listta se presentta sin estructtura de tablaa. De forma predetermin
p ada, RepeattDirection se
e
estab blece en RepeatDirection n.Vertical. Si se establecee esta propieedad en
Repe eatDirection..Horizontal, la lista se presenta de fo orma horizon ntal.
El con
ntrol CheckB
BoxList aportta prácticas funciones
f de
e enlace de datos.
d Sin em
mbargo, los
contrroles CheckB
Box individuaales permitenn un mayor control
c sobree el diseño.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >

<head ver">
<
<title> ckBoxList Example </titl
Chec le>
ipt runat "server">
<scri
void Check
k Clicked(Object sender,
, EventArgs e)
{
e.Text
Message "Selected Item(s):<br /><b
br />";
// Iter
rate through the Items collection
c of
o the Check
kBoxList
// cont
trol and disp
play the sel
lected items
s.
for (in
nt i 0; i<checkboxlist1.Items.Count
t; i++)
{

%
:

if (checkboxlist1.Items[i].Selected)
{ *
M
Message.Text + checkbox
xlist1.Items
s[i].Text + "<br />";
</
/script>
</hea
ad>
y>
<body
<f
form id "for
<h3> Check
kBoxList Exam
mple </h3>
Select ite
ems from the CheckBoxLis
st.
<br /><br />
kBoxList id "checkboxlis
<asp:Check st1"
AutoP
PostBack "True"
CellP
Padding "5"
CellSpacing "5"
Repea
atColumns "2"
atDirection "Vertical"
Repea
atLayout "Flow"
Repea
Align "Right"
TextA
OnSelectedIndexChanged "Chec
ck Clicked"
runat
t "server">
tItem>
tItem>
tItem>
tItem>
tItem>
tItem>
</asp:Chec
ckBoxList>
<br /><br />
<asp:label id "Message" runat "se

erver" Assoc
ciatedContro
olID "checkb
boxlist1"/>
</
/form>
</bod
dy>
ml>
</htm
Rad
dioButton
nList
Repreesenta un co ontrol de listaa que encapssula un grup
po de controlles de botón de opción. El
E
contrrol RadioButttonList prop porciona a los desarrolladdores de págginas un grup
po de botone es de
opcióón de selección única quee se pueden generar dináámicamentee mediante el enlace de datos.d
Contiiene una coleección Itemss con miembros que se corresponden n con elemen ntos individu
uales
de la lista. Para determinar cu uál es el elem
mento selecccionado, prueebe la propieedad
SelecctedItem de lal lista.
Puede especificarr la represenntación de la lista con las propiedades RepeatLayo out y

RepeatDirection. Si RepeatLayout se estaablece en Rep peatLayout.TTable (el valor
predeeterminado), la lista se reepresenta en
n una tabla. Si se estableece en RepeaatLayout.Flow, la

%
:

lista se
s representta sin estructtura con formma de tabla. De forma prredeterminad da,
Repe eatDirection se establecee en RepeatD Direction.Vertical. Si estaablece esta p
propiedad en
n
Repe eatDirection..Horizontal, la lista se representa en formato horrizontal.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
<hea
ad>
<
<title>Radio
oButtonList Example</tittle>
<scri
ipt language
e "C#" runat "server">
void But
tton1 Click(object Sourc
ce, EventArg
gs e)
{
if (R
RadioButtonList1.Selecte
edIndex > 1)
1
{
La
abel1.Text "You select
ted: " + Rad
dioButtonLis
st1.Selected
dItem.Text;
}
}
void chk
kLayout CheckedChanged(O
Object sende
er, EventArg
gs e)
{
if (cchkLayout.Checked tru
ue)
{
RaadioButtonList1.RepeatLa
ayout Repe
eatLayout.Ta
able;
}
else
{
RaadioButtonList1.RepeatLa
ayout Repe
eatLayout.Fl
low;
}
}
void chk
kDirection CheckedChange
ed(Object se
ender, Event
tArgs e)
{
if (cchkDirection.Checked true)
{
RaadioButtonList1.RepeatDi
irection RepeatDirect
R tion.Horizon
ntal;
}
else
{
RaadioButtonList1.RepeatDi
irection RepeatDirect
R tion.Vertica
al;
}
}
</script>
</he
ead>
<bod
dy>
<h3>RadioBu
uttonList Example</h3>
<form id "f
form1" runat "server">
<asp:Ra
adioButtonList id "Radio
oButtonList1
1" runat "se
erver">
<asp
p:ListItem>Item 1</asp:L
ListItem>
<asp
ListItem>
<asp
ListItem>
<asp
ListItem>
<asp
ListItem>
<asp
ListItem>
</asp:R
RadioButtonList>
<br />
<asp:Ch
heckBox id "chkLayout" OnCheckedCha
O anged "chkLa
ayout Checke
edChanged"
Text "Display Ta
able Layout" Checked "tr
rue" AutoPos
stBack "true
e" runat "se
erver" />
<br />
<asp:Ch
heckBox id "chkDirection
n" OnChecked hkDirection CheckedChanged"
dChanged "ch
Text "Display Ho
orizontally" AutoPostBac
ck "true" ru
unat "server
r" />
<br />

%
:

<asp:Bu
utton id "Button1" Text "Submit" on
nclick "Butt
ton1 Click" runat "server"/>

<br />
<asp:La
abel id "Label1" font na
ames "Verdan
na" font siz nat "server"/>
ze "8pt" run
</form>
</bo
ody>
</ht
tml>
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;//adde ed using Sys tions.Generic;
stem.Collect
publi
ic partial class
c CheckBoxList and R RadioButtonL ls : System.Web.UI.Page
List Control
{
p
private List
t<Car> carList Car.GettList();
p
protected vo
oid Page Load(object sen nder, EventA Args e)
{
RadioBut
ttonList1.ReppeatColumns 3;
RadioBut
ttonList1.ReppeatDirectioon RepeatD
Direction.Ve
ertical;
CheckBox
xList1.RepeatColumns 3
3;
CheckBox
xList1.RepeatDirection RepeatDireection.Horiz
zontal;
if (!IsP
PostBack)
{
List
tBox1.DataSource carLiist;
List
tBox1.DataTextField "MMake";
List
tBox1.DataValueField "
"Price";
RadioButtonList1.DataSource e carList;;
RadioButtonList1.DataTextFi ield "Make
e";
RadioButtonList1.DataValueF Field "Pri
ice";
Chec
ckBoxList1.DataSource carList;
ckBoxList1.DataTextField
Chec d "Make";
Chec
ckBoxList1.DataValueFiel ld "Price"
";
Data
aBind();
}
}
}

%
:

BullletedListt
Crea un control que
q genera una lista de elementos co on formato de viñetas. Uttilice el control
etedList para crear una lissta de elemeentos a los que se da un formato
Bulle f con viñetas. Parra
especcificar los eleementos de vista
v individu
uales que deeben apareceer en el control BulletedLList,
sitúe un objeto LiistItem por cada
c entradaa entre las etiquetas de apertura y dee cierre del
contrrol BulletedLList.
e tipo de viñeta con el qu

Para especificar el ue desea moostrar los elementos de liista en un coontrol
etedList, estaablezca la pro
Bulle opiedad BulletStyle en uno de los tipos de viñeta definidos po or la
enummeración BulletStyle. En la tabla siguiente se enummeran los esstilos de viñeeta disponibles.
Estilo
o de viñeta Descripción
n
NotS Set No estableccido.
Numbered Un número o.
Lowe erAlpha Una letra minúscula.
m
Uppe erAlpha Una letra mayúscula.
m
Lowe erRoman Un número o romano en minúsculas.
Uppe erRoman Un número o romano en mayúsculas.
Disc Un círculo relleno.
r
Circlee Un círculo vacío.
v
Squa are Un cuadraddo relleno.
Custo omImage Una imagen personalizaada.
Utilicce la propiedad FirstBulleetNumber paara especificaar el valor inicial de la nu

umeración dee los
elementos de listta en un conttrol Bulleted dList ordenaddo. El valor que
q se asignaa a la propied dad
FirstBBulletNumbe er se omite si
s la propiedaad BulletStyle está estabblecida en el campo Disc,,
Square, Circle o CustomImag
C ge. Si establece la propied
dad BulletStyyle en el valo or del campo
o
Custo omImage para especificaar una imageen personalizzada de la viñ ñeta, tambiéén deberá

%
:

estab
blecer la prop
piedad BulletImageUrl dee forma que especifique la ubicación
n del archivo de
imageen.
Para especificar el
e comportam miento de prresentación de
d los elemeentos de listaa en un contrrol
etedList, estaablezca la pro
Bulle opiedad Disp
playMode en n uno de los valores
v definnidos por la
enummeración BulletedListDisp playMode. Loos comportaamientos de presentación n definidos son
s
Text, HyperLink y LinkButton.
Cuando se hace clic

c en un hip pervínculo, see desplaza a una direcció
ón URL. Utilicce la propieddad
Valuee para especificar la direccción URL a la
l que desplaaza un hipervvínculo. Utiliice la propiedad
Targeet para especcificar la ven
ntana o el maarco donde se
s muestra laa página Web b a la que se
produuce el desplaazamiento all hacer clic en un hipervínculo.
Si la propiedad
p DisplayMode se establecee en LinkButtton, el contrrol BulletedLList muestra los
elementos de listta como vínculos que devvuelven dato os al servidorr cuando se hhace clic en ellos.
e
Para controlar meediante proggramación las acciones que se realizaan al hacer cllic en un botón de
víncuulo, proporcio one un contrrolador de evventos para el evento Click. Tenga en n cuenta que e las
propiiedades SeleectedIndex y SelectedItem m se heredann de la clase ListControl y no son
aplicaables al conttrol BulletedList. Utilice los datos de evento de laa clase BullettedListEventA Args
para determinar el e índice del botón de vín nculo de un objeto
o BulletedList en ell que el usuaario
hizo clic.
c
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;//addeed using Sysstem.Collect
tions.Generic;
publi
ic partial class
c BulletedList Contrrol : Systemm.Web.UI.Pag
ge
{
p
private List
t<Car> carList Car.Get
tList();
p
protected vo
oid Page Load(object sennder, EventAArgs e)
{
ListBox1.AutoPostBack true;
ListBox2.AutoPostBack true;
if (!IsP
PostBack)
{
BulletedList1.DataSource carList;
BulletedList1.DataTextFieldd "Make";
BulletedList1.DataValueFielld "Price"
";
List
tBox1.DataSource
m.GetNames(typeof(Bullet
Enum tStyle));
List
tBox2.DataSource
m.GetNames(typeof(Bullet
Enum tedListDispllayMode));
Data
aBind();
}
}
p
protected vo
oid ListBox1 SelectedInddexChanged(oobject sende
er,
E
EventArgs e)
{
Bulleted
dList1.BulletStyle
(BulletStyle)Enum.Parse(
BulletStyle),
typeof(B
ListBox1.SelectedValue);
}
p
protected oid ListBox2 SelectedInd
vo dexChanged(oobject sende
er,
E
EventArgs e)
{
Bulleted
dList1.DisplayMode
edListDisplayMode)Enum.P
(Bullete Parse(

%
:

typeof(B
BulletedListDisplayMode)
),
ListBox2.SelectedValue);
}
}
AdR
Rotator
Muesstra un titulaar de anuncio
o en una pággina Web. Uttilice el contrrol AdRotatoor para mostrar
un tittular de anun
ncio seleccio
onado aleatooriamente en
n la página Web.
W El anunccio mostrado
o
cambbia cada vez que
q se actuaaliza la página.
La infformación so obre los anun

ncios se almaacena en un archivo XMLL independieente. El archiivo
XML permite man ntener una liista de anuncios y sus atrributos asociiados. Entre los atributoss se
incluyyen la ruta de
d acceso a una
u imagen que q se va a mostrar,
m la dirección URL a la que se
estabblece un víncculo al hacer clic en el control, el texto alternativo
o que se mueestra cuando o la
imageen no está disponible, un na palabra cllave y la freccuencia del anuncio. El co
ontrol AdRottator
no vaalida la inform
mación contenida en estte archivo.
<%@ Page
P Languag
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"
html1 transi
itional.dtd"
">
<html
l >
ad id "Head1" runat "server">

<hea
< tator Example</title>
<title>AdRot
</hea
ad>
<bod
dy>
<
id "fo
<h3>AdRot
tator Example</h3>
<asp:AdRo
otator id "AdRotator1" runat
r "serve
er"
Targ
get " self"
Adve
ertisementFile "~/App Da
ata/Ads.xml"
"/>
<
</form>
</bo
ody>

%
:

</ht
tml>

<?xml
l version "1.0" encoding "utf 8" ?>>
ertisements xmlns "http://schemas.m
<Adve microsoft.co
om/AspNet/Ad
dRotator Adv
vertisement File
1.2">
>
<Ad
d xmlns "">
<
<Keyword>AdvventureWorks</Keyword>
<
<ImageUrl>~/ images/AdventureWorks.g
gif</ImageUr
rl>
<
<NavigateUrl >http://www.adventure works.com</N
w NavigateUrl>
>
<
<AlternateTeext>Ad for Adventure Wor
rks Web site
e</Alternate
eText>
<
<Impressions >100</Impressions>
</A
Ad>
<Ad
d xmlns "">
<
<Keyword>Conntoso</Keyword>
<
<ImageUrl>~/ images/Contoso.gif</Ima
ageUrl>
<
<NavigateUrl >http://www.contoso.com
m/</Navigate
eUrl>
<
<AlternateTeext>Ad for Contoso Ltd. Web site</A
AlternateTex
xt>
<
</A
Ad>
<Ad
d xmlns "">
<
<Keyword>Norrthwind</Keyw
word>
<
<ImageUrl>~/ images/NorthwindTraders
s.gif</Image
eUrl>
<
<NavigateUrl >http://http
p://www.nort
thwindtrader
rs.com</Navi
igateUrl>
<
<AlternateTeext>Ad for Northwind Tra
aders Web si
ite</Alterna
ateText>
<
</A
Ad>
vertisements>
</Adv
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
g System.Web
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c AdRotator Control : System.Weeb.UI.Page
{
p
protected oid Page Load(object sen
vo nder, EventAArgs e)
{
AdRotato
or1.AdvertisementFile "~/App Data
a/Ads.config
g";

%
:

AdRotato
or1.Height 60;
AdRotato
or1.Width 468;
} !
}
Se recomienda
r a colocar el archiv
vo xml en la carpet
ta App_Dat
ta, a la cual
c
no tienen
t acc
ceso los navegadore
n es. Poner extensión
n .config y permiti
ir
sólo
o lectura.
Com
mpositeD
DataBoun
ndContro
ol
Repreesenta la clase base paraa un control tabular
t enlazzado a datoss que se com
mpone de otros
contrroles de servvidor.
La claase CompositeDataBoun ndControl sirrve como clase base paraa un control dde servidor
comp puesto que se enlaza a lo
os datos de un
u origen de datos. Un co ontrol de serrvidor compu uesto

%
:

es unn control quee se componee de una com mbinación dee otros contrroles de servvidor. Los
desarrrolladores ded páginas no o utilizan directamente la clase Comp positeDataB BoundContro ol; en "
su luggar, utilizan controles
c qu
ue derivan dee esta clase. Algunos ejem
mplos de con ntroles enlazzados
a datos compuesttos son los controles DettailsView, Fo ormView y GrridView.
Las cllases que heredan del co

ontrol Compo ositeDataBooundControl deben reem mplazar el mé étodo
CreatteChildContrrols(IEnumerrable,Boolean) para crear la jerarquíaa de controlees. Para tene
er
accesso a los controles secund
darios de un control enlazado a datoss compuesto o, utilice la
coleccción Controlls.
DattaList
Control de lista enlazada a datos s que muestra a los elemento
os mediante ele uso de planttillas. Utilice el
e
ol DataList pa
contro ara mostrar una
u lista enlazada a datos definida
d por unna plantilla. El control DataaList
admitte la selección y la edición.
<%@ Page
Languag eFile "eData
aList1.aspx.cs"
Inher
rits "eDataL
List1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title>Págin
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
taList ID "DataList1" ru
<asp:Dat unat "server
r" BackColor
r "White"
Bord
derColor "#DEDFDE" BordeerStyle "Non
ne" BorderWi CellPadding "4"
idth "1px" C
Data
aKeyField "Vin" DataSourrceID "Objec
ctDataSource
e1" ForeColo
or "Black"
Grid
dLines "Vertical" Width "377px">
oterStyle BackColor "#CC
<Foo CCC99" />
<Alt
ternatingItemmStyle BackC
Color "White
e" />
<Ite
emStyle BackColor "#F7F77DE" />
<SelectedItemStyle BackColoor "#CE5D5A" eColor "White" />
" Font Bold "True" Fore
<Hea
aderStyle BackColor "#6BB696B" Font Bold "True"
" ForeColor "White" />
<Ite
emTemplate>
Vin:
<asp:Label ID "VinLabel erver" Text '<%# Eval("Vin") %>' />
l" runat "se
<br />
Make:
<asp:Label ID "MakeLabe
el" runat "s t '<%# Eval("Make") %>' />
server" Text
<br />
Model:
<asp:Label ID "ModelLab
bel" runat "server"
" Tex
xt '<%# Eval("Model") %>' />
<br />
Year:
<asp:Label ID "YearLabe
el" runat "s t '<%# Eval("Year") %>' />
server" Text
<br />
Price:
<asp:Label ID "PriceLab
bel" runat "server"
" Tex
xt '<%# Eval("Price") %>' />
<br />
<br />
</It
temTemplate>
</asp:Da
ataList>
<asp:ObjectDataSource ID "ObjecctDataSource
e1" runat "s
server"
ectMethod "GetList" Type
Sele eName "Car">
></asp:Objec
ctDataSource
e>
</div>
<
<
</form>
</bod
dy>
</htm
ml>

%
:

Grid
dView
Muesstra los valorres de un origen de datoss en una tabla donde cadda columna rrepresenta un
u )
camppo y cada filaa representa un registro. El control GridView perm
mite seleccio
onar, ordenaar y
editar estos elem
mentos.
El conntrol GridVieew se utiliza para mostraar los valoress de un origeen de datos een una tabla.. Cada
colummna represen nta un camp po y cada fila representa un registro. El control GrridView admmite
las caaracterísticass siguientes:
x Enlace a controles
c dee origen de datos, como SqlDataSourc
S ce.
x Funcionees de ordenacción integrad

das.
x Funcionees de actualizzación y elim

minación integgradas.
x Funcionees de paginacción integrad

das.
x Funcionees de selecció
ón de fila inteegradas.
x Acceso mediante
m programación al
a modelo de e objetos Grid
dView para eestablecer
propiedades dinámicamente, con
ntrolar eventtos, etc.
x Varios campos de clavve.
x Varios campos de dattos para las columnas

c de
e hipervínculo
o.
x Personaliización de la apariencia a través de te

emas y estilo
os.

%
:

*
El GriidView consiiste en una colección

c de objetos Grid
dViewRow (fiilas) y una co
olección de
objettos DataConttrolField (columnas) . El objeto
o GridV
ViewRow herreda de TableeRow, el cuaal
contiene la propiedad Cells, que
q es una co olección de DataControlF
D FieldCell (celldas).

%
:

<%@ Page
P Languag
ge "C#" AutoEventWireup "true" Code
eFile "eGrid
dview1.aspx.cs"
Inher
rits "eGridv
view1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Transsitional//ENN"
"http
p://www.w3.oorg/TR/xhtml1/DTD/xhtml11 transitionnal.dtd">
<html
<head
d runat "serrver">
<
<title>Páginna sin título</title>
</hea
ad>
<body
y>
<
id "fo
<
<asp:Button ID "Button1" runat "ser
rver" OnClicck "Button1 Click" Textt "Load Car" />
<
<div>
<
</div>
<
<asp:ObjectDDataSource ID "ObjectDattaSource1" runat
r "serve
er" DataObje
ectTypeName "Car"
TypeNamee "CarList" SelectMethodd "Select" UpdateMethod
U d "Update"
Delet
teMethod "Deelete"
InsertMeethod "Insert">
<InsertPParameters>
<asp
p:Parameter Name
N "vin" Type
T "String
g" />
<asp
p:Parameter Name
N "make" Type "Strinng" />
<asp
p:Parameter Name
N "model"
" Type "Striing" />
<asp
p:Parameter Name
N "year" Type "Int322" />
<asp
p:Parameter Name
N "price"
" Type "Deciimal" />
</InserttParameters>
<
</asp:ObjecttDataSource>
<
<asp:GridVieew ID "GridView1" runat "server" St tyle "z indeex: 100; lef
ft: 20px;
posit
tion: absoluute;
top: 75ppx" AllowPaging "True" AutoGenerate
A eColumns "Faalse"
DataS
SourceID "ObbjectDataSource1"

%
:

Width "135px" CellPadding "4" DataKeyNames

D s "Vin" ForeeColor "#333333"
Lines "None">
GridL
<Columns>
<asp
p:CommandField ShowDeletteButton "Trrue" ShowEdiitButton "Tr
rue"
ShowS
SelectButton
n "True" />
<asp
p:BoundField DataField "Vin"
" Header
rText "Vin" SortExpression "Vin"
ReadO
Only "True" />
<asp
p:BoundField DataField "Make"
" Heade
erText "Makee" SortExpre
ession "Make" />
<asp
p:BoundField DataField "Model"
" Head
derText "Mod pression "Model"
del" SortExp
/>
<asp
p:BoundField DataField "Year"
" Heade
erText "Year ession "Year" />
r" SortExpre
<asp
p:BoundField DataField "Price"
" Data
aFormatStrinng "{0:C}"
Heade
erText "Pric
ce" HtmlEncode "False"
SortExpression "Price">
>
<ItemStyle HorizontalAl
lign "Right"" />
</asp:BoundField>
</Column
ns>
<FooterStyle BackColor "#5D7B9DD" Font Boldd "True" ForreColor "White" />
<RowStyle BackColor "#F7F6F3" ForeColor
F "#
#333333" />
<EditRow
wStyle BackColor "#9999999" />
<Selecte
edRowStyle BackColor "#EE2DED6" Fontt Bold "True r "#333333" />
e" ForeColor
<PagerSt
tyle BackColor "#284775"" ForeColor "White" Hor gn "Center" />
rizontalAlig
<HeaderStyle BackColor "#5D7B9DD" Font Boldd "True" ForreColor "White" />
<Alterna
atingRowStyle BackColor "White" For reColor "#2884775" />
<
</asp:GridVi ew>
<
</form>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Con
nfiguration;
using
g System.Dat
ta;
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g b.UI.HtmlControls;
System.Web
using
g b.UI.WebControls;
System.Web
using
System.Web ts;
using
g System.Xml.Linq;
publi
ic partial class
c eGridview1 : Syste
em.Web.UI.Pa
age
{
p
protected vo
nder, EventA
Args e)
{
}
p
protected vo
t sender, Ev
ventArgs e)
{
CarList.Initialize();
GridView
w1.DataBind();
}
}
DettailsView
w
Muesstra los valorres de un único registro de
d un origen de datos en n una tabla, d
donde cada fila
f de
la tab
bla representta un campoo del registro
o. El control DetailsView
D permite edittar, eliminar e
inserttar registros.
El con
ntrol DetailsView se utiliiza para mosstrar un únicoo registro dee un origen d
de datos en una
u
tabla, donde cadaa campo del registro se muestra
m en una
u fila de la tabla. Se pu uede utilizar en
e
comb binación con un control GridView
G parra escenarioss de detalless maestros. EEl control
DetaiilsView admite las caractterísticas siguientes:
x Enlace a controles
c dee origen de datos, como SqlDataSourc
S ce.

%
:

x Funcionees de inserció
ón integradas.


das.
x Acceso mediante
m programación al
a modelo de e objetos DettailsView para establecer
propiedades dinámicamente, con
x Personaliización del aspecto mediante temas y estilos.
Camp
pos de fila
Cada fila de datoss del control DetailsView

w se crea decclarando un control
c de caampo. Los
ntos tipos dee campos de fila determin
distin nan el compo ortamiento de n el control. Los
d las filas en
contrroles de campo se derivaan de DataCo ontrolField. La
L siguiente tabla
t contienne los diferen
ntes
tipos de campos de d fila que see pueden utilizar.
Tipo de campo de
d
colum
mna Descripcción
Boun
ndField Muestraa el valor de un campo de un origen de
d datos com
mo texto.
Butto
onField Muestraa un botón ded comando en el control DetailsView
w. Esto permmite
mostrarr una fila con
n un control de
d botón personalizado, tal como un
n
botón Agregar
A o Quitar.
ChecckBoxField Muestraa una casilla de verificaciión en el con

ntrol DetailsV
View.
Normalmmente, este tipo de campo de fila se utiliza para mostrar
campos con un valor booleano.
CommandField Muestraa botones dee comandos integrados queq permiten n realizar

operacio
ones de edicción, inserció
ón o eliminacción en el control
DetailsV
View.
HypeerLinkField Muestraa el valor de un campo de un origen ded datos commo un

hipervín
nculo. Este tipo de campoo de fila perm
mite enlazar un segundo
o
campo a la direcciónn URL del hip
pervínculo.
ImaggeField Muestraa una imagen

n en el contrrol DetailsVie
ew.
TemplateField Muestraa el contenid

do definido por
p el usuarioo para una fiila del contro
ol
DetailsV
View según una
u plantilla especificadaa. Este tipo d
de campo de

%
:

fila perm
mite crear un
n campo de fila
f personalizado.

De manera
m predeeterminada, la propiedad d AutoGenerateRows se establece
e en
n true, lo cuaal
permmite generar automáticam
a mente un objjeto de camp po de fila enlazado para cada campo de
tipo enlazable
e del origen de datos.
d Los tip es válidos son String, DatteTime, Decimal,
pos enlazable
Guid y el conjunto o de tipos prrimitivos. Cada campo see muestra en ntonces como o texto en un na
fila, en
e el orden en
e el que cad da uno apareece en el origgen de datos.
Prop
piedad de esttilo Descripción
AlterrnatingRowSStyle Configuración de estilo

e de las filas
f de datoss alternas deel control
DetailssView. Cuando se establece esta pro opiedad, las ffilas de datos se
muestran alternanndo la configuuración de RowStyle
R y la configuració
ón
de Alte
ernatingRowwStyle.
CommandRowSttyle Configuración de estilo

e de la fila que contieene los botones de
comanndo integrados en el control DetailsV View.
EditR
RowStyle Configuración de estilo
e de las filas
f de datoss cuando el ccontrol
DetailssView está en
e modo de edición.
e
EmptyDataRowSStyle Configuración de estilo

e de la fila de datos vacía
v que se muestra en el
contro
ol DetailsView
w cuando el origen de daatos no conttiene registro
os.
FootterStyle Configuración de estilo

e de la fila del pie de página del ccontrol
DetailssView.
Head
derStyle Configuración de estilo
e de la fila del encabeezado del co
ontrol
DetailssView.
InserrtRowStyle Configuración de estilo

e de las filas
f de datoss cuando el ccontrol
DetailssView está en
e modo de inserción.
i
Page
erStyle Configuración de estilo
e de la fila del localizador del con
ntrol
DetailssView.
Row
wStyle Configuración de estilo
e de las filas
f de datoss del control DetailsView
w.
Cuando también see establece a propiedad AlternatinggRowStyle, laas
filas dee datos se muestran alternando la co onfiguración de RowStyle ey
la conffiguración dee AlternatinggRowStyle.
Field
dHeaderStylee Configuración de estilo
e de la co
olumna del encabezado
e d
del control

%
:

DetailssView.

Eventtos
El conntrol DetailsView proporrciona varioss eventos que puede utilizar para proogramar. De esta
maneera, se puedee ejecutar unna rutina perrsonalizada siempre
s que se produzcaa un evento. En la
siguieente tabla see enumeran los eventos admitidos
a po
or el control DetailsView
w. El control
DetaiilsView tamb bién hereda estos eventoos de sus clases base: DaataBinding, D
DataBound,
Dispoosed, Init, Load, PreRender y Render..
Even
nto Descrip
pción
Item
mCommand Se prod
duce cuando se hace clic en un botón
n del control DetailsView
w.
Item
mCreated Se prodduce despuéss de haber creado todos los objetos
DetailsV
ViewRow en el control DetailsView.
D Este evento suele utilizarse
para mo odificar los valores
v de un
n registro antes de mostrrarlo.
Item
mDeleted Se prod
duce al hacerr clic en un botón
b Eliminaar, pero desp
pués de que el
control DetailsVieww elimine el registro
r del origen
o de dattos. Este
evento suele utilizarse para commprobar el reesultado de lla operación de
eliminación.
Item
mDeleting Se prod
b Eliminaar, pero antees de que el
control DetailsVieww elimine el registro
r del origen
o de dattos. Este
evento suele utilizarse para canncelar la operración de eliminación.
Item
mInserted Se prod
b Insertaar, pero desp
pués de que el
control DetailsView
w inserte el registro. Estee evento suelle utilizarse
para co
omprobar loss resultados ded la operacción de insercción.
Item
mInserting Se prod
b Insertaar, pero antees de que el
control DetailsView
w inserte el registro. Estee evento suelle utilizarse
para cancelar la opeeración de in
nserción.
Item
mUpdated Se prod
b Actualiizar, pero deespués de quue
el contrrol DetailsView actualice
e la fila. Este evento suele utilizarse
para co
omprobar loss resultados ded la operacción de actuaalización.
Item
mUpdating Se prod
b Actualiizar, pero an
ntes de que el
e
control DetailsView
w actualice el registro. Este evento suuele utilizarse
e
para cancelar la opeeración de actualización..

%
:

Mod
deChanged Se prod
duce despuéss de que el control
c DetaiilsView camb bie de modo o
(modo de edición, inserción o sólo lectura). Este eventoo se utiliza a

menudo o para realizzar una tareaa cuando el control
c DetaiilsView camb bia
de moddo.
Mod
deChanging Se prodduce antes dee que el control DetailsVView cambie de modo
(edición
n, inserción o sólo lectura). Este even
nto se utiliza a menudo
para cancelar un cambio del mo odo.
PageeIndexChangged Se prodduce cuando se hace clic en uno de loos botones d de paginación,

pero deespués de qu ue el control DetailsView
w se ocupe dee la operacióón
de pag nación. Norm malmente esste evento see utiliza cuan
ndo se necessita
realizarr una tarea después de que el usuarioo se desplacee a otro
registro
o del control.
PageeIndexChangging Se prod
duce cuando se hace clic en uno de lo os botones d de paginación,
pero an
ntes de que ele control De
etailsView see ocupe de laa operación de
d
paginacción. Este evento suele utilizarse
u paraa cancelar la operación de
d
paginacción.

%
:

!
<%@ Page
P Languag
eFile "eData
ailsView1.aspx.cs"
Inher
rits "eDatailsView1" %>
CTYPE html PUBLIC

<!DOC P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title>Págin
</hea
ad>
<body
y>
<
id "fo
<
<div>
<asp:ObjectDataSource ID "Objec
ctDataSource
e1" runat "s
server"
DataO
ObjectTypeNa
ame "Car"
Type
eName "CarList" SelectMe
ethod "Selec
ct" UpdateMe
ethod "Updat
te"
Delet
teMethod "De
elete"
Inse
ertMethod "Insert"></asp
p:ObjectData
aSource>

%
:

<asp:But
tton ID "Button1" runat "server" On
nClick "Butt
ton1 Click" Text "Load Cars"
/>
<asp:DettailsView ID "DetailsVieew1" runat "server"
" All
lowPaging "T
True" "
CellP
Padding "4"
DataaSourceID "ObbjectDataSou
urce1" ForeC
Color "#3333
333" GridLin
nes "None"
Heigh
ht "50px"
Style "z index: 103; left: 20px; posit tion: absolu
ute; top: 85px"
Width
h "305px"
AutooGenerateRows "False" DaataKeyNames "Vin">
<FoooterStyle BackColor "#5DD7B9D" Font Bold "True"
" ForeColor "White" />
<CommmandRowStyle BackColor "#E2DED6" Font
F Bold "T
True" />
<EditRowStyle BackColor "#9 999999" />
<RowwStyle BackColor "#F7F6FF3" ForeColo
or "#333333"
" />
<PaggerStyle BackColor "#2844775" ForeCo " HorizontalAlign "Center"
olor "White"
/>
<Fieelds>
<asp:BoundField DataFieeld "Vin" He
eaderText "V pression "Vin"
Vin" SortExp
ReadO
Only "True" />
<asp:BoundField DataFieeld "Make" HeaderText
H "
"Make" SortE
Expression "Make"
/>
<asp:BoundField DataFieeld "Model" HeaderText "Model"
SortE
Expression "Model" />
<asp:BoundField DataFieeld "Year" HeaderText
H "
"Year" Expression "Year"
SortE
/>
<asp:BoundField DataFieeld "Price" HeaderText "Price"
SortE
Expression "Price" DataFormatString g "{0:C}"
HtmlEncode "False">
>
<ItemStyle Horizont
talAlign "Ri
ight" />
</asp:BoundField>
<asp:CommandField ShowDDeleteButton
n "True" Sho
owEditButton
n "True"
ShowI
InsertButtonn "True" />
</Fields>
<FieeldHeaderStyle BackColorr "#E9ECF1" Font Bold "True"
" />
<HeaaderStyle BackColor "#5D " ForeColor "White" />
D7B9D" Font Bold "True"
<AltternatingRowStyle BackCo " ForeColor "#284775" />
olor "White"
</asp:DeetailsView>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.HtmlControls;
using
g b.UI.WebControls;
System.Web
using
System.Web ts;
using
g System.Xml.Linq;
publi
ic partial class
c eDatailsView1 : Sy
ystem.Web.UI
I.Page
{
p
protected vo
nder, EventA
Args e)
{
}
p
protected vo
t sender, Ev
ventArgs e)
{
DetailsV
View1.DataBind();
}
}
FormView
Muesstra los valorres de un reggistro individ
dual de un orrigen de datoos utilizando plantillas
definidas por el usuario.
u El co
ontrol FormV View permite e editar, elim
minar e inserttar registros..
ntrol FormViiew permite mostrar un registro individual de un

El con n origen de datos. Es similar al
contrrol DetailsVieew, exceptuaando que mu
uestra plantillas definidas por el usuaario, en lugarr de

%
:

camp
pos de fila. Crear sus proppias plantillaas le ofrece más
m flexibilidad para conttrolar cómo se
muesstran los dato
os. El contro
ol FormView admite las característica
c as siguientes: )
x Enlace a los
l controless de origen de
d datos, com
mo SqlDataSo
ource y ObjeectDataSourcce.
x Funcionees de inserció
ón integradas.


das.
x Acceso mediante
m programación al
a modelo de e objetos ForrmView paraa establecer
dinámicamente propiedades, con
x Aspecto personalizab
p ble por medio
o de plantillaas, temas y estilos
e definid
dos por el
usuario.

%
:

*
<%@ Page
P Languag
eFile "eForm
mView1.aspx.cs"
Inher
rits "eFormV
View1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title>Págin
</hea
ad>
<body
y>
<
<form id "fo
<
<div>

%
:

<asp:ObjectDataSource ID "Objec ctDataSource

e1" runat "s
server"
DataO
ObjectTypeNa
ame "Car"
Type
eName "CarList" SelectMe ethod "Selec
ct" UpdateMe
ethod "Updatte"
Delet
teMethod "De
elete"
Inse
ertMethod "Insert"></asp p:ObjectData
aSource>
<br />
<br />
<br />

<asp:But
tton ID "Button1" runat "server" On ton1 Click" Text "Load Cars"
nClick "Butt
/>
<
</div>
< ew ID "FormView1" runat "server" Al
<asp:FormVie llowPaging "True"
" KeyNames "Vin"
DataK
rceID "ObjectDataSource1
DataSour 1" Width "10
00%">
<ItemTem
mplate>
<tab
ble>
<tr>
<td align "center">>
<hr />
<span style "foont weight: bold; color
r: blue">VINN:</span>
<asp
p:Label ID "VinLabel"
" Width
W "105px
x" runat "seerver" Text '<%#
Eval(
("Vin") %>'>
>
</asp:Label>&nbbsp; <span
< style "font weighht: bold; color:
blue"
">Make:</spa
an>
<asp
p:Label ID "MakeLabel"
" px" runat "server" Text '<%#
Width "105p
Eval(
("Make") %>'>
blue"
">Model:</sp
pan>
<asp
p:Label ID "ModelLabel"
" " Width "105
5px" runat "server"
Text '<%# Eval("Model") %>'>
blue"
">Year:</spa
an>
<asp
p:Label ID "YearLabel"
" px" runat "server" Text '<%#
Width "105p
Eval(
("Year") %>'>
</asp:Label><brr />
</td>
</tr>
<tr>
<span style "foont weight: bold; font size: x larrge; color:
">Price: </span><span
blue"
style "font
t weight: bo
old; font si
ize: x largee">
abel" Width "105px" run
<asp:Label ID "PriceLa nat "server"
Text '<%# Eval("Price","{0:C}") %>'>
</asp:Label
l></span>
</td>
</tr>
<tr>
<hr />
<asp
p:LinkButtonn ID "LinkBu
utton1" runa
at "server"
Cause
esValidation
n "False" Com mmandName "EEdit"
Text "Edit"
"> </asp:Lin
nkButton>
<asp
utton2" runa
at "server"
Cause
esValidation
n "False" Com mmandName "NNew"
Text "New">
>
</asp:LinkButtoon>
<asp
utton3" runa
at "server"
Cause
esValidation
n "False" Com mmandName "DDelete"
Text "Delet
te">
</asp:LinkButtoon>
</td>
</tr>
</ta
able>
</ItemTe
emplate>
<EditIte
emTemplate>
<tab
ble>
<tr>
<hr />
<span style "foont weight: bold; color
<asp
p:Label ID "VinLabel"
" Width
W "105px
x" runat "seerver" Text '<%#
Eval(
("Vin") %>'>
>
blue"
">Make:</spa
an>
<asp
p:TextBox IDD "EditMakeT
TextBox" Wid
dth "100px" runat "server"
Text '<%# Bind("Make") %>'>

%
:

</asp:TextBox>&
; <span styl
le "font weight: bold;
color
r: blue">Mod
del:</span>
<asp
p:TextBox ID D "EditModel
lTextBox" Wi
idth "100px" runat "server"
Text '<%# Bind("Model") %>'>
</asp:TextBox>&    le "font weight: bold;
; <span styl
color
r: blue">Yea
ar:</span>&nb bsp;
<asp
p:TextBox ID D "EditYearT dth "100px" runat "server"
TextBox" Wid
Text '<%# Bind("Year") %>'>
</asp:TextBox>< <br />

</td>
</tr>
<tr>
<td align "center"> >
<span style "fo ont weight: bold; font size: largee; color:
blue"
style "fontt weight: bo
old; font si
ize: large">>
<asp:TextBoox ID "EditP x" Width "100px"
PriceTextBox
runat
t "server" Text
T '<%# Bind("Price") %>'>
</asp:TextBBox></span>
</td>
</tr>
<tr>
<hr />
<asp
p:LinkButton n ID "LinkBu
utton1" runa
at "server"
Cause
esValidation
n "True" Comm mandName "Up pdate"
Text "Updatte">
</asp:LinkButto on>
<asp
p:LinkButton n ID "LinkBu
utton2" runa
at "server"
Cause
esValidation
n "False" Com mmandName "C Cancel"
Text "Canceel">
</asp:LinkButto on>
</td>
</tr>
</ta
able>
</EditIt
temTemplate>
<EmptyDa
ataTemplate>
<tab
ble width "655px">
<tr>
<hr />
<span style "fo ont weight: bold; font size: x larrge; color:
blue"
">No Cars Fo
or Sale
Chack Back Soon! </spaan>
<tr>
<td align "center">
"
<hr />
<asp:LiinkButton ID on2" runat "server"
D "LinkButto
Cause
esValidation
n "False" Com mmandName "N New"
Texxt "New">
</asp:LLinkButton>
</td>
</tr>
</ta
able>
DataTemplate>
</EmptyD
<InsertItemTemplate>
<tab
ble>
<tr>
<hr />
<span style "fo ont weight: bold; color
<asp
p:TextBox ID D "InsertVin idth "100px" runat "server"
nTextBox" Wi
Text '<%# Bind("Vin") %>'> </asp:TextBo ox> &nb
bsp;
r: blue">Makke:</span>
<asp
p:TextBox ID D "InsertMak
keTextBox" Width
W "100pxx" runat "server"
Text '<%# Bind("Make") %>'> </asp:TextB Box> &n
nbsp;
r: blue">Moddel:</span>
<asp
p:TextBox ID D "InsertMod
delTextBox" Width "100ppx"
runat
t "server" Text
T '<%# Bind("Model") %>'> </asp: :TextBox>&nb
bsp;
r: blue">Yeaar:</span>
<asp
p:TextBox ID D "InsertYea
arTextBox" Width
W "100pxx" runat "server"
Text '<%# Bind("Year") %>'> </asp:TextB Box><br />

</td>
</tr>
<tr>

%
:


<span style "foont weight: bold; font size: large e; color:
blue"
style "font
t weight: bo
old; font siize: large">>
<asp:TextBo
ox ID "Inser
rtPriceTextBBox" Width "100px"
runat
t "server" Text
T '<%# Bind("Price") %>'></asp:T TextBox></sppan>
</td>
</tr>
<tr>
<hr />
<asp
utton1" runaat "server"
Cause
esValidation
n "True" Comm mandName "Innsert"
Text "Inser
rt"> </asp:L
LinkButton>
<asp
utton2" runaat "server"
Cause
esValidation
n "False" Com mmandName "CCancel"
Text "Cance
el">
</asp:LinkButtoon>
</td>
</tr>
</ta
able>
</Insert
tItemTemplate>
<HeaderT
Template>
<tab
ble>
<tr>
<span style "foont weight: bold; font size: x lar rge; color:
blue"
">Car For Sa
ale</span>
</td>
</tr>
<tr>
<td>
</Header
rTemplate>
<FooterT
Template>
</td
d></tr></table>
</Footer
rTemplate>
<
</asp:FormVi ew>
&
      <br /> /
<
</form>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Con
nfiguration;
using
g System.Dat
ta;
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.HtmlControls;
g System.Web
g System.Web ts;
g System.Xml.Linq;
using
publi
ic partial class
c eFormView1 : Syste
em.Web.UI.Pa
age
{
p
protected vo
nder, EventA
Args e)
{
}
p
protected vo
t sender, Ev
ventArgs e)
{
FormView
w1.DataBind();
}
}
HierarchicallDataBou
undContrrol
Actúaa como clasee base para todos los con
ntroles enlazados a datoss de la versió
ón 2.0 de ASP
P.NET
que muestran
m suss datos con un
u formato jerárquico.

%
:

Hiera
archicalDataB
BoundContro
ol es la clase base que se utiliza
u para los
s controles AS
SP.NET que
recuperan datos de
e un control de
el origen de datos jerárquic
co ASP.NET y enlazan elementos de interfaz
de usuario del conttrol a dichos datos
d para mo
ostrarlos. Las clases
c TreeVie
ew y Menu se derivan de
Hiera
archicalDataB
BoundContro
ol.
Los de
esarrolladores
s de páginas no
n utilizan dire
ectamente la clase Hierarc
chicalDataBo
oundControl;; en su
lugar,, usan controles que derivan de esta clas
se.
TreeView
Muesstra datos jerárquicos, coomo una tab bla de contennido, en una estructura d de árbol. El
contrrol TreeView
w se utiliza paara mostrar datos
d jerárquicos, tales como
c una tabla de conte enido
o un directorio dee archivos, en una estrucctura de árbool y admite laas siguientess características:
x Enlace dee datos que permite

p enlaazar los nodo
os del contro
ol a datos XM
ML, tabulares o
relacionaales.
x Navegación del sitio mediante

m la integración con
c el contro
ol SiteMapDaataSource.
x Texto de nodo que see puede mosstrar como te

exto sin form
mato o hipervvínculos.
x Acceso mediante
m programación al
a modelo de e objetos TreeView para crear árbole
es,
rellenar nodos,
n establecer propiedades, etc., de forma din
námica.
x Relleno de
d nodos del lado cliente (en exploradores compaatibles).
x La capacidad para mo
ostrar una caasilla al lado de cada nodo.
p ble por medio usuario y estilos.
o temas, imáágenes definidas por el u
Nodo
os
El con
ntrol TreeVie
ew se compo one de nodoos. Cada entrada del árbo
ol se denomina nodo y esstá
repreesentado porr un objeto TreeNode.
T Lo
os tipos de nodo se defin
nen como siggue:
x Un nodo que contiene otros nodo

os se denomina un nodo primario.

%
:

x El nodo contenido
c en
n otro nodo se
s denomina nodo secundario.

x Un nodo que no tienee nodos derivados se den
nomina nodo
o de hoja.
x El nodo que
q no está contenido
c enn ningún otro
o nodo pero es el nodo p
primario de todos
los demás nodos es el
e nodo raíz.
Un noodo puede ser un elemento primarioo y un elemento secundaario, pero loss nodos raíz,
primaarios y de ho des visuales y conductuales de
oja son mutuamente excllusivos. Variaas propiedad
odos vienen determinadas por si un nodo es raíz,, primario o de hoja.
los no
Aunqque una estruuctura de árb bol típica tiene sólo uno nodo raíz, ell control TreeView permmite
odos raíz a la estructura de
agreggar varios no d árbol. Esto
o es útil cuan
ndo se deseaa mostrar listtas de
elementos sin mo ostrar un nod do raíz únicoo, como en una lista de caategorías dee productos.
Cada nodo tiene una propiedad Text y una propiedad Value. El valor de la pro opiedad Text se
muesstra en el con
ntrol TreeVie
ew, mientrass que la proppiedad Valuee se utiliza paara almacenaar
cualq
quier informaación adicion
nal sobre el nodo,
n tal com
mo los datos que se pasaan al evento de
devolución de datos asociado o al nodo.
Un noodo puede estar

e en uno de dos modo os: modo de
e selección o modo de naavegación. De e
maneera predeterminada, un nodo n está en
n modo de seelección. Parra poner un n
nodo en mod do de
naveggación, estab blezca la pro
opiedad NavigateUrl del nodo
n en un valor
v distinto
o de una cadena
vacía (""). Para po
oner un nodo d selección, establezca la propiedad NavigateUrl del
o en modo de
nodoo en una cadeena vacía ("").
Datos estáticos
El moodelo de dato os más simple del contro ol TreeView es el de datoos estáticos. Para mostraar
datoss estáticos mediante
m sinttaxis declarattiva, primero
o coloque etiquetas <Nodes> de apertura
y cierrre entre las etiquetas dee apertura y cierre del coontrol TreeViiew. A contin
nuación, cree la
estructura de árb bol anidando los elementtos <asp:TreeNode> entrre las etiquettas <Nodes> > de
aperttura y cierre.. Cada elemeento <asp:TreeNode> representa un nodo del árb bol y se asign
na a
un obbjeto TreeNo ode. Puede establecer
e lass propiedadees de cada noodo establecciendo los
atribuutos de su ellemento <asp:TreeNode e>. Para crear nodos secu undarios, anide elemento os
<asp::TreeNode> adicionales entre las etiq quetas <asp:TreeNode> de apertura y cierre del nodo
primaario.
Enlacce a datos
El con
ntrol TreeVie
ew también se puede en nlazar a datoss. Para enlazzar el controll TreeView al
a tipo
de orrigen de dato
os adecuado,, puede utilizzar uno cualquiera de loss dos métodos siguientes:
x El control TreeView puede

p utilizar cualquier control
c de orrigen de dato os que
implemen nta la interfaaz IHierarchiccalDataSource, como un control XmlDataSource o un
control SiteMapDataSSource. Paraa enlazar a un n control de origen de daatos, estable ezca la
propiedad DataSourcceID del conttrol TreeView w en el valorr ID del contrrol de código
o
fuente dee datos. El co
ontrol TreeView se enlazza automáticamente al co ontrol de origen
de datos especificado o. Éste es el método
m recoomendado paara el enlacee a datos.

%
:

x El control TreeView también

t se puede
p enlazar a un objeto
o XmlDocumment o un objjeto
DataSet con
c relacionees. Para enlaazar a uno de
e estos orígenes de datoss, establezcaa la
propiedad DataSourcce del controol TreeView en
e el origen de
d datos y, a continuació ón,
llame al método
m DataaBind.
Al enlazar a un orrigen de datoos donde cadda elemento de datos co ontiene varias propiedade es
(como un elemen nto XML con varios atribu utos), un nod
do muestra ded manera predeterminaada el
valor devuelto poor el método o ToString deel elemento de
d datos. En el caso de un elemento XML,
el nodo muestra el nombre del elemento,, el cual indicca la estructura subyacen nte del árbol,
pero no es muy útil
ú en otro seentido. Pued de enlazar un
n nodo a unaa determinad da propiedadd del
elemento de dato os especificando los enlaaces del nodo
o del árbol mediante
m la ccolección
DataBBindings. La colección DaataBindings contiene
c objetos TreeNoodeBinding q que definen la
relación entre un elemento de datos y el nodo al que se enlaza. Puede especifficar los crite erios
del enlace y la pro
opiedad del elemento dee datos que ses va a mosttrar en el nod do. Para obteener
más información
i sobre enlacees de nodos de árbol, vea TreeNodeB Binding.
Poblaación de nod
do dinámica
En occasiones, no es práctico definir

d estátiicamente la estructura del árbol porq
que el origen
n de
datoss devuelve demasiados datos
d o porqu ue los datos a mostrar deependen de la información
obten nida en tiempo de ejecucción. Debido o a esto, el co
ontrol TreeV
View admite q
que los nodoos se
rellen
nen de formaa dinámica. Cuando
C se esstablece la propiedad
p Po
opulateOnDeemand de un n
nodo o en true, el nodo
n se relleena en tiemppo de ejecuciión cuando ses expande. Para rellenarr
dinámmicamente un u nodo, deb be definir un método de control de evventos que ccontenga la lógica
l
para rellenar un nodo
n para el evento TreeeNodePopulaate.
Los exploradores compatibless con los scriipts de devolución de llam mada tambiéén pueden sacar
partiddo del llenad
do de nodos en el clientee. (Se incluyeen Internet Exxplorer 5.5 y versiones
posteeriores y algu
unos otros exxploradores..) El relleno de
d nodos dell lado clientee habilita el
contrrol TreeVieww para rellenaar un nodo mediante
m seccuencias de comandos
c dee cliente cuaando
los ussuarios expanden el nodo, sin necesidad de una acción
a de idaa y vuelta al servidor. Para
obtenner más información sob bre el relleno
o de nodos en el cliente, vea
v
PopulateNodesFrromClient.
Perso
onalización de
d la interfazz de usuario
Existeen muchas maneras

m de personalizar
p el aspecto del control TrreeView. En primer lugarr,
puede especificarr un estilo diferente (porr ejemplo, tamaño y colo or de fuente) para cada uno de
pos de nodo.
los tip
Si utiliza hojas dee estilos en caascada (CSS) para personnalizar la apaariencia del ccontrol, utilicce
estilo
os en línea o un archivo CSSC independ diente, pero no ambos. Si S se utilizan ambos, se
podríían producir resultados inesperados. Para obtene er más inform mación sobree cómo utilizzar
hojass de estilos con controless, vea Contro oles de servid
dor Web ASP P.NET y estiloos de CSS.
La tab
bla siguientee enumera lo
os estilos de nodo dispon
nibles.

%
:

Prop
piedad de esttilo de
nodo
o D
Descripción
!
HoveerNodeStyle Configuración
C n de estilo paara un nodo cuando el puntero del
m
mouse se colo
oca sobre él.
LeafN
NodeStyle La configuracción de estilo
o para los nod
dos de hoja.
NodeeStyle La configuracción de estilo

o predetermiinada para un nodo.
PareentNodeStylee La configuracción de estilo

o para los nod
dos primario
os.
RoottNodeStyle La configuracción de estilo

o para el nodo raíz.
SelecctedNodeStyyle La configuracción de estilo

o para un nod
do seleccionado.
Otra manera de modificar

m el aspecto
a del control
c es la personalizacción de las im
mágenes que e se
muesstran en el coontrol TreeV
View. Puede especificar sus propio con njunto perso onalizada de
imágeenes para las diferentes partes del coontrol estableciendo las propiedadess que apareccen en
bla siguiente.
la tab
Prop
piedad de
imaggen Descrip
pción
CollaapseImageUrrl La dirección URL a una imagen mostrada paara el indicad

dor de nodo
contraííble. Esta imaagen normallmente es un
n signo meno
os ().
ExpaandImageUrl La dirección URL a una imagen mostrada paara el indicad

dor de nodo
expanssible. Esta im
magen normaalmente es un signo más (+
LineIImagesFoldeer La dirección URL a la carpeta quue contiene las imágeness de línea

utilizad
das para coneectar los nod
dos primario
os a los nodos secundario
os.
La proppiedad ShowwLines debe establecerse
e también en true para qu
ue
surta efecto.
NoExxpandImageUrl La dirección URL a una imagen mostrada paara el indicad

dor de nodo no
expanssible.
El conntrol TreeVie ew también permite mosstrar una cassilla junto a un

u nodo. Cuaando la prop
piedad
ShowwCheckBoxess se establece en un valor distinto de TreeNodeTyypes.None, se muestran n
casillaas junto a los tipos de no
odo especificcados.
Eventtos

%
:

El conntrol TreeVieew proporcio

ona varios evventos que puede
p utilizaar para progrramar. De estta
maneera, se puedee ejecutar unna rutina perrsonalizada siempre
s que se produzcaa un evento. En la "
siguieente tabla see enumeran los eventos admitidos
a poor el control TreeView.
Even
nto De
escripción
TreeNodeCheckC
Changed See produce cuando las casillas del conttrol TreeView
w cambian
enntre cada envvío al servido
or.
SelecctedNodeChanged See produce cuando se sele

ecciona un no
odo en el con
ntrol TreeView.
TreeNodeExpand
ded See produce cuando se expaande un nod
do en el conttrol TreeView
w.
TreeNodeCollapssed See produce cuando se conttrae un nodo

o en el contrrol TreeView
w.
TreeNodePopulaate Ap
parece cuanddo un nodo con
c su propieedad PopulateOnDeman
nd
establecida en
n true se expande en el control TreeV
View.
TreeNodeDataBo
ound See produce cuando un elem
mento de daatos se enlaza a un nodo del
co
ontrol TreeViiew.
<?xml version="1.0" encoding="utf 8" ?>

<Custo
omers>
<Cus erId="1" Name="Northwind Traders">
stomer Custome T
<O
Orders>
<Order OrderId="1" ShipDate="06 22 200
06">
<OrderItems>
<OrderIte
em OrderItemId="1" PartNum
mber="123"
PartDescription="Larg
ge Widget" Qua
antity="5"
Price="22.00" />
<OrderIte
mber="234"
PartDescription="Medium Widget" Qu
uantity="2"
Price="12.50" />
</OrderItem
ms>
</Order>
06">
<OrderItems>
<OrderIte
mber="432"
PartDescription="Small Widget" Qua
antity="30"
Price="8.99" />
<OrderIte mber="234"
PartDescription="Medium Widget" Qu
uantity="2"

%
:

Price="12.50" />
</OrderItem
ms>
</
</Order>
/Orders>
)
<I
Invoices>
oiceId="6" Am
<Invoice Invo mount="99.37" />
<Invoice Invo
oiceId="7" Am
mount="147.50"
" />
</
/Invoices>
</Cu
ustomer>
<Cus
stomer Custome
erId="2" Name="Tailspin To
oys">
<O
Orders>
06">
<OrderItems>
<OrderIte
mber="987" Par
rtDescription=
="Combo Widget
t" Quantity="2"
Price=
="87.25" />
<OrderIte
em OrderItemId="10" PartNu
umber="654" Pa
artDescription t" Quantity="1"
n="Ugly Widget
Price=
="2.00" />
ms>
</OrderItem
</Order>
<Order OrderId="11" ShipD
Date="08 21 20
006">
<OrderItems>
<OrderIte
umber="999" Pa
artDescription
n="Pretty Widg
get" Quantity
y="50"
Price=
="78.99" />
<OrderIte umber="575" Pa
artDescription
n="Tiny Widget
t" Quantity="100"
Price=
="1.20" />
</OrderItem
ms>
</Order>
</
/Orders>
<I
Invoices>
oiceId="26" Amount="46.58"
<Invoice Invo A " />
<Invoice Invo
oiceId="27" Amount="279.15
A 5" />
</
/Invoices>
</Cu
ustomer>
</Cust
tomers>
<%@ Page
P Languag
eFile "eTree
eView1.aspx.cs"
Inher
rits "eTreeV
View1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.oorg/TR/xhtml1/DTD/xhtml11 transition
nal.dtd">
<html
<head
d runat "serrver">
<
<title>Páginna sin título</title>
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
<asp:XmlDataSource ID "XmlDataS Source1" run
nat "server"
"
DataF
File "~/App Data/treeviewxml.xml">
</asp:XmmlDataSource>
<asp:TreeeView ID "TreeView1" ruunat "server
r" DataSourc
ceID "XmlDat
taSource1"
ShowL
Lines "True"
Expa
andDepth "0" onselectednnodechanged "TreeView1 SelectedNod
deChanged">
<Dat
taBindings>
<asp:TreeNodeBinding Da
ataMember "C
Customer" Te
extField "Na
ame"
Value
eField "CusttomerId" />
ataMember "O
Order" TextF
Field "ShipD
Date"
Value
eField "OrdeerId" />
ataMember "O
OrderItem" TextField
T "P
PartDescription"
Value
eField "OrdeerItemId" />
ataMember "I
Invoice" Tex
xtField "Amo
ount"
Value
eField "InvooiceId"
FormatString "{0:C}" />
ataBindings>
</Da
</asp:TrreeView>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Con
nfiguration;
using
g System.Dat
ta;
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.HtmlControls;

%
:

using
g System.Web
b.UI.WebControls;
g System.Web ts;
g System.Xml.Linq;
using *
publi
ic partial class
c eTreeView1 : Syste
em.Web.UI.Pa
age
{
p
protected vo
nder, EventA
Args e)
{
}
p
protected vo
oid TreeView1 SelectedNo
odeChanged(o
object sende
er, EventArg
gs e)
{
Response
e.Write("Value:" + TreeV
View1.Select
tedNode.Valu
ue);
}
}
Men
nu
Muesstra un menú
ú en una pággina web ASP
P.NET.
El con
ntrol Menu se
s utiliza parra mostrar un n menú en una
u página webw ASP.NET,, a menudo en e
comb binación con un control SiteMapData
S aSource paraa navegar por un sitio weeb. El control
Menu u admite las característiccas siguientees:
x Enlace dee datos que permite

p mentos de meenú del control a orígene
enlaazar los elem es de
datos jeráárquicos.
x Exploración del sitio mediante

m la integración con
c el contro
ol SiteMapDaataSource.
x Acceso mediante
m programación al
a modelo de
el objeto Men nu para creaar menús, relllenar
elemento
os de menú, establecer propiedades,
p etc., de form
ma dinámicaa.
p ble mediantee temas, imággenes definid
das por el ussuario, estilo
os y
plantillas definidas po
or el usuario.
Cuando el usuario o hace clic enn un elemennto de menú,, el control Menu

M puede navegar a una
páginna Web vincu ulada o simpplemente devvolver la pággina al servidor. Si la prop
piedad
NaviggateUrl de un n elemento de d menú se encuentra
e establecida, el
e control Meenu navega a la
páginna vinculada;; de lo contraario, devuelvve la página al
a servidor para que la procese. De
maneera predeterminada, unaa página vincculada se mu uestra en la misma
m ventana o marco que
q el
contrrol Menu. Paara mostrar el e contenido vinculado en una ventan na o un marcco diferente,,
utilicee la propiedaad Target deel control Me
enu.
El conntrol Menu muestra

m dos tipos de meenús: un mennú estático y un menú dinámico. El menú
m
estático siempre se muestra en e un contro ol Menu. De manera pred determinadaa, los elemen ntos
de menú del niveel raíz (nivel 0)
0 se muestraan en el men nú estático. Puede
P mostrrar otros nive
eles
de menú (submenús estáticoss) dentro del menú estáttico establecciendo la propiedad
StaticcDisplayLeveels. Los elemeentos de meenú (si existe alguno) conn un nivel máás alto que el
valor especificadoo por la proppiedad StaticcDisplayLevels se muestraan en un meenú dinámico o. Un
menú ú dinámico sólo aparece cuando el ussuario colocaa el puntero del mouse (ratón) sobre e el
elemento del menú primario que contiene el submen nú dinámico. Los menús d dinámicos
desap parecen autoomáticamente después de d cierto tiemmpo. Utilice la propiedadd DisappearA After
para especificar esa
e duración.

%
:

Tambbién puede liimitar el núm

mero de niveeles que se muestran
m en un menú dinnámico
estab
bleciendo la propiedad
p M
MaximumDyn namicDisplayyLevels. Los niveles
n de m
menú superiores al
valor especificado
o no se tieneen en cuentaa
Elementos de me
enú
ontrol Menu se componee de un árbo

Un co ol de elementtos de menú ú representad
dos por obje
etos
Menu uItem. Los ellementos dee menú del nivel superiorr (nivel 0) se denominan elementos del
d
menú ú raíz. Un eleemento de menú
m ento de menú primario see llama elem
que tiene un eleme mento
de menú secundaario. Todos lo os elementos del menú raíz
r se almaccenan en la ccolección Items.
Los elementos dee un menú seecundario see almacenan en la colecciión ChildItem ms de elementos
de su
u menú primaario.
Cada elemento de menú tiene una propieedad Text y una u propiedaad Value. El vvalor de la
propiiedad Text see muestra enn el control Menu,
M mienttras que la propiedad Value se utilizaa para
almaccenar cualqu uier informacción adicionaal sobre el ellemento de menú,
m tal como los datoss que
se paasan al eventto de devolucción de dato
os asociado ala elemento ded menú. Al hacer clic en n un
elemento de men de navegar a otra páginaa Web indicada por la pro
nú, éste pued opiedad
NaviggateUrl.
Datos estáticos
El moodelo de dato os más simple del contro ol Menu es el mentos de menú estático
e de los elem os.
Para mostrar elem mentos de menú
m estático
os mediante sintaxis declarativa, primmero coloque
etiquetas <Items>> de aperturra y cierre en ntre las etiqu
uetas de apertura y cierree del control
Menu u. A continuaación, cree laa estructura de menú an nidando los elementos
e <aasp:MenuIte em>
entree las etiquetaas <Items> de apertura y cierre. Cadaa elemento <asp:MenuIt
< tem> represe enta
un elemento de menú
m del con
ntrol y se corrresponde co on un objeto
o MenuItem. Puede estab blecer
las prropiedades de
d cada elem mento de menú estableciendo los atriibutos de su elemento
<asp::MenuItem>>. Para crear los elementos de subme enú, anide ellementos <asp:MenuItem m>
adicioonales entre las etiquetaas <asp:MenuItem> de apertura y cieerre del elem mento de menú
primaario.
Enlacce a datos
El con
ntrol Menu también
t se puede
p e control Meenu al tipo de
enlazaar a datos. Paara enlazar el
origen de datos adecuado,
a pu
uede utilizar uno cualquiera de los doos métodos ssiguientes:
x El control Menu pued de utilizar cu

ualquier conttrol de origenn de datos jeerárquico, coomo
un controol XmlDataSo ource o un co ontrol SiteM
MapDataSource. Para enlaazar a un con ntrol
de origenn de datos jerárquico, esttablezca la propiedad DaataSourceID d del control Menu
M
en el valo
or ID del conttrol de origeen de datos. El control Menu se enlazza
automáticamente al control
c de orrigen de datoos especificaado. Éste es eel método
recomendado para ell enlace a daatos.
x El control Menu tamb bién se puedde enlazar a un

u objeto XmmlDocumentt. Para enlazaar el
control a este origen de datos, esstablezca la propiedad
p DaataSource deel control Me
enu
en el origgen de datos y, a continuación, llame
e al método DataBind.
D

%
:

<?xml
l version "1.0" encoding "utf 8" ?> >
<Menu
uItems>
<Ho
ome display "Home" url "~/" />
<Pr
roducts dispplay "Products" url "~/pproducts/">
<
<SmallWidgetts display "Small Widgetts"
u
url "~/produucts/smallwidgets.aspx" />
<
<MediumWidgeets display "Medium Widggets"
u
url "~/produucts/mediumwidgets.aspx"" />
<
<BigWidgets display "Big Widgets"
u
url "~/produucts/bigwidgets.aspx" />>
</P
Products>
upport display "Support" url "~/Sup
<Su pport/">
<
<Downloads d
display "Downloads"
u
url "~/suppoort/downloads.aspx" />
<
<FAQs displaay "FAQs"
u
url "~/suppoort/faqs.aspx" />
</S
Support>
<Ab
boutUs display "About Us" url "~/ab boutus/">
<
<Company display "Company" url "~/aaboutus/comp
pany.aspx" />
/
<
<Locations d
display "Location" url "~/aboutus/l
" locations.as
spx" />
</A
AboutUs>
</Men
nuItems>
<%@ Page
P Languag
eFile "eMenu
u1.aspx.cs"
Inher
rits "eMenu1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title>Págin
</hea
ad>
<body
y>

%
:

<form id "fo
< orm1" runat "server">
<
<div>
<asp:Men
nu ID "Menu1" runat "serrver" DataSo
ourceID "Xml
lDataSource1"
OnMen
nuItemClick "Menu1 MenuItemClick">
</asp:Me
enu>
<asp:XmlDataSource ID "XmlDataSSource1" run
nat "server"
"
DataF
File "~/App Data/MenuItems.xml"
XPat
th "/MenuItemms/*"></asp:XmlDataSour
rce>
<br />
<
</div>
<
<asp:Label ID "Label1" runat "serveer" Text "La
abel"></asp:Label>
<
</form>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Con
nfiguration;
using
g System.Dat
ta;
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.HtmlControls;
g System.Web
g System.Web ts;
g System.Xml.Linq;
using
publi
ic partial class
c eMenu1 : System.We
eb.UI.Page
{
p
protected vo
nder, EventA
Args e)
{
}
p
protected vo
oid Menu1 MenuItemClick(object send
der, MenuEve
entArgs e)
{
Label1.T
Text e.Item
m.ValuePath;
;
}
}

++

@A
AC
MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5
+

@AC
C
+

@AC
C
El XML
X DOM
M
La creeación del Document Obj
bject Model o DOM es un na de las inno
ovaciones quue más ha influido
en el desarrollo de
d las páginas web dinám
micas y de lass aplicaciones web más ccomplejas.
DOM M permite a lo
os programadores web acceder
a y maanipular las páginas
p XHTM
ML como si fueran
f
documentos XMLL. De hecho, DOM se diseeñó originalm
mente para manipular
m dee forma senccilla
los do
ocumentos XML.
X
A pessar de sus orígenes, DOMM se ha convertido en una utilidad dissponible parra la mayoríaa de
lenguuajes de proggramación (Java, PHP, JavvaScript) y cuyas únicas diferencias
d sse encuentraan en
la forrma de impleementarlo.
Arbol de Nod
dos
Una de
d las tareass habituales en
e la program mación de applicaciones web
w con JavaaScript consiste
en la manipulacióón de las págginas web. Dee esta formaa, es habitual obtener el vvalor almace
enado
por algunos elemmentos (por ejemplo
e los elementos
e de
e un formulaario), crear un elemento
(párrafos, <div>, etc.)
e de form
ma dinámica y añadirlo a la página, ap nimación a un
plicar una an
elemento (que ap parezca/desaaparezca, qu ue se desplacce, etc.).
Todas estas tareaas habitualess son muy sencillas de realizar graciass a DOM. Sin
n embargo, para
p
poder utilizar las utilidades dee DOM, es necesario "tra
ansformar" la página origginal. Una páágina
HTML normal no es más que una sucesión n de caracteres, por lo quue es un form
mato muy diifícil
de manipular. Por ello, los navegadores web
w transform man automááticamente todas las páginas
web en
e una estru uctura más eficiente de manipular.
m
Esta transformac
t ión la realizaan todos los navegadoress de forma automática y nos permite e
utilizaar las herram
mientas de DOM
D ma muy sencilla. El motivo
de form o por el que se muestra el
e
funcionamiento de d esta transsformación in nterna es que condicionaa el comporttamiento de DOM
y porr tanto, la forrma en la que se manipulan las págin nas.
DOMM transforma todos los do ocumentos XHTML

X n conjunto dee elementos llamados no
en un odos,
que están
e interco
onectados y que
q represen ntan los conttenidos de laas páginas w
web y las
relaciones entre ellos.
e Por su aspecto, la unión
u de tod
dos los nodoss se llama "áárbol de nodo
os".
La sigguiente págin
na XHTML seencilla:
<!DOOCTYPE html PUBLIC "//W

W3C//DTD XHTML
X 1.0 Trransitional//EN"
"http
p://www.w3..org/TR/xhtmml1/DTD/xhttml1transitioonal.dtd">
<htm
ml xmlns="htttp://www.w3.org/1999/xxhtml">
<head>
<metta httpequivv="ContentTType" conten

nt="text/htm
ml; charset=isso88591" //>
+

@AC
C
<titlee>Página sencilla</title>

</heaad>
<body>
<p>Esta página ess <strong>muy sencilla<//strong></p>

>
dy>
</bod
</htm
ml>
Se traansforma en el siguiente árbol de nodos:
Figura 5.1. Árbol de nodos geenerado auto

omáticamentte por DOM a partir del ccódigo XHTM
ML de
la pággina
En el esquema annterior, cada rectángulo representa

r un
u nodo DOM M y las flechaas indican las
relaciones entre nodos.
n Dentro de cada nodo, se ha in
ncluido su tip
po (que se veerá más adelante)
y su contenido.
c
d nodos de cualquier páágina XHTMLL siempre es la misma: un

La raííz del árbol de n nodo de tip
po
especcial denomin nado "Docum
mento".
A parrtir de ese no
odo raíz, cada etiqueta XHTML se transforma en un nodo de ttipo "Elemen nto".
La conversión de etiquetas en n nodos se reealiza de form orma, del nodo
ma jerárquicca. De esta fo
raíz solamente pu ueden derivaar los nodos HEAD y BOD DY. A partir de esta derivaación inicial, cada
+

@AC
C
etiqueta XHTML se
s transform
ma en un nodo que derivaa del nodo co
orrespondien
nte a su "etiq
queta
padree".
La traansformaciónn de las etiquetas XHTML habituales genera dos nodos: el primero es el nodo
n
de tippo "Elementoo" (correspondiente a la propia etiqu
ueta XHTML)) y el segundo es un nodo
o de
tipo "Texto"
" que contiene el texto
t encerraado por esa etiqueta XHTTML.
Así, laa siguiente etiqueta

e XHTML:
<titlee>Página sencilla</title>
Geneera los siguientes dos nod

dos:
Figura 5.2. Nodoss generados automáticam

mente por DOM para unaa etiqueta XH
HTML sencilla
De la misma form
ma, la siguien
nte etiqueta XHTML:
X
<p>Esta página ess <strong>muy sencilla<//strong></p>

>
Geneera los siguientes nodos:
Nodo de tipo "Elemen

nto" correspondiente a la etiqueta <p
p>.
Nodo de tipo "Texto" con el conteenido textuaal de la etiqueta <p>.
Como el contenido
c dee <p> incluyee en su interior otra etiqueta XHTMLL, la etiqueta
interior se transformaa en un nodoo de tipo "Eleemento" quee representaa la etiqueta
<strong> y que derivaa del nodo an nterior.
nido de la etiqueta <stron

El conten ng> genera a su vez otro nodo de tipo
o "Texto" qu
ue
deriva deel nodo generado por <sttrong>.
+

@AC
C
Figura 5.3. Nodoss generados automáticam

mente por DOM para unaa etiqueta XH
HTML con ottras
etiquetas XHTMLL en su interio
or
La traansformación
n automáticaa de la págin
na en un árbo
ol de nodos siempre
s ue las mismas
sigu
reglas:
Las etiquetas XHTML se transformman en dos nodos:

n mero es la propia etiqueta y
el prim
do nodo es hijo del primeero y consiste en el conteenido textuaal de la etiqueta.
el segund
Si una etiiqueta XHTM

ML se encuen
ntra dentro de
d otra, se siggue el mismoo procedimie
ento
anterior, pero los nod
dos generado
os serán nod
dos hijo de su
u etiqueta paadre.
Comoo se puede suponer, las páginas

p XHTML habituale es producen árboles con miles de nodos.
Aun así,
a el processo de transfo ormación es rápido y automático, siendo las funciones
propoorcionadas por
p DOM (qu ue se verán más
m adelante e) las únicas que permiteen acceder a
cualq
quier nodo dee la página de
d forma sen ncilla e inmed
diata.
Tipo
os de Nod
dos
La especificación completa dee DOM defin nque las páginas XHTML
ne 12 tipos de nodos, aun
habittuales se pueeden manipu
ular manejan
ndo solamente cuatro o cinco
c tipos dee nodos:
Documen
nt, nodo raíz del que deriivan todos lo
os demás nod
dos del árbo
ol.
Element, representa cada una de las etiquetaas XHTML. See trata del ún
nico nodo qu
ue
ontener atrib
puede co butos y el úniico del que pueden
p derivvar otros nod
dos.
Attr, se define un nod

do de este tipo para reprresentar cadaa uno de los atributos de
e las
etiquetass XHTML, es decir, uno poor cada par atributo=valo
a or.
Text, nod
do que contieene el texto encerrado por una etiqu
ueta XHTML.
Comment, representaa los comenttarios incluid

dos en la pággina XHTML.
Los otros
o tipos dee nodos existtentes que no
n se van a co
onsiderar son DocumenttType,
CDataaSection, DoocumentFraggment, Entityy, EntityReference, ProceessingInstrucction y Notattion.
+

@AC
C
Acce
eso directto a los no
odos
Una vez
v construid do automáticcamente el árbol
á comple eto de nodoss DOM, ya ess posible utilizar
las fu
unciones DOM M para acced der de formaa directa a cu do del árbol. Como acced
ualquier nod der a
un noodo del árbol es equivaleente a accedeer a "un trozzo" de la página, una vez construido el
e
ble manipular de forma sencilla la pággina: acceder al valor de un elemento
árboll, ya es posib o,
estabblecer el valo
or de un elem
mento, moveer un elemen nto de la página, crear y aañadir nuevo
os
elementos, etc.
DOMM proporcionaa dos métoddos alternativvos para acceder a un no

odo específicco: acceso a través
de su
us nodos pad
dre y acceso directo.
d
Las fu
unciones quee proporcion na DOM paraa acceder a un u nodo a traavés de sus n nodos padre
consisten en acceeder al nodo raíz de la páágina y despu ués a sus nod dos hijos y a los nodos hiijos
de essos hijos y assí sucesivameente hasta el último nodo o de la ramaa terminada p por el nodo
buscaado. Sin emb bargo, cuanddo se quiere acceder
a n nodo especcífico, es mucho más rápido
a un
accedder directammente a ese nodo
n y no llegar a el desccendiendo a través de todos sus nodo os
padree.
Por ese
e motivo, non se van a presentar
p las funciones necesarias para el acceso jerárquico de
d
nodoos y se muesttran solamen
nte las que permiten
p acceder de form
ma directa a los nodos.
Por último,
ú es importante reccordar que el acceso a los nodos, su modificación
m n y su eliminaación
solam
mente es possible cuando el árbol DOMM ha sido coonstruido commpletamente, es decir,
despuués de que laa página XHTTML se cargu
ue por completo. Más ad delante se veerá cómo ase egurar
que un
u código JavvaScript solaamente se ejeecute cuando el navegad dor ha cargaddo entera la
págin
na XHTML.
getEllementsByT TagName())
Comoo sucede con
n todas las fu
unciones quee proporciona DOM, la fu
unción
getElementsByTaagName() tiene un nombre muy largo o, pero que lo hace autoeexplicativo.
La fun
nción getElementsByTaggName(nomb breEtiqueta) obtiene todos los elemeentos de la página
p
XHTMML cuya etiquueta sea iguaal que el parrámetro que se le pasa a la función.
El siguiente ejemplo muestra cómo obten

ner todos loss párrafos dee una página XHTML:
var parrafos = document.getEElementsByTTagName("p"");
El valor que se inddica delante del nombree de la funció ón (en este caaso, documeent) es el nod
do a
partirr del cual se realiza la búsqueda de lo os elementoss. En este caso, como se quieren obtener
todoss los párrafos de la págin na, se utiliza el valor docu
ument como o punto de paartida de la
búsqueda.
El valor que devuelve la función es un array con todoss los nodos que
q cumplen n la condición
n de
que su
s etiqueta coincide
c con el parámetro o proporcionnado. El valo
or devuelto ees un array de
e
nodoos DOM, no un
u array de cadenas
c de teexto o un arrray de objeto
os normales. Por lo tantoo, se
debe procesar cada valor del array de la forma
f que se
e muestra en n las siguientes seccioness.
De esste modo, see puede obteener el primeer párrafo de

e la página dee la siguientee manera:
+

@AC
C
var primerParrafo
o = parrafos[[0];
!
De la misma form
ma, se podríaan recorrer to
odos los párrrafos de la página con el siguiente có
ódigo:
for(vaar i=0; i<parrrafos.length;; i++) {
var parrafo
p = parrafos[i];
nción getElementsByTaggName() se puede

La fun p aplicarr de forma reecursiva sobre cada uno de
los no
odos devuelttos por la funnción. En el siguiente
s emplo, se obtienen todoss los enlaces del
eje
primeer párrafo dee la página:
var parrafos = document.getEElementsByTTagName("p"");
o = parrafos[[0];
var primerParrafo
var enlaces = prim

merParrafo.ggetElementsB
ByTagName(("a");
getEllementsByN Name()
La fun
nción getElementsByNam me() es similar a la anterior, pero en este caso see buscan los
elementos cuyo atributo
a namme sea igual al
a parámetro o proporcionado. En el sigguiente ejemmplo,
btiene directaamente el ún
se ob nico párrafo con el nomb bre indicado:
var parrafoEspeciial = documeent.getElemeentsByName("especial");;
<p naame="pruebaa">...</p>
<p naame="especiial">...</p>
<p>...</p>
Normmalmente el atributo
a namme es único para
p los elem
mentos HTML que lo definen, por lo que q
es un
n método mu uy práctico para
p acceder directamentte al nodo deeseado. En eel caso de loss
elementos HTML radiobutton n, el atributo name es común a todoss los radiobutton que están
relacionados, porr lo que la función devueelve una colección de elementos.
Intern
net Explorerr 6.0 no impleementa de foorma correcta esta funciión, ya que ssólo la tiene en
cuentta para los elementos dee tipo <input> y <img>. Además,
A también tiene en n consideracción
los elementos cuyyo atributo id sea igual al
a parámetro de la funció
ón.
getEllementById d()
La fun
nción getElementById() es e la más utilizada cuanddo se desarro
ollan aplicaciiones web
dinámmicas. Se tratta de la funcción preferida para acced
der directamente a un no odo y poder leer o
modificar sus proopiedades.
+

@AC
C
La fun
nción getElementById() devuelve
d el elemento
e XHHTML cuyo attributo id co
oincide con el
parámmetro indicado en la función. Como ele atributo id
d debe ser ún
nico para cadda elementoo de "
una misma
m página, la función devuelve únnicamente el nodo deseaado.
var caabecera = do
ocument.getElementById
d("cabecera"");
<div id="cabecera
i a">
<a href="/"
h id="logo">...</a>>
</divv>
La fun
nción getElementById() es
e tan imporrtante y tan utilizada
u en todas
t las aplicaciones we
eb,
que casi
c todos loss ejemplos y ejercicios qu
ue siguen la utilizan consstantementee.
Intern
net Explorerr 6.0 también
n interpreta incorrectam
i ente esta función, ya que devuelve
tambbién aquelloss elementos cuyo atributo name coinncida con el parámetro
p proporcionado a la
función.
Crea
ación y Elliminación
n de Nodo
os
Accedder a los nod
dos y a sus propiedades (que
( se verá más adelantte) es sólo un
na parte de las
l
manipulaciones habituales
h enn las páginas. Las otras operaciones habituales
h so
on las de creaar y
eliminar nodos deel árbol DOMM, es decir, crear
c y elimin
nar "trozos" de
d la página web.
Creaación de ele ementos XH HTML simplles

Como o se ha visto,, un elementto XHTML seencillo, como
o por ejemplo o un párrafo, genera doss
nodoos: el primer nodo es de tipo
t Elementt y representta la etiquetaa <p> y el seggundo nodo es de
tipo Text
T y repressenta el conttenido textuaal de la etiqu
ueta <p>.
Por este
e motivo, crear y añaddir a la páginaa un nuevo elemento
e XH
HTML sencillo
o consta de
cuatrro pasos diferentes:
1 Creación de un nodo de tipo Elem

1. ment que rep
presente al elemento.
2 Creación de un nodo de tipo Textt que represe

2. ente el conteenido del eleemento.
3 Añadir el nodo Text como

3. c nodo hijo
h del nodo Element.
4 Añadir el nodo Elemeent a la págin

4. na, en forma de nodo hijo
o del nodo correspondie
ente al
lugar en el
e que se quiiere insertar el elemento
o.
De esste modo, si se quiere añ ñadir un párrrafo simple al final de unaa página XHTTML, es nece
esario
incluiir el siguiente código JavaScript:
// Creear nodo de tipo Elementt
var parrafo = document.creatteElement("p

p");
+

@AC
C
// Creear nodo de tipo Text

)
var co
ontenido = document.cre
d eateTextNod
de("Hola Mu
undo!");
ñadir el nodo Text como hijo

// Añ h del nodo
o Element
parraafo.appendChild(contenid
do);
ñadir el nodo Element com

// Añ mo hijo de la
a pagina
document.body.aappendChild(parrafo);
oceso de creación de nueevos nodos puede

El pro p llegar a ser tedioso
o, ya que implica la utilizzación
de trees funcioness DOM:
createEleement(etiqueeta): crea un po Element que representa al elemen

n nodo de tip nto
XHTML cu uya etiquetaa se pasa com
mo parámetrro.
createTexxtNode(conttenido): crea un nodo de tipo Text qu

ue almacena el contenido
o
textual dee los elemen
ntos XHTML.
nodoPadre.appendCh hild(nodoHijoo): añade un

n nodo como o hijo de otro
o nodo. Se deebe
utilizar al menos dos veces con lo
os nodos habbituales: en primer
p lugar se añade el nodo
n
Text como hijo del noodo Element y a continuaación se añad de el nodo Element como hijo
de algún nodo de la página.
p
Elim
minación de nodos
Aforttunadamentee, eliminar un nodo del árbol
á DOM de la página es e mucho máás sencillo qu
ue
añadirlo. En este caso, solameente es neceesario utilizarr la función removeChild
r d():
var parrafo = document.getEllementById("provisional"");
parraafo.parentNo
ode.removeC
Child(parrafo
o);
<p id="provisionaal">...</p>
nción removveChild() requiere como parámetro

La fun p el
e nodo que se nar. Además, esta
s va a elimin
función debe ser invocada deesde el elemeento padre de
d ese nodo que se quierre eliminar. La
L
formaa más seguraa y rápida dee acceder al nodo
n padre de un elemeento es mediante la prop
piedad
nodooHijo.parentN
Node.
Así, para
p eliminarr un nodo dee una página XHTML se in nvoca a la función removveChild() desde el
valor parentNodee del nodo qu ue se quiere eliminar. Cu
uando se elimmina un nodoo, también se
s
eliminan automátticamente to odos los nodos hijos que tenga, por loo que no es necesario bo
orrar
manu ualmente cad da nodo hijo
o.
+

@AC
C
Acce
eso directto a los attributos Xhtml
X
Una vez
v que se haa accedido a un nodo, el siguiente paaso natural consiste
c en acceder y/o *
modificar sus atriibutos y prop M, es posiblee acceder de forma sencilla a
piedades. Meediante DOM
todoss los atributo
os XHTML y todas
t las pro
opiedades CSSS de cualquiier elemento
o de la página.
Los atributos XHTTML de los ellementos dee la página see transforman automáticcamente en
propiiedades de lo
os nodos. Paara acceder a su valor, sim
mplemente se
s indica el n
nombre del
atribu
uto XHTML detrás
d del noombre del noodo.
El siguiente ejemplo obtiene de forma dirrecta la direccción a la quee enlaza el enlace:
var enlace = docu

ument.getEleementById("enlace");
alert((enlace.href)); // muestra
a http://www
w...com
<a id=="enlace" hrref="http://w

www...com">>Enlace</a>
En el ejemplo antterior, se obttiene el nodo

o DOM que representa
r e enlace med
el diante la función
document.getElementById(). A continuacción, se obtie ene el atributto href del enlace mediante
enlacce.href. Para obtener porr ejemplo el atributo id, se
s utilizaría enlace.id.
e
Las propiedades CSS

C no son tan fáciles dee obtener com mo los atribuutos XHTML.. Para obtene er el
valor de cualquier propiedad CSS del nodo, se debe utilizar el atrib
buto style. El siguiente
ejemplo obtiene el valor de laa propiedad margin de laa imagen:
var im
magen = document.getElementById(""imagen");
alert((imagen.stylee.margin);
<img id="imagen" style="marrgin:0; bordeer:0;" src="lo

ogo.png" />
Aunqque el funcionamiento ess homogéneo o entre distin

ntos navegad
dores, los ressultados no son
exacttamente iguaales, como muestran
m las siguientes im
mágenes quee son el resultado de ejeccutar
el cód
digo anteriorr en distintoss navegadores:
Figura 5.4. Valorees que muesttra Internet Explorer al acceder

a a las propiedades CSS a travé
és de
JavaSScript
+

@AC
C
Figura 5.5. Valorees que muesttra Firefox al acceder a laas propiedad

des CSS a través de JavaSScript
Si el nombre
n de una
u propiedaad CSS es com
mpuesto, se accede a su valor modifiicando
ligeraamente su no
ombre:
var parrafo = document.getEllementById("parrafo");
alert((parrafo.stylee.fontWeigh
ht); // muesttra "bold"
<p id="parrafo" style="fontw

weight: bold;">...</p>
n del nombre de las prop

La traansformación piedades CSSS compuestaas consiste en n eliminar to
odos
los guuiones medio
os () y escrib
bir en mayússcula la letra siguiente a cada guión m
medio. A
continuación se muestran
m alggunos ejemplos:
fontweigght se transforma en fontWeight
lineheigh
ht se transfo
orma en lineH
Height
borderto n borderTopStyle
opstyle se trransforma en
liststyleimage se traansforma en listStyleImagge
El único atributo XHTML que no tiene el mismom nombbre en XHTML y en las pro opiedades DOM
D
es el atributo classs. Como la palabra
p classs está reservaada por JavaScript, no ess posible utilizarla
para acceder al attributo classs del elementto XHTML. En su lugar, DOMD utiliza eel nombre
classN
Name para acceder
a al atributo class ded XHTML:
var parrafo = document.getEllementById("parrafo");
alert((parrafo.classs); // muestrra "undefined"
alert((parrafo.classsName); // muestra
m "norrmal"
<p id="parrafo" class="norma

c al">...</p>
Ejem
mplo 1
A parrtir de la pággina web proporcionada y utilizando las
l funcioness DOM, mosttrar por pantalla
la siguiente inform mación:
+

@AC
C
1 Número de
1. d enlaces de la página

2 Dirección
2. n a la que enlaza el penúlltimo enlace
3 Numero de
3. d enlaces que enlazan a http://prue
eba
4 Número de
4. d enlaces del tercer párrrafo
<!DOCTYYPE html PUBLIC "//W3C//DTD XHTML

L 1.0 Transitiona
al//EN" "http://w
www.w3.org/TR/xhtm
ml1/DTD/xhtml1tr
ransitional.dtd">
>
<html xmlns
x "http://www.w3.org/1999/xhtm
ml">
<head>
<meta httpequiv
h "ContentType" content "text/html; char
rset iso88591" />
<title>>Ejercicio 11 DO
OM básico</title>
>
<script
t type "text/javascript">
window.onload function() {
var info
i document.getElementById("in
nformacion");
// Nu
umero de enlaces de la pagina
var enlaces
e document
t.getElementsByTa
agName("a");
info.innerHTML "Numero de enlaces "+enlaces.length
h;
// Di
ireccion del penultimo enlace
var mensaje
m "El penultimo enlace apu
unta a: "+enlaces
s[enlaces.length2].href;
info.innerHTML info.innerHTML + "<br
r/>" + mensaje;
// Nu
umero de enlaces que apuntan a htt tp://prueba
var contador
c 0;
for(v
var i 0; i<enlaces.length; i++) {
// Es necesario comp probar los enlace
es http://prueba y
// http://prueba/ po or las diferencia
as entre navegado
ores
if(enlaces[i].href "http://prueba
a" || enlaces[i] href "http://prueba/") {
c
contador++;
}
}
r/>" + contador + " enlaces apuntan a http://prueb
ba"
// Nu
umero de enlaces del tercer párraf
fo
var parrafos
p document.getElementsByT
TagName("p");
enlac
ces parrafos[2].getElementsByTag
gName("a");
r/>" + "Numero de
e enlaces del tercer párrafo "+e
enlaces.length;
}
</scrip
pt>
</head>
>
<body>
<div idd "informacion" st
tyle "border:thin
n solid silver; padding:.5em"></d
p iv>
<p>Loreem ipsum dolor sit
t amet, <a href "http://prueba">c
" consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phas
sellus
libero. Maecenas nisl arcu, consequat coongue, commodo ne
ec, commodo ultricies, turpis. Qui
isque sapien nunc
c, posuere vitae, rutrum
et, lucctus at, pede. Pellentesque massa ante, ornare id aliquam vitae, ultrices porttitoor, pede. Nullam sit amet nisl el
lementum
elit coonvallis malesuada. Phasellus magn
na sem, semper qu
uis, faucibus ut, rhoncus non, mi. <a href "http:/
//prueba2">Fusce
porta<//a>. Duis pellentesque, felis eu adipiscing
a ullamc
corper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem
ipsum dolor
d sit amet, consectetuer adipi
iscing elit. Duis
s scelerisque. Donec lacus neque, vehicula in, ele
eifend vitae, ven
nenatis
ac, fellis. Donec arcu. Nam sed tortor ne
ec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Inte
eger
lacus. Vestibulum venenatis erat eu odioo. Praesent id me
etus.</p>
<p>Aene
ean at nisl. Maecenas egestas dapi
ibus odio. Vestib
bulum ante ipsum primis in faucibu
us orci luctus et
t ultrices posuer
re
cubilia
a Curae; Proin consequat auctor di
iam. <a href "htt
tp://prueba">Ut bibendum blandit est</a>.
e Curabitu
ur vestibulum. Nu
unc
malesua
ada porttitor sapien. Aenean a lac
cus et metus vene
enatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem
m magna
porttit
tor felis, id sodales dolor dolor sed urna. Sed ru
utrum nulla vitae tellus. Sed quis
s eros nec lectus
s tempor lacinia.
Aliquam
m nec lectus nec neque aliquet dic
ctum. Etiam <a hr
ref "http://prueba3">consequat sem
m quis massa</a>.
. Donec aliquam euismod
e
diam. In
I magna massa, mattis id, pellenttesque sit amet, porta sit amet, lectus. Curabitur
r posuere. Aliqua
am in elit. Fusce
e
condime
entum, arcu in scelerisque loborti
is, ante arcu sce
elerisque mi, at cursus mi risus sed
s tellus.</p>
<p>Done
ec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitu
udin justo tellus
s vitae justo.
Vestibu
ulum aliquet, nulla sit amet imper
rdiet suscipit, nunc
n erat laoreet est, a <a href "http://prueba">a
" aliquam leo odio sed
sem</a>
>. Quisque eget eros vehicula diam
m euismod tristiq
que. Ut dui. Donec in metus sed ri
isus laoreet soll
licitudin. Proin et nisi
non arc
cu sodales hendrerit. In sem. Cras
s id augue eu lor
rem dictum interdum. Donec pretium
m. Proin <a
href "h
http://prueba4">egestas</a> adipis
scing ligula. Dui
is iaculis laoreet turpis. Mauris mollis est sit a
amet diam. Curabi
itur
hendrer
rit, eros quis malesuada tristique
e, ipsum odio eui
ismod tortor, a vestibulum nisl mi
i at odio. <a hre
ef "http://prueba
a5">Sed
non lec
ctus non est pellentesque</a> auct
tor.</p>
</body>
>
</html>
>
Ejem
mplo 2
Comp pletar el código JavaScrip
pt proporcionado para que cuando see pinche sob bre el enlace se
muesstre completo el contenid do de texto. Además, el enlace debe dejar de mo ostrarse desppués
de pu
ulsarlo por primera vez. LaL acción de pinchar sobre un enlacee forma partee de los "Eve entos"
e siguiente capítulo. En este
de JavaScript quee se ven en el e ejercicio o, sólo se deb
be saber quee al
pinch
har sobre el enlace,
e se ejeecuta la funcción llamada muestra().
+

@AC
C
L 1.0 Transitiona
al//EN" "http://w
www.w3.org/TR/xhtm
ml1/DTD/xhtml1tr
ransitional.dtd">
>
<html xmlns
ml">
<head>
<meta httpequiv
rset iso88591" />
OM básico y atrib
butos XHTML</titl
le>
<style type "text/css">

.oculto
o { display: none; }
.visibl
le { display: inline; }
</style
e>
<script
functio
on muestra() {
var elemento
e document.getElementById
d("adicional");
eleme
ento.className "visible";
var enlace
e document.getElementById("
"enlace");
enlac
ce.className "oculto";
}
</scrip
pt>
</head>
>
<body>
<p id texto">Lorem ipsum dolor sit amett, consectetuer adipiscing

a elit. Sed mattis enim vitae
v orci. Phase
ellus libero. Mae
ecenas
nisl ar
rcu, consequat congue, commodo nec
c, commodo ultric
cies, turpis. Quisque sapien nunc,
, posuere vitae, rutrum et, luctu
us at,
pede. Pellentesque
P massa ante, ornare id
d, aliquam vitae ultrices porttitor, pede. <span id "adicional" cclass "oculto">Nu
ullam
sit ame
et nisl elementum elit convallis malesuada.
m Phasel
llus magna sem, semper quis, fauci
ibus ut, rhoncus non, mi. Duis
pellent
tesque, felis eu adipiscing ullamc
corper, odio urna
a consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolo
or sit
amet, consectetuer
c adipiscing elit. Duis
s scelerisque. Do
onec lacus neque, vehicula in, ele
eifend vitae, ven
nenatis ac, felis
s. Donec
arcu. Nam
N sed tortor nec ipsum aliquam ullamcorper.
u Duis
s accumsan metus eu urna. Aenean vitae
v enim. Integ
ger lacus. Vestib
bulum
venenat
tis erat eu odio. Praesent id metu
us.</span></p>
<a id enlace" href "#" onclick "muestraa(); return false
e;">Seguir leyendo</a>
</body>
>
</html>
>
Ejem
mplo 3
Comp pletar el código JavaScrip pt proporcionado para que se añadan n nuevos eleementos a la lista
cada vez que se pulsa
p sobre el
e botón. Utillizar las funciones DOM para
p crear nu uevos nodoss y
añadirlos a la listaa existente. Al
A igual que sucede en el ejercicio annterior, la accción de pinch
har
sobree un botón fo orma parte ded los "Eventtos" de JavaSScript que see ven en el siguiente capíítulo.
En esste ejercicio, sólo se debee saber que al
a pinchar so obre el botón
n, se ejecuta la función
llamaada anade().
L 1.0 Transitiona
al//EN" "http://w
www.w3.org/TR/xhtm
ml1/DTD/xhtml1tr
ransitional.dtd">
>
<html xmlns
ml">
<head>
<meta httpequiv
rset iso88591" />
OM básico y atrib
butos XHTML</titl
le>
<script
functio
on anade() {
var elemento
e document.createElement(
("li");
var texto
t document.createTextNode("E
Elemento de prueb
ba");
eleme
ento.appendChild(ttexto);
var lista
l document.getElementById("l
lista");
lista
a.appendChild(elemento);
var nuevoElemento
n "<li>Texto de prue
eba</li>";
lista
a.innerHTML list
ta.innerHTML + nu
uevoElemento;
}
</scrip
pt>
</head>
>
<body>
<ul id "lista">
<li>L
Lorem ipsum dolor sit amet</li>
<li>C
Consectetuer adipiscing elit</li>
<li>S
Sed mattis enim vitae orci</li>
<li>P
Phasellus libero</li>
<li>M
Maecenas nisl arcu</li>
</ul>
<input type "button" value "Añadir eleme

ento" onclick "an
nade();">
</body>
>
</html>
>
+

@AC
C
XPa
ath
http:///www.di.un
niovi.es/~lab
bra/cursos/XML/XPath.pd
df
Perm
mite acceder a partes de un
u documento XML
Se baasa en relacio
ones de pareentesco entree nodos
Su esstilo de notacción es similaar a las rutass de los fiche

eros, pero se refiere a nodos en un
documento XML
o/nombre
Ejemplo: /alumno
Evalluación XPath
X
La evvaluación de una expresióón XPath arroja una exprresión de 4 tipos posibless: conjunto de
d
nodoos, booleano,, número, caadena.
Una expresión
e XP
Path equivalee a un prediccado, que de
evuelve todo lo que encajja con dicho
prediicado
<alu
umno dni=”9939393
3”>
<nombre>>Juan</nombre> /alumno/nombre
<apellidoss>García García</ap
pellidos>
JJuan
<nacim>19
985</nacim>
</allumno>
Sele
ección de Nodos en
n XPath
Nombre Seleccciona los hijos de nombre
/ Nodo os a partir deel nodo raíz
// Nodo os a partir deel nodo actuaal que encajen
con la descripción n, no importta donde estéén
. Nodo o actual
.. Padree del nodo actual
@ Atrib
butos
[] Un predicado quee debe cump plirse
* Encajja con cualqu uier nodo
@* Encajja con cualqu uier atributoo
| Una de
d varias selecciones
Ejem
mplos de expresion
e nes XPath
h
x /alumn
nos/alumno[[1]/nombre
<alumno
os> o <nombre>PPedro</nombre>
<alumno
o dni=”9939393”>
<nombre>Pedrro</nombre> x /alumnos/alumno/@dni
<apellidos>Meedario</apellidos>
no>
</alumn o Dni=99393993
<alumno
o dni=”12876540”>
<nombre>Ana<</nombre> o Dni=128765540
no>
</alumn
<apellidos>Mo
oreno</apellidos>
x //nombbre
</alumn
nos>
+

@AC
C
o <nombre>Pe
< dro</nombrre>
o <nombre>An
< a</nombre>>
x o[1]/nombre | //alumno[2]/apellidoss
//alumno
o <nombre>Pe
< dro</nombrre>
o <apellidos>M
< Moreno</apeellidos>
Ejess de Evalu
uación en XPath
Un ejje define un nodo relativvo a otro nod
do
Ancestor Todoos los ancestrros de un no

odo
Ancestororself Anceestros incluid
dos el nodo
Attrib
bute Todoos los atributos del nodo
Child Todoos los hijos deel nodo
Desceendant Descendientes
Desceendantorseelf Descendientes in ncluido el nod
do
Follow
wing Nodoos que siguen n al nodo
Follow
wingsibling Todoos los herman nos después del nodo
Nameespace Todoos los nodos del
d espacio dde nombres del
nodoo
Parennt Padree del nodo
Preceeding Todoos los nodos anteriores
a al nodo actuaal
Preceedingsibilingg Hermmanos anteriores al nodo o actual
Self El nodo actual
La sin
ntaxis es: nommbreEje::nodo[predicado]
Ope
eradores y funcione
es en XPa
ath
La evvaluación de una expresió
ón en XPath devuelve un
n conjunto dee nodos, unaa cadena, un
booleeano o un enntero
Operadores:
+ , * , div , = , != , < , > , <= , >=

> , or, and , mod
Funciiones numérricas: numbeer, abs, floor,, ceiling, roun

nd,…..
Funciiones de cad
denas: concatt, substring, contains, ….
Funciiones Booleaanas: not, tru

ue, false
+

@AC
C
XML
L Namesp
pace
Las cllases de XMLL están en la dll System.X
Xml, para usaar sus clases deberemos importar el
espaccio de nombres System.X Xml.
El esppacio de nom
mbres System
m.Xml también se extiende en la dll System.Data,
S , en concreto
o con
la clase XmlDataDDocument
Objetos XML
L
XmllDocume
ent y XmllDataDoccument
Son objetos
o que representan
r XML en mem moria usando DOM nivel 1 y nivel 2. Estas clases
pueden usarse paara navegar y editar los nodos
n XML
El Xm
mlDataDocum
ment hereda de XmlDocu
ument y también permitee representaar las relacion
nes
entree datos.
+

@AC
C
Tra
abajando con docu
umentos XML
!
XmllDocumen
nt
Repreesenta un doocumento XMML. Esta classe implementa el Core Do ocument Objject Model
(DOMM) Level 1 y el
e Core DOM
M Level 2 del consorcio W3C.
W DOM es la representtación en forrma
de árrbol en memoria (caché) de un docum mento XML y permite la exploración y edición del
documento. Dado o que XmlDoocument imp plementa la interfaz IXPaathNavigablee, también se
e
puede utilizar com
mo documen nto de origenn de la clase XslTransform
m.
<?xm
ml version
n="1.0"?>
<b
books>
<book>
hor>Carson
<auth n</author>
>
<pric
ce format=
="dollar">
>31.95</pr
rice>
<pubd
date>05/01
1/2001</pu
ubdate>
</book>
>
<pubinfo>
<publ
lisher>MSP
Press</pub
blisher>
<stat
te>WA</sta
ate>
</pubinfo
o>
/books>
</
Dentro de la estru uctura de loss documentoos XML, cadaa círculo de esta

e ilustración representta un
nodoo, que se den nomina objetto XmlNode.. El objeto XmmlNode es el objeto básiico del árbol de
DOMM. La clase Xm mlDocumentt, que extiende la clase XmlNode,
X admite métodoos para realizzar
operaaciones en el documento o en conjunto, (por ejemplo, cargarloo en la memo
oria o guardaar el
códiggo XML en un n archivo. Addemás, la clase XmlDocument proporciona un medio para ve er y
manipular los nod dos de todo el documentto XML. Las clases
c XmlNoode y XmlDoocument han n
mejorado el rend dimiento y la capacidad de
d uso y disponen de méttodos y prop piedades parra
realizzar lo siguien
nte:
+

@AC
C
x Obtener acceso y mo odificar nodos específicoss de DOM, co

omo nodos d
de elemento, de
referencia de entidad
d, etc. "
x Recuperaar nodos com ue contiene el nodo, com
mpletos, además de la infformación qu mo el
texto de un nodo de elemento.
e
La claase XmlDocuument tiene una

u serie de métodos muy importantes para creaar el conteniido
del arrchivo XML
Crea
ateElement((string) Cre
ea un eleme
ento con el nombre
n espe
ecificado
Crea
ateAttribute
e(string) Crrea un atributo con el nombre
n espe
ecificado
Load
dXml(string
g) Carga el documento
d X
XML desde la cadena espe ecificada.
Appe
endChild(X
XmlNode)Ag grega el nodo
o especificad
do al final de
e la lista de n
nodos
secun
ndarios de es
ste nodo.
Crea
ateXmlDecla
aration(strring version
n, string encoding, striing standallone) Crea un
u
nodo XmlDeclaration con los valores espe
ecificados
versiion
La versión debe ser
s "1.0".
enco
oding
Valorr del atributo
o de codificación
standdalone
Este valor
v debe seer "yes" o "n
no". Si es refeerencia null (Nothing en Visual Basic) o String.Em
mpty,
el méétodo Save no
n escribe un n atributo inddependiente e en la declarración XML.
Save
e(string) Guarda el docu
umento XML en la ubicac
ción especific
cada.
Attriibutes. Obtieene un objetto XmlAttributeCollection que contieene los atribu

utos de este nodo
……..
Para crear un doccument Xml Nuevo, utilizzamos el obje

eto XmlDocu
ument, a parrtir de este objeto
o
se va formando toodo el docum
mento.
Añadimos la declaración XMLL y creamos el

e elemento raíz. Que loss iremos añadiendo al
Documento XML con el método AppendC Child().
Podreemos utilizarr objetos de la clase XmlEElement, Xm

mlAttribute. Los
L atributoss los añadimoos a
un elemento XMLL a través dee la colecciónn Attributes, que es una XmlAttribute
X eCollection, con
c el
métoodo Append.
Finalm
mente, con el
e método Saave(), guardaamos el archivo XML
//Dec
clare and cr
reate new XmlDocument
XmlDocumen
nt xmlDoc new XmlDocum
ment();
XmlElement
t el;
int childC
Counter;
int grandC
ChildCounter;
+

@AC
C
//Create the
t xml declaration firs
st
xmlDoc.App
pendChild( )
xmlDoc.Cr
reateXmlDeclaration("1.0
0", "utf 8",
, null));
//Create the
t root node and append
d into doc
el xmlDo
oc.CreateElem
ment("myRoot
t");
xmlDoc.App
pendChild(el);
//Child Lo
oop
for (child
dCounter 1; childCount
ter < 4; ch
hildCounter+
++)
{
XmlElem
ment childelm
mt;
ribute childattr;
XmlAttr
te child with ID attribu

//Creat ute
childelmt xmlDoc.CreateEleme
ent("myChild
d");
childat
ttr xmlDoc.CreateAttri
ibute("ID");
;
childat
ttr.Value childCounter
r.ToString()
);
childelmt.Attributes.Append(ch
hildattr);
nd element into the root

//Appen t element
el.Appe
endChild(childelmt);
randChildCounter
for (gr 1; gr unter < 3; grandChildC
randChildCou Counter++)
{
//Cr
reate grandchildren
childelmt.AppendChild(xmlDooc.CreateEle
ement("Grand
dChild"));
}
}
//Save to file
//Rec
cupera la ru
uta de acceso física a la
l que está asignada unna ruta de a
acceso virtual
absol
luta o relat
tiva, o una ruta de acce
eso relativa
a a la aplic
cación
xmlDoc.Sav
ve(MapPath("XmlDocumentT
Test.xml"));
;
lbl.Text "XmlDocumentTest.xml Created";
C
Este código
c genera el siguientte archivo XM
ML
<?xml
<myRo
oot>
<my
yChild ID "1">
<
<GrandChild />
<
<GrandChild />
<
<GrandChild />
</m
myChild>
yChild ID "2">
<my
<
<GrandChild />
<
<GrandChild />
<
<GrandChild />
</m
myChild>
yChild ID "3">
<my
<
<GrandChild />
<
<GrandChild />
<
<GrandChild />
</m
myChild>
yChild ID "4">
<my
<
<GrandChild />
<
<GrandChild />
<
<GrandChild />
</m
myChild>
</myR
Root>
Reco
orrer Nod
dos de un documen
nto XML
Con XmlDocumen
X nt podemoss recorrer cad
da uno de los nodos del documento,
d utilizando
recurrsividad
Llamaamos al método recursivvo pasándolee el elemento

o raíz (Docum
mentElemen
nt)
proteected void Button2
B Click(object sen
nder, EventA
Args e)
{
lbl GetL
Label(275, 20);
+

@AC
C
XmlDocumen
ment();
xmlDoc.Loa
ad(MapPath("XmlDocumentT
Test.xml"));
;
RecurseNod
des(xmlDoc.DocumentEleme
ent); *
}
puublic void RecurseNodes

R (XmlNode nod
de)
{
//start re
ecursive loopp with level
l 0
RecurseNod
des(node, 0);
}
puublic void RecurseNodes

R (XmlNode nod
de, int leve
el)
{
string s;
s stringg.Format("{0} <b>Type:</
/b>{1} <b>Na
ame:</b>{2} <b>Attr:</b
b> ",
new strring(' ', lev
vel), node.N
NodeType, no
ode.Name);
foreach (XXmlAttribute attr in nod
de.Attribute
es)
{
s + st tring.Format("{0} {1} ",
, attr.Name,
, attr.Value
e);
}
lbl.Text + s + "<br>";
foreach (XXmlNode n in node.ChildN
Nodes)
{
RecurseeNodes(n, lev
vel + 1);
}
}
Reco
orrer Nodoss de un Doccumento XM
ML con XPath
La Cllase XPathNNavigator
Propoorciona un modelo
m de cu
ursor para deesplazarse y editar datos XML.
Méto
odo Descrripción
Move
eTo Muevve XPathNavvigator a la misma
m posició
ón del XPath
hNavigator
especcificado.
Move
eToChild Muevve XPathNavvigator a un nodo secund
dario del nod
do actual.
Move
eToDescendant Muevve XPathNavvigator a un nodo descen
ndiente del n
nodo actual.
Move
eToFirst Muevve XPathNavvigator al primer nodo reelacionado deel nodo actu
ual.
Move
eToFirstChild
d Muevve XPathNavvigator al primer nodo seecundario deel nodo actuaal.
Move
eToFollowing Muevve XPathNavvigator al ele
emento especificado en eel orden del
docum
mento.
Move
eToId Muevve XPathNavvigator al nodo que tienee un atributo o del tipo ID
con un
u valor que coincide conn la String especificada.
Move
eToNext Muevve XPathNavvigator al siguiente nodo relacionado
o del nodo
actuaal.
Move
eToParent Muevve XPathNavvigator al nodo principal del nodo acttual.
Move
eToPreviouss Muevve XPathNavvigator al nodo relacionado anterior del nodo
actuaal.
+

@AC
C
Move
eToRoot Muevve XPathNavvigator al nodo raíz del documento XML.

Move
eToAttribute
Move
eToFirstAttrib
bute
Move
eToNextAttribute
Para recorrer un documento Xml con XPaath, usaremo os el método CreateNaviggator() del
XmlDDocument qu ue crea un nuuevo objeto XPathNavigaator para dessplazarse por este docum
mento
y a paartir de este objeto podeer desplazarn
nos por todo
os los nodos
B Click(object sen
nder, EventA
Args e)
{
lbl GetL
Label(275, 20);
XmlDocumen
nt xmlDoc ment();
new XmlDocum
xmlDoc.Loa
ad(MapPath("XmlDocumentT
Test.xml"));
;
XPathNavig
gator xpathNav xmlDoc.CreateNavig
gator();
MoveToRoot();
xpathNav.M
RecurseNav
vNodes(xpathN
Nav);
}
puublic void RecurseNavNo

R des(XPathNav
vigator node
e)
{
//start re
ecursive loopp with level
l 0
RecurseNav
vNodes(node, 0);
}
pu RecurseNavNodes(XPathNav
ublic void R vigator node
e, int level
l)
{
string s null;
s g.Format("{0} <b>Type:</
string ame:</b>{2} <b>Attr:</b
/b>{1} <b>Na b> ",
new st
tring(' ', level), node.NodeType, node.Name);
n
if (node.H
HasAttributes)
{
node.Mo
oveToFirstAttribute();
do
{
s + string.Formmat("{0} {1} ", node.Na
ame, node.Va
alue);
e (node.MoveToNextAttrib
} while bute());
node.Mo
oveToParent();
}
lbl.Text + s + "<br>";
if (node.H
HasChildren)
{
oveToFirstChild();
node.Mo
do
{
Recu
urseNavNodes(node, level
l + 1);
} while
e (node.MoveToNext());
oveToParent();
node.Mo
}
}
Obte
ener un Elem
mento por ID
Document.G
XmlD GetElementB
ById(string
g) Obtiene el XmlElement
X con el identificador especific
cado
using
g System;
using
g System.Xml;
+

@AC
C
publi
ic class Sam
mple
{

pub
blic static void Main()
{
X
XmlDocument doc mlDocument()
new Xm );
d
doc.Load("id
ds.xml");
/
//Get the first element with an att
tribute of type
t ID and value of A111.
/
//This displays the node <Person SS
SN "A111" Na
ame "Fred"/>
>.
X
XmlElement e
elem doc.GetElementByI
Id("A111");
C
Console.Writ
teLine( elem.OuterXml );
;
/
//Get the first element with an att
tribute of type
t ID and value of A222.
/
//This displays the node <Person SS
SN "A222" Na
ame "Tom"/>.
e
elem doc.G
GetElementById("A222");
C teLine( elem.OuterXml );
Console.Writ ;
}
}
lbl GettLabel(275, 20);

string s;
//Declare and create new XmlDocumment
XmlDocumennt xmlDoc new XmlDocum
ment();
xmlDoc.Loaad(MapPath("XmlSample.xm
ml"));
XmlNode no
ode;
node xmlDoc.GetElementById("ref
f 3");
s g.Format("<b>Type:</b>{0
string 0} <b>Name:<
</b>{1} <b>A
Attr:</b>",
node.Node
eType, node.N
Name);
foreach (X
XmlAttribute a in node.A
Attributes)
{
s + sttring.Format("{0} {1} ",
, a.Name, a.
.Value);
}
lbl.Text s + "<br>";
SelecctSingleNod
de
XmlN
Node.SelectS
SingleNodee (String). Seelecciona el primer XmlN
Node que coin
ncide con la
expre
esión XPath.
string s;
//Declare and create new XmlDocumment
XmlDocumennt xmlDoc new XmlDocum
ment();
xmlDoc.Loaad(MapPath("XmlSample.xm
ml"));
XmlNode no
ode;
node xmlDoc.SelectSingleNode("/
//myChild[@C
ChildID 'ref
f 3']");
s g.Format("<b>Type:</b>{0
string 0} <b>Name:<
</b>{1} <b>A
Attr:</b>",
node.Node
eType, node.N
Name);
XmlAttribute a in node.A
foreach (X Attributes)
{
s + sttring.Format("{0} {1} ",
, a.Name, a.
.Value);
}
lbl.Text s + "<br>";
+

@AC
C
GetE
ElementByT
TagName

XmlD
Document.G
GetElementtsByTagName (String
g). Devuelve un objeto XmlNodeList que
q
contiene una lista
a de todos lo
os elementos
s descendien
ntes que coin
nciden con el Name
especcificado
string s;
ment
//Declare and create new XmlDocum
XmlDocumen
ment();
xmlDoc.Loa
ad(MapPath("XmlSample.xm
ml"));
XmlNodeList elmts;
elmts xm
mlDoc.GetElem
mentsByTagNa
ame("myGrand
dChild");
foreach (XXmlNode node in elmts)

{
s str
ring.Format("<b>Type:</b
b>{0} <b>Nam
me:</b>{1}",
node.N
NodeType, node.Name);
lbl.Texxt + s + "<bbr>";
}
//Cre
eate the XmlDocument.
X
XmlDocument doc new Xm
mlDocument()
);
d
doc.Load("bo
ooks.xml");
/
//Display all the book titles.
X
XmlNodeList elemList doc.GetEleme
entsByTagNam
me("title");
f
for (int i 0; i < elemList.Count; i++)
i
{
Console.Wr
riteLine(elem
mList[i].Inn
nerXml);
}
SelecctNodes
XmlN
Node.SelectN
Nodes (Striing). Selecciiona una listta de nodos que
q coincide
en con la
expre
esión XPath
XmlDo
ocument doc new XmlDocument();
d ooksort.xml");
doc.Load("bo
X
XmlNodeList nodeList;
X
XmlNode root
t doc.Docum
mentElement;
;
n
nodeList roo
ot.SelectNodes("descenda
ant::book[au
uthor/last name
n 'Austen
n']");
/
//Change the
e price on the books.
f
foreach (XmlNode book in nodeList)
{
book.LastC
Child.InnerText "15.95";
;
}
C
Console.Writ
teLine("Display the modi
ified XML do
ocument...."
");
d
doc.Save(Con
nsole.Out);
string s;
+

@AC
C
//Declare and create new XmlDocum

ment
XmlDocumen
ment();
xmlDoc.Loa
ml"));
XmlNodeList elmts;
elmts xm
mlDoc.SelectN
Nodes("//myG
GrandChild")
);
foreach (XXmlNode node in elmts)

{
s str
ring.Format("<b>Type:</b
b>{0} <b>Nam
me:</b>{1}",
node.N
NodeType, node.Name);
lbl.Texxt + s + "<bbr>";
}
XPatthNavigatorr
lbl GetLabel(275, 20);
string s;
XPathDocumment xmlDoc new XPathD
Document(Map
pPath("XmlSa
ample.xml"));
XPathNaviggator nav xmlDoc.Creat
teNavigator();
string exp
pr "//myChild[@ChildID
D 'ref 3']";
;
//Display the selection.

XPathNodeIterator iterator nav.Select(expr
r);
XPathNaviggator navResult iterat
tor.Current;
;
while (iteerator.MoveNext())
{
s Str
ring.Format("<b>Type:</bb>{0} <b>Nam
me:</b>{1} ",
"
navResult.NodeType, navResultt.Name);
vResult.HasAttributes)
if (nav
{
navR
Result.MoveToFirstAttribbute();
s + "<b>Attr:</b> ";
do
{
s + String.Format("{0} {1} ",
navResult.Name, navResu
ult.Value);
} wh
hile (navResult.MoveToNeextAttribute
e());
}
xt +
lbl.Tex s + "<b
br>";
}
Ordenando
string s;
XPathDocumment xmlDoc Document(Map
new XPathD ample.xml"));
pPath("XmlSa
XPathNaviggator nav xmlDoc.Creat
teNavigator();
//Select all
a myChild elements
XPathExpre
ession expr;
expr nav
v.Compile("//myChild");
//Sort the
e selected books by titl
le.
expr.AddSo
ort("@ChildID",
rder.Descending,
XmlSortOr
rder.None, "",
XmlCaseOr
XmlDataTy
ype.Text);
//Display the selection.

XPathNodeIterator iterator nav.Select(expr
r);
XPathNaviggator navResult iterat
tor.Current;
;
while (iteerator.MoveNext())
{
s Str
ring.Format("<b>Type:</bb>{0} <b>Nam
me:</b>{1} ",
"
navResult.NodeType, navResultt.Name);
vResult.HasAttributes)
if (nav
{
navR
Result.MoveToFirstAttrib
bute();
s + "<b>Attr:</b> ";
+

@AC
C
do
{
s + String.Format("{0} {1} ",
navResult.Name, navResu
ult.Value);
} wh
hile (navResult.MoveToNeextAttribute
e());
}
lbl.Tex
xt + s + "<b
br>";
}
XmllTextWriiter
El objjeto que escribe un archivo XML a paarte de hacerlo nosotros a mano con un simple String,
StringgBuilder u otro modo ess el XmlTextW Writer. Este objeto escrib
be sobre un FileStream(u
un
archivvo físico) tod
do el etiquettado que nossotros le indiiquemos
Algunnas caracteríísticas de las propiedades del XmlTexxtWriter son:
Write
eProcessingIInstruction. Esta propied dad tiene do
os parámetro os el primero
o correspond
de a el
o que irá al principio “<?[Primer Texto
texto o] [segundo texto]?>”
t y el
e segundo después de esste
seguiido de un esppacio. Con esto podemos conseguir lo l siguiente: <?xml versio
on="1.0"
encodding="utf8""?>, que seráá el encabezaado de nuesttro informe.
Write
eStartElement. Escribe una
u etiquetaa de aperturaa y necesitarrá ser cerrada después
Write
eAttributeSttring. Esta propiedad no l anterior ettiqueta una propiedad dentro
os creará en la
s valor. <Etiqueta Nomb
con su brePropiedad
d=”ValorProp piedad”>. Noo necesita seer cerrado.
Write
eElementStrring. Escribee una etiquetta de apertura con un no
ombre y su vaalor. Esto
generaría la siguiente etiquetta: <Nombre>Valor</Nom mbre>. No necesita ser ccerrado como
o se
puede comprobaren el ejemp plo.
eEndElemen
Write nt. Esta prop
piedad cierraa una etiquetta creada con
n WriteStarEElement
// Cr
reo el archivo donde alm
macenaré mi infomre.
FileS
Stream oFile
e new FileStream("UnaR
Ruta\UnArchi
ivo.rdl", Fi
ileMode.Crea
ate);
stablezco el archivo y la codificac
// Es ción al obje
eto
XmlTe
extWriter
XmlTe
extWriter oX
XML new XmlTextWriter(oFile, Enco
oding.UTF8);
// Le
e indico quee se cree con sangría loos nodos del
l xml..
oXML.Formatting Formatting.Indented;
oXML.WriteProcessingInstruction("xml", "version \"

"1.0\" encod
ding \"utf 8\"");
oXML.WriteStartE
Element("Report");
oXML
L.WriteAttrib
buteString("
"xmlns",
"\htt
tp://schemas.microsoft.com/sqlserve
er/reporting
g/2005/01/re
eportdefinit
tion\
s:rd \"http://schemas.microsoft.com
xmlns m/SQLServer/
/reporting/r
reportdesign
ner\"");
oXML.WriteStartE
Element("DataSources"); // Abro Dat
taSources.
Element("DataSource"); //
oXML.WriteStartE / Abro DataaSource.
oXML.WriteAttrib
buteString("N breDS"); // Inserto pro
Name", "Nomb opiedad dent
tro de etiqueta
DataS
Source.
oXML.WriteStartE
Element("ConnectionPrope
erties");
// In
nserto etiqu
uetas que no son necesar
rio cerrar.
oXML.WriteElemen
ntString("IntegratedSecu
urity", "tru
ue");
oXML.WriteElemen
ntString("ConnectString"
", " PARAMET
TERS!RPTCADE
ENACONEX.Value");
oXML.WriteElemen
ntString("DataProvider",
, "SQL");
oXML.WriteEndEle
ement(); // Cierro Conne
ectionProper
rties.
oXML.WriteEndEle
ement(); // Cierro DataS
Source.
oXML.WriteEndEle
ement(); // Cierro DataS
Sources.
oXML.WriteEndEle
ement(); // Cierro el re
eport.
+

@AC
C
// Vu
uelco el buf
ffer.
oXML.Flush();
oFile
e.Close();
El ressultado será::
<?xml
<Repo
ort xmlns htttp://schemas.microsoft.com/sqlservver/reportin
ng/2005/01/rreportdefinition
xmlns
s:rd "http://schemas.microsoft.com/ /SQLServer/r
reporting/re
eportdesigneer">
<Da
ataSources>
<
<DataSource Name "NombreDS">
<ConnectioonProperties>
<IntegraatedSecurity>true</InteggratedSecuri
ity>
<ConnecttString> PARAAMETERS!RPTC
CADENACONEX.
.Value</Conn
nectString>
<DataProovider>SQL</DataProviderr>
</ConnectionProperties>
<
</DataSourcee>
</D
DataSources>>
</Rep
port>
string
g path = Serveer.MapPath("~~/futbolistas.x
xml");
using (XmlTexxtWriter write
er = new XmlT TextWriter(path, Encoding.U
UTF8))
{
writer.Form
matting = Formmatting.Indennted;
writer.WritteStartDocumeent();
writer.WritteStartElemen
nt("futbolistas");
writer.WritteStartElemennt("jugador");
writer.WritteAttributeStriing("pais", "Es
spaña");
writer.WritteElementStrinng("nombre", "David Villa"));
writer.WritteStartElemennt("equipo");
writer.WritteString("Vale
encia C.F.");
writer.WritteEndElement();
writer.WritteStartElemennt("jugador");
writer.WritteAttributeStriing("pais", "Arrgentina");
writer.WritteElementStrinng("nombre", "Leo Messi");;
writer.WritteStartElemennt("equipo");
writer.WritteString("Barc
celona F.C.");
writer.WritteEndDocumennt();
writer.Clos
se();
}
<futbolistas>
<juugador pais=""España">
<
<nombre>Dav vid Villa</nom
mbre>
<
<equipo>Vale encia C.F.</noombre>
</jjugador>
<juugador pais=""Argentina">
<
<nombre>Leo o Messi</nom mbre>
<
<equipo>Barc celona F.C.</eequipo>
</jjugador>
+

@AC
C
</futb
bolistas>
!
XmlTextWr
riter xmlWri
iter new
XmlTextWriter(MapPath("EmployeeLi
ist.xml"),
System.Tex
xt.Encoding.UTF8);
xmlWriter.Formatting Formatting
g.Indented;
xmlWriter.Indentation 5;
xmlWriter.WriteStartDocument();
xmlWriter.WriteComment("XmlTextWr
riter Test Date:
D " +
DateTim
me.Now.ToShortDateString
g());
xmlWriter.WriteStartElement("Empl
loyeeList");
;
//New Employee
loyee");
xmlWriter.WriteAttributeString("E
EmpID", "1")
);
xmlWriter.WriteAttributeString("L
LastName", "JoeLast");
"
xmlWriter.WriteAttributeString("F
FirstName", "Joe");
xmlWriter.WriteAttributeString("S
Salary", Xml
lConvert.ToSString(50000));
xmlWriter.WriteElementString("Hir
reDate",
XmlConv
vert.ToString(DateTime.P
Parse("1/1/2
2003"),
XmlDate
eTimeSerializationMode.U
Unspecified)
));
xmlWriter.WriteStartElement("Addr
ress");
xmlWriter.WriteElementString("Str 3 MyStreet");
reet1", "123
xmlWriter.WriteElementString("Str
reet2", "");
;
xmlWriter.WriteElementString("Cit
ty", "MyCity
y");
xmlWriter.WriteElementString("Sta
ate", "OH");
;
xmlWriter.WriteElementString("Zip
pCode", "123
345");
//Address
xmlWriter.WriteEndElem
ment();
//Employeee
ment();
//New Employee
loyee");
xmlWriter.WriteAttributeString("E
EmpID", "2")
);
xmlWriter.WriteAttributeString("L
LastName", "MaryLast");
"
xmlWriter.WriteAttributeString("F
FirstName", "Mary");
xmlWriter.WriteAttributeString("S
Salary", Xml String(40000));
lConvert.ToS
xmlWriter.WriteElementString("Hir
reDate",
XmlConv
vert.ToString(DateTime.P
Parse("1/2/2
2003"),
XmlDate
eTimeSerializationMode.U
Unspecified)
));
xmlWriter.WriteStartElement("Addr
ress");
xmlWriter.WriteElementString("Str 4 MyStreet");
reet1", "234
xmlWriter.WriteElementString("Str
reet2", "");
;
xmlWriter.WriteElementString("Cit
ty", "MyCity
y");
xmlWriter.WriteElementString("Sta
ate", "OH");
;
xmlWriter.WriteElementString("Zip
pCode", "234
456");
//Address
ment();
//Employeee
ment();
eList
//Employee
ment();
xmlWriter.Close();
Response.R
Redirect("Emp
ployeeList.x
xml");
<?xml
<! XmlTextWrite
X er Test Date: 09/03/2009
9 >
<Empl
loyeeList>
<Employee EmpID
E "1" LastName "JoeL
Last" FirstN
Name "Joe" Salary
S "50000">
<HireD
Date>2003 01 01T00:00:00
0</HireDate>
>
+

@AC
C
<Addre
ess>
<
<Street1>123 Street1>
MyStreet</S
<
<Street2 /> "
<
<City>MyCity </City>
<
<State>OH</S tate>
<
<ZipCode>123 45</ZipCode>
>
</Addr
ress>
</Employee>
>
<Employee EmpID
E "2" LastName "MaryyLast" First
tName "Mary"
" Salary "40000">
<HireD
Date>2003 02 01T00:00:000</HireDate>
>
<Addre
ess>
<
<Street1>234 MyStreet</S
Street1>
<
<Street2 />
<
<City>MyCity </City>
<
<State>OH</S tate>
<
<ZipCode>234 56</ZipCode>
>
</Addr
ress>
</Employee>
>
</Emp
ployeeList>
XmllTextRea
ader
XmlTTextReader proporciona
p acceso de só ólo lectura y con desplazaamiento sólo o hacia delan
nte a
una secuencia
s dee datos XML. El nodo actu ual hace refeerencia al nodo en el quee está situado
o el
lector. Para avanzzar el lector, utilice cualq
quiera de loss métodos dee lectura y las propiedadees
reflejjan el valor del
d nodo actu ual.
lbl Get
tLabel(275, 20);
ader xmlReader
XmlTextRea new
tReader(MapPath("Employe
XmlText eeList.xml")
));
while (xmlReader.Read())
{
switch (xmlReader.NNodeType)
{
case
e XmlNodeType.XmlDeclara ation:
case
e XmlNodeType.Element:
e XmlNodeType.Comment:
case
{
string s;
s String.Format("{00}: {1} {2
2}<br>",
xmlReader.NodeTypee,
xmlReader.Name,
xmlReader.Value);
lbl.Text + s;
break;
}
case
e XmlNodeType.Text:
{
string s;
s String.Format(" Value: {0}
}<br>",
xmlReader.Value);
lbl.Text + s;
break;
}
}
if (xmlReader.HasAttributes)
{
while (xmlReader.MoveToNexttAttribute()
))
{
string s;
s String.Format(" At
ttribute: {0
0} {1}<br>
>",
xmlReader.Name, xmlRead
der.Value);
lbl.Text + s;
}
}
}
xmlReader.Close();
+

@AC
C
Mod
dificar un
n Documento XML
L
Cuando el objeto XmlDocumeent está carggado en memmoria, es muyy fácil modifficarlo. Si )
quereemos borrar un nodo, sim
mplemente tenemos
t que
e posicionarn
nos en su noodo padre.
Cuando queremo
os insertar un
n nodo, busccamos la locaalización apro
opiada e inseertamos el nodo.
n
//Declare and load new
w XmlDocumen
nt
XmlDocumen
ment();
xmlDoc.Loa
ml"));
//delete a mode
XmlNode no
ode;
//myChild[@C
ChildID 'ref
f 3']");
node.Paren
ntNode.RemoveChild(node)
);
//create a node and add it

XmlElement
t newElement
xmlDoc.CreateElement("myNewEle
ement");
//myChild[@C
ChildID 'ref
f 1']");
node.Paren
ntNode.InsertAfter(newEl
lement, node
e);
xmlDoc.Sav
ve(MapPath("XmlSampleMod
dified.xml")
));
Response.R
Redirect("XmlSampleModif
fied.xml");
Valiidar Docu
umentoss XML
La claase XmlReaderSettings Esspecifica un conjunto de
e característiccas compatib
bles en el ob
bjeto
XmlRReader creado mediante el método Create.
C
B Click(object se
ender, Event
tArgs e)
{
lbbl GetLabe
el(275, 20);
iff (ValidateDDocument(MapPath("XmlBad
dSample.xml"
")))
{
lbl.Text + "Valid Document<br />>";
}
ellse
{
lbl.Text + "Invalid Document<br />";
}
}
privaate bool ValidateDocument(string fi ileName)

{
XmmlReaderSetttings xmlSet new XmlRe
eaderSetting
gs();
xmmlSet.ValidaationType V
ValidationTyype.DTD;
xmmlSet.ProhibbitDtd false;
XmmlReader vr XmlReader.Create(fileeName, xmlSe
et);
XmmlDocument xd
x new XmlDocument();
trry
{
r);
xd.Load(vr
return tru
ue;
}
caatch (Excepttion ex)
{
lbl.Text + ex.Message + "<br />" ";
return false;
}
fiinally
{
vr.Close();
}
}
+

@AC
C
Test
*
1. Whhich class caan be used to create an XM
ML document from scrattch?
A. XmlConvvert
B. XmlDocuument
C. XmlNew
D. XmlSettinngs
2. Whhich class caan be used too perform datta type conv
version betweeen .NET datta types and XML
tyypes?
A. XmlType
B. XmlCast
C. XmlConvert
D. XmlSettinngs
?

<
MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5

?

<

+

<

En occasiones, es posible
p que necesite cierrta funcionallidad en un control
c que n
no está incluida
en los controles de
d servidor Web
W ASP.NETT integrados. En estos caasos, puede ccrear sus pro opios
contrroles. Dispon
ne de dos opciones. Pued de crear:
x Controless de usuario.. Los controlees de usuario

o son conten os que puede
nedores en lo
colocar co
ontroles de formato
f y dee servidor Web.
W A continuación pued de tratar el
control de usuario co
omo una unid dad y definir propiedades y métodos para el mism mo.
x Controless personalizaados. Un con

ntrol personaalizado es un
na clase escrita por un
desarrollaador que se deriva de Co
ontrol o WebbControl.
Los co
ontroles de usuario
u son mucho más fáciles de cre ear que los controles
c perrsonalizados, ya
que es
e posible reutilizar los yaa existentes.. Esto permitte crear con facilidad con
ntroles con
elementos de inteerfaz de usuario complejjos.
En esste tema se proporciona

p información general sob
bre el uso de los controlees de usuario
o
ASP.NNET.
Los co
ontroles de usuario
u son páginas ASP.NET que pueden reutilizzarse desde ootras páginas. Es
pareccido a los “arrchivos include”, conocid
dos por los programadores de Asp y P Php. Sin emb
bargo,
los co
ontroles de usuario
u son mucho
m más potentes.
p Son compatiblees con las prropiedades y los
eventtos.

?

<

Para crear un
u contro
ol de usua
ario en Visual
V Stu
udio .NET
T.
Con Visual
V Studio
o .Net es la foorma más seencilla de con
nstruir un control de usuario, ya que
dispo
one de un eleemento paraa ello en el menú
m de Agre
egar. Con estta opción de menú se nos
genera lo que serría como unaa página Web b normal perro la cual se va a poder im
mportar en las
demáás paginas deel sitio, reutilizando así el
e código.
Para crear un con

ntrol de usuaario seguirem
mos los siguie
entes pasos.
1 Si no teneemos un pro
1. oyecto creado, creamos un
u proyecto de “Aplicació
ón Web de
ASP.NET””.
2 Para creaar el control de

2. d usuario, vamos
v a la opción Archivvo > Agregarr Nuevo
Componeente…” En esste wizard seeleccionamos que querem mos crear un
n nuevo conttrol
de usuariio Web. Le in
ndicamos el nombre
n que va a tener nuestro
n comp ponente.
3 Se nos creara un nuevvo fichero co

3. on el nombre e seleccionad
do con exten
nsión “.ascx””. Este
componeente es como o si se tratasee de una pággina Web. El contenido d
de esta págin
na
será sustiituido en los lugares donnde usemos el e control.

?

<

Con esto
e podemo os crear nuesstros controlles y reutilizaar todo el código que queeramos en
nuesttras páginas Web. Para poder
p usar ell control en otra
o pagina web w solo tennemos que
arrastrar el ficherro del “Explo
orador de solluciones” al lugar
l donde queremos colocar el conntrol
dentrro de nuestraa página web b.
Esto genera
g el sigguiente códiggo:
<%@Register TaggPrefix=”BancoASPNET” TagName=”E

T Encabezado”” Src=”encab
bezado.ascx””%>
Con esto
e estamoss diciendo qu mado “encabeezado.ascx” y que
ue la pagina a utilizar un fichero llam
lo vam
mos a usar bajo
b en nomb bre de BancooASPNET:Enccabezado.
<BancoASPNET:Encabezado runat=”serve
r er”/>
Estrructura de
d los con
ntroles de
d usuario
o
Un coontrol de usuuario Web ASSP.NET es sim milar a una página
p Web ASP.NET
A commpleta (archiivo
.aspxx) e incluye una página dee interfaz dee usuario y có
ódigo. El proceso de creaación del con ntrol
de ussuario es muy similar al proceso
p de crreación de una página ASSP.NET, sólo que al final se
agreggan el formatto y los conttroles secunddarios necesaarios. Al iguaal que una páágina, un con
ntrol
de ussuario puedee incluir el có
ódigo necesario para man nipular su coontenido e in
ncluso realizaar
tareaas como el en nlace de dato
os.
Un co
ontrol de usu
uario se diferrencia de una página We
eb ASP.NET en
e los siguien
ntes aspectos:
x La extenssión de nomb
bre de archivvo para el co
ontrol de usu
uario es .ascxx.
x En lugar de
d una directiva @ Page,, el control de
d usuario co
ontiene una d
directiva @
Control que
q define la configuració
ón y otras prropiedades.

?

<

x Los contrroles de usuaario no se pu

ueden ejecutar como archivos indepeendientes. Enn su
lugar, deb
be agregarlo nas ASP.NET, como haría con cualquieer otro contrrol.
os a las págin
x El control de usuario no contiene elementos html,
h body o form. Estoss elementos
deben estar en la pággina de alojamiento.
En un
n control de usuario pued de utilizar los mismos ele ementos HTM ML (excepto html, body y
form) y controless Web que en n una páginaa Web ASP.N NET. Por ejemmplo, si está creando un
contrrol de usuario para utilizaar una barra de herramie entas, puedee colocar unaa serie de
contrroles de servvidor Web Bu utton en el co ontrol y creaar controlado
ores de even ntos para los
botonnes.
<%@ Control
C Lang
guage "C#" ClassName "Us
serControl1"
" %>
<scri
ipt runat "server">
p
protected in
nt currentColorIndex;
p
protected tring[] colors
St {"Red",
, "Blue", "G
Green", "Yel
llow"};
p
protected vo
Args e)
{
if (IsPoostBack)
{
curr
rentColorIndex
Int16.Parse(ViewState["
"currentColo
orIndex"].To
oString());
}
else
{
curr
rentColorIndex 0;
Disp
playColor();
}
}
protected vo
p oid DisplayColor()
{
textColo
or.Text colors[currenttColorIndex]
];
ViewStat
te["currentColorIndex"] currentCo
olorIndex.To
oString();
}
protected vo
p oid buttonUp Click(objec
ct sender, EventArgs
E e)
{
if(curreentColorIndex 0)
{
curr
rentColorIndex colors.Length 1;
;
}
else
{
curr
rentColorIndex 1;
}
DisplayCColor();
}
protected vo
p oid buttonDow
wn Click(obj , EventArgs e)
ject sender,
{
if(curreentColorIndex (colors
s.Length 1))
1
{
curr
rentColorIndex 0;
}
else
{
curr
rentColorIndex + 1;
}
DisplayCColor();
}
</scr
ript>
<asp:TextBox ID "textColor" runat "serv

ver" ReadOnl
ly "True" />
>
<asp:Button Font
t Bold "True" ID "button
nUp" runat "server"
" Tex
xt "^"
OnCli
ick "buttonU
Up Click" />
<asp:Button Font
t Bold "True" ID "button
nDown" runat
t "server" Text
T "v"
OnCli
ick "buttonD
Down Click" />

?

<

Inclluir un co
ontrol de
e usuario
o en una página
p W ASP.N
Web NET
Para utilizar un co
ontrol de usu
uario, éste debe incluirsee en una pággina Web ASP P.NET. Cuanddo se
recibe una solicitud de una páágina y ésta contiene un control de usuario,
u dicho control pasa
por to
odas las fasees de procesaamiento quee realizan loss controles dee servidor ASSP.NET.
1 En la página Web ASP

1. P.NET conten
nedora, cree una directivva @ Registeer que incluyaa lo
siguientee:
x Un atributo TagPrefix,
U T qu
ue permite associar un preefijo al contrrol de usuario
o.
E prefijo se incluirá en la etiqueta de apertura del elementto del contro
Este ol de
u
usuario.
x Un atributo TagName,
U T ue permite asociar un no
qu ombre al conttrol de usuario.
E nombre se incluirá en
Este e la etiquetaa de aperturaa del elemen
nto del contrrol de
u
usuario.
x Un atributo Src,
U S que perm mite definir laa ruta de accceso virtual aal archivo de
el
c
control de usuario que see va a incluir..
2 En el cuerpo de la pággina Web, deeclare el elem

2. mento de co uario dentro del
ontrol de usu
o form.
elemento
3 Si el control de usuario expone prropiedades públicas,

3. p tam
mbién puede establecerlaas
mediantee declaración
n.
En el ejemplo sigu uiente se mu

uestra una página Web ASP.NETA que contiene unn control de
usuarrio. Éste se encuentra
e en
n el archivo Spinner.ascx
S de la carpeta Controls. EEn la página, el
contrrol se registra para que utilice
u ombre de etiqueta Spinner. Las
el preffijo uc y el no
propiiedades MinV Value y MaxxValue del co ontrol de usu uario se estab
blecen mediaante declaraación.
<%@ P
Page Languagge "C#" %>
<%@ Register
R TaggPrefix "uc" TagName "Sp
pinner"
S
Src "~\Contrrols\Spinner.ascx" %>
<html
l>
<body
y>
<form
m id "Form1" runat "servver">
<
<uc:Spinner id "Spinner1"
runat "server"
MinValuee "1"
MaxValuee "10" />
</for
rm>
</bod
dy>
Otra posibilidad es
e simplemente arrastrarr el control ded usuario deesde el explo
orador de
solucciones al form
mulario en ell que se quieere incluir
Defi
finir prop
piedades y métod
dos para un
u contro
ol de usu
uario

?

<

Puede definir pro

opiedades y métodos
m parra un controll de usuario de la misma manera que e lo
haría para una páágina. La defiinición de un
na propiedad d para un con ntrol de usuaario permite !
estab
blecer sus pro
opiedades mediante
m decclaración y en
n el código.
MyCo
ontrol.ascx
x
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c MyControl : Systemm.Web.UI.Use
erControl
{
p
public strin
ng UserCaption
{
get { re
eturn lblName.Text; }
set { lb
blName.Text value; }
}
p
public strin
ng UserName
{
get { re
eturn txtName.Text; }
set { tx
xtName.Text value; }
}
}
MyCo
ontrolProp
pertyTest.asspx
<%@ P
Page Languag
eFile "MyCon
ntrolPropert
tyTest.aspx.cs"
I
Inherits "My
yControlPropertyTest" %>
>
<%@ Register
R Src
c "MyControl.ascx" TagNa
ame "MyContr
rol" TagPref
fix "uc1" %>
>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0
Trans
sitional//ENN""http://www
w.w3.org/TR/
/xhtml1/DTD/
/xhtml1 tran
nsitional.dt
td">
<html
l xmlns "htttp://www.w3.org/1999/xht
tml">
<head ver">
<
</hea
ad>
<body
y>
<
id "fo
<
<div>
<br />
<asp:Buttton ID "Button1" runat "server" Te
ext "Get Nam
me" OnClick "Button1 Click"
/>&nb
bsp;<br />
<br />
<uc1:MyCControl ID "M
MyControl1" runat "serv
ver" />
<br />
<br />
<asp:Labbel ID "Label1" runat "s
server"></as
sp:Label>
<br />
<br />
<
</div>
<
</form>
</bod
dy>
</htm
ml>
MyControlProperty
yTest.aspx.cs
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c MyControlPropertyT
Test : Syste
em.Web.UI.Pa
age
{

?

<

protected vo
p oid Page Load(object sen
nder, EventA
Args e)
{
MyContro
ol1.UserCaption "Enter
r User Name:
:"; "
}
p
protected vo
t sender, Ev
ventArgs e)
{
Label1.T
Text MyControl1.UserNa
ame;
}
}
Eve
entos de los
l contro
oles de usuario
u
Si un control de usuario
u contiene controlees de servidoor Web, es posible escrib
bir código en
o control parra controlar los eventos producidos
dicho p por
p los contro oles secundaarios. Por
ntrol de usuaario contienee un control Button, puede crear un controlador en el
ejemplo, si su con
contrrol de usuario para el eveento Click deel botón.
Fiche
ero ascx
<%@ Control
C Lang
guage "C#" AutoEventWire
eup "true" CodeFile
C "Hi
iControl.asc
cx.cs"
Inher
rits "HiCont
trol" %>
<asp:TextBox ID "TextBox1" runat "serve
er"></asp:Te
extBox>
<asp:Button ID "Button1" runat "server"
" Text "Hola
a" OnClick "Button1
" Click" />
<br />
/
<asp:Label ID "L
Label1" runat "server" Text
T "Label"
"></asp:Labe
el>
Código
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c HiControl : System
m.Web.UI.Use
erControl
{
p
protected vo
t sender, Ev
ventArgs e)
{
Label1.T
Text "Hi " + TextBox1.Text;
}
}
Carg
ga de Con
ntroles Dinámica
D amente
Al igu
ual que otross controles de servidor, lo
os controles de usuario pueden
p ser ccargados
dinámmicamente.
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c HiControlDynamicLo
oad : System
m.Web.UI.Pag
ge
{
p
protected vo
nder, EventA
Args e)
{
//Popula
ate the form.
MyContro
ol c1
(MyContr
rol)LoadControl("MyContr
rol.ascx");
c1.UserN
Name "Glenn";
ontrols.Add(c1);
form1.Co
MyContro
ol c2
rol)LoadControl("MyContr
(MyContr rol.ascx"); form1.Contr
rols.Add(c2);
}
}

?

<

Elev
vando ev
ventos a la
l página
a
)
Codigo ascx
<%@ C
Control Lang
guage "C#" AutoEventWire
eup "true" CodeFile
C "Me
essageControol.ascx.cs"
I
Inherits "Me
essageControl" %>
<asp:Label ID "lblName" runat "server" Text "Enter
r Name: "></
/asp:Label>
<asp:TextBox ID "txtName" runat "server
r"></asp:Tex
xtBox>
<asp:Button ID "btnMessage" runat "serv
ver" Text "S
Send Message
e"
OnCli
ick "btnMessage Click" />
Codigo cs
using
g System;
using
g System.Dat
ta;
using
g System.Con
nfiguration;
using
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
g System.Web
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
ic delegate void SendMessageHandler
publi r(string mes
ssage);
publi
ic partial class
c MessageControl : System.Web.U
S UI.UserContr
rol
{
p
public event
t SendMessageHandler Sen
ndMessage;
p
protected vo
oid btnMessage Click(obj , EventArgs e)
ject sender,
{
if (Send
dMessage ! null) SendMeessage(txtNa
ame.Text);
}
}
El evento
e deb
be ser sie
empre decl
larado com
mo público
o en la pa
arte super
rior
de la
l clase de
d controll de usuar
rio.
Codigo aspx
<%@ P
Page Languag
eFile "Messa
ageControlTe
est.aspx.cs"
I
Inherits "Me
essageControlTest" %>
<%@ Register
R Src
c "MessageControl.ascx" TagName "Me
essageControol" TagPrefix "uc1" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//ENN"
"http
p://www.w3.oorg/TR/xhtml1/DTD/xhtml1
1 transition
nal.dtd">
<html
tml">
<head ver">
<
</hea
ad>
<body
y>
<
id "fo
<
<div>
<uc1:MessageControl ID "MessageeControl1" runat
r "serve
er" />
<br />
<br />
<asp:Labbel ID "lblResult" runat
t "server" Text
T ""></as
sp:Label>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
Codigo cs
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
g System.Web ts;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c MessageControlTest
t : System.W
Web.UI.Page
{
p
protected vo
nder, EventA
Args e)
{
MessageC
Control1.SendMessage +
e(string message) { lblR
delegate Result.Text message; };
}
}

?

<

Ejem
mplo de Control
C d Usuario Web
de
*
Control para un píe de
e página con
c copyright
Vamo
os a crear un
n control de usuario
u web para colocar como píe de
d página
Págiina Princiipal
La páágina principaal tendrá una etiqueta y un botón. Po
osteriormen
nte, incorporamos el conttrol
de ussuario
El con
ntrol de usuaario lo podem
mos reutilizaar en cualquier página
Con
ntrol para
a mostrar datos
Cream
mos otro con
ntrol de usuaario con un dataList,
d paraa mostrar loss datos de lo
os coches,
estab
blecemos suss funcionalidades de actu
ualización y lo incorporam mos a la pággina principall
Prop
piedades para el co
ontrol
Cream
mos 2 propieedades para el control. Una
U para dete
erminar el número de co
olumnas y ottra
para la dirección.
priva
ate int Num
meroColumnas 3;
public int NumeroColumn

p N as
{
get { re
eturn NumeroColumnas; }
set { NNumeroColumnas value; }

?

<

}
p
private Repe
eatDirection Direccion RepeatDir
rection.Hori
izontal;

public Repea
p atDirection Direccion
{
get { re
eturn Direccion; }
set { DDireccion v
value; }
}
Dam
mos valor a las prop
piedades del contrrol
En el load
this.Data
aList1.Repea
atColumns this.NumeroColumnas;
this.Dat
taList1.RepeatDirection eccion;
this.Dire
Esta
ablecer la
as propied
dades parra el clientte
En el cliente se diispondrán lo
os controles necesarios
n para actualizaar las propied
dades del co
ontrol
de ussuario web. Así
A como la programació
p entos.
n de sus eve
Controlar Eve
entos
En un
n control de usuario, pod
demos tener otros contro
oles (botones). Si estos controles
desen
ncadenan evventos, tendrremos que controlarlos en
e el control de usuario.
La páágina en la qu ntos, para que se

ue está coloccado el contrrol de usuariio nunca veráá estos even
vean los tendrem mos publicar con
c el objetivo de que lo os eventos lleeguen a la páágina
conteenedora

?

<

Vamo
os a declararr 2 eventos en
e el control de usuario:

x EditRecorrd, se desenccadenará cuando se esté
é editando un registro, y pasará el no
ombre
de coche que se está editando.
x s desencadeenará cuando el usuario guarde o can
FinishedEEditRecord, se ncele la
actualizacción
Declaaramos los evventos para el Control dee Usuario

pu
ublic delegate
e void EditRecordHandler(o
object sender,
, ChangedRecor
rdEventArgs e);
pu
ublic event Ed
ditRecordHand
dler EditRecor
rd;
pu
ublic delegate
e void FinishedEditRecordH
Handler(object
t sender, Even
ntArgs e);
pu
ublic event FinishedEditRecordHandler FinishedEditRe
F ecord;
Declaaramos la claase ChangedRecordEventtArgs

publi
ic class ChaangedRecordEvventArgs : EventArgs
E
{
p
private string MatriculaCoche;
p
public ng MatriculaCoche
strin
{
get { reeturn MatriculaCoche; }
set { M MatriculaCoche value; }
}
p
public gedRecordEventArgs(strin
Chang ng Matricula
aCoche)
{
this.MattriculaCoche Matricula
aCoche;
}
}
Declaaramos méto
odos que dessencadenen eventos si alguien se ha registrado p
para recibirlo
os
prote
ected virtua
al void OnEditRecord(Cha
angedRecordE
EventArgs e)
{
if (Edit
tRecord ! null)
{
Edit
tRecord(this, e);
}
}
p
protected virtual void OnFinishedEd
ditRecord(Ev
ventArgs e)
{
if (FinishedEditRecord ! null))
{
FinishedEditRecord(this, e)
);
}
}
Por último,
ú debemmos agregar llamadas a estos
e métodos en los luggares del cód
digo en los qu
ue
quereemos que see desencaden
nen eventos..
El primer lugar ess cuando pulsamos el bottón de Editar.

prote
ected void DataList1
D EditCommand(obbject source
e, DataListC
CommandEvent
tArgs e)
{
DataList
t1.EditItemIndex e.Ite
em.ItemIndex
x;
DataList
t1.DataBind();
Label lb
bl (Label)e.Item.FidnCControl("Vin
nLabel");
string NumeroMatric
N ula lbl.Teext;
ChangedR
RecordEventArgs cre ne
ew ChangedRe
ecordEventAr
rgs(NumeroMa
atricula);
OnEditRe
ecord(cre);
}
Cuando pulsamoss los botoness de Actualizzar y Cancelaar se terminaa de editar:

OnFinish
hedEditRecord(new EventA
Args());

?

<

En el lado de la página princip

pal, tenemoss que registraar para recib
bir los evento
os

protec
cted void Page
e Load(object sender, Even
ntArgs e)
{
this.DatosC Record += new DatosCoches.E
Coches1.EditR EditRecordHand
dler(DatosCoch
hes1 EditRecord);
this.Datos
sCoches1.Finis
shedEditRecord
d += new
DatosCoche
es.FinishedEdi
itRecordHandle
er(DatosCoches1 FinishedEd
ditRecord);
}
pr
rotected void DatosCoches1 EditRecord(o , DatosCoches.ChangedRecord
object sender, dEventArgs e)
{
lblMatriculaCoche.Text = "Editando " + e.Matricul
laCoche;
}
rotected void DatosCoches1 FinishedEdit
pr tRecord(object
t sender, Even
ntArgs e)
{
lblMatriculaCoche.Text = string.Empt
ty;
}
Test
1. Whhat file extennsion do youu use to createe a user conttrol? (Choosee one.)
A. .ausr exteension
B. .aucx exteension
C. .asuc exteension
D .ascx extennsion
D.
2. Yoou want to crreate a user control
c to dissplay data, but
b you are concerned
c thaat you don’t know
h
how the Webb page desiggners want to t format thee data. Alsoo, some of thhe page desiigners
m
mentioned that the formaat of the dataa might be diifferent, depeending on thhe Web page. How
c you best create
can c a userr control to soolve this pro
oblem? (Chooose one.)
A. Create a separate
s userr control for each Web paage and get each
e Web paage designer to tell
you the format to im
mplement in each
e user con
ntrol.
B. Create a separate usser control forf each varriation of thee format onnce the Web
b page
designerrs give you thhe desired foormatting opttions.
C. Create a templated
t usser control thhat exposes the
t data to thhe Web pagee designers so
o they
can speccify their dessired format.
D. Create a user controol that simply renders thet data andd let the Weeb page desiigners
specify the
t style propperties for thhe user control.
3. Yoou want to em o of your Web pages. What directiive must be added

mploy a userr control on one
t the top off the Web pagge to indicatee that a user control is em
to mployed on tthe page? (C
Choose
o
one.)
A. @Remeember
B. @Refereence
C. @Requiired
D. @Register
?

%

::

MC
M CTS::
Apliicacciones Webb
co
on .NE
. ET 3
3.5
5

?
%

:

?

D
=

:
Los coontroles perrsonalizados de Asp.Net son s componentes compiilados en la p parte del servidor
que encapsulan
e laa interfaz dee usuario y ottra funcionalidad en paquetes reutilizables. Los
contrroles personaalizados no son
s diferentees de los con ntroles de servidor ASP.N NET estándarr,
exceppto que se en nlazan a un prefijo
p de etiqueta difere ente y se deb ben registrarr e implemenntar
explíccitamente. Aparte
A de lo anterior,
a los controles pe ersonalizado os pueden tener su propio
modeelo de objeto o, activar eveentos y admiitir todas las opciones en n tiempo de d diseño de Visual
Studio, como la ventana
v Proppiedades, el diseñador
d vissual, los consstructores dee propiedad y el
cuadrro de herrammientas.
Los coontroles perrsonalizados no se puedeen confundir con los conttroles de usuuario Web, que
hemo L controles de usuario Web son componentes de
os analizado en el capitulo anterior. Los
comp pilación dinámica y no see pueden añaadir al cuadroo de herramientas. Por laa misma razó ón, su
comp patibilidad en
n tiempo de diseño es limmitada, así co
omo su respuesta visual cuando se
añaden a una pággina, donde simplemente
s e se muestraan como un marcador
m dee posición.
Asimismo, los con ntroles de ussuario se deb
ben impleme entar como código
c de oriigen, a no se
er que
la apllicación que los incorporra esté preco
ompilada. En este caso, vamos a extraaer el
ensam mblado dinámico que co ontiene el control de usuaario y lo vam
mos a compartir entre
aplicaaciones.
Los coontroles de usuario

u ASP..NET personaalizados son código comppilado. Cuanndo hemos
comp pilado un con mos añadirlo al cuadro de
ntrol, podem e herramienttas y aprovecchar el entorrno
visual de Visual Sttudio. Debid
do a su entorrno compiladdo, los contro
oles personaalizados se
pueden instalar ene una sola copia
c AC, dejando que estén disponibles para todas lass
en la GA
aplicaaciones, o sim
mplemente se s pueden im mplementar en el directoorio \bin para su uso en una
u
sola aplicación.
a
Un coontrol person nalizado es una

u clase herredada de un na clase de control
c base.. La lógica
dispoonible en la clase
c base deetermina la cantidad
c y el código que debe escribirse. Básicam mente
existeen dos formaas de crear controles
c perrsonalizados. Si descubree que un conntrol existentte se
ajustaa a sus requeerimientos sólo parcialmmente y carecce de algunas opciones clave, lo más
simplle es extendeer el control derivando ded él una nue eva clase. Puede sobreesscribir
propiiedades, méttodos y even ntos específiccos así comoo añadir nuevvas opcioness. Si ninguno de
los co
ontroles de servidor
s webb existentes ses ajusta a su
us requerimiiento, considdere la creación
de unn control perrsonalizado desde
d el prin
ncipio derivándolo desde una de las cclases de con ntrol
base:: Control y WebControl.
W Estas clases sólo proporccionan la funncionalidad b
básica de los
contrroles de servvidor ASP.NETT y requieren que nos haagamos cargo de algunoss aspectos
operaativos del control, como la reproduccción, el estiloo, el estado de
d vista y la aadministración de
estaddos.

?
%

:
Herredar Con
ntroles Existentess
Cuando descubraa que necesitta un control personalizaado para ejeccutar una determinada taarea,
primeero deténgasse un momento y asegúrrese de que la l opción que necesita see puede obte
ener
realm
mente con HTTML, literales y código JaavaScript. Si sabe
s lo que debe
d hacer een HTML purro,
puede empezar a planificar un control ASP.NET y postteriormente crear la opción para la mejor
m
reutillidad y eficieencia.
Eleg
gir una cllase base
e
Un co ontrol de serrvidor person u clase de Microsoft .N
nalizado es una NET Framewo ork heredadaa de
Contrrol. La clase Control
C d servidor en las aplicaciones
es laa clase raíz paara todos loss controles de
ASp.N NET. No obsttante, debe tener
t en cueenta que reallmente son muym pocos lo os controles que
utilizaamos común nmente en aplicaciones ASP.NET
A quee realmente ses heredan dde Control. En
E
general, los contrroles ASP.NEET heredan de clases inte ermedias quee encapsulan n un determinado
comp portamiento.
Creaar un con
ntrol de usuario
u d servid
de dor, indep
pendientte de la
apliicación web
w
Una vez
v creado y compilado, podremos trrasladar la dll resultante a la carpeta bin de la
aplicaación web
Herredando de
d un con
ntrol web
b existen
nte
using
g System;

?
%

:
using
g System.Webb.UI;
using
publi
ic class LabbeledTextBox : TextBox
{
p
public strin
ng LabelText
{
get { reeturn labelText; }
set { labelText v
value; }
}
p
private string labelText;
p
public int LabelWidth
L
{
get { reeturn labelW Width; }
set { labelWidth value; }
}
p
private int labelWidth;
p
protected ov
verride void Render(HtmllTextWriter writer)
{
writer.WWrite(
@"<span style ""disp play:inline block;width
h:{0}px"">{1
1} </sp
pan>"
, LabelWWidth, LabelText);
base.Rennder(writer);
}
}
g System;
using
using
g System.Web
b.UI;
g System.Web
publi
ic partial class
c LabeledTextBoxTest
t : System.W
Web.UI.Page
{
p
protected vo
oid Page Init(object sennder, EventA
Args e)
{
int widt
th 150;
LabeledT
TextBox promppt1 new La
abeledTextBo
ox();
prompt1.LabelText "Enter Name
e:";
prompt1.LabelWidth width;
form1.Co
ontrols.Add(pprompt1);
LiteralC
Control brk new Litera
alControl("<
<br />");
form1.Co
ontrols.Add(bbrk);
LabeledT
TextBox promppt2 new La
abeledTextBo
ox();
prompt2.LabelText "Enter Addr
ress:";
prompt2.LabelWidth width;
form1.Co
ontrols.Add(pprompt2);
}
}
Herredar directamen
nte de la clase
c WebControll
Ademmás de hered dar de un conntrol Web exxistente, pue
ede heredar directamentte de la clase
e
WebC Control, que puede ser conveniente
c cuando no hay
h ningún co ontrol con ell comportam
miento
que se
s desea aplicar.
Al heredar de la clase
c WebCoontrol, debe sobreescribi
s r el método Renderizar para

?
%

:
propo
orcionar la salida desead
da. La siguien
nte es una muestra de có
ódigo que contiene
LogoC
Control una propiedad para
p la LogoUUrl y la Comp
panyName:
publi
ic class LoggoControl : WebControl
W
{
p
public LogoC
Control()
{
}
p
public strin
ng LogoUrl
{
get { reeturn logoUrl; }
set { logoUrl value; }
}
p
private string logoUrl;
p
public strin
ng CompanyNamme
{
get { reeturn companyName; }
set { c companyName value; }
}
p
private string companyN Name;
p
protected verride void Render(Html
ov lTextWriter writer)
{
writer.WWriteFullBeginTag("div") );
writer.WWrite(@"<img src ""{0}"" " /><br />",
, LogoUrl);
writer.WWrite(CompanyName + "<br r />");
writer.WWriteEndTag("div");
}
}
using
g System;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
publi
ic partial class
c LogoControlTest : System.Web.
.UI.Page
{
p
protected oid Page Init(object sen
vo nder, EventA
Args e)
{
LogoCont
trol logo new LogoCont
trol();
logo.Com
mpanyName "Northwind Traders";
T
logo.Log
goUrl "NorthwindTrader
rs.gif";
form1.Co
ontrols.Add(logo);
}
}

?
%

:
Aña
adir Conttrol de se
ervidor Personali
P zado a la
a barra de
e

herramientaas
El req
quisito básico
o para tenerr un control personalizad
p o en la barraa de herramiientas es que
e esté
comp pilado en unaa dll.
Para incorporarloo a la barra de herramienntas, con el botón

b derech
ho en la barraa de
herraamientas, Eleegir elementos, y elegimoos la dll del control
c
Si dessea que un iccono especiaal para el con dro de herramientas, pue

ntrol aparezcca en el Cuad ede
especcificar una im
magen particcular utilizando ToolboxBBitmapAttribute. Esta clase es un atriibuto,
un tip
po de clase especial
e que se puede asociar a otrass clases.
Mediiante Toolbo oxBitmapAttrribute, puedee especificarr una cadenaa que indiquee la ruta de
accesso y el nombbre de archivoo para un maapa de bits de
d 16 por 16 píxeles. Estee mapa de bits
a control cuaando se agreegue al Cuadro de herram
apareecerá junto al mientas. Tammbién puede
especcificar un Typpe, en cuyo caso
c se cargaa el mapa de
e bits asociaddo a ese tipo
o. Si especificca
tanto
o el parámetrro Type com mo una caden na, el controll busca un reecurso de imaagen con el
nomb bre especificcado por el parámetro dee cadena en ele ensamblad do que contiiene el tipo
especcificado por el parámetro o Type.
// Sp
pecifies the
e bitmap associated with
h the Button
n type.
[
[ToolboxBitm
map(typeof(Button))]
c
class trol1 : UserControl
MyCont
{
}
/ Specifies a bitmap file.
//
[ map(@"C:\Documents and Settings\Joe
[ToolboxBitm S e\MyPics\myI
Image.bmp")]
c
class MyCont
trol2 : UserControl
{
}

?
%

:
Personalizando Conttrol de Se
ervidor
Especcifica la etiqu
ueta predeteerminada gen nerada para un control personalizado
p o cuando éstte se !
arrastra desde un n cuadro de herramienta
h s en una herrramienta co omo Microsooft Visual Studio.
De fo
orma predeteerminada, el diseñador visual
v de una herramienta como Visual Studio cre ea una
etiqueta vacía. Éssta es la etiqueta que rep
presenta un control
c en su
u estado predeterminado o,
cuanddo se arrastrra desde un cuadro
c de heerramientas de un diseñaador visual a la superficiee de
diseñ
ño. Para espeecificar valorres predeterm
minados inicciales, los con
ntroles deben utilizar estte
atribu
uto. Puede usar
u este atriibuto para peersonalizar el
e contenido HTML inicial que se inclu uye
en el diseñador cuando se arrrastra el control desde el cuadro de herramienta
h s hasta el
formulario.
using
g System;
using
g System.Web
b;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
names
space Custom
mControls
{
[
[ToolboxDataa("<{0}:MyLab
bel Text 'My
yLabel' Bord
derColor 'Ye
ellow' BackC
Color 'Magenta'
Borde
erWidth '10' runat 'server'></{00}:MyLabel>"
")]
p
public class MyLabel : Label
{
public MyLabel()
M
{
// Your
Y code goes here.
}
}
En el ejemplo de código siguieente, el código anterior establece

e varias propiedades específficas
de MyLabel. El disseñador reemplaza todas las aparicio ones de {0} por
p el prefijo
o de etiquetaa
asociado a la classe MyLabel.
[Tool
lboxData( @"<{0}:LogoControl runat ""server"" CompanyName
e "" "" Logo
oUrl "" "" />")]
publi
ic class Log
goControl : WebControl
W
Ejem
mplo
Vamo
os a crear un
n control personalizado lllamado Web
bCustomConttrol1
Simultáneamentee, creados un
n nuevo sitio
o web llamaddo CustomCo
ontrolWebPaages. Esta
funcionara como nuestra apliicación consu
umidora o cliente.
Es deecir, CustomC
ControlWebP
Pages utilizará los contro
oles que intro
oduzcamos een la bibliote
eca de
contrroles .
Desde CustomControlWebPages tendrem

mos que hace
er una refereencia a la dll donde tenem
mos
los co
ontroles perssonalizados

?
%

:
"
Ya esstamos prepaarados para añadir el con

ntrol personaalizado a la página
p Web. En dos paso
os:
Regisstrar el contrrol y Usarlo.
<%@ Register
R Tag
gPrefix "Gerardo" Namesp
pace "Server
rControl1" Assembly
A "Se
erverControl1" %>
<body>
>
<f
form id="form1" runat="server">
<d
div>
erverControl1 ID="wcc1" ru
<Gerardo:Se unat="server" Text="Hola Co
ontrol Persona
alizado" />
</
/div>
</
/form>
</body
y>
Los coontroles disp

ponen de pro
opiedades, a las que pod
demos acceder mediantee programaciión o
declaarativamentee.

?
%

:
Méttodo Rend
der
Es el método clavve de un control personalizado. Este método se declara
d en la clase base y debe )
ser so
obreescrito en
e la clase deerivada si qu
ueremos teneer el control del procesaddo de la página.
El méétodo Render utiliza el ob

bjeto HtmlTeextWriter, paasado como parámetro.
prote
ected override void RenderContents(HtmlTextWri
iter output)
{
outp
put.AddStyleA
Attribute("c
color", "fuc
chsia");
outp
put.RenderBeginTag("p");
;
outp
put.Write(Text);
put.RenderEndTag();
outp
}
Actu
ualizar el control
Cada vez que modificamos el control de laa biblioteca de controless personalizaados, deberemos
obten
ner la dll resultante en el directorio bin
b del sitio web.
w
Podemos hacerlo o eliminando y volviendo a crear la re

eferencia, o copiando
c el aarchivo dll a
manoo. Una altern
nativa es enseñar a la bilblioteca de controles
c personalizadoss a crear su dll
d
directtamente en el directorio
o bin del sitio
o Web.

?
%

:
Man
ntener el estado
e
Vamo
os a agregar un control personalizado
p o para aume
entar el tamaaño del texto
o.
[DefaultProp
[ perty("Text")]
[
[ToolboxDataa("<{0}:WebCustomControll1 runat ser
rver></{0}:W
WebCustomCon
ntrol1>")]
p
public class WebCustomControl1 : We ebControl
{
public WebCustomCon
W trol1()
{
ViewwState["Size"] 1;
}
[Bindable(true)]
[Categorry("Appearance")]
[DefaulttValue("")]
[Localizable(true)]
public string Text
{
get
{
String s (String)View
wState["Text
t"];
return ((s null) ? String.Empty
S y : s);
}
set
{
ViewState["Text"] val
lue;
}
}
public int Size
{
get { return Convert.ToInt3
32(ViewState
e["Size"]); }
set { ViewState["Size"] v
value; }
}
protecte
ed override void
v RenderC
Contents(Htm
mlTextWriter
r output)
{
outp
put.Write("<font size "+
+Size+">" + Text+ "</fo
ont>");
}
}
}
Desde la página contenedora
c podremos cambiar
c el vaalor de la pro
opiedad Size

?
%

:
Crea
ación de controle
es Deriva
ados
En esste caso vamos a ampliarr el comportaamiento de unu tipo de co
ontrol existente. Podemo
os
derivar de un conntrol existentte, igual que podíamos derivar
d de un
na clase.
Queremos un bottón para mantener el reccuento del número de veeces que hem
mos hecho clic en
él.
names
space Server
rControl1
{
[
[DefaultProp
perty("Text")]
[ a("<{0}:CountedButton ru
[ToolboxData unat server>
></{0}:Count
tedButton>")]
p
public class CountedButton : System
m.Web.UI.Web
bControls.Bu
utton
{
public CountedButto
C n()
{
this.Text "Haz Click";
View
wState["Count"] 0;
}
public int Count

{
get
{
return (int)ViewState["
"Count"];
}
set
{
ViewState["Count"] va
alue;
}
}
protecte
ed override void
v OnClick
k(EventArgs e)
{
View
wState["Count"] ((int) "Count"]) + 1;
)ViewState["
this.Text View
wState["Coun
nt"] + " cli
ick";
base
e.OnClick(e);
}
}
}
Crea
ación de controle
es Compu
uestos
Ahoraa vamos a co
ombinar 2 o más controlees existentes.
Vamoos a modificaar CountedButton. Para no ountedButton2

n complicarr el código crrearemos Co
que deriva
d de CouuntedButton
n
pu
ublic class CountedButton2 : Counte
edButton
{
private string CadenaVisualizac

cion;

?
%

:
public CountedButto
C n2()
{
Cade
enaVisualizacion cks";
"clic
Init
tValues();
}
cargado, toma una cadena

//Sobrec a para mostr
rarla
public CountedButto
C n2(string ca
ad)
{
this.CadenaVisualizacion cad;
Init
tValues();
}
private void InitValues()
{
if (ViewState["Count"] n
null)
{
ViewState["Count"] 0;
;
}
this.Text "Haz Click";
}
protecte
ed override void
v k(EventArgs e)
OnClick
{
View
wState["Count"] ((int)
)ViewState["
"Count"]) + 1;
this.Text View
wState["Coun
nt"] + " " + CadenaVisu
ualizacion;
base
e.OnClick(e);
}
ed override void
protecte v RenderC
Contents(Htm
mlTextWriter
r output)
{
outp
put.Write(Text);
}
}
Crea
ación del Control Compuest
C to BookCo
ounter
El con
ntrol BookCo
ounter es el responsable
r de registrar y mostrar el número de consultas so
obre
un deeterminado libro.
l
x INamingC Container: Ess una interfaz marcadoraa que no tienne métodos. Esta interfazz
identificaa a un contro
ol contenedo or que crea un nuevo esppacio de nommbre identificcador,
garantizaando que tod dos los controles hijos tie
enen identidaades únicas para la págin
na.
names
space ServerrControl1
{
[
[DefaultPropperty("Text")]
[
[ToolboxDataa("<{0}:BookCounter runaat server></
/{0}:BookCou
unter>")]
p
public class BookCounter : WebContr rol, INaming
gContainer
{
CountedBButton2 btn new Counte
edButton2("a
accesos");
public string BookName
{
get
{
return (string)ViewStatte["BookName
e"];
}
set
{
ViewState["BookName"] value;
}
}
public int Count
{
get
{
return btn.Count;
}
set
{
btn.Count value;
}
}

?
%

:
public void
v Reset()
{
btn.Count 0;
}
protecte
ed override void
v CreateC
ChildControl
ls()
{
Cont
trols.Add(btn);
}
}
}
Crea
ación dell control compuesto Book
kInquiryL
List
Cada uno de los objetos
o bookkCounter está en la coleccción Controls del BookIn nquiryList.
Creammos otro con
ntrol en la lib
brería de con
ntroles, llamaado BookInq
quiryList, y lo
o modificamoos,
sólo necesitamos
n s el método Render.
R
El ControlBuilderA
Attribute Esp
pecifica una clase Contro n de un control
olBuilder parra la creación
persoonalizado dentro del analizador de ASSP.NET. No se
s puede herredar esta claase. La clase
BookkCounter debbe asociarse a BookInquiryClass, paraa que Asp.Neet pueda con nvertir los
elementos de la página
p aspx al
a código adeecuado.
El primer argumeento para el atributo

a Con
ntrolBuilderA
Attribute es un
u objeto Typpe, que pode emos
obtenner pasando BookCounteerBuilder, unna clase que definiremoss para devolvver el tipo de
e la
clase BookCounteer dada una etiqueta llam
mada BookCo ounter
NET usará esta clase BookCounterBuiilder, que se deriva de Co

Asp.N ontrolBuilder, para
deterrminar el tipo
o de objeto indicado
i porr la etiqueta BookCounteer. Mediante esta asociacción,
cada uno de los objetos
o BookkCounter se instanciarán y se añadiráán a la coleccción Controlss de
BookkInquiryClass
Debeemos asignarr al segundo argumento deld atributo ControlBuild derAttribute,, ParseChildrren, el

valor false para in
ndicar a ASP..NET que hem
mos gestionaado los atrib
butos hijos y que no es
necessario seguir con
c el análisis. Un valor false
f q los atributos hijos an
indica que nidados no so on
propiiedades del objeto
o externo, sino conttroles hijo.
[Cont
trolBuilder(typeof(BookCounterBuild
der)),ParseC
Children(fal
lse)]
publi
ic class Boo
okInquiryList : WebContrrol, INaming
gContainer
{
protecte
ed override void
v Render(HtmlTextWri
iter output)
{
int totalInquiries 0;
Book
kCounter current;
//Escribe el encabezado
put.Write("<table border
outp r '1' width '90%' cellp
padding '1' cellspacing '1'
align
n 'center'>");
outp
put.Write("<tr><td colsppan '2' alig
gn 'center'>
>");
outp
put.Write("<B> Inquiriess</B></td></
/tr>");
//si no contiene controles,, escribe el
l mensaje pr
redeterminad
do
if (Controls.Count 0)
{
output.Write("<tr><td colspan
c '2' align 'cent
ter'>");
output.Write("<b> No ha
ay libros</b
b></td></tr>
>");
}
//en
n caso contrario, muestrra cada uno de los cont
troles conte
enidos
else
e
{
//recorre la colección de controle
es

?
%

:
// y muestra el nombre del libro para

p cada un
no
// e indica a cada conttrol conteni
ido que debe
e mostrarse
for (int i 0; i < Con
ntrols.Count
t; i++)
{
current (BookCoun
nter)Control
ls[i];
totalInquiries + current.Coun
c nt;
output.WWrite("<tr><
<td align 'l
left'>" + cu
urrent.BookNName + "</td>");
output.RenderBeginTTag("td");
current.RenderContrrol(output);
;
output.RenderEndTagg();
output.WWrite("</tr>
>");
}
output.Write("<tr><td colspan
c '2' align 'cent
ter'>" + "Tootal Consultas: "
+ tot
talInquiries + "</td></tr>");
}
put.Write("</table>");
outp
}
}
inter
rnal class BookCounterB
B uilder : Con
ntrolBuilder
r
{
public override
o Type GetChildCo
ontrolType(s
string tagNa
ame,
Syste
em.Collectio
ons.IDictionary attribs))
{
if (tagName "BookCounter
r")
return typeof(BookCount
ter);
else
e return null;
}
public override
o void AppendLite
eralString(s
string s)
{
}
}
Test
1. W
Which of the following attributes
a caan be used to
t set the im
mage that iss displayed in
i the
T
Toolbox for your
y custom Web controll? (Choose one.)
o
A. ToolboxIc
Icon
B. ToolboxD
Data
C. ToolboxB
Bitmap
D ToolboxCoonfig
D.
2. You are goinng to createe a custom Web serverr control thhat inherits directly from m the
W
WebControl c
class. o override to get your coontrol to disp
Whichh method do you need to play in
thhe browser window?
w (Chhoose one.)
A Display
A.
B. Paint
C. Build
D Render
D.
3. Y
You are creaating a com mposite conttrol, so you u create a class that iinherits from
m the
C
CompositeCo ontrol class. What methhod must be overridden so you cann provide co ode to
innstantiate thee child controls and set thheir propertiees? (Choose one.)
A. CreateChhildControls
B. InitChildrren

?
%

:
C. BuildChilldControls
D. RenderChhildren

?

F

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
?

F

F

Intrroducción
n a los co
ontroles de
d valida
ación de ASP.NET
A
Los coontroles de validación
v ASSP.NET perm miten compro obar los datoos proporcionados por el
usuarrio en una páágina web. Existen
E controles para disstintos tipos de validación, como la
comp probación dee un intervalo o o la compaaración de modelos.
m Cadaa control de validación hace
h
referencia a un co ontrol de enttrada (un control de servvidor) situado en otra parte de la pággina.
Cuando se processan los datoss proporcionados por el usuario (por ejemplo, cuando se envvía
una página),
p el co
ontrol de validación comprueba dicho os datos y esstablece una propiedad para
p
indicaar si han passado la compprobación. Una vez que se ha llamado o a todos loss controles de
validaación, se establece una propiedad
p en
n la página que indica si alguna
a de lass comprobacciones
de vaalidación ha producido
p unn error.
Paso
os a realizzar para validar
v un
n control
1. Arrastrar el Control de Validar al Formulario
1
2 Dar nomb
2. bre al contro
ol de Validar
3 Estableceer la propiedad ControlTo
3. oValidate, paara enlazar el
e control de Validar al co
ontrol
que se qu
uiere Validarr
4 Estableceer la propiedad ErrorMesssage, para dar
4. d un mensaaje al usuario odescriptivo del
error de validación
v quue ha tenidoo lugar
5 Copiar el valor de la propiedad
5. p ErrrorMessage a la propied dad ToolTip
6 Estableceer la propiedad Text a un
6. na cadena corta, normalm mente * , parra mostrar
cuando el
e control no es válido
Dispo
onemos de un u control VaalidationSum e una mismaa localización
mmary el cual agruparía en
todoss los errores de validació
ón producido
os en la págin
na.
El objjeto Page disspone de unaa colección Validators

V co
on todos los controles dee validación de
d la
págin
na.
?

F
Tamb bién tenemos un método o Validate() para

p checkeaar todos los controles
c de validación de
d la
páginna. Por defeccto, este méttodo es llamaado automátticamente. Si S todos los controles de
validaación han vaalidado con éxito
é la propiiedad IsValid
d tendrá el vaalor true, falsse encaso de
e que
algunno no haya validado con éxito.
Los coontroles tien

nen un méto odo Focus, el cual puede ser llamado para estableecer el foco en
e el
ón. Un contrrol de Validacción tiene el método SettFocusOnErro
contrrol en cuestió or para en caaso
de errror posicionar el foco en
n un control determinado
d o
La validación del lado del cliente está permitida por defecto. Si el cliente lo peermite, la
validaación de niveel superior see realizará de forma auto omática. Parra deshabilitaar la validación
del laado del clientte, estableceeremos la pro opiedad ClieentTarget de la página a ""Downlevel""
("Uplevel" fuerza la validación n del lado cliiente). De forma alternattiva, podemo os establecer la
propiiedad Enable eClientScriptt de un contrrol de validacción a "false" para deshaabilitar la
validaación del lad
do cliente para dicho control.
Base
eValidato
or
Clasee de la que heeredan los co
ontroles de validación.
v
ContrrolToValidatte Control a validar
Display Nonee,Static o Dynnamic
EnableClientSide
eScript False
e para deshab bilitar la validación de cliiente
ErrorrMessage Menssaje de errorr
IsValid Estad
do de validacción del conttrol
Req
quiredFie
eldValida
ator
El con
ntrol RequireedFieldValidaator garantizza que el usu
uario no omitte ningún caampo de entrrada
necessario.
Un coontrol RequiredFieldValid dator funciona junto con n otro contro

ol, por ejemp
plo un TextBo
ox
(conttrol). Agregue el control que
q desee vaalidar a la páágina antes ded agregar el control
RequiredFieldValidator para poder
p así aso
ociarlos fácilmente.
Para agregar un control

c Requ
uiredFieldVaalidator a una página
1 Arrastre el
1. e control ReequiredFieldV
Validator del panel de tareas Cuadro de herramie
entas
a la págin
na.
2 En la vistaa Diseño, selleccione el control RequiiredFieldValidator, haga clic con el bo

2. otón
secundarrio en el mismmo y haga clic en Propieddades en el menú
m contexxtual.
3 En el panel de tareas Propiedadess de etiquetaa, seleccionee el control q

3. que desea validar
con el control RequireedFieldValidator en el menú despleggable de prop piedades de
ControlTooValidate.
?

F
4 Establezcca la propiedad ErrorMesssage en el texto que dessea que aparrezca cuando

4. o un
usuario deje
d el contro ol en blanco..
5 Si va a usar un contro
5. ol ValidationSSummary para consolidaar los mensajjes de error de
d
n, establezcaa la propiedaad Validation
validación nGroup en ell nombre dell grupo de
controless de validació
ón. Puede seer cualquier cadena,
c siem
mpre que tod
dos los controoles
del grupoo tengan el mismo
m valor.
BasseComparreValidattor
e CompareValidator y el RangeValidaator. Contien
Clasee base para el ne la propied
dad Type que
e
estabblece el tipo de datos parra la comparración
x Currency. Se valida co
omo un Decimal y se perrmite moned
da y decimalees
x Date. Feccha numéricaa
x Double. System.Doub
S ble
x Integer. System.Int32
S 2
x String. String
Com
mpareVallidator
El con
ntrol CompareValidator compara
c los datos propo
orcionados por
p el usuario
o con un valo
or
consttante, con el valor de otrro control (m
mediante un operador
o de comparació
ón como men nor
que, igual que o mayor
m que) o para un tippo de datos específico.
e
Un co
ontrol CompareValidatorr funciona co onjuntamentte con otro control, por eejemplo, un
TextB
Box (control)). Agregue el control que desee validaar a la página antes de aggregar el con
ntrol
Comp or para poder así asociarllo a Compare
pareValidato eValidator fáácilmente.

c CompareValidator a una pággina
1 Arrastre el
1. e control Co
ompareValidator del panel de tareas Cuadro de h
herramientass a la
página.
2 En la vistaa Diseño, selleccione el control Comp

2. pareValidator, haga clic ccon el botón
secundarrio en él y haga clic en Propiedades en el menú coontextual.

Validator en el menú dessplegable de propiedades de
con el control RegularExpressionV
ControlTooValidate.
4 Establezcca la propiedad ControlTo

4. oCompare o ValueToCom
mpare en el ccontrol o vallor
que desea comparar.
5 Establezcca la propiedad Operatorr en la compaaración que desea usar: Equal, NotEq

5. qual,
GreaterThan, GeaterTThanEqual, LessThan,
L LesssThanEquall o DataTypeeCheck.
d
validación
nGroup en ell nombre dell grupo de
?

F
c siem
mpre que tod
dos los contro
oles
del grupo
o tengan el mismo
m valor.
Ran
ngeValida
ator
El con
ntrol RangeV Validator com
mprueba quee los datos proporcionad dos por el usu
uario están
dentrro de los límites superiorr e inferior esspecificados. Se pueden comprobar llos intervalos
entree pares de núúmeros, caraacteres alfabéticos y fech has.
El con
ntrol RangeVValidator funnciona conjun ntamente co
on otro contrrol, por ejem
mplo, TextBoxx
(conttrol). Agregue el control que
q desee vaalidar en la página
p antes de agregar eel control
RangeValidator para
p poder assí asociar RangeValidator con aquél fácilmente.
f

c RanggeValidator a una páginaa
1 Arrastre el
1. e control RaangeValidato
or desde el paanel de tareaas Cuadro dee herramienttas
hasta la página.
p
2 En la vistaa Diseño, selleccione el control Range

2. eValidator, haga
h clic con el botón
secundarrio en el mismmo y haga clic en Propieddades en el menú
m contexxtual.

con el control RangeV
ControlTooValidate.
4 Configuree las propied

4. dades Maxim
mumValue y MinimumVa
M lue en los vaalores máxim
mo y
mínimo, respectivamente, que deesea pueda escribir
e un ussuario en el ccontrol que está
e
validando
o.
d
validación
c siem
mpre que tod
dos los controoles
m valor.
Reg
gularExprressionV
Validator
El con
ntrol RegularrExpressionVValidator com
mprueba que e los datos proporcionaddos por el usuuario
coincciden con un modelo definido por una expresión regular. Estee tipo de validación perm mite
comp probar secueencias de carracteres pred
decibles, com
mo las que apparecen en laas direccione
es de
correeo electrónico, números de teléfono, códigos posstales, etc.
Un coontrol RegulaarExpression
nValidator funciona conjuuntamente con
c otro conttrol, por ejemmplo,
un TeextBox (control). Agreguee el control que
q desee vaalidar a la página antes de agregar el
contrrol RegularExxpressionValidator para poder
p ociarlo a ReggularExpressionValidatorr
así aso
fácilm
mente.

c Regu onValidator a una página
ularExpressio
?

F
1 Arrastre el
1. e control ReegularExpressionValidato
or del panel de
d tareas Cuadro de
herramieentas a la pággina.
2 En la vistaa Diseño, selleccione el control RegularExpression
2. nValidator, h
haga clic con el
botón seccundario en él y haga clicc en Propiedades en el menú
m contexttual.

con el control RegularExpressionV
ControlTooValidate.
4 Establezcca la propiedad ValidationExpression en la expressión regular ccon la que deberá

4.
coincidir el texto del control
c para ser válido.
d
validación
c siem
mpre que tod
dos los controoles
m valor.
CustomValid
dator
El conntrol Custom
mValidator coomprueba lo os datos propporcionados por el usuarrio utilizando
o la
lógicaa de validación que ha esscrito. Este tipo de validaación permite comprobar valores
derivados en tiem mpo de ejecuución.
ntrol Custom
El con mValidator fu unciona conjuntamente conc otro control, por ejem mplo, el control
TextBBox (control)). Agregue el control que desee validaar a la página antes de aggregar el con
ntrol
CustoomValidator para poder así asociar CustomValida
C ator fácilmen nte.

c CustomValidatorr a una págin
na
1 Arrastre el
1. e control Cu de herramientas
ustomValidattor desde el panel de tareas Cuadro d
hasta la página.
p
2 En la vistaa Diseño, selleccione el control Custo

2. omValidator, haga clic con el botón
secundarrio en él y haga clic en Propiedades en el menú coontextual.

mValidator en
con el control Custom n el menú deesplegable de propiedades de
ControlTooValidate.
4 Para valid
4. dar el contro orador cliente, establezcaa ClientValidationFunctio
ol en el explo on en
el nombrre de la función de JavaSccript que se usará en la validación.
v
d
validación nGroup en ell nombre dell grupo de
c siem
mpre que tod
dos los controoles
m valor.
?

F
Valiidation Groups
G
La propiedad ValiidationGroup se utiliza cuando
c el usu
uario quiere tener escen narios de !
validaación diferen
ntes en la miisma página.. Establecereemos el nombre del grupo en el validador
y en el
e botón o en ol "postbackk" que cause la validación
n otro contro n. Ésto es útil con controles
Wizard, MultiVie ew o controlees de datos (edición).
( Por defecto, to
odos los valid
dadores se
encueentran en el grupo "" (grrupo por defeecto), para compatibilida
c ad hacía atráás (con versio
ones
anterriores). Page nos proporcciona ademáás los método os GetValidaators("group p") y
Valid
date("group""). Page.IsVaalid refleja la validez de to
odos los conntroles (acum
mulativa) que e han
sido llamados
l a Validate
V .
SetF
FocusOnE
Error
Otra característicca nueva de ASP.NET
A 2.0 es SetFocusO OnError quee se establecee en controle
es de
validaación y hace que el primer control inválido recibaa el foco.
Ejem
mplo
<%@ Pa
age Language="C#" AutoEventWireup="true
e" CodeFile="D
Default.aspx.c
cs" Inherits=" Default" %>
<!DOCT
TYPE html PUBL
LIC " //W3C//DTD XHTML 1.0
0 Transitional
l//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 tran
nsitional.dtd"
">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<t d Page</title>
title>Untitled
uage="javascript" type="te
<script langu ext/javascript
t">
fu
unction Valida
atePassword(source, arguem
ments)
{
v
var data = arg
guements.Value.split('');
/
//start by set
tting false
a
arguements.IsV
Valid=false;
?

F
//check length
/ h
i h < 6 || data.length > 14) return;
if(data.length "
//check for up
/ ppercase
v
var uc = false
e;
f
for(var c in data)
d
{
if(data[c] >= 'A' && data[c] <= 'Z')
{
uc=true; break;
}
}
i
if(!uc) return
n;
//check for lo
/ owercase
v
var lc = false
e;
f
for(var c in data)
d
{
if(data[c] >= 'a' && data[c] <= 'z')
{
lc=true; break;
}
}
i
if(!lc) return
n;
//check for nu
/ umeric
v
var num = false;
f
for(var c in data)
d
{
if(data[c] >= '0' && data[c] <= '9')
{
num=true
e; break;
}
}
i
if(!num) return;
//must be valid
/
a
arguements.IsV
Valid=true;
}
</
/script>
d>
</head
<body>
>

<f
<table bord
der="0">
<tr>
<td
d>
User Name:</td>
<td
d>
<asp:TextBox ID="txtUserr" runat="serv
ver" Width="15
50px"></asp:Te
extBox>
<asp:RequiredFieldValida
ator ID="Requi
iredFieldValid
dator1" runat=
="server"
Contro
olToValidate="txtUser"
Display
y="Dynamic" Er
rrorMessage="U
User name is required."
r Too
olTip="User name is
requir
red.">*</asp:R
RequiredFielddValidator><as
sp:RegularExpr
ressionValidat
tor
ID="Re
egularExpressionValidator1" runat="serv sage="Must be 6 14 of A Z, a z, 0 9 or "
ver" ErrorMess
ToolTip="Must be 6 14
1 of A Z, a z,
z 0 9 or " ControlToValid
C date="txtUser"
Displa
ay="Dynamic" ValidationExp
V ression="\w{6
6,14}">*</asp:
:RegularExpres r></td>
ssionValidator
</tr>
<tr>
<td
d>
Password:</td>
<td
d>
<asp:TextBox ID="txtPasssword" runat="
"server" TextM
Mode="Password
d"
Width=
="150px"></asp
p:TextBox>
ator ID="Requi
iredFieldValid
dator2" runat=
="server"
Contro
olToValidate="txtPassword"
Display
y="Dynamic" Er
rrorMessage="P equired." ToolTip="Password is
Password is re
requir
red.">*</asp:R
sp:CustomValid tomValidator1" runat="serv
dator ID="Cust ver"
Client
tValidationFun
nction="ValiddatePassword"
ControlToValidate="t
txtPassword" ErrorMessage="
E "Must be 6 14 charactors, at
ower, and 1 number"
least 1 upper, 1 lo
ToolTip="Must be 6 14
1 charactors,, at least 1 upper,
u r, and 1 number"
1 lower
OnServ
verValidate="C
CustomValidator1 ServerVallidate" Displa
ay="Dynamic">* Validator>
*</asp:CustomV
</t
td>
</tr>
<tr>
<td
d>
Confirm Password:</td>
<td
d>
<asp:TextBox ID="txtConffirm" runat="s
server" TextMo
ode="Password"
Width=
="150px"></asp
p:TextBox>
ator ID="Requi
iredFieldValid
dator3" runat=
="server"
olToValidate="txtConfirm"
Contro
?

F
Display
y="Dynamic" Er
rrorMessage="C
Confirm passwo
ord is require
ed."
ToolTi
ip="Confirm pa
assword is required.">*</aasp:RequiredFi
ieldValidator>
><asp:CompareV
Validator
ID="Co
ompareValidato
or1" runat="server" ControolToCompare="t
ControlToValidate="t
txtPassword"
txtConfirm" Di
isplay="Dynami
ic" ErrorMessa
age="Password
d and
)
Confir
rm Password mu
ust match."
ToolTip="Password an
nd Confirm Pas
ssword must
match.">*</asp:Comp
pareValidator></td>
</tr>
<tr>
<td
d>
Zip Code:</td>
d>
<td
<asp:TextBox ID="txtZip"" runat="serve
er" Width="150
0px"></asp:Tex
xtBox>
ator ID="Requi
iredFieldValid
dator4" runat=
="server"
Contro
olToValidate="txtZip"
Display
y="Dynamic" Er
rrorMessage="Z equired." ToolTip="Zip cod
Zip code is re de is
requir
red.">*</asp:R
sp:RegularExpr
ressionValidat
tor
ID="Re
egularExpressionValidator2" runat="servver" ControlTo
oValidate="txt
tZip"
Display
y="Dynamic" Er
rrorMessage="M tter as 99999 or 99999 9999"
Must be format
ToolTi
ip="Must be fo
ormatter as 99999 or 999999 9999"
ValidationExpression
n="\d{5}( \d{4 RegularExpressionValidator></td>
4})?">*</asp:R
</tr>
</table>
<br />
<asp:Button
n ID="Button1" runat="servver" Text="Sub
bmit" />
<br />
<br />
<asp:Valida
ationSummary ID="Validatio unat="server" Width="312px" />
onSummary1" ru
</
/form>
</body
y>
</html
l>
using System;
using System.Data;
using System.Config
guration;
using System.Web;
using System.Web.Se
ecurity;
public
c partial class Default : System.Web.UUI.Page
{
rotected void Page Load(object sender, EventArgs e)
pr
{
}
rotected void CustomValidator1 ServerVa
pr alidate(object
t source, Serv
verValidateEve
entArgs args)
{
string data
a = args.Value;
//start by setting false
args.IsValid = false;
//check len
ngth
ength < 6 || data.Length > 14) return;
if (data.Le
//check for uppercase

bool uc = false;
foreach (ch
har c in data)
{
> 'A' && c <= 'Z')
if (c >=
{
uc = true; break;
}
}
if (!uc) re
eturn;
//check for lowercase

bool lc = false;
har c in data)
foreach (ch
{
> 'a' && c <= 'z')
if (c >=
{
lc = true; break;
}
}
if (!lc) re
eturn;
//check for numeric

bool num = false;
har c in data)
foreach (ch
{
> '0' && c <= '9')
if (c >=
?

F
{
num
m = true; break;
}
} *
if (!num) return;
//must be valid
v
args.IsValid = true;
}
}
Test
1. Yoou prompt thhe user to ennter a code that

t exists in
n the databasse. How cann you validatte this
inputt?
A. Providde a RegularrExpressionV Validator and d set the VallidationExprression propeerty to
/DbLookuup{code}.
B. Providde a RangeVa Validator to and
a set the MinValue
M prooperty to DbL Lookup(codee) and
set the MaxVaue
Ma propperty to DbLoookup(code).
C. Providde a CustomV Validator witth server-sid
de code to seaarch the dataabase for the code.
D. Providde a ComparreValidator anda set the co ompare expreession to thee name of a server-
side functtion that perfforms a databbase lookup of the code.
2. Yoou created a Web page that t ns many controls that arre validated using validation
contain
contrrols. This paage also conttains Button n controls thhat perform PostBacks. You disableed all
of thee client-sidee validation and noticed y clicked any of the B
d that when you Button contrrols,
the code in the Click
C event handler
h was executing even when soome of the ccontrols did not
have valid data. How can yoou best solvee this probleem to ensuree code is nott executed when w
invallid data exists?
A. In thee Click evennt handler meethod for eaach of your Button B contrrols, test thee Web
page’s IsVValid properrty and exit thhe method iff this propertty is false.
B. In thee Load eventt handler meethod of thee Web page,, test the Web page’s IssValid
property and
a exit the method
m if thiis property iss false.
C. Re-enaable the cliennt-side scriptt to disable PostBack
P until valid data exists.
he validation controls.
D. Add thhe runat="serrver" attributte to all of th
3. Yoou have creaated an elaborate Web page p ontains manyy validated controls. Yo
that co ou
wantt to provide a detailed message
m for each
e validattion error, but
b you don’’t have spacce to
proviide the detaailed message next to eacch control. What W dicate an error at
can yoou do to ind
the control and list
l the detaiiled error messages
m at the top of the Web page?
A. Set thhe Text propperty of the validator co ontrol to the detailed meessage and set s the
ErrorMesssage propertty to an asteerisk. Place a ValidationS Summary coontrol at the top
t of
the Web page.
p
B. Set the ErrorMesssage propertyy of the valiidator controol to the detaailed messag ge and
set the Teext property to an asteriskk. Place a VaalidationSum mmary controol at the top of the
Web pagee.
C. Set thee ToolTip prroperty of thhe validator control
c to thee detailed message and set
s the
ErrorMesssage propertty to an asteerisk. Place a ValidationS Summary coontrol at the top
t of
the Web page.
p
D. Set thee ToolTip prroperty of thhe validator control
c to thee detailed m
message and set
s the
Text propperty to an asterisk.
a Placce a ValidatioonSummary control at thhe top of thee Web
page.
?

F
Exp
presioness Regularres
Caraccter (s) Significado

Caraccteres To
odos los caraacteres a exccepción de ., $, ^, {, [, (, |, ), *, +, ?, y \ son compaarados
Regulares co
on ellos mismmos. En otrass palabras, laa expresión regular
r hola corresponde era
on cualquier cadena con el texto hola
co a. Los caracteres excluido os tienen un
n
siggnificado esp
pecial.
. Co
orresponde con
c cualquieer unico caracter.
$ Coorresponde con
c patroness al final de una
u cadena. Por ejemplo o, $hola,
coorresponderaa con la cadeena hola solo
o cuando se encuentre al final de unaa
caadena. Esto corresponde
c era si decimo
os hola, pero no sera asi ssi decimos ho
ola?.
^ Co
orresponde con
c un patro on al inicio de
e una cadenaa. Similar a $ $. Cuando se
e usan
co
orchetes([]), ^ significa ‘n
no’. Por ejemmplo [^aeiou]] siginifica “ccorresponde con
cu
ualquier caraacter que no se encuentrre en la lista””
{} Uttilizado paraa especificar una cierta caantidad de caaracteres. Po

or ejemplo
ho
ola{2} hara match
m con la cadena hello ohello. aye{2
2} correspondera con ayeeaye.
[] Uttilizado paraa establecer cualquiera

c de un grupo de d caracteress. Por ejemp plo,
[aaeiou] corresspondera con n cualquiera de las letrass a,e,i,o,u. Taambien se puuede
uttilizar el guió
ón para estab
blecer rangos. [az] correespondera co on cualquier letra
enn miniscula, de la a a la z.
() Uttilizado paraa agrupar cad

denas. Similaar utilizar parrentesis paraa cambiar el
orrden de preccedencia en operaciones
o .
| Siginifica un o lógico. (holaa)|(HOLA) sigginifca que puede

p coincidir con con
cu
ualquiera de las cadenas hola or HOLLA."
* Cooncuerda con ninguna o mas ocurren ncias. h*ola significa

s quee “concuerdaa con
ceero o mas occurrencias dee la letra h, seguida por laas letras ola.."
+ Cooncuerda con una o más ocurrenciass. h+ola conccuerda con hola y hhhholla,
peero no con ola.
o
? Co
oncuerda con cero o unaa ocurrencia h?ola concu
uerda con olaa y hola, perro no
hh
hola.
\ Caaracter de esscape. Cuand do cualquiera de los caraacteres especciales vistos

an nteriormentee, estan preccedidos por un
u backslash h, estos se co
omparan
litteralmente. Por
P ejemplo,, h\*ola encaaja con la cad dena h*ola p pero no con
h\\\\ola u hhhoola. Adicionaalmente, cierrtos caracterres tienen siggnificado esp
pecial
si estan precedidos por un n backslash.
?

F
Ejem
mplo 1
<html>
>
<head>
>
<s
script languag
ge="C#" runat=server>
ateBtn Click(Object Sender

void Valida r, EventArgs E)
E {
if (Page
e.IsValid == true) {
utput.Text = "Page is Vali
lblOu id!";
}
else {
lblOu
utput.Text = "Some of the required fiel
lds are empty"
";
}
}
</s
script>
</head
d>
<body>
>
font face="Verdana">Simple RequiredFiel

<h3><f ld Validator Sample</font><
S </h3>
<form runat="server">
<t
table bgcolor=
="#eeeeee" cellpadding=10>
>
<t
tr valign="top
p">
<td colspan=3>
ut" Text="Fill
<asp:Label ID="lblOutpu l in the requi
ired fields be
elow" ForeColo
or="red" Font
t
="Verdana" Fon
Names= nt Size="10" runat=server /><br>
</td>
</
/tr>
tr>
<t
<td colspan=3>
<font face=Ve
erdana size=2><b>Credit Ca
ard Informatio
on</b></font>
</td>
</
/tr>
<t
tr>
ght>
<td align=rig
<font face=
=Verdana size=2>Card Type:</font>
</td>
<td>
ButtonList id
<ASP:RadioB d=RadioButtonL
List1 RepeatLa
ayout="Flow" runat=server>
r
istItem>MasterCard</asp:Li
<asp:Li istItem>
istItem>Visa<
<asp:Li </asp:ListItem
m>
oButtonList>
</ASP:Radio
</td>
?

F
ddle rowspan=1>
<td align=mid
<asp:Requir
redFieldValid
dator id="Requ
uiredFieldVali
idator1"
Control
lToValidate="RadioButtonLi
Display
y="Static"
ist1"
Initial
lValue="" Wid
dth="100%" run
nat=server>
*
iredFieldValidator>
</asp:Requi
</td>
</
/tr>
<t
tr>
<td align=rig
ght>
<font face=
=Verdana size=2>Card Numbe
er:</font>
</td>
<td>
ox id=TextBox
<ASP:TextBo x1 runat=serve
er />
</td>
<td>
<asp:Requir
redFieldValid
dator id="Requ
uiredFieldVali
idator2"
Control
lToValidate="TextBox1"
Display
y="Static"
Width="100%" runat=
=server>
*
iredFieldValidator>
</asp:Requi
</td>
</
/tr>
<t
tr>
<td align=rigght>
<font face==Verdana size=2>Expiration
n Date:</font>
>
</td>
<td>
<ASP:DropDoownList id=Dr
ropDownList1 runat=server>
r
istItem></asp
<asp:Li p:ListItem>
istItem >06/00</asp:ListIt
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
</ASP:DropDDownList>
</td>
<td>
<asp:RequirredFieldValid
dator id="Requ
uiredFieldVali
idator3"
ControlTo
oValidate="Dr
ropDownList1"
Display="Static"
InitialVa
alue="" Width
h="100%" runat
t=server>
*
</asp:RequiiredFieldValidator>
</td>
<td>
</
/tr>
<t
tr>
<td></td>
<td>
n id=Button1 text="Validat
<ASP:Button te" OnClick="V
ValidateBtn_Cl
lick" runat=se
erver />
</td>
<td></td>
</
/tr>
</
/table>
</form
m>
</body
y>
</html
l>
Ejem
mplo 2 (V
Validació
ón del lad
do del Cliiente)
<%@ Pa
age ClientTarg
get=UpLevel %>
<html>
>
<head>
>
<s
script languag
?

F
void Page Load()

L {
if (!IsPostBack) {
// Validate intially to forc
ce *s to appea
ar before the first round t
trip

Validate();
}
}
void Valida
r, EventArgs E)
E {
if (Page
e.IsValid == true) {
lblOu
id!";
}
else {
lblOu
utput.Text = "Some of the required fiel
lds are empty"
";
}
}
</s
script>
</head
d>
<body>
>
<h3><f
font face="Verdana">Client Side Require
edFieldValidat
tor Sample</fo
ont></h3>
<t
table bgcolor=
>
<t
tr valign="top
p">
<td colspan=3>
ut" Name="lblO
<asp:Label ID="lblOutpu Output" Text="
"Fill in the required
r field
ds below"
ForeCo
olor="red" Fon
nt Names="Ver
rdana" Font Si
ize="10" runat
t=server /><br
r>
</td>
</
/tr>
<t
tr>
<td colspan=3>
erdana size=2><b>Credit Ca
<font face=Ve ard Informatio
on</b></font>
</td>
</
/tr>
<t
tr>
<td align=rig
ght>
<font face=
=Verdana size=2>Card Type:</font>
</td>
<td>
ButtonList id
<ASP:RadioB d=RadioButtonL
List1 RepeatLa
ayout="Flow" onclick="Clien
o ntOnChange();"
runat=
=server>
istItem>MasterCard</asp:Li
<asp:Li istItem>
istItem>Visa<
<asp:Li </asp:ListItem
m>
oButtonList>
</ASP:Radio
</td>
<td align=mid
ddle rowspan=1>
<asp:Requir
redFieldValid
dator id="Requ
uiredFieldVali
idator1" runat
t="server"
Control
lToValidate="RadioButtonLi
ist1"
ErrorMe
essage="*"
Display
y="Static"
Initial
lValue=""
Width="100%">
iredFieldValidator>
</asp:Requi
</td>
</
/tr>
<t
tr>
<td align=rig
ght>
=Verdana size=2>Card Numbe
<font face= er:</font>
</td>
<td>
ox id=TextBox
<ASP:TextBo x1 onchange="C
ClientOnChange
e();" runat=se
erver />
</td>
<td>
redFieldValid
<asp:Requir dator id="Requ
uiredFieldVali
idator2" runat
t="server"
Control
ErrorMe
essage="*"
Display
y="Static"
Width="100%">
iredFieldValidator>
</asp:Requi
</td>
</
/tr>
<t
tr>
ght>
<td align=rig
=Verdana size=2>Expiration
<font face= n Date:</font>
>
</td>
<td>
ownList id=Dr
<ASP:DropDo ropDownList1 onchange="Clie
o entOnChange();
;" runat=serve
er>
istItem></asp
<asp:Li p:ListItem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
?

F
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>

<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
<asp:Li tem>
</ASP:DropDDownList>
</td>
<td>
<asp:RequirredFieldValid
dator id="Requ
uiredFieldVali
idator3" runat
t="server"
ControlTo
oValidate="Dr
ropDownList1"
ErrorMess
sage="*"
Display="Static"
InitialVa
alue=""
Width="100%">
</asp:RequiiredFieldValidator>
</td>
<td>
</
/tr>
<t
tr>
<td></td>
<td>
n id=Button1 text="Validat
<ASP:Button te" OnClick="V
ValidateBtn_Cl
lick" runat="s
server" />
</td>
<td></td>
</
/tr>
</
/table>
</form
m>
<scrip
pt language=ja
avascript>
<!
fu
unction Client
tOnChange() {
if (typeof(Page Validators) == "undef
fined")
return;
document.all["lblOutput"].innerText = Page IsValid
d ? "Page is Valid!"
V : "Som
me of the req
quired
fields
s are empty";
}
// >
</scri
ipt>
</body
y>
</html
l>
Ejem
mplo 3
<%@ Pa
age clienttarg
get=downlevel %>
<html>
>
<head>
>
<s
script languag
ormat SelectedIndexChanged
void ListFo d(Object Sende
er, EventArgs E ) {
// Chan
nge display mode
m of the va
alidator summa
ary when a new
w option
// is selected from
m the "ListFor
rmat" dropdown
nlist
valSum.DisplayMode = (Validation
nSummaryDispla
ayMode) ListFo
ormat.Selected
dIndex;
}
</s
script>
d>
</head
<body>
>
<h3><f
font face="Verdana">ValidationSummary Sample</font><
S </h3>
<table
e cellpadding=
=10>
<t
tr>
<td>
<table bgcolor="#eeeeee" cellpad
dding=10>
<tr>
?

F
<td colspan=3>
<font
t face=Verdana size=2><b>C
Credit Card In
nformation</b>
></font>
</td>
</tr>
>
<tr>
<td align=right>
a
<fo
ont face=Verd
dana size=2>Ca
ard Type:</fon
nt>
</td>
>
<td>
SP:RadioButto
<AS onList id=Radi
ioButtonList1 RepeatLayout=
="Flow" runat=
=server>
tem>MasterCard
<asp:ListIt d</asp:ListIte
em>
tem>Visa</asp:ListItem>
<asp:ListIt
ASP:RadioButt
</A tonList>
</td>
>
<td align=middle
a rowspan=1>
<as
sp:RequiredFieldValidator id="RequiredF
FieldValidator
r1"
ControlToVa
alidate="Radio
oButtonList1"
ErrorMessag
ge="Card Type. "
Display="St
tatic"
InitialValu
ue="" Width="1
100%" runat=se
erver>
*
asp:RequiredF
</a FieldValidator
r>
</td>
>
</tr>
<tr>
<td align=right>
a
<fo
ont face=Verd
dana size=2>Ca
ard Number:</f
font>
</td>
>
<td>
SP:TextBox id
<AS d=TextBox1 run
nat=server />
</td>
>
<td>
<as FieldValidator
r2"
ControlToVa
alidate="TextB
Box1"
ErrorMessag
ge="Card Numbe
er. "
Display="St
tatic"
Width="100%" runat=serve
er>
*
asp:RequiredF
</a FieldValidator
r>
</td>
>
</tr>
<tr>
<td align=right>
a
<fo
ont face=Verd
dana size=2>Ex
xpiration Date
e:</font>
</td>
>
<td>
SP:DropDownList id=DropDow
<AS wnList1 runat=
=server>
tem></asp:List
<asp:ListIt tItem>
tem >06/00</as
<asp:ListIt sp:ListItem>
tem >07/00</as
tem >08/00</as
tem >09/00</as
tem >10/00</as
tem >11/00</as
tem >01/01</as
tem >02/01</as
tem >03/01</as
tem >04/01</as
tem >05/01</as
tem >06/01</as
tem >07/01</as
tem >08/01</as
tem >09/01</as
tem >10/01</as
tem >11/01</as
tem >12/01</as
ASP:DropDownL
</A List>
</td>
>
<td>
<as FieldValidator
r3"
C
ControlToVali wnList1"
date="DropDow
E
ErrorMessage=
="Expiration Date.
D "
D
Display="Stat
tic"
InitialValue=
=""
W
Width="100%"
r
runat=server>
>
*
asp:RequiredF
</a FieldValidator
r>
</td>
>
<td>
</tr>
<tr>
<td><
</td>
<td>
SP:Button id=
<AS =Button1 text=
="Validate" ru
unat=server />
>
</td>
>
<td><
</td>
?

F
</tr>
</table
e>
</td>
<td valign=
=top>
!
<table cellpadding=20><tr><td>
alidationSumm
<asp:Va mary ID="valSu
um" runat="ser
rver"
Hea
aderText="Youu must enter a value in the
e following fi
ields:"
Fon
nt Names="verrdana"
Fon
nt Size="12"
/>
</td></tr></table>
</td>
</
/tr>
</tabl
le>
<font face="verdana
a" size=" 1">Select the ty
ype of validat
tion summary display
d you wish: </font>
DropDownList id="ListForma
<asp:D i at" AutoPostBa
ack=true
OnSele
ectedIndexChan
nged="ListFor
rmat_SelectedI
IndexChanged" runat=server >
asp:ListItem>L
<a List</asp:ListItem>
asp:ListItem selected>Bull
<a s eted List</as
sp:ListItem>
asp:ListItem>S
<a Single Paragr
raph</asp:List
tItem>
</asp:DropDownList>
>
</form
m>
</body
y>
</html
l>
Ejem
mplo 4
<%@ Pa
age clienttarg
get=downlevel %>
<html>
>
<head>
>
<s
script languag
ge="C#" runat="server">
n1 OnSubmit(Object sender, EventArgs e) {

void Button
if (Pag
ge.IsValid) {
Output.Text = "Result: Val
lblO lid!";
}
else {
lblO
Output.Text = "Result: Not
t valid!";
}
}
void lstOpe
erator SelectedIndexChange
ed(Object send
der, EventArgs
s e) {
comp1.O
Operator = (V
ValidationComp
pareOperator) lstOperator.S
SelectedIndex;
comp1.V
Validate();
}
</s
script>
</head
d>
<body>
>
<h
h3><font face=
="Verdana">CompareValidato
or Example</fo
ont></h3>
<p
p>Type a value
e in each textbox, select a comparison operator, the
en click "Validate" to test.</p>
<f
form runat=server>
<table bgcolo
or="#eeeeee" cellpadding=1
10>
?

F
<tr valign="t
top">
<td>
ont face="Verdana">String 1:</font></h5
<h5><fo
extBox id="tx
<asp:Te xtComp" runat=
5>
="server"></as
sp:TextBox>
"
</td>
<td>
ont face="Verdana">Compari
<h5><fo ison Operator:
:</font></h5>
istBox id="lstOperator" On
<asp:Li nSelectedIndex
xChanged="lstO
Operator_Selec
ctedIndexChan
nged"
="server">
runat=
tem Selected="
<asp:ListIt "true" Value="
"Equal" >Equal
l</asp:ListIte
em>
tem Value="Not
<asp:ListIt tEqual" >NotEq
qual</asp:List
tItem>
tem Value="Gre
<asp:ListIt eaterThan" >Gr
reaterThan</as
sp:ListItem>
tem Value="Gre
<asp:ListIt eaterThanEqual
l" >GreaterTha
anEqual</asp:L
ListItem>
tem Value="Les
<asp:ListIt ssThan" >LessT
Than</asp:List
tItem>
tem Value="Les
<asp:ListIt ssThanEqual" >LessThanEqual
> l</asp:ListIte
em>
ListBox>
</asp:L
</td>
<td>
<h5><fo
ont face="Verdana">String 2:</font></h5
5>
extBox id="tx
<asp:Te xtCompTo" runa
at="server"></
/asp:TextBox><
<p>
utton runat=server Text="V
<asp:Bu Validate" ID="
"Button1" oncl
lick="Button1_
_OnSubmit" />
>
</td>
</tr>
</table>
Validator id=
<asp:CompareV ="comp1" Contr
rolToValidate=
="txtComp" Con
ntrolToCompare
e = "txtCompTo"
Type="
"String" runat
t="server"/>
<br>
D="lblOutput" Font Names="

<asp:Label ID "verdana" Font
t Size="10pt" runat="server
r"/>
/form>
</
</body
y>
</html
l>
Ejerrcicio 5
<%@ Pa
age clienttarg
get=downlevel %>
<html>
>
<head>
>
<s
script languag
ge="C#" runat="server">
n1 Click(Object sender, Ev
void Button ventArgs e) {
rangeValInteger.Validate();
if (rang
geValInteger.IsValid) {
Output1.Text = "Result: Va
lblO alid!";
} else {
lblO
Output1.Text = "Result: No
ot Valid!";
}
rangeValDate.Validate();
if (rang
geValDate.IsV
Valid) {
lblO
alid!";
} else {
lblO
ot Valid!";
}
rangeValString.Valid
date();
?

F
geValString.IsValid) {
if (rang
lblO alid!";
} else {
lblO
ot Valid!";
)
}
e.IsValid) {
if (Page
lblOu
utput.Text = "Result: Page
e Valid!";
} else {
lblOu
utput.Text = "Result: Page
e Not valid!";
;
}
}
</s
script>
</head
d>
<body>
>
<h
h3><font face=
="Verdana">RangeValidator Sample</font>
></h3>
<b
br /><br />
<f
form runat="se
erver">
<table bgcoloor="#eeeeee" cellpadding=1

10>
<tr valign="ttop">
<td>
<h5><foont face="Verdana">Value to
t Check:</fonnt></h5>
<asp:TeextBox id="tx
xtComp1" runat
t="server"/>
</td>
<td>
<h5><foont face="Verdana">Data Ty
ype: Integer Min(1),
M Max(10
0)</font></h5>
>
</td>
<td>
Label id="lblOutput1" Font
<asp:L t Names="verda
ana" Font Size
e="10pt" runat
t="server" />
>
</td>
</tr>
<tr valign="ttop">
<td>
xtComp2" runat
t="server"/>
</td>
<td>
ype: Date Min(
(2000/1/1), Ma
ax(2001/1/1)</font></h5>
</td>
<td>
ana" Font Size
e="10pt" runat
t="server" />
>
</td>
</tr>
<tr valign="ttop">
<td>
xtComp3" runat
t="server"/>
</td>
<td>
ype: String Mi
in(Aardvark), Max(Zebra)</font></h5>
</td>
<td>
ana" Font Size
e="10pt" runat
t="server" />
>
</td>
</tr>
<
</table>
<
<asp:Button Te
ext="Validate" ID="Button1
1" onclick="Bu
utton1_Click" runat="server
r" />
<asp:RangeVali
< idator
id="rangeVa
alInteger"
Type="Integ
ger"
ControlToVa
alidate="txtC
Comp1"
MaximumValu
ue="10"
MinimumValu
ue="1"
runat="serv
ver"/>
<asp:RangeVali
< idator
id="rangeVa
alDate"
Type="Date"
ControlToVa
alidate="txtC
Comp2"
MaximumValu
ue="2001/1/1"
MinimumValu
ue="2000/1/1"
runat="serv
ver"/>
<asp:RangeVali
< idator
id="rangeVa
alString"
Type="Strin
ng"
ControlToVa
alidate="txtC
Comp3"
MaximumValu
ue="Zebra"
MinimumValu
ue="Aardvark"
runat="serv
ver"/>
<
<br>
?

F
<
<asp:Label id=
="lblOutput" Font Names="v
verdana" Font Size="10pt" runat="server
r " />
</
/form>
*
y>
</body
</html
l>
Ejerrcicio 6
<html>
>
<head>
>
<s
script languag
ateBtn Click(Object Src, EventArgs

void Valida E E) {
if (Page
e.IsValid) {
lblOu
id!";
}
else {
lblOu
utput.Text = "Page is InVa
alid! : (";
}
}
</s
script>
</head
d>
<body>
>
<h3><f
font face="Verdana">Simple RegularExpre
essionValidato
or Sample</fon
nt></h3>
<br />
><br />
<t
table bgcolor=
>
<t
tr valign="top
p">
<td colspan=3>
ut" Text="Ente
<asp:Label ID="lblOutpu er a 5 digit zip
z code" Font
t Names="Verda
ana" Font
"10pt" runat="server"/>
Size="
</td>
</
/tr>
<t
tr>
<td colspan=3>
erdana size=2><b>Personal Information</
<font face=Ve /b></font>
</td>
</
/tr>
<t
tr>
<td align=rig
ght>
<font face=
=Verdana size=2>Zip Code:<
</font>
</td>
<td>
ox id=TextBox
er />
</td>
<td>
arExpressionV
<asp:Regula Validator id="
"RegularExpres
ssionValidator
r1" runat="ser
rver"
Control
Validat
tionExpressio
on="\d{5}"
?

F
Display
y="Static"
Font Na
ames="verdana
a"
Font Si
ize="10pt">
Zip code must be 5 numeric di
igits

</asp:RegullarExpression
nValidator>
</td>
</
/tr>
<t
tr>
<td></td>
<td>
n text="Valid
<ASP:Button date" OnClick=
="ValidateBtn_
_Click" runat=
=server />
</td>
<td></td>
</
/tr>
</
/table>
</form
m>
</body
y>
</html
l>
Ejerrcicio 7
<%@ Pa
age clienttarg
get="downlevel" %>
>
<html>
<head>
>
<s ge="C#" runat=server>

script languag

void Valida r, EventArgs E)
E {
if (Page
e.IsValid) {
lblOut
tput.Text = "Page is Valid
d!";
}
else {
lblOut
tput.Text = "Page is Not Valid!
V : (";
}
}
</s
script>
</head
d>
<body>
>
<h3><f
font face="Verdana">More Regular
R Expres
ssion Examples
s</font></h3>
<br />
><br />
<t
table cellpadd
ding=10>
?

F
<t
tr valign="top
p">
<td colspan=3>
"10pt" runat="server" />

Size="
ut" Text="Ente
<asp:Label ID="lblOutpu er values for each field" Font
F Names="Ve
erdana" Font
</td>
/tr>
</
<t
tr>
<td colspan=3>
<font face=Ve
erdana size=2><b>Personal Information</
/b></font>
</td>
</
/tr>
<t
tr>
<td align=rig
ght>
<font face=
=Verdana size=2>Email:</fo
ont>
</td>
<td>
ox id=TextBox
er />
</td>
<td>
redFieldValid
uiredFieldVali
idator1" runat
t="server"
Control
Display
y="Dynamic"
Font Na
ames="Verdana
a" Font Size="
"10pt"
>
*
iredFieldValidator>
</asp:Requi
<asp:Regula
arExpressionV
Validator id="
"RegularExpres
ssionValidator
r1" runat="ser
rver"
Control
Validat
tionExpressio
on="^[\w ]+@[\
\w ]+\.(com|ne
et|org|edu|mil
l)$"
Display
y="Static"
Font Na
ames="verdana
a" Font Size="
"10pt">
Ple
ease enter a valid e mail address
larExpression
</asp:Regul nValidator>
</td>
/tr>
</
<t
tr>
<td align=rig
ght>
<font face=
=Verdana size=2>Phone:</fo
ont>
</td>
<td>
ox id=TextBox
er />
</td>
<td>
redFieldValid
uiredFieldVali
idator2" runat
t="server"
Control
Display
y="Dynamic"
Font Na
ames="Verdana
a" Font Size="
"10pt">
*
iredFieldValidator>
</asp:Requi
<asp:Regula
arExpressionV
Validator id="
"RegularExpres
ssionValidator
r2"
Control
Validat
tionExpressio
on="(^x\s*[0 9]{5}$)|(^($[
9 [1 9][0 9]{2}\
$\s)?[1 9][0 9]{2} [0
9]{4}(\sx\s*[0 9]{5
5})?$)"
Display
y="Static"
Font Na
ames="verdana
a" Font Size="
"10pt"
runat=s
server>
Must
t be in form: (XXX) XXX XX
XXX
larExpression
</td>
</
/tr>
<t
tr>
<td align=rig
ght>
=Verdana size=2>Zip Code:<
<font face= </font>
</td>
<td>
ox id=TextBox
er />
</td>
<td>
redFieldValid
uiredFieldVali
idator3" runat
t="server"
Control
Display
y="Dynamic"
Font Na
ames="Verdana
a" Font Size="
"10pt">
*
iredFieldValidator>
</asp:Requi
<asp:Regula
arExpressionV
Validator id="
"RegularExpres
ssionValidator
r3"
Control
Validat
tionExpressio
on="^\d{5}$"
Display
y="Static"
Width="100%"
Font Na
ames="verdana
a" Font Size="
"10pt"
runat=s
server>
Zip code must be 5 numeric di
igits
larExpression
</td>
</
/tr>
?

F
<t
tr>
<td></td>
<td>
n text="Valid
<ASP:Button date" OnClick=
="ValidateBtn_
_Click" runat=
=server />

</td>
<td></td>
/tr>
</
</
/table>
</form
m>
y>
</body
</html
l>
Ejerrcicio 8
<html>
>
<head>
>
<s
script languag
ateBtn OnClick(object send

void Valida der, EventArgs
s e) {
if (Pag
ge.IsValid) {
Output.Text = "Page is val
lblO lid!";
}
else {
lblO
Output.Text = "Page is not
t valid! : (";
;
}
}
vo
oid ServerValidate (object source, Serv
verValidateEve
entArgs value)
) {
int num;
// even
n number?
if (int.Try
yParse(value.Value, out nu
um) ) {
value.IsValid = (num % 2 == 0);
}
else {
value.IsValid = false;
}
}
</s
script>
</head
d>
<body>
>
font face="Verdana">Custom
<h3><f mValidator Exa
ample</font></
/h3>
<br />
><br />
<a
asp:Label id=l
lblOutput run
nat="server"
Text="Enter
r an even num
mber:"
Font Names=
="Verdana"
Font Size="10pt" /><br>
>
<p
p>
asp:TextBox id
<a d=Text1 runat
t="server" />
asp:RequiredFi
<a ieldValidator
r id="Required
dFieldValidato
or1" runat="se
erver"
?

F
ControlToVa
alidate="Text
t1"
ErrorMessag
ge="Please en
nter a number"
"
Display="Dy
ynamic"
Font Names=
="verdana" Fo
ont Size="10pt
t">

</ FieldValidato
/asp:RequiredF or>
asp:CustomVali
<a idator id="Cu
ustomValidator
r1" runat="ser
rver"
ControlToVa
alidate="Text
t1"
ClientValid
dationFunctio
on="ClientVali
idate"
OnServerVal
lidate="ServerValidate"
Display="St
tatic"
Font Names=
="verdana" Fo
ont Size="10pt
t">
Not an even
e number!
lidator>
/asp:CustomVal
</
<p
p>
asp:Button tex
<a xt="Validate" onclick="Val
lidateBtn_OnCl
lick" runat="s
server" />
<s
script languag
ge="javascript">
function ClientValidate(source, argum

ments)
{
// even number?
n
if (argum
ments.Value%2 == 0)
nts.IsValid = true;
argumen
else
nts.IsValid = false;
argumen
}
</
/script>
</form
m>
</body
y>
</html
l>
?

F
Ejem
mplo 9

Valid
dationGrou
up cs.aspx
<%@ Pa
age Language="C#" %>
<tit n Groups</title>
tle>Validation
</head
d>
<scrip
pt language="C
C#" runat="server">
void
d Button1 Click(object sender, EventArg
gs e)
{
La
abel1.Text = "Hello " + TextBox1.Text + ", you selec
cted " + Calen
ndar1.Selected
dDate;
}
</scri
ipt>
<body>
>
<for
rm id="form1" runat="server">
<d
div>
<h3>ValidatioonGroup (Search)</h3>
Enter Search Term:
<asp:TextBox ID="SearchTerm" runat="seerver" />
<asp:Button ID="Button2" runat="serverr" Text="Searc
ch" PostBackUr
rl="Search_cs.aspx"
Valida
ationGroup="Seearch" />
<asp:RequireddFieldValidat
tor ID="Requir
redFieldValida
ator1" SetFocu
usOnError="tru
ue" Runat="server"
ErrorM
Message="Searcch is empty!!"
lToValidate="SearchTerm" ValidationGrou
Control V up="Search" />
>
<br /><br />
<hr />
<br />
<h3>Validatio
onGroup (Name)</h3>
<table cellpaadding="5">
<tr>
<td valig
gn="top">
Enter name:</td>
n
?

F
<td valig
gn="top">
extBox ID="TextBox1" runat
<asp:Te t="server" Wid
dth="247px" He
eight="22px" //>
ErrorM
<asp:Re
equiredFieldV
Message="Name is empty!!"
Validator ID="
"RequiredField
dValidator2" Runat="server
R "
ControlToValidate="T
TextBox1" Vali
idationGroup="
"Name" />
</td>
</tr>
<tr>
<td valig
gn="top">
Enter meeting
m time:
</td>
gn="top">
<td valig
alendar ID="C
<asp:Ca Calendar1" run
nat="server" />
/
<br />
utton ID="But
<asp:Bu tton1" runat="
"server" Text=
="Postback to Same Page"
OnClic
ck="Button1_Cllick" Validat
tionGroup="Nam
me" />
<br />
</td>
</tr>
</table>
<br />
D="Label1" ru
<asp:Label ID unat="server" Text="Label" Font Bold="tr
rue" />
orm>
</fo
</body
y>
</html
l>
Search cs.aspx
<%@ Pa
<!DOCT
TYPE html PUBL
0 Transitional
l//EN"
nsitional.dtd"
">
<tit
tle>Search Pag
ge</title>
</head
d>
<scrip C#" runat="server">
pt language="C
void bject sender, EventArgs e)

d Page Load(ob
{
Te
extBox SearchT
Term;
Se TextBox)Page.PreviousPage.FindControl("
earchTerm = (T "SearchTerm");
;
abel1.Text = SearchTerm.Text;
La
}
</scri
ipt>
<body>
>
rm id="form1" runat="server">
<for
<d
div>
<span style="font size: 32pt; color: #ff0066">Searc
# ch Page (Searc
ch cs.aspx)</span><br />
</
/div>
<d
div>
<hr />
</
/div>
<d
div>
<span style="font size: 16pt">You sear
rched for: </s
span>
D="Label1" ru
<asp:Label ID unat="server" Text="Label" Font Size="16
6pt" ForeColor
r="#FF0066"
c="True" /><span style="fo
Font Italic ont size: 16pt
t"> </span>
</
/div>
<s
span style="fo
ont size: 32pt"></span>
<p
p>
<br />
</
/p>
</fo
orm>
</body
y>
</html
l>
?

F
Ejem
mplo 10
!
<%@ Pa
<head>
>
<tit orm Validation Sample</tit
tle>Sign In Fo tle>
</head
d>
<body>
>
<div
v>
<h
h3>
<font face="V
Verdana">Sign In Form Vali
idation Sample
e</font></h3>
form action="v
<f validationform cs.aspx" me
ethod="post" runat="server"
r ">
<hr width="600" size="1" noshade>
<center>
ationSummary ID="valSum" runat="server"
<asp:Valida r " HeaderText="
"You must ente
er a valid va
alue in
the fo
ollowing field
ds:"
DisplayMo
ode="SinglePa
aragraph" Font
t Names="verda
ana" Font Size
e="12" />
<br />
<br />
<! sign in >
<table bord
der="0" width="600">
<tr>
<td colspan="3">
<table border="0" cellpadding=
="0" cellspaci
ing="0" width=
="100%">
<tr>
<
<td>
<font face="geneva,arial
l" size=" 1"><
<b>Sign In Inf
formation</b><
</font>
<
</td>
</t
tr>
</tab
ble>
</td>
</tr>
<tr>
?

F
<td align="right">
<font
t face="Arial" size="2">Em
mail Address:<
</font>
</td>
<td>
"
<asp:TextBox ID="email" Width=
="200px" MaxLe
ength="60" run
nat="server" /
/>
</td>
<td>
<asp:RequiredFieldValidator ID
D="emailReqVal
l" ControlToVa
alidate="email
l"
ErrorM
Message="Emaill. "
Dis
splay="Dynamic" Font Names
s="Verdana" Fo
ont Size="12" runat="server
r">
*
p:RequiredFieldValidator>
</asp
<asp:RegularExpressionValidato
or ID="emailRe
egexVal" Contr
rolToValidate=
="email"
ErrorM
Message="Emaill. "
Dis
splay="Static
c" ValidationE
Expression="^[
[\w ]+@[\w ]+\
\.(com|net|org
g|edu|mil)$"
Fon
nt Names="Arial" Font Size
e="11" runat="
"server">
Not a valid
v e mail address. Musst follow emai
il@host.domain
n.
p:RegularExpr
</asp ressionValidat
tor>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Pa
assword:</font
t>
</td>
<td>
<asp:TextBox ID="passwd" TextM
Mode="Password
d" MaxLength="
"20" runat="se
erver" />
</td>
<td>
D="passwdReqVa
al" ControlToV
Validate="pass
swd"
Message="Passw
ErrorM word. "
Dis
s="Verdana" Fo
r">
*
</asp
<asp:RegularExpressionValidato
or ID="passwdR
RegexBal" Cont
trolToValidate
e="passwd"
ErrorM
Message="Passwword. "
Val
lidationExpression=".*[!@#
#$%^&*+;:].*" Display="Stat
tic" Font Name
es="Arial" Font
"11"
Size="
Wid
dth="100%" ru
unat="server">
>
Passw
word must include one of these
t (!@#$%^&
&*+;:)
p:RegularExpr
</asp ressionValidat
tor>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Re
e enter Passwo
ord:</font>
</td>
<td>
<asp:TextBox ID="passwd2" Text
tMode="Passwor
rd" MaxLength=
="20" runat="s
server" />
</td>
<td>
D="passwd2ReqV
Val" ControlTo
oValidate="pas
sswd2"
ErrorM
Message="Re ennter Password
d. "
Dis s="Verdana" Fo
r">
*
</asp
<asp:CompareValid
dator ID="Comp
pareValidator1
1" ControlToVa
alidate="passw
wd2"
Contro
olToCompare="ppasswd"
Err
rorMessage="R
Re enter Passw
word. " Displa
ay="Static" Fo
ont Names="Ari
ial" Font Size="11"
run
nat="server">
>
Password fields don't match
p:CompareValidator>
</asp
</td>
</tr>
<tr>
<td colspan="3">
&nbsp
p;</td>
</tr>
<! personalization information >
<tr>
<td colspan="3">
<table border="0" cellpadding=
="0" cellspaci
ing="0" width=
="100%">
<tr>
<
<td>
<font face="geneva,arial
l" size=" 1"><
<b>Personal In
nformation</b>
></font>
<
</td>
</t
tr>
</tab
ble>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Fi
irst Name:</fo
ont>
</td>
<td>
<asp:TextBox ID="fn" MaxLength
h="20" Width="
"200px" runat=
="server" />
</td>
<td>
</td>
?

F
</tr>
<tr>
<td align="right">
t face="Arial" size="2">La
<font ast Name:</fon
nt>
)
</td>
<td>
<asp:TextBox ID="ln" MaxLengthh="40" Width="
"200px" runat=
="server" />
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
t face="Arial" size="2">Ad
<font ddress:</font>
>
</td>
<td>
<asp:TextBox ID="address" Widtth="200px" run
nat="server" />
/
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Sttate:</font>
</td>
<td>
<asp:TextBox ID="state" Width=="30px" MaxLen
ngth="2" runat
t="server" /> <font
face="Arial" size="2">Zip Coode:</font>&nb
bsp;
<asp:TextBox ID="zip" Width="660px" MaxLengt
th="5" runat="
"server" />
</td>
<td>
<asp:RegularExpressionValidatoor ID="Regular
rExpressionVal
lidator1"
Contro
olToValidate="zip"
Err
rorMessage="Zip Code. " VaalidationExpre
ession="^\d{5}
}$" Display="SStatic" Font
Names=
="Arial"
Fon
nt Size="11" runat="serverr">
Zip codde must be 5 numeric digitts
p:RegularExpr
</asp ressionValidattor>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Phhone:</font>
</td>
<td>
<asp:TextBox ID="phone" MaxLenngth="20" runa
at="server" />
>
</td>
<td>
<asp:RequiredFieldValidator IDD="phoneReqVal
l" ControlToVa
alidate="phonee"
ErrorM
Message="Phonee. "
Dis
splay="Dynamic" Font Namess="Verdana" Fo
ont Size="12" runat="serverr">
*
</asp
<asp:RegularExpressionValidatoor ID="phoneRe
egexVal" Contr
rolToValidate=="phone"
Message="Phone
ErrorM e. "
Val
lidationExpression="(^x\s**[0 9]{5}$)|(^
^($[1 9][0 9]
]{2}$\s)?[1 9][0 9]{2} [0
9]{4}(\sx\s*[0 9]{55})?$)"
Dis
splay="Static
c" Font Names=="Arial" Font Size="11" run
nat="server">
Must bee in form: (X
XXX) XXX XXXX
p:RegularExpr
</asp ressionValidattor>
</td>
</tr>
<tr>
<td colspan="3">
&nbsp
p;</td>
</tr>
<! Cred
dit Card Info >
<tr>
<td colspan="3">
<font
t face="Arial" size="2"><bb>Credit Card Information</
/b></font>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Caard Type:</fon
nt>
</td>
<td>
<asp:RadioButtonL
List ID="ccTyppe" Font Names
s="Arial" Repe
eatLayout="Floow" runat="server">
sp:ListItem>M
<as MasterCard</assp:ListItem>
sp:ListItem>V
<as Visa</asp:ListtItem>
p:RadioButton
</asp nList>
</td>
<td>
<asp:RequiredFieldValidator IDD="ccTypeReqVa
al" ControlToV
Validate="ccTyype"
ErrorM
Message="Card Type. "
splay="Static
Dis c" InitialValuue="" Font Nam
mes="Verdana" Font Size="122" runat="ser
rver">
*
</asp
?

F
</td>
</tr>
<tr>
<td align="right">
*
<font
t face="Arial" size="2">Ca
ard Number:</f
font>
</td>
<td>
<asp:TextBox ID="ccNum" runat=
="server" />
</td>
<td>
D="ccNumReqVal
l" ControlToVa
alidate="ccNum
m"
Message="Card Number. "
ErrorM
Dis
s="Verdana" Fo
r">
*
</asp
<asp:CustomValida
ator ID="ccNum
mCustVal" Cont
trolToValidate
e="ccNum" Erro
orMessage="Ca
ard
r. "
Number
ientValidatio
Cli onFunction="cc
cClientValidat
te" Display="S
Static" Font N
Names="Arial"
Fon
nt Size="11" runat="server
r">
Not a valid
v credit card number. Must containn 16 digits.
p:CustomValid
</asp dator>
</td>
</tr>
<tr>
<td align="right">
<font
t face="Arial" size="2">Ex
xpiration Date
e:</font>
</td>
<td>
t ID="expDate"
<asp:DropDownList " runat="serve
er">
sp:ListItem><
<as </asp:ListItem
m>
sp:ListItem>06/00</asp:Lis
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
<as stItem>
p:DropDownList>
</asp
</td>
<td>
D="expDateReqV
<asp:RequiredFieldValidator ID Val" ControlTo
oValidate="exp
pDate"
ErrorM
Message="Expir
ration Date. "
Dis
splay="Static
c" InitialValu
ue="" Font Nam
mes="Verdana" Font Size="12
2" runat="ser
rver">
*
</asp
</td>
</tr>
</table>
<br />
<br />
<input runa
at="server" type="submit" value="Sign In"
I />
<br />
<br />
<hr width="600" size="1" noshade="no
oshade" />
<script typ
pe="text/javascript">
function ccClientValidate(source, ar
rguments)
{
var cc = arguments.Value;
var ccSansSpace;
var i, digits, total;
// SAMPLE ONLY. Not a real worlld actual cred

dit card algo.
// Base
ed on ANSI X4.13, the LUHN
N formula (als
so known as th
he modulus 10 or mod 10
algori
ithm )
// is used
u to generate and/or va
alidate and ve uracy of some credit card
erify the accu
number
rs.
// Get the number, parse out any

y non digits, should have 16
1 left
ccSansSpace = cc.replace(/\D/g, "");
if(ccSa
ansSpace.leng
gth != 16) {
guments.IsValid = false;
arg
ret
turn; // invalid ccn
}
// Conv
vert to array
y of digits
?

F
digits = new Array(16);

for(i=0; i<16; i++)
dig
gits[i] = Num
mber(ccSansSpa
ace.charAt(i));
// Doub gits of every other number
ble & sum dig
for(i=0; i<16; i+=2) {
dig
gits[i] *= 2;
if(digits[i] > 9) digits[i
i] = 9;
}
// Sum the numbers

total = 0;
for(i=0; i<16; i++) total +=
= digits[i];
// Resu
ults
if( tot
tal % 10 == 0 ) {
guments.IsValid = true;
arg
ret
turn; // valid
v ccn
}
else {
arg
guments.IsValid = false;
ret
turn; // invalid ccn
}
}
</script>
</center>
</
/form>
</di
iv>
</body
y>
</html
l>

?
;
$

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35

? ;$

;
$

Méttodos de Navegacción
1 Desde el lado de
1. el cliente.
Opciión a)
<asp:HyperLink ID "HyperLink1" runat "s
server" Navi
igateUrl "~/
/NavigateTest2.aspx">
Goto NavigateTest2 </asp:Hyp
perLink>
Opciión b)
<inpu on1" type "button" value
ut id "Butto e "Goto Navi
igateTest2" onclick "re
eturn
on1 onclick()" />
Butto
<scri
ipt language
e "javascript" type "tex
xt/javascrip
pt">
// <!CDATA[
funct
tion Button1 onclick() {
docum on "NavigateTest2.aspx";
ment.locatio ;
}
// ]]>
</scr
ript>
2 CrossPage
2.
Un co
ontrol está configurado para
p realizar una PostBacck a una página Web difeerente.
prote
ected void Page
P Load(object sender,
, EventArgs e)
{
if (PrevviousPage null)
{
lblD
Data.Text sPage";
"No Previous
}
else
{
lblD
Data.Text
((Te
extBox)PreviousPage.Find
dControl("tx
xtData")).Te
ext;
Labe
el1.Text Request.Form["txtData"];
;
}
}
Page.PreviousPagge, Obtiene la página quee transfirió el

e control a laa página actu
ual.
Acce
ediendo a datos fuertementte tipadoss
Una de
d las activid
dades que reecurrentemente realizam mos cuando desarrollamo
d os una aplicacción
Web utilizando ASP.NET
A es la de pasar daatos entre formulario Weeb. Cuantas vveces no te ha h
ocurrrido que requuieres acced der a controlees de la página anterior y en ocasiones utilizamos los
objettos Session, Cache,
C Cookiies o el QuerryString paraa persistir loss datos entree postbacks o
entree múltiples paginas, es muy
m común esste escenario o y por esa razón desde lla versión 1.1 del
.NET Framework ya contabam mos con un sencillo mecaanismos adiccional para reeferenciar lo os
datoss de un formulario anteriior en otro actual, solo que no contaba con una implementaccion
bien definida, eraa algo asi com
mo un truco con el VIEWSTATE y aspeectos de la cclase Page.

? ;$
Pero desde ASP.N NET 2.0 han mejorado esste tipo de escenario hacciendo más eelegante su
impleementación. La clase PreviousPage nos permite acceder
a a miembros de laa clase de la
págin
na anterior permitiéndon
p nos entre otrras cosas referenciar los valores
v y propiedades de los
contrroles.
En la página inicia
al colocamoss nuestros co
ontroles los exponemos
e c
como propied
dades, ejemp
plo:
1: puublic partial class Default : System..Web.UI.Pag

ge
2: {
3:
4: public TexttBox pp Nom mbre
5: {
6: get { retturn TextBoxx1; }
7: }
8: public TexttBox pp Teleefono
9: {
10: get
g { return TextBox2; }
11:
12: }
13: protected d void Page Load(objectt sender, Eve
entArgs e)
14: {
15:
16: }
17: }
En la segunda página, justam

mente en la páágina donde
e queremos referenciar lo
os datos de una
u
na anterior, agregamos
pagin a la
a siguiente directiva:
<%@
@ PreviousPage
eType VirtualP
Path="~/Default.aspx" %>
>
Esta directiva
d noss permite esp
pecificar que deseamos leeer informacción de la pág gina anteriorr y a
través del atributo
o VirtualPath
h especificam
mos la páginaa anterior, co
on esto, ASP P.NET se enccarga
uto generar de
de au d manera tipada los con ntroles de la página anterrior en una cclase llamadaa
PrevioousPage perrmitiéndonos tener acceso o y referenciiar los miembbros de la cla
ase de la pággina
anterrior.
En la segunda página solo esccribimos el siguiente código para leerr nuestros da

atos:
1: puublic partial class Defau

ult2 : System
m.Web.UI.Pag
ge
2: {
3: protected void Page Load(object sender, Eve entArgs e)
4: {
5: Label1.TText = Previo
ousPage.pp Nombre.Textt;
6: Label2.TText = Previo
ousPage.pp Telefono.Tex
T xt;
7:
8: }
9: }

? ;$

3 El códig
3. go de serv
vidor env
vía un mensaje al navegador
n r informa
ando
que debe pedir otra
o págin
na web
Resp
ponse.Redirrect
Redirecciona un cliente a una nueeva dirección
n URL y especifica la nuevva URL.
prote
ected void Button1
B Click(object sen
nder, EventA
Args e)
{
Response
e.Redirect("Ejemplo4Dest
tino.aspx");
;
}
4 Su códiigo de serrvidor tra

4. ansfiere ell control a una pág
gina Web
diferen
nte.
HttpServerUtiliity.Transferr
Finaliiza la ejecuciión de la pággina actual e inicia la ejeccución de una nueva pággina para la
solicitud actual.
prote
ected void Button2
B Click(object sen
nder, EventA
Args e)
{
Server.T
Transfer("Ejemplo4Destin
no.aspx");
}
Usa
ando SiteM
Map
Desde Visual Stud
dio podemoss agregar un SiteMap (o un mapa del sitio).
<?xml
l version "1.0" encoding "utf 8" ?>
>
eMap xmlns "http://schem
<site mas.microsof
ft.com/AspNe
et/SiteMap File
F 1.0" >
<
<siteMapNode
e url "" title "" descrription "">
<siteMap
pNode url "" title "" description
d "" />
<siteMap
pNode url "" title "" description
d "" />
<
</siteMapNod
de>
</sit
teMap>
La claase SiteMap provee acceeso a traves de

d programaación:
x La propiedaad RootNode
x CurrentNodde
Ambass propiedades decuelven

d un SiteMapNode.
Un SiteeMapNode rep
presenta un nod
do en el SiteMaap y provee pro
opiedades con in
nformación sob
bre:
x Title
x Url
x Description
n
Desde SiteMapNode podemos acceder a :
x ParentNodee
x ChildNodess
x NextSiblingg
x PreviousSibbling

? ;$
prote
ected void Button1
B Click(object sen
nder, EventA
Args e)
{
Response
e.Redirect(SiteMap.Curre
entNode.Pare
entNode.Url);
}
Test
1. Whhich of the following

f serrver-side methods can bee used on thee HttpServerrUtility to navigate
too a different Web page without
w requiring a round trip to the cllient?
A Redirect
A.
B. NextPagee
C. Transfer
2. Whhich control requires the Web.sitemapp file to disp
play site mapp informationn?
A. SiteMenuuView
B. SiteMapV
View
C. SiteMenuu
D SiteMapPaath
D.
3. Yoou want to provide an Upp button for your Web pages
p to proggrammaticallly navigate up
u the
site map. Whhich class cann you use to access
a the sitte map to acccomplish this?
A NavigateSSite
A.
B. SiteMap
C. Map
D. Navigator
!?

T
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
!?
!

Elig
giendo en
ntre mantener el estado
e en
n el lado del clien
nte o en el
e
serv
vidor
La conexión que se
s establece entre un usuario (el equuipo cliente) y un servido
or Web se
denomina sesión. Las sesionees pueden ab barcar múltip
ples páginas Web y su seguimiento se
e
realizza mediante la administración del esttado.
La ad
dministraciónn del estado es el proceso o por el cual mantenemo os la misma información a
travéés de múltiplees peticioness para las miismas o distintas páginass Web.
La infformación deel estado, co

omo por ejem mplo, el nom
mbre de usuario, las opcio
ones de
persoonalización, o los objetoss de un carro s almacenaados en el cliente
o de la compra, pueden ser
o en el servidor.
Si se almacena en n el cliente, el
e cliente envvía la información al servvidor con cad
da petición. Las
L
opcioones en el lad
do del cliente tienden a tener
t segurid
dad mínima, pero ofreceen un rápido
rendiimiento del servidor
s porqque no existee demanda en e el servido
or para mantener el estad do.
Si es almacenado o en el servidor, el servido

or la almacena, pero tien
ne que pasarrla al cliente
usand do técnicas de
d manejo del estado. Laa seguridad de d estas opciiones es mayyor que en el lado
del clliente.
!?
!

View
wState
Los fo
ormularios Web
W Forms proporcionan
p n la propiedaad ViewStatee como una eestructura
incluiida para conservar autom
máticamentee valores enttre múltiples peticiones a la misma
páginna. La propiedad ViewStaate se mantiene como un n campo ocu ulto en la pággina.
<input
t type="hidden" name="__VI
IEWSTATE" id="
"__VIEWSTATE"
value=
="/wEPDwUKMTIxNDIyOTM0Mg9k
kFgICAw9kFgICA
AQ8PFgIeBFRleH
HQFEzQvNS8yMDA
A2IDE6Mzc6MTE
EgUE1kZGROWHn/rt75X
F/pMGn
nqjqHlH66cdw==
=" />
Encrriptando ViewState
Para la aplicación
n web
<conf
figuration>
<sy
ystem.web>
<
<pages viewStateEncryptionMode "Alw
ways"/>
</s
system.web>
</con
nfiguration>>
Para una página concreta

c
<%@ Page
Languag eFile "Defau
ult.aspx.cs"
Inher ult" ViewStateEncryption
rits " Defau nMode "Alway
ys"%>
!?
!

Deshabilitar ViewStatte
Manttener un estaado de vista para cada coontrol suponne sobrecarga. Para reducir el tiempo
o de
proceesamiento enn el servidorr y el tamaño
o de la páginaa, establecem
mos la propiedad
EnableViewState a false
Leerr y Escrib
bir ViewSttate
if (V
ViewState["lastVisit"] ! null)
Labe
el1.Text (string)ViewS
State["lastV
Visit"];
else
Labe
el1.Text "lastVisit Vi
iewState not
t defined.";
// Definne the ViewState object for the nex
xt page vieww
ViewStatte.Add("lastV
Visit", Date
eTime.Now.To
oString());
En el ViewState podemos
p alm
macenar cualquier objeto
o que sea Serrializable
if (ViewState["lastVisit"] ! null)
Labe
el1.Text ((DateTime)Vi
iewState["la
astVisit"]).ToString();
else
Labe
el1.Text "lastVisit Vi
iewState not
t defined.";
// Definne the ViewState object for the nex
xt page view
w
ViewStatte["lastVisit"] ime.Now;
DateTi
Con
ntrolState
e
Cam
mpos Ocu
ultos
<inpu
ut type=”hidd
den” name==”nombre” vaalue=”valor””/>
Coo
okies
Las co ookies propoorcionan un medio para almacenar in nformación específica
e deel usuario en las
aplicaaciones Web b. Por ejemplo, cuando un usuario vissita un sitio, las cookies p
pueden
emplearse para almacenar
a lass preferenciaas del usuario u otra info
ormación. Cu
uando el usuaario
visitee el sitio Web
b de nuevo, la aplicación podrá recup perar la inforrmación que almacenó
previamente.
La maayoría de loss exploradorees admiten cookies

c de un tamaño máximo de 4096 bytes. De ebido
a estee límite, es recomendablle utilizar lass cookies parra almacenarr pequeñas ccantidades de
datoss, o mejor aú ún, un identifficador como o un id. de usuario. Este id. se puedee utilizar paraa
identtificar al usuaario y leer infformación reelativa a éste
e de una base de datos u otro almacé én de
datoss.
!?
!

Los exploradores también imponen limitaaciones respe ecto al númeero de cookiees que cada sitio
puede almacenarr en el equipo del usuario o. La mayoríaa de los exploradores sólo permiten 20
cookiies por sitio; si se intentaa almacenar más, las coookies más anttiguas se desscartan. Algu
unos
explo
oradores tam mbién definen un límite absoluto,
a norrmalmente 300,
3 en cuantto al número o de
cookiies que acep ptan desde to odos los sitio
os en conjuntto.
Escrribir Cook
kies
Respo
onse.Cookies["userName"].Value "p
patrick";
onse.Cookies["userName"].Expires
Respo DateTime.No
ow.AddDays(1
1);
HttpC
Cookie aCookkie new HttpCookie("la
astVisit");
aCook
kie.Value DateTime.Noww.ToString()
);
aCook
kie.Expires Now.AddDays(1);
DateTime.N
onse.Cookies.Add(aCookie);
Respo
El ejem
mplo agrega doos cookies a la colección
c Cookies, una denominada userNam me y la otra denominada lastViisit.
Para laa primera cookiie, los valores de
d la colección Cookies
C se estaablecen directamente.
Para laa segunda cookkie, el código crea una instanciia de un objeto de tipo HttpCo
ookie, establecee sus propiedaddes y, a
continuación, lo agreega a la colecció
ón Cookies a traavés del método Add. Cuando o se crea una insstancia de un objeto
o
HttpCo ookie, se debe pasar el nombrre de la cookie como parte del constructor.
Amboss ejemplos llevaan a cabo la misma tarea: escrriben una cookie en el exploraador. En amboss métodos, el vaalor de
caduciidad debe ser de
d tipo DateTim me. Sin embargo
o, el valor lastVisited también es un valor de fecha y hora. Dado
D
odos los valoress de las cookies se almacenan como cadenas,, el valor de feccha y hora se tieene que converrtir en
que to
un objjeto String.
Puedee almacenar un valor en una co ookie, como el nombre de usu uario y la últimaa visita. Tambiéén puede almaccenar
varios pares de nomb bre y valor en una
u sola cookie.. Estos pares de
e nombre y valo or se denominaan subclaves. (Las
subclaaves se disponen de forma simmilar a una cadeena de consulta en una direccióón URL.) Por ejemplo, en lugar de
crear dos
d cookies ind dependientes deenominadas usserName y lastV Visit, puede crear una sola coo okie denominadda
userInfo que tenga laas subclaves useerName y lastV
Visit.
Son vaarias las razones que hacen aconsejable el uso de subclaves. En primer lugaar, es conveniente colocar la
inform
mación relacionaada o similar en n una sola cookkie. Además, daado que toda la información esstá en una sola
cookiee, los atributos de ésta, como la caducidad, see aplican a todaa la información
n. (A la inversa,, si desea asignar
distinttas fechas de caaducidad a distiintos tipos de in ebería almacenaar ésta en cookies independientes.)
nformación, de
Response.
.Cookies["us
serInfo"]["u
userName"] "patrick";
Response
e.Cookies["userInfo"]["l
lastVisit"] DateTime.Now.ToStrinng();
Response
e.Cookies["userInfo"].Ex
xpires Dat
teTime.Now.AAddDays(1);
HttpCook
kie aCookie new HttpCo
ookie("userI
Info");
aCookie.Values["userName"] "p
patrick";
aCookie.Values["lastVisit"] D w.ToString();
DateTime.Now
aCookie.Expires DateTime.Now.AddDays(1);
;
Response
e.Cookies.Add(aCookie);
Limiitar el ámbiito
De foorma predeteerminada, to odas las cookkies de un sittio se almaceenan juntas een el cliente y
todass ellas se envvían al servid
dor con cualqquier solicituud para ese sitio. Es decirr, cada página de
un sittio obtiene todas las coo mbargo, pueede estableceer el ámbito de
okies para esee sitio. Sin em
las co
ookies de dos maneras:
x Limite el ámbito de laas cookies a una carpeta del servidorr, lo que le peermitirá limittar
las cookiees a una aplicación del sitio.
!?
!

x Establezcca el ámbito en un dominnio, lo que le

e permitirá esspecificar loss subdominio
os de
un domin nio que puedden tener accceso a una coookie
Limiitar las cook kies a una carpeta

c o ap
plicación
Para limitar las co
ookies a una carpeta del servidor, esttablezca la propiedad Path de la cookkie,
comoo en el ejemp plo siguientee:
HttpC
Cookie appCo
ookie new HttpCookie(""AppCookie")
);
appCookie.Value "w
written " + DateTime.Noow.ToString(
();
appCookie.Expires DateTime.No
ow.AddDays(1
1);
appCookie.Path "/A
Application11";
Response
e.Cookies.Add(appCookie) );
La rutta de acceso o puede ser una

u ruta de acceso
a o la raíz del sitio o una raíz
física situada bajo
virtuaal. El efecto conseguido
c s
será que la cookie
c sólo estará
e disponnible para lass páginas de la
carpeeta Applicatio on1 o para laa raíz virtual. Por ejemplo, si su sitio se denominaa
www w.contoso.com, la cookie creada en el ejemplo an nterior estaráá disponible para las páginas
cuya ruta de acceeso sea http://www.conttoso.com/Ap pplication1/ y para las páginas situadas
bajo dicha carpetta. Sin embarrgo, la cookiee no estará disponible
d paara las páginas de otras
aplicaaciones, com mo http://wwww.contoso.ccom/Applicaation2/ o http://www.contoso.com/.
Limiitar el ámbiito de domiinio de las cookies

c
De foorma predeteerminada, las cookies se asocian a un n dominio esspecífico. Porr ejemplo, si su
e www.contoso.com, laas cookies qu
sitio es ue escriba se envían al seervidor cuand do los usuarios
solicitan una págiina de ese sittio. (Esto podría no inclu
uir las cookies que tengan n un valor de
e ruta
de accceso determminado.) Si suu sitio tiene subdominios
s s, por ejemplo, contoso.ccom,
sales.contoso.comm y support.contoso.com m, puede aso ociar las cookkies a un sub
bdominio
concrreto. Para ello, establezcca la propiedad Domain de e la cookie, como
c en estee ejemplo:
Respo
onse.Cookies["domain"].V
Value Date
eTime.Now.To
oString();
Response
e.Cookies["domain"].Expi
ires DateT
Time.Now.Add
dDays(1);
Response
e.Cookies["domain"].Doma
ain "suppo
ort.contoso.com";
Cuando el dominio se estableece de esta manera,

m ookie sólo estará disponible para las
la co
págin
nas del subdoominio especcificado. Tam
mbién puede e utilizar la prropiedad Do
omain para crear
una cookie
c que see pueda com
mpartir entree varios subdominios, com mo se muesttra en el ejem
mplo
siguieente:
Respo
onse.Cookies["domain"].V
Value Date
eTime.Now.To
oString();
Response
e.Cookies["domain"].Expi
ires DateT
Time.Now.Add
dDays(1);
Response
e.Cookies["domain"].Doma
ain "conto
oso.com";
De essta manera, la cookie esttará disponib

ble para el do
ominio princcipal, así com
mo para los
dominios sales.co
ontoso.com y support.co ontoso.com.
Leerr Las Cook

kies
Cuando un explorrador realizaa una solicituud al servidorr, envía las cookies para ese servidorr
o con la soliciitud. En sus aplicaciones
junto a ASP.NET, puuede leer las cookies med diante el objeto
HttpRRequest, quee está dispon nible como propiedad
p Re
equest de la clase
c Page. LLa estructuraa del
objetto HttpReque est es esencialmente la misma
m que laa del objeto HttpRespon nse, por lo quue la
lectura de las coo
okies del objeeto HttpRequest se realiza de manerra similar a laa escritura de las
!?
!

cookiies en el objeeto HttpResp

ponse. En el ejemplo de código siguieente se mueestran dos
d una cookiie denominaada username y mostrar su valor en un
maneeras de obtener el valor de u !
contrrol Label:
if (R
Request.Cook
kies["userNam
me"] ! nulll)
Labe
el1.Text Server.HtmlEn
ncode(Reques
st.Cookies["
"userName"].Value);
if (Requ
uest.Cookies["userName"]
] ! null)
{
Http
pCookie aCookie Reques
st.Cookies["
"userName"];
Labe
el1.Text Server.HtmlEn
ncode(aCooki
ie.Value);
}
Server.HTMLEn ncode("Striing")
Con este
e método o se puede coonvertir un string codificaado en HTML, y por tanto ejecutablee por
los naavegadores, en código soolamente vissible pero no o ejecutable por los naveegadores. Es decir,
se traata de obtener, partiendo
o de HTML normal,
n un tipo de código o que aunque el navegad dor lo
muesstra como si fuese HTML,, en realidad d es ASCII puro. Es útil para escribir m
manuales com
mo
éste. Veamos un ejemplo:
<% Response.W
R Write(Serv
ver.HTMLEn
ncode("Est
to es un break
b <BR>
> que no
func
ciona")) %>
%
Este sería el códdigo internoo obtenido, visible

v en fo
ormato HTM
ML pero noo ejecutablee
comoo tal:
Esto
o es un br
reak <B
BR> que
e no funci
iona
Y estto es lo quee mostrará es navegador:

Esto
o es un br
reak <BR> que no fu
unciona
Antess de intentarr obtener el valor

v de unaa cookie, deb
bería aseguraarse de que d
dicha cookie
existee; si no es assí, se iniciará una excepción NullReferenceException. Tenga een cuenta tam mbién
que se
s ha llamado o al método HtmlEncodee para codificcar el conten nido de una ccookie antess de
mostrarlo en la página. Esto garantiza
g quee un usuario malintencio
onado no ha agregado un na
secueencia de com mandos ejecu utables a la cookie.
c
Del mismo
m modo, la lectura del
d valor de una
u subclave e de una cookkie es similarr a su
estab
blecimiento. En el ejemplo de código siguiente se na manera dee obtener el valor
e muestra un
de un
na subclave:
if (R
Request.Cook
kies["userInfo"] ! null l)
{
Labe
el1.Text
Server.HtmlEncode(Reque
est.Cookies["userInfo"]["userName"]);
el2.Text
Labe
Server.HtmlEncode(Reque
est.Cookies["userInfo"]["lastVisit
t"]);
}
En el ejemplo antterior, el cód

digo lee el valor de la sub
bclave lastVissit, que se esstableció
previamente en la representaación de cadeena de un vaalor DateTim me. Las cookiees almacenan
valores en forma de cadenas,, por lo que si s desea utilizzar el valor laastVisit como fecha, deb
be
conveertirlo al tipo
o apropiado, como en este ejemplo:
DateT
Time dt;
dt teTime.Parse(Request.Coo
Dat okies["userI
Info"]["last
tVisit"]);
!?
!

Las su
ubclaves de una cookie son
n una colección
n de tipo Nam
meValueCollecttion. Por cons
siguiente, otra
a
maneera de obten
ner una subcllave determiinada es obtener la coleccción de subcclaves y, a "
continuación, extraer el valor de
d la subclave
e por su nomb
bre, como se muestra
m en el ejemplo siguiente:
if (R
Request.Cook
kies["userInfo"] ! null l)
{
Syst
tem.Collections.Specialiized.NameVal
lueCollectio
on
UserInfoCookieCollectio
on;
User
rInfoCookieCollection Request.Coo
okies["userI
Info"].Value
es;
Labe
el1.Text
Server.HtmlEncode(UserI
InfoCookieCoollection["u
userName"]);
Labe
el2.Text
Server.HtmlEncode(UserI
InfoCookieCoollection["l
lastVisit"]);
}
Leerr coleccione
es de cookie
es
Syste
em.Text.StringBuilder output new System.Textt.StringBuil
lder();
HttpCook
kie aCookie;
for (int
t i 0; i < Request.Coo
okies.Count;; i++)
{
aCoo
okie Request.Cookies[i
i];
outp
put.Append("Cookie name " + Serve
er.HtmlEncod
de(aCookie.N
Name)
+ "<br />");
outp
put.Append("Cookie valuee " + Serv ode(aCookie.Value)
ver.HtmlEnco
+ "<br /><br />");
}
Label1.T
Text output.ToString()
);
Mod
dificar y eliminar
e la
as cookies
No ess posible mo
odificar directtamente unaa cookie. En su lugar, el proceso
p que se debe seguir
consiste en crear una nueva cookie
c con nuevos valore nuación, enviarla al
es y, a contin
orador para que
explo q sobrescrriba la versió
ón antigua en
n el cliente. En
E el ejemplo
o de código
siguieente se muesstra cómo modificar
m el vaalor de una cookie
c que almacena
a un recuento de
e las
visitaas del usuario
o al sitio:
int c
counter;
if (Requuest.Cookies["counter"] null)
coun
nter 0;
else
{
coun
nter int.Parse(Requestt.Cookies["c
counter"].Va
alue);
}
counter+++;
Response
e.Cookies["counter"].Val
lue counte
er.ToString(
();
Response
e.Cookies["counter"].Exp
pires = Date
eTime.Now.Ad
ddDays(1);
Elim
minar las cookies
c
La eliminación dee una cookie,, es decir, su borrado físico del disco duro del usu uario, es unaa
variación del procceso de mod dificación. Noo es posible eliminar
e direectamente unna cookie, yaa que
se en
ncuentra en ele equipo del usuario. Sin n embargo, puede
p conseguir que el eexplorador laa
elimine. La técnicca consiste en crear una nueva
n cookie e con el mismmo nombre q que la cookiee que
se deesea eliminarr, pero estab
bleciendo su caducidad en una fecha anterior a laa actual. Cuando
el exp
plorador commpruebe la caducidad
c dee la cookie, laa descartará porque estáá anticuada. En el
ejemplo de códiggo siguiente ses muestra unau manera de d eliminar todas
t las coo
okies disponiibles
para la aplicación
n:
HttpC
Cookie aCook
kie;
!?
!

string cookieName;
c
int limit Request.Cookies.Couunt;
for (int
t i 0; i < limit; i++)) )
{
cook
kieName Request.Cookie
es[i].Name;
aCoo
okie new HttpCookie(co
ookieName);
aCoo
okie.Expires DateTime.Now.AddDays
s( 1);
ponse.Cookies.Add(aCooki
Resp ie);
}
Que
eryString
g
Son pares
p nombre/valor que se pasan en la cadena de
e consulta deel navegadorr con un limite de
2083 caracteres por
p el métoddo Http GET
http://support.micros
soft.com/Defau
ult.aspx?kbid=
=315233
http://search.microso
oft.com/result
ts.aspx?mkt=en
n US&setlang=en US&q=hello
o+world
Label
l1.Text "U
User: " + Server.HtmlEnc
code(Request
t.QueryStrinng["user"]) +
", Pr
refs: " + Se
erver.HtmlEncode(Request ng["prefs"]) +
t.QueryStrin
", Pa
age: " + Ser
rver.HtmlEncode(Request.QueryString
g["page"]);
Test
1. Yoou need to sttore a user’s user name and

a password d as he or shhe navigates to different pages
o your site so
on s that you can
c pass thosse credentials to back-ennd servers. WWhich type off state
m
management should you use?
u (Choosee the best answer.)
A Client-sidee state managgement
A.
B. Server-sidde state management
2. Yoou need to trrack non-connfidential useer preferencees when a user visits youur site to min
nimize
a
additional loaad on your servers. You distribute reequests amonng multiple W Web servers, each
ruunning a coopy of your application.. Which typ pe of state management
m should you u use?
(CChoose the best
b answer.))
A Client-sidee state managgement
A.
B. Server-sidde state management
3. Yoou are creatting an ASP P.NET Web form that allows
a a user to browse information n in a
d
database. Whhile the user accesses
a the page, you neeed to track search
s and soorting valuess. You
d not need to
do t store the information
i b
between visiits to the Weeb page. Whhich type of client-
c
side state maanagement would
w meet your
y requiremments and beb the simpleest to implement?
(C
Choose the best
b answer.))
A. View statte
!?
!

B. Control sttate
*
C. Hidden fiields
D. Cookies
E. Query strings
4. You
Y are creatting an ASP.NET Web siite with dozeens of pages. You want too allow the user
u to
set user prefereences and haave each pagge process the
t preferencce informatioon. You want the
prefferences to be
b rememberred between visits, even if
i the user clloses the Weeb browser. Which
W
typee of client--side state management
m t meets youur requirements and iss the simpleest to
impplement? (Chhoose the besst answer.)
A. View state
s
B. Controol state
C. Hiddenn fields
D. Cookies
E. Query strings
5. You
Y are creaating an ASP P.NET Web form that seearches the product
p invenntory and dissplays
item
ms that match the user’s criteria. Youu want userss to be able to bookmarkk or e-mail search
s
resuults. Which type of clieent-side statte managem ment meets your
y requireements and is the
sim
mplest to impllement? (Chooose the bestt answer.)
A. View state
s
B. Controol state
C. Hiddenn fields
D. Cookies
E. Query strings
!?

%

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
!??
%

%

Esta
ado de Ap
plicación
n
Una aplicación
a web está form
mada por todas las páginaas Web, arch hivos , compo onentes, cód
digo e
imágeenes que se encuentran en un directtorio virtual o en sus subdirectorios.
El arcchivo global.aasax contienne el código global

g para laa aplicación web. Se encuentra en el
directtorio virtual de la aplicacción
Entree otras cosas, el archivo global.asax

g contiene conttroladores de eventos paara los eventtos:
x on_Start
Applicatio
x Applicatio
on_End
x Applicatio
on_Error
x Session_SStart
x Session_EEnd
Cuando la aplicacción recibe laa primera petición de usu uario, se desencadena el evento
Application_Startt. Si se edita el archivo global.asax y se
s guardan lo os cambios, se completarán
todass las peticion
nes pendienttes, se desen ncadenará el evento Application_End y se reiniciaará la
aplicaación. Esta seecuencia reinicia la aplicación, elimin
nando toda la informació ón de estado o. Sin
embaargo, el reinicio de la apliicación es traansparente para
p todos loos usuarios, yya que solo
ocurrre tras satisfaacer cualquieer solicitud pendiente,
p y antes de acceptar cualqu
uier nueva
petición. Cuando se recibe la siguiente peetición, la aplicación vuelve a comenzzar,
desen ncadenando otro evento o Application n_Start
La infformación puuede compartirse globalmente en to oda la aplicacción, mediante un diccion

nario
de obbjetos, estando cada objeeto asociado
o a un valor clave.
c Esto see implementta utilizando la
propiiedad Application de la clase
c HttpAppplication. La propiedad Application
A permite el acceso
p
a la colección Con
ntens, cuyo contenido
c heemos añadid do al estado Application
A d
directamentee,
mediante código..
Para añadir un arrchivo global.asax a un prroyecto, hacemos clic en

n Sitio Web>A
Agregar nuevvo
elemento. En el cuadro
c de diáálogo Agregaar nuevo elemento, selecccionamos Clase de Apliccación
Globaal.
!??
%
Archiivo Global.Assax
<%@ Ap
pplication Lan
nguage="C#" %>
pt runat="serv
<scrip ver">
vo on Start(object sender, Ev
oid Applicatio ventArgs e)
{
// Código que
q se ejecuta al iniciars
se la aplicaci
ión
Application
n["MensajeInicio"] = "La Aplicación
A se ha iniciado";
;
Application
n["ConexionBd
d"] = "Server=
=zeus;Database
e=Pub;UID=sa;P
PWD=secret;";
string[] libros = { "c#", "Asp.Net", "PcHoy", "Hi
istoria", "Geo
ografia" };
Application
n["Libros"] = libros;
WriteFile("Aplicación Arrancada");
A
}
vo on End(object sender, Even

oid Applicatio ntArgs e)
{
// Código que se ejecuta cuando se cierra la apllicación
Application
n["MensajeFin"] = "La apli
icación esta terminada";
t
WriteFile("Aplicacion Final");
F
}
vo on Error(object sender, Ev
oid Applicatio ventArgs e)
{
// Código que
q se ejecuta al producir
rse un error no
n controlado
vo
oid Session St
tart(object sender, EventA
Args e)
{
// Código que
q se ejecuta cuando se inicia
i una nue
eva sesión
vo
oid Session En
nd(object sender, EventArg
gs e)
{
// Código que
q se ejecuta cuando fina
aliza una sesi
ión.
// Nota: El evento Session End se de
esencadena sól
lo con el modo
o sessionstate
e
// se estab
blece como InProc en el ar
rchivo Web.con odo de sesión se establece como
nfig. Si el mo
StateS
Server
// o SQLServer, el evento no se gene
era.
}
vo
oid WriteFile(string strText)
{
System.IO.StreamWriter writer = new System.IO.Str c:\test.txt", true);
reamWriter(@"c
string str;
str = DateT
Time.Now.ToString() + " " + strText;
!??
%
writer.Writ
teLine(str);
}
weiter.Close();
</scri
ipt>
Conccurrencia y Bloqueo
Si vam
mos a permittir que los ussuarios modifiquen los objetos
o almaccenados en eel estado de la
aplicaación debemmos utilizar loos métodos Lock
L y Unlock de la clase HttpApplicaationState paara
contrrolar el accesso a los objettos de estado de la aplicaación.
Application.Lock(()
Application.Unlocck()
Application.Lock
k(); Application["PageRequestCount"
"] =
t)Applicatio
((int on["PageRequestCount"])+
+1;Applicati
ion.UnLock()
);
Esta
ado de la
a Sesión
Cuando nos coneectamos con un sitio Web b ASP.NET, creamos una sesión. La seesión otorga un
do a la Web y permite al sitio Web reeconocer que
estad e las siguienttes peticionees de esa pággina
proceeden del missmo navegad dor que inició
ó la sesión. Esto
E nos perm mite manten ner el estado a lo
largo de las págin
nas, hasta qu
ue conscienteemente term minemos la seesión o ésta caduque (paasado
un tieempo, que por defecto es
e de 20 min)).
Mientras una aplicación se essté ejecutanddo, habrá varias sesioness, básicamen

nte, una paraa cada
usuarrio que esté interactuand
do con el sitiio Web.
ASP.N
NET proporciona un estado de sesión
n con las sigu
uientes caraccterísticas:
x Funciona con navegadores que tieenen desactivadas las co ookies

x Identificaa si una peticción es parte de una sesióón existente
x Almacenaa datos de laa sesión paraa usarlos en varias
v peticio
ones.
x Produce eventos
e de sesión,
s comoo Session_Staart y Session_End, que pueden
controlarrse en el arch hivo global.asax o en el código
c de otrra aplicación
x Libera auutomáticameente recursoss de la sesión n si la sesión termina o caduca.
Por defecto,
d el esstado de la seesión se almacena en la memoría del servidor, co
omo parte de el
proceeso ASP.NET. Sin embarggo, puede configurarse para que se almacene sep parado del
proceeso ASp.NET,, en otro servidor de estaado o en unaa base de datos Sql Serveer, en cuyo caso
c
perm
manecerá aun nque se prodduzca un falloo o se reinicie el proceso
o ASP.NET
Las seesiones se id
dentifican y siguen
s con un
n SessionID de
d 120 bits, que
q se pasa del cliente al
a
serviddor y viceverrsa, utilizand
do una cookiee HTTP o un URL modificcado, dependdiendo de la
configguración de la aplicación n. .NET Framework gestioona automátticamente el SessionID; no
n es
necessario modificcarlo median onID está formado por caaracteres ASCII
nte programaación. Sessio
válidoos para un URL,
U que tienen dos caraccterísticas im mportantes:
!??
%
x Son únicaas a nivel glo

obal, por lo que no es possible que doss sesiones diferentes ten
ngan
el mismo SessionID.
x Son aleattorios, por lo
o que es commplicado adivvinar el valor del SessionID de otra se
esión,
tras cono
ocer el valor del SessionID D de la sesión anterior.
El esttado de la seesión se implementa utilizando la proopiedad de coolección Conntents de la clase

c
HttpSSessionState. Esta coleccción es un dicccionario clavevalor quee contiene to
odos los obje
etos
diccioonario del esstado de la seesión que see han añadido
o directamente, mediantte programaación.
Los objetos
o de dicccionario se establecen y recuperan usando la paalabra clase SSession.
using
g System;
using
using
g System.Con
nfiguration;
using
g System.Dat
ta;
using
g System.Web
b;
using
g System.Web
b.Security;
using
g System.Web
b.UI;
using
g System.Web
b.UI.HtmlControls;
using
g b.UI.WebControls;
System.Web
using
System.Web ts;
using
g System.Tex
xt;
publi
ic partial class
c SessionState : Sys
stem.Web.UI.
.Page
{
p
protected vo
nder, EventA
Args e)
{
}
p
protected vo
oid rbl SelectedIndexChaanged(object
t sender, Ev
ventArgs e)
{
if (rbl.SelectedIndex ! 1)
{
string[] Libros ng[3];
new strin
Session["cattexto"] rbl.S
SelectedItem
m.Text;
Session["catcode"] rbl.Se
electedItem.
.Value;
swit
tch (rbl.SelectedItem.Vaalue)
{
case "n":
Libros[0] "Progra
amando c#";
Libros[1] "Progra
amando ASP.N
NET";
Libros[2] "C# Ess
sentials";
break;
case "d":
Libros[0] "Oracle
e";
Libros[1] "Sql Se
erver";
Libros[2] "TRansa
ac Sql";
break;
case "h":
Libros[0] "PC Har
rdware";
Libros[1] "Diccio
onario Hardw
ware";
Libros[2] "Linux Device Driv
vers";
!??
%
break;
}
Session["libros"] Libros;
;
}
}
p
protected vo
ventArgs e)
{
if (rbl.SelectedIndex 1)
{
lblM
Message.Text s selecciona
"Tu debes ar una categgoria";
}
else
{
StringBuilder sbb new Stri
ingBuilder()
);
sb.A
Append("Tu has seleccionnado la cate
egoria ");
sb.A
Append((string)Session[""cattexto"])
);
sb.A
Append(" con codigo \""));
sb.A
Append((string)Session[""catcode"]);
;
sb.A
Append("\".");
Message.Text sb.ToString
lblM g();
ddl.Visible true;
string[] CatLibros (string[])Session[""libros"];
int i;
ddl.Items.Clear();
for (i 0; i < CatLibros.G
GetLength(0)
); i++)
{
ddl.Items.Add(new ListI
Item(CatLibr
ros[i]));
}
}
}
}
Configuración del esta

ado de sessión
Se co
ontrola en cada página mediante
m las entradas
e de la directiva Page,
P en la p
parte superio
or de
la pággina. En una aplicación se controla mediante
m el archivo
a de co
onfiguración web.config,
normmalmente situ uado en el directorio raízz de la aplicaación.
El esttado de sesió
ón está habilitado por deefecto. Podem
mos activar explícitamen
e nte el estado
o de
sesión para una página,
p añadiendo el atributo EnableSessionStatee a la directivva Page
EnableSessionStaate admite esstos valores:
x True
x False
x ReadOnlyy
bemos que no
Si sab n vamos a utilizar
u sesionnes podemoss mejorar el rendimiento
o desactivand
do las
sesiones o en su defecto
d poniiendo a solo lectura
Por defecto,
d emoria del seervidor. Sin eembargo, usando
el esstado de sesiión se almacena en la me
el atrributo mode de la etiqueta sessionstaate, en web.config, podeemos configu urar para quee se
almaccene separado del proceeso ASP.NET,, en otro servvidor de estaado o en unaa base de dattos
Sql Seerver.
En weeb.config, la información
n sobre la configuración del
d estado de sesión se eencuentra en
n la
secció
ón <system.w web>, que see encuentra en la sección <configuraation>
G
% HIJ
I K K HI,II HI*I

%
$HI
!** O
I

%
$$HI H !** L HL=DDHIMN
!??
%
Hay varios
v atributtos, todos op
pcionales:
!
x allowCusttomSqlDatab base: Si es trrue, la base de
d datos Sql que almacen na datos de
sesión puuede ser una base de dattos personaliizada. Por deefecto es falsse, en cuyo casoc la
base de datos
d predetterminada ess ASPState y no se puedee especificar un catálogo
inicial en la cadena dee conexión.
x mode: Esspecifica si ell estado de sesión
s esta desactivado para
p todas las páginas
controlad das por esta copia de web.config y , si s está activado, dónde see almacena el
estado dee sesión.
O Estado de sesión desactivado
o Off.
o In nProc. El estado de servidor se almaccena, en proceso, en el servidor local. Es
e valor por defecto
el d
o StateServer.
S El estado de sesión se almacena en el e servidor lo
ocal. Si se utiliza
e atributo, deberá exisstir una entraada para stateConnectio
este onString, que e
e
especifique q servidor se usará parra almacenarr el estado dee sesión
que
o SqlServer.
S Se almacena en BD. stateConnectionSttring especifiicará el servidor
o Custom.
C Nos permite esp pecificar un proveedor
p peersonalizado
x cookielesss: Las cookiees se utilizan
n para almace enar la SessionID, de forma que el
servidor sepa
s a qué sesión está co onectada la petición.
p
o AutoDetect
A c
comprobará s el cliente que
si q hace la petición
p adm
mite cookies.
o UseDevicePro
U ofile determinará si se ad dmiten cookies, basándo ose en
H
HttpBrowserC Capabilities
o SiS cualquiera de los anterriores determ mina que no se admiten ccookies, o si se
e
especifica UseUri, Session nID se mante endrá añadieendo un valoor al URL.
o UseCookies
U e el valor po
es or defecto
x cookieNaame: Nombree de la cookie que almaccena la Sessio onID, por deffecto es
ASP.NET__SessionId
x customPrrovider: Nom mbre del provveedor de esstado de sesión personalizado
x regenerateExpiredSesssionID: Paraa usarlo con sesiones sin cookies. Si ees true, las
SessionIDD caducadas serán sustitu uidas por un nuevo identtificador. Es ffalse por deffecto
x sqlComm mandTimeoutt. Número dee segundo que un coman ndo SQL estáá inactivo antes
de ser cancelado. Porr defecto es 30 3
x sqlConneectionString: Cadena de conexión.
c
x Timeout: Especifica ele número dee minutos de inactividad antes de quee la sesión
caduque y sea rechazzada por el seervidor. Por defecto es 20. 2
<co
onfiguration> <system.web>
<
<sessionState
c
cookieless="true"
r
regenerateExpi
iredSessionId=
"
"true" /> </sy
ystem.web>
<
</configuratio
on>
!??
%
<confi
iguration> "
<sys
stem.web>
<
<sessionState mode="SQLSer
rver"
cookieless="true "
regenerateExpiredSessio
onId="true "
timeout="30"
sqlConnectionString="Da
ata Source=MyS
SqlServer;Inte
egrated Security=SSPI;"
stateNetworkTimeout="30
0"/>
</sy
ystem.web>
</conf
figuration>
Test
1. In which file should

s you write
w code too respond to the Application Start evvent? (Choose the
b answer.)
best
A Any ASP.N
A. NET server page
p with ann .aspx exten
nsion
B. Web.conffig
C. Global.assax
D. Anny ASP.NET
T server pagee with an .asppx.vb or .asp
px.cs extensioon
2. Yoou need to store state data that is accessible to any userr who conneects to yourr Web
a
application. W
Which objectt should you use? (Choosse the best annswer.)
A. Session
B. Applicatioon
C. Responsee.Cookies
D Response.ViewState
D.
3. Yoou need to store
s user loogon credenttials that are provided byy the user eeach time thee user
c
connects to your Web appplication. Whhich object should you usse? (Choose the best answwer.)
A. Session
B. Applicatioon
C. Responsee.Cookies
D Response.ViewState
D.
4. Yoou need to write
w data to a database before
b a user’s session tiimes out. W
Which event should
s
y respond to?
you t (Choose the best answ wer.)
A Applicatioon Start
A.
B. Applicatioon End
C. Session Start
S
D. Session End
E
"?

, $$
D
D
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
"?
, $
D

, $

D
Con
ntrolar errrores en
n una pág
gina
Este ejemplo
e de código
c muesstra un controlador para el evento Errror de una páágina Web de
ASP.NNET. El contrrolador captuura todas lass excepciones no controlaadas de la páágina actual.. En
otrass palabras, to
odos los erro
ores que no se
s detectan con
c un bloqu ue Try/Catch h.
priva
ate void Pag
ge Error(object sender, EventArgs e)
e
{
R
Response.Wri or has been logged.");
te("An application erro
A
ApplicationS pecificErrorLogger(Serv
ver.GetLastE
Error().Mess
sage);
S
Server.Clear
rError();
}
Es preeferible utilizzar bloques Try/Catch

T allrededor de cualquier código sujeto a errores, en
n
lugar de confiar ene un controlador de erro ores de la páágina.
No see puede mosstrar informaación de erroor en un conttrol (como Laabel), porquee al llamar al
contrrolador Errorr no se crean
n nuevas insttancias de loss controles en
e la página.
Después de contrrolar un erro or, debe borrrarlo mediante una llamaada al métod
do ClearErrorr del
objetto Server (claase HttpServverUtility).
Con
ntrolar errrores en
n una aplicación
En esste ejemplo ded código se muestra cóm mo crear un controladorr de errores een el archivo
o
Globaal.asax que detecte
d todoos los erroress ASP.NET no
o controlados al procesarr una solicitu
ud, es
decir, todos los errores que non se detectaan con un blooque Try/Cattch ni en un controlador de
errorres en el niveel de página. En el ejemplo, el controlador transfiiere el contro
ol a una págiina de
errorr genérica deenominada Errors.aspx, queq interpretta los erroress y muestra los mensajess
adecu uados.
' Hand
dler in Global.asax file
Sub Ap
pplication Error(ByVal sender As Object
t, ByVal e As EventArgs)
Se
erver.Transfer("Errors.aspx")
End Su
ub
' Hand
dler in Errors.aspx file
Privat oad(ByVal sender As System
te Sub Page Lo m.Object,
ByVal e As System.EventArgs) Handles
s MyBase.Load
im errMessage As System.Text.StringBuil
Di lder =
New System.Text.StringBuilder()
Di on As System.Exception = Server.GetLast
im appExceptio S tError()
If
f (TypeOf (app
pException) Is HttpExcepti
ion) Then
Dim checkEx
xception As HttpException =
appException, HttpExceptio
CType(a on)
Select Case
e checkException.GetHttpCo
ode
Case 403
errMessage.Append(
"Yo
ou are not allowed to view
w that page.")
Case 404
errMessage.Append(
"Th
he page you requested cann
not be found."
")
Case 408
errMessage.Append(
he request has timed out."
"Th ")
Case 500
errMessage.Append(
"The server cannot fulfill you
ur request.")
Case Else
errMessage.Append(
"?
, $
D

"The server has experienced an

n error.")
End Select
El
lse
' The excep
ption was not an HttpExcep
ption.

errMessage.AppendFormat(
"The following error occurred<br />{0}",
/
appEx
xception.ToString
En
nd If
er end("<br />Please contact the server ad
rrMessage.Appe dministrator."
")
La
abel1.Text = errMessage.To
e String()
erver.ClearError()
Se
End Su
ub
// Handler
H in Glo
obal.asax file
d Application Error(Object sender, Even
void ntArgs e) {
erver.Transfer("Errors.aspx");
Se
}
// Handler
H in Errors.aspx file.
prot age Load(object sender, Ev
tected void Pa ventArgs e)
{
ystem.Text.StringBuilder errMessage = new
Sy n StringBuil
lder();
Sy
ystem.Exceptio GetLastError();
on appException = Server.G
if
f (appExceptio
on is HttpException)
{
n checkException = (HttpEx
HttpException xception)appEx
xception;
switch (checkException.GetHttpCode())
{
case 403:
{
errMessage.Append("You are not allowed
a to vie
ew that page."
");
break;
}
case 404:
{
errMessage.Append("The page you requested can
nnot be found.");
break;
}
case 408:
{
errMessage.Append("The request has
h timed out"
");
break;
}
case 500:
{
errMessage.Append("The server ca
annot fullfill
l your request
t.");
break;
}
default:
{
errMessage.Append("Ther server has
h experience
ed an error.")
);
break;
}
}
}
el
lse
{
// The except
tion was not an HttpExcept
tion.
errMessage.Ap
ppendFormat("The following
g error occurr
red<br />{0}",
,
appExceptio
on.ToString());
}
er end("<br />Please contact the server ad

rrMessage.Appe dministrator."
");
La
abel1.Text = errMessage.To
e String();
erver.ClearError();
Se
}
Erro
ores en el
e archivo
o de conffiguración
<cust
tomErrors mo
ode "RemoteOnly"
def ct "customerror.htm">
faultRedirec
<
<error usCode "404" redirect "c
statu customerror4
404.htm"/>
</cus
stomErrors>
El atrributo mode lleva los sigu

uientes valorres:
"?
, $
D

Nombre de Descripc ón
mie
embro
Re
emoteOnly Habilita los errores pe
ersonalizados
s sólo en clien
ntes remotos
s. Los errores
s
personaliizados sólo se
e muestran en
e clientes reemotos y los e
errores de
ASP.NET se muestra en e el host loc
cal.
On
n Habilita los errores peersonalizadoss. Si no se es
specifica ningún objeto
DefaultRe edirect, se em ores estándar.
miten los erro
Offf Deshabiliita los errores personaliza
ados y permitte que se mu uestren los
errores estándar.
e
Web
b.Config
En un
n archivo Weeb.Config noss podemos encontrar
e con la siguientes sesiones d
de recursos
x A
AppSettingsS
Section
x C
ConnectionSt
tringSection
x N
NetSectionGr
roup
x P
ProtectedCon
nfigurationSe
ection
x S
SerializationS
SectionGroup
x S
SystemWebS
SectionGroup
p
x T
Transactions SectionGrou
up
Cada sección del archivo de configuración

c n equivale a una clase.
Authe
enticationSeection section
henticationSection)WebConfiguration
(Auth nManager.Get
tSection("sy
ystem.web/au
uthentication");
Pages
sSection ps PagesSection)WebConfiigurationMan
nager.GetSec em.web/pages");
ction("syste
Label
l1.Text seection.Mode.ToString();
Label
l1.Text ebConfigurationManager.A
We AppSettings["MyAppSetti
ing"];
Label
l1.Text We
ebConfigurationManager.C
ConnectionSt
trings["Nort nnectionString;
thwind"].Con
Para modificar los valores de un archivo de

d configuracción a nivel de
d Maquina procederem
mos de
la siguiente formaa
Config
guration rootC
Config = WebConfigurationM
Manager.OpenWe
ebConfiguratio
on(null);
Authen
nticationSection section2 =
(Authe tion)rootConfig.GetSection
enticationSect n("system.web/
/authenticatio
on");
sectio
on2.Mode = Aut
thenticationM
Mode.Forms;
rootCo
onfig.Save();
Otra posibilidad es
e indicar el nombre de la aplicación::
Config
guration rootC
Config = WebConfigurationM
Manager.OpenWe
ebConfiguratio
on("/WebSite5");
Authen
nticationSection section2 =
(Authe tion)rootConfig.GetSection
enticationSect n("system.web/
/authenticatio
on");
sectio
on2.Mode = Aut
thenticationM
Mode.Forms;
rootCo
onfig.Save();
Podemos crear un nuevo arch

hivo de confiiguración:
"?
, $
D

Config
guration config = WebConfigurationManag
ger.OpenWebCon
nfiguration("/
/WebSite5");
config
g.SaveAs(Serve
er.MapPath("configuracion.config"), Con
nfigurationSav
veMode.Full, t
true);

El méétodo Configguration.SaveeAs()Escribe en el archivo

o de configuración XML eespecificado los
valores de configuración que incluye estee objeto Configuration.
filen
name
q se va a guardar el arcchivo de configuración.
Ruta de acceso y nombre del archivo en que
saveMode
Valorr de ConfigurrationSaveM
Mode que dettermina los valores
v de prropiedad quee se van a
guarddar.
forceeSaveAll
o no se haya modificado la configuración; de lo contrario, false.
true para guardar aun cuando
El parrametro saveeMode pued

de tomar los siguientes valores:
v
No
ombre de
miembro Descripción
n
Full Hace que toddas las propiedades se es scriban en el archivo de coonfiguración.

Esto es princ
cipalmente úttil para crearr archivos de configuración de
información o para trasla
adar valores ded configurac ción de un eq
quipo a otro.
Minimal Hace que sólo las propieddades que diffieren de los valores heredados se
escriban en el archivo de
e configuració
ón.
Mo
odified Hace que sólo las propieddades modificcadas se escriban en el arrchivo de
configuración, incluso cua
ando el valorr es igual que
e el valor herredado.
Test
1. Yoou catch an unhandled exception

e in a Page Errror handler. How can you access th
he last
e
error?
A. Server.GeetLastError()
()
B. Server.CllearError()
C. Request.G
GetLastErrorr()
D. Applicatiion.GetLastE
Error()
2. Whhich of the foollowing cann you use to catch
c unhand
dled exceptioons in an appplication? (C
Choose
a that apply.)
all
A. Responsee Error
B. Page Errror
C. Applicatioon Error
D. Server Error
E
3. Whhich of the foollowing codde samples correctly retriieves the currrent cookie cconfiguration
n
settings?
"?
, $
D

A VB
A.
Dim section As String
g = WebConfigu
urationManager
r.GetSection _ ("system.we
eb/httpCookies
s")
//C#
string section = WebC
ConfigurationM
Manager.GetSec
ction("system.web/httpCook
kies");
B VB
B.
Dim section As HttpCo
ookiesSection = _ WebConfig
gurationManager.GetSection
n("httpCookies
s")
//C#
HttpCookiesSection se
ection = (Http
pCookiesSectio
on)
onfigurationM
WebCo Manager.GetSec
ction("httpCoo
okies");
C VB
C.
Dim section As String
g = WebConfigu
urationManager
r.GetSection("httpCookies"
")
//C#
string section = WebC
ConfigurationM
Manager.GetSec
ction("httpCookies");
D VB
D.
Dim section As HttpCo
ookiesSection = _
WebCo
onfigurationM
Manager.GetSec
ction("system.web/httpCookies")
//C#
HttpCookiesSection se
ection = (Http
pCookiesSectio
on)
WebCo
onfigurationM ction("system.web/httpCookies");
Manager.GetSec
4. Yoou need to haave ASP.NET T dynamicallly generate Word

W documments when a Web browseer
reequests a filee ending in a .Doc extenssion. How caan you do thiis?
A Implemennt the IPartittionResolver interface.
A.
B Implemennt the IHttpM
B. Module interfface.
C Implemennt the IHttpH
C. Handler interrface.
D Implemennt the IHttpH
D. HandlerFactoory interface.

""?
<

J
,

P

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
"?
" <

J
,

P
<
J
,
J

P
Detterminan
ndo Tipo de Naveg
gador
En ASSP.NET, el obbjeto Requesst contiene unau propiedaad denominaada Browser que devuelvve un
objetto del tipo HtttpBrowserC Capabilities. Este objeto contiene pro
opiedades coomo el nomb bre y
la verrsión del exp
plorador, y laa versión prin
ncipal y secundaria que puede
p utilizar para determinar
el tipo de exploraador cliente.
priva
ate void But
tton1 Click(object sende er, System.EEventArgs e)
{
System.W
Web.HttpBrowserCapabilit ties browserr Request.Browser;
string s "Browser Capabilitiees\n"
+ "T
Type " + browser.Type + "\n"
+ "N
Name " + browser.Browsser + "\n"
+ "V
Version " + browser.Ve
ersion + "\nn"
+ "M
Major Version " + brow
wser.MajorVeersion + "\nn"
+ "M
Minor Version " + brow
wser.MinorVeersion + "\nn"
+ "P
Platform " + browser.P
Platform + "\n"
"
+ "Is Beta " + browser.Be
eta + "\n"
+ "Is Crawler " + browser
r.Crawler + "\n"
+ "Is AOL " + browser.AOLL + "\n"
+ "Is Win16 " + browser.W
Win16 + "\n""
+ "Is Win32 " + browser.W
Win32 + "\n""
+ "Supports Fram mes " + br
rowser.Framees + "\n"
+ "Supports Tables " + br
rowser.Tablees + "\n"
+ "Supports Cookies " + browser.Cook
b kies + "\n"
+ "Supports VBScript " + browser.VBSScript + "\nn"
+ "Supports JavaScript " +
browser.EcmaScriptVersiion.ToStringg() + "\n"
+ "Supports Java Applets " + browser
r.JavaAppletts + "\n"
+ "Supports ActiveX Control ls " + bro
owser.ActiveeXControls
+ "\n";
TextBox1.Text s;
}
Con
ntexto de Página y Aplicación
Objeect Descriptiion
Respoonse En
ncapsula la infformación de la respuesta HTTP
H de una operación
o
AS
SP.NET.
Request Pe
ermite a ASP.NNET leer los valores
v HTTP enviados
e por un
u cliente dura
ante
un
na solicitud Web.
Serveer Prroporciona mé
étodos auxiliarres para proce
esar las solicittudes Web.
"?
" <

J
,

P
Conteext En
ncapsula toda la informació
ón específica de
d HTTP acerca de una solic
citud
HT
TTP individual.

Sessioon Prroporciona acc

ceso a los valo
ores del estad
do de la sesión
n, a la
co
onfiguración de la sesión y a los métodoss de administrración de la
duuración.
Appliication Prroporciona acc

ceso a los valo
ores del estad
do de la aplicación.
Tracee Prroporciona un conjunto de métodos

m y pro
opiedades que
e le ayudan a
re
ealizar el seguimiento de la ejecución del código. No se
e puede hered
dar
es
sta clase.
Req
quest
odos
Méto
MapPath Sobrecargado. Asigna la ruuta de acceso o virtual de la
a dirección URRL solicitada a
una ruta de ac
cceso física del servidor, correspondien
c nte a la soliciitud actual.
SaveAs Guarda una so

olicitud HTTP en el disco.
Prop
piedades
Nombre Descripció
ón
AcceptTypes
s Obtiene un
na matriz de cadenas
c de tipos Accept
MIME admitidos por el cliente.
c
AnonymousIID Obtiene el identificador anónimo dell usuario, si o

hay.
ApplicationP
Path Obtiene la ruta de acceso a la raíz v
virtual de la
aplicación ASP.NET en el
e servidor.
AppRelativeCurrentExecu
utionFilePath Obtiene la ruta de acceso virtual de la raíz de la
aplicación y la hace rela
ativa utilizand
do la notación
de tilde (~) para la raíz
z de la aplicac
ción (como en
"~/page.as spx").
Browser Obtiene o establece

e infoormación ace erca de las
posibilidadees del explorrador del cliente que realiz
za
la solicitud.
ClientCertific
cate Obtiene el certificado de
e seguridad d
del cliente pa
ara
la solicitud actual.
"?
" <

J
,

P
ContentEnco
oding Obtiene o establece
e el juego
j de cara
acteres del
cuerpo de la entidad.
ContentLeng
gth Especifica la longitud de
el contenido enviado por el
e
cliente, en bytes.
ContentType
e Obtiene o establece
e el tipo
t de conte
enido MIME de
e la
solicitud en
ntrante.
Cookies Obtiene un
na colección de
d cookies en
nviada por el
cliente.
CurrentExec
cutionFilePath
h Obtiene la ruta de acceso virtual de la solicitud
actual.
FilePath Obtiene la ruta de acceso virtual de la solicitud

actual.
Files Obtiene la colección de archivos carrgada por el

cliente, en formato MIM
ME de varias p partes.
Filter Obtiene o establece

e el filtro
f que se u
utilizará al leer
la secuencia actual de entrada.
e
Form Obtiene un
na colección de
d variables d
de formulario
o.
Headers Obtiene un
na colección de
d encabezad
dos HTTP.
HttpMethod Obtiene el método de trransferencia de datos HTT TP

(como GET, POST o HE EAD) que utiiliza el cliente.
InputStream
m Obtiene el contenido de
el cuerpo de lla entidad HT
TTP
entrante.
IsAuthentica
ated Obtiene un
n valor que in
ndica si la solicitud se ha
autenticado.
IsLocal Obtiene unn valor que in

ndica si la solicitud es del
equipo loca
al.
IsSecureCon
nnection Obtiene un n valor que in
ndica si la con
nexión HTTP
utiliza sock
kets seguros, es decir, HT TTPS.
Item Obtiene el objeto espec

cificado desde
e las
colecciones
s Cookies, Fo
orm, QueryString o
ServerVariaables.
LogonUserId
dentity Obtiene el tipo WindowsIdentity parra el usuario
actual.
Params Obtiene un
na colección combinada
c dee elementos
QueryString, Form, SerrverVariables y Cookies.
Path Obtiene la ruta de acceso virtual de la solicitud

actual.
PathInfo Obtiene infformación adicional de la ruta de acces

so
de un recurso con extennsión URL.
PhysicalApplicationPath Obtiene la ruta de acceso al sistema a de archivos

físico del directorio raíz de la aplicac
ción de servid
dor
que se está á ejecutando.
PhysicalPath
h Obtiene la ruta de acceso al sistema
a de archivos
"?
" <

J
,

P
físico corre
espondiente a la dirección URL solicitad
da.

QueryString Obtiene la colección de variables de tipo cadena de
consulta HTTP.
RawUrl Obtiene la dirección UR

RL original de la solicitud
actual.
RequestType
e Obtiene o establece
e el método
m de trransferencia ded
datos HTTPP (GET o POS ST) que utiliz
za el cliente.
ServerVariables Obtiene un
na colección de
d variables d
de servidor
Web.
TotalBytes Obtiene el número de bytes

b de la se
ecuencia de
entrada actual.
Url Obtiene infformación ace

erca de la dirrección URL de
d
la solicitud actual.
UrlReferrer Obtiene infformación ace erca de la dirrección URL de

d
la solicitud anterior del cliente que e
establecía un
vínculo conn la dirección URL actual.
UserAgent Obtiene la cadena de ag gente de usu

uario original del
exploradorr del cliente.
UserHostAdd
dress Obtiene la dirección IP del host del c
cliente remotto.
UserHostNam
me Obtiene el nombre DNS
S del cliente rremoto.
UserLanguag
ges Obtiene un
na matriz de cadenas
c ordeenada con las
s
preferencia
as de idioma del cliente.
Timestam
mp.Text Context.Timest
tamp.ToStrin
ng();
Applicat
tionPath.Text Request.Application
nPath;
VirtualP
Path.Text Request.FileePath;
PhysicalPath.Text Server.MapP
Path(Request
t.FilePath);
HttpHead
ders.Text Server.UrlDeecode(Reques
st.Headers.T
ToString()).Replace("&",
"<br>
>");
HttpMeth
hod.Text Request.HttpM
Method;
IsAuthen
nticated.Text Request.IsAuthentic
cated.ToStri
ing();
IsLocal.Text Request.IsLocal.ToString();
;
eConnection.Text
IsSecure Reque
est.IsSecure
eConnection.ToString();
LogonUse
erIdentity.Text Reques
st.LogonUser
rIdentity.To
oString();
TotalReq
questBytes.Text Reques
st.TotalByte
es.ToString(
();
UserAgen
nt.Text Request.UserAg
gent;
IpAddress.Text Request.UserHo
ostAddress;
if (Requuest.UrlReferrer ! nulll)
UrlR
Referrer.Text Request.UrlReferrer
r.ToString();
else
Referrer.Text
UrlR "No refe
errer";
UserLang
guages.Text String.Emp
pty;
foreach (string s in Request.Us
serLanguages
s)
rLanguages.Text + s + "<br>";
User "
"?
" <

J
,

P
Ressponse

Méto
odos
AppendHead
der Agrega un encabezad
do HTTP a la secuencia de
e salida.
Clear Borra to
oda la salida de
d contenido de la secuen
ncia del búferr.
ClearConten
nt Borra to
oda la salida de
d contenido de la secuen
ncia del búferr.
ClearHeaderrs Borra to
odos los encabezados de la secuencia del
d búfer.
End Envía a cliente toda la salida del búfer actual,, detiene la e

ejecución de la
l
página y provoca el evento
e EndReequest.
Flush Envía al cliente toda la salida almacenada en el

e búfer.
Redirect Sobrecargado. Redire

ecciona un cliente a una nueva
n dirección URL.
SetCookie Infraestrructura. Actualiza una coo

okie existente
e en la colecc
ción de cookies.
Prop
piedades
Cookies Obtiene la colección
c de cookies de re
espuesta.
Buffer Obtiene o establece

e un valor que ind
dica si los res
sultados se va
an a almacennar
en el búfer y se van a enviar despuéés de que se haya termina ado de procesar
la respuesta
a completa.
Cache Obtiene la directiva

d de caché
c (por ejemplo, tiemppo de expirac
ción,
configuració
ón de privac dad y cláusulas de variac
ción) de una p
página web.
Expires Obtiene o establece

e los minutos que deben transscurrir antes d
de que caduq que
una página almacenada en la caché de un explorrador. Si el us suario vuelveea
la misma página antes ded que expire, aparece la versión alma acenada en
memoria ca aché. Expiress se proporcio
ona para que
e exista comppatibilidad con
n
las versione
es anteriores de ASP.
Status Establece la
a línea Status
s que se devuelve al clien
nte.
StatusCode Obtiene o establece

e el código
c de estado de HTTP de la salida que se
devuelve all cliente.
Serv
ver
Méto
odos:
ClearError Borra la ex
xcepción anterior.
GetLastError Devuelve la excepción anterior.
HtmlDecode
e Sobrecarggado. Descodifica una cadena que se ha
h codificado para eliminar
caracteres
s HTML no vá
álidos.
HtmlEncode Sobrecarg
gado. Codifica
a una cadena
a que se va a mostrar en un explorado
or.
MapPath Devuelve la ruta de acceso al archivo físico que corresponde

e a la ruta de
acceso virrtual especific
cada en el servidor Web.
Transfer Sobrecarg
gado. Finaliza
a la ejecución de la página
a actual e inic
cia la ejecució
ón
"?
" <

J
,

P
de una nueva página para

p la solicitud actual.
!
UrlDecode Sobrecarggado. Descodifica una cadena que se codificó
c para ssu transmisión
a través de HTTP y des
spués se envió al servidorr en una direc
cción URL.
UrlEncode Sobrecarggado. Codifica

a una cadenaa para una traansmisión HTTTP segura
desde el servidor
s Web hasta el clien
nte a través de
d la direcció
ón URL.
Accediendo a las cab

beceras
Pagee.Header
La propiedad Heaader obtienee una referen
ncia a un objeto HtmlHeaad que se pu uede utilizar para
estab
blecer inform ncabezado del documentto para la páágina. El objeeto HtmlHead le
mación del en
perm
mite agregar información
i como hojas de estilos, re
eglas de estilo, un título y metadatoss al
elemento head.
<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<scri
ipt runat "server">
pro
otected void
d Page Load(object sende
er, System.E
EventArgs e)
{
// Create a Style object for the body of the

e page.
Style body
yStyle new Style();
bodyStyle.ForeColor wing.Color.B
System.Draw Blue;
bodyStyle.BackColor System.Draw
wing.Color.L
LightGray;
e style rule named bodyS

// Add the Style to the
e header
// of the current page. The rule is for the body HTML element.
e
Page.Heade
er.StyleSheet.CreateStyl Style, null, "body");
leRule(bodyS
// Add the
e page title to the head
der element.
.
Page.Heade
er.Title "HtmlHead Exa
ample";
</scr
ript>
<html
l >
<head
d id "head1"
runat "ser
rver">
<title>To be replaced.</title>
</hea
ad>
<body
y>
<fo
orm id "form
m1" runat "server">
<h3
3>HtmlHead Class
C Example</h3>
<as
sp:label id "Label1"
t
text "View
w the HTML source code of
o this pagee to see the
e title
and body style added to the
e header ele
ement."
r
runat "serve
er">
</a
asp:label>
</f
form>
</bod
dy>
</htm
ml>
"?
" <

J
,

P
Test
"
fo mine from thee Request.Brrowser objectt? (Choose all
cann you determ a that
a
apply.)
A. Whether the client haas the .NET Framework
F CLR
C installedd
B. Whether the
t user is loogged on as an
a administraator
C. The user’s e-mail adddress
D. Whether the browser supports ActiveX
E. Whether the
t browser supports JavvaScript
NET search page and want to set thee page title tto “Search reesults:
2. Yoou have creaated an ASP.N
<Query>”.. How can yoou dynamicaally set the paage title?
A. Page.Tiitle
B. Page.Heeader.Title
C. Responsse.Header.Tiitle
D. Responsse.Title
f Reesponse methhods causes ASP.NET too send the cuurrent response to
the browser while allow
wing you to add
a to the ressponse later??
A. Flush
B. Clear
C. End
D. ClearCoontent
)?

##$

A
e
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35

)? #$
A
#$
A
A
ASP.NNet facilita laa consistenciia de un sitio

o web con lass páginas maaestras, que no permiten n
crearr un marco co onsistente, en
e el que cad da página ub
bicará su conttenido. La naavegación facilita
el em
mpleo de la página Web por p parte dell usuario, pro oporcionado o por el mapaa del sitio y/o
o
propo orcionado po or “pistas” que indiquen al usuario có ómo ha llegaado a la página actual.
Pág
ginas Mae
estras
Una página
p maesstra proporciona HTML co ompartido, controles
c y código,
c que p
pueden usarsse
como o una plantillla para todass las páginas de un sitio. Todo lo que aparece en la página maaestra
se mo odas las páginas que utilicen esa página maestra. Por ejemplo
ostrará en to o, podríamoss
tenerr una página maestra con o y un menú; éstos se mo
n un logotipo ostrarán en ccada “hijo” de
d la
págin
na maestra. Todas
T las págginas maestrras tienen unna zona de coontenido en las que
coloccamos el contenido que varía
v en cadaa página hija.
Para Utilizar páginas maestras realizamoss los siguientes pasos:
1. Creamos un sitio web

1 b
2 Agregamos una págin
2. na maestra al
a sitio
3 Agregamos páginas de
3. o basadas en la página maaestra
d contenido

)? #$
A
Se creeará la págin
na maestra con una declaaración de co
ontrol ya colocada:
<asp:ContentPlac
ceHolder id "CPHContenid
do" runat "s
server">
</asp:Co
ontentPlaceHolder>
Este comodín
c serrá lo que relleenará el contenido de la página que use esta pággina maestra (las
págin
nas hijo). En la página maaestra, podem mos añadir lo que queramos alreded dor del contrrol
ConteentPlaceHold der.

)? #$
A
Aña
adir Págin
nas de Cód
digo
Las páginas que añadiremos,
a que utilizaráán esta págin
na maestra, colocará
c todo su conteniido en
el ContentPlaceHolder que heemos añadid do a la páginaa maestra.
Podemos colocarr más de un ContentPlace

C eHolder en una
u página maestra
m (cadaa una tiene si
s
propiio ID)
Una página
p maesstra tiene un controlPlaceeHolder vacío. Este contrrol está llenoo de páginas hijas.
Éstass son archivos .aspx norm
males, con unna directiva Page,
P pero siin las etiquettas <html>,
<formm>, <head> y <body>. To odo el contennido del conttrol hijo se encuentra en la zona
desiggnada en el control
c ConteentPlaceHold
der de la pággina maestra.
Esto nos permitirrá ver el aspeecto de la nueva página cuando

c ombine con la página maestra
se co
en tieempo de ejeccución.
En lass páginas hijas tendremo

os
<%@ Page
P Languag
ge "C#" MasterPageFile "~/MasterPag
" ge.master" AutoEventWir
A reup "true"
File "Default.aspx.cs" Inherits " D
CodeF Default" Tit
tle "Página sin título" %>
<asp:Content ID "Content1" ContentPlace

eHolderID "h
head" Runat "Server">
</asp
p:Content>
<asp:Content ID "Content2" ContentPlace
eHolderID "C
CPHContenido
o" Runat "Se
erver">
</asp
p:Content>
La dirrectiva @Pagge contiene una referenccia al archivo

o MasterPagee de esta pággina .
El con
ntrol Conten
nt tiene una propiedad
p qu
ue lo enlaza con el ConteentPlaceHold
derID
correespondiente
Págiinas Maesstras Anid

dadas
Es no
ormal que quueramos man ntener algunnos elemento plicación, pero
os a lo largo de toda la ap
otross elementos sólo
s se comppartirán en una
u parte de la misma. Po or ejemplo, podríamos tener
un enncabezado que se mantu uviera para to
oda la compaañía, pero taambién elem mentos que se e
manttuvieran en cada
c división
n. ASP.NET noos permite crear páginass anidadas. CCualquier pággina
web puede
p combbinarse con una
u página an nidada, o con la página maestra
m origiinal, lo que sea
s
más ventajoso
v paara cada página.
Edittar Dinám
micamente
e la págin
na maestra
En respuesta a cieertos evento
os, podemos querer cambiar la presentación de laa página maeestra
de una página hija). Para ello, crearem
(desd mos una propiedad pública en la pággina maestra, a la
que las páginas seecundarias puedan
p acced
der y cambiaarla.
publi
ic Image Log
go
{
get { re
eturn this.ILogo; }
set { th
his.ILogo v
value; }
}
Adem
más de definiir las propied
dades en la página
p maesttra, en las hijas tendremos que hacer:
<%@ MasterType
M v
virtualpath "~/MasterPag
ge.master" %>
%

)? #$
A
Propo
orciona un medio
m de crear una refereencia con establecimientto inflexible de tipos a la
págin
na principal de
d ASP.NET cuando
c opiedad Masster tiene acceso a la pággina principaal
la pro
prote
ected void Button1
B Click(object sen
nder, EventA
Args e)
{
this.Maste
er.Logo.ImageUrl "~/imag
genes/inadec
cobn.jpg";
}
Refe
erenciar Controles
C s
Contr
rol c Mast
ter.FindControl("ILogo")
);
Image
e im (Imag
ge)c;
im.Im
mageUrl "~/imagenes/inadecobn.jpg
g";
Carg
gar Págin
nas Maestrras Dinám
micamentte
Estam
mos ante un escenario en
n el que tenggamos difereentes mastesspages y queeramos cargaar
dinám
micamente una
u de ellas para
p las páginas hijas.
Podrííamos hacer:
x Almacenaar en sesión el nombre de

d la masterp
page que queeramos
x Volver a cargar la página

p
Ses
ssion["masterpage"] = "Mas
ster2.master";
;
Res
sponse.Redirect(Request.Ur
rl.ToString())
);
x En el PreIInit cargar la masterpagee necesaria
void Page_
_PreInit(Objec
ct sender, EventArgs e)
{ if (Sess age"] != null)
sion["masterpa
asterPageFile = (String)Se
Ma ession["master
rpage"];
}
Test
1. Whhat is the relaationship bettween masterr and conten

nt pages? (Chhoose the besst answer.)
A. One mastter page for multiple
m conttent pages
B. One conteent page for multiple master pages
C. Multiple content pagees for multiplle master pag
ges
D. One content page for one master page
p
f staatements aboout referencin
ng master paage members is true? (C
Choose
a that apply.)
all
A. Content pages
p can refference privaate propertiess in the mastter page.
B. Content pages
p can refference publiic properties in the masteer page.
C. Content pages
p can refference publiic methods in
n the master page.
D. Content pages
p can refference contrrols in the master page.
3. Y
You are connverting an existing Web
W applicattion to use master pagges. To maaintain
c
compatibility
y, you need to
t read propperties from the master page.
p Whichh of the follo
owing

)? #$
A
cchanges are you

y required to make too .aspx pagees to enable them to woork with a master
m
p
page? (Choosse all that appply.)
A. Addd an “@ MasterType” declaration.
d
B. Add an “@
@ Master” declaration.
d
C. Add a MaasterPageFille attribute too the “@ Pag
ge” declaratioon.
D. Addd a ContenttPlaceHolderr control.
4. Yoou need to dynamically
d change the master pagee of a contennt page. In which page event
shhould you im
mplement thee dynamic chhanging? (Ch
hoose the besst answer.)
A. Paage Load
B. Page Rennder
C. Page PreeRender
D. Page PreeInit
)?

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
)??

& ,
Temaas y Skins La
L característtica de Temaas y Skins de ASP.NET 2.0 0 nos permitee factorizar la
inform
mación de estilo y diseño o en un grup po separado de ficheros, a cuyo conju unto llamamos
"Temma". Un Temaa se puede aplicar a cualq quier sitio de
e forma que afecte a la aapariencia y
entorrno de las pááginas y conttroles del sitiio. Los cambios en el Estiilo de un sitio
o pueden
administrarse reaalizando cammbios al Temaa, sin tener que q editar las páginas dee forma indivvidual.
Los Temas
T tambiéén se pueden compartir con otros de esarrolladorees.
ASP.NNET incluye varias

v caractterísticas parra personalizar la aparien ncia o el estilo de las páginas y
los co
ontroles de nuestra
n apliccación. Los co
ontroles soportan un mo odelo de objeeto Style parra
estabblecer las pro
opiedades dee estilo como o fuentes, boordes, colorees de fondo y primer plan no,
anchuura, altura, etc.
e Los controles tambiéén soportan completame
c ente "Cascading Style She eets"
(CSS) para factoriizar los ajustes de estilo de
d forma sep parada de lass propiedadees de los
contrroles. Podemmos definir laa información n de los estilos como pro opiedades dee los controle es o
CSS, o podemos definir
d esta información en grupos de e ficheros seeparados llammados Theme
(Tema), que se ap plicarán a tod das o una paarte de las pááginas de la aplicación.
a Los estilos de
e
contrroles individu
uales se espeecifican como un Skin de entro de un Tema.
T
Apliicando esstilos a Controles

C s
La Web es un enttorno flexiblee para las intterfaces de usuario,
u con variaciones
v eextremas en el
aspeccto de difereentes Web Sites. La adopción generallizada de "Caascading Stylle Sheets" (C CSS)
es la responsablee de los ricos diseños quee podemos encontrar en la Web. Tod dos los contro
oles
de seervidor de ASSP.NET y los controles
c dee servidor weeb has sido diseñados
d para soportar los
l
estilo
os CSS de primera clase. Esta
E sección discute cóm mo utilizar esttos estilos ju
unto con controles
de seervidor y nos muestra el buen
b control que nos prooporcionan sobre
s la aparriencia de
nuesttros Formulaarios Web.
Apliicando estilos a con

ntroles httml
Las etiquetas estándar HTMLL soportan CSS a través del d atributo "style" (estiilo), que se puede
p
fijar a una lista dee parejas atributo/valor delimitada
d por
p puntos y comas. Todo os los contro
oles
HTML de servidorr de ASP.NETT pueden aceeptar estilos de la mismaa forma que las etiquetass
HTML estándaress. El siguientee ejemplo vaarios estilos aplicados
a a diferentes
d co
ontroles de
serviddor. Si obserrvamos el código fuente de la página devuelta al cliente, vereemos que esttos
estilo
os se pasan ala navegador en la repressentación de los controlees.
)??
<%@ Page
P Languag
ge "C#" %>
<html
l>
<body
y>
<h3
3><font face
e "verdana">A
Applying Sty
yles to HTML
L Controls</
/font></h3>
<p>
><font face "verdana"><h4>Styled Sp
pan</h4></fo
ont><p>
<sp
pan id "Spann1" style "font: 12pt ve
erdana; colo
or:orange;foont weight:700"
runat
t "server">
This is soome literal text inside a styled sp
pan control
</s
span>
<p>
><font face "verdana"><h4>Styled Bu
utton</h4></
/font><p>
<bu
utton id "Bu
utton1" style "font: 8pt
t verdana;ba
ackground co
olor:lightgr
reen;border
color
r:black;widt
th:100" runat "server">C
Click me!</b
button>
<p>
><font face "verdana"><h4>Styled Te
ext Input</h
h4></font><p
p>
)??
Ent
ter some tex
xt: <p>
<in
nput id "Tex
xt1" type "text" value "One,
" Two, Three"
T style
e "font: 14p
pt
verda
ana;backgrou
und color:yellow;border style:dashe
ed;border co
olor:red;wid
dth:300;"
runat
t "server"/>
>
<p>
><font face "verdana"><h4>Styled Se
elect Input<
</h4></font>
><p>
Sel
lect an item
m: <p>
<se
elect id "Se
elect1" style "font: 14p
pt verdana;b
background
r:lightblue;color:purple;" runat "s
color server">
<
<option>Item
m 1</option>
<
<option>Item
m 2</option>
<
<option>Item
m 3</option>
</s
select>
><font face "verdana"><h4>Styled Ra

<p> adio Buttons
s</h4></font
t><p>
Sel
lect an option: <p>
<sp
pan style "f
font: 16 pt verdana;font
v t weight:300
0">
<in
nput id "Rad
dio1" type "radio" name "Mode" chec
cked style "width:50;ba
" ackground
r:red;zoom:200%" runat "server"/>Op
color ption 1<br>
<in dio2" type "radio" name "Mode" styl
nput id "Rad le "width:50
0;background
d
color ption 2<br>
<in dio3" type "radio" name "Mode" styl
nput id "Rad le "width:50
0;background
d
color ption 3
</s
span>
</bod
dy>
</htm
ml>
CSS también defina un atributo de clase que q puede fijjarse a una definición
d de estilo CSS
conteenida en unaa sección <styyle>...</stylee> del docum mento. El atributo de classe hace más
sencillo definir los estilos unaa vez y aplicarlos a diferentes etiquetas sin tener que redefiniir el
o. Los estilos en controless HTML de seervidor tamb
estilo bién se pued
den estableceer de esta forma,
tal y como
c muesttra el siguiente ejemplo.
<%@ Page
P Languag
ge "C#" %>
<html
l>
<head
d>
<st
tyle>
e
.spanstyle
{
font: 12pt verdana;
font weight:700;
w
color:orange;
}
.buttonsty
yle
{
font: 8pt verdana;
backgr
round color:lightgreen;
r color:black;
border
width:100
}
.inputstyle
{
font: 14pt verdana;
backgr
round color:yellow;
r style:dashed;
border
border
r color:red;
width:300;
}
.selectsty
yle
{
font: 14pt verdana;
round color:lightblue;
backgr
color:purple;
}
.radiostyle
{
)??
width:50;
backgr
round color:red;
zoom:200%
}
</s
style>
</hea
ad>
<body
y>
<h3
3><font face
e "verdana">A
Applying Sty
yles to HTML
L Controls</
/font></h3>
<p>
><font face "verdana"><h4>Styled Sp
pan</h4></fo
ont><p>
<sp
pan id "Span
n1" class "sp
panstyle" ru
unat "server
r">
This is so
ome literal text inside a styled sp
pan control
</s
span>
<p>
><font face "verdana"><h4>Styled Bu
utton</h4></
/font><p>
<bu
utton id "Bu
utton1" class "buttonsty
yle" runat "server">Cli
" ick me!</but
tton>
<p>
><font face "verdana"><h4>Styled Te
ext Input</h
h4></font><p
p>
Ent
ter some tex
xt: <p>
<in
nput id "Tex
xt1" type "text" value "One,
" Two, Three"
T class
s "inputstyle"
runat
t "server"/>
>
<p>
><font face "verdana"><h4>Styled Se
elect Input<
</h4></font>
><p>
Sel
lect an item
m: <p>
<se
elect id "Se
elect1" class "selectsty
yle" runat "server">
"
<
<option>Item
m 1</option>
<
<option>Item
m 2</option>
<
<option>Item
m 3</option>
</s
select>
<p>
><font face "verdana"><h4>Styled Ra
adio Buttons
s</h4></font
t><p>
lect an option: <p>

Sel
<sp
pan style "f
font: 16 pt verdana;font
v t weight:300
0">
<in
nput id "Rad
dio1" type "radio" name "Mode" chec
cked class "radiostyle"
"
runat >Option 1<br>
t "server"/>
<in dio2" type "radio" name "Mode" clas
nput id "Rad ss "radiosty
yle" runat "server"/>Option
2<br>
>
<in dio3" type "radio" name "Mode" clas
nput id "Rad ss "radiosty
yle" runat "server"/>Option
3
</s
span>
</bod
dy>
</htm
ml>
Cuando se analizaa una páginaa ASP.NET, laa informaciónn de estilo see rellena den
ntro de una
propiiedad Style (del tipo CssSStyleCollection) dentro de
d la clase
Syste
em.Web.UI.H HtmlControls.HtmlContrrol. Esta prop piedad es, essencialmentee, un diccionario
que muestra
m los estilos
e del co
ontrol como grupos de vaalores indexaados por cad denas, para cada
c
clave de "styleatttibute". Por ejemplo, po
odemos usar el siguiente código para fijar y,
conseecuentemente, obtener el atributo de d estilo "widdth " (ancho)) de un contrrol de servidor
HtmlInputText.
<scri
ipt language
e "C#" runat "server" >
v
void Page Lo
oad(Object sender, Event
tArgs E) {
MyText.Style["width"] "90px";
;
Response
e.Write(MyText.Style["wi
idth"]);
}
</scr
ript>
)??
<inpu
ut type "tex
xt" id "MyText" runat "s
server"/>

<%@ Page
P Languag
ge "C#" %>
<html
l>
ipt language
v
void Page Lo
oad(Object Src, EventArg
gs E ) {
Message.InnerHtml + "<h5>Acces
ssing Styles
s...</h5>";
Message.InnerHtml + "The color

r of the spa
an is: " + MySpan.Style
M e["color"] +
"<br>
>";
Message.InnerHtml + "The width
h of the tex
xtbox is: " + MyText.St
tyle["width"] +
"<p>"
";
Message.InnerHtml + "MySelect's style col

llection is: <br><br>";
ator keys
IEnumera M
MySelect.Sty
yle.Keys.Get
tEnumerator(
();
while (k
keys.MoveNext()) {
String key Current;

(String)keys.C
Message.InnerHtm
ml + "<li>&
;";
Message.InnerHtm
ml + key + " " + MySellect.Style[k
key] + "<br>
>";
}
}
v
void Submit Click(Object Src, Event
tArgs E ) {
Message.InnerHtml + "<h5>Modif
fying Styles
s...</h5>";
MySpan.Style["color"] ColorSeelect.Value;
;
MyText.Style["width"] "600";
Message.InnerHtml + r of the spa

"The color an is: " + MySpan.Style
M e["color"] +
"<br>
>";
Message.InnerHtml + "The width
h of the tex tyle["width"];
xtbox is: " + MyText.St
}
</scr
ript>
<body
y>
<fo
orm id "Form
m1" runat "server">
<h3><font face "verdana">Programm

matically Ac
ccessing Sty
yles</font><
</h3>
<div stylee "font: 8pt verdana;bac

ckground col
lor:cccccc;b
border color
r:black;border
width
h:1;border style:solid;ppadding:1,10
0,25,10">
<span id "Message" EnableViewwState "fals
se" runat "s
server"/>
<p>
Selectt a color for the span: <p>
<selecct id "ColorSelect" styl
le "font: 11
1pt verdana;font weight
t:700;"
runat
t "server">
<opt
tion>red</option>
tion>green</option>
<opt
<opt
tion>blue</op
ption>
</seleect>
<input bmit" runat "server" Va
t id "Submit1" type "sub alue "Change
e Style"
OnSer
rverClick "Submit Click">
</div>
<p><font face
f "verdana"><h4>Style
ed Span</h4>
></font><p>
<span id "MySpan" style "font: 12

2pt verdana; nge;font weight:700"
; color:oran
runat
t "server">
This is some literal text ins
side a style
ed span cont
trol
</span>
<p><font face
ed Button</h
h4></font><p
p>
<button id
d "MyButton" style "font
t: 8pt verda und color:lightgreen;border
ana;backgrou
color
r:black;widt
th:100" runat "server">C
Click me!</b
button>
)??
<p><font face
ed Text Inpu
ut</h4></fon
nt><p>
!
Enter some
e text: <p>
<input id "MyText" typ
pe "text" va
alue "One, Two,
T Three" style "font
t: 14pt
verda
ana;backgrou
und color:yellow;border style:dashe
ed;border co
olor:red;wid
dth:300px;"
runat
t "server"/>
>
<p><font face
ed Select In
nput</h4></f
font><p>
Select an item: <p>

<select idd "MySelect" style "font
t: 14pt verd
dana;backgro
ound
color
r:lightblue;color:purple;" runat "sserver">
<option>>Item 1</option>
</select>
<p><font face
ed Radio But
ttons</h4></
/font><p>
Select an option: <p>

<span style "font: 16 pt verdana;
;font weight
t:300">
<input
t id "MyRadio1" type "ra
adio" name "Mode"
" check
ked
style
e "width:50;background color:red;zo
oom:200%" ru
unat "serverr"/>Option 1<br>
<input
adio" name "Mode"
" e "width:50;background
style
color
ption 2<br>
<input
adio" name "Mode"
" style
e "width:50;background
color ption 3
</span>
<
</form>
</bod
dy>
</htm
ml>
Apliicando Esstilos a Controles de Servido

or
Los coontroles Weeb de Sevidorr proporcionan un nivel adicional
a de soporte paraa estilos,
añadiendo varias propiedades fuertemen nte tipadas para los ajustees de estilos más usadoss,
tales como color de fondo, noombre y tam maño de la fuente, etc. Esstas propiedaades de estilo o
repreesentan un subconjunto de los comportamientoss de estilo dissponibles en HTML y se
repreesentan como propiedades llanas acccesibles direcctamente a través
t de la cclase base
Syste
em.Web.UI.W WebControlss.WebContro ol. La ventaja de usar esttas propiedaades es que
propoorcionan commprobación en tiempo de compilació ón y finalizacción de declaaraciones en
herraamientas de desarrollo coomo Microso oft Visual Stu
udio .NET.
El siguiente ejemplo muesta un u control WebCalendar

W r con varios estilos
e aplicaados a él (se
incluyye un calend
datio sin estillos aplicadoss para contraastar). Obserrvad que al fiijar una
propiiedad que ess un tipo de clase,
c por ejeemplo Font, necesitamoss usar la sinttaxis de
subpropiedad Pro opertyNameSubPropertyyName.
)??
"
<%@ Page
P Languag
ge "C#" %>
<html
l>
<body
y>
)??
<fo
orm id "Form
m1" runat "server">
<h3><font face "verdana">Applying

g Styles to Web Control
ls</font></h
h3> )
<p><font face
e Properties
s</h4></font
t><p>
<b>No Style:</b>
<p>
<ASP:Calen
ndar ID "Calendar1" runa
at "server" />
<p>
</b>
<b>Style:<
<p>
<ASP:Calen
at "server"
BackC
Color "Beige"
ForeC
Color "Brown"
Borde
erWidth "3"
Borde
erStyle "Solid"
Borde
erColor "Black"
Heigh
ht "450"
Width
h "450"
Font Size "12pt"
Font Names "Tahomma,Arial"
Font Underline "false"
CellSpacing 2
CellP
Padding 2
GridLines true
ShowG
/>
<
</form>
</bod
dy>
</htm
ml>
El esp
pacio de nommbres System m.Web.UI.W WebControls incluye una clase base Style que
encappsula los atriibutos de esttilo comuness (las clases adicionales
a d estilo, com
de mo TableStyle y
TableeItemStyle heredan de esta clase basse común). VariosV controoles Web de servidor dann
accesso a propiedaades de estee tipo para esspecificar el estilo de elementos indivviduales de
repreesentación del control. Por ejemplo, da acceso a propiedad des de accesoo como: DayyStyle,
WeekkendDayStyle, TodayDayyStyle, SelecctedDayStyle e, OtherMon nthDayStyle y NextPrevSStyle.
Podemos fijar pro opiedades inndividuales para estos estilos mediante la sintaxiss de subprop piedad
PropeertyNameSu ubPropertyN Name, como muestra
m el siguiente ejem
mplo.
)??
<%@ Page
P Languag
ge "C#" %>
<html
l>
<body
y>
orm id "Form
<fo m1" runat "server">

ls</font></h
h3>
<p><font face
e Sub Proper
rties</h4></
/font><p>
<ASP:Calen
at "server"
BackC
Color "Beige"
Color "Brown"
ForeC
Borde
erWidth "3"
erStyle "Solid"
Borde
erColor "Black"
Borde
Heigh
ht "450"
Width
h "450"
Font Size "12pt"
CellSpacing 2
CellP
Padding 2
GridLines true
ShowG
Title
eStyle BorderColor "dark
kolivegreen"
"
Title
eStyle BorderWidth "3"
Title
eStyle BackColor "olived
drab"
Title
eStyle Height "50px"
)??
DayHe
eaderStyle BorderColor "darkolivegr
" reen"
DayHe
eaderStyle BorderWidth "3"
"
DayHe
eaderStyle BackColor "ol
livedrab"
DayHe
eaderStyle ForeColor "bl
lack"
DayHe
eaderStyle Height "20px"
"
DaySt
tyle Width "50px"
tyle Height "50px"
DaySt
yDayStyle BorderWidth "3

Today 3"
WeekE
EndDayStyle BackColor "p
palegoldenro
od"
WeekE
EndDayStyle Width
W "50px"
"
WeekE
EndDayStyle Height "50px
x"
Selec
ctedDayStyle BorderColor
r "firebrick
k"
Selec
ctedDayStyle BorderWidth
h "3"
Other
rMonthDayStyle Width "50
0px"
Other
rMonthDayStyle Height "5
50px"
/>
<
</form>
</bod
dy>
</htm
ml>
Una sintaxis
s ligeramente diferente permitte declarar cada
c propied
dad de Style ccomo un
elemento hijo, annidado dentrro de las etiq
quetas del co
ontrol Web de servidor.
<ASP:Calendar ... runat "server">

<
<TitleStyle green" Borde
BorderColor "darkoliveg erWidth "3"
BackkColor "olivedrab" Heigh
ht "50px" />
>
</ASP
P:Calendar>
<%@ Page
P Languag
ge "C#" %>
<html
l>
<body
y>
<fo
orm id "Form
m1" runat "server">

<h3><font face "verdana">Applying ls</font></h
h3>
<p><font face
e Sub Proper
rties</h4></
/font><p>
<ASP:Calen
ndar id "MyCalendar" run
nat "server"
"
BackC
Color "Beige"
Color "Brown"
ForeC
Borde
erWidth "3"
erStyle "Solid"
Borde
erColor "Black"
Borde
Heigh
ht "450"
Width
h "450"
Font Size "12pt"
CellSpacing 2
CellP
Padding 2
GridLines true
ShowG
>
<TitleStyle BorderColor "darrkolivegreen

n" BorderWid
dth "3"
BackC
Color "olive
edrab" Height "50px" />
<DayH
HeaderStyle BorderColor "darkoliveg
green" Borde
erWidth "3"
BackC edrab" ForeColor "black"
Color "olive " Height "20
0px" />
<Week
kEndDayStyle BackColor "palegoldenr
" rod" Width "50px"
" Heigh
ht "50px" />
<DayStyle Width "50px" Heigh

ht "50px" />
>
)??
<Toda
ayDayStyle BorderWidth "3"
" />

<Sele
ectedDayStyle BorderColo
or "firebric
ck" BorderWi
idth "3" />
<Othe
erMonthDayStyle Width "5
50px" Height
t "50px" />
</ASP:Calendar>
<
</form>
</bod
dy>
</htm
ml>
De la misma form
ma que con lo os controles HTML de servidor, podemos aplicar estilos a
contrroles Web dee servidor meediante una definición de clase CSS. La clase basee WebControl
perm o a una propiedad String llamada CsssClass para establecer la clase estilo.
mite el acceso
<%@ Page
P Languag
ge "C#" %>
l>
<html
<head
d>
<st
tyle>
.calstyle { font size:12pt; font fa
amily:Tahoma
a,Arial; }
</s
style>
</hea
ad>
<body
y>
<fo
orm id "Form
m1" runat "server">

ls</font></h
h3>
<p><font face
f "verdana"><h4>The CssClass
C Pro
operty</h4><
</font><p>
<ASP:Calen
ndar ID "Calendar1" CssC
Class "calst
tyle" runat "server"
BackC
Color "Beige"
Color "Brown"
ForeC
Borde
erWidth "3"
erStyle "Solid"
Borde
erColor "Black"
Borde
Heigh
ht "450"
Width
h "450"
CellSpacing 2
CellP
Padding 2
GridLines true
ShowG
Title
eStyle BorderColor "dark
kolivegreen"
"
Title
eStyle BorderWidth "3"
Title
eStyle BackColor "olived
drab"
Title
eStyle Height "50px"
DayHe
eaderStyle BorderColor "darkolivegr
" reen"
DayHe
eaderStyle BorderWidth "3"
"
DayHe
eaderStyle BackColor "ol
livedrab"
DayHe
eaderStyle ForeColor "bl
lack"
DayHe
eaderStyle Height "20px"
"
DaySt
tyle Width "50px"
tyle Height "50px"
DaySt
yDayStyle BorderWidth "3

Today 3"
WeekE
EndDayStyle BackColor "p
palegoldenro
od"
WeekE
EndDayStyle Width
W "50px"
"
WeekE
EndDayStyle Height "50px
x"
Selec
ctedDayStyle BorderColor
r "firebrick
k"
Selec
ctedDayStyle BorderWidth
h "3"
Other
rMonthDayStyle Width "50
0px"
Other
rMonthDayStyle Height "5
50px"
)??
/>
<
</form>
</bod
dy>
</htm
ml>
Si se establece un n atributo enn un control de

d servidor que
q no correesponda a un na propiedad d
fuertemente tipada del control, el atributto y el valor ses rellenan en
e el grupo AAttributes del
contrrol. Por defeccto, los controles de servvidor represe
entarán estoos atributos ssin modificarrlos
en el HTML devueelto al naveggador clientee que los hayya pedido. Essto significa qque los atributos
de esstilo y clase se
s pueden esstablecer direectamente en e controles Web de servvidor, en lugaar de
usar las propiedades fuertem mente tipadass. Mientras que
q esto requiere algo dee comprensión de
la rep
presentación n real del con
ntrol, tambiéén puede serr una forma flexible
f de applicar estilos. Esto
es especialmentee útil para loss controles de
d entrada de e formulario estándares cómo verem mos
en el siguiente ejeemplo.
<%@ Page
P Languag
ge "C#" %>
<html
l>
<head
d>
<st
tyle>
.beige { bac
ckground color:beige }
</s
style>
</hea
ad>
<body
y>
<fo
orm id "Form
m1" runat "server">

ls</font></h
h3>
<p><font face
f "verdana"><h4>Expan
ndo CSS Styl
les</h4></fo
ont><p>
<table sty
yle "font: 10pt verdana;
; background
d color:tan"
" cellspacin
ng 15>
<tr>
<td><b
b>Login: </b></td>
ASP:TextBox ID "TextBox1
<td><A 1" runat "se
erver" class
s "beige" st
tyle "font
weigh
ht:700;"/></td>
</tr>
<tr>
<td><b
b>Password: </b></td>
)??
<td><AASP:TextBox ID "TextBox22" TextMode "Password" runat "servver"

class
s "beige"/><</td>
</tr>
<tr>
<td><bb>Select a View: </b></ttd>
<td>
<ASP
P:DropDownList ID "DropDDownList1" class
c "beigee" runat "se
erver">
<ASP:ListItem>Default Desktop</ASP
D P:ListItem>
<ASP:ListItem>My Stock Portfolio</
/ASP:ListIteem>
<ASP:ListItem>My Contac
ct List</ASP
P:ListItem>
</ASP:DropDownList>
</td>
</tr>
<tr>
<td>&nnbsp;</td>
<td><AASP:Button ID "Button1" Text "Submiit" runat "sserver" class "beige"/></td>
</tr>
</table>
<
</form>
</bod
dy>
</htm
ml>
Los estilos de los controles Web

W de servid dor se puede
en establecerr mediante ccódigo utilizaando
el méétodo ApplySStyle de la cllase base We
ebControl, có
ómo vemos en el siguien nte código
<%@ Page
P Languag
ge "C#" %>
<%@ Import
I Namespace "System
m.Drawing" %>
%
<html
l>
<head
d>
<st
tyle>
.beige { bac
ckground color:beige }
</s
style>
</hea
ad>

ipt language
v
void oad(Object Src, EventArg
Page Lo gs E ) {
System.W
Web.UI.WebControls.Style
e style ne
ew System.We
eb.UI.WebCon
ntrols.Style();
style.Bo
orderColor Color.Black
k;
style.Bo
orderStyle BorderStyle
e.Dashed;
style.Bo
orderWidth 1;
MyLogin.ApplyStyle (style);
MyPasswo
ord.ApplyStyle (style);
t.ApplyStyle (style);
MySubmit
}
</scr
ript>
<body
y>

orm id "Form

ls</font></h
h3>
<p><font face
f "verdana"><h4>Apply
ying Styles Programmati
ically</h4><
</font><p>
<table sty
yle "font: 10pt verdana;
; background
d color:tan"
" cellspacin
ng 15>
<tr>
<td><b
b>Login: </b></td>
ASP:TextBox id "MyLogin"
<td><A " runat "ser
rver" class "beige" sty
yle "font
weigh
ht:700;"/></td>
</tr>
<tr>
<td><b
b>Password: </b></td>
)??
<td><AASP:TextBox id "MyPasswoord" TextMod

de "Passwordd" runat "se
erver"
class
s "beige"/><</td>
</tr>
<tr>
<td><bb>Select a View: </b></ttd>
<td>
<ASP
P:DropDownList id "MySellect" class "beige" runnat "server">
<ASP:ListItem>Default Desktop</ASP
D P:ListItem>
<ASP:ListItem>My Stock Portfolio</
/ASP:ListIteem>
<ASP:ListItem>My Contac
ct List</ASP
P:ListItem>
</ASP:DropDownList>
</td>
</tr>
<tr>
<td>&nnbsp;</td>
<td><AASP:Button id "MySubmit"" Text "Subm
mit" runat "server"
"
class
s "beige"/><</td>
</tr>
</table>
<
</form>
</bod
dy>
</htm
ml>
Usa
ar Temas para perrsonaliza
ar un sitio
En la sección anteerior vimos varias
v formass de especificar estilos a los controles fijando las
propiiedades de loos estilos en los propios controles. Po
or ejemplo, consideremo
c os la siguientte
)??
págin
na, qué tienee varios ajusttes del estilo aplicados a los controles individualees de la págin
na.

<%@ Page
P Languag
ge "C#" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head ver">
)??
<ti
itle>Page with No Theme Applied</ti itle>
</hea
ad>
<body
y> !
<fo
orm id "form m1" runat "server">
<
<div>
<h3>
Page witth No Theme Applied</h3>
A >
<asp:Label ID "Label1" runat "serrver" Text "Hello
" 1" Fo
ont Bold "trrue"
ForeC
Color "orang ge" /><br />
" 2" Fo
ont Bold "trrue"
ForeC
" 3" Fo
ont Bold "trrue"
ForeC
<br />
This is soome example text: The qu
uick brown fox
f jumped over
o the lazy dog.<br />
<br />
<asp:Calenndar BackColor "White" BorderColor
B rderStyle "Solid"
"Black" Bor
CellS
Spacing "1"
Font Nammes "Verdana" Font Size "9pt" ForeC
Color "Blackk" Height "250px"
ID "C
Calendar1"
NextPrevvFormat "ShortMonth" run
nat "server"
" Width "3300px">
<SelecteedDayStyle BackColor "#3
333399" Fore
eColor "Whitte" />
<OtherMoonthDayStyle ForeColor "#999999"
" />
>
<TodayDaayStyle BackColor "#9999
999" ForeCol
lor "White" />
<DayStyle BackColor "#CCCCCC" />
/
<NextPreevStyle Font Bold "True"
" Font Size "8pt" ForeCColor "Whitee" />
<DayHeadderStyle Font Bold "True
e" Font Size
e "8pt" ForeeColor "#333333"
Heigh
ht "8pt" />
<TitleSttyle BackColor "#333399"
" BorderStyl
le "Solid" Font
F Bold "T
True" Font
Size "12pt"
ForeCo
olor "White" Height "12p
pt" />
</asp:Caleendar>
<br />
<asp:GridVView AutoGenerateColumns
s "False" Ce
ellPadding "4"
" Names "au id"
DataKeyN
DataS
SourceID "Sq qlDataSource1"
ForeColoor "#333333" GridLines "None"
" ID "G
GridView1" runat
r "serve
er"
Width
h "461px">
<FooterStyle BackColor "#1C5E555" Font Bold
d "True" ForreColor "White" />
<Columns>
<asp:B
BoundField DataField "au
u id" Header
rText "au idd" ReadOnly "True"
SortE
Expression "au id" />
<asp:B
u lname" Hea
aderText "auu lname"
SortE
Expression "au lname" />
<asp:B
u fname" Hea
aderText "auu fname"
SortE
Expression "au fname" />
<asp:B
BoundField DataField "st
tate" Header
rText "statee" SortExpreession "state" />
</Columnns>
<RowStyle BackColor "#E3EAEB" />
/
<PagerSttyle BackColor "#666666"
" ForeColor "White" HorrizontalAliggn "Center" />
<SelecteedRowStyle BackColor "#C
C5BBAF" Font
t Bold "Truee" ForeColorr "#333333" />
<HeaderStyle BackColor "#1C5E555" Font Bold
d "True" ForreColor "White" />
<EditRowwStyle BackColor "#7C6F5
57" />
<AlternaatingRowStyle BackColor "White" />
</asp:GriddView>
<asp:SqlDaataSource ConnectionStri
ing "<%$ Con
nnectionStriings:Pubs %>>"
ID "S
SqlDataSourc ce1"
runat "server" SelectCommand "SSELECT [au id],
i [au lna
ame], [au fnname], [state]
FROM [authors]"> >
</asp:SqlDDataSource>
<
</div>
</f
form>
</bod
dy>
</htm
ml>
Ademmás de especcificar estiloss en controlees individuale es, ASP.NET 2.0

2 introduce Temas, loss
cualees nos ofreceen una manera fácil de deefinir estilos para controles y páginass de nuestro sitio,
de forma separad da a las págin nas de nuesttra aplicación mas es que puedes
n. El beneficio de los Tem
diseñ ue actualizar las
ñar un sitio siin preocuparrte por el esttilo y aplicarllo más tardee sin tener qu
páginnas o el códiggo de la apliccación. Tamb bién puedes obtener tem mas personalizados de un na
fuentte externa paara aplicar ajjustes estilístticos a tu aplicación. Otro beneficio ees que los ajustes
)??
de esstilo estan alm

macenados ene una únicaa ubicación y pueden ser mantenidoss de forma
indep ón a la que see le aplica el Tema.
pendiente dee la aplicació "
El siguiente ejemplo muestra la misma páágina con un tema aplicado para espeecificar los ajustes
de esstilo para el control.
c Obseervad que la página en síí mismo no necesita
n conttener ningunna
informmación de estilo. El temaa aplica auto
omáticamentte las propieddades de esttilo a los controles
en la página en tiempo de ejeecución.
me cs.aspx
Them
<%@ Page
P Languagge "C#" Theme "ExampleTh
heme" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//ENN"
"http
p://www.w3.o org/TR/xhtml1/DTD/xhtml1
1 transition
nal.dtd">
<html
l xmlns "htt tp://www.w3.org/1999/xht
tml">
<head ver">
itle>Page with Example Theme Applie
<ti ed</title>
</hea
ad>
<body
y>
<fo
orm id "form m1" runat "server">
<
<div>
<h3>
Page witth Example Theme Applied
d</h3>
" 1" />
><br />
" 2" />
><br />
" 3" />
><br />
<br />
This is soome example text: The qu
uick brown fox
f jumped over
o the lazy dog.<br />
<br />
<asp:Calenndar ID "Calendar1" runa
at "server"/
/>
<br />
<asp:GridVView ID "GridView1" Auto
oGenerateCol
lumns "Falsee"
DataS
SourceID "Sq qlDataSource1"
DataKeyNNames "au id" runat "ser
rver">
<Columns>
<asp:B
u id" Header
rText "au idd" ReadOnly "True"
SortE
Expression "au id" />
<asp:B
u lname" Hea
aderText "auu lname"
Expression "au lname" />
SortE
<asp:B
u fname" Hea
aderText "auu fname"
SortE
Expression "au fname" />
<asp:B
BoundField DataField "st
tate" Header
rText "state ession "state" />
e" SortExpre
</Columnns>
</asp:GriddView>
<asp:SqlDaataSource ConnectionStri
ing "<%$ Con
nnectionStriings:Pubs %>
>"
ID "S
SqlDataSourc ce1"
runat "server" SelectCommand "SSELECT [au id],
i [au lna name], [state]
ame], [au fn
FROM [authors]"> >
</asp:SqlDDataSource>
<
</div>
</f
form>
</bod
dy>
</htm
ml>
mpleSkin.sk
Exam kin
<asp:Label Font Bold "true" ForeColor "orange"
" run
nat "server"
" />
<asp:Calendar Ba
ackColor "White" BorderC
Color "Black
k" BorderStyyle "Solid" CellSpacing "1"
Fon
nt Names "Ve
erdana" Font Size "9pt" ForeColor "Black"
" Heigght "250px"
Nex t "ShortMonth" Width "33
xtPrevFormat 30px" runat "server">
<Se
electedDaySt " ForeColor "White" />
tyle BackColor "#333399"
<Ot
therMonthDay
yStyle ForeColor "#99999
99" />
)??
<To
odayDayStylee BackColor "#999999" FooreColor "Wh
hite" />
<Da
ayStyle BackkColor "#CCCCCC" />
<Ne
extPrevStylee Font Bold "True" Font Size "8pt" ForeColor "White"
" /> )
ayHeaderStyle Font Bold "True" Font
<Da " ForeColor "#333333" H
t Size "8pt" Height "8pt" />
<Ti
itleStyle BaackColor "#333399" BordeerStyle "Sol
lid" Font Bo Font Size "12pt"
old "True" F
F
ForeColor "WWhite" Height "12pt" />
</asp
p:Calendar>
<asp:GridView CeellPadding "4"

For
reColor "#333333" GridLines "None" Width "461ppx" runat "s
server">
<Fo
ooterStyle BackColor
B "#1C5E55" Font
t Bold "True
e" ForeColor
r "White" />
>
<Ro
owStyle BackkColor "#E3EA
AEB" />
<Pa
agerStyle BaackColor "#666666" ForeC
Color "White
e" Horizonta
alAlign "Cen
nter" />
<Se
electedRowSttyle BackColor "#C5BBAF" eColor "#333333" />
<He
eaderStyle BackColor
B "#1C5E55" Font
t Bold "True
e" ForeColor
r "White" />
>
ditRowStyle BackColor "#7C6F57" />
<Ed
<Al
lternatingRoowStyle BackColor "White
e" />
</asp
p:GridView>
La caarpeta App Themes

Los teemas residenn en la carpeeta App_Themes, directaamente bajo el directorio o raíz. Un tem
ma
consiste en un subdirectorio bajo
b esta carrpeta que co ontiene un grrupo de uno o mas ficherros
Skin, con extensióón .skin. UnU tema pued de contener también un fichero CSS y/o subdirecctorio
para ficheros estááticos, por ejjemplo imággenes. La sigu
uiente figuraa muestra el directorio
App__Themes con n dos temas definidos,
d llaamados "Deffault" y "White", cada uno de los cuales
tiene un sólo fichero skin y unno CSS.
Observad en el ejjemplo previio que los co ontenidos de un fichero skin

s son simp plemente
definiciones de coontrol, tal y como
c ellas deben
d apareccer en la pággina. Un ficheero de skin puede
p
conteener varias definiciones
d d control, por
de p ejemplo una u definició ón por cada ttipo de contrrol.
Las propiedades ded controless definidas en n el tema sob breescriben automáticam mente los valores
de la propiedad loocal de un co ontrol del mismo tipo en n la página en
n la que apliccamos el temma.
Por ejemplo,
e una definición ded un control del tipo <assp:Calendar FontName=="Verdana"
runatt="server"/> que se encu uentre en un fichero skin causará quee todos los controles Cale endar
en pááginas con ell Tema aplicaado utilizaránn la fuente Verdana.
V Un valor locar p para dicha
propiiedad se sobbreescribirá. Observad qu ue es un erro or especificarr un valor dee ID de propiedad
para una definicióón de contro ol en un ficheero de skin.
Temas Globaless y de Apliccación

Un teema puede reesidir en un nivel de aplicación o en un nivel máq quina (accesible de forma
ones). Los temas de nivel de aplicació
globaal para todass las aplicacio ón se encuenntran en el
directtorio App_Th hemes bajo el directorio raíz de la applicación, com
mo se ha desscrito
anterriormente. Lo os temas gloobales se coloocan en el directorio "Thhemes", bajo
o una carpetaa
ASP.NNETClientFilees, bajo el directorio de instalación de ASP.NET, por
p ejemplo
%WIN
NDIR%\Micr
rosoft.NET
T\Framewor
rk\<versio
on>\ASP.NE
ETClientFi
iles\Theme
es.
)??
La ub
bicación de lo
os temas globales para lo
os sition web
b de IIS es
Inet
tpub\wwwro
oot\aspnet
t_client\s
system_web
b\<version
n>\Themes.
. *
Asign nando un te ema a una página

p
Se puuede asignar un tema a unau página in ndividual estableciendo la directiva < <%@ Page
Them me="..." %> % al nombrre del Tema de d nivel glob bal o de apliccación (el nom
mbre de la
carpeeta bajo el diirectorio Theemes o App__Themes). Un na página pu uede tener sóólo un tema
aplicaado, pero enn dicho tema pueden hab ber varios ficheros skin para aplicar configuracionnes de
estilo
o a los contro
oles de la pággina.
Asignnando un te ema en con nfig

Tambbién podemo os definir el tema
t aplicad
do para todass las páginass de la aplicación
especcificandolo en
e la sección <pages th heme="..." "/> de Webconfig. Para quitar este tema
na página particular podeemos estableecer el atribu
en un uto Theme de d la directivaa de la págin
na a
un string vacío ("""). Observadd que una maaster page no
o puede teneer un tema aaplicado;
tendrremos que establecer el tema en págginas de conttenido o en la l configuracción (descrito
oa
continuación).
<?xml
l version "1.0"?>
<conf
figuration xmlns
x "http://schemas.mi
icrosoft.com
m/.NetConfig
guration/v2.0">
<
<system.web>
>
<pages the
eme "ExampleTheme"/>
<
</system.web
b>
</con
nfiguration>
>
Desh habilitar Teemas para un u control

Un coontrol específico puede ser
s excluido de tener que bir sus propiedades mediante
e sobreescrib
el esttablecimiento de la propiedad Enable
eTheming a false.
Skin
ns identificados en
e un Tem
ma
Por defecto,
d la deefinición de un n un fichero de skin se ap
u control en plica a todoss los controle
es del
mism
mo tipo en lass páginas de la aplicación
n. Sin embarggo, podemoss querer quee los controle es del
mism
mo tipo tengaan aparienciaas diferentess en distintass partes de laa aplicación. Por ejemplo o,
parezca en neegrita en unaa parte y en italic
podrííamos quereer que el textto de un conttrol Label ap
en ottra. Podemoss hacer esto mediante skkins identificaados en un tema.
t
Podemos definir diferentes estilos para co ontroles del mismo tipo en un fichero skin mediaante
la creeación de deffiniciones seeparadas del control. En las
l definicionnes de los coontroles
pordeemos estableecer diferenttes propiedaades SkinID a nombres dee nuestra eleección, y desspués
estab blecer este mismo
m SkinID
D en los contrroles de las páginas
p que tendrán
t dich
ho skin aplicaado.
En au usencia de la propiedad SkinID,
S se aplica el skin por defecto (uuno sin la propiedad SkinnID
fijadaa). El siguientte ejemplo muestra
m diferrentes skins para los con
ntroles Label y Calendar.
)??
Observad que a lo os controles de una página con un SkkinID estableecido se les aaplica un grupo de
estilo
os diferente al
a skin por deefecto.
Nam
medSkin cs.a
aspx
<%@ Page
P Languag
ge "C#" Theme "OrangeThe
eme2" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head ver">
itle>Named Skins</title>
<ti
</hea
ad>
<body
y>
orm id "form
<
<div>
<
<h3>Named Sk
kins</h3>
)??
<asp:Label ID "Label1" runat "ser

rver" Text "Hello
" 1" />
><br />
rver" Text "Hello
" 2" Sk
kinID "Blue" /><br />
rver" Text "Hello
" 3" />
><br />
<br />
<asp:Calen
at "server"/
/>
<br />
<asp:Calen
ndar ID "Calendar2" Skin
nID "Simple"
" runat "ser
rver"/>
<
</div>
</f
form>
</bod
dy>
</htm
ml>
Labe
el.skin
<asp:label runat
t "server" font bold "tr
rue" forecol
lor "orange"
" />
<asp:label runat
t "server" SkinID "Blue"
" font bold "true" fore
ecolor "blue
e" />
ndar.skin
Calen
<asp:Calendar ru unat "server" BackColor "#FFFFCC" BorderColor
B "#FFCC66" B
BorderWidth "1px"
DayNaameFormat "FFirstLetter" Font Names "Verdana" Font
F Size "88pt" ForeColor "#663399"
Heighht "200px" ShowGridLines "True" Widdth "220px">
>
<Se
electedDaySttyle BackColor "#CCCCFF"
" Font Bold "True" />
<Se
electorStylee BackColor "#FFCC66" />
>
<Ot
therMonthDayyStyle ForeColor "#CC996
66" />
<To
odayDayStylee BackColor "#FFCC66" Fo
oreColor "Wh
hite" />
<Ne
extPrevStylee Font Size "9pt" ForeCo
olor "#FFFFC
CC" />
ayHeaderStyle BackColor "#FFCC66" Font
<Da F Bold "T
True" Heightt "1px" />
<Ti
itleStyle Ba " Font Size "9pt" ForeC
ackColor "#990000" Font Bold "True" Color "#FFFFCC"
/>
</aspp:Calendar>
<asp:Calendar SkkinID "Simple" runat "se

erver" BackC e" BorderColor "#999999"
Color "White
CellP
Padding "4" DayNameFormat "FirstLettter" Font Names
N ana" Font Size "8pt"
"Verda
ForeC
Color "Blackk" Height "180px" Width "200px">
<Se
electedDaySttyle BackColor "#666666"
eColor "Whit
te" />
<Se
electorStylee BackColor "#CCCCCC" />
>
<We
eekendDayStyyle BackColor "#FFFFCC" />
<Ot
therMonthDayyStyle ForeColor "#80808
80" />
<To
odayDayStylee BackColor "#CCCCCC" Fo
oreColor "Bl
lack" />
<Ne
extPrevStylee VerticalAlign "Bottom"
" />
ayHeaderStyle BackColor "#CCCCCC" Font
<Da F Bold "T
True" Font Size
S "7pt" />
<Ti
itleStyle BaackColor "#999999" Borde
erColor "Bla old "True" />
ack" Font Bo
</asp
p:Calendar>
Los skkins identificcados se pueeden organizaar de diferen

ntes formas dentro
d de los ficheros de
e skin
de los temas. Deb bido a que un tema puedde contener varios
v ficherros de skin deebemos dividir los
skins identificadoos en diferentes ficheros,, de forma quue cada uno de estos fich heros contennga
las deefiniciones de controles con
c el mismo o SkinID. Porr ejemplo, poodemor teneer tres ficherros de
skin en
e un Tema, cada uno no ombrado seggún el valor de
d SkinID:
/WebbSite1
/Appp_Themes
/M
MyTheme
Deefault.skin
Reed.skin
Bllue.skin
Alternativamentee podríamos agrupar los ficheros de control

c según el tipo de ccontrol, de forma
que cada
c skin con
ntendría un conjunto
c de definicioness de skin paraa un control particular:
)??
/Web bSite1
/Appp_Themes
/M
MyTheme
GridView.skin
Caalendar.skin
Laabel.skin
Podemos incluso dividir estoss ficheros de skin basánd

donos en las áreas de nueestro sitio, por
ejemplo:
/WebbSite1
/App
p_Themes
/M
MyTheme
HoomePage.skin
DaataReports.sskin
Fo
orums.skin
La poosibilidad de tener varioss ficheros de skins en un mismo direcctorio Themee nos da estaa
flexib
bilidad de orgganización. Además
A nos permite com mpartir fácilm
mente las deffiniciones de
e
skins con otros o copiar las deefiniciones de
d un tema a otro sin tener que editar otros fiche eros
de skkin de un Temma.
Estiilos del la
ado del servidor utilizand
u do Temass
Un Teema está desstinado a serr aplicado a una
u aplicació ón después ded haberla crreado, inclusso
despu ués de que el
e sitio ya estté hospedadoo en un servidor. La perssona que aplica el tema a la
aplicaación no tien
ne porque seer la misma que
q la desarrrolló. Por ejeemplo, es com mún tener
desarrrolladores de
d aplicación n y diseñadorres del web site
s trabajando en difereentes aspecto os del
sitio. Cuando se aplica
a un Temma a una aplicación, las propiedades
p de estilo que se encuenttran
en la definición del Tema sobreescriben lo os valores de o en las páginas
e los controlees de destino
de applicación.
Por otro
o lado, es algo común entre los desarrolladore es factorizar información
i estilística y el
compportamiento de servidor por separad do. Un ejemp ón de CSS para
plo de esto ess la utilizació
definir los estilos de control y de marcadoo en un fiche
ero separado o. También podemos utiliizar
Temaas para este propósito, aplicando el Tema
T u especie de hoja de eestilos del lad
como una do de
dor. Cuando lo aplicamos de esta forrma, las prop
servid piedades de estilo
e en la ddefinición del
Temaa establecen el valor por defecto paraa los controles de la apliccación, pero estas
propiiedades pued den estableccerse tambiéén en la págin
na de controol para sobreeescribir la
definición del Tem ma.
)??
Estilos Declaratiovs de
el lado de
el servidor
Cuando aplicamo os un tema esstableciendo o el atributo Theme de laa directiva @@Page o de laa
secció
ón <pages/>> de configuración, las propiedades de skins del teema sobreesscriben las de el
mism
mo nombre de los controlles destino de d la página. El siguiente ejemplo mu uestra un "Label"
con su
s propiedad d ForeColor fijada a azul. En el tema aplicado,
a el skin
s de "Labeel" define la
propiiedad ForeCo olor a naranjja. Observad d al ejecutar la ón del Tema gana
l página quee la definició
sobree la propiedaad local del control,
c y tod
dos los Labels se representan naranjaas.
Them
meOverride
e cs.aspx
<%@ Page
P Languag
ge "VB" Theme "OrangeThe
eme" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
<head ver">
<ti
itle>Theme Overrides
O Page Propertie
es</title>
</hea
ad>
<body
y>
<fo
<
<div>
<
<h3>Properti rridden By Theme</h3>
es in the Page are Over T
" 1" />
><br />
" 2" Fo
oreColor "blue" />
< Not
tice that this Label is orange (fro nstead of blue (from Page)
om Theme) in
<br />
" 3" />
><br />
<
</div>
</f
form>
</bod
dy>
</htm
ml>
Labe
el.skin
<asp:label runat
rue" forecol
lor "orange"
" />
Una definición
d dee Tema se puuede aplicar como un esttilo del lado de
d servidor eestableciend do el
atribu
uto StyleSheeetTheme dee la directiva @Page o de e la sección <pages/>
< de la configuracción
al nombre del Tem ma. Cuando se aplica meediante un SttyleSheetTheeme, las propiedades del
Temaa pueden serr sobreescritas por los coontroles de laa Página. El siguiente
s ejemplo muestra el
Temaa del ejemplo o anterior ap
plicado comoo un StyleShe eetTheme. Observad
O quee la propiedaad
ForeCColor definid
da en la págin
na gana frente la definiciión del Temaa, de forma qque ahora el
)??
contrrol "Label" see representa azul.

Prio
oridad de Tema y StyleSheet
S tPage
Un SttyleSheetTheeme se supone que está hecho para ser s aplicado durante el d desarrollo de e la
aplicaación, como medio para factorizar nu uestra inform
mación de esstilo en las pááginas y así
manttener el comportamiento o de la aplicaación separado del aspeccto de la apliccación. Pode emos
quereer aplicar Temas a una ap plicación a laa que ya hemmos aplicado un StyleSheeetTheme. Si
aplicaamos tanto unu Tema com mo un StyleSheetTheme a un aplicaciión, las propiedades de los
contrroles se apliccan en el sigu
uiente orden n:
Las propiedades StyleSheetTh

S heme se aplican primero
o
Las propiedades del e la página se aplican (sobreescriben StyleSheettTheme)

d Control en
Las propiedades de
d Tema se aplican
a en úlltimo lugar (sobreescribieendo tanto las propiedad
des
ontrol como StyleSheetTh
de co heme)
El siguiente ejemplo muestra el orden de prioridad de

escrito arribaa.
Them
mesAndStylesheetThe
emes.aspx
<%@ Page
P Languag
ge "C#" Theme "OrangeThe
eme" StyleSh
heetTheme "G
GreenTheme" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
tml">
<head
<ti
itle>Precedeence: Theme Overrides Pa
age Override
es StyleShee
etTheme</tittle>
</hea
ad>
<body
y>
<fo
<
<div>
<
<h3>Precedennce: Theme Ov
verrides Pag
ge Overrides
s StyleSheet
tTheme</h3>
rver" Text "Hello
" 1" />
><br />
rver" Text "Hello
" oreColor "blue" Font
2" Fo
Itali
ic "false" />
< Pag
ge overrides Font Italic
c property of
o StyleSheeetTheme, butt Theme ForeColor
overr
rides everywwhere
<br />
)??

rver" Text "Hello
" 3" />
><br />
</div>
<
</f
form>
</bod
dy>
</htm
ml>
Con
ntenidos de un Te
ema y Skiin
Cómoo se ha mosttrado en las secciones
s an
nteriores, un fichero de Skin
S contienee las definicio ones
de co d las propiedades que aplicaremos a los controlees del mismo
ontroles con los valores de o tipo
en un
na aplicaciónn. Esta secció
ón discute deetalles adicio
onales sobre qué es conteenido válido para
añadir a un ficherro de skin o de
d Tema.
Prop
piedades Tematiza
ables
Las definiciones ded controles en un ficherro de skin sólo pueden co ontener valoores para
propiiedades que están marcaadas como Tematizables. Cada contro ol define un conjunto dee
propiiedades que podrían ser tematizadass mediante ThemeableAt
T ttribute en la propiedad.
Añadiendo una propiedad que no es temaatizable a un s producee un error. Un
n fichero de skin
contrrol por si missmo puede ser excluido de d un Tema, por ejemplo o los controlees de fuente de
datoss no son temmatizables. Po or defecto, laa ID de la pro
opiedad no se
s puede tem matizar para
ningú
ún control. Todas las propiedades son n tematizables por defeccto a no ser qque un contrrol
especcifique lo conntrario. Paraa comprobar si cierta pro opiedad es teematizable en n un control,
acudiid a la docummentación dee referencia del Framework .NET.
Utiliizando Ho
ojas de Esstilo
Una Hoja
H de Estilos en Cascad da (CSS) puedde ser añadido a un Tem ma colocándo olo bajo el
subdiirectorio del Tema. La ho
oja de estiloss CSS se apliccará a todas las páginas a las que
apliquemos el tem ma, siempre que la páginna tenga un control
c <hea
ad runat=" "server"/> >
definido. Podemo os nombrar el
e fichero CSSS de cualquie er forma siempre que tenga la exten nsión
.csss. Un Tema puede
p contenner múltipless ficheros CSSS. Cuando laa página conttiene referenncias
a los ficheros CSSS (mediante una
u etiquetaa <link rel="stylesh heet" href f="..."/> en el
elemento <head/>), cualquieer fichero CSSS del Tema se s aplicara despues de laas hojas de estilo
de la página.
Style
esheet.aspx
x
<%@ Page
P Languag
ge "C#" Theme "MyTheme" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
ipt runat "server">
<scri
</scr
ript>
<html
l xmlns "htt
tml">
<head
ver">
<ti ylesheet in a Theme</tit
itle>CSS Sty tle>
)??
</hea
ad>
<body
y>
<fo
orm id "formm1" runat "server"> !
<
<div>
<h2>
CSS Stylesheet in a Theme</h2>
" 1" />
><br />
" 2" />
><br />
" 3" />
><br />
<
</div>
</f
form>
</bod
dy>
</htm
ml>
Style
eSheet.css
body
{
background color:
b c lightb
blue;
f
font family: Verdana;
f
font size:sm
mall;
}
Labe
el.skin
<asp:label runat
rue" forecol
lor "purple"
" />
Asig
gnando un
n Tema mediante
m C
Código
<%@ Page
P Languag
ge="VB" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
ipt runat "server">
<scri
Pro
otected Sub Page PreInit()
P
Page.Theme uest.QuerySt
Server.HtmlEncode(Requ tring("Theme
e"))
End
d Sub
</scr
ript>
<html
tml">
<head
itle>Assigning a Theme in Code</tit
<ti tle>
</hea
ad>
<body
y>
<fo
<
<div>
<h2>Assign
ning a Theme in Code</h2
2>
<a href "p
programmatic vb.aspx?The
eme ThemeA">
>Theme A</a>
>
<a href "p
programmatic vb.aspx?The
eme ThemeB">
>Theme B</a>
>
<
</div>
</f
form>
</bod
dy>
</htm
ml>
)?

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35

)?

Los elementos weeb permiten a los usuario

os cambiar laa configuración de partes del sitio paara
que se
s ajusten a sus
s necesidaades y preferrencias. Muchos proveed dores de info
ormación
perm
miten al usuarrio escoger qué
q conteniddo quieren que se muestre y en qué ccolumna deb ben
mostrarlo.
Los elementos weeb nos perm

miten proporccionar esa fu
unción arrasttrando “partees” de la pággina
Los siitios Web mo odernos requieren frecuentemente IUs I (Interfaces de Usuario) que sean
dinámmicas y perso onalizables. Los Usuarioss de esos sitioos pueden personalizar eel diseño y laa
apariencia del contenido de laas páginas de acuerdo a sus preferen ncias individuuales y
perso ontenido de la página parra mostrar laa información más relevaante.
onalizar el co
Tradicionalmentee, construir esos
e sitios haa requerido de
d gran cantiidad de códiggo complejo o,
desdee la creaciónn de un códiggo seguro, un na infraestru
uctura de perrsonalizaciónn comprensib ble en
el serrvidor, hasta escribir un script
s del lad
do del cliente
e para ofreceer una rica exxperiencia de
e
naveggación.
ASP.NNET 2.0 inclu

uye un nuevo
o paquete dee Elementos Web que haacen que seaa muy sencilllo
crearr páginas con
n diseño mod
dular y dinám
mico y con co
ontenido perrsonalizado.
Intrroducción
n a los Co
ontroles Elementtos Web
El Conjunto de Co
ontroles Elem
mentos Web incluye los siguientes
s co
ontroles:
x Los WebP Part son controles ASP.N

NET de servid
dor que puedden ser usados y
personaliizados con el Conjunto de Controles Elementos Web.
W Cualquiier control de
servidor o control de usuario pueede comportaarse como un WebPart.
x Las WebP PartZone pro u modo de organizar paartes dentro de regiones en la

oporcionan un
página. Laas WebPartZZone son con
ntroles conte
enedores quee proporcion
nan capas paara los
WebPart y para añadir IU comunees, consistenntes como un
n Menú Verb b y borde a cada
WebPart.

)?
x El control WebPartMManager man neja el estado o de personaalización de llas páginas y

coordina la comunicaación entre laas partes y laas zonas. Cad
da página quue usa el paquete
de Controoles Elementtos Web debbe tener un control
c WebP PartManager.
x CatalogPaart Es la clase base para los controless de elementtos de catálo

ogo. Estos
elemento os presentan n a los usuarios una lista de elemento
os Web dispo onibles para su
inclusión dinámicae n la página.
x CatalogZo oles CatalogPart

one Conteneedor en el nivvel de páginaa para contro
x ConnectioonsZone Con ntenedor en el nivel de página

p para las conexionees definidas entre
cualquierr par de elem
mentos Web que se encuentran en la página.
x EditorParrt Clase basee para todos los controless de editor que

q permiten n realizar
modificacciones en loss elementos web. Un elemento edito or presenta ssu propia inte
erfaz
de usuariio para permmitir a los usu
uarios establecer propieddades.
x EditorZon
ne Contened
dor de nivel de
d página para controles EditorPart
La Zoona es un conntenedor de elementos y proporciona elementoss y funcionalidad de interrfaz

de ussuario adicionales a todoos los elemen
ntos que contiene. Una página
p ASP.NNET puede
conteener múltiplees zonas y caada una de ellas
e puede co ontener unoo o más elem
mentos. La zona es
la ressponsable dee reproducir los elementoos de interfaaz de usuario
o.
Un ellemento Web define el contenido

c a mostrar
m a traavés de las veentanas de la página,
mientras que un elemento edditor permitee a los usuarios editar la estructura y los ajustes de
d un
elemento Web enn concreto.
mentos Web permiten a los usuarios seleccionar u

La inffraestructuraa de los elem un conjunto
persoonalizado de elementos parap mostrarrlos en una página
p y espeecificar su po
osición. La lissta de
elementos dispon nibles la propporciona un control CataalogPart. De este modo, llos usuarios
pueden añadir eleementos din námicamentee. El catalogoo también acctúa como un n almacén paara
los elementos que el usuario ha eliminado o de la págin
na actuando sobre la inteerfaz de usuaario
estánndar proporccionada por ele sistema. Loos elementoos eliminadoss se pueden restablecer si s se
especcifican así en
n el catálogo de la páginaa.
Los elementos weeb son en últtima instancia controles de servidor. WebPart ess la clase base de
todoss los controlees de elemen ntos que habbilitan contenido utilizad
dos en ASP.NET. Deriva de una
clase abstracta deenominada Part.
P Asimismmo, EditorPart y CatalogPPArt son las cclases bases para
ditores y catáálogos de eleementos web. Todas las clases de eleementos se h
los ed heredan de Part,
P
que a su vez se heereda de uno o de los conttroles de servidor ASP.NEET nativos: P
Panel.
Web
bPartManager
Contrrol no visual que adminisstra los mism
mos elemento
os en una páágina habilitaada para
elementos Web. Sólo un Web bPartManageer por formuulario.
<asp:WebPartMana
ager ID "WebPartManager1
1" runat "se
erver"></asp
p:WebPartMan
nager>

)?
Regisstra el modo de presentaación de la páágina y notifica a las zonaas y elementtos cualquierr

camb bio efectuado o de presentación. Según
o en el modo n el modo dee presentació ón los elemeentos
y las zonas se rep
presentan dee distinta form
ma.
odo de preseentación por defecto es el

El mo e Normal, lo que implica que las zonaas de cataloggo y
de ed
dición no se muestran.
m Po
odemos acceeder a la listaa de zonas a través de la colección Zo
ones.
Tambbién permitee a los usuarios mover eleementos a zo

onas diferentes , editar laa apariencia,, las
propiiedades y el comportamiiento de los controles y activa
a evento
os del ciclo d
de vida de loss
elementos web.
Zon
nas de Ele
ementos
Cada tipo de elem mento requieere su propio
o objeto de zona.
z WebPaartZone es el contenedorr para
contrroles WebPart genéricos. Aloja todo el contenido o de elementtos Web y loss registra a través
de unna colección denominadaa WebParts. EL WebParttZone nos peermite definiir algunas
propiiedades de estilo,
e ontenido), PaartTitleStyle (el estilo de la
como PartStyle (el estilo del co
barraa de título) y MenuVerbStyle (Elemen ntos de menú ú)
orZone se utiliza para con

Edito ntener contro or para configurar elementos. Y
oles de edito
CatalogZone se utiliza para mostrar
m el cattalogo de ele
ementos Web b disponibles.
Crea
ar Página
as con elementoss Web
<%@ Pa
age Language="C#" AutoEventWireup="true
e" CodeFile="W
WebPart1.aspx.cs" Inherits=
="WebPart1" %>
<%@ Re
egister src="N
News.ascx" tagname="News" tagprefix="uc
c1" %>
egister src="Favorites.ascx" tagname="F
<%@ Re Favorites" tag
gprefix="uc2" %>
<!DOCT
TYPE html PUBL
0 Transitional
l//EN"
nsitional.dtd"
">
<t
title></title>
>
</head
d>
<body>
>
<f
<d
div>
<asp:WebPartManager ID="WebPartManag
ger1" runat="s
server">
</asp:WebPa
artManager>
derText="Esta es la zona #1
<asp:WebPartZone runat="server" Head 1"
ID="Web
bPartZone1" BorderColor="#
#CCCCCC" Font Names="Verdan
na" Height="339px"
Padding
g="6" Width="358px">
<EmptyZoneTextStyle Font Size="0
0.8em" />
<PartSt
tyle Font Size="0.8em" For
reColor="#3333
333" />
<TitleB
BarVerbStyle Font Size="0.6em" Font Und e" ForeColor="White" />
derline="False
abelHoverStyle ForeColor="
<MenuLa "#D1DDF1" />
<MenuPo
opupStyle BackColor="#507C lor="#CCCCCC" BorderWidth="1px"
CD1" BorderCol
Fon
nt Names="Verdana" Font Si
ize="0.6em" />
>
<MenuVe
erbStyle Bord
derColor="#507
7CD1" BorderSt
tyle="Solid" BorderWidth="
B 1px"
ForeColor="White" />
<PartTitleStyle BackColor="#507C d="True" Font Size="0.8em"
CD1" Font Bold
ForeColor="White" />
<ZoneTe
emplate>
<uc2:Favorites ID="Favorites
s1" runat="ser
rver" />
<uc1:News ID="N
News1" runat="
"server" />
</ZoneT
Template>
<MenuVe
erbHoverStyle BackColor="#
#EFF3FB" Borde
erColor="#CCCC
CCC"
BorderStyle="Solid" BorderWi
idth="1px" For
reColor="#3333
333" />
<PartCh
hromeStyle BackColor="#EFF
F3FB" BorderCo " Font Names="Verdana"
olor="#D1DDF1"
ForeColor="#333333" />
<HeaderStyle Font Size="0.7em" ForeColor="#CC
F CCCCC" Horizon
ntalAlign="Cennter" />
abelStyle ForeColor="White
<MenuLa e" />
</asp:WebPartZone>
</
/div>
</
/form>

)?
</body
y>
</html
l>

EL formulario con
ntiene un con ntrol WebPaartManager que
q controla la ejecución
n y la
reprooducción de todos
t los eleementos secundarios. EL formulario también
t con
ntiene una zoona
Web con muchoss estilos y un par de elem mentos. La zo
ona de elemeentos Web see configura para
p
mostrar un título y un borde alrededor
a deel contenido.
La etiiqueta <ZoneeTemplate> incluye todo

os los elemen
ntos web deffinidos para la zona.
El con
ntenido de cada elementto Web se muestra
m a travvés de un co
ontrol de usu
uario (ascx)
La función
f d los con
de ntroles de
e usuario
o
Dos formas
f de deefinir elemen
ntos Web:
x Creación de un controol de servido

or personalizzado heredad
do de WebPA
Art y que
implemennte alguna de
d las interfaces necesarias.
x Uno de un control dee usuario

)?
Croma, Verb
bos y Men
nús
Los Verbos
V son laas opciones que
q aparecen
n en la lista desplegable
d (Minimizar, Cerrar, etc)
El “crroma” indica la estructurra del titulo y del borde que

q rodea a un
u elemento
o.
Classe WebPa
art
Impleementa las innterfaces: IW
WebPart, IweebActionable e e IWebEditaable. Estas in
nterfaces deffinen
propiiedades com munes de la innterfaz de ussuario utilizaadas para meejorar la expeeriencia del
usuarrio cuando trrabaja con elementos Web. Estas interfaces representan la p principal
difereencia entre escribir
e elem
mentos Web a través de laa clase base WebPart o a través de
contrroles de usuaario.
Elem
mentos Web
W como controles de servidor
Podemos utilizar controles individuales paara crear documentos web. Es suficieente con colo
ocar
un co
ontrol de servidor en el segmento <ZoneTemplate> de una zo ona de elemeento Web.
A un elemento web podemoss aplicar estillos y propied

dades visualees.
Los verbos identiffican accionees que los ussuarios pueden ejecutar en los elemeentos Web, cada
c
elemento web pu uede habilitaarlos o deshaabilitarlos.
Edittar y Listtar eleme

entos We
eb
Para cambiar el modo
m de pressentación tenemos que asignar
a un nuevo valor a la propiedad
DisplayMOde del administraddor de elemeentos Web.
WebP
PartManager1.DisplayMode=mode;
Modoo Descipción
Brow
wse Los elementos
e web presentan su propio
conteenido; no se muestra ninnguna interfaaz de
usuario adiciona y no se encu uentra
dispo
onible ningunna funcionalidad adicional
Catallog Todoos los elemenntos de catálogo asociados
con la página se muestran
m a los usuarios para
añadir nuevos eleementos web de catáloggos
onibles
dispo
Conn
nect Permmite al usuar o conectarsee a elementoos
Web existentes para
p poder coonsumir
automáticamentee en uno cuaalquier dato que
esté publicando el
e otro.
Desin
ng Permmite al usuario desplazar elementos Web
W
dentro de la mismma zona o a ttravés de zonas
diferentes en la página.
p
Edit Se muestran a loss usuarios to
odos los
elementos de edición asociad dos a la págin
na
para que los usuaarios modifiq
quen los

)?
atributos de elem
mentos web iindividuales..
!
Cuando se activa el modo Dessign permitee a los usuarios finales mover los elem
mentos web
alrededor utilizan
ndo arrastrarr y colocar.
Los modos
m Edit, Catalog
C nnect se encuentran disp
y Con o si la página contiene un
ponibles sólo na
zona de editor o una
u zona de conexiones respectivam mente.
Crea
ar un con
ntrol de usuario
u p
para conm
mutar modos
<%@ Control
C Lang
guage "C#" ClassName "Mo
odeSwitcher"
" %>
<scri
ipt runat "server">
W
WebPartManag
ger manager;
void Page Lo
v oad(object sender, Event
tArgs e)
{
manager
r WebPartManager.GetCu
urrentWebPar
rtManager(Pa
age);
if (!IsPPostBack)
{
each (WebPartDisplayMode
fore e mode in manager.Supp
m portedDispla
ayModes)
{
if (mode.IsEnabled( man
nager))
SupportedModes.Item
ms.Add(mode.
.Name);
}
}
}
public void SelectedIndexChanged(ob

p bject sender
r, EventArgs
s e)
{
string selectedMode Supported
dModes.Selec
ctedValue;
WebPartD
DisplayMode mode
m mana
ager.Support
tedDisplayMo
odes[selecte
edMode];
if (mode
e ! null)
man
nager.DisplayMode mode
e;
}
</scr
ript>
<asp:DropDownList ID "SupportedModes" runat

r "serve
er"
A
AutoPostBack
k "true"
O
OnSelectedIn
ndexChanged "SelectedInd
dexChanged" />
Cam
mbiar el diseño
d de
e las zona
as
Utilizamos una taabla e incorporamos en 2 columnas 2 WebPartZo
one con 2 eleementos en cada
c
WebP PartZone.
Al pasar a modo diseño,

d vemo
os como pod
demos move
er los webparrt.
Crea
ar una zo
ona de Ed
ditor
El con
ntrol a utilizaar es EditoZo
one. La zona de Editor só
ólo se muestrra en modo d
de edición y
apareece en la possición exactaa definida para ella en la página.
Edito
or Descripción
AppeearanceEdito
orPart Nos permite editar ajustes vissuales como o la
anchura, el titulo
o, la dirección
n del texto y el

)?
tipo de
d borde
BehaviorEditorPaart Ajusttes de compoortamiento, como si el "
elemento admitee la edición y la minimización.
Layou
utEditorPartt Estilo
o de marco y zona a la qu
ue pertenece e el
elemento
Prope
ertyGridEdittorPart Propiedades perssonalizadas ddel compone ente
del elemento web. Es una pro opiedad púb blica
defin
nida en una clase
c derivadda de WebPA Art
marccada con los atributos [Peersonalizable
e] y
[Web bBrowsable]
Crea
ar zona de
d catalogo
Perm
mite al usuario añadir elem
mentos en tiiempo de eje
ecución. Agreegamos un C
CatalogZone
Edito
or Descripción
DeclaarativeCatalo
ogPart Presenta lista de elementos w web que no
participan en el diseño
d iniciall de la páginaa
pero que se pued den añadir
Impo
orCatalogParrt Permmite importarr un elementto web
PageCatalogPart Lista de elementoos que el usuuario puede
habeer cerrado
Con
nexión de
e Elementos Web
Los co
ontroles de usuarios
u Weeb se pueden
n comunicar entre sí.
El mo
odelo de connexión consisste en 2 entid
dades que in
nteractúan enntre sí: una cconexión y un
puntoo de conexió u del control del proveeedor y otro del
ón. Una coneexión conectaa 2 puntos, uno
consuumidor. Las conexiones
c d
disponibles e la página se administrran a través d
en del administrador
de eleementos Weeb.
Elemmentos Web b que se pue eden conecctar

Las coonexiones see definen de dos formas:: estáticas y dinamicas.
d Las estáticas se listan
declaarativamentee en el cuerppo del administrador de elementos
e w
web. Las coneexiones dinám
micas
las ad
dministra el usuario
u a traavés de la zona de conexiones.
Esqu
uema prin
ncipal/de
etalles
Vamo
os a aplicar el
e modelo dee conexión a un par de elementos Weeb personalizzados de la clase
c
WebP
PArt.
El eleemento proveedor se den nomina EmpployeesWebP PArt y muesttra alguna infformación soobre
un em mpleado seleeccionado. Un
U simple forrmulario dee
entrada permmite a los usuuarios escribir el
ID dee un determinado empleaado y obteneer sus datos personales. Asimismo, eel elemento WebW
exportará el ID deel empleado seleccionad
do a través del contrato de
d comunicación

)?
El com
mponente co onsumidor ese el OrdersW WebPart, quee enlaza el ID
D del empleaado a cualquiier
elemento Web qu ue implemen nte el contraato de comun
nicación dado y muestra todos los )
pediddos emitidoss por dicho empleado en un año dete erminado.
El vín
nculo terminaa creando un
na relación principal/det
p os elementos web impliccados.
alles entre lo
Elem
mento Web proveedor
Cuando se crea un elemento Web proveeedor, lo primero que define un desarrrollador es el
e
contrrato de comu
unicación para el punto de
d conexión.. Se define co
omo una inteerfaz:
publi
ic interface
e IEmployeeInfo
{
/ Use this property to get the emp
// ployeed ID currently
c de
efined in th
he control
i
int Employee
eID { get; set; }
}
mponente Em
El com mployessWeebPArt de ejeemplo es un control ASP.NET personalizado derivvado
de WebPart,
W que implementaa la interfaz del
d contrato:
Para que se muesstre el EMplo oyeeID en el editor de prropiedades, debemos

d maarcarlo como
o
susceeptible de exxploración y personalizac
p ción.
[Personal
lizable(true
e)]
wsable(true)]
[WebBrow
public int EmployeeID
{
get { return emmpID; }
set { empID v
value; }
}
[Personalizable]
Indicaa que la proppiedad tienee que conservvar su valor en

e el almacéén de datos ssubyacente si
s el
contrrol se utiliza en una zona de elemento web o den ntro de un co
ontrol compu uesto envuelto en
un elemento web b. De forma predetermin
p nada, los dato os de person
nalización flu
uyen en una de las
tablas a través dee aspnetdb
[Web
bBrowsable]
Indicaa que la prop

piedad se pu
uede modificar a través de
d la interfaz de usuario d
del elemento
o
edito
or.
EL sigguiente paso
o conlleva la creación
c de un punto de conexión dee proveedor.. Debe definir la
función que devu uleve una insstancia de la clase actual y marcarla con
c el atributto
[Conn nectionProviider] Esta fun onexión paraa los datos basándose en
nción crea ell punto de co n la
interffaz IEmployeeeInfo.
[Conn
nectionProvider("EmployeeIDProvider
r", "Employe
eeIDProvider
r")]
public IEmployeeInfo GetEmploye
eeInfo()
{
retu
urn this;
}

)?
Tendremos en cuuenta que el nombre del punto de conexión debee coincidir co

on la propied
dad
ProviderName o ConsumerNa
C ame de la etiqueta <asp:WebPartCoonnection>, d
dependiendoo de si *
el punto de conexxión es para un proveedoor o para un consumidorr.
Elem
mento web consumido
c r
Apartte de generaar su propia interfaz de usuario, el ele
emento web
b sólo tiene u
un deber: la
creacción de un pu
unto de coneexión de consumidor parra la interfaz especificadaa.
[Conn
nectionConsu
umer("EmployeeIDConsumerr", "Employe
eeIDConsumer
r")]
public void
v GetEmployeeInfo(IEm
mployeeInfo empInfo)
{
if (empInfo ! null)
{
empID emp
pInfo.Employ
yeeID;
FindEmployeeInfo();
}
else
e
{
throw new NotSupportedE
Exception("N
No connectio
on data foun
nd.");
}
}
Un puunto de coneexión consum midor se crea automáticaamente en tiempo de ejeecución de

ASP.NNET en correespondecia con un métod do marcado con el atribu
uto [ConnecttionConsumeer]. El
métoodo marcado o con el atributo se aceptta como retrollamada a invocar cuando todo cammbia
en la interfaz especificada.
Código de ma
arcado
<Stat
ticConnectio
ons>
<asp:WebPartConnection ID "Conn1" ProviderID "emp"
iderConnectionPointID "EmployeeIDPr
Provi rovider" Con
nsumerID "or
rd"
umerConnectionPointID "EmployeeIDCo
Consu onsumer">
</asp:WebPartConnection
n>
aticConnections>
</Sta
Una conexión
c esttablecida enttre el elemen
nt Web con un
u ID de emp p y un elemeent Web ord. El
primeero actua como proveedor a través de d un punto de conexión de nombre EmployeeID D
Provider. EL segundo adopta el papel de consumidor
c a través de un
u punto de conexión
denominado Emp ployeeIDConsumer

*?
Q
Q :
&
C :
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35

*? Q :
Q
& C :
Q :

& C
C :


*? Q :
& C :

*? Q :
& C :

*? Q :
& C :

*? Q :
& C :

*? Q :
& C :

*? Q :
& C :
"

*? Q :
& C :

*? Q :
& C :

*? Q :
& C :

*? Q :
& C :

*? Q :
Q
& C :
Test
1. Yoou need to crreate a Web page

p that is available
a in both
b the defaault languagee of English and
a in
G
German. Whiich of the folllowing resouurce files sho
ould you create? (Choosee all that appply.)
A. Appp LocalRessources/Pagee.aspx.resx.dde
B. App LoccalResources//Page.aspx.rresx
C. App LoccalResources//Page.aspx.dde.resx
D. Appp LocalRessources/Pagee.aspx.en.ressx
2. Whhat must youu do to enablle users to chhoose their own languagee preferencess? (Choose all
a that
a
apply.)
A. Define thhe Page.Cultuure property.
B. Define thhe Page.UICuulture properrty.
C. Override the Page.IniitializeCulturre method.
D. Override the Page.ReeadStringRessource metho
od.
3. Hoow can you define
d a contrrol property using a glob
bal resource at
a design tim
me?
A. In Visuall Studio, defiine the DataV
ValueField property.
p
B. In Visual Studio, define the DataSSourceID pro
operty.
C. In Visual Studio, edit the Text prooperty.
D. Inn Visual Studdio, edit the (Expressions)
(E ) property.

*? Q :
Q
& C :
4. Yoou add a globbal resource with the namme Login by

y using Visuaal Studio. Hoow can you access
a
thhat global resource progrrammaticallyy?
A. Resourcees.Resource.L
Login
B. Resourcess.Resource(“
“Login”)
C. Resourcess(“Login”)
D. Resourcees.Login

'

&
' :
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
'

& ' :
'

& '
' :

El pap
pel fundameental de la seeguridad es restringir
r el acceso
a a parttes del sitio W
Web. Esto se
e hace
mediante los sigu
uientes méto odos:
x Autenticaación: Verificcar que el cliente es realm

mente quienn dice que es
x Autorizacción: Determ
minar si el clieente tiene peermiso para acceder al reecurso que ha
h
solicitado
o
Tipo
os de Arcchivos re
estringido
os
ASP.NNET proporciona automááticamente un u nivel básicco de segurid
dad bloqueando las
solicitudes de ciertos tipos dee archivo (como los archivos de configuración y d de código fueente).
Estoss tipos de arcchivos se identifican en el
e archivo maachine.configg del servidor web en el
directtorio de configuración deel entorno y se asignan a la clase HtttpForbiddenH Handler
<add path "*.asc
cx" verb "*" type "Syste
em.Web.HttpF
ForbiddenHan
ndler" valid
date "True"/>
Auttenticació
ón
Es el proceso de asegurar
a quee el cliente es quien dice ser. La autenticación se realiza usando
credeenciales, o allgún tipo de identificacióón.
Una estrada
e típica para activaar la autenticcación sería:
<aut
thenticati
ion mode="
"Windows" />
x None: No o se realiza autenticación n. Permite el acceso anón nimo

x Windowss. Se usará au utenticación Windows, ju unto con IIS. Es el compo
ortamiento por
p
defecto
x Passport.. Servicios dee autenticaciión centralizaado que ofreece Microsofft a los
programaadores de sittios web, pro oporcionando un solo inicio de sesión n para varioss
sitios web
b
x Forms: Laas solicitudess sin autenticcar se rediriggen a una páágina web qu ue reúne las
credenciaales del usuaario y las envvía a la aplicaación para seer autenticad
dos.
Auttenticació
ón basad
da en form
mularios
Se muestra un formulario de inicio de sessión al usuariio para recogger las credeenciales. Este
e
formulario no neccesariamentte autentica ala usuario, pero envía lass credencialees, mediante e un
envío
o de formulario, al código
o de la aplicaación que reaaliza la auten
nticación.
Una vez
v que el cliiente está au utenticado, ele servidor de evuelve un pequeño
p fraggmento de datos,
una cookie,
c al clieente. A contiinuación, se pasa esta co ookie de auteenticación, del cliente al
servid
dor, en cada petición possterior, lo qu ue indica al servidor que este cliente ha sido
autennticado. Si see hace una soolicitud sin una
u cookie de e autenticación válida, see redirigirá
'

& ' :
autommáticamentee al usuario al
a formulario
o de inicio de
e sesión, en el
e que se reccogerán las
credeenciales y se autenticarán.
Configuración de web.config
El tipo de segurid
dad utilizado en ASP.NET se define enn web.config, a través dee tres seccion
nes de
configguración: <aauthenticatio
on>, <authorization>, <identity>.
La etiiqueta <authhentication> define el mo

odo de auten
ntificación dee ASP.NET uttilizado para
validaar el usuario.
<auth
hentication mode "Forms">
<forms name
n "Prueba" loginUrl "login.aspx"
" " protection
n "All" time
eout "30"
path "/"/>
</authentication>
Atrib
buto Descripción
Name e El nombre de la cookie
c HTTP utilizada parra la
autennticación. Si se ejecutan varias
aplicaaciones sobrre el mismo sservidor web b,
debeería darse a cada
c cookie dde seguridadd de
la aplicación un nombre
n único o
loginUrl La páágina de iniciio de sesión, donde se
redirige al usuario si no se enncuentra unaa
cookie de autenticación válid da. EL valor por
p
defeccto es default.aspx
Prote
ection Tipo de encriptacción y validacción utilizadaa
para el cookie dee seguridad.
Timeout Numero de minuto antes de que expire laa
cookie cuando reecibe la soliciitud, siempre
s haya pasaado la mitad del tiempo de
que se d
vida de la cookie.. El valor preedeterminado es
30
Path La ruta de los coookies emitido os por la
aplicaación. Se recomienda e valor
prede eterminado (\), dado que la mayoría de
los exxploradores distinguen eentre mayúscculas
y minnúsculas y unn error en la escritura dee la
ruta podría impedir que se en nviase la coo
okie
junto
o a la solicitud
Reglas de auttorización
n
Una vez
v estableciida la autentticación de fo
ormularios, tendremos
t q estableceer las reglas de
que
autorrización.
El astterisco (*) ess un carácterr comodín qu

ue permite explícitamentte que todoss los usuarioss
utiliceen la aplicación, incluso aquellos no autenticados.
El signo de interro
ogación (?) es
e un carácteer comodín queq incluye todos los usu uarios anónim mos.
Incluyyendo esta regla
r en el arrchivo de weeb.config indicamos que se
s deniega eel acceso a
cualqquier usuario
o anónimo. Todo
T usuario debe autentticarse y cad
da solicitud reequiere la co
ookie
de seeguridad.
'

& ' :
<auth
horization>
<deny userrs "?"/>
thorization>
</aut >
Cuando se evalúaan las reglas, ASP.NET reccorre la lista de arriba ab
bajo y continúa con los vaalores
hereddados de cuaalquier archivo .config deel directorio padre, terminando con llos valores del
archivvo machine.config. Tan pronto
p comoo se encuentra una regla aplicable, see detiene la
búsqueda. Así, en uiente, deterrminará que se aplica la regla
n el caso sigu r <allow users=”*”> a la
solicitud actual y no se evaluaará la segundda línea.
<auth
horization>
<allow useers "*"/>
<deny userrs "?"/>
</aut
thorization>>
Cambbiando el ord s embargo,, se denegará el acceso a cualquier

den de estas dos líneas, sin
usuarrio anónimo y se permitirá el acceso al resto de los usuarios
<auth
horization>
<deny userrs "?"/>
<allow useers "*"/>
</aut
thorization>>
Recordar que si se omite la seegunda líneaa, ASP.NET bu uscará el direectorio padre y por últim
mo se
encontrará con laa regla <allow
w users=”*”>> en el archivvo machine.cconfig para ttodos los usuuarios
no an
nónimos.
Control de accceso a dirrectorios

Un diiseño común n de una aplicación es colocar los archivos que reequieren auteenticación en n un
directtorio separado. Con arch
hivos de conffiguración ASSP.NET esta aproximació ón es fácil.
Simplemente dejamos las opcciones <auth horization> predetermina
p adas en el directorio paddre y
añadimos un arch hivo web.con
nfig que define opciones más restricttivas en el directorio
aseguurado. Este archivo
a simplemente deb be denegar ele acceso a loos usuarios anónimos
<con
nfiguratio
on>
<system
m.web>
<authoriza
ation>
<den
ny users="?"/>
</authorization>
m.web>
<system
<con
nfiguratio
on>
Control de accceso a arrchivos esspecíficos

Podemos restringgir archivos específicos
e añadiendo etiquetas <location> al arcchivo web.co
onfig.
<loca
ation path "segura.aspx">
<
<system.web>
>
<authoriza
ation>
<deny users "?"/>
</authorization>
<
</system.web
b>
</l
location>
'

& ' :
Control de accceso para

a usuarios específiicos
Se pu
ueden identifficar específiicamente un
n nombre de usuario o un
na lista de no
ombres de
usuarrio separado
or por comas.
<loca
ation path "segura.aspx">
<
<system.web>
>
<authoriza
ation>
<deny users "pepe,jose"/>
<deny users "juan"/>
<deny users "?"/>
</authorization>
<
</system.web
b>
</l
location>
La página
p de inicio de sesión
Una vez
v definido el modo de autenticació ón y las reglas de autorizaación, se deb
be crear la páágina
de inicio de sesión real, que es
e una páginaa .aspx norm mal que solicita la informaación del usuuario
y deccide si se deb
be autenticarr el usuario.
En el espacio de nombres
n Sysstem.Web.Seecurity disponemos de la clase FormssAuthenticattion
que proporciona
p métodos compartidos para administtrar el processo.
Méto
odo Descripción
Form
msCookieNam
me Propiedad de sólo lectura quee proporcion na el
nombre de la coo okie de auten nticación
mediiante formu arios
Form
msCookiePath
h Propiedad de sólo lectura quee proporcion na el
direcctorio definid do para el coookie de la
auten nticación meediante form mularios
Authenticate() Comp prueba un no ombre de ussuario y una
contrraseña contrra una lista d de cuentas qu ue se
pued de introducir en el archivo web.configg
RedirrectFromLogginPage() Iniciaa la sesión deel usuario en n una aplicación
ASP.N NET creando o la cookie, adjuntándola a la
respu uesta y redirigiendo al ussuario a la páágina
que solicitó
s iniciaalmente.
SignO
Out() Termmina la sesión n del usuario o en una
aplicaación ASP.NEET eliminand do la cookie
encr ptada existeente
SetAu
uthCookie() Iniciaa la sesión deel usuario en n una aplicación
ASP.N NET creando o y adjuntand do la cookie del
formulario de auttenticación. Al contrario que
el mé étodo RedireectFromLogin nPage, no
redirige al usuario a la páginaa que solicitó ó
iniciaalmente
GetRedirectUrl() Proporciona la URL de la págiina solicitadaa
iniciaalmente. Se podría
p utilizaar con
SetAuthCookie() para iniciar la sesión de
usuario en una ap plicación y to omar median nte
códiggo la decisión n de si se debe redirigir ala
usuario a la págin na solicitada o utilizar unna
págin na predeterm minada más aadecuada
GetA
AuthCookie() Crea la cookie dee autenticació ón pero no laa
'

& ' :
adjunnta a la respu
uesta. Se pueede realizar una
persoonalización adicional
a de la cookie y
añadirla manualm mente a la reespuesta
HashPasswordFro
omStoringIn
nConfigFile() Encr pta una cadeena de texto o utilizando el
e
algorritmo especifficado. Este vvalor
proporciona un método
m seguuro de almacenar
una contraseña
c e
encriptada enn un archivo o
una base
b de datoos
prote
ected void Button1
B Click(object sen
nder, EventAArgs e)
{
if (TxtP
Pass.Text.ToString() "secret")
{
Form
msAuthentication.Redirec
ctFromLoginPPage(TxtNomb
bre.Text, fa
alse);
}
}
Lista de usua
ario en arcchivo de configura
c ación
Para añadir una cuenta
c de usuario, se inseerta una sub
betiqueta <crredentials> a la etiqueta
<form
ms> y añadir tanta subetiiquetas <useer> como seaan necesariass a la etiquetta <credentials>
<auth
hentication mode "Forms">
<forms nam
me "Prueba" loginUrl "lo
ogin.aspx" protection
p "
"All" timeou
ut "30" path "/">
<credent
tials passwordFormat "Cl
lear">
<user name "pepe" password "p
pepe"/>
<user name "juan" password "j
juan"/>
</creden
ntials>
</forms>
</aut
thentication
n>
Prottección de
e las conttraseñas de
d usuario
o median
nte encriptación
protec
cted void Butt
ton1 Click(object sender, EventArgs e)
{
oritmo="SHA1";
string algo
if (SHA1.Ch
hecked)
{
algorit
tmo = "SHA1";
}
ecked)
if (MD5.Che
{
algorit
tmo = "MD5";
}
TxtEncripta
ado.Text = FormsAuthentica
ation.HashPass
swordForStorin
ngInConfigFile
e(TxtTexto.Text,
algori
itmo);
}
Role
es Person
nalizados
El objjeto User tieene las siguieentes propieedades
Name e Nombre del usuaario que ha in niciado la sessión
IsAutthenticated True si el usuario
o se ha auten nticado. Se puede
comp probar esta propiedad
p y decidir mediante
códiggo si se necesita redirigir el usuario a la
págin
na de inicio de
d sesión. Ob bserve que si el
usuario no ha inicciado la sesióón, el resto de
d
propiedades (com mo Name) esstará vacío.
AuthenticationTyype Una cadena
c que representa eel tipo de
autennticación utilizada (Formms,Basic)
IsInRole() Perm
mite evaluar sis un usuario o es miembro o de
'

& ' :
un grrupo.
!
Desgraciadamentte, con la auttenticación de
d formularioos no podem
mos asociar d
declarativamente
una cuenta
c de un
n usuario conn un rol mediante el arch
hivo web.con
nfig.
Auttenticació
ón Windo
ows
Con la autenticacción Window ws se confía en
e que IIS fue
erza que lo usuarios
u inicien la sesión antes
de peermitirles el acceso.
a Existten varias op
pciones diferentes para transmitir la iinformación del
inicio
o de sesión.
<allow
w users=”Do
ominio\nomb
bre”/>
Auttenticació
ón con Ba
ase de Da
atos Sql
Para
a crear una aplicación Web con página de in nicio de sesiión
1 Inicie Visu
1. ual Studio .N
NET y cree un
n sitio Web nuevo
n de ASP
P.NET .
2 Utilice el Explorador de
2. n formulario Web nuevo
d solucionees para agreggar al sitio un
llamado Login.aspx.
L
3 Agregue un control Lo
3. ogin a Login..aspx.
De foorma predeteerminada, esste control muestra

m los campos de noombre de ussuario y
contrraseña, y la casilla
c v Si el usuario activa esta
de verrificación Reccordármelo la próxima vez.
casillaa de verificación, se creaa una cookie de autenticaación constante y el explorador del
usuarrio la almaceena en el discco duro.
Para impedir quee un usuario malintencion

m nado robe alguna cookiee de autenticación del equipo
del clliente, de forrma general no debe crear cookies de autenticacción constanttes. Para
deshaabilitar esta característicca, establezcaa la propiedaad DisplayRe
ememberMee del control
Login
n como false.
Tengaa en cuenta que cuando el usuario hace clic en laa opción de inicio de sesiión en el con ntrol
Loginn, éste validaa automáticamente el usuuario llaman ndo al proveeedor de pertenencia al grrupo
configgurado, creaa un vale de autenticació
a ón de formulaarios y rediriige al usuario
o a la página
solicitada originalmente. Ejeccuta código similar
s al del ejemplo sigu
uiente.
if (Memmbership.ValidateeUser(username,, password))
{
// Useer has supplied vaalid credentials
// In the following metthod call, the seco

ond Boolean paraameter
// determines whetherr a persistent autthentication cookkie
// is crreated.
FormssAuthentication.R
RedirectFromLoginPage(usernamee,
rememberMeIsChecked);
}
'

& ' :
4 Agregue un control CreateUserW

4. Wizard debajo o del control Login para q
que los usuarios
nuevos puedan registtrarse en el sitio
s y crear cuentas
c nuevvas. "
Pasoo 2. Configuración de la a aplicación n Web para a la autenticación de fformularioss
En esste paso se co
onfigura la aplicación
a ASSP.NET para que
q utilice laa autenticación de
formularios.
Para configurar laa aplicación Web para laa autenticación de formu

ularios
x d solucionees para agreggar un archivvo Web.confiig al proyecto.

Utilice el Explorador de
x Localice el
e elemento <authenticaation> y cambie el atributto mode a "FForms".
x Agregue el siguiente elemento

e <fforms> como o secundario del elementto
<authenttication> y. a continuació
ón, establezcca los atributtos name y timeout de laa
siguientee manera.
x <authenttication mode="Forms">
x <forms
x name="SqlAuthCo
ookie"
x out="10" />
timeo
x </authen
ntication>
Si esttablece el atrributo mode

e del elementto <authentiication>, perro omite el eelemento
<formms>, para la configuracióón de <formss> se utilizan los valores predetermin
p nados. Debe
configgurar sólo lo
os atributos que
q necesitee sobrescribirr. Aquí se mu uestra la connfiguración
predeeterminada de d la autentiicación de fo
ormularios taal como los define
d el arch
hivo
Mach hine.config.comments.
<form
ms name=".A
ASPXAUTH" loginUrl="loggin.aspx"
defaultUrl="d
default.aspx"" protection=="All" timeou
ut="30" path
h="/"
reequireSSL="ffalse" slidinggExpiration=""true"
cookieless="U
UseDeviceProfile" domain="
enableCrossA
AppRedirectss="false">
<creedentials passswordFormaat="SHA1" />>
</forrms>
x Agregue el siguiente elemento

e <aauthorization
n> en el elem hentication> del
mento <auth
archivo Web.config.
W E permitee que todos los usuarios autenticados
Esto a s tengan acceso a
su sitio Web.
W
<autho
orization>
<deny users="?" />
'

& ' :
<allow
w users="*" />
</authhorization>
)
La configuración anterior sólo o permite ten ner acceso a la aplicaciónn a los usuarrios autenticaados.
El signo "?" indicaa usuarios no o autenticaddos, mientrass que "*" inddica todos loss usuarios. Al
A
denegar a los usu uarios no auttenticados, toodas las soliccitudes que realizan esto
os usuarios se
rediriigen a la pággina de inicio
o de sesión. El oginUrl del ellemento <forms> determ
E atributo lo mina
el nombre de la página
p de iniccio de sesión
n. La configuración predeeterminada d de este atributo
del arrchivo Machine.config.co omments es Login.aspx.
Pasoo 3. Configuración de ASP.NET

A pa
ara la perten nencia
En esste paso se coonfigura el proveedor
p dee pertenencia a grupo dee SQL Server mediante la
realizzación de las acciones sigguientes:
x Crear unaa base de daatos del almaacén de usuaario.
x Concederr acceso a laa base de dattos a la cuen

nta de la apliicación Web.
x Configuraar los parám

metros de pertenencia a grupo
g de ASSP.NET.
Crearr una base de datos del almacén

a de usuario
El pro
oveedor de pertenencia
p a grupo de SQL
S Server allmacena info ormación de los usuarios en
una base
b de dato
os de SQL Serrver. El almaccén de usuarrio de SQL Seerver se puede crear
escrib
biendo Aspnet_regsql.exxe en la líneaa de comandos. Como altternativa, Asspnet_regsql.exe
se puuede utilizar en modo Asiistente o la herramienta
h ASP.NET Weeb Site Configuration del
menú ú Sitio Web ded Visual Stu
udio .NET 200 05.
Para crear la base

e de datos del
d almacén de
d usuario
Utilicce Aspnet_reegsql.exe parra crear la baase de datos de pertenen

ncia a grupo. En el símbo
olo del
sistemma de Visuall Studio 20055, ejecute el comando sigguiente.
aspne
et_regsql S (local) E A m
S esp
pecifica el seervidor, que es
e (local) en este ejemplo.
E esp
pecifica que se utilice la autenticació
a ón de Window
ws para coneectarse a SQ
QL Server.
'

& ' :
A m especifica que se agregu ue sólo la carracterística de

d pertenenccia a grupo. PPara realizarr una
autennticación sim
mple con un almacén
a de usuario
u de SQ
QL Server, só
ólo se requieere la *
caraccterística de pertenencia a un grupo
Para ver una lista completa de los comand

dos, ejecute Aspnet_reggsql /?.
Resultados esperrados
Si la base
b de dato
os Aspnetdb no existe, see crean dos archivos
a de base
b de datos:
x Aspnetdb
b.mdf
x Aspnetdb
b_log.LDF
Si no existen, las tablas

t siguieentes se crean en la base de datos Aspnetdb:
x aspnet_A
Applications
x aspnet_M
Membership
x aspnet_SSchemaVersio
ons
x aspnet_U
Users
Conceder acceso a la base de

e datos a la cuenta
c de la aplicación Web
W
La cuenta de procceso de la ap plicación Web requiere el

e acceso a la base de dattos Aspnetdbb. Si
ejecuuta la aplicación en Serviccios de Micro
osoft Interne
et Informatioon Server (IISS) 6.0 en
Wind dows Server 2003,
2 de forma predeterrminada se utiliza
u la cuen
nta NT AUTH HORITY\Serviicio
de reed para ejecuutar las aplicaaciones Web
b.
Para conceder accceso a la base de datos
1 Cree un inicio de sesión de SQL Seerver para NT AUTHORITTY\Servicio de red.

1.
2 Conceda el acceso dee inicio de sesión a la basse de datos Aspnetdb

2. A creeando un usu
uario
de base de
d datos.
3 Agregue el usuario a la función dee base de datos aspnet_Membership

3. p_FullAccesss.
Estoss pasos se pu
ueden realizaar con el Adm
ministrador corporativo
c o se puede ejecutar la
siguieente secuenccia de comanndos en el An
nalizador de consultas SQ
QL
Creeate a SQL Seerver login fo

or the Netwo
ork Service account
sp_grrantlogin 'NTT AUTHORITYY\Network Service'
Graant the login access to th

he membersh
hip database
e
USE aspnetdb
a
'

& ' :
GO

sp_grrantdbaccesss 'NT AUTHO
ORITY\Netwo
ork Service', 'Network Service'
d user to dattabase role

Add
USE aspnetdb
a
GO
ddrolememb
sp_ad ber 'aspnet_M
Membership
p_FullAccess', 'Network Service'
S
Confiigurar los paarámetros de

e pertenenciia a grupo de
e ASP.NET
En esste paso se especifica la configuració

c n del sitio Web.
W
Para configurar laa configuracción de perte

enencia a gru
upo
1 En el arch
1. hivo Web.config, agreguee una cadenaa de conexió
ón similar a laa siguiente que
q
apunte a la base de datos
d de perttenencia a grrupo.
<connectionStrings>
<add name="M
MyLocalSQLServver"
connectionSString="Initial Catalog=aspnetd
db;data source=
=localhost;Integgrated Securityy=SSPI;" />
</connectionStrrings>
En esste caso, el nombre que utilizará

u paraa esta conexión es MyLoccalSQLServer. Establezcaa el
atribu
uto connectiionString como la base ded datos de pertenencia
p al grupo quee creó
anterriormente.
2 Agregue un elemento
2. o <membership> despué és del elemennto <authoriization> tal y
como se muestra en ele ejemplo siiguiente. Observe el uso del elementto <clear/>. Esto
impide qu
ue se carguee el proveedo
or predetermminado y nun nca se utilicee.
<membership deefaultProvider=="MySqlMembeershipProvider"" >
<providers>
<clear/>
<add name="M
MySqlMembershipProvider"
connection
nStringName="M
MyLocalSQLSerrver"
application
nName="MyApp
pName"
type="Systeem.Web.Securiity.SqlMembersshipProvider, System.Web,
V
Version=2.0.0.0, Culture=neutrral, PublicKeyTo
oken=b03f5f7f1
11d50a3a" />
</providers>
'

& ' :
</membership>>

Asegú úrese de quee establece ele atributo co
onnectionStrringName co omo el mismmo nombre
("MyLocalSQLSerrver") que especificó anteeriormente en e la sección
n connectionnStrings.
Estabblezca tambiéén el atributo applicationName como un valor único que rep presente la
aplicaación. Los deetalles de usu
uario se orgaanizan por no
ombre de applicación en lla base de daatos
de peertenencia a grupo.
Nota
Debee definir el attributo defau

ultProvider del
d elemento o <membership> para qu ue apunte a la
definición del prooveedor. Los controles Loogin utilizan este atributoo para determinar la
propiiedad que see utiliza de fo
orma predeteerminada. Siin embargo, estos contro oles también
exponen una propiedad Mem mbershipProvvider que pe ermite utilizaar con los conntroles
proveeedores distiintos de los predetermin
p nados. Aunqu ue es posiblee definir la prropiedad
MemmbershipProvvider de los controles
c Loggin, es aconssejable defin
nir el atributo
o
defauultProvider.
Pasoo 4. Compro obación de la l autentica ación de formularios

En esste paso se prueba
p la auttenticación de
d formularioos.
Adición de un controlador de
e eventos Paage_Load
Agreggue el códigoo siguiente al

a controlado or de eventoss Page_Load d de la páginaa Default.asp
px.
Esta página
p sólo debe
d mostraarse a los usu
uarios autentticados. Paraa demostrar que es así, el
e
códiggo muestra laa informacióón obtenida del
d vale de autenticación n de formularios que se emite
e
para los usuarios autenticado os.
proteccted void Page__Load(object seender, EventArggs e)

{
Respo
onse.Write("Heello, " + Server.HtmlEncode(Usser.Identity.Name));
msIdentity id = (FFormsIdentity)U
Form User.Identity;
Form
msAuthenticatio onTicket ticket = id.Ticket;
onse.Write("<p
Respo p/>TicketName: " + ticket.Nam me );
Respo
onse.Write("<b
br/>Cookie Path h: " + ticket.Coo
okiePath);
Respo
onse.Write("<b
br/>Ticket Expirration: " +
ticket.Expirration.ToString(());
Respo
onse.Write("<b
br/>Expired: " + ticket.Expired.ToString());
Respo
onse.Write("<b
br/>Persistent: " + ticket.IsPerssistent.ToStringg());
Respo
onse.Write("<b
br/>IssueDate: " + ticket.IssueD Date.ToString());
Respo
onse.Write("<b
br/>UserData: " + ticket.UserD Data);
Respo
onse.Write("<b
br/>Version: " + ticket.Version.ToString());
}
Crea
ación de un usuario nu
uevo
1. Vaya a la página Default.aspx de la aplicación.
a
La configu
uración anterio
or del elementto <authoriz
zation> impid
de a los usuarios no autentiicados
obtener ac edirige a la página Login.aspx.
cceso a ninguna de las páginas de la aplicación y le re
2
2. suario nuevo con una contrraseña segura
Cree un us a. Las reglas predeterminad
p das que aplica
a el
proveedorr de pertenenc
cia a grupo de
e SQL para la contraseña so
on las siguienttes:
x L contraseña debe tener un

La na longitud de
e al menos sie
ete caracteres
s.
'

& ' :
x L contraseña debe contene

La er al menos un
n carácter alfa
anumérico.
3
3. Inicie sesión con su cue odo se realiza correctamente, se le debe
enta de usuariio nueva. Si to ería
redirigir a la página Deffault.aspx que
e solicitó inicia
almente y deb
berían aparece
er detalles del vale
de autenticación de form
mularios.
Crea
ar la Pág
gina de Biienvenid
da
Ahoraa podemos añadir
a la pággina que daráá la Bienvenida al usuario
o.
Arrasstramos un LoginStatus
L a la página Biienvenido.asspx. Podemo os establecer las propiedaades
del coontrol LoginSStatus, por ejemplo,
e paraa cambiar el texto del vín
nculo con lass propiedadees
LoginnText y Logou utText. Tambbién podemo os desplegarr la ventana de
d vista paraa ver el vincu
ulo y
el texxto del estad
do de sesión iniciada
Adem
más usamos un u LoginView w. Aquí podeemos introdu ucir texto y controles
c quee se mostrarrán
basánndonos en sii el usuario ha
h iniciado la sesión o no. Este controol tiene dos vvistas, que se
e
pueden ver usand do la etiquetta inteligentee: AnonymouusTemplate y LoggedInTeemplate. El
conteenido de la plantilla
p que se mostrará dependerá ded si el usuario ha iniciad do la sesión o no.
A continuación, establecemo
e os LoggedInTTemplate. Co omo el usuario habrá inicciado la sesió
ón
cuanddo se muestre esta planttilla, podemo
os utilizar el control Login
nName para dar la bienvvenida
al usu
uario por su nombre.
Mem
mbership
p
La claase Membership se utiliza en aplicaciiones ASP.NEET para valid dar las credennciales del
usuarrio y adminisstrar la configuración dell usuario com mo contraseñ ñas y direccio
ones de corrreo
electrónico. La claase Memberrship se pued de utilizar so
ola o con la cllase FormsAuthentication con
objetto de crear un sistema co ompleto paraa autenticar a los usuario os de una aplicación o sittio
Web.. El control Login encapsu ula la clase Membership
M para proporrcionar un mmecanismo
prácttico para validar a los usu
uarios.
La claase Memberrship proporcciona los meedios para:
x Crear nueevos usuario

os.
x Almacenaar la informaación de susccripción (nom

mbres de usuuario, contraaseñas,
direccion
nes de correo
o electrónicoo y datos com n Microsoft SSQL Server o en
mpatibles) en
un almaccén de datos alternativo.
x Autenticaar a los usuarios que visittan su sitio. Mediante

M prrogramación puede autenticar
a los usuaarios o puede utilizar el control
c Loginn para crear un sistema d
de autenticacción
completo o que requiere poco o nin ngún código.
'

& ' :
x Administrar contraseñas que inclu uyen su creaación, cambioo, recuperacción y

restableccimiento, etcc. Opcionalmente puede configurar laa suscripción
n a ASP.NET para
p
que requiera una pregunta y una respuesta de contraseñaa para auten nticar las
peticionees de restableecimiento o recuperación de la contrraseña para aquellos usu
uarios
que la hayan olvidado o.
public void Login
L OnClic
ck(object se
ender, Event
tArgs args)
{
if (Membership.Valida
ateUser(User
rnameTextbox
x.Text, PasswordTextbox.Text))
FormsAu
uthenticatio
on.RedirectF
FromLoginPag
ge(UsernameTextbox.Text,
N
NotPublicChe ckBox.Checke
ed);
else
Msg.Text "Login failed.
f Plea
ase check yo
our user nam
me and passwo
ord and try
again.";
}
Nombre Descripción
CreateUsser Sobreecargado. Aggrega un nueevo usuario aal origen de

datoss.
DeleteUsser Sobreecargado. Elimina a un usuario

u de la base de datos.
Equals Sobreecargado. Deetermina si dos

d instanciaas de Object
son iguales. (Se hereda
h de Obbject).
FindUserrsByEmail Sobreecargado. Obtiene una colección

c de usuarios
suscrritos donde la dirección de
d correo eleectrónico
contiiene la direccción de correeo electrónicco especificaada
que debe
d coincid
dir.
FindUserrsByName Sobreecargado. Obtiene una colección

c de usuarios
suscrritos donde el
e nombre dee usuario contiene el
nombre de usuarrio especificaado que debe coincidir.
GenerateePassword Geneera una contraseña aleattoria de la lon

ngitud
especificada.
GetAllUsers Sobreecargado. Obtiene una colección

c de todos los
usuarios en la base de datos.
GetHashC
Code Actúaa como funcción hash parra un tipo co
oncreto. (Se
heredda de Objectt).
GetNumb
berOfUsersO
Online Obtieene el número de usuarios que actuaalmente tienen
'

& ' :
accesso a una apliicación.

GetType Obtieene el objeto
o Type de la instancia acttual. (Se hereda
de Object).
GetUser Sobreecargado. Obtiene la infoormación deel origen de

datoss para el usu
uario suscrito
o.
GetUserN
NameByEmaail Obtieene un nomb bre de usuarrio cuya direccción de corrreo
electtrónico coinccide con la diirección de ccorreo
electtrónico especcificada.
ReferencceEquals Determina si las instancias dee Object especificadas so

on
la m sma instancia. (Se heredda de Object)).
ToString Devu
uelve una clase String quee representaa la clase
Obje
ect actual. (Se
e hereda de Object).
UpdateU
User Actuaaliza la base de datos con la información
correespondiente al usuario esspecificado.
ValidateU
User Comprueba que el nombre de usuario y la contraseñaa
proporcionados son
s válidos.
Role
es
Admiinistra la suscripción del usuario a funciones paraa el control de
d autorización en una
aplicaación ASP.NEET. Esta clasee no se pued
de heredar.
La ad
dministración n de funcionees de ASP.NEET le permite
e administrar la autorizacción para su
aplicaación basánddose en gruppos de usuarios, que se denominan
d unciones. La asignación de
fu d
usuarrios a las fun
nciones perm
mite controlar el acceso a partes o carracterísticas diferentes de
d su
aplicaación Web basándose en n funciones, en lugar de especificar
e u autorizacción basada en
una e
nomb bres de usuaario, o ademáás de ellos. Por
P ejemplo, una aplicación de empleeados podríaa
tenerr funciones como
c Administradores, Empleados,
E Directores,
D ettc., donde see especifican
n
privilegios diferen
ntes a cada función.
f
Los usuarios pued den perteneccer a más dee una función n. Por ejemp plo, si su sitio
o es un foro de
d
discusión, alguno os usuarios podrían tenerr a la vez las funciones Miembros
M yM Moderadoress.
Podríía definir cad
da función deel sitio de forma que tenga privilegio os diferentes,, por lo que un
usuarrio con ambaas funciones tendría los dosd conjunto os de privileggios.
'

& ' :
Para habilitar la administració

a ón de funciones para su aplicación
a ASSP.NET, utilicce el elemen
nto
roleM
Manager de la sección system.web deel archivo Web.config
W dee su aplicació
ón
Nombre Descrip
pción
AddUsers
sToRole Agrega los usuarios especificados
s a la función
n especificada
a.
AddUsers
sToRoles Agrega los usuarios especificados
s a las funciones
especific
cadas.
AddUserT
ToRole Agrega el usuario especificado a la función especificada.
AddUserT
ToRoles Agrega el usuario especificado a las funciones
s especificadas.
CreateRo
ole Agrega una función nueva al orig
gen de datos.
DeleteCo
ookie Elimina la cookie don
nde se almac
cenan los nom
mbres de
función
DeleteRo
ole Sobreca
argado. Quita
a una función del origen de datos.
Equals Sobrecaargado. Deterrmina si dos instancias de

e Object son
iguales. (Se hereda de Object).
FindUsersInRole Obtiene una lista de los nombres de usuario d

de una funció
ón
especific
cada que con
ntienen un no
ombre de usu uario buscado
o.
GetAllRolles Obtiene una lista de todas las fun

nciones de la aplicación.
GetHashC
Code Actúa co
omo función hash para un
n tipo concretto. (Se hered
da
de Object).
GetRoles
sForUser Sobrecaargado. Obtieene una lista de las funciones en que está
e
incluido un usuario.
GetType Obtiene el objeto Type de la insta

ancia actual. (Se hereda de
d
Object)..
GetUsers
sInRole Obtiene una lista de usuarios inclluidos en la ffunción
especific
cada.
IsUserInR
Role Sobrecaargado. Obtie ene un valor que
q indica si un usuario está
incluido en la función
n especificada
a.
ReferenceEquals Determiina si las insttancias de Ob

bject especifficadas son la
a
misma nstancia. (Se e hereda de Object).
O
RemoveU
UserFromRole
e Quita el usuario espe
ecificado de a función esp
pecificada.
RemoveU
UserFromRole
es Quita el usuario espe
ecificado de as funciones especificadas.
RemoveU
UsersFromRole Quita los usuarios es
specificados de
d la función especificada.
RemoveU
UsersFromRoles Quita los nombres de usuario esp
pecificados de
e las funcione
es
especific
cadas.
RoleExistts Obtiene un valor quee indica si el nombre de fuunción

especific
cado ya existte en el orige
en de datos de la función.
ToString Devuelvve una clase String

S que re
epresenta la c
clase Object
actual. (Se
( hereda de Object
'

& ' :
, !
Los siitios web necesitan frecu uentemente un método convenientee para almaceenar los dato os
especcíficos de un usuario quee se aplicarán n a todo el siitio. La caraccterística de Perfil proporrciona
una forma
f de deffinir datos esspecíficos dee usuario de forma
f fácil, así
a como deffinir y almace enar
dicho
os datos.
Un peerfil de usuario es un con njunto de proopiedades que definen laa informacióón a almacennar de
los ussuarios del sitio. El perfil de usuario se
s define me
ediante una sencilla
s sintaaxis XML en un
u
fichero de configu uración (macchine.config o web.config). Para haceer referenciaa a la informaación
del perfil desde laa página, utillizaremos la propiedad Profile.
P ASP.NNET lee el esquema defin nido
en la configuracióón y genera automáticam
a mente una clase accesiblee desde la prropiedad Proofile
de la página. Podemos accedeer a las prop piedades del Profile de la misma formma que lo
haríamos para cu ualquier otra clase.
Aunqque la utilizacción más com mún del Proffile es almacenar datos ded usuarios autenticados,
tambbién permite almacenar información de usuarios anónimos. El E almacenam miento de la
informmación de usuarios anón nimos depennde de la caraacterística "IIdentificación Anónima"
(Anon nymous Iden L funcionalidades de Perfil y Identifficación Anónima trabajaan
ntification). Las
juntas para permitir el uso dee la propiedaad Profile parra usuarios anónimos.
a Lo
os ejemplos
incluiidos en este tutorial mueestran el uso
o de la caractterística Proffile tanto con
n usuarios
autennticados commo con usuarrios anónimo os.
Antess del inicio del ciclo de viida de la pággina, ASP.NETT se asegura que el Perfil se encuentra
accessible para ser usado por la página. Dee forma similar, al final del ciclo de viida de páginaa,
ASP.NNET guarda automáticam
a mente el Perffil en los alm
macenes de datos. De la m misma formaa que
en ottras funcionaalidades, com mo "Pertenen ncia a un gru
upo" (Membership) o "Ad dministradorr de
Roless" (Role Man nager), la caraacterística Perfil ha sido diseñada con un modelo o basado en
proveeedor. Los prroveedores abstraen
a el almacén
a de datos
d físico correspondie
c ente a una
caraccterística de las clases y lógica de neggocio de dich ha característtica. La caraccterística Perrfil
vienee con un provveedor para Microsoft™ SQL Server. Podemos crear nuestross proveedore es
persoonalizados y configurarlo os para trabajar con la característica Perfil.
P Las pááginas que ussan la
caraccterística perrfil seguirán funcionando
f o igual con nuuestros provveedores perrsonalizados..
Ademmás de la pro
opiedad Proffile, la característica Proffile proporcio
ona soporte para la
administración dee perfiles (taanto para usu uarios autentticados como anónimos)) con el
ProfileManager (administrad
( or de perfilees). Tareas co
omunes que haremos con el
ProfileManager incluyen:
x Burcar información estadística so os perfiles dee usuarios autenticados y

obre todos lo
perfiles de
d usuarios anónimos.
a
x Determinnar el número de perfiless que no se han

h modificado en un detterminado
período de
d tiempo.
'

& ' :
x Eliminar perfiles
p indivviduales o grupos de perffiles basándo
onos en la feecha de últim
ma
modificacción de estoss. "
Gua
ardar información de
d Person
nalización
n
La forrma más senncilla de perssonalización es guardar información sobre
s el usuaario y hacer que
esa in
nformación esté
e disponib ble siempre que
q el usuarrio inicie una sesión. Esto o necesita un
n tipo
de peersistencia que va mucho o más allá deel estado de la sesión. Para ello utilizaaremos una Base
de Daatos.
Aspnet_regsql.exxe es un comando que peermite instalar una base de datos de Sql Server
Configurar la
a gestión de
d los Perrfiles
ASP.N NET ha disocciado la API de
d perfil (cómmo interactuar mediantee programación con los datos
de peerfil) del provveedor de daatos subyaceente (cómo ses almacenan n los datos). Esto nos permite
utilizaar el proveeddor predeterrminado (SqllServerExpreess) o uno dee los otros prroveedores
propo orcionados (SqlServer) o incluso escrribir nuestro propio provveedor (por eejemplo, si
tenem mos un sistema de gestió ón de relacioones con el cliente) sin caambiar la forrma de
interaactuar con el perfil en el resto del código. Para aggregar datoss al perfil del usuario, anttes
debemosinformar al sistema de los datos que querem mos almacenar. Esto lo haacemos en el e
web. Config:
<prof
file enabled
d "true" defaultProviderr "AspNetSql
lProfileProv
vider">
<propert
ties>
<add name
n "Nombre"/>
<add name
n "Apellidos"/>
<add name
n "Telefono"/>
<add name
n "fechaNacimiento" type
t "System
m.DateTime"/
/>
</proper
rties>
</profile>
>
Esto hace que la API

A de perfil cree espacioo para almaccenar cuatro fragmentos de informacción:
nomb bre, apellidos,teléfono y fecha de naccimiento. El tipo de almaacenamiento
o por defecto
o es
Stringg. Sin embargo, podemos definir un tipo.
t

A
e
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
A
A

A

Sim
mulador
Usareemos un sim
mulador de teeléfono móviil
http://deeveloper.opeenwave.com
Formulario móvil
Un fo
ormulario mó
óvil hereda de
d System.W
Web.UI.Mob
bileContro
ols.Mobile
ePage
Tenemos que reggistrar una lib

brería de con
ntroles
<%@ Page
P Languag
eFile "Defau
ult.aspx.cs"
Inher
rits " Defau
ult" %>
<%@ Register
R Tag
gPrefix "mobile" Namespa
ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<html
l xmlns "htt
tml" >
<body
y>
<
<mobile:Form
m id "Form1" runat "serv
ver">
<a href "CalendarTest.aspx">Cal
lendarTest.a
aspx</a>
<br />
<a href "LabelTest.aspx">LabelT
Test.aspx</a
a>
<br />
<a href "ObjectListTest.aspx">O
ObjectListTe
est.aspx</a>
>
<br />
<a href "AdRotatorTest.aspx">Ad
dRotatorTest
t.aspx</a>
<br />
<mobile:Label Runat "server" Fo
ont Bold "Tr
rue" ID "elN
Navegador" />
<
</mobile:For
rm>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
using
g System.Web
b.Mobile;
publi
ic partial class
c Default : System.Web.UI.Mobi
ileControls.MobilePage
{
p
protected vo
nder, EventA
Args e)
{
MobileCa
apabilities mobCaps
m (M
MobileCapabi
ilities)Requ
uest.Browserr;
elNavega
ador.Text m
mobCaps.Pref
ferredRender
ringType;
}
}
A
A
La claase MobileCaapabilities Prroporciona un

u solo origen para obten ner acceso a la informaciión
de funciones sobre dispositivos cliente y para
p realizarr consultas en
n funciones de dispositivvo.
Los coontroles de ASP.NET

A Mo obile permiteen desarrollar aplicacionees para una ggran variedad de
dispo
ositivos móviiles. Los fabricantes de laa mayoría de e dispositivoss móviles pro
oporcionan
emuladores que simulan
s el fuuncionamiento del hardw ware y de loss exploradorees. El software
emulador permite ver las págginas Web dee ASP.NET Mobile M tal y co
omo se veríaan en los
dispo
ositivos de haardware de los fabricantees, así como probar la interfaz del sittio Web tal y
comoo lo harían lo os usuarios. EsE posible, po
or ejemplo, que
q despuéss de comprob bar cómo se
despllazaría un ussuario por su sitio Web en un disposittivo determinado, decidaa modificar la
interffaz y utilizar una plantillaa DeviceSpeccific para ese
e dispositivo..
Dentro de un elem mento <DeviceSpecific> se especificaa normalmen nte uno o varios elementtos
<Chooice>, cada uno de los cuaales contienee atributos queq especificcan cómo se evalúa la opción
con laas funcioness del dispositivo de destinno. En tiemppo de ejecución, cada opcción se evalú úa en
el ord
den en que aparece
a y la primera
p opción correctamente evalu uada es la que se utiliza. LaL
consttrucción de DeviceSpecif
D fic/Choice se utiliza para especificar los conjuntoss de plantillaas y
reemmplazar propiedades; por ejemplo, se puede utilizzar para indiccar las imágeenes específicas
del dispositivo paara el control Image.
A
A
DeviiceFilter
Especcifica un disp positivo o claase de dispossitivo en un sistema
s Mob
bileCapabilitiies ASP.NET
basad do en el agen nte de usuarrio o explorador. Un proggramador dee páginas o aplicaciones puede
p
utilizaar un filtro de
d dispositivo o para reempplazar propie edades del co
ontrol o definir bloques de
d
conteenido o planttillas que cam mbian el diseeño y la aparriencia.
<devic
ceFilters>
<filter name="IsIE" compa
are="Browser" argument="IE"
" />
<filter name="IsMobile" compare="IsMob
c bileDevice" ar
rgument="true"
" />
<f
filter name="isHTML32" com
mpare="Preferr
redRenderingTy
ype" argument=
="html32" />
iceFilters>
</devi
Con
ntroles de
el Conten
nedor
Los coontroles ASP
P.NET incluyeen un par dee controles: Panel
P y Form
m que funcion nan como
conteenedores de otros contro oles. El contrrol Form se diferencia
d ue soporta el
dee Panel en qu
envíoo de datos, mientras
m que Panel representa un sim mple grupo estático de co ontroles
interrrelacionadoss. Varios pan
neles pueden n anidarse e incluirse
i l formulariios, mientrass que
en los
los fo
ormularios, sin embargo, no pueden anidarse.
Control Pane
el
<%@ Page
P Languag
eFile "Panel
l.aspx.cs" Inherits "Panel"
%>
<%@ Register
R Tag
ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title></tit
tle>
</hea
ad>
<body
y>
<
<mobile:Form
m ID "Form1" Runat "serv
ver">
<mobile:Panel Runat "server" Fo
ont Bold "Tr
rue" Alignme
ent "Right">
>
<mob
bile:Label runat "server
r">Programac
ción en ASP.NET 2.0</mo
obile:Label>
</mobile
e:Panel>
<mobile:Panel Runat "server" Ba
ackColor "ye
ellow">
<mob
bile:Label Runat "server
r">Gerardo Sanz</mobile
S e:Label>
</mobile
e:Panel>
<
</mobile:For
rm>
</bod
dy>
</htm
ml>
Un paanel puede contener

c cuaalquier contrrol de movilid
dad ASP.NETT diferente de MobilePagge,
Form
m o StyleSheeet. Los contro oles de paneel no tienen representació
r ón visual y só
ólo albergann las
propiiedades de estilo
e de los controles
c ind
dividuales qu
uehay en su interior.
i Tantto la disposicción
comoo el estilo de los controlees hijos están
n controlados por el adap
ptador del diispositivo.
Control Form
m
Repreesenta el con ntenedor máás externo dee controles dentro
d de un
na página de movilidad. Las
L
caraccterísticas dee este contro
ol tienen prop
piedades del estilo action y method. En particulaar,
Actio
on por defectto es una cad o que causa un envío de datos de datos a la mism
dena vacía, lo ma
URL. Un formularrio desencad dena eventoss cuando se activan
a y se desactivan.
d
Una página
p puede contener varios
v formularios, pero sólo
s se dibuja uno cada vvez en el
naveggador. El formulario activvo actual puede fijarse y recuperarsee mediante laa propiedad
A
A
ActiveForm. Cuan ndo varios fo

ormularios esstén activos en la misma página, pueede conmutarlos
usanddo el controll Link.
<%@ Page
P Languag
eFile "Form.aspx.cs" In
nherits "Form" %>
<%@ Register
R gPrefix "mobile" Namespa
Tag ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
l xmlns "htt
<html tp://www.w3.org/1999/xht
tml">
<head
d runat "ser
rver">
<
<title></tit
tle>
</hea
ad>
<body
y>
<
<mobile:Form
ver">
<mobile:Label ID "Label1" Runat
t "server">P
Primer Form<
</mobile:Lab
bel>
<mobile:Link ID "Link1" Runat "server"
" Nav
vigateUrl "#
#Form2">Sigu
uiente
Form<
</mobile:Lin
nk>
<
</mobile:For
rm>
<
<mobile:Form
ver">
<mobile:Label ID "Label2" Runat
t "server">S
Segundo Form
m</mobile:La
abel>
<mobile:Link ID "Link2" Runat "server"
" Nav
vigateUrl "#
#Form1">Ante
erior
Form<
</mobile:Lin
nk>
<
</mobile:For
rm>
</bod
dy>
</htm
ml>
Para hacer que un n control Lin

nk apunte a un
u formulario o interno, po
onemos en laa propiedad
NaviggateUrl el ID del formulario prefijado
o con el simbolo #
Con
ntroles de
e Listado
o
Los co ontroles Listt, ObjectLIst y SelectionLiist son partes demovilidaad de los con ntroles de listtado
e iterrativos de ASSP.NET.
El conntrol List se parece
p a Reppeater y a DaataList y mueestra una listta estática lim
mitada de
elementos.
El conntrol SelectioonList es útil si necesita que
q el usuario elija entree varios elem mentos de una
lista.
Por último,
ú debem mos usar el control
c ObjectList si nece
esitamos mo ostrar la inforrmación de unau
base de datos de forma tabular.
El co
ontrol Lisst
Dibujja una secuencia de elemmentos en un n dispositivo.. EL control puede
p trabajjar en modo
estático o interacctivo. En mod
do estático, el
e control ge
enera una listta estática en
n la que cadaa
elemento es texto o plano.
En modo interacttivo, todos lo os elementoss se dibujan como

c elemeentos que pueden
seleccionarse y que generan un u evento. Si d eventos para el evento
S un gestor de o ItemComm mand
está presente,
p el control funcciona de form
ma interactivva, sino, trabaja como un
na lista de
opcioones estáticaa. Cuando se fija a true, laa propiedad ItemsAsLinkks transformaa la lista de
elementos en hip E este caso, ningún evento ItemCOm
pervínculos. En mmand se desencadenarrá, ya
que el
e clic se interpreta como o un salto a una
u nueva UR RL. Prodremos indicar essta URL mediante
la pro
opiedad DataaValueField y el texto de hipervínculo o DataTextFiield
<%@ Page
P Languag
eFile "List.aspx.cs" In
nherits "List" %>
<%@ Register
Tag ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
A
A
<html
l xmlns "htt
tml" >
<body
y>
<
<mobile:Form
m id "Form1" runat "serv
ver">
<b>Where
e do you want to go toda
ay?</b>
<mobile:List runat "server" id "Cities" OnnItemCommand
d "List Clic
ck" >
<ite
em Text "Rome" Value "€1
10" />
<ite
em Text "New York" Value
e "$500" />
<ite
em Text "London" Value "€200"
" />
<ite
em Text "Paris" Value "€
€350" />
<ite
em Text "Sydney" Value "$1200"
" />
</mobile
e:List>
<
</mobile:For
rm>
<
<mobile:Form
m runat "serv
ver" id "Res
sultsForm">
<mobile:Label runat "server" id
d "Info"/>
<
</mobile:For
rm>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Com
mponentModel;
using
g System.Dat
ta;
using
g System.Dra
awing;
using
g System.Web
b;
using
g System.Web
b.Mobile;
using
g System.Web
b.SessionState;
using
g System.Web
b.UI;
using
g System.Web
b.UI.MobileControls;
using
g System.Web
b.UI.WebControls;
using b.UI.HtmlControls;
g System.Web
publi
ic partial class
c List : System.Web.UI.MobileCo
ontrols.Mobi
ilePage
{
p
protected oid List Click(object so
vo ource, ListC
CommandEvent
tArgs e)
{
string msg
m String.Format("Goi
ing to {0} for
f {1}.",
e.ListItem.Text, e.ListItem.Vaalue);
xt
Info.Tex msg;
ActiveFo
orm ResultsForm;
}
}
Un coontrol List pu
uede estar limmitado por una
u fuente de datos sólo mediante laa propiedad
DataSSource. El coontrol List pu
uede vincularrse sólo con dos columnaas de la fuente de datos
especcificada: unaa para la proppiedad Text de e elementos y otra de pro
d la lista de opiedad Valu
ue.
Estoss valores se fijan
f mediantte las propiedades DataTTextField y DataValueFielld del controol List.
Al definir un gestor para Item mDataBind, see puede tammbién fijar el texto
t de unaa lista de
elementos como la combinacción de más camposc de origen.
o
<%@ Page
P Languag
eFile "ListB
Bd.aspx.cs"
Inher
rits "ListBd
d" %>
<%@ Register
R Tag
ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title></tit
tle>
</hea
ad>
<body
y>
<mobile:Form
< m ID "Form1" Runat "serv
ver">
<mobile:List DataSource "<%# SqlDataSourc
S ce1 %>" Data
aTextField "au fname"
ValueField "au id" Runat "server" ID
DataV I "lista"
emDataBind "OnItemDataBind"></mobil
OnIte le:List>
<
</mobile:For
rm>
<
<asp:sqldata
asource id "SqlDataSourc
ce1" runat "server"
"
ConnectionString "<%$ Connectio
onStrings:pu
ubsConnectio
onString %>"
SelectCo
ommand "SELECT [au lname , [au fname] FROM
e], [au id],
[auth
hors]"></asp
p:sqldatasource>
A
A
</bod
dy>
</htm
ml> !
using
g System;
using
using
g System.Web
b;
using
g System.Web
b.UI;
using
g System.Web
b.UI.WebControls;
using
g System.Web
publi
ic partial class
c ListBd : System.We
eb.UI.Mobile
eControls.MoobilePage
{
p
protected vo
nder, EventA
Args e)
{
if (!IsPPostBack) DataBind();
}
p
protected vo
oid OnItemDataBind(Objec
ct sender, ListDataBind
L dEventArgs e
e)
{
// e.ListtItem.Text String.Form
mat("{0} ${1}",
$ DataB
Binder.Eval(e.DataItem,
"au fname"),
f Dat
taBinder.Eval(e.DataItem
m, "au id"))
);
}
}
El Objeto
O ObjjectList
Es la parte de mo
ovilidad del control DataG Grid del servidor de ASP.NET. En conccreto, ObjectList
puede tener dos vistas:
v la de lista y la de detalles.
d En la
l vista de lissta, el contro
ol muestra una
ordennación de menú hecha co on los valorees de un únicco campo.
La propiedad LabelField les peermite elegirr qué campo o límite se puuede usar para promocio onar el
menú ú rápido. Cadda elemento mostrado see puede sele eccionar y geenera una vissta de detalle
e en
la quee todos los campos
c de laa fila de dato
os quedan mo ostrados. La forma en qu ue el elemento se
hace que pueda pulsarse
p estáá determinad da por el disp
positivo.
La vissta de detallee puede inclu

uir una barraa de herramiientas con to
odos los commandos
especcificados mediante el uso o de la etiqueta <commaand> junto co on su correspondiente
cerrada, cuyo texxto se fija conn la propiedaad BackComm mandText. Por
P último, laa propiedad
AutoG GenerateField dentro dee las etiquetaas <fields> le
e permite deccidir qué cam
mpos límite se
s van
a dibujar en realid dad.
<%@ Page
P Languag
eFile "Objec
ctListTest.a
aspx.cs"
Inher
rits "Object
tListTest" %>
<%@ Register
Tag ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<html
l xmlns "htt
tp://www.w3.org/1999/xht tml" >
<body
y>
<
<mobile:Form
m id "Form1" runat "serv ver">
<mobile:ObjectList ID "ObjectLi ist1" Runat "server" Co
ommandStyle
eReference "subcommand"
Style
Data
aSource "<%# SqlDataSour rce1 %>" Lab
belStyle Sty
yleReferencee "title">
<Dev
viceSpecific>
<Choice Filter "IsIE">
</Choice>
</De
eviceSpecific>
e:ObjectList>
</mobile
<
</mobile:For
rm>
<asp:sqldatasource id "SqlDataS Source1" run
nat "server"
" connectionnstring "<%$
Conne
ectionString
gs:ConnectionString %>"
ommand "SELECT [Customer
selectco rID], [Compa
anyName], [C
ContactName], [ContactTitle]
FROM [Customers]"></asp:sqldatasource>
</bod
dy>
</htm
ml>
A
A
using
g System;
using
using
g System.Com
mponentModel; "
using
g System.Dat
ta;
using
g System.Dra
awing;
using
g System.Web
b;
using
g System.Web
b.Mobile;
using
g System.Web
b.SessionState;
using
g System.Web
b.UI;
using
g System.Web
using
g System.Web
b.UI.WebControls;
using
g b.UI.HtmlControls;
System.Web
publi
ic partial class
c ObjectListTest : System.Web.U
S UI.MobileCon
ntrols.MobilePage
{
p
protected vo
nder, EventA
Args e)
{
if (!IsP
PostBack) DataBind();
}
}
El Control SellectionLisst
Propo orciona una selección UI para una lista de elementos. AL iguaal que la listaa desplegable eo la
lista de
d selección,, muestra un
na lista de eleementos que e pueden permitir a los u usuarios
seleccionar uno o más elementos. Cuando o un elemennto queda seleccionado, ningún evento del
lado del
d servidor se genera auutomáticameente, como ocurre
o en cieertos controlles de listado
o
Web cuando la prropiedad AutoPostBack se s fija con el valor true. El
E evento
SelecctedIndexChaanged se gennera para el cambio
c de se
elección.
El con
ntrol Selectio
onList puedee dibujarse de cinto tiposs distintos: lissta desplegaable (por defecto),
botónn de seleccióón, botón de comprobaciión, cuadro de lista y cuaadro de listaa con opción
múltiiple. Puede elegir
e entre ellos
e mediante la propied dad SelectTyype. No todoss los disposittivos
soportan todos estos tipos dee selección. Típicamente,
T , un teléfono
o móvil reconnocerá sólo los
tipos de lista de comprobació
c ón y de selección múltiple e, de forma que
q los tiposs de cuadro ded
selección, cuadro o de lista y dee lista despleegable se dib
bujan con una lista de eleección.
Con
ntroles de
e Texto
e la cual hereedan ciertos controles de
La claase TextConttrol es una cllase abstractta a partir de e
naveggación y de entrada.
e Tod
dos los controles basadoss en texto tieenen la propiedad Text, y
pueden utilizarsee mediante programación n para dibujaar la salida dee un control.
Los coontroles Linkk, TextBox, y Label son ejjemplos de este

e tipo de controles.
c El control de
movilidad Label ese similar al de
d ASP.NET y el control ded movilidad Link se pareece mucho al
HypeerLink de ASP P.NET. Otros controles dee texto son el
e control Command, cuyya lógica
repreesenta un bootón de comaando y el con ntrol PhoneCCall.
Control TextB
Box
Geneera un cuadroo de texto dee una sola lín
nea y guardaa en la propieedad Text el texto que
introd ol puede trabajar en modo de contraaseña o numérico, pero no
duce el usuaario. El contro n
puede tener más que una líneea o ser un atributo
a de sóólo lectura.
Este control
c tambbién tiene so
oporte para ele evento dell lado del clieente OnTextC
Changed, qu
ue
ejecu
uta el gestor especificado
o si el texto cambia
c entre
e dos envíos de datos succesivos en la
mism
ma página.
A
A
<mobi
ile:TextBox ID "TextBox1" Runat "se
erver" OnTex
xtChanged "A
Alert">
e:TextBox>
</mobile
)
Control Comm
mand
Contiiene la mayo
oría de las característicass del control Button de ASP.NET y de LinkButton.
Puede ser dibujaddo como un botón de en nvío o como unu hipervínculo. La propiedad Formaat
perm
mite elegir entre Button o Link. Si el fo
ormato elegido es Link, podemos
p elegir una imaggen
para mostrar commo elemento o seleccionab ble. La image
en se fija med
diante la pro
opiedad ImaggeUrl.
Cualqquier pulsación en este control provo oca un envío de datos. Pu uede configu
urar el códigoo del
servid
dor de dos fo ormas distinttas: con el geestor del eveento ItemCommand o co on OnClick. Con
C el
gesto
or del evento o ItemCommand, puede tambiént darr al control un nombre y opcionalmen nte
un arrgumento. Cu uando se pulsa el control, la propiedad lógica Cau usesValidatio
on calcula si el
contrrol tiene quee realizar unaa validación sobre
s el resto de controles del formu ulario.
<%@ Page
P Languag
eFile "TextB
Box.aspx.cs"
Inher
rits "TextBo
ox" %>
<%@ Register
R Tag
ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<html
l xmlns "htt
tml" >
<body
y>
<
<mobile:Form
m ID "Form1" runat "serv
ver">
Search for:
f
<mobile:TextBox runat "server" id "theSubjject" />
<mobile:Command ID "Command1" runat
r "serve
er" Text "GO
O" OnClick "OnSearch" />
<
</mobile:For
rm>
<mobile:Form
< m runat "serv
ver" id "Res
sultsForm">
<mobile:Label runat "server" id
d "theResult
ts" />
<
</mobile:For
rm>
</bod
dy>
</htm
ml>
using
g System;
using
using
g System.Com
mponentModel;
using
g System.Dat
ta;
using
g System.Dra
awing;
using
g System.Web
b;
using
g System.Web
b.Mobile;
using
g System.Web
b.SessionState;
using
g System.Web
b.UI;
using
g System.Web
using
g System.Web
b.UI.WebControls;
using
g System.Web
b.UI.HtmlControls;
publi
ic partial class
c TextBox : System.W
Web.UI.Mobil
leControls.M
MobilePage
{
p
protected vo
oid OnSearch(object send
der, EventAr
rgs e)
{
string msg
m "Results for '{0}'";
msg tring.Format(msg, theSub
St bject.Text);
;
theResults.Text msg;
orm
ActiveFo ResultsForm;
}
}
La propiedad ActiveForm del objeto Form

m modifica u obtiene med
diante programación el
o actualmentte.
formulario activo
A
A
Pho
otoCall
Este control
c es só
ólo de salida y se usa para representaar un número
o de teléfono
o al que llam
mar. *
Para dispositivos que permiteen hacer llam madas, el con
ntrol se comp
porta como uun elemento o
interaactivo que hace una llammada cuando se le selecciona.
La propiedad AlteernateFormaat puede ser cualquier caadena y se ussa para repreesentar el co ontrol
en dispositivos sin capacidadees telefónicaas. Puede ace
eptar dos parámetros, un no que tengaa el
valor de Text y el otro que ten d PhoneNumber. El texto alternativvo se dibuja como
nga el valor de c
texto
o plano a menos que se haya
h especificado la proppiedad AlternnateURL. En este caso, el
n hipervínculo que apuntta a dicha UR
contrrol genera un RL. En este caaso, el contrrol genera un
n
hiperrvínculo que apunta a diccha URL. Si laa propiedad Text no está definida, el número de
teléfo
ono se dibujaa.
<%@ Page
P Languag
eFile "Phone
e.aspx.cs" Inherits "Phone"
%>
<%@ Register
R Tag
ace "System.
.Web.UI.Mobi
ileControls"
Assem
mbly "System
m.Web.Mobile" %>
<html
l xmlns "htt
tp://www.w3.org/1999/xhttml" >
<body
y>
<
<mobile:Form
m id "Form1" runat "servver">
Phone nu
umbers found for Joe:<brr />
<mobile:PhoneCall ID "PhoneCalll1" runat "s
server"
Alte
ernateFormat "{0} at {1}"
ernateURL "http://www.ac
Alte cme.com"
Phon
neNumber "111 222 0000"
t "ACME Corp" />
Text
<mobile:PhoneCall ID "PhoneCalll2" runat "s
server"
Alte
ernateFormat "{0} at {1}"
neNumber "111 333 0000"
Phon
Text
t "Home" />
<
</mobile:For
rm>
</bod
dy>
</htm
ml>
Dibujo Adap
ptativo
Las aplicaciones ded movilidad d pueden adaaptar la aparriencia de loss controles a dispositivoss
especcíficos o a caategorías de dispositivos.. Debido a qu
ue están basados en capaacidades
conocidas de los dispositivos,, puede variaar el estilo de
e los controlees al igual qu
ue hacer quee el
dibujado del conttrol sea más o menos vistoso para assí acomodarlo o a las características del
dispo
ositivo. El dib
bujado adapttativo se realliza usando filtros
f de disppositivos. Unno de estos filtros
f
se rep
presenta con n una etiqueta <DeviceSp pecific> denttro del posicionamiento relativo de lo os
contrroles.
Ente
endiendo los filtros de dispo
ositivos
El enttorno de ejecución de ASSP.NET abstrrae el código o .aspx y geneera el lenguaaje de marcaado
aproppiado para el dibujado en n una gran variedad de dispositivos.
d Sin embargoo, cuando
necessita un códiggo diferente para el mismmo control baasado en varrios dispositivos, debe de efinir
onjunto de filtros de disp
un co positivo para la aplicaciónn y especificaar entonces eel código para
generarlo para caada filtro. Exp
prese un filtrro de dispositivo usando los elementtos
<DevviceSpecific> y <Choice>.
El eleemento <DevviceSpecific>> es un conteenedor que guarda

g un núúmero de eleecciones. Las
eleccciones repressentan paress hechos a paartir de caraccterísticas dee dispositivos y valores
A
A
correespondientess. Los filtros ded dispositivvos se define en en el archiivo web.conffig. Se elije una
u
opcióón si el filtro está verificado, esto es, si el atributo or coinciden. El
o del disposittivo y el valo
siguieente listado muestra varios filtros que están definidos en el archivo
a web.config.
<devi
iceFilters>
<filter name
n "IsIE" compare "Br
rowser" argum
ment "IE" />
>
<filter name
n "IsMobi
ile" compare "IsMobileDevice" argum
ment "true" />
<filter name
n L32" compare "PreferredR
"isHTML RenderingTyp
pe" argument
t "html32" />
/
</dev
viceFilters>>
El eleement <filterr> tiene un nombre que se

s usa para vincularlo
v con el elementt <choice>. El
E
atribuuto comparee define la caapacidad del dispositivo que
q quiere probar.
p La propiedad
argum ment es el vaalor que tien
ne que coincidir. Por ejem
mplo, si tenemos una etiq queta para
dibujar encursivaen dispositivvos WML 1.1 1 y como textto normal en n el resto de sitios:
<%@ Page
P Languag
eFile "Label
lTest.aspx.c
cs"
Inher
rits "LabelT
Test" %>
<%@ Register
R Tag
ace "System..Web.UI.Mobi
ileControls"
Assem
mbly "Systemm.Web.Mobile" %>
<html
tml">
<body
y>
ile:Form ID "Form1" Runat "server">
<mobi >
<
<mobile:Labeel ID "Label1" Runat "se
erver">
<DeviceSpecific>
<Cho
oice Filter "IsMobile" Font
F Italic "True" />
oice Filter "IsIE" Font Name "Arial
<Cho l Black" Fon
nt Size "Lar
rge" />
</DeviceeSpecific>
<
</mobile:Labbel>
</mob
bile:Form>
</bod
dy>
</htm
ml>
Sesiiones
Much hos dispositivvos móviles tienen probllemas con las cookies, o simplemente no las adm
miten
por laa tanto sería una buena práctica:
p
<se
essionState cookieless="tr
rue" />
Pag
ginación
Para paginar se pone
p a true laa propiedad del formularrio Paginate. A continuacción, diferentes
contrroles como List,
L ObjectLIsst, TextView, permiten especificar
e el número de Items por caada
págin piedad ItemsPerPage
na en la prop

-RRS
J

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35

-RS J

-R
Cac
cheado de
e la página de sa
alida
El caccheado de saalida es una potente
p técnnica que incrrementa la reespuesta de las peticione
es y
respuuestas metiendo en la caché el conteenido generado por págin nas dinámicaas. El cachead
do de
salidaa está habilittado por defeecto, pero el resultado de
d una respuesta determinada no se
cacheea a menos que q se especcifique esa reespuesta com mo cacheablee.
Para hacer que seea posible caachear una reespuesta, de ebe tener una política vállida de caduccidad
o valiidación y visiibilidad pública de su cacché. Podemoos hacer estoo o bien usanndo la API dee bajo
nivel OutputCach he o la directtiva de alto nivel
n @Outpu utCache. Cuaando se habiilita el caché
é de
salidaa, se crea una entrada dee caché de saalida en la prrimera peticiión GET a la página. Todaas las
peticiones GET o HEAD posteeriores se sirvven desde la caché de salida hasta qu ue la petición
n
cacheeada caduca. La caché dee salida tamb bién permite
e variacioness de pares noombre/valor GET
o POSST cacheado os.
La caché de salidaa respeta lass políticas dee caducidad y validación de

d las páginaas. Si una pággina
está en
e el caché de
d salida y haa sido marcaado con una política de caducidad qu ue indica que
e la
paginna caduca a los 60 minuto os de haber sido cachead da, se quita a la página ddel caché de salida
a los 60 minutos. Si se recibe otra petición n después dee ese intervaalo, el código
o de la páginaa se
uta y la págin
ejecu na puede ser cacheada dee nuevo. Se llama caduciidad absoluta a este tipo o de
política de caduciidad una páágina es válid da durante cierto
c tiempo o.
Dire
ectiva de caché
c de salida
El siguiente ejemplo demuesttra una forma simple de cachear resp puestas de saalida median nte la
directtiva @OutpuutCache. Este ejemplo simplemente muestra la hora h a la quee se generó laa
respu v el cacheado de salida en acción, cargad
uesta. Para ver c la pággina y observva la hora a laa que
se generó la respuesta. Enton nces refrescaad la página y observad que
q la hora n no ha cambiaado,
lo que indica que se está sirviendo la seguunda respuessta desde el caché de sallida.
<%@ Page
P Languagge "C#" %>
<%@ OutputCache
O Duration "60" VaryByPar
ram "none" %>
%
<html
l>
ipt runat "server">
<scri
void Page Lo
v oad(Object sender, Event
tArgs e)
{
TimeMsg.Text DateTime.Now.ToS
String("G");
;
}
</s
script>
<body
y>
<
<h3>
<font fa
ace "Verdana">Using the Output Cach
he</font></h
h3>
<
<p>
<i>Last generated on:</i>
<asp:Lab
bel ID "TimeM
Msg" runat "server"
" />
</bod
dy>
</htm
ml>
La sigu
uiente directivaa activa el cachéé de salida en laa respuesta:

-RS J

<%@ OutputCache Duration="60"

D V
VaryByParam="
"none"%>

Esta directiva indica sencillamente

s q la página deebe cachearse durante 60 seggundos y que la página no variará por
que
ningúnn parámetro GEET o POST. Las peticiones que se reciban mie entras la página esté en la cach
hé serán respon
ndidas
desde la caché. Después de 60 segundos, se quita a la página de la caché; se maneja la siguientte petición de fo
orma
explíciita y se vuelve a cachear la pággina.
Por supuesto, en el ejemplo

e anterio
or se ahorra muy poco trabajo mediante el caacheado de salid
da. El siguiente
e
ejempplo demuestra laa misma técnica de cacheado de salida, pero
o realizando unaa llamada a unaa base de datoss y
mostraando los resultaados en una tab
bla.
<%@ Page
P Languagge "c#" %>
<%@ OutputCache
ram "none" %>
%
<scri
ipt runat "server">
void Page Lo
v oad(Object Src, EventArg
gs E)
{
String("G");
;
}
</scr
ript>
<html
l>
<body
y>
<
<form id "Foorm1" runat "server">
<h3>
<fon
nt face "Verdana">Using the Output Cache</font
t></h3>
<asp:SqlDataSource ID "SqlDataSSource1" run
nat "server"
" Connection
nString "<%$
Conne
ectionStringgs:Pubs %>"
Sele
ectCommand "SELECT [au i
id], [au lna
ame], [au fn
name], [phon
ne], [address],
[city
y], [state], [zip], [contract] FROMM [authors]"
" />
<asp:GridView ID "GridView1" ruunat "server
r" DataSourc
ceID "sqldat
tasource1" />
<p>
<i>L
Last generated on:</i>
p:Label ID "TimeMsg" run
<asp nat "server"
" /></p>
<
</form>
</bod
dy>
</htm
ml>
Cam
mbiar med
diante parrámetros
En esste ejemplo modificamos
m s ligeramentee la aplicació
ón para perm
mitir al usuario que busqu ue de
formaa selectiva autores en vaarios estadoss. El ejemplo muestra el cacheado
c dee peticiones que
q
camb bien los pares nombre/vaalor de la caddena de conssulta usandoo el atributo VaryByParam m de
la directiva OutpuutCache.
<%@ OutputCach
he Duration=="60" VaryByyParam="state" %>
Por cada estado en

e el conjuntto de datos, hay un víncu ulo que pasa el estado deeseado comoo
partee de la caden
na de consultta. Entonces la aplicación
n construye la
l consulta apropiada a la
base de datos y muestra
m sólo aquellos auttores que pe ertenezcan al estado seleeccionado.
Observa que la prrimera vez que hacemos clic en el vín nculo de un estado
e deterrminado se
genera una nuevaa etiqueta dee fecha en laa parte inferior de la págiina. A partir de ahí, cada vez
que se ntroducir unaa búsqueda por ese estado en el espacio de un m
s vuelva a in minuto, la
etiqueta muestraa la fecha y hora a la que se cacheó laa petición oriiginal.
<%@ Pa

-RS J

<%@ Ou
utputCache Duration="60" VaryByParam="s
V state" %>
<scrip
pt runat="serv
ver">

oid Page Load(Object Src, EventArgs E)
vo
{
TimeMsg.Tex
xt = DateTime.Now.ToString
g("G");
}
</scri
ipt>
>
<html>
<body>
>
<f
form id="Form1" runat="server">
<h3>
<font face="Verdana">Using the Output
O Cache</
/font></h3>
<b>Authors by State:</b>
<table cellspacing="0" cellpadding=""3" rules="all
l" style="back
kground color: #AAAADD;
border color: black
k; border colo
or: black; wid
dth: 700px; bo
order collapse
e: collapse;">
<tr>
<td
d>
<a href="outputcache3 cs
s.aspx?state=C
CA">CA</a></td
d>
<td
d>
s.aspx?state=I
IN">IN</a></td
d>
<td
d>
s.aspx?state=K
KS">KS</a></td
d>
<td
d>
s.aspx?state=M
MD">MD</a></td
d>
<td
d>
s.aspx?state=M
MI">MI</a></td
d>
<td
d>
s.aspx?state=O
OR">OR</a></td
d>
<td
d>
s.aspx?state=T
TN">TN</a></td
d>
<td
d>
s.aspx?state=U
UT">UT</a></td
d>
</tr>
</table>
<p>
</p>
<asp:SqlDattaSource ID="SqlDataSource
e1" runat="ser
rver" Connecti
ionString="<%$
Connec
ctionStrings:Pubs %>"
SelectCCommand="SELECT [au id], [au
[ lname], [a
au fname], [ph
hone], [address], [city],
[state
e], [zip], [coontract] FROM
M [authors] wh
here state=@st
tate">
<SelecttParameters>
<asp:QueryStringParameter Na
ame="state" Qu
ueryStringFiel
ld="state" DefaultValue="CA" />
</SelectParameters>
</asp:SqlDaataSource>
<asp:GridView ID="GridVView1" runat="
"server" DataS
SourceID="sqld
datasource1" />
<p>
<i>Lastt generated on:</i>
<asp:Laabel ID="TimeMsg" runat="s
server" />
</p>
</
/form>
</body
y>
</html
l>
Notiificación de
d Cache Sql
En el ejemplo antterior los dattos se cacheaaban durante 60 segundos, sin imporrtar si los datos
habíaan cambiadoo en la base de
d datos. La invalidación
i QL te permitee hacer que la
de caché SQ
cachéé de entradaa dependa dee la base de datos,
d de tal manera quee el caché dee entrada
solam
mente se limpiará cuando o los datos en
e la base de datos hayan
n cambiado.
Susttitución PostCaché
P é
En ASSP.NET 1.0, laas páginas que eran estááticas en su mayor
m parte pero que contenían una
pequeña región dinámica,
d como el nombrre de usuario orzadas con
o o la hora actual, eran fo
frecuencia a no usar cacheado o a dividir la página en múltiples co ontroles de u
usuario
cacheeados con caaché de fragm mentos. ASP.NET 2.0 perrmite que esttas páginas sse aproveche en del
cacheeado de salid
da, permitien ndo que las páginas
p de saalida cacheadas puedan insertar nueevo
conteenido dinámico en cada solicitud.
s
En el siguiente ejeemplo, la página con saliida cacheadaa inserta unaa llamada din
námica a un
métoodo estático que devuelvve la fecha acctual median nte la API Ressponse.WriteeSubstitution
n.

-RS J

Esta llamada
l dináámica se ejeccuta en cadaa solicitud, y el resultado se inserta en
n la cadena de
d
cachéé de respuessta que se sirrve desde el caché de salida.
<%@ Page
P Languagge "C#" %>
<%@ OutputCache
ram "none"
" %>
<scri
ipt runat "server">
stati
ic string Ge
etCurrentDate(HttpContex
xt context)
{
r
return DateT
Time.Now.ToString();
}
</scr
ript>
<html
l>
<head ver">
<
<title>Post Cache Substitution</tit
tle>
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
<
<b>This page
e uses post cache substiitution to insert
i a dyn
namic value into a cached
page.</b>
<
<br /><br />
>
T
Time: <% DaateTime.Now.ToString() %>
%
<
<br /><br />
>
<
<b>
R
Real Time: <%
< Response.W WriteSubstit
tution(new
HttpR
ResponseSubstitutionCallback(GetCur rrentDate));
; %>
<
</b>
<
</div>
<
</div>
<
</form>
</bod
dy>
</htm
ml>
El siguiente ejemplo realiza laa misma acción que el an
nterior, pero usa un control
asp:SSubstitution para
p insertarr el contenid
do dinámico.
<%@ Page
P Languagge "C#" %>
<%@ OutputCache
ram "none" %>
%
<scri
ipt runat "server">
s
static strin
ng GetCurrentDate(HttpCoontext conte
ext)
{
return DateTime.Now
D .ToString();
;
}
</scr
ript>
<html
l>
<head
d id "Head1" runat "serv ver">
<
<title>Post Cache Substitution</tittle>
</hea
ad>
<body
y>
<
<form id "foorm1" runat "server">
<h4>
This page uses post
p cache substitution
s n to insert a dynamic v
value into a
cache
ed page.</h4>
<p>
Time
e:
<% DateTime.Now w.ToString()) %>
</p>
<p>
<b>R
Real Time:
<asp:Substitution ID "SSubstitution
n1" runat "s
server"
Metho
odName "GetCCurrentDate" />
</b>
>
</p>
<
</form>
</bod
dy>
</htm
ml>

-RS J

Usan
ndo el AP
PI de caché
Aqueellas aplicacio
ones que neccesiten más control sobrre los encabeezados HTTP relacionado os con
el cacché pueden usar
u la funcio onalidad prooporcionada por la clase
Systeem.Web.Http pCachePolicy. El siguientte ejemplo muestra
m el có
ódigo equivalente a las
directtivas de págiina de ejemp
plos anteriorres:
Respo
onse.Cache.SSetExpires(D
DateTime.Now.AddSecon nds(60));
Respo
onse.Cache.SSetCacheab lity(HttpCacheability.Pub
blic);
Podemos converttirla en una política

p de caaducidad desslizante, haciendo que laa hora de
caduccidad se vuelva a estableecer cada vezz que se hace una peticióón a la página, establecie
endo
la pro
opiedad SlidiingExpiration como en ele siguiente ejemplo.
e
Respo
onse.Cache.SSetExpires(D
DateTime.Now.AddSecon nds(60));
Respo
onse.Cache.SSetCacheab lity(HttpCacheability.Pub
blic);
Respo
onse.Cache.SSetSlidingExpiration(truee);
Cacheado po
or fragme
entos de página
Adem más de poderr cachear la salida
s de unaa página entera, ASP.NETT te proporciona una forma
simplle de cachear la salida dee regiones dee contenido de página, a la que se le ha dado el
nomb bre de cacheeado por frag gmentos. Poddemos delimmitar áreas de nuestra páágina median nte un
contrrol de usuario, y marcarlaas para que sean
s cacheadas usando la l directiva @@OutputCacche
de la que hemos hablado en la l sección an
nterior. Esta directiva esp
pecifica la du
uración (en
segun ndos) que deebe estar caccheado en ell servidor el contenido
c dee salida del ccontrol de
usuarrio, así como o condición opcional por la cual deebiera cambiar. Por ejemplo,
o cualquier otra
la siguiente directtiva le dice a ASP.NET qu
ue meta en laa caché de saalida al contrrol de usuariio
duran nte 120 seguundos, y que cambie el caaché usando o las cadenass de búsqued da "CategoryyID" y
"SelectedID" o loss parámetros de envío del formulario o.
<%@
@ OutputCacche Duration
n="120" VaryyByParam="C
CategoryID;SSelectedID"%
%>
El atrributo VaryByParam es extremadame

e ente potente e y permite a los creadorres de controoles
de ussuario ordenar a ASP.NETT para que almacene en caché múltip ples instanciaas de una región
de caaché de salida en el servid
dor. Por ejem uientes URLss distinguen entre distinttas
mplo, las sigu
instan ncias de contenido del co
ontrol de usu
uario del eje
emplo anterioor.
http:///localhost/m
mypage.aspxx?categoryid
d=foo&selecttedid=0
http:///localhost/m
mypage.aspxx?categoryid
d=foo&selecttedid=1

-RS J

Por lo
o tanto, la ló
ógica dentro de un controol de usuario
o puede geneerar dinámicamente
conteenido diferen nte (que se cachea
c por seeparado) dependiendo ded los argumentos que re eciba. !
Ademmás de permitir el atributto VaryByParam, el cach heado por fraagmentos tammbién permite un
atribu
uto VaryByC Control. Mienntras que el atributo VarryByParam cambia los reesultados
cacheeados basándose en parees nombrevvalor enviado os mediante POST o GET,, el atributo
VaryBByControl caambia el fraggmento cacheado en basse a controles dentro del control de
usuarrio. Por ejemmplo:
<%@ OutputCach
he Duration=="120" VaryB
ByParam="CaategoryID;SeelectedID"%>>
Tened en cuenta que, como con c las págin nas con caché é de salida, se
s requiere eel uso explícitto
tantoo de VaryByP Param como de VaryByC Control inclusso si no se ussa ninguno d
de los dos. Si el
contrrol de usuario contiene un
u control dee lista desple
egable llamad do Categoríaa podríamos variar
los reesultados del control de usuario
u depeendiendo del valor selecccionado dentro de la listaa
despllegable. El siguiente códiigo de ejemp
plo muestra cómo meterr en caché do os sección dee
menú ú de una pággina mediantte un controll de usuario declarativo.
<%@ Page Language="C#" %>>

<%@ Register TaggPrefix="Acm
me" TagNam
me="Menu" Src="Menu.a
S scx" %>
<htm
ml>
<body>
<taable>
<ttr>
<
<td>
<Acme:Men nu Category=="MenuIzquiierdo" runat=server/>
<
</td>
<
<td>
<h1>Hola, laa hora actuaal es: <%=DatteTime.Now%
%> </h1>
<
</td>
<
<td>
<Acme:Men nu Category=="MenuDereecho" runat= =server/>
<
</td>
<ttr>
</ttable>
</boody>
</htmml>
El siguiente ejemplo demuesttra la implem

mentación de
el control de usuario "Acme:Menu" con
c
soporte para cachhé.
<%@ Control Lan

nguage="C#" ClassName=="AcmeMenu" %>
<%@ OutputCachhe Duration=="120" VaryB
ByParam="no
one" %>

-RS J

<scrip
pt runat=server> "
pub
blic String Caategory;
voiid Page_Load
d(Object sen
nder, EventArrgs e) {
A
AdoConnecti
ion conn = new AdoConn
nection("MyDSN");
MyMenu.DattaSource = conn.Executee("select * from menu wh

M here categorry=" + Catego
ory );
M
MyMenu.DattaBind();
}
</script>
<asp::datagrid id=="MyMenu" runat=server/>
Tened en cuenta que este ejeemplo mete en e la caché de

d salida la respuesta de cada contro ol de
usuarrio durante un
u periodo de
d 120 segun ndos. Toda laa lógica necesaria para reecrear cada
contrrol de usuario de tipo meenú en caso de
d producirsse un fallo enn la caché (seea porque haan
pasaddo los 120 seegundos o poorque la memmoria en el servidor
s se ha quedado ccorta) se ha
encappsulado limppiamente dentro del conttrol de usuario.
El siguiente ejemplo demuesttra un cacheado de fragm mentos simple. El ejempllo cachea la salida
s
de unn control quee recupera datos desde unau base de datos SQL Seerver, mientras que man ntiene
las prropiedades dinámicas
d dee la página paadre. Se puede ver que laa página es d
dinámica porrque
la hora se actualizza con cada refresco, mieentras que el
e control de usuario sóloo se actualizaa cada
60 seegundos.
<%@ Page
P Languag
ge "C#" %>
<%@ Register
R Tag
gPrefix "Acme" TagName "DataControl
" l" Src "data
actrl cs.asc
cx" %>
<html
l>
ipt runat "server">

<scri
v
void Page Lo
gs E)
{
String("G");
;
}
</s
script>
<body
y>
<form
m id "Form1" runat server>
<
<h3>
<font fa
ace "Verdana">Fragment Caching</fon
C nt></h3>
<
<Acme:DataCoontrol ID "DataControl1"
" runat "ser
rver" />
<
<br>
<
<i>Page last
t generated on:</i>
<
<asp:Label ID "TimeMsg" runat "serv
ver" />
<
</form>
</bod
dy>
</htm
ml>
actrl cs.ascx
Data x
<%@ Control
C Langguage "C#" %>
<%@ OutputCache
O ram "none" %>
Duration "60" VaryByPar %

-RS J

<scri
ipt runat "server">
v
void Page Lo
gs E) )
{
String("G");
;
}
</s
script>
<asp:SqlDataSour
rce ID "SqlDataSource1" runat "serv
ver" Connect
tionString "<%$
Conne
ectionString
gs:Pubs %>"
S
SelectComman
nd "SELECT [au id], [au lname], [au
u fname], [p
phone], [add
dress], [city],
te], [zip], [contract] FROM [author
[stat rs]" />
<asp:GridView ID
D "GridView1" runat "ser
rver" DataSo
ourceID "sql
ldatasource1" />
<p>
<
<i>Control last generated on:</i>
<
<asp:Label ID "TimeMsg" runat "serv
ver" /></p>
Cacheando los
l datos de la pág
gina
ASP.NNET dispone de un motor de caché co ompleto que e puede ser usado
u por las páginas para
almaccenar y recuperar cualqu uier tipo de objeto
o a travvés de las petticiones HTTTP. La caché de
d
ASP.NNET es privad da para cadaa aplicación y almacena los objetos en memoria. La duración de la
cachee es equivaleente a la duraación de la aplicación;
a q cuando una aplicación se
essto significa que
reiniccia, la cache se vuelve a crear.
c
La caché proporciona una inteerface con un Diccionario simple quee permite a los
progrramadores fáácilmente pooner objetos en la caché y recuperarllos. En el casso más simple,
volcaar un elemen
nto en la cach
he es como añadir
a un ele
emento a un diccionario:
Cach
he["myKey"] = myValue;
La reccuperación de
d datos del cache es mu uy simple. Haay que tenerr en cuenta q
que debe de
comp probarse la existencia
e del objeto en cache
c d recuperarrlo, como se muestra en el
antes de
ejemplo siguientee:
myVaalue = Cache["mykey"];
if(myyValue != null ) {
DissplayData(myyValue);
}
Usan
ndo los da
atos de la
a caché
El siguiente ejemplo muestra otro uso sen ncillo de la caaché. Ejecuta una consulta a la base de
datoss y guarda en
n caché el resultado, quéé se seguirá usando
u durante la vida de la aplicació
ón.
Cuando ejecutéiss el ejemplo, observad el mensaje en la parte infeerior de la páágina. Con la
primeera petición,, indica que los datos han
n sido recupe erados de la base de datos. Después de
refrescar la págin
na, se apuntaa que se ha usado
u la copia de la cachéé.
<%@ Page
P Languag
ge "C#" %>
<%@ Import
I Namespace "System
m.Data" %>

-RS J

<%@ Import
I Namespace "System
m.Data.SqlCl
lient" %>
<html
l> *
<scri
ipt runat "server">
v
void Page Lo
gs E)
{
DataView
w Source;
// try to
t retrieve item from ca
ache
// if it
t's not there, add it
Source taSet"];
(DataView)Cache["MyDat
rce
if (Sour null)
{
Connection myConnection
SqlC new
SqlCo
onnection(Co
onfigurationMManager.Conn
nectionStrinngs["Pubs"].ConnectionString);
SqlD
DataAdapter myCommand
m new SqlData
aAdapter("se
elect * from
m Authors",
myCon
nnection);
aSet ds
Data new
w DataSet();
;
myCo
ommand.Fill(ds, "Authors
s");
Sour
rce new DataView(ds.Ta
ables["Autho
ors"]);
Cach
he["MyDataSet"] Source
e;
Cach
heMsg.Text "Dataset cr
reated expli
icitly";
}
else
{
Cach
heMsg.Text "Dataset re
etrieved fro
om cache";
}
DataSource
MyGrid.D Source;
MyGrid.D
DataBind();
}
</s
script>
<body
y>
<
<form id "Fo orm1" method "GET" runat
t "server">
<h3>
<fonnt face "Verdana">Cachin
ng Data</fon
nt></h3>
<asp:GridView ID "MyGrid" runat t "server">
</asp:Gr ridView>
<p>
<i>
<asp:Label ID "CacheMsg
g" runat "se
erver" /></i
i>
</p>
<
</form>
</bod
dy>
</htm
ml>
Inva
alidación
n de la Ca
aché
Inva
alidación Caché basada en Notificacio
N ones de SQ
QL Serverr 2005
Este mecanismo
m u el mecan
usa nismo de nottificación de cambios en las consultas de SQL Serrver
2005 para detectar cambios en
e el resultad
do de las connsultas.
1 Se configura una notiificación basaada en depe

1. endencia de sql
s en la direectiva
OutputCaache, utilizan
ndo la cadena Command n. Este valor le indica a
dNotification
ASP.NET que se va a utilizar
u una dependencia
d a basada en notificacione
n es para la pággina o
un contro
ol DataSourcce
Para la páágina:

-RS J

<%@ OuttputCache Duration="999999" SqlDe

ependency="CommandNotification"
VaryByPaaram="none"" %>
2
2.
Para el co
ontrol Datassource:
<asp:SqlD
DataSource EnableCachin
E ng="true" Sq
qlCacheDepeendency="Co
ommandNot fication"
CacheDuration="Infin
nite" ... />
3 Se debe llamar al mettodo System

3. m.Data.SqlClieent.SqlDepen ndency.Startt() en algún lugar
de la aplicación antess de que se ejecute
e la primera consullta SQL. Esta llamada pue ede
ponerse ene el evento Application__Start() del fichero
f globaal.asax.
Siempre que un comando

c esttá relacionaddo con SQL Server 2005, ASP.NET
A y ADO.NET
autommáticamentee crearán una dependencia de caché é que escuche las notificaaciones de
camb bios enviadoss por SQL Server. Cuando o se cambia un dato en SQL
S Server, eesta notificacción
provoocará la invalidación de las consultass en la caché del servidorr web. La pró
óxima vez que se
solicite una págin
na o control DataSource
D a
asociado n la dependeencia, la página o el contrrol
con
seránn ejecutados en vez de ob btener la información deel caché.
Algun
nos puntos a tener encueentra para que las notificcaciones funccionen correectamente so
on:
1 Las consu
1. ultas deben indicar explíccitamente loos nombres ded las columnnas en la clauusula
Select. Si se usa "SELEECT *" los resultados de la consulta no
n se registraaran para lass
notificaciones de SQLL 2005.
2 Los nomb
2. bres de las taablas deben incluir el nom
mbre del pro or ejemplo, si
opietario. Po
quiere ob
btener una consulta de laa tabla autho ubs, la consulta se
or de la base de datos pu
debe refeerenciar a la tabla como "dbo.authorrs".
3 El usuario
3. o de SQL Server 2005 quee está ejecuttando la consulta tiene qque tener permiso
para regisstrar consulttas para notificaciones. El
E siguiente comando
c Traansact SQL ottorga
esos dereechos : GRAN NT SUBSCRIB BE QUERY NO OTIFICATIONS TO username.
o de SQL Server 2005 quee está ejecuttanto la conssulta tambien tiene que tener
4 El usuario
4. t
derechoss para enviar notificacion
nes desde SQQL Server 200
05. El siguien
nte comandoo
Transact SQL otorga esos
e derechoos: GRANT SEEND ON
SERVICE::SqlQueryNo otificationSerrvice TO userrname.

J

Para trabajar en el
e IIS con Asp
p.NET tenem
mos que regisstrar el Framework.

-RS J

Aspnet_regiis i

Pub
blicar sitiio
Podemos publicar un sitio dessde el Visuall Studio en [G
Generar] [Pu
ublicar sitio]
Crea
ar Instala
ador
Antess de crear un
n instalador sería
s niente establecer en el web.config
conven
<com
mpilation deb
bug=”false”/>>
[Arch
hivo][Agregarr][Nuevo Pro os Tipos de Proyectos][Instalación e
oyecto][Otro
Impleementación][Asistente para proyecto
os de instalacción]

'%%;
;
'TT'@
MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
'%;
; 'T'@
@
'%
;
'T'@
@
'%;
; 'T'@
@
XMLHHttpRequest Encargado de habilitar la comunicacción asíncron

na entre el clliente y el
servid
dor.
'%;
; 'T'@
@
w tradicionales tienen postback cu

Las aplicaciones web uando se hacce una acción
n. En Ajax no
o
tenemmos los refreescos que haacen las apliccaciones web
b molestas. Con
C Ajax la ágina se cargga
más rápido,
r ya quue no vieja to
odo el contenido, solameente lo necesario.
'%;
; 'T'@
@
Existeen varios framework y lib

brerías para programar con AJAX.
'%;
; 'T'@
@
'%;
; 'T'@
@
'%;
; 'T'@
@
Con
ntrol ScriptManag
ger
"
El con
ntrol principal de la infraaestructura del
d servidor ASP.NET
A AJAX es el contrrol ScriptMannager
y ScriiptManagerP Proxy. Encon ntraremos so olo una instanncia del conttrol ScriptMaanager en cada
páginna de ASP.NEET AJAX. Ningguna funcion nalidad de AJAX puede seer habilitadaa en las págin
nas
ASP.NNET AJAX sinn que se hagaa referencia a un control ScriptManager. El control
ScripttManagerPro oxy se utilizaa solo en escenarios de páginas
p matrices para haccer referencia al
administrador dee script origin nal de las págginas de contenido.
El conntrol ScriptM
Manager conttrola y envíaa los recursoss del script. El
E control ScrriptManagerr
utilizaa también caaracterísticass como la acttualización parcial
p de la página,
p los seervicios Web
b y las
llamaadas a métod dos de páginas.
<asp:ScriptManag
ger ID "Scrip
ptManager1" runat "serv
ver">
</asp:Sc
criptManager>
El con
ntrol no prod
duce interfazz de usuario,, funciona exxclusivamentte en el serviidor y no
aumeenta el númeero de bites de
d descarga de la páginaa.
'%;
; 'T'@
@
Con
ntrol Upd
datePanel
)
La actualización parcial
p es la técnica
t de prrogramación
n que se centtra en el conttrol UpdateP
Panel.
UpdaatePanel reprresenta la ruuta más cortaa para AJAX. Nos permitee incorporar la
funcionalidades de
d AJAX a sitios escritos de a clásico modelo de proggramación
d acuerdo al
ASP.N
NET 2.0. Commo desarrollaadores, no teendremos qu ue aprender nuevas habilidades,
excepptuando la siintaxis y sem
mántica del control UpdattePanel.
En veez de permitiir que el navegador realicce una actuaalización de la página com mpleta, el co
ontrol
UpdaatePanel inteercepta cualq quier postback requeridoo y envía unaa petición fueera de bandaa para
actuaalizar el marccado a la missma URL de la
l página. A continuación
c n, actualiza eel árbol DOM
M una
vez que la respueesta está listaa.
n contenedorr definido en
Es un n el ensamblaado System.W Web.Extensiions. Deriva directamente de
Contrrol, actuando
o como un mero
m N aplica ni estilos ni
conteneedor de conttroles hijos. No
formaatos. Posee una
u serie de propiedades para controlar las actualizaciones d de la página y
tambbién expone un
u modelo ded objeto dell lado del clie
ente.
Prog
gramación Normal
N
<%@ Page
P Languag
eFile "Gripd
dViewNormal.aspx.cs"
Inher
rits "GripdV
ViewNormal" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title></tit
tle>
</hea
ad>
<body
y>
'%;
; 'T'@
@
<form id "fo
< orm1" runat "server">
<
<div>
*
<asp:GridView ID "GridView1" ruunat "server
r" AllowPagi
ing "True"
Allo
owSorting "True" AutoGennerateColumn
ns "False" DataKeyNames
D "au id"
Data
aSourceID "SqlDataSourcee1">
<Columns>
<asp:CommandField ShowD
DeleteButton
n "True" Sho
owEditButton
n "True"
ShowSelectButton "T
True" />
<asp:BoundField DataFie
eld "au lnam
me" HeaderTe
ext "au lnam
me"
SortExpression "au lname" />
eld "au fnam
me" HeaderTe
ext "au fnam
me"
SortExpression "au fname" />
eld "phone" HeaderText "phone"
SortE
Expression "phone" />
eld "address
s" HeaderTex
xt "address"
SortExpression "add
dress" />
eld "city" HeaderText
H "
"city" SortE
Expression "city"
/>
eld "au id" HeaderText "au id" Rea
adOnly "True"
SortExpression "au id" />
eld "state" HeaderText "state"
Expression "state" />
SortE
eld "zip" He
eaderText "z
zip" SortExp
pression "zip" />
</Co
olumns>
</asp:Gr
ridView>
<asp:SqlDataSource ID "SqlDataS Source1" run

nat "server" "
Conn
nectionString "<%$ Conne ectionString
gs:pubsConne ectionStringg %>"
Dele
eteCommand "DELETE FROM [authors] WHERE
W [au id d] @au id"
ertCommand "INSERT INTO [authors] ([au lname], [au fname], [phone],
Inse
[addr
ress], [cityy], [au id], [state], [z zip]) VALUES
S (@au lname e, @au fnamee, @phone,
ress, @city, @au id, @state, @zip)"
@addr "
Sele
ectCommand "SELECT [au l lname], [au fname], [ph hone], [addrress], [city],
[au id],
i [state], [zip] FROMM [authors]""
Upda
ateCommand "UPDATE [auth hors] SET [a
au lname] @au lname, [au fname]
@au fname,
f [phon
ne] @phone, [address] @address,
, [city] @
@city, [stat
te] @state,
[zip] @zip WHE
ERE [au id] @au id">
<DeleteParameters>
<asp:Parameter Name "auu id" Type "String"
" />
</De
eleteParameters>
dateParameters>
<Upd
<asp:Parameter Name "auu lname" Typ
pe "String" />
<asp:Parameter Name "au pe "String" />
u fname" Typ
<asp:Parameter Name "phhone" Type "String"
" />
<asp:Parameter Name "adddress" Type
e "String" />/
<asp:Parameter Name "ciity" Type "S
String" />
<asp:Parameter Name "sttate" Type "String"
" />
<asp:Parameter Name "ziip" Type "St
tring" />
" />
</Up
pdateParameters>
<InsertParameters>
u lname" Typ
u fname" Typ
" />
e "String" />/
String" />
" />
" />
tring" />
</In
nsertParameters>
qlDataSource>
</asp:Sq
<
</div>
<
</form>
</bod
dy>
</htm
ml>
Prog
gramación con
c Update
ePanel
<%@ Page
P Languag
eFile "Gripd Panel.aspx.cs"
dViewUpdateP
Inher
rits "GripdV
ViewNormal" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
'%;
; 'T'@
@
<html
l xmlns "htttp://www.w3.org/1999/xht tml">
<head
d runat "serrver">
<
<title></tittle>
</hea
ad>
<body
y>
<
<form id "fo
<
<div>
<asp:Scr
riptManager ID "ScriptMa anager1" run
nat "server" ">
</asp:Sc
criptManager>
datePanel ID "UpdatePane
<asp:Upd el1" runat "server">
"
<Content
tTemplate>
<asp:GridView ID "GridView1" ru unat "server
r" AllowPagi ing "True"
Allo
owSorting "True" AutoGen nerateColumn
ns "False" DataKeyNames
D "au id"
Data
aSourceID "SqlDataSource e1">
<Columns>
<asp:CommandField ShowDDeleteButton
n "True" Sho owEditButtonn "True"
ShowSelectButton "TTrue" />
<asp:BoundField DataFieeld "au lnam
me" HeaderTe ext "au lnamme"
SortExpression "au lname" />
<asp:BoundField DataFieeld "au fnam
me" HeaderTe ext "au fnamme"
SortExpression "au fname" />
<asp:BoundField DataFieeld "phone" HeaderText "phone"
SortE
Expression "phone" />
<asp:BoundField DataFieeld "address
s" HeaderTex xt "address"
SortExpression "adddress" />
<asp:BoundField DataFieeld "city" HeaderText
H "
"city" SortE
Expression "city"
/>
<asp:BoundField DataFieeld "au id" HeaderText "au id" Rea adOnly "True"
SortExpression "au id" />
<asp:BoundField DataFieeld "state" HeaderText "state"
Expression "state" />
SortE
<asp:BoundField DataFieeld "zip" He
eaderText "z zip" SortExppression "zip" />
</Co
olumns>
</asp:Gr
ridView>
</Conten
ntTemplate>
</asp:Up
pdatePanel>
<asp:SqlDataSource ID "SqlDataS Source1" run
nat "server" "
Conn
nectionString "<%$ Conne ectionString
gs:pubsConne ectionStringg %>"
Dele
eteCommand "DELETE FROM [authors] WHERE
W [au id d] @au id"
ertCommand "INSERT INTO [authors] ([au lname], [au fname], [phone],
Inse
[addr
ress], [cityy], [au id], [state], [z zip]) VALUES
S (@au lname e, @au fnamee, @phone,
ress, @city, @au id, @state, @zip)"
@addr "
Sele
ectCommand "SELECT [au l lname], [au fname], [ph hone], [addrress], [city],
[au id],
i [state], [zip] FROMM [authors]""
Upda
ateCommand "UPDATE [auth hors] SET [a
au lname] @au lname, [au fname]
@au fname,
f [phon
ne] @phone, [address] @address,
, [city] @
@city, [stat
te] @state,
[zip] @zip WHE
ERE [au id] @au id">
<DeleteParameters>
" />
</De
eleteParameters>
dateParameters>
<Upd
<asp:Parameter Name "auu lname" Typ
pe "String" />
u fname" Typ
" />
e "String" />/
String" />
" />
tring" />
" />
</Up
pdateParameters>
<InsertParameters>
u lname" Typ
u fname" Typ
" />
e "String" />/
String" />
" />
" />
tring" />
</In
nsertParameters>
qlDataSource>
</asp:Sq
<
</div>
<
</form>
</bod
dy>
</htm
ml>
'%;
; 'T'@
@
ChildrenAsTrigge
ers Indica si los postbbacks proced dentes de los
contrroles hijos prrovocarán la actualizacióón de
UpdaatePanel. Tru ue por defectto. Cuado la
propiedad es falsse, los postbaacks de los
contrroles hijos so
on ignoradoss. No podemos
estabblecer esta propiedad
p como false cuaando
la pro
opiedad Upd dateMode esstá establecida
como o Always
ConteentTemplate e Una propiedad teemplate define lo que
apareecerá en el UpdatePanel
U cuanto éstee se
actuaalice
ConteentTemplate eContainer Recupera el objetto contenedor de la plan ntilla
creaddo dinámicam mente. Podeemos usar esste
objeto para añad dir de forma programada
contrroles hijo a UpdatePanel
U .
IsInPaartialRenderring Indica si el panel está siendo actualizado
como o parte de un n postback aasíncrono. No o
tiene
e utilidad parra creadores web
RendderMode Indica si el contenido del pan nel se actualizará
como o una etiqueta de bloquee <div> o com mo
una etiqueta
e <span>. Los valo ores factibless
para la propiedad d, Block e In ine, son
defin
nidos en la en numeraciñon n
UpdaatePanerRen nderMode. El valor por
defeccto es Block
UpdaateMode Obtieene y estableece el modo de actualización
del control determinando lass condicioness en
las que se actualiiza el panel. Los valores
factib
bles, Alvays y Condicionaal, provienen n de
la enumeración UpdatePanel
U UpdateMod de. El
valorr por defectoo es Always
Triggers Definne la colecció
ón que desen ncadena obje etos,
cada uno represeenta un even nto que provoca
que el
e panel se actualice auto omáticamente
Cuando necesitam mos saber si una porción n de la páginaa está siendoo actualizadaa como resulltado
de unn postback AJAX,
A utilizam
mos la propieedad IsInAsynncPostBack del control SScriptManager
'%;
; 'T'@
@
Uso de Trigge
ers
Podemos asociar un control UpdatePanel
U l con una enumeración ded eventos deel lado del
dor. Si un evento registraado es desen
servid ncadenado por
p un postbaack el panel se actualiza.. Los
desenncadenadorees pueden deefinirse de manera
m declaarativa o med
diante progrramación.
Añadimos un eveento desencaadenador de forma declaarativa utilizaando la sección <Triggerss>
<Triggeers>
OstBackTrigger ControlID=”DropD
<asp:AsyncPO C DownLIst1” EventtNAme=”Selected
dIndexChanged”//>
</Trigggers>
Necesitamos espeecificar dos informacione

i es para cadaa desencaden nador: la ID d
de control qu
ue se
va a superviar
s y el pturar. Resultta imprescindible subrayar
e nombre deel evento quee se va a cap
que el
e componen nte AsyncPosstBackTrigger puede mod dificar tan so
olo eventos d
del lado del
servid
dor. Tanto ControlID com
mo EventNam me son propiedades strin ng.
Ejem
mplo
<%@ Page
P Languag
eFile "Defau
ult3.aspx.cs"
Inher
rits "Default3" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title></tit
tle>
<
<script runa
at "server">
p
protected vo
t sender, Ev
ventArgs e)
{
Label1.T
Text DateTime.Now.ToSt
tring();
}
'%;
; 'T'@
@
</scr
ript>
</hea
ad>
<body
y>
form id "for
<
<div>
<asp:Scr
riptManager ID "ScriptMaanager1" run
nat "server"
"
Enabl
lePartialRen
ndering "true">
criptManager>
</asp:Sc
datePanel ID "UpdatePane
<asp:Upd el1" runat "server"
" Upd
dateMode "Co
onditional">
<Con
ntentTemplate>
<asp:Button ID "Button1
1" runat "se
erver" Text "Button"
OnCli
ick "Button1 Click" />
<asp:Label ID "Label1" runat "serv
ver" Text ""
"></asp:Labe
el>
</Co
ontentTemplate>
</asp:Up
pdatePanel>
</div>
<
<
</form>
</bod
dy>
</htm
ml>
Sobree la propiedaad UpdateMode:
Si estáá en Always, nuestro UpdatePaanel se actualizzará siempre qu

ue haga un PageeLoad, por ejem
mplo a consecuencia
de unaa actualización de otro UpdateePanel.
Si esttá en Condition
nal, nuestro Upd
datePanel sólo se actualizará cuando
c los elem
mentos de denttro de nuestro
UpdatePanel lo requiieran.
<%@ Page
P Languag
eFile "Copia
a de Default
t3.aspx.cs"
Inher
rits "Default3" %>
<!DOC
CTYPE html PUBLIC
P " //W3C//DTD XHTM
ML 1.0 Trans
sitional//EN
N"
"http
p://www.w3.o
1 transition
nal.dtd">
<html
l xmlns "htt
tml">
<head
d runat "ser
rver">
<
<title></tit
tle>
<
<script runa
at "server">
p
protected vo
t sender, Ev
ventArgs e)
{
Label1.T
Text DateTime.Now.ToSt
tring();
}
</scr
ript>
</hea
ad>
<body
y>
<f
form id "forrm1" runat "server">
<
<div>
<asp:Scr
riptManager ID "ScriptMa
anager1" run
nat "server"
"
lePartialRen
Enabl ndering "true">
criptManager>
</asp:Sc
ton ID "Button1" runat "server"
<asp:Butt " Tex
xt "Button" OnClick "Bu
utton1 Click" />
<asp:Upd
datePanel ID "UpdatePaneel1" runat "server"
" Upd
dateMode "Co
onditional">
<Con
ntentTemplate>
<asp:Label ID "Label1" runat "serv
ver" Text ""
"></asp:Labe
el>
ontentTemplate>
</Co
<Triggers>
<asp:AsyncPostBackTrigg
ger ControlI " EventName "Click" />
ID "Button1"
</Tr
riggers>
</asp:Up
pdatePanel>
</div>
<
<
</form>
</bod
dy>
</htm
ml>
'%;
; 'T'@
@
Con
ntrol Upd
dateProgrress
Está designado
d paara aportar cualquier
c tipo de feedback al navegador mientras uno o más
contrroles UpdateePanel están siendo actuaalizados. Si tenemos
t pan
neles múltiples en una páágina,
quizáás queramos encontrar el lugar adecu uado en la páágina para el control de progreso o, si
s es
posibble, desplazarlo programáándolo en el sitio adecuaado con resp pecto al paneel que va a
onal el control donde queramos.
actuaalizarse. Podeemos utilizarr hojas de esstilo y posicio
AssocciateUpdate
ePanelID Obtieene y estableece la ID del control
UpdaatePanel con n la que está asociado este
contrrol
DynaamicLayout Indica si la plantilla de progreeso se actualiza
dinámmicamente en e la página. Está a true
pordefecto
ProgrressTemplatte Indica la plantilla visualizada durante un
postback asíncrono que tardaa más del tie empo
especificado en laa propiedad DisplayAfterr
Un co
ontrol UpdatteProgress puede ser enlazado a un controlc UpdaatePanel con ncreto.
Estab
blecemos el enlace
e a travvés de la propiedad stringg Associated dUpdatePaneelID.Si no se
especcifica ningún
n panel Actuaalizable, el co ogreso apareece para cualquier panel en la
ontrol de pro
págin
na. La interfaaz de usuarioo de la barra de progreso se inserta en la página d del host cuan
ndo la
págin
na se actualizza. Sin embargo, inicialm mente está occulta por el atributo
a CSS display
Cuando está establecido com mo ninguno, ele atributo CSSS display no

o muestra un
n elemento HTML
H
concrreto y reutiliza su espacio
o en la págin
na para que otros
o elemenntos puedan desplazarse
e
adecu uadamente. Cuando el valor de un attributo display es modificado, los eleementos
existeentes se desplazan para hacer sitio a los nuevos.
Si queeremos reseervar espacio o en blanco cuando no se

o para el conttrol de progrreso y dejarlo
desarrrolle ningun
na operaciónn, tan solo establecemos la propiedad d DynamicLayout como false.
f
El framework ASP P.NET AJAX visualiza

v el coontenido de la propiedad d ProgressTeemplate mientras
esperra que el pan
nel se actualice. Podemo os especificarr la plantilla tanto
t de form
ma declarativa o
con programació
p n. En el segu
undo caso, assignamos a laa propiedad cualquier ob bjeto que
impleemente la intterfaz ITempplate. Para laa segunda situación, podeemos especificar fácilme ente el
marcado del conttrol de progrreso como see muestra en n el código:
Con
ntrol Tim
mer
EL co
ontrol Timer es
e el homólo ogo del servidor de un cliiente creado
o utilizando eel método
Winddows.set.Tim
meout. EL con ntrol Timer provoca
p un postback cadaa segundo que se especifica
en la propiedad In
nterval. El po
osback desen ncadena un evento Tick. Utilizando eel temporizad dor
como o un desencaadenador de un panel acttualizable, podemos actu ualizar el con
ntenido del panel
p
perió
ódicamente.
'%;
; 'T'@
@
Insttalar AJA
AX Contro
ol Toolkitt
Se deescarga de
http:///www.codeeplex.com/AjjaxControlTo
oolkit/Releasse/ProjectReeleases.aspx??ReleaseId=1
11121
Creammos, dentro de la carpeta "Program Files" o "Archivos de Pro ograma" de nnuestra

máqu uina,una carp ontener los archivos del paquete
peta para co p de controles.
c
La rutta completa resultante podría
p ser, poor ejemplo, la
l siguiente: "C:\Program
m Files\Ajax
Contrrol Toolkit".
Desccomprimir el archivo quee contiene esste conjunto de controles: AjaxControlToolkit

Framework3.5.zipp sobre la ruta mencionaada en el pun nto anterior.
Copiiar los archivvos contenido m Files\Ajax Control

os en la ruta "C:\Program
Toolkkit\SampleW WebSite\Bin",, dentro de esta
e otra rutaa: "C:\Prograam Files\Ajaxx Control
Toolkkit\Binaries"..
Abrir Visual Stud

dio 2008 y creear un nuevo
o proyecto Web.
W
Haceer clic derech dro de herraamientas, y seleccionar laa opción "Ad

ho en el Cuad dd Tab" para crear
una nueva
n pestañña; como nombre podem e mismo del paquete de controles: "A
mos utilizar el Ajax
Contrrol Toolkit".
Haceer clic derech

ho sobre la pestaña
p reciéén creada y elegir
e la opción "Choose Items" 0 "Eleegir
elementos" para añadirle los controles deel Toolkit, ubbicados en la librería AjaxxControlToolkit.dll
que está
e en la rutta "C:\Prograam Files\Ajaxx Control Too olkit\Binariees".
Tras realizar
r todaas estas operraciones, ya tendríamos
t todo
t lo necesario para uttilizar los
contrroles del Ajaxx Control Tooolkit en nuesstras aplicaciones Web.
El ASP.NET AJAX Control

C Toolkit nace com
mo un proyeccto conjunto entre la com munidad de
progrramadores y Microsoft. Está
E desarrollado en base a ASP.NET AJAX y contiiene una serie de
contrroles Web y extendedore
e es con los qu
ue podremoss utilizar las avanzadas
a caaracterísticass de
ASP.NNET AJAX sin
n más que un n arrastre de ratón. Del mismo
m modo, con su desccarga dispon nemos
de ejeemplos de uso, así comoo del propio código
c fuentte de los controles. Y lo m
mejor de todo es
que es
e totalmente gratuito.
Vamo os a distinguir entre conttroles Web y extendedorres, donde lo

os primeros ttienen una
entidad por sí missmos, mientras que los segundos
s únicamente añaden un com mportamientte a
ontrol Web existente.
un co e
Se traata de una seerie de pequ

ueñas funcion
nalidades qu
ue cualquier webmaster,
w en su historia de
progrramador, ha utilizado o deseado
d paraa sus Webs. La diferenciaa ahora es qu
ue los ejempplos
son 100%
1 AJAX y usarlos no exige
e conocimmiento algunno sobre AJAAX, javascriptt o XML.
Estoss controles vaan desde un simple botó da, hasta un complejo paanel
ón con una alerta asociad
'%;
; 'T'@
@
que podemos
p arrrastrar por laa pantalla; en
n ambos casoos, mandanddo y recogien
ndo informacción
entree el cliente y el servidor sin
s ningún tip po de recarga de página. Su uso hará que nuestraa !
Web sea mucho más m atractivaa y simpáticaa al usuario a la par que potente y effectiva.
10.1
1. Accord
dion
Desccripción
El con
ntrol Web Acccordion te permite
p ubiccar múltipless paneles, dee modo que únicamente uno
será visible
v en ca
ada momento o. Dichos panneles son loss AccordionPPane, de los que debemo os
defin
nir la cabecera (Header) y el conteniddo (Content)). El estado del
d Accordio on es guardad
do,
de modo que el AccordionPan
A ne activo se mantendrá visible
v a travvés de los po
ostbacks.
Prop
piedades
9 pro
opiedades de efinen al Accordion:
• Sele
ectedIndex: Define el AcccordionPane e que estará activo por defecto,
d don
nde el primerro
tiene
e como índice e 0. Es opcio
onal y por de
efecto vale 0.
0
• HeaaderCssClasss / ContentCssClass: Idenntifica el nom
mbre de la clase CSS utillizada para las
cabecceras/conten nidos (Heade
er/content). Si se definee como atributo del Accoordion, la cla
ase se
aplicaará por defe
ecto a todos los AccordioonPane de qu ue esté comppuesto. También se pued de
defin
nir individuallmente como o atributo de
e cada AccorrdionPane.
• FaddeTransitionss: en caso de
e ser true se aplicacará un
u efecto dee fading en la
a transición, en
caso de ser false la transición
n se realizará
á de modo normal. Es op ptativo y porr defecto valle
false.
ansitionDurattion: cantida
• Tra ad de miliseggundos que definen
d la du
uración de unna transición
n. Se
consigue un efectto muy agrad deble con tra ansición de unos
u 200-300
0 milisegunddos.
• FramesPerSecond: número de frames por segundo que q se usará en la anima ación de las
ente un número superiorr a 40.
transiciones. Suele ser suficie
'%;
; 'T'@
@
• AuttoSize: define la restriccción en la alttura del Accoordion. Puedde tomar tress valores:
o Nonne: No tiene ninguna restricción. La altura del Ac ccordion no tiene límite. Es importa ante "
reseññar que esto puede impliicar que otro os elementoss de la misma Web sean movidos.
o Lim
mit: como má áximo, el Acccordion med dirá lo que marque
m la pro
opiedad Heigght. Si el
Accorrdion es máss alto de lo que
q marque su s Height, al AccordionP Pane activo sse le añadirá
á un
scrolll para ajusta
arse al límite
e. En caso de e ser menor a ese límite el Accordion n no sufre
camb bios.
o Fill: el Accordio
on siempre medirá
m lo que e marqué su propiedad Height,
H expa
andiendo o
minimmizando el contenido en base a las necesidades.
n
• Heaader: es una propiedad deld Accordion nPane y defiine el valor de
d su cabece era.
• Conntent: es una a propiedad del Accordio onPane y deffine el valor de su contenido.
• DattaSource: El DataSource a aplicar (to otalmente op ptativo). Parra una correccta aplicació
ón hay
que llamar a Data aBind().
• DattaSourceID: Alternativa amente, pode er asignar el identificadoor de nuestraa fuente de
datoss.
• DattaMember: el e miembro a enlazar cua ando se usa ele DataSourcceID.
Ejem
mplo
<%@ Page Langua age="C#" AutoEventWireuup="true" CodeFile="ACT-Accordion.a
aspx.cs"
Inherrits="Accordion ACT Acccordion" %>
<%@ Register Asse embly="Ajax
xControlToolkit" Namespaace="AjaxCo
ontrolToolkit"
TagPrefix="ajaxToolkit" %>
<!DOCCTYPE html PUBLIC "-//W

W3C//DTD XHTML
X 1.0 Trransitional///EN"
"http://www.w3..org/TR/xhtml1/DTD/xhhtml1-transittional.dtd">
<html xmlns="htttp://www.w3.org/1999/xhtml" >

<head d runat="servver">
<title
e>Accordion< </title>
<stylee>
.accoordionCabece era
{
bordeer: 1px solid black;
backgground-colorr: #ffd800;
font-family: Ariall, Sans-Serif;;
font-size: 14px;
font-wweight: boldd;
padding: 4px;
margin-top: 4px;
cursoor: pointer;
}
.acco
ordionConten nido
{
font-family: Sans-Serif;
backgground-colorr: #fff8ab;
bordeer: 1px solid black;
bordeer-top: nonee;
font-size: 12px;
padding: 7px;
'%;
; 'T'@
@
}
</styyle> )
</heaad>
<bodyy>
<form
m id="form1" runat="servver">
<div>
>
<asp::ScriptManag
ger id="ScripttManager" ru
unat="server"" />
<ajax
xToolkit:Acco ordion ID="A
Accordion1" runat="server
r r"
FadeTTransitions="True"
FramesPerSecond d="50"
Widthh="250px"
TranssitionDuratio
on="200"
HeaderCssClass=""accordionCa abecera"
ConteentCssClass=="accordionContenido">
<Panees>
<ajax
xToolkit:Acco ordionPane ID="Accordio
I onPane1" run
nat="server">
>
<Header>Panel 1</Header>
<Content>Conten nido 1</Conttent>
</aja
axToolkit:AcccordionPane e>
<ajax
xToolkit:Acco ordionPane runat="serve
r er">
</aja
<ajax
xToolkit:Acco ordionPane runat="serve
r er">
</aja
</Pannes>
</aja
axToolkit:Acccordion>
</divv>
</forrm>
</bod dy>
</htmml>
'%;
; 'T'@
@
*
Al tra
atarse de nueestro primerr ejemplo, he emos mostra
ado todo el código
c de la página al
comp pleto. El mottivo es que tengamos en cuenta que al arrastrar el control Acccordion dessde
nuesttra caja de herramientas
h s, automáticcamente quedará registra
ado el Assem
mbly
correespondiente.
Sin em
mbargo, lo que
q no se hará automáticcamente, y debemos
d haccerlo nosotro
os siempre, es
e
incluiir una refere
encia al Scrip
ptManager, lo
l que no req
quiere más que
q otro senccillo arrastre
e
desdee nuestra cajja de herrammientas.
Adem
más, y como es obvio, de
eberán definiirse las clase
es CSS tanto de la cabece
era como del
conte
enido.
En el resto de eje
emplos, no mostraremos
m s más que el código específico del co
ontrol en el que
q
mos trabajan
estem ndo.
'%;
; 'T'@
@
10.2
2. AlwayssVisibleCo
ontrol
Desccripción
El Alw
waysVisibleCControl es unno de los con
ntroles Web del
d ASP.NET AJAX Contro ol Toolkit máás
simplles. Su funcio
onalidad connsiste en dejjar clavado el
e contenido en un puntoo específico de la
páginna. Un ejempplo sería el que
q cierto mensaje se muestre siemp pre en la parrte inferior
dereccha de nuesttra página, y que se man ntenga en la misma posicción de la pa
antalla del ussuario
cuanddo se haga sccroll sobre la
a página.
Prop
piedades
• TarrgetControlIDD: ID del con
ntrol que que eremos que el e AlwaysVisiibleControl cclave en la
posicción que deteerminemos. Habitualmen nte suele traatarse de un “Panel”.
• HorrizontalSide: ubicación horizontal
h (derecha o izq quierda) dondde se clavará á el control. Es
una propiedad
p opptativa que por
p defecto vale v left. Ho
orizontalOffset: distanciaa horizontal en
pixelss desde el obbjeto hasta el
e lado que definamos
d en
n el HorizonttalSide. Es o
optativo y poor
defeccto vale 0 pxx.
• VerrticalSide: ub
bicación verttical (arriba o abajo) don nde se clava
ará el controll. Es una
propiiedad optativva que por defecto
d vale top.
• VerrticalOffset: distancia ve
ertical en pixxels desde ell objeto hastta el lado quue definamoss en
el Ve
erticalSide. Es
E optativo y por defecto o vale 0 px.
• ScroollEffectDuration: definee la cantidadd de segundo os entre que la página ha ace scroll ha
asta
que el
e control se posiciona do onde definam mos. Por deffecto vale 0.1 segundos y siempre de ebe
ser mayor
m que ceero.
'%;
; 'T'@
@
Ejem
mplo
<asp::Panel ID="Pa
anel1" runat=="server" Height="50px" Width="125p
W px">
de mensaje
</aspp:Panel>
<ajaxxToolkit:AlwaysVisibleCo
ontrolExtender ID="AlwayysVisibleConttrolExtenderr1" runat="se
erver"
TargeetControlID="Panel1"
VerticalSide="Botttom"
VerticalOffset="10"
HorizzontalSide="R
Right"
HorizzontalOffset=
="10"
ScrollEffectDurattion="0.0001"">
</ajaaxToolkit:Alw
waysVisibleC
ControlExtend der>
10.3
3. CollapssiblePane
el
Desccripción
Con el
e Collapsible ePanel conseeguiremos qu ue cualquierr control ASPP.NET pueda ser maximizzado o
minimmizado a nue estro antojo.. Distinguiremos entre ell contenido, que será el control que vaya
a cerrrarse y abrirrse (por ejem
mplo un Pane el) y el contrrolador, que será el conttrol sobre el que
deberemos hacerr clic para ce errar y/o abrrir el contenido.
El esttado del con

ntenido (abie
erto o cerrad
do) es guardaado a lo largo
o de los posttbacks, por lo
l que
permmanecerá igua al cuando re
ecarguemos una
u página. Además,
A poddemos especcificar si
quereemos que el contenido te enga una alttura y/o anch
hura determ minadas, o po
or el contrariio
permmitimos que se
s dimension ne como requ uiera.
Prop
piedades
• TarrgetControlIDD: el ID del control
c Web correspondie ente al conte enido.
• CollapsedSize: el tamaño en pixels del contenido cu uando está cerrado.
c Lo h
habitual es
ponerlo a 0, de modo
m que que eda totalmente cerrado..
pandedSize: el tamaño en pixels del contenido cu
• Exp uando esté abierto.
a
• Collapsed: espe ecifica el esttado del conttenido cuand do se inicialiiza la página
a. Puede ser
collappsed (cerraddo) o expanded (abierto).
• Scrooll Contents: si especificcamos true, se añadirá una
u barra de scroll cuand do el tamaño o
sobreepaso al espe ecificado en CollapsedSizze y Expande edSize. Si no
o queremos q que se produ uzca
ningú
ún efecto, lo o pondremos a false.
• Exp
pandControlID/CollapseC ControlID: el ID del contrrol Web corre espondiendo o al controlad
dor.
Como o vemos pode emos elegir un controlad dor que maximice el con ntenido y otro que lo
minimmice. Habitu ualmente am mbos atributo os apuntan al mismo conttrolador.
• TexxtLabelID: ell ID de la Labbel donde se
e especificará á el estado en
e que se encuentra el
conteenido (ver laas dos próximmas propieda ades).
• CollapsedText: texto que se e mostrará en
e la Label especificada
e en TextLabeelId cuando el
e
contrrolador esté cerrado.
• Exp
pandedText: texto que se e mostrará en
e la Label especificada
e en TextLabeelId cuando el
e
contrrolador esté abierto.
• ImaageControlID D: En lugar dee un texto, podemos
p esp
pecificar unaa imagen parra que sea éssta la
que describa
d el estado
e en que e se encuenttra el conten
nido. Si adem más también hemos
especcificado un texto,
t éste see correspond
derá con el texto
t alternaativo de la im
magen (el
'%;
; 'T'@
@
atribuuto “alt”).
• CollapsedImage e: Path que apunta
a a la imagen que se
s mostrará cuando el co ontenido esté
minimmizado.
• Exp
pandedImage e: Path que apunta
a a la imagen que se
s mostrará cuando el co ontenido estté
maxim mizado.
• Exp
pandDirection: podemos definir que el e contenido
o se abra de arriba a aba
ajo o de izquierda
a derrecha. En el primer caso asignaremoss “Vertical” y en el segundo “Horizontal”.
Ejem
mplo
<asp::Label ID="La
abel1" runat=
="server" Tex
xt="Label" CsssClass="CP">
></asp:Labe
el>
<asp::Panel ID="Pa
anel1" runat=
="server" Wid
dth="120px"> >
Este es
e el contenido que será errado mediante el conttrolador,
á abierto o ce
que se
s corresponde con el texxto de arriba
a. Éste a su vez
v describirrá
el esttado.
</aspp:Panel>
<ajax
xToolkit:ColllapsiblePanelExtender ID
D="CollapsiblePanelExten
nder1" runat=
="server"
TargeetControlID="Panel1"
CollapsedSize="0""
ExpanndedSize="3000"
Collapsed="True"
ExpanndControlID=="Label1"
CollapseControlID
D="Label1"
TextLLabelID="Lab
bel1"
CollapsedText="AAbrir contenido"
ExpanndedText="CCerrar contennido"
ExpanndDirection=
="Vertical"/>
axToolkit:CollapsiblePanelExtender>
</aja
10.4
4. Confirm
mButton
Desccripción
Con el
e ConfirmBu utton conseguimos una se encilla funcionalidad. Loo asignaremoos a un Butto
on,
LinkB
Button o Hypperlink, de modo
m que cuaando se hagaa clic sobre éste,
é el nave
egador nos
muesstre una venttana de conffirmación. En
n ésta deberremos elegir “sí” o “no” para que se
ejecu
ute o no el evento
e asocia
ado al contro
ol en cuestió
ón.
Prop
piedades
• TarrgetControlID
D: ID del con
ntrol al que aplicaremos
a el efecto el ConfirmButtton.
• ConnfirmText: te
exto que se mostrará al presionar so
obre el controol. Por ejem
mplo “¿Realm
mente
deseaa ejecutar…??”
Ejem
mplo
Mostrraremos un botón
b que se
e ocupará de e recargar la página. Cua
ando se nos m
muestre la
venta
ana de confirrmación eleggiremos si re
ealmente desseamos recargarla o no.
<asp::Button ID="B
Button1" runat="server" Text="Recarg
T gar página" />
/
xToolkit:ConfirmButtonExtender ID=""ConfirmButttonExtender2" runat="server"
<ajax
etControlID="Button1"
Targe
ConfiirmText="¿Reealmente desea recargarr la página?" />
axToolkit:ConfirmButtonExtender>
</aja
'%;
; 'T'@
@
10.5
5. DragPa
anel

Desccripción
El DraagPanel sería a el ejemplo
o perfecto dee cómo conseguir una funcionalidad avanzada, que
q en
javasscript requerriría decenass de líneas de
e programac
ción, con apeenas dos líne
eas de código
oy
una mayor
m flexibiilidad.
Se ap
plica a cualquier control Web (el máss habitual ess el Panel) y le añade la funcionalidaad de
poder arrastrarlo
o a cualquier parte de la pantalla. Va
amos a distin nguir entre e
el controladoor y el
conteenido, dondee el controlador es sobre
e lo que debeeremos hace er clic y arrasstrar para mover
el contenido.
Prop
piedades
D: el ID del control
c corre
espondiente al contenido
o.
• Dra
agHandleID: el
e ID del con ntrol correspondiente al controlador..
Ejem
mplo
<asp::Panel ID="Pa
anel3" runat=="server" Height="50px" Width="125p
W px">
<asp::Panel ID="Pa
anel1" runat=="server" Wid
dth="125px" BackColor=""Yellow"
Font--Bold="true" BorderColorr="black" BorderWidth="1">
Arrásstrame
</aspp:Panel>
<asp::Panel ID="Pa
anel2" runat=="server" Height="250px"" Width="1255px" BorderColor="black"
BordeerWidth="1">>
e el contenido que vam
Este es mos a poder arrastrar
a porr toda la pantalla.
</aspp:Panel>
</aspp:Panel>
<ajax
xToolkit:Drag
gPanelExtender ID="DraggPanelExtend
der1" runat="server"
DragH
HandleID="Paanel1" Targe
etControlID=""Panel3">
</aja
axToolkit:Dra
agPanelExtender>
<scrip
pt type="tex
xt/javascript">
equeño script para una correcta
// Pe c com
mpatibilidad con
c todos loss navegadore
es.
functtion setBodyH
HeightToConntentHeight() {
documment.body.sstyle.height = Math.max((document.ddocumentEle
ement.scrollHHeight,
documment.body.sscrollHeight)+"px";
}
setBo
odyHeightToC ContentHeigght();
$addHandler(window, "resize e", setBodyHe
eightToContentHeight);
</scrript>
10.6
6. DropDown
Desccripción
Un se
encillo contro
ol que le da un aspecto muy avanzad do y profesioonal a nuestrra página, assí
comoo resultar se muy útil. Co
onsiste en ha
acer aparenttar un DropDown donde n no lo hay. Po
or
ejemplo, imagine emos que tennemos dos paneles y que e al hacer cliick sobre uno
o queremos que
'%;
; 'T'@
@
apareezca el segun
ndo panel de
el mismo mo
odo que aparrece el conte
enido de una
a lista desple
egable
(en la
a imagen lo veremos
v mejjor.
Prop
piedades
D: ID del con
ntrol sobre ell que aplicarremos los efe
ectos. Normaalmente será
á un
Panel, pero puede ser cualqu uier cosa.
opDownContrrolID: El Id del Panel que
• Dro e será mostra ado como unna lista desplegable.
Ejem
mplos
<asp::Label ID="Te
extLabel" runnat="server" Text="Ponte e sobre mí" Font-Names=
F ="Tahoma" Fo
ont-
Size=
="11px" Style="display: bllock; width: 300px; padd ding:2px; pad dding-right: 50px;" />
<asp::Panel ID="DrropPanel" runat="server"" Style="displlay:none;visiibility:hidden; font-
familly:Tahoma; font-size:
f 11px; padding:5px;">
Aquí puede haberr cualquier control:
c imággenes, MultiV Views... lo que
q queráis!!!<br />
Por ejemplo,
e ponngamos un Ca alendario:
<br />
<br />
<asp::Calendar ID=
="Calendar1"" runat="servver" BackColo
or="White" BorderColor=
B ="#999999"
CellP
Padding="4" DayNameForm
D mat="Shortest" Font-Nam mes="Verdana" Font-Size= ="8pt"
ForeCColor="Black" Height="18
80px" Width="200px">
ectedDayStylle BackColor="#666666" Font-Bold="T
<Sele F True" ForeColor="White" />
<TodayDayStyle BackColor="#
B #CCCCCC" Fo oreColor="Blaack" />
<Sele
ectorStyle BaackColor="#C
CCCCCC" />
<WeeekendDayStyyle BackColorr="#FFFFCC" />
<OtheerMonthDaySStyle ForeCoolor="#808080 0" />
<NextPrevStyle VerticalAlign=
V ="Bottom" />>
<DayHHeaderStyle BackColor=""#CCCCCC" Font-Bold="T
F rue" Font-Sizze="7pt" />
<Title
eStyle BackC
Color="#9999999" BorderCo olor="Black" Font-Bold="TTrue" />
</aspp:Calendar>
<br />
Si pussiéramos el calendarios
c s
sobre un Upd
datePanel... podríamos hacer maravvillas ;)
</aspp:Panel>
<ajaxxToolkit:DroppDownExtender runat="sserver" ID="D
DDE" TargetControlID="Te
extLabel"
DropDDownControlID="DropPan nel" />
10.7
7. DropSh
hadow
Desccripción
El Dro
opShadow ex xtiende al co
ontrol Panel con dos caraacterísticas muy interesaantes:
- Aña
ade una sombbra, permitiééndonos defiinir tanto su profundidad d como su osscuridad.
- Crea un efecto de redondea ado del Pane
el.
Por consiguiente,
c , conseguimo
os dos efecto
os muy profe
esionales de forma treme
endamente
sencilla.
'%;
; 'T'@
@
Prop
piedades
• TarrgetControlID D: ID del Pan q aplicaremos los efecctos.
nel sobre el que
• Widdth: profundidad en pixe els de la som
mbra. Es un parámetro op pcional que p
por defecto vale
v
5.
• Opa acity: valor decimal
d en tre
t 0 y 1 que e define la op
pacidad de laa sombra, do
onde el 0
correesponde a tra ansparencia total y 1.0 a completam mente opaco. También ess opcional y su
s
valorr por defectoo es 0.5.
• TraackPosition: lo
l pondremo os a true si nuestro panel lo hemos definido con posición abssoluta
o si va
v a poder se er movido. En caso contrrario pondrem mos false (o no ponemoss nada).
• Rouunded: Si que eremos un efecto
e de reddondeado lo pondremos a true, sino, vale con po onerlo
a falsse.
Ejem
mplo
<asp::Panel ID="Pa
anel1" runat=
="server" Wid
dth="125px" BackColor=""Yellow" Fontt-Names="Arrial">
<div style="paddi
s ng:5px">
En esste panel pod
demos ponerr lo que querramos.
El efe
ecto de sombbreado + borrdeado es muy agradablee a la vista.
</divv>
</aspp:Panel>
<ajax
xToolkit:Drop
pShadowExte
ender ID="DrropShadowEx
xtender1" runat="server"
Opacity="1"
Width
h="5"
Targe
etControlID="Panel1"
Rounded="true">
</aja
axToolkit:Dro
opShadowExtender>
10.8
8. FilteredTextBox
x
El FilteredTextBoox extiende ala TextBox de modo que podemos de efinir qué tip
po de caracte
eres
permmitimos que escriba
e el usu
uario. Elegirremos entre estas configuraciones y ssus múltiples
comb binaciones:
- Nummbers: todoss los númeross
- Low
wercaseLette ers: letras miinúsculas.
- UpppercaseLetteers: letras maayúsculas.
- Custom: los caracteres que definamos.
'%;
; 'T'@
@
Prop
piedades
• TarrgetControlID D: ID del Tex xtBox sobre ele que vamoss a actuar. !
• FiltterType: Tipo o de filtro dee entre los que
q hemos de efinido previamente. Los combinaremos
separrándolos en comas.
c
• ValidChars: sólo o se le hará caso si hemo os elegido a “Custom” co omo FilterTyype. Será un
stringg con los carracteres que considerare emos válidos..
Ejem
mplo
En nuuestro ejempplo vamos a permitir que e en nuestro TextBox se escriban únicamente números
y los signos matemáticos ‘+’, ‘-‘, ‘*’ y ‘/’’.
<asp::TextBox ID=="TextBox1" runat="serve

r er"></asp:Tex
xtBox>
<ajaxxToolkit:Filte
eredTextBox
xExtender ID="FilteredTe
extBoxExtend
der1" runat=""server"
TargeetControlID="TextBox1"
FilterrType="Numb bers,Custom"
ValidChars="+-*/"" >
</ajaaxToolkit:FilteredTextBo
oxExtender>
10.9
9. HoverM
Menu
Desccripción
El Ho
overMenu es un extended dor aplicable
e a cualquierr control Webb. Vamos a d distinguir entre el
cuerp
po y el popupp, de modo que
q cuando el ratón pase e sobre el co
ontrol web ccuerpo, el coontrol
web popup
p apare
ezca en el lug
gar en que hayamos
h espeecificado. Addemás, cuan ndo esto suce eda,
podemos aplicar una clase CSSS al control web cuerpo o, haciendo ver
v al usuario o que es el
causa
ante de que aparezca el popup.
Prop
piedades
D: ID del conntrol identificcado como cuerpo.
c
• PoppupControlIDD: ID del conttrol identificcado como popup.
• HovverCssClass: clase CSS quue se aplicarrá al cuerpo cuando pase emos el ratón
n sobre éste.
• PoppupPostion: lugar
l donde aparecerá el e popup con respecto al cuerpo. Porr defecto vale
Left, y sus otros valores
v son Right,
R Bottom m y Center.
• OfffsetX/OffsetYY: una vez deefinido el PoopupPositionn, podemos añadir
a o quitar pixels en
horizontal o en veertical con respecto
r a suu posición re
elativa.
• PoppDelay: la ca
antidad de milisegundos
m que pasarán entre que nos
n posemos sobre el cue erpo
hastaa que aparezzca el popup.. Por defecto o son 100.
Ejem
mplo
En nu
uestro ejempplo, el cuerp
po se correspponde con unn botón y el popup
p con un Panel, de modo
que cuando
c ón, se muestre un mensa
el usuario vaya a hacer clic sobre el botó aje (Podemoss
asignarle cualquie
er propiedadd al Panel):
<asp::Button ID="B
Button1" runat="server" Text="Haz
T cllic" />
<asp::Panel ID="Pa
anel1" runat=="server"
Heighht="50px" Width="125px"
BackC w" BorderWidth="1px" SccrollBars="Au
Color="Yellow uto">
Si pre
esionas sobre
e el botón, se
s recargará la página.
'%;
; 'T'@
@
</asp
p:Panel>
"
<ajax
xToolkit:HovverMenuExten
nder ID="HovverMenuExte
ender1" runat="server"
PopupControlID=""Panel1"
Targe
etControlID="Button1"
PopupPosition="RRight"
Offse
etX="10">
</aja
axToolkit:Ho
overMenuExteender>
10.1
10. Moda
adPopUp
Desccripción
El Mo
odalPopup ess otro ejemp plo de potentte funcionaliidad en muy pocas líneass de código. Con
éste, conseguimo os el efecto de
d mostrar contenido
c de
eshabilitandoo la interacciión con el re
esto
de la página. Pod
demos emula ar el efecto del
d famoso “window.ope
“ en(...)” de ja
avascript sin
necessidad de saliir de la págin
na en que esstamos ni de abrir una nu
ueva ventana a del navega ador.
Imagiinemos que ele usuario prresiona el bo otón “Dime tu

t nombre y apellidos”, d de repente la
págin
na se oscurecce y aparece e en el centro un cuadro donde se pid de el nombree y los
apellidos... todo ello sin salirr de la página en que esttamos y sin poder
p hacer nada con el resto
de elementos de ésta. Así pues, el usuariio puede elegir entre can ncelar -para volver donde
ba antes- y re
estab ellenar sus datos
d y presio
onar OK, acttivando una llamada a unna función
javasscript que ha
ayamos defin nido.
Distin
nguiremos en ntre el activa
ador, que enn nuestro eje
emplo es el botón
b “Dimee tu nombre y
apellidos”, y el popup,
p que en
e nuestro ejjemplo se coorresponde coon el panel q
que nos mostrará
el forrmulario de entrada
e de datos
d del usu
uario.
Prop
piedades
D: ID del conntrol activado
or. Típicameente será un Button o un LinkButton..
• PoppupControlIDD: ID del conttrol popup. Típicamente
T e será un Pannel.
• BacckgroundCssC Class: clase CSS
C que se aplicará
a al fo
ondo de panttalla, por eje
emplo para dar
d un
efectto de oscurid
dad a los elementos sobrre los que no o vamos a poder interactuar.
• Dro
opShadow: le e daremos ell valor de truue si querem
mos que se añ ñada un efeccto de sombrra a
nuesttro control popup.
p
• OkCControlID: ell ID del elem
mento que produce el efe ecto de OK de nuestro po opup.
• OnOOkScript: nombre del scrript que se activará
a cuan
ndo presioneemos sobre O OK.
• OkCCancelID - Thhe ID of the element thaat cancels the modal pop pup
• Om
mCancelScriptt - Script to run when th he modal pop pup is dismisssed with the
e CancelConttrolID
'%;
; 'T'@
@
Ejem
mplo
En nu
uestro ejemp
plo, el activa
ador será un Button que mostrará un
na ventana emergente )
(popu
up). Desde ésta
é actuaremmos de formaa diferente si mos sobre OK o sobre Can
s presionam ncel.
En nu
uestro ejemp
plo hemos prresionado OK K
<asp::Button ID="B
Button1" runat="server" Text="Abrir
T ventana
v eme
ergente" />
<asp::Panel ID="Pa
anel1" runat=
="server" Wid
dth="125px" BackColor=""yellow">
Ventaana emergen nte debida a la llamada del
d botón
<br />
<asp::Button ID="B
Button2" runat="server" Text="OK"
T />
>
<asp::Button ID="B
Button3" runat="server" Text="Cance
T l" />
</asp
p:Panel>
<ajax
xToolkit:ModdalPopupExteender ID="Mo
odalPopupEx
xtender1" run
nat="server"
CanceelControlID=
="Button3"
OkCoontrolID="Buttton2"
OnCaancelScript=""Cancel()"
OnOkkScript="OK())"
Targe
etControlID="Button1">
</aja
axToolkit:MoodalPopupExttender>
<scrip
pt type="tex
xt/javascript">
functtion OK()
{
alert('Has apretad
do OK');
}
functtion Cancel())
{
alert('Has apretaddo Cancel');
}
</scrript>
'%;
; 'T'@
@
*
10.1
11. Mutua
allyExclusiveCheck
kBox
Desccripción
El MuutuallyExclussiveCheckBox
x extiende al control CheeckBox. Añadiendo vario os checkboxe es con
la misma Key, no os aseguramoos que sólo uno
u de ellos puede
p estar seleccionadoo a la vez, de
d
forma a muy simila
ar a como fun
nciona el RadioButton, con
c la particu ularidad de q
que
deselleccionar un CheckBox es inmediato,, mientras qu ue hacerlo a un RadioButton no es posible
direcctamente y hay
h que acud diar a funcionnes javascrip
pt
Prop
piedades
D: ID del che
eckbox que vamos
v a manejar.
• Keyy: clave que asociará a varios
v checkb
boxes.
Ejem
mplo
Trabaajaremos con n 3 CheckBoxx a la vez, aplicándoles
a ey en el extendedor, de modo
la misma Ke m
que sólo
s puede estar seleccio
onado un Che eckBox, el cual podemoss deseleccion
nar clickando
o en
él, o será deselecccionado cua
ando clickem mos en otro.
<asp::CheckBox ID
D="CheckBoxx1" runat="server" Text="O
Opción A" />>
<ajax
xToolkit:MutuallyExclusivveCheckboxEExtender run
nat="server"
ID="M
MutuallyExclu
usiveCheckbo oxExtender1"
Targe
etControlID="CheckBox1""
Key=""MSCoderExaamples" />
<asp::CheckBox ID
Opción B" />
>
<ajax
nat="server"
ID="M
MutuallyExclu
usiveCheckbo oxExtender2
2"
Targe
'%;
; 'T'@
@
Key=""MSCoderExa
amples" />

<asp::CheckBox ID
Opción C" />>
<ajax
nat="server"
ID="M
MutuallyExclu
usiveCheckbo oxExtender3
3"
Targe
Key=""MSCoderExaamples" />
10.1
12. Nume
ericUpDow
wn
Desccripción
El NuumericUpDow wn extiende al control Web
W TextBox habilitando unos botone es que
incrementan/deccrementan el valor de ésste. El incremmento/decreemento pued de correspon
nder
a:
- El simple +1/-1 aritmético.
entro de un listado
- Subir o bajar de l de va
alores que le
e demos.
mar a un servvicio Web o un método de
- Llam d la página diferente se
egún si incre
ementamos o
decreementamos.
Podre
emos asignarr botones pa entador/deccrementadorr o dejar los que
ara que hagan de increme
hay por
p defecto.
Prop
piedades
• TarrgetControlIDD: ID del Tex
xtBox sobre ele que vamoss a actuar.
• Wid dth: anchuraa combinada del TextBox x y sus boton
nes de arriba/abajo que vvienen dados por
defeccto (mínimo 25). Si elegimos que otrros botones hagan
h esa función, está ppropiedad se
e
ignorrará.
• ReffValues: lista
ado de valorees sobre los que querremmos ir subienndo y bajando. Los darem mos
en foorma de strinng separado por
p punto y coma ‘;’.
• TarrgetButtonDo ownID/Targe etButtonUpID D: ID de los botones
b que hará la funcción de
incrementar y de ecrementar.
• SerrviceDownPath/ServiceUpPath: path del servicio Web al que llamaremos cuando se
incremente o deccremente. En n caso de estar trabajando con méto odos de página no
utilizzaremos estaa propiedad.
• SerrviceDownMe ethod/ServiceUpMethod: método que e será llamaddo para
incrementar/decrementar el TextBox. De eberá tener la forma:
[Web bMethod]
public int NextVa alue(int curre
ent, string ta
ag)
{…}
• Tag g: se corresp
ponde con el segundo parrámetro del método al que q llamaríam mos, y lo
podemos utilizar para disting guir qué elemmento está lllamando al método.
m
Ejem
mplo
En nuuestro sencillo ejemplo, vamos a viajjar por los planetas del sistema
s solar, donde ya no
incluiiremos a nue
estro querido
o Plutón.
<asp::TextBox ID=
="TextBox1" runat="serve
r er" Text="Tierra" Width=""120" style="ttext-
'%;
; 'T'@
@
align:center"></a
asp:TextBox>
>

<cc1::NumericUpDDownExtende er ID="Nume
ericUpDownExtender1" ru unat="server
Targe
etControlID="TextBox1" Width="120"
W
RefVaalues="Mercu
urio;Venus;TTierra;Marte;;Júpiter;Satu
urno;Urano;N
Neptuno"
ServicceDownMethhod="" ServicceUpMethod= ="" TargetButttonDownID=
="" TargetButttonUpID="">
>
</cc1
1:NumericUp pDownExtend der>
10.1
13. Pagin
ngBulleted
dList
Desccripción
El PagingBulleted
dList extiend de a la BullettedList confiriéndole proopiedades de
e paginación y de
ordennación en cliiente. Es deccir, nosotros tendremos el típico listado HTML, ttan largo commo
queraamos, al que
e le aplicarem mos el PaginngBulletedLisst y éste lo paginará
p segú
ún su índice (los
primeeros caracteres) o por nú úmero de iteems por índicce. Todo en cliente, por lo que vamo os a
poder cambiar de e índice sin recargar.
r
El ressultado es trremendamen
nte profesion
nal, fácil de usar y muy manejable.
m
Prop
piedades
D: ID del BulletedList sobbre el que vaamos a trabaajar.
• Clie
entSort: podemos elegir entre ordenar alfabética amente (truee) o no (false
e).
• IndexSize: Númmero de caraccteres en el índice de ca abecera.
• MaxxItemPerPag ge: Máximo número
n de items por cad da página. Prredomina sob bre IndexSizee.
• Sep
parator: El te
exto que seppara los índicces de cabec cera. Típicam
mente será u un guión ‘-‘.
• SeleectIndexCssC
Class: Clase CSS que se aplicará
a al ín
ndice elegidoo. Normalme ente se le aplicará
negrita y/o subraayado.
• UnsselectIndexC
CssClass Clasee CSS que see aplicará a los
l índices qu ue no están elegidos.
Ejem
mplo
Mostrramos un sim
mple listado con
c 6 eleme entos desordeenados que vamos
v a orde
enar y
aplica
aremos como o índice de cabecera
c el primer carác
cter.
<asp::BulletedListt ID="Bulleted
dList1" runatt="server">
<asp::ListItem Tex ></asp:ListItem>
xt="Braulio">
<asp::ListItem Texxt="Arturo"><</asp:ListIteem>
<asp::ListItem Texxt="Sofía"><//asp:ListItem
m>
<asp::ListItem Texxt="Andrés">></asp:ListIte em>
<asp::ListItem Texxt="Begoña"> ></asp:ListIttem>
<asp::ListItem Texxt="Antonio"></asp:ListIttem>
</asp
p:BulletedLisst>
<cc1::PagingBullettedListExtennder ID="PagiingBulletedL ListExtender1
1" runat="serrver
ClientSort="true"
Index
xSize="1"
Separrator="-"
TargeetControlID="BulletedListt1">
</cc11:PagingBulle etedListExte
ender>
'%;
; 'T'@
@
10.1
14. Passw
wordStren
ngth

Desccripción
El PasswordStrength es otro extendedor
e d TextBox.. Con él podrremos mostrrar al usuario
del o el
a que tiene la
nivel de fortaleza l contraseña a que está escribiendo,
e e base a un
en nos parámetrros
os de fortale
típico eza que definniremos nosootros:
- Númmero total dee caracteress.
- Exig
gencia de sig
gnos.
- Exig
gencia de combinar mayú úsculas y minúsculas.
- Exig
gencia de núúmeros.
Podemos elegir y configurar los

l dos modoos que tenem
mos de mostrrar al usuario
o la fortaleza de
assword:
su pa
- Med
diante texto 100% configurable.
- Med
diante una ba
arra que se irá
i rellenand
do.
Adem
más, podemo
os añadir la opción
o de “ayyuda”, dond
de explicar al usuario cóm
mo debe ser su
contrraseña.
Prop
piedades
• TarrgetControlIDD: ID del Tex xtBox sobre el
e que vamoss a trabajar.
• DispplayPosition: posición reelativa del in
ndicador con respecto al TextBox. Pu uede tomar 6
valorres: AboveLeft, AboveRig ght, BelowLeeft, BelowRigght, LeftSidee, RightSide.
• StreengthIndicattorType: tipo o de indicadoor: Text o Ba
arIndicator.
• Pre
eferredPassw wordLength: longitud mín nima que deb bería tener la
l contraseña a.
• Pre
efixText: preefijo a mostra ar cuando esstemos mostrando el tex xto que descrriba la fortaleza
de la contraseña.. Típicamentte será “Forttaleza= “.
• TexxtCssClass: clase
c CSS que e se aplicará al texto que
e describe laa fortaleza de la contrase eña.
• Min
nimumNumerricCharacterrs: cantidad mínimam de caracteres nu uméricos.
• Min
nimumSymbo olCharacters:: cantidad mínima
m de sig
gnos (ej.: $ ^ *)
• ReqquiresUpperA AndLowerCasseCharacterss: especifica amos si exigimmos la comb binación de
mayú úsculas y minnúsculas.
• TexxtStrengthDe escriptions: listado
l de te
exto que se usará
u para de
escribir la fo
ortaleza de la
a
contrraseña. Irá ordenado de débil a fuertte y separado por punto y coma ‘;’. T Tendrá un
mínimmo de 2 texttos y un máximo de 10. Por P ejemplo:: “muy
débil;débil;mejorrable;buena;;perfecta”.
• CalculationWeig ghtings: lista
ado de 4 valoores numériccos separado os por ‘;’, do
onde la suma a de
ellos debe dar 10 00. Cada valo or asigna un porcentaje ded importancia a una característica del
passwword; por eje emplo “40;25;15;20” significa que el 40% del pesso de fortale eza viene de la
longittud de la conntraseña, el 25% a la can ntidad de números, el 15 5% a mayúscu ulas/minúsculas y
el 20%% a la cantid
dad de caraccteres no alfa anuméricos.
• BarrBorderCssClass: Clase CSSS del borde e de la barra indicadora.
• BarrIndicatorCsssClass: Clase CSS del inteerior de la baarra indicadoora.
• HellpStatusLabe elID: ID de la
a Label que usaremos
u op
pcionalmente e- para mosttrar el texto de
ayuda a.
• HellpHandleCssC Class: clase CSS
C del elem mento que mostrará el te exto de ayuda.
'%;
; 'T'@
@
• HellpHandlePosiition: posició
ón relativa del
d elemento o de ayuda co
on respecto al TextBox.
Puede tomar 6 vaalores: Above eLeft, AboveeRight, Below
wLeft, Below
wRight, LeftSSide, RightSide.
Ejem
mplo
Veam
mos qué forta
aleza nos asigna este con
ntrol:
<asp::TextBox ID=
r er"></asp:Tex
xtBox>
<cc1::PasswordStrrength ID="PaasswordStrength1" runatt="server"

Displa
ayPosition="rightside"
Minim
mumNumericcCharacters= ="2"
Minim
mumSymbolC Characters="2 2"
Prefe
erredPassworrdLength="13 3"
Prefix
xText="Forta
aleza: "
RequiresUpperAn ndLowerCase eCharacters="true"
Stren
ngthIndicatorrType="Text""
Targe
etControlID="TextBox1"
TextSStrengthDesccriptions="muy débil; débil; mejorab
ble; buena; perfecta">
p
</cc11:PasswordSttrength>
10.1
15. Popup
pControl
Desccripción
s puede apllicar a cualquier control Web al que
El PopupControl se e llamaremoss cuerpo- y su
s
funcionalidad con
nsiste en mo
ostrar una pe
equeña ventaana emergennte con infom
mación adicio
onal.
Esa ventana
v emergente a la que llamare emos popup- puede ser taambién cualquier contro
ol
Web (típicamentee un panel) y dentro de él podemos ubicar cualq
quier cosa.
Por ejemplo,
e ima
agínese un Te
extBox en ell que cuando
o se pone el ratón sobre él, emerja un
u
'%;
; 'T'@
@
calen
ndario sobre el que podamos elegir una
u fecha y en
e el momen
nto la elijamo
os, ésta se
plasm
me en el Tex
xtBox.
Prop
piedades
• TarrgetControlIDD: ID del conntrol cuerpo.
• PoppupControlID D: ID del conttrol popup.
• Possition: posición relativa en
e la que apaarecerá el po
opup con resspecto al cueerpo. Sus valores
posibbles serán: Leeft, Right, Top,
T Bottom, Center.
• CommmitPropertty: especifica a la propieda
ad del contro
ol cuerpo quue se modificcará con el
resulttado del poppup. Por ejem mplo, en el caso
c de un TextBox,
T lo normal
n es que queramos
modificar su “vallue”, aunque e también po odríamos moodificar su “W
Width”, su “TTextMode”.... Es
opcioonal.
• CommmitScript: función
f java
ascript que se
e ejecutará cuando haya amos dado el resultado del
d
popup.
• OfffsetX/OffsetYY: distancia horizontal/vvertical en pixels que añaadiremos o qquitaremos a la
posicción relativa del popup co on respecto del cuerpo.
Ejem
mplo
Aplicaremos el ejjemplo propu
uesto en 3.15.1
PopUp.aspx
Fecha
a: <asp:TexttBox ID="TextBox1" runatt="server" Wiidth="80"></asp:TextBoxx>
<asp::Panel ID="Pa
anel1" runat=="server" CsssClass="popu
upControl">
<asp::UpdatePane el ID="Update
ePanel1" runnat="server">
<ContentTemplatte>
<centter>
<asp::Calendar ID=="Calendar1"" runat="servver" BackColo
or="White" BorderColor=
B ="#999999"
CellP
Padding="1" DayNameForm
D mat="Shortest" Font-Nam mes="Verdana" Font-Size= ="8pt"
ForeCColor="Black" Width="1600px" OnSelecctionChanged d="Calendar1 1 SelectionCChanged">
<Sele
ectedDayStylle BackColor="#666666" Font-Bold="T
F True" ForeColor="White" />
<TodayDayStyle BackColor="#
B #CCCCCC" Fo oreColor="Blaack" />
<Sele
ectorStyle BaackColor="#C
CCCCCC" />
<WeeekendDayStyyle BackColorr="#FFFFCC" />
<OtheerMonthDaySStyle ForeCoolor="#808080 0" />
<NextPrevStyle VerticalAlign=
V ="Bottom" /> >
<DayHHeaderStyle BackColor=""#CCCCCC" Font-Bold="T
F rue" Font-Sizze="7pt" />
<Title
eStyle BackCColor="#9999
999" BorderCo olor="Black" Font-Bold="TTrue" />
</aspp:Calendar>
</cennter>
</ContentTempla
ate>
</asp
p:UpdatePan
nel>
</asp
p:Panel>
<ajax
xToolkit:PopupControlEx xtender ID="P
PopupContro
olExtender1" runat="serve
er"
TargeetControlID="TextBox1"
Positiion="Bottom">
axToolkit:PopupControlE
</aja Extender>
'%;
; 'T'@
@
PopupControl.asppx.cs
prote alendar1 SelectionChang
ected void Ca ged(object sender,
s Even
ntArgs e)
{
PopupControlExteender1.Commit(Calendar1.SelectedDDate.ToShorttDateString());
}
10.1
16. ResizableContrrol
Desccripción
El ResizableContrrol extiende cualquier co o un Panel o una imagen))
ontrol Web (por ejemplo
confiriéndole la propiedad
p de
e redimensioonamiento. Podemos,
P por ejemplo, ccoger un Pan
nel
con texto
t y redim
mensionarlo a nuestro gusto sin más que
q cogerlo con el ratónn.
Adem
más, añade multitud
m de funcionalidad
f des, como la
anzamiento ded eventos “ “onresizing” y
“onreesize” con lo
os que podemmos crear lóg
gica complejja. Su estado
o se mantien ne durante lo
os
postb
backs y sus dimensiones
d s pueden accceder desde
se e cliente (ja
avascript) y d
desde servido
or
(ASP..NET). Tambbién podemoss limitar su anchura
a y altura máxima as.
Prop
piedades
• TarrgetControlID ntrol Web que vamos a po
D: ID del con oder redimeensionar.
• HanndleCssClass: clase CSS de
d elemento que debemo os coger para redimensio
onar.
• RessizableCssCla
ass: clase CSS que se aplicará cuando o estemos re
edimensionanndo.
• Min
nimumWidth/ /MinimumHe eight: anchura/altura míínimas.
• MaxximumWidth h/MaximumH Height: anchuura/altura máximas.
m
• OnCClientResize: evento quee se lanzará cuando el ellemento hayya sido redim
mensionado
• OnCClientResizin
ng: evento quue se lanzará
á cuando el elemento essté siendo re
edimensionad
do.
• HanndleOffsetX//HandleOffseetY: offsets a aplicar sob
bre el elemento redimensionador.
Ejem
mplo
<stylee>
.handdleText
{
widthh:16px;
heighht:16px;
backgground-imagge:url(imagess/HandleGrip
p.png);
overfflow:hidden;
curso
or:se-resize;
}
</styyle>
<asp::Panel ID="Pa
anel1" runat=
="server" Height="50px" Width="125p
W px">
Elemento que se va a redime ensionar
</asp
p:Panel>
<ajax
xToolkit:ResiizableContro
olExtender ID
D="ResizableControlExten
nder1" runatt="server"
Minim
mumWidth="5 50"
Minim
mumHeight=""20"
Maxim
mumWidth=""250"
Maxim
mumHeight= ="125"
'%;
; 'T'@
@
HandleCssClass="handleText"
Targe
etControlID="Panel1"> !
axToolkit:ResizableContrrolExtender>
</aja >
10.1
17. RoundedCorne
ers
Ejem
mplo
Aplica un redonde
eado de los bordes a cua
alquier contrrol Web (hab
bitualmente un Panel).
Podemos elegir el
e radio de re
edondeo.
Prop
piedades
• TarrgetControlIDD: ID del con
ntrol Web sob
bre el que se
e aplicará el redondeo. H
Habitualmen nte es
un Paanel.
• Raddius: radio de
e redondeo ded las esquin
nas. Por defe
ecto vale 5.
• Color: color de fondo del árrea redondeaada en las essquinas. Por defecto se ccoge el color de
fondoo del Panel al
a que pertennece.
Ejem
mplo
<asp::Panel ID="Pa
anel1" runat=
="server" Widdth="125px" BackColor=""#557755">
Este es
e el panel sobre
s el que se aplicará el
e bordeado.
</asp
p:Panel>
<ajax D="RoundedCornersExtender1" runat=

xToolkit:RoundedCornerssExtender ID ="server"
Targe
etControlID="Panel1"
Radiu
us="8">
</aja
axToolkit:RoundedCornersExtender>
10.1
18. Sliderr
Desccripción
El Slid
der es un ex
xtendedor de el TextBox, de
d modo que e al aplicarlo
o sobre él, se
e convierte en
e un
deslizzador (ver ejjemplo). Suss funcionalidades son mú
últiples.
Por ejemplo
e se puede sincron nizar con un TextBox o una
u Label, de e modo que sse va mostra ando
el vallor numéricoo que represe enta.
Podemos elegir un
u valor mínimo y un valoor máximo, así
a como perrmitir númerros decimalees. El
miento del Slider
movim S puede ser contínuo
o o discreto (le marcarem
mos los paso
os que debe dar).
d
'%;
; 'T'@
@
Ademmás, soporta postbacks e incluso lo podemos

p com
mbinar con un
n UpdatePan
nel para viaja
ar al
servid
dor en modoo AJAX. "
Prop
piedades
• Min
nimum: Valorr inferior. Poor defecto ess 0.
• Maxximum: Valo or superior. Por
P defecto 100.
1
• Deccimals: Cantiidad de deciimales. Por defecto
d no hay.
• Steps: Cuando queramos
q unn deslizamiennto discreto, marcaremo os la cantidaad de pasos.
• Value: Valor acctual del deslizador.
ableHandleAnimation: Acctiva la anim
• Ena mación.
• HanndleAnimatio onDuration: duración en milisegundo os de la animmación.
• RailCssClass: Assigna una cla
ase CSS a la vía
v sobre la que se muevve el deslizad dor.
• HanndleCssClass: Asigna una clase CSS all deslizador.
• HanndleImageUR RL: opcionalmmente podem mos asignar una imagen al deslizador.
• Len
ngth: Longituud del deslizador. Por deefecto se coggerá la longittud del TexttBox que estaamos
extenndiendo
• Bou
undControlID D: ID del TextBox o Labell en el que estamos
e mosttrando el valor del
deslizzador.
• RaiseChangeOnlyOnMouseUp: Si se activva, lanza el evento “cha ange” cuando o se suelta el
e
botónn izquierdo del
d ratón.
Ejem
mplo
Mostrramos lo fáciil que es cre
ear un Slider..
<asp::TextBox ID=
r er"></asp:Tex
xtBox>
<asp::TextBox ID=
r er"></asp:Tex
xtBox>
<ajax
xToolkit:Slide
erExtender ID="SliderExt
I tender1" runat="server"
Targe
BoundControlID=""TextBox2" />
/
10.1
19. TextB
BoxWaterrmark
Desccripción
El TextBoxWatem mark extiende, de nuevo, al control TextBox. Su funcionalida ad consiste en
e
que aparezca
a un texto (de unna clase CSS específica) en
e el TextBo ox cuando esste no haya sido
s
rellennado por el usuari,
u de modo
m que cuaando hagamo os clic sobre éste, ese texto desapareezca,
y si nos
n vamos de el textbox sin
n haber escrito nada, el texto vuelvee a aparecerr.
Su fin
nalidad habittual es la de
e mostrar al usuario
u ciertta informació
ón antes de rellenar el
TextBBox.
'%;
; 'T'@
@
Prop
piedades
D: ID del Tex
xtBox que vaamos a extennder. )
• WatermarkTextt: Texto que se mostrará á cuando no haya nada escrito en el T
TextBox.
• WatermarkCssC Class: la clase
e CSS que se
e aplicará al TextBox cua
ando no haya
a nada escritto.
Ejem
mplo
Vamoos a pedir el nombre de usuario
u y con
ntraseña. En
n la primera imagen vemos cómo
quedarán los cuadros de textto nada más cargarse la página;
p en la
a segunda im
magen hemoss
hechoo click sobre
e el primer TextBox
T y de inmediato se
s ha borrado o el texto “N
Nombre de
usuarrio” para dejjarnos escrib
bir lo que queramos.
<asp::TextBox ID=
r er"></asp:Tex
xtBox>
<br />
<asp::TextBox ID=
r er"></asp:Tex
xtBox>
<ajax
xToolkit:TextBoxWaterm
markExtenderr ID="TextBox
xWatermark
kExtender1" rrunat="serve
er"
Targe
WateermarkText=""Nombre de usuario" />
<ajax
xToolkit:TextBoxWatermmarkExtenderr ID="TextBox
xWatermark
kExtender2" rrunat="serve
er"
Targe
WateermarkText=""Contraseña"" />
10.2
20. TogglleButton
Desccripción
El ToggleButton extiende
e al control
c ChecckBox. Su úniica funcionalidad consistte en sustituir por
imágeenes el estad
do de un Che eckBox. Es decir,
d si el Ch
heckBox estáá “checked” mostrar una a
imageen específica
a, y su está “unchecked” ” mostrar ottra.
Prop
piedades
D: ID del Che
eckBox que extenderemo
e os.
• CheeckedImageU Url: URL de la
l imagen a mostrar
m cuanndo el Check
kBox esté “C
Checked”.
• UnccheckedImag geUrl: URL de la imagen a mostrar cu
uando el Che
eckBox esté “UnChecked
d”.
• Disa
abledChecke edImageUrl: URL de la im
magen a mosstrar cuando el CheckBoxx está
deshaabilitado y en
e estedo de “Checked”.
• Disa
abledUnchecckedImageUrrl: URL de laa imagen a mostrar
m cuand
do el CheckB
Box está
deshaabilitado y en
e estedo de “UnChecked d”.
'%;
; 'T'@
@
• Che
eckedImageAAlternateTex
xt: texto alte
ernativo de la
l imagen deefinida en Ch
heckedImage
eUrl.
• UnccheckedImag
geAlternateT
Text: texto alternativo
a de la imagen definida en *
UnChheckedImageeUrl.
• Ima
ageHeight/Im
mageWidth: Altura/Anch
A ura de la imagen que se va a mostraar.
Ejem
mplo
<asp::CheckBox ID
D="CheckBoxx1" Checked= ="true" Text=
="Mi CheckBo
ox" runat="se
erver"/>
<br>
<ajax
xToolkit:TogggleButtonExttender ID="T
ToggleButtonnExtender1"
runatt="server"
TargeetControlID="CheckBox1""
ImageeWidth="19"
ImageeHeight="19""
UncheckedImageUrl="ToggleB Button Unch hecked.gif"
CheckedImageUrll="ToggleButtton Checked.gif" Check kedImageAlteernateText=""Seleccionad
do"
UncheckedImageA AlternateTex
xt="No selecccionado" />
10.2
21. Valida
atorCallout
Desccripción
El ValidatorCallou ut es un exteendedor de cualquier
c tip
po de validad
dor (Required dFieldValida
ator,
Range eValidator, CustomValid
C ator...), con
n el que consseguimos unaa vista muchho más amab ble de
los típicos validaddores.
No teenemos que aplicar
a los va
alidadores como lo hemo os hecho hassta ahora (ve
er
http://www.subg gurim.net/arrticulos/asp--net-generall-articulo48.a
aspx), pero ccon el detallle de
añadiirles el atrib
buto Display==”None” y assignarles el ValidatorCall
V lout.
Prop
piedades
D: ID del Valiidador que se
s está extenndiendo.
• Widdth: Anchuraa del Callout
• Hig
ghlightCssCla
ass: Opcionallmente se pu uede asignar una clase CSS sobre el CCallout.
• WarningIconIma ageUrl: Url del
d icono que e muestra la alerta. Si no
o se especifiica se muestra el
que viene
v por deffecto.
• CloseImageUrl: Imagen que e produce el cierre del Ca
allout
Ejem
mplo
Un ejjemplo vale más
m que mil palabras, y en
e casos com
mo el Calloutt mucho máss:
<asp::TextBox ID=="TextBox1" runat="serveer"></asp:Te

extBox>
<asp::RequiredFieeldValidator ID="RequiredFieldValidator1" runat=="server" Dissplay="None"
ErrorrMessage='M Mensaje de error donde podemos
p añaadir todo tipo de HTML, por ejemploo una
<a hrref="http://w
www.esasp.net">Url cuaalquiera</a>.'
ContrrolToValidate="TextBox1 1"></asp:ReqquiredFieldV
Validator>
<br />>
<asp::Button ID="Button1" runat="server"" Text="Buttoon" />
<ajaxxToolkit:Valid
datorCalloutExtender run
nat="Server"" ID="ValidattorCalloutExttender1"
'%;
; 'T'@
@
TargeetControlID=="RequiredFieldValidatorr1" Width="3
350px" />

%

MC
M CTS::
Apliicacciones Webb
con
n .N
NETT
35
%

%

Las páginas web sólo

s permiteen la interaccción entre un
n navegador cliente y el sservidor Web
b que
aloja a la página web.
w
bjetivo de loss servicios weeb es crear aplicaciones

EL ob a basadas en web
w que inteeraccionen conc
otrass aplicacioness sin interfazz de usuario. Si somos loss desarrollad
dores de unaa página web b,
dispo
oner de estoss servicios web
w puede inccrementar enormemente nuestra prroductividad.
Imaginemos, por ejemplo, qu ue estamos creando un siitio web paraa una empreesa de corred dores
de boolsa. En lugarr de integrarr la base de datos
d final, con todas las bases de datos de las
difereentes bolsas, la aplicacióón puede com municarse co on sus serviciios web, inteercambiando
o
datoss en formatoo XML.
Los seervicios web

b están débilm
mente acoplados y son completamen
c nte independ dientes del
sistem
ma operativoo o del lengu
uaje de progrramación usaado en el serrvidor o en eel cliente.
Lo ún
nico que neceesitamos parra crear un servicio
s web es que el serrvidor y el cliente admitaan los
proto
ocolos estánd
dar de la industria, HTTP
P, SOAP y XMML.
Cóm
mo funcio
onan los servicios
s s Web
x El servido
or del servicio Web y la aplicación
a cliente están conectados a Internet
x El formatto de datos con
c el que see comunican los dos extreemos de la cconexión cum mplen
el mismo estándar ab bierto. Este estándar
e casii siempre serrá SOAP, bassado en texto
o,
XML
x Los sistem
mas de los do os extremos de la conexión están débilmente aco oplados. No se
preocupaan del SO, el modelo de objetos
o o el lenguaje
l de programació
p ón usado en
cualquierr extremo dee la conexión n.
Dessarrolla un
u servicio Web
El pro
oceso de dessarrollar un servicio
s web es casi idénttico a desarrrollar una pággina web:
x Los archivvos de códiggo que formaan las páginas web y los servicios
s son archivos de
texto. Se pueden creaar y editar coon cualquier editor de texto y tambiéén con el Visual
Studio.
x Un serviccio Web está definido por su archivo.asmx
x Podemoss pensar en un u servicio web
w como en una clase en n la que algu
unos de los
métodos se muestran n a los clientes a través de
d Internet
x Podemoss probar fácillmente un arrchivo .asmx introducien ndo su URL en cualquier
navegado or:
http:///localhost/w
websites/sto
ockTickerInLiine.asmx
%

El proxy
p
Antess de que unaa aplicación cliente
c pueda utilizar un servicio webb, debemos ccrear un proxxy.
Un prroxy es un su ustituto del código
c real al
a que queremmos llamar. Es el responssable de redirigir
la llam
mada a travéés de los límiites del equipo. Las soliciitudes al servvicio Web deeben cumplirr con
el prootocolo y el formato
f adecuados y, no ormalmente SOAP y / o HTTP.
H Podríamos escribirr todo
el códdigo para serrializar y envviar datos adecuados al servicio
s web nosotros mismos, pero eso e
sería mucho trabajo. EL proxyy lo hace porr nosotros.
oxy está registrado por laa aplicación cliente,

El pro c A continuación, la
l aplicación cliente realiiza
llamaadas al método, como si estuviera llamando a un objeto local. Elproxy hacce todo el traabajo
de reealizar nuestrras llamadas, envolverlass en el formaato adecuado o y enviarlass al servidor como
c
una solicitud
s SOA
AP. Cuando ele servidor deevuleve el paaquete al clieente, el proxyy lo decodifica
todo y lo muestraa a la aplicación cliente como si proce ediera de un
n método de un objeto lo ocal.
Para que esto fun ncione, un prrogramador debe crear el e proxy y reggistrarlo con la aplicación
n
clientte que se esttá desarrollando. Este registro es unaa lista de los métodos weeb expuestoss y
sus firmas. El propietario del servicio web b puede añad dir nuevos métodos
m web o actualizarr los
existeentes, sin cambiar su firm
ma, y el proxxy existente no
n fallará.
Crea
ar el Con
nsumidorr
El con s una apliccación de esccritorio, una página web u
nsumidor dee un servicio web puede ser
otro servicio
s web
b. Lo único neecesario es que
q el consumidor puedaa enviar y reccibir paquetees
SOAP P.
La claase proxy se compila en un

u ensamblaado, que deb
be estar regisstrado con laa aplicación
consu umidora.
La ap
plicación consumidora recibe el nomb bre de cliente, y el proxy se encuentrra en el equipo
del clliente. Una vez
v que se creado y registtrado el proxxy con el clieente, lo único
o que tiene que
q
hacerr el cliente para usar el servicio web es realizar una llamada al
a método so obre ese obje
eto
proxyy, como si fuera una llammada sobre un objeto local.
Crea
ar un serrvicio we
eb sencilllo
Abrim
mos un nuevo sitio web de d tipo serviccio web. Al iggual que en un sitio web normal, se
que los detalles específicos serán difeerentes para los
crearrán variosarcchivos y direcctorios, aunq
serviccios web. El archivo
a que se crea por defecto
d es un archivo con la extensióón .asmx
El arcchivo consta de una sola línea
%

<%@ WebService
W L
Language "C#" CodeBehind
d "~/App Cod
de/Service.c
cs" Class "Service" %>
Por su parte, el archivo de código oculto se

s crea en un
n subddirectorio llamado
o App_Code

using
g System;
using
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Services;
[WebS
Service(Name
espace "http://tempuri
i.org/")]
[WebS
ServiceBinding(ConformsTo WsiProf
files.BasicP
Profile1 1)]
// Pa
ara permitir
r que se llam ervicio web desde un sc
me a este se cript, usand
do ASP.NET AJAX,
quite
e la marca de
d comentario de la líneea siguiente
e.
System.Web.Script.Services.ScriptSe
// [S ervice]
publi
ic class Ser
rvice : System.Web.Servi
ices.WebServ
vice
{
p
public Service () {
nar la marca de comentar

//Elimin rio de la lí nte si utiliza los
ínea siguien
compo
onentes dise
eñados
//Initia
alizeComponent();
}
[WebMethod]
[
p
public strinng HelloWorld() {
return "Hello World";
}
El cód
digo oculto contiene
c unaa clase, que recibe
r su nom
mbre del arcchivo de servvicio web, qu
ue
deriva de la clase System.Web.Services.W WebService. Esta
E clase tieene dos atribbutos, WebSe ervice
y WebServiceBind ding.
En la clase Servicee hay un método estándar llamado HelloWord,

H q devuelvee una cadenaa.
que
Este método
m uye el atributo WebMeth
inclu hod, que ide
entifica este método
m com
mo disponible
e ara
aplicaaciones conssumidoras.
using
g System;
using
using
g System.Lin
nq;
using
g System.Web
b;
using
g System.Web
b.Services;
[WebS
Service(Name
espace "http://tempuri
i.org/")]
[WebS
ServiceBinding(ConformsTo WsiProf
files.BasicP
Profile1 1)]
%

// Pa
ara permitirr que se llam
me a este se
ervicio web desde un sc
cript, usand
do ASP.NET AJAX,
quite
e la marca de
d comentario de la líneea siguiente
e.
System.Web.Script.Services.ScriptSe
// [S ervice]
publi
ic class Serrvice : System.Web.Servi
ices.WebServ
vice
{
/
//Matriz de simbolos y precios
p de acción.
a los precios de las accione
es son del 1 de
mayo de 2005
s
string[,] st
tocks
{
{"MSFT","Microsoft","25.30"},
{"DELL","Dell Computers","34.833"},
{"HPQ","Hewlett Packard","20.477"},
{"YHOO","Yahoo","34.50"},
{"GE","GGeneral Electric","36.20
0"},
{"IBM","International Business Machine","776.38"},
{"GM","GGeneral Motors","26.68"},
{"F","Foord Motor Com
mpany","9.11
12"}
}
};
p
public Service()
{
nar la marca de comentar

//Elimin rio de la lí nte si utiliza los
ínea siguien
compo
onentes dise
eñados
//Initia
alizeComponent();
}
[WebMethod]
[
p
public double GetPrice(string StockkSymbol)
/
//Dado un simbolo de valor, devuelvve su precio
o
{
for (intt i 0; i < stocks.GetL
Length(0); i++)
i
if (String.Compare(StockSymmbol, stocks
s[i, 0], tru
ue) 0)
return Convert.ToDouble
e(stocks[i, 2]);
return 0;
}
[
[WebMethod]
p
public Strinng GetName(string StockS
Symbol)
{
for (intt i 0; i < stocks.GetL
Length(0); i++)
i
{
if (String.Compare(StockSymmbol, stocks
s[i, 0], tru
ue) 0)
return stocks[i, 1];
}
return "Simbolo no encontrado";;
}
}
Dire
ectiva WebServicce
<%@ WebService
W L
Language "C#" CodeBehind
d "~/App Cod
de/Service.c
cs" Class "Service" %>
Sustittuye a Page en
e aspx
%

Derrivar de la clase WebServi

W ce
En el ejemplo antterior la clasee Service herreda de Web
bService. Derrivar de Web
bService es
onal, pero ofrece ventajaas:
opcio
x on y Session
Applicatio
x User
x Context (Información
( n del invocad
dor)
Esta
ado de la
a aplicación media
ante Http
pContextt
Se tieene acceso al objeto App
plication med
diante el obje
eto HttpConttext.
[WebM
Method]
p
public void SetStockExchange(string
g Exchange)
{
Applicattion["exchange"] Excha
ange;
}
[
[WebMethod]
p
public strin
ng GetStockExchange()
{
return Application[
A ;
"exchange"].ToString();
}
Atriibuto We
ebService
eBinding
g
Defin
ne un conjunto de operacciones especcífico.Una claase WebServvice tiene unaa vinculaciónn
predeetermianda, que incluye todos los métodos web de la clase queq no están específicam mente
asociados con una vinculación n no predeteerminada. El atributo WeebServiceBinding se utilizza
para identificar vinculacioness no predeterrminadas.
Atriibuto We
ebMethod
d
Cada método quee queramos mostrar al co
onsumidor debe:
d
x Ser declarado como público.

p
x Tener el atributo
a bMethod antes de la decclaración del método
Web
Pro
opiedad BufferRes
B sponse
Por defecto,
d ASP..NET almacena en la mem moria interm
media toda laa respuesta a una solicitu
ud,
antess de enviarla desde el serrvidor al cliente. EN casi todos los cassos, éste es eel
compportamiento óptimo. Sin embargo, si la respuestaa es muy largga, quizás qu ueramos
desacctivar esta memoria
m intermedia, asiggnando a la propiedad
p Bu
ufferResponsse false.
[Web
bMethod(BuffferResponsee=false)]
Pro
opiedad CacheDur
C ration
[Web
bMethod(CaccheDuration=30)]
%

Pro
opiedad Descripti
D on
Cadena descriptivva. Aparecerrá en la págin
na de ayuda del servicio Web
W cuando
o lo probemo
os en !
el navvegador.
[Web
bMethod(Description=”D
Devuelve el precio
p de stock para el sím
mbolo de entrada”)]
Pro
opiedad EnableSes
E ssion
[We
ebMethod(Description "NUmero de hits
h por ses
sion", Enabl
leSession true)]
p
public int HitCounter()
H
{
if (Session["HitCounter"] nuull)
{
Session["HitCounter"] 1;
}
else
{
Session["HitCounter"] ((iint)Session["HitCounter
r"]) + 1;
}
return ((int)Session["HitCounte er"]);
Pro
opiedad MessageN
M Name
POdeemos tener másm de un método con el mismo nom mbre en la claase C#. Se diferencian po
or su
firmaa. Cada firmaa única puedee ser invocad
da de formaiindependien
nte. (Sobrecaarga)
Los seervicios web

b no permiten sobrecargaa. La propied
dad MessageeName elimin
na la ambigü
üedad
causaada por teneer más de un método conn el mismo nombre.
[WebM
Method(Descrription "Devuelve el valor
v de los
s usuarios en
e un simbolo especificado",
Messa
ageName "G
GetValuePortfolio")]
p
public double GetValue(string Stock
kSymbol)
{
return 0;
}
[
[WebMethod(DDescription "Devuelve el valor de ios compartidos en un
e los usuari
olo especificado", MessageName
simbo "G
GetValueStoc
ck")]
p
public double GetValue(string Stock
kSymbol, int
t NumShares)
{
return 0;
}
Doccumentoss de Desccubrimie
ento
http:///localhost:4974
43/Servicioweb
b/Service.asmx??disco
<?xml version="1
1.0" encoding="utf-8" ?>
- <discoverry xmlns:xsi="h
http://www.w
w3.org/2001/X
XMLSchema-in
nstance"
xmlns::xsd="http://w hema" xmlns="http://schemas.xmlsoap.orrg/disco/">
www.w3.org/2001/XMLSch
<contractR
Ref ref="http://localhost:49 oweb/Service.asmx?wsdl"
9743/Servicio
docRe
ef="http://localhost:49743/
/Servicioweb/
/Service.asmx
x"
xmlns=
="http://sche
emas.xmlsoap..org/disco/scll/" />
<soap add
dress="http://
/localhost:497
743/Serviciow
web/Service.as
smx" xmlns:q1=
="http://temp
puri.org/"
bindin
ng="q1:Overlo
oadedGetValue
e" xmlns="http://schemas.xmlsoap.org/disco/soap/" />
>
<soap add
dress="http://
/localhost:497
743/Serviciow
web/Service.as
smx" xmlns:q2=
="http://temp
puri.org/"
bindin
ng="q2:Strock
kTickerSoap" xmlns="http://schemas.xmls
soap.org/disco
o/soap/" />
%

<soap add
dress="http://
/localhost:497
743/Serviciow
web/Service.as
smx" xmlns:q3=
="http://temp
puri.org/"
bindin
ng="q3:Overlo
oadedGetValue
e1" xmlns="http://schemas.xmlsoap.org/disco/soap/" />
"
<soap add
dress="http://
/localhost:497
743/Serviciow
web/Service.as
smx" xmlns:q4=
="http://temp
puri.org/"
bindin
ng="q4:Strock
kTickerSoap12" xmlns="http:://schemas.xm
mlsoap.org/disco/soap/" />
>
</disco
overy>
Imp
plementa
ación
Como
o la de una página
p web cualquiera.
c
% D

Cream
mos un nuevvo sitio web
Debeemos proporcionar una reeferencia paara el servicioo web (en cooncreto al pro
oxie). VS2008
añade una refereencia web a nuestro
n clien
nte. Puede aggregar a un servicio
s web si este servicio se
está sirviendo
s desde un direcctorio virtual.
http:///localhost/sservicioweb//service.asm
mx
Tras crear
c el direcctorio virtual, podemos agregar
a el se
ervicio comorreferencia w
web para un sitio
s
web consumidor.
c .
[Sitio
o Web][Agreggar referenciia Web]
%

Se añ
ñadirá una caarpeta App_W
WebReferen
nces, que se mostrará
m en el explorado
or de solucio
ones.
Tamb
bién ha apareecido en el web.config
w
<appS
Settings>
<add key "localhost.service" va
alue "http://localhost/s
servicioweb/
/service.asm
mx"/>
pSettings>
</app
Agregga una refereencia

local
lhost.Strock
kTickerSoap p
proxy new localhost.S
StrockTicker
rSoap();
Label2.T
Text "Web Service reto
orna " + pro
oxy.HelloWor
rd();

ASP .NET Framework 3.5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

ASP .NET Framework 3.5

Enviado por

Direitos autorais:

Formatos disponíveis

El proceso de comunicación entre el navegador y el servidor a través del protocolo

1. El explorador Web inicia una petición de un recurso a un servidor Web.

Ningún dato se conserva de la respuesta entre el servidor web y el navegador y la conexión se

HTTP, Protocolo de Transferencia de Hipertexto

GET /default.aspx HTTP/1.1

La primera línea contiene el método, también conocido como un verbo o un comando,

recibe en el otro lado.

El objeto Request representa la comunicación desde el navegador al Servidor solicitando un

El objeto Response representa la respuesta del servidor al navegador

Server: Microsoft IIS/6.0

Content Type: text/html

1. Números del estilo 1XX que representan mensajes de tipo informativo.

enviar el encabezado de Host.

1. Visualizar el documento, por ejemplo con tipos text/html .

2. Llamar a una aplicación externa, por ejemplo con tipos application/pdf .

3. O preguntarle al usuario que hacer ante un tipo que no se entiende, por

x Permitir la negociación de contenido. El cliente, en su petición incluye los tipos MIME

Tipo MIME Descripción

video Datos de vídeo. Requiere la capacidad para

application Otros tipos de datos, normalmente no

El registro contiene una lista de tipos MIME:

Después de la línea con el tamaño del contenido, la respuesta envía el mensaje.

Enviando datos de formulario al Servidor

<form method="POST" action = "getCustomer.aspx" >

GET /getCustomer.aspx?Id=123&color=blue HTTP/1.1

POST /getCustomer.aspx HTTP/1.1

   %   & '(   

Desarrollar aplicaciones Web ASP.NET sobre el .NET Framework es similar a desarrollar

Formularios Web Forms o páginas .aspx

Páginas con código trasero

Enlaces a servicios Web XML

Conectividad a bases de datos

Proceso de una solicitud

1. El navegador cliente envía una solicitud GET HTTP al servidor.

2. El parseador ASP.NET interpreta el código fuente.

3. Si el código no se ha compilado todavía en una biblioteca de enlace dinámico (DLL), ASP.NET

4. El CLR carga y ejecuta el código Microsoft intermediate language (MSIL)

1. El navegador cliente envía una solicitud GET HTTP al servidor.

2. El CLR carga y ejecuta inmediatamente el código MSIL que ya se ha compilado durante el

Creando un sitio web

Para crear un sitio web de sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en Nuevo sitio Web.

3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

4. En el cuadro Ubicación, seleccione la casilla Sistema de archivos y escriba el nombre de

Por ejemplo, escriba el nombre de carpeta C:\Tasks.

6. Haga clic en Aceptar.

Visita guiada por Visual Web Developer

Diagrama del entorno de Visual Web Developer

x Barras de herramientas. Proporcionan los comandos que permiten dar formato al

x Explorador de soluciones. Muestra los archivos y carpetas del sitio web.

x Ventana Documento. Muestra los documentos en los que se está trabajando en

x Ventana Propiedades. Permite cambiar la configuración de la página, los elementos

x Cuadro de herramientas. Proporciona los controles y elementos HTML que se pueden

x Explorador de bases de datos. Muestra las conexiones de las bases de datos. Si no ve la

Para recorrer el entorno de desarrollo

1. En el menú Ver, haga clic en Barras de herramientas.

Se muestra un submenú de barras de herramientas disponibles. Las barras de herramientas

2. Desplácese hasta el final de la lista de barras de herramientas y haga clic en

Se muestra el cuadro de diálogo Personalizar.

4. En el menú Ver, haga clic en el Explorador de soluciones.

5. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el

6. Presione ESC para cerrar el menú de acceso directo.

7. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el

Server: MicrosoftIIS/6.0

ContentType: text/html

% & '(

<

Si ha habilitado el seguimiento para la aplicación, al solicitar cualquier página, ésta reúne