You are on page 1of 37

Marco Besteiro y Miguel Rodrguez ASP.NET.

Controles HTML y Web


1/37 1
ASP.NET. Controles HTML y ASP.NET de Servidor.
Controles HTML de servidor.
Los controles HTML de servidor son los tpicos de HTML y por tanto bastante austeros.
Permiten disear pginas bsicas HTML, compatibles con todos (o casi todos) los
navegadores.

Son accesibles desde la pestaa HTML de la Caja de herramientas.



Figura 21.1. Caja de herramientas. Pestaa de controles HTML.

Los controles HTML de servidor pertenecen al namespace
Syst em. Web. UI . HTMLCont r ol s y derivan de la clase
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
2/37 2
Syst em. Web. UI . HTMLCont r ol s. HTMLCont r ol ,

la cual deriva de Syst em. Web. UI . Cont r ol .



Figura 21.2. namespace Syst em. Web. UI . HTMLCont r ol s y jerarqua de herencia.

Tienen la particularidad de permitir lanzar eventos en el lado del servidor, al igual que
los controles ASP.NET de servidor.
En realidad, cuando se crea un control HTML de servidor lo que se est haciendo es:
- En el fichero con la pgina Web (. aspx): crear una etiqueta HTML
correspondiente al control. Por ejemplo, el control HTMLBut t on corresponde a la
etiqueta <but t on>.
- En el fichero de cdigo (. cs): crear una instancia de la clase a la que pertenece
tal control, al igual que con los controles ASP.NET de servidor. Esta clase tiene
una serie de mtodos y propiedades que permiten acceder a los campos del
elemento HTML correspondiente al botn.

Por ejemplo, si se crea un control HTML de servidor de la clase HTMLBut t on, realmente
se va a crear un control que permitir acceder desde el cdigo a un elemento HTML
<but t on>. Lo mismo sucede con los controles HTMLI nput But t on (que permite acceder
desde el cdigo al elemento <i nput t ype=but t on>, <i nput t ype=submi t >, o <i nput
t ype=r eset >), HTMLI nput Text (que permite acceder desde el cdigo al elemento
<i nput t ype=t ext >), etc...

A continuacin se va a modificar el ejemplo anterior para que cuando se cambie el valor
de la caja de texto desde el servidor cambie tambin el texto que se muestra en el botn.
El evento que se lanza cuando el texto de la caja de texto -propiedad Val ue- va a
cambiar desde el servidor es Ser ver Change.
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
3/37 3
Si en la ventana de diseo se hace doble click sobre la caja de texto, se crea
automticamente el cdigo correspondiente a tal evento. A partir de aqu slo resta
programar lo que se desee que suceda cuando se d el evento.

pr i vat e voi d Text 1_Ser ver Change( obj ect sender , Syst em. Event Ar gs e)
{
i f ( But t on1. Text . Equal s( " But t on" ) )
But t on1. Text = " Hol a" ;
el se
But t on1. Text = " But t on" ;
}

Si se ejecuta la aplicacin se ver que la primera vez que se pulsa el botn y se cambia
en consecuencia la propiedad Val ue de la caja de texto, no cambia el texto del botn.
Esto es as porque no se considera cambio el primer paso de la caja de texto vaca a
mostrar Hol a I nt er net . Para que se lance el evento Ser ver Change ha de existir un
texto distinto a Hol a I nt er net en la caja de texto antes de pulsar el botn. En tal caso,
al pulsar el botn But t on1 se lanzar el evento Text 1_Ser ver Change (tambin se
lanzar But t on1_Cl i ck( ) , por supuesto) y se ejecutar su cdigo, y se3 cambia el texto
del botn.



Figura 21.3. Ejecucin de la aplicacin. Resultado tras lanzar el evento
Text 1_Ser ver change.
Controles ASP.NET de servidor.
Los controles ASP.NET de servidor ofrecen una mayor variedad que los controles
HTML. Todo control HTML tiene su control ASP.NET equivalente pero ASP.NET
ofrece ms controles nuevos.
Todos los controles ASP.NET de servidor pertenecen al namespace
Syst em. Web. UI . WebCont r ol s y derivan de la clase
Syst em. Web. UI . WebCont r ol s. WebCont r ol ,
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
4/37 4
que a su vez deriva de Syst em. Web. UI . Cont r ol .



Figura 21.4. namespace Syst em. Web. UI . WebCont r ol s y jerarqua de herencia.

Cuando se crea un control ASP.NET de servidor lo que se est haciendo es:
- En el fichero con la pgina Web (. aspx): crear una etiqueta HTML especial
correspondiente al control. Por ejemplo, el control But t on corresponde a la
etiqueta <asp: But t on>.
- En el fichero de cdigo (. cs): crear una instancia de la clase a la que pertenece
tal control. Esta clase tiene una serie de mtodos y propiedades que permiten
acceder a los campos del elemento HTML especial correspondiente al botn.

Por ejemplo, si se crea un control ASP.NET de servidor de la clase But t on, realmente
se va a crear un control que permitir acceder desde el cdigo a un elemento HTML
especial <asp: But t on> (como puede verse en la aplicacin Hol aI nt er net ).

Todos estos controles soportan eventos de servidor de un modo ms potente que los
controles HTML de servidor, ofreciendo un gran abanico de posibilidades a la hora del
desarrollo.

En tiempo de diseo, estos controles estn disponibles en la pestaa Web Forms de la
Caja de herramientas

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
5/37 5


Figura 21.5. Caja de herramientas. Pestaa de controles WebForms.
Clase Label.
Un control de la clase Label muestra un texto en una pgina Web.
La clase Label contiene la propiedad Text , a partir de la cual es posible cambiar su
texto.
Su uso es muy sencillo y se ha podido comprobar en la aplicacin Hol aI nt er net .

El asistente de Visual Studio.NET separa el cdigo de la pgina . aspx, generando una
pgina . aspx. cs. No obstante, es posible disear una pgina . aspx que contenga
tambin el cdigo en forma de scripts de servidor.

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
6/37 6
Clase TextBox.
Es una caja de texto tpica. El control Text Box es un control de entrada que permite al
usuario introducir texto.
Una propiedad interesante es Text Mode, cuyos valores pueden ser Si ngl eLi ne,
Mul t i l i ne o Passwor d.

Clase Button.
Es un botn de comando tpico.
Puede ser de dos tipos:
- Control Submi t : La propiedad CommandName en un botn de pulsacin de tipo
Submi t est vaca. Un botn Submi t , al ser pulsado, provoca un envo Post de
la pgina al servidor y una validacin.
- Control de tipo Comando: Es similar al control Submi t . La diferencia es que la
propiedad CommandName tiene un valor, que puede considerarse un modo de
nombrar a un control para distinguirlo de otros. Cuando se pulsa un botn de
tipo comando, se genera un evento Cl i ck y tambin un evento Command que
pueden ser respondidos o tratados con el mtodo But t on_Cl i ck y el mtodo
But t on_Command respectivamente. El mtodo But t on_Command recibe un
parmetro de la clase CommandEvent Ar gs, cuyas dos propiedades ms
importantes son:
o CommandName: contiene el nombre dado al botn.
o CommandAr gument : contiene un argumento pasado al pulsar el control.
Permite pasar informacin al servidor cuando se pulsa un botn de
comando.

En el siguiente ejemplo se ilustra como crear directamente una etiqueta, una caja de
texto y un botn en una pgina web (. aspx) y cmo utilizarlos mediante un script de
servidor.

<%@Page Language=" C#" %>
<HTML>

<HEAD>

<scr i pt l anguage=" C#" r unat =" ser ver " >

voi d But t on_Cl i ck( Obj ect Sender , Event Ar gs e)
{
Text 1. Text = " Hol a I nt er net "
}

</ scr i pt >

</ HEAD>

<body>

<f or mr unat =" ser ver " I D=" For m1" >

<h1 al i gn=" cent er " >
<f ont f ace=" Ar i al " >
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
7/37 7
<asp: Label i d=" Label 1" Text =" Hol a I nt er net " r unat =" ser ver " / >
</ f ont >
</ h1>

<p al i gn=" cent er " >
<asp: Text Box i d=" Text 1" Text =" " Wi dt h=" 200px" r unat =" ser ver " / >

<p al i gn=" cent er " >
<asp: But t on i d=" But t on1" Text =" Hol a" OnCl i ck=" But t on_Cl i ck"
r unat =" ser ver " / >

</ f or m>

</ P>

</ body>

</ HTML>

Para probar este ejemplo puede crearse una aplicacin Web vaca.



Figura 21.6. Ventana de creacin de una nueva aplicacin Web ASP.NET vaca, sin
asistente.

El siguiente paso es aadir un fichero . aspx (men Proyecto/Aadir Formulario
Web) vaco, en el que se copiar el cdigo anterior.

Por ltimo habr que hacer que tal fichero sea la pgina principal de la aplicacin para
que se lance al probarla. Conseguir tal cosa implica seleccionar la pgina en el cuadro
Explorador de soluciones, pulsar el botn derecho y elegir la opcin Establecer como
pgina de inicio.
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
8/37 8

Clase LinkButton.
Esta clase representa un control muy similar, en apariencia, al control de la clase
Hyper l i nk pero con la funcionalidad de un botn de comando. Es decir, al pulsarlo no
se provoca un salto a un hipervnculo, sino la invocacin de un mtodo de servidor de
respuesta al evento Cl i ck.

En el siguiente ejemplo se muestra un uso bsico del control Li nkBut t on. Al pulsarlo,
se ejecutar el evento correspondiente de servidor, que mostrar el texto Ha si do
pul sado el Li nkBut t on1, est o no i mpl i ca un sal t o a un hi per v ncul o en
una caja de texto.



Figura 21.7. Vista diseo de la pgina WebForm con el control Li nkBut t on.

El cdigo HTML es:

<%@ Page l anguage=" c#" Codebehi nd=" WebFor m1. aspx. cs"
Aut oEvent Wi r eup=" f al se" I nher i t s=" Ej empl oASPNETCont r ol s. WebFor m1" %>
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >

<HTML>

<HEAD>
<met a name=" GENERATOR" Cont ent =" Mi cr osof t Vi sual St udi o 7. 0" >
<met a name=" CODE_LANGUAGE" Cont ent =" C#" >
<met a name=" vs_def aul t Cl i ent Scr i pt " cont ent =" J avaScr i pt ( ECMAScr i pt ) " >
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
9/37 9
<met a name=" vs_t ar get Schema"
cont ent =" ht t p: / / schemas. mi cr osof t . com/ i nt el l i sense/ i e5" >
</ HEAD>

<body MS_POSI TI ONI NG=" Gr i dLayout " bgCol or =" #f f f f f f " >

<f or mi d=" For m1" met hod=" post " r unat =" ser ver " >

<asp:LinkButton id="LinkButton1" style="Z-INDEX: 101; LEFT: 307px;
POSITION: absolute; TOP: 88px" runat="server" Width="107px"
Height="19px">LinkButton1</asp:LinkButton>

<asp: Text Box i d=" Text Box1" st yl e=" Z- I NDEX: 102; LEFT: 131px; POSI TI ON:
absol ut e; TOP: 130px" r unat =" ser ver " Wi dt h=" 435px"
Hei ght =" 34px" ></ asp: Text Box>

</ f or m>

</ body>
</ HTML>


El cdigo de servidor de respuesta al evento Cl i ck sobre Li nkBut t on1 es:

pr i vat e voi d Li nkBut t on1_Cl i ck( obj ect sender , Syst em. Event Ar gs e)
{
Text Box1. Text = " Ha si do pul sado el Li nkBut t on1, est o no i mpl i ca
un sal t o a un hi per v ncul o" ;
}

El resultado de ejecutar la aplicacin (antes de pulsar Li nkBut t on1) es:


Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
10/37 10

Figura 21.8. Invocacin de la pgina WebForm con el control Li nkBut t on.

Es interesante observar el cdigo de cliente que se ha generado, por dos motivos:
- Observar cmo funciona en realidad el control Li nkBut t on.
- Por extensin, profundizar en el funcionamiento real de los WebForms.

Para ver el cdigo de cliente se ha de seleccionar la opcin Ver/Fuente en el navegador
(en este caso Internet Explorer):

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >
<HTML>
<HEAD>
<met a cont ent =" Mi cr osof t Vi sual St udi o 7. 0" name=" GENERATOR" >
<met a cont ent =" C#" name=" CODE_LANGUAGE" >
<met a cont ent =" J avaScr i pt ( ECMAScr i pt ) " name=" vs_def aul t Cl i ent Scr i pt " >
<met a cont ent =" ht t p: / / schemas. mi cr osof t . com/ i nt el l i sense/ i e5"
name=" vs_t ar get Schema" >
</ HEAD>

<body bgCol or =" #f f f f f f " MS_POSI TI ONI NG=" Gr i dLayout " >

<f or mname=" For m1" met hod=" post " act i on=" WebFor m1. aspx" i d=" For m1" >
<i nput t ype=" hi dden" name=" __VI EWSTATE" val ue=" dDwt Mj cyNj U2ODU1Ozs+"
/ >

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')"
style="height:19px;width:107px;Z-INDEX: 101; LEFT: 307px; POSITION:
absolute; TOP: 88px">LinkButton1</a>

<i nput name=" Text Box1" t ype=" t ext " i d=" Text Box1"
st yl e=" hei ght : 34px; wi dt h: 435px; Z- I NDEX: 102; LEFT: 131px; POSI TI ON:
absol ut e; TOP: 130px" / >

<i nput t ype=" hi dden" name=" __EVENTTARGET" val ue=" " / >
<i nput t ype=" hi dden" name=" __EVENTARGUMENT" val ue=" " / >

<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform = document.Form1;
theform.__EVENTTARGET.value = eventTarget;
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</ scr i pt >

</ f or m>
</ body>
</ HTML>

Como puede verse, el control Li nkBut t on1 es realmente un hipervnculo
(<a. . . >Li nkBut t on1</ a>). Lo especial es que es un hipervnculo a una funcin
j avascr i pt (__doPost Back). Que lo que hace realmente es ejecutar submi t ,
realizando una respuesta POST hacia el servidor. Cuando el servidor reciba esa
respuesta la analizar y sabr que ha de ejecutar el mtodo Li nkBut t on_Cl i ck. Al
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
11/37 11
ejecutar tal mtodo se generar una pgina web de respuesta al cliente en la que el texto
Ha si do pul sado el Li nkBut t on1, est o no i mpl i ca un sal t o a un
hi per v ncul o aparecer en la caja de texto Text Box1.



Figura 21.9. Resultado de lanzar el evento Cl i ck sobre el control Li nkBut t on y
ejecutar el manejador del evento.

Si se observa el cdigo fuente de esta pgina se ver que es idntico a la anterior, con la
excepcin del texto contenido en la caja de texto Text Box1.

De lo visto debe extraerse una idea importante. Una aplicacin ASP.NET suele estar
formada por una pgina Web especfica (. aspx) y un cdigo (. aspx. cs). Al invocar la
pgina desde un cliente este recibe no la pgina pedida, sino una pgina estndar
(HTML +scripts en J avaScript) generada a partir de la pedida y su cdigo asociado.
En este caso, el control Li nkBut t on1 en la pgina . aspx es:

<asp:LinkButton id="LinkButton1" style="Z-INDEX: 101; LEFT: 307px;
POSITION: absolute; TOP: 88px" runat="server" Width="107px"
Height="19px">LinkButton1</asp:LinkButton>

y el resultado en la pgina estndar enviada al cliente es:

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')"
style="height:19px;width:107px;Z-INDEX: 101; LEFT: 307px; POSITION:
absolute; TOP: 88px">LinkButton1</a>


Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
12/37 12
Clase ImageButton.
Esta clase representa un control que muestra una imagen y responde a la pulsacin sobre
la imagen del mismo modo que un botn (al pulsar un control I mageBut t on se generan
los eventos Cl i ck y Command).

Si se utiliza el mtodo de respuesta al evento Cl i ck, ste recibe como segundo
parmetro I mageEvent Ar gs, el cual posee dos propiedades llamadas X e Y que
representan las coordenadas donde ha sido pulsada la imagen.

Para indicar la imagen que se muestra en un control I mageBut t on se utiliza la
propiedad I mageURL, en la que se indica la URL correspondiente a la imagen.

Supnga que se desea modificar el ejemplo anterior (Li nkBut t on) para aadirle un
control I mageBut t on tal que al pulsarlo se muestren en la caja de texto las coordenadas
donde ha sido pulsada la imagen.

La imagen que se muestra en el control I mageBut t on corresponde a la URL
f i l e: / / / C: \ WI NNT\ Gr ano de caf . bmp, aunque evidentemente, puede ser la que se
desee.

El mtodo manejador del evento Cl i ck es:

pr i vat e voi d I mageBut t on1_Cl i ck( obj ect sender ,
Syst em. Web. UI . I mageCl i ckEvent Ar gs e)
{
Text Box1. Text = " Se ha pul sado en el cont r ol I mageBut t on en el
punt o: " + e. X. ToSt r i ng( ) + " , " + e. Y. ToSt r i ng( ) ;
}

El resultado de ejecutar la aplicacin ser:

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
13/37 13


Figura 21.10. Resultado de lanzar el evento Cl i ck sobre el control I mageBut t on y
ejecutar el manejador del evento.
Clase Hyperlink.
La clase Hyper l i nk corresponde a un control que permite realizar un salto a otra pgina
Web. Las propiedades ms importantes de este control son:

- Navi gat eURL: indica la direccin a la que salta el control Hyper l i nk.
- Text : es el texto que aparece en el control Hyper l i nk. En navegadores que
soportan Tool Ti ps, la propiedad Text corresponde tambin al texto que se
muestra en el Tool Ti p.
- I mageURL: es la URL de la imagen que aparece en el control Hyper l i nk. Si
Text e I mageUr l tienen valor a la vez, prevalece I mageURL.

A continuacin se muestra un ejemplo bsico de una pgina . aspx con un control
Hyper l i nk.

<%@Page Language=" C#" %>
<ht ml >
<head>

</ head>
<body>

<h3><f ont f ace=" Ar i al " >Ej empl o Hyper Li nk</ f ont ></ h3>

Pul sar Hi per v ncul o: <br >
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
14/37 14

<asp:HyperLink id="hyperlink1"
ImageUrl="imagenes/im1.jpg"
NavigateUrl="http://www.microsoft.com"
Text="Web Site official de Microsoft"
Target="_new"
runat="server"/>

</ body>
</ ht ml >

Clase DropDownList.
Corresponde a un control de tipo lista desplegable. Muestra una serie de elementos y
permite seleccionar uno. Las propiedades ms interesantes son:

- I t ems: es una coleccin a la que se pueden ir aadiendo los elementos de la
lista. Cada elemento es un objeto de la clase Li st I t em(bsicamente es un par
texto-valor). Si se maneja esta propiedad, en diseo, desde el entorno de Visual
Studio, ste muestra un cuadro de dilogo para aadir elementos a la lista.
-


Figura 21.11. Cuadro de dilogo de edicin de los elementos de un control
Dr opDownLi st .

Si se observa el cdigo de la pgina . aspx que contiene el Dr opDownLi st , se
ver que cada elemento se ha insertado en la lista con la etiqueta Li st I t em.



Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
15/37 15
<asp: Dr opDownLi st
i d=" Dr opDownLi st 1" st yl e=" Z- I NDEX: 101; LEFT: 51px; POSI TI ON:
absol ut e; TOP: 38px" r unat =" ser ver " Wi dt h=" 171px" Hei ght =" 165px"
Aut oPost Back=" t r ue" >

<asp:ListItem Value="Elemento0">Elemento0</asp:ListItem>
<asp:ListItem Value="Elemento1">Elemento1</asp:ListItem>
<asp:ListItem Value="Elemento2">Elemento2</asp:ListItem>
<asp:ListItem Value="Elemento3">Elemento3</asp:ListItem>

</ asp: Dr opDownLi st >

- Aut oPost Back: si esta propiedad est a t r ue, indica que se provocar un
submi t , es decir una peticin Post hacia el servido cada vez que se seleccione
un elemento del control Dr opDownLi st .
- Sel ect edI ndex: es el ndice (empezando desde 0) del elemento actualmente
seleccionado en el control Dr opDownLi st .
- Sel ect edI t em: es el elemento actualmente seleccionado.
- Dat aSour ce: representa el origen de datos del que se obtienen los datos del
Dr opDownLi st .
- Dat aMember : se utiliza cuando el Dat aSour ce es un Dat aSet , es decir, conecta a
una base de datos. Representa una tabla de datos.
- Dat aVal ueFi el d: representa el campo del origen de datos del que se obtiene el
valor de los elementos del Dr opDownLi st .

Cuando se selecciona un elemento de un control de tipo Dr opDownLi st se lanza un
evento Sel ect edI ndexChanged (manejado por el mtodo
Dr opDownLi st _Sel ect edI ndexChanged).

A continuacin se muestra un ejemplo bsico en el que cada elemento seleccionado en
un control del tipo Dr opDownLi st se muestra en una caja de texto. Para realizar este
ejemplo se debe:
- aadir un control de la clase Dr opDownLi st a la pgina Web de la aplicacin
ASP.NET.
- utilizar su propiedad I t ems (o Dat aSour ce) para aadir los elementos a la lista.
- cambiar la propiedad Aut oPost Back a t r ue para que se el evento
Sel ect edI ndexChanged se genere en el servidor cada vez que se seleccione un
elemento.
- codificar el mtodo de respuesta al evento Sel ect edI ndexChanged.

pr i vat e voi d Dr opDownLi st 1_Sel ect edI ndexChanged( obj ect sender ,
Syst em. Event Ar gs e)
{
Text Box1. Text = Dr opDownLi st 1. Sel ect edI t em. ToSt r i ng( ) ;
}

El resultado de ejecutar la aplicacin es:

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
16/37 16


Figura 21.12. Resultado de lanzar el evento Sel ect edI ndexChanged sobre el control
Dr opDownLi st y ejecutar el manejador del evento.
Clase ListBox.
Representa un control tpico de tipo lista . Es similar a Dr opDownLi st , con la salvedad
de que permite seleccin mltiple y su altura no tiene porque ser de una fila. Aparte de
las propiedades en comn con Dr opDownLi st , un control de la clase Li st Box tiene
otras propiedades, como:

- Sel ect i onMode: su valor puede ser Si ngl e o Mul t i pl e. Indica si se permite o
no seleccionar ms de un elemento a la vez.
- Rows: esta propiedad indica la altura en filas del control Li st Box, es decir, que
tamao tiene (independientemente del nmero de elementos que realmente
contenga).

Como ejemplo se aadir un control de tipo Li st Box y una caja de texto al ejemplo
anterior. Su comportamiento ser similar al del control Dr opDownLi st y la caja de texto
ya existentes.

Clase DataGrid.
Representa un control que permite mostrar los campos de un origen de datos
(Dat aSour ce) como columnas de una tabla, donde cada fila de la tabla (del Dat aGr i d)
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
17/37 17
corresponde a un registro. El control Dat aGr i d soporta seleccin, edicin, borrado,
paginacin y ordenacin.

Tanto esta clase, como la clase Dat aLi st y la clase Repeat er se explicarn en detalle
en la parte dedicada a ADO.NET.

Clase DataList.
Es similar al Dat aGr i d pero menos potente. Muestra los datos en forma de lista, en
lugar de en forma de rejilla o gr i d.

Clase Repeater.
Representa un control similar a Dat aGr i d y Dat aLi st . Una diferencia importante es
que permite aplicar una plantilla personalizada a los datos a mostrar. Por lo dems es
ms limitado que Dat aGr i d y Dat aLi st .

Clase CheckBox.
Representa un control casilla de verificacin. Permite al usuario seleccionarlo o no
dejndolo en estado t r ue o f al se respectivamente.
Si existen varios controles CheckBox en una pgina ASP.NET stos son independientes
entre s, es decir, el estado de uno no determina el del resto.
En caso de tener varios CheckBox en una pgina ASP.NET puede ser interesante
agruparlos en una CheckBoxLi st .
La clase CheckBox permite mayores posibilidades en cuanto al formato individual de un
CheckBox concreto que lo que permite la clase CheckBoxLi st .
La propiedad ms interesante de la clase CheckBox es Sel ect ed, que valdr t r ue si el
CheckBox est seleccionado y f al se en caso contrario.
Otra propiedad interesante es Appear ance, que permite indicar cual es la apariencia del
CheckBox (botn, casilla...).
El evento generado al seleccionar o deseleccionar un CheckBox es CheckedChanged.

Clase CheckBoxList.
Representa una lista de casillas de verificacin o CheckBox. Su propiedad ms
interesante es I t ems que representa una coleccin de CheckBox. Otra propiedad
interesante es Repeat Di r ect i on, que indica si los controles CheckBox se alinearn
vertical u horizontalmente. Cuando se selecciona un control CheckBox en una
CheckBoxLi st , se produce un evento Sel ect edI ndexChanged.

Clase RadioButtonList.
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
18/37 18
Es similar a CheckBoxLi st . Representa una lista de botones de opcin. La
particularidad de las listas de botones de opcin es que slo uno puede estar pulsado.

Clase RadioButton.
Representa un botn de opcin. Si existen varios controles Radi oBut t on en una pgina
ASP.NET stos son dependientes entre s, es decir, slo puede haber uno seleccionado.

El evento generado al seleccionar o deseleccionar un Radi oBut t on es
CheckedChanged.

En el siguiente ejemplo se completa el diseado anteriormente para los controles
Dr opDownLi st y Li st Box. Se le aaden:

- Una CheckBoxLi st con dos CheckBox, el valor del primero determina si el
control Dr opDownLi st 1 estar activo (Enabl ed) o no y el del segundo determina
si el control Li st Box1 estar activo o no.
- Una Radi oBut t onLi st con dos Radi oBut t on, el valor del primero determina si
el control Text Box1 estar activo (Enabl ed) o no y el del segundo determina si
el control Text Box2 estar activo o no.

En ambas listas se ha puesto la propiedad Aut oPost Back a t r ue, de modo que
cualquier cambio en la seleccin provoque un evento Sel ect edI ndexChanged.
El control de cundo poner o no Enabl ed los controles Dr opDownLi st 1, Li st Box1,
Text Box1 y Text Box2 se hace en los mtodos de respuesta al evento
Sel ect edI ndexChanged de cada una de las listas.

pr i vat e voi d CheckBoxLi st 1_Sel ect edI ndexChanged( obj ect sender ,
Syst em. Event Ar gs e)
{
Dr opDownLi st 1. Enabl ed = CheckBoxLi st 1. I t ems[ 0] . Sel ect ed;
Li st Box1. Enabl ed = CheckBoxLi st 1. I t ems[ 1] . Sel ect ed;
}

pr i vat e voi d Radi oBut t onLi st 1_Sel ect edI ndexChanged( obj ect sender ,
Syst em. Event Ar gs e)
{
Text Box1. Enabl ed = Radi oBut t onLi st 1. I t ems[ 0] . Sel ect ed;
Text Box2. Enabl ed = Radi oBut t onLi st 1. I t ems[ 1] . Sel ect ed;
}

El resultado de ejecutar la aplicacin es:

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
19/37 19


Figura 21.13. Ejecucin de la aplicacin. Desactivacin de la caja de texto Text Box2.
Clase Image.
Representa un control que permite mostrar una imagen en una pgina Web. Las
propiedades ms interesantes son:

- I mageURL: contiene la URL de la imagen.
- I mageAl i gn: permite alinear la imagen respecto al resto de elementos de la
pgina Web en la que est.
- Al t er nat eText : permite indicar un texto a mostrar cuando la imagen no est
disponible (por el motivo que sea).

Clase Panel.
Esta clase representa un control que sirve de contenedor para otros controles. Toda
pgina ASP.NET tiene un Panel principal; no obstante, se pueden crear ms dentro de
ste para por ejemplo, agrupar los controles.

Para aadir un Panel a una pgina Web simplemente hay que arrastrarlo desde la Caja
de herramientas y dimensionarlo. A partir de ah se le pueden ir aadiendo controles.

En el siguiente ejemplo se muestra cmo decidir si un panel es o no visible en base al
estado de un CheckBox. El nombre del Panel aadido es Panel 1, de modo que el
cdigo de respuesta al evento CheckedChanged es:
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
20/37 20

pr i vat e voi d CheckBox1_CheckedChanged( obj ect sender , Event Ar gs e)
{
Panel 1. Vi si bl e = CheckBox1. Checked;
}

Y el resultado de ejecutar la aplicacin debe ser (si el CheckBox est a t r ue):



Figura 21.14. Ejecucin de la aplicacin. Propiedad Vi si bl e del Panel a t r ue.

Si se pone el CheckBox a f al se:

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
21/37 21


Figura 21.15. Ejecucin de la aplicacin. Propiedad Vi si bl e del Panel a f al se.
Clase PlaceHolder.
Esta clase representa un control similar a Panel , con la diferencia de que un
Pl aceHol der puede contener controles (generados dinmicamente) pero no es visible.
Es slo un contenedor.
Clase Calendar.
Representa un control que muestra un calendario de mes, que permite al usuario
seleccionar fechas y moverse al anterior y/o posterior mes.

Por defecto, un control de tipo Cal endar muestra los das del mes, cabeceras para los
das de la semana, un ttulo con el nombre del mes e hipervnculos para moverse al mes
anterior y posterior.

Las propiedades ms interesantes de un control Cal endar son:
- Sel ect edDat e: esta propiedad indica la fecha seleccionada. Un objeto de esta
propiedad es de la clase Dat eTi me y tiene por tanto todas sus propiedades (Day,
Mont h, Year , Dat e, etc...).
- Sel ect edDat es: esta propiedad contiene una coleccin con todos los das (o
semanas..., depende de Sel ect edMode) seleccionados.
- Sel ect edMode: permite indicar si la seleccin ser de un da, una semana o un
mes.
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
22/37 22
- Fi r st Dayof Week: esta propiedad permite indicar qu da se pondr en la
primera columna de la semana (lunes, domingo...).
Al seleccionar un da (o una semana...) en el control Calendar se provoca un evento
Sel ect i onChanged, en el mtodo asociado es donde se ha de meter el cdigo de
respuesta al evento.

En el siguiente ejemplo se muestra cmo hacer que se muestre la informacin sobre un
da seleccionado en cuatro cajas de texto: la fecha, el ao, el mes y el da.

El cdigo de respuesta al evento generado al seleccionar un da en el calendario es:

pr i vat e voi d Cal endar 1_Sel ect i onChanged( obj ect sender , Event Ar gs e)
{
Text Box1. Text = Cal endar 1. . Sel ect edDat e. ToSt r i ng( ) ;
Text Box2. Text = Cal endar 1. Sel ect edDat e. Year . ToSt r i ng( ) ;
Text Box3. Text = Cal endar 1. Sel ect edDat e. Mont h. ToSt r i ng( ) ;
Text Box4. Text = Cal endar 1. Sel ect edDat e. Day. ToSt r i ng( ) ;
}

El resultado de ejecutar la aplicacin es:



Figura 21.16. Lanzamiento del evento Sel ect i on_Changed sobre el control Cal endar
y resultado de ejecutar el mtodo manejador.
Clase AdRotator.
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
23/37 23
Esta clase representa un control que permite mostrar un banner con imgenes e
hipervnculos, cambiando de modo aleatorio su contenido, cada vez que la pgina es
refrescada.
Las distintas imgenes con sus hipervnculos y otros datos se guardan en un fichero
XML, indicado mediante la propiedad Adver t i sement Fi l e (al fichero se le llama
fichero de Adver t i sement ).

A continuacin se muestra un ejemplo de un AdRot at or que utiliza una lista de dos
imgenes, basado en un documento XML.

El fichero . aspx (WebFor m1. aspx) contiene:

<%@Page Language=" CS" %>
<ht ml >

<head>
</ head>

<body>
<f or mr unat =" ser ver " >

<h3><f ont f ace=" Ar i al " >Ej empl o AdRot at or </ f ont ></ h3>

<asp: AdRot at or i d=" AdRot at or 1" r unat =" ser ver "
Tar get =" _sel f "
Adver t i sement Fi l e=" XMLFi ch. xml " / >

</ f or m>
</ body>

</ ht ml >

El fichero XMLFi ch. xml contiene:

<Adver t i sement s xml ns=" ht t p: / / schemas. mi cr osof t . com/ AspNet / AdRot at or -
Schedul e- Fi l e" >

<Ad>

<I mageUr l >el i pse. j pg</ I mageUr l >
<Navi gat eUr l >ht t p: / / www. mi cr osof t . com</ Navi gat eUr l >
<Al t er nat eText >Web Si t e Mi cr osof t </ Al t er nat eText >
<I mpr essi ons>80</ I mpr essi ons>
<Keywor d>Topi c1</ Keywor d>

</ Ad>

<Ad>

<I mageUr l >ci r cul os. j pg</ I mageUr l >
<Navi gat eUr l >ht t p: / / www. pandasof t war e. es</ Navi gat eUr l >
<Al t er nat eText >Panda Sof t war e</ Al t er nat eText >
<I mpr essi ons>80</ I mpr essi ons>
<Keywor d>Topi c2</ Keywor d>

</ Ad>

</ Adver t i sement s>
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
24/37 24

Si se copia la pgina . aspx, el fichero XMLFi ch. xml y los dos ficheros . gi f a un
directorio del servidor web (o se crea uno) puede probarse la pgina.
Cada vez que se refresque la pgina se cambiar la imagen del AdRot at or .



Figura 21.17. Ejecucin de la aplicacin. Tras actualizar la pgina el control AdRot at or
cambia de imagen. Al detener el puntero del ratn sobre la imagen se muestra un Texto
obtenido de la elemento Al t er nat eText .

Visual Studio tiene un asistente para la creacin de un fichero XML asociado a un
AdRot at or . Para utilizarlo se pueden seguir los pasos que se indican:

- En el men Proyecto elegir Agregar nuevo elemento y seleccionar Archivo
XML:

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
25/37 25


Figura 21.18. Adicin de un fichero XML a la aplicacin.

- Una vez se est en el editor del fichero XML, en la ventana de propiedades
elegir, para la propiedad Tar get Schema, el valor ADRot at or Schedul e Fi l e,
con lo cual se le aadir el elemento <Adver t i sement > al fichero XML.
- Aadir los elementos <Ad> que se desee al fichero. El nico elemento
obligatorio es <I mageURL>.
- Guardar el fichero XML (y las imgenes) en el directorio de la aplicacin
(realmente puede ser cualquier directorio vlido del WebSite).

Una vez creado el fichero XML y el AdRot at or se asocia el fichero XML al AdRot at or
mediante la propiedad Adver t i sement Fi l e del AdRot at or . Visual Studio .NET
permite hacerlo mediante un cuadro de dilogo.

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
26/37 26


Figura 21.19. Seleccin de un fichero XML para la propiedad Adver t i sement Fi l e. El
fichero debe haber sido aadido a la aplicacin previamente.

A partir de aqu ya se puede probar (siempre que las imgenes indicadas en el fichero
XML existan, por supuesto).

En caso de que haya problemas para ver las imgenes o el asistente anterior no muestre
el fichero XML se puede intentar solucionarlo aadiendo las imgenes al proyecto (y el
fichero XML si es que no se ha creado aadindolo al proyecto).

Clase Table.
Representa un control que permite construir una tabla HTML. La construccin puede
ser mediante cdigo (ms potente) o en modo diseo.
Las propiedades ms importantes de la clase Tabl e son:
- Rows: es una coleccin de controles de la clase Tabl eRow. Cada control de la
clase Tabl eRow, a su vez, contiene una coleccin de controles de la clase
Tabl eCel l (cada control representa una celda).
- BackI mageURL: permite especificar una imagen que se utilizar de fondo en la
tabla
- Bor der St yl e, Bor der Wi dt h, Bor der Col or , Cel l Paddi ng: estas propiedades
permiten especificar el formato de los bordes de la tabla y la separacin entre
celdas.

Cuando se crea una tabla con el asistente de Visual Studio .NET, ste ofrece cuadros de
dilogo para ir aadiendo y definiendo controles de la clase Tabl eRow y controles de la
clase Tabl eCel l .
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
27/37 27
Para aadir un control de tipo Tabl eRow se ha de elegir la propiedad Row y seguir las
indicaciones.



Figura 21.20. Cuadros de dilogo de edicin de filas y columnas.

El resultado de ir aadiendo filas y celdas a una tabla en diseo queda como sigue.

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
28/37 28


Figura 21.21. Vista diseo de la tabla.

Si se observa el cdigo de la pgina . aspx, se ver la estructura ASP.NET real de la
tabla:

<%@ Page l anguage=" c#" Codebehi nd=" WebFor m1. aspx. cs"
Aut oEvent Wi r eup=" f al se" I nher i t s=" Ej empl oASPNETTabl e. WebFor m1" %>
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >

<HTML>

<HEAD>
<met a name=" GENERATOR" Cont ent =" Mi cr osof t Vi sual St udi o 7. 0" >
<met a name=" CODE_LANGUAGE" Cont ent =" C#" >
<met a name=" vs_def aul t Cl i ent Scr i pt " cont ent =" J avaScr i pt ( ECMAScr i pt ) " >
<met a name=" vs_t ar get Schema"
cont ent =" ht t p: / / schemas. mi cr osof t . com/ i nt el l i sense/ i e5" >
</ HEAD>

<body MS_POSI TI ONI NG=" Gr i dLayout " >
<f or mi d=" For m1" met hod=" post " r unat =" ser ver " >

<asp: Tabl e i d=" Tabl e1" st yl e=" Z- I NDEX: 101; LEFT: 195px; POSI TI ON:
absol ut e; TOP: 77px" r unat =" ser ver " Wi dt h=" 318px" Hei ght =" 240px"
Bor der Col or =" Bl ack" Bor der St yl e=" Sol i d" Cel l Paddi ng=" 1"
Cel l Spaci ng=" 1" Bor der Wi dt h=" 2px" For eCol or =" Tr anspar ent "
Gr i dLi nes=" Bot h" >

<asp:TableRow BorderWidth="7px" BorderColor="White"
BorderStyle="Dashed" HorizontalAlign="Center"
ForeColor="Transparent">
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
29/37 29
<asp:TableCell BorderStyle="Solid" BorderColor="Black"
Text="0,0"></asp:TableCell>
<asp:TableCell Text="0,1"></asp:TableCell>
</asp:TableRow>
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell Text="1,0"></asp:TableCell>
<asp:TableCell Text="1,1"></asp:TableCell>
</asp:TableRow>
</asp:Table>

</ f or m>

</ body>

</ HTML>

Es posible construir una tabla dinmicamente, mediante cdigo. Hacindolo de este
modo las posibilidades son ms amplias que en modo diseo. Por ejemplo:

<ht ml >

<head>
<scr i pt l anguage=" C#" r unat =" ser ver " >
void Page_Load(Object sender, EventArgs e) {
// Generate rows and cells
int numrows = 4;
int numcells = 2;
for (int j=0; j<numrows; j++)
{
TableRow r = new TableRow();
for (int i=0; i<numcells; i++)
{
TableCell c = new TableCell();
c.Controls.Add(new LiteralControl("row " + j.ToString() +
", cell " + i.ToString()));
r.Cells.Add(c);
}
Table1.Rows.Add(r);
}
}
</ scr i pt >

</ head>

<body>
<h3><f ont f ace=" Ar i al " >Ej empl o de t abl a const r u da desde el
cdi go</ f ont ></ h3>
<f or mr unat =ser ver >
<asp: Tabl e i d=" Tabl e1"
Gr i dLi nes=" Bot h"
Hor i zont al Al i gn=" Cent er "
Font - Name=" Ar i al "
Font - Si ze=" 8pt "
Cel l Paddi ng=15
Cel l Spaci ng=0
Runat =" ser ver " / >
</ f or m>

</ body>

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
30/37 30
</ ht ml >

Es importante saber que cuando una tabla o un control en general es creado en modo
diseo forma parte de la pgina en la que est y seguir existiendo tras cualquier
Post Back que se haga hacia el servidor desde la pgina.
En cambio, si la tabla (o el control), ha sido generado dinmicamente, es decir,
ejecutando un cdigo y se ha aadido a la pgina que se ha enviado, en cuanto se haga
un Post back se perder a menos que sea regenerado en el mensaje de repuesta.

Clase XML
Representa al control XML. Este control no deriva de WebForms sino directamente de
la clase Cont r ol (que a su vez deriva de Obj ect ). No obstante su namespace es
Syst em. Web. UI . WebCont r ol s. Xml .

El control XML permite escribir en una pgina Web un documento XML o el resultado
de aplicar una transformacin XSL a un documento XML.

Las propiedades ms interesantes son:

- Document (no disponible en tiempo de diseo): permite indicar un objeto de la
clase Syst em. XML. XMLDocument , cuyo contenido se mostrar.
- Document Cont ent (no disponible en tiempo de diseo): esta propiedad contiene
y permite mostrar un st r i ng que ha de estar en formato XML.
- Document Sour ce: esta propiedad contiene una referencia al documento XML
que se desea mostrar.
- Tr ansf or m(no disponible en tiempo de diseo): permite indicar un objeto de la
clase Syst em. XML. XMLTr ansf or m, que se aplicar al documento XML a
mostrar, dndole un formato determinado por la pgina XSL que utilice el objeto
XMLTr ansf or m.
- Tr ansf or mSour ce: permite indicar directamente el fichero XSL que se utilizar
para transformar el fichero XML a mostrar.

Es obligatorio que una y slo una de las tres primeras propiedades tenga valor
(Document , Document Cont ent , Document Sour ce), ya que de otro modo no habra
documento XML que mostrar.

En cuanto a la transformacin del documento XML, es opcional. No obstante, si se
decide hacer, slo una de las propiedades correspondientes (Tr ansf or m,
Tr ansf or mSour ce) debe tener valor.

A continuacin se va a realizar una aplicacin Ej empl oASPNETXML que va a utilizar el
control XML para mostrar la pgina l i br os. xml .

La pgina l i br os. xml contiene informacin sobre libros obtenida de una base de datos
en formato XML.

<?xml ver si on=' 1. 0' ?>
<bi bl i ot eca>
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
31/37 31
<l i br o gener o=" novel a" f echapubl i caci on=" 1981" I SBN=" 1- 861003-
11- 0" >
<t i t ul o>El Qui j ot e</ t i t ul o>
<aut or >
<nombr e>Mi guel </ nombr e>
<apel l i do>de Cer vant es</ apel l i do>
</ aut or >
<pr eci o>12. 25</ pr eci o>
</ l i br o>
<l i br o gener o=" novel a" f echapubl i caci on=" 1967" I SBN=" 0- 201-
63361- 2" >
<t i t ul o>Ci en aos de sol edad</ t i t ul o>
<aut or >
<nombr e>Gabr i el </ nombr e>
<apel l i do>Gar ci a Mar quez</ apel l i do>
</ aut or >
<pr eci o>10. 5</ pr eci o>
</ l i br o>
<l i br o gener o=" poes a" f echapubl i caci on=" 1991" I SBN=" 1- 861001-
57- 6" >
<t i t ul o>Ri mas</ t i t ul o>
<aut or >
<nombr e>Gust avo Adol f o</ nombr e>
<apel l i do>Becquer </ apel l i do>
</ aut or >
<pr eci o>9. 75</ pr eci o>
</ l i br o>
</ bi bl i ot eca>

El primer paso es crear la aplicacin y aadir el control XML a la pgina
WebFor m1. aspx. El siguiente paso es indicar el fichero XML que va a mostrar el control
XML. Para ello ha de utilizar la propiedad Document Sour ce.



Figura 21.22. Propiedades del control XML.

Al pulsar el botn ..., muestra un cuadro de dilogo que permite elegir el documento
XML a mostrar por el control XML (el documento XML tiene que haber sido aadido
al proyecto).

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
32/37 32


Figura 21.23. Cuadro de dilogo de seleccin del documento XML.

Una vez realizado este paso, el contenido de WebFor m1. aspx tiene ya actualizado el
elemento correspondiente al control XML:

<asp: xml i d=" Xml 1" Document Sour ce=l i br os. xml
r unat =" ser ver " ></ asp: xml >

Ahora ya puede ser probada la aplicacin. El resultado ser:

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
33/37 33


Figura 21.24. Invocacin de la pgina desde el Internet Explorer. El control XML
devuelve el fichero XML sin tratar y el Internet Explorer lo parsea (analiza) por
defecto.

Como puede verse, el formato deja mucho que desear. El navegador muestra todos los
elementos del documento XML seguidos, ya que no sabe cmo interpretar las etiquetas
que tiene. No obstante, los datos son mostrados.

El control XML permite mejorar esta situacin utilizando pginas XSL. Una pgina
XSL tiene instrucciones sobre como hay que leer una pgina XML y de qu modo hay
que transformar su contenido. Una utilidad enorme de las transformaciones XSL es
poder convertir una pgina XML (de un lenguaje tipo XML, para ser ms exacto) en
otra HTML o WML, o cHTML, etc...

En este caso se va a utilizar una pgina (l i br os. xsl ) que va a permitir obtener, a partir
de la pgina l i br os. xml , una lista de libros en la que slo se indicar el ISBN, ttulo y
precio. La pgina XSL l i br os. xsl contiene comentarios explicativos.

Se recomienda no utilizar tildes directamente en las pginas XSL y XML porque se
puede solucionar con caracteres especiales.

<xsl : st yl esheet ver si on=" 1. 0"
xml ns: xsl =" ht t p: / / www. w3. or g/ 1999/ XSL/ Tr ansf or m" >
<! - - Est a pr i mer a par t e def i ne l a est r uct ur a del document o
t r ansf or mado - - >
<! - - La l nea si gui ent e busca el nodo r a z del document o - - >
<xsl : t empl at e mat ch=" / " >
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
34/37 34
<ht ml >
<head>
<t i t l e>Pr ueba xsl </ t i t l e>
</ head>
<body>
<! - - La l nea si gui ent e pi de que se apl i quen l as
pl ant i l l as- - >
<! - - Las pl ant i l l as que se i ndi can ms abaj o
son l as que se apl i can - - >
<! - - Se comi enza por el el ement o ms cer cano a
l a r a z, que es bi bl i ot eca- - >
<xsl : appl y- t empl at es / >
</ body>
</ ht ml >
</ xsl : t empl at e>

<xsl : t empl at e mat ch=" bi bl i ot eca" >
<! - - La pl ant i l l a bi bl i ot eca sl o pi de apl i car l a pl ant i l l a
l i br o - - >
<xsl : appl y- t empl at es sel ect =" l i br o" / >
</ xsl : t empl at e>

<! - - La pl ant i l l a l i br o muest r a el val or de ci er t os el ement os
( I SBN, t i t ul o, pr eci o) de cada l i br o- - >
<<! - - Adems i nser t a t ext o y al gn ot r o el ement o vl i do en HTML-
- >
<xsl : t empl at e mat ch=" l i br o" >
I SBN:
<xsl : val ue- of sel ect =" @I SBN" / >
<br ></ br >
Ti t ul o:
<xsl : val ue- of sel ect =" t i t ul o" / >
<br ></ br >
Pr eci o:
<xsl : val ue- of sel ect =" pr eci o" / >
<br ></ br >
<br ></ br >
<t ext ></ t ext >
</ xsl : t empl at e>
</ xsl : st yl esheet >

Si se desea utilizar este documento XSL hay que indicarlo a travs de la propiedad
Tr ansf or mSour ce del objeto XML. En la pgina WebFor m1. aspx, la entrada
correspondiente al control quedar:

<asp: xml i d=" Xml 1" Document Sour ce=l i br os. xml
Tr ansf or mSour ce=l i br os. xsl r unat =" ser ver " ></ asp: xml >


En este caso, el resultado de ejecutar la aplicacin ser.

Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
35/37 35


Figura 21.25. Invocacin de la pgina desde el Internet Explorer. El control XML tiene
una pgina XSL asociada y devuelve el fichero XML convertido a HTML.

Como puede verse, el formato est bastante mejor.

Hasta aqu, todo el ejemplo se ha hecho en modo diseo. No obstante, es posible
programar la creacin y manejo de un objeto XML.

Por ejemplo: supnga que se desea inicializar un objeto XML xml 1 al cargar la pgina a
la que pertenece (Page_Load) , indicando los documentos XML y XSL que utilizar.
Hacerlo es tan sencillo como lo que sigue:

usi ng Syst em;
usi ng Syst em. Col l ect i ons;
usi ng Syst em. Component Model ;
usi ng Syst em. Dat a;
usi ng Syst em. Dr awi ng;
usi ng Syst em. Web;
usi ng Syst em. Web. Sessi onSt at e;
usi ng Syst em. Web. UI ;
usi ng Syst em. Web. UI . WebCont r ol s;
usi ng Syst em. Web. UI . Ht ml Cont r ol s;
using System.Xml;
using System.Xml.Xsl;

namespace Ej empl oASPNETXML
{
publ i c cl ass WebFor m1 : Syst em. Web. UI . Page
{
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
36/37 36
pr ot ect ed Syst em. Web. UI . WebCont r ol s. Xml Xml 1;

publ i c WebFor m1( )
{
Page. I ni t += new Syst em. Event Handl er ( Page_I ni t ) ;
}

pr i vat e voi d Page_Load( obj ect sender , Syst em. Event Ar gs e)
{
XmlDocument doc = new XmlDocument();
doc.Load(Server.MapPath("libros.xml"));
XslTransform trans = new XslTransform();
trans.Load(Server.MapPath("libros.xsl"));
Xml1.Document = doc;
Xml1.Transform = trans;

}
. . .
. . .
. . .
}

Como puede verse es muy sencillo. Se crean los objetos Xml Document y Xsl Tr ansf or m,
se inicializan y se asignan a las propiedades Document y Tr ansf or mde XML1 (el
control) respectivamente.

Existe un modo sencillo de asociar un documento XML a un control XML y es
indicando el contenido del documento en la propia pgina . aspx (donde est la entrada
correspondiente al control). Este modo es menos utilizado.

<asp: xml i d=" Xml 1" Tr ansf or mSour ce=l i br os. xsl
r unat =" ser ver " ></ asp: xml >
<bi bl i ot eca>
<l i br o gener o=" novel a" f echapubl i caci on=" 1981" I SBN=" 1- 861003-
11- 0" >
<t i t ul o>El Qui j ot e</ t i t ul o>
<aut or >. . .
. . .
. . .
</ bi bl i ot eca>
</ asp: xml >

Clase Literal
El control Li t er al muestra un texto esttico en una pgina Web, de modo similar al
control Label . La diferencia entre ambos es que el control Li t er al no permite aplicar
estilos al texto que muestra.

Ejemplo:

<ht ml >
<head>
</ head>
<body>
<f or mr unat =" ser ver " >
<h3><f ont f ace=" Ar i al " >Li t er al Exampl e</ f ont ></ h3>
Marco Besteiro y Miguel Rodrguez ASP.NET. Controles HTML y Web
37/37 37
<asp:Literal id=Literal1
Text=Hola Internet
runat="server"/>
</ f or m>
</ body>
</ ht ml >


Clase CrystalReportViewer
Esta clase representa un control que proporciona una serie de mtodos y propiedades
que permiten manejar el visor de Cr yst al Repor t s (Cr yst al Repor t Vi ewer ).
El namespace al que pertenece esta clase es Cr yst al Repor t s. Web. Este namespace
provee soporte para el visor Web de Cr yst al Repor t s y sus clases asociadas.
Cr yst al Repor t s es una herramienta de creacin de formularios que se empez a
utilizar para disear formularios en Visual Basic. Cr yst al Repor t s es ahora la
herramienta estndar de creacin informes en Visual Studio .NET. Permite crear
presentaciones interactivas, con contenido de calidad. Con Cr yst al Repor t s para
Visual Studio .NET es posible hospedar Repor t s en plataformas Windows y Web y
publicar Cr yst al Repor t s como un servicio web de Reportes (informes).

Como puede verse, en la pestaa Web Forms existen una serie de controles que no se
han comentado como Requi r edFi el dVal i dat or , Compar eVal i dat or ,
RangeVal i dat or , Regul ar Expr esi onVal i dat or , Cust omVal i dat or ,
Val i dat i onSummar y. Estos son los llamados controles de validacin y se explican en el
siguiente captulo.

Por supuesto, existen y pueden crearse otros controles (no slo ASP.NET, sino
WinForms Controls e incluso binarios COM, etc...). Esos controles pueden aadirse
tambin a la Caja de herramientas (opciones aadir pestaa y personalizar Caja de
herramientas a las que se llega pulsando el botn derecho del ratn sobre la Caja de
herramientas).

You might also like