CONTROLES WEB AVANZADOS

Pgina: 1 / 16

5. AdRotator
El control rotador de anuncios (AdRotator), permite mostrar una serie de anuncios, en forma de
imgenes, dentro de una pagina ASP.NET, alternando la aparicin de las imgenes, en otras
palabras un banner.
Para indicar las imgenes y los enlaces de los anuncios utilizamos un archivo en formato XML,
el cual tiene un formato establecido:
Todo el fichero se encuentra encerrado entre dos etiquetas <Advertisements>, y cada anuncio
viene representado por un elemento <Ad>, y cada elemento que se corresponde con un
anuncio tiene una serie de propiedades que definen el comportamiento de dicho anuncio, y son
las siguientes:
ImageUrl: Es la nica de las propiedades que es obligatoria, y es utilizada para indicar la ruta
en la que se encuentra el fichero de la imagen. Esta ruta puede ser absoluta o relativa.
NavigateUrl: Esta propiedad indica el enlace que va a tener la imagen, al pulsar sobre ella.
AlternateText: El texto que se indique en esta propiedad se traducir en la propiedad alt de la
etiqueta <img> de la imagen del anuncio, es decir, ser el tooltip que aparecer cuando
situemos el cursor del ratn sobre la imagen.
Impressions: El nmero que muestre esta propiedad indicara el peso que se le va a asignar a
cada uno de los anuncios incluidos en el fichero XML. El anuncio se mostrara un mayor de
veces si este valor es ms alto comparado con los dems.
Una vez definido el archivo con el formato adecuado, debemos guardarlo con cualquier nombre
pero con extensin XML, y debe encontrarse fsicamente en el servidor Web en el que vaya
utilizarse.
Para utilizar el control Web AdRotator solo nos queda establecer el nombre del archivo XML
en la propiedad AdvertisementFile.
Ejemplo: Crear un formulario Web que contenga 3 filas y 1columna.
Agregamos al sitio Web un nuevo elemento de tipo archivo XML, con el nombre de
Anuncios.xml el cual se muestra a continuacin (Recuerde tener lagunas imgenes en el
formato JPG que sean recomendado de igual tamao, los cuales a su vez para mayor
orden pudieran situarse en una carpeta distinta)
Anuncios.xml
<Advertisements>
<Ad>
<ImageUrl>Imagenes\COMPUTADORAS.JPG</ImageUrl>
<NavigateUrl>http://www.solucionesnet.org</NavigateUrl>
<AlternateText>Informacin de Tecnlogas</AlternateText>
<Impressions>90</Impressions>
</Ad>
<Ad>
<ImageUrl>Imagenes\VISA.JPG</ImageUrl>
<NavigateUrl>http://www.visanet.com.pe/</NavigateUrl>
<AlternateText>Consultas sobre su Tarjeta VISA</AlternateText>
<Impressions>60</Impressions>
</Ad>

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 2 / 16

<Ad>
<ImageUrl>Imagenes\COMIDAS.JPG</ImageUrl>
<NavigateUrl>http://www.ohperu.com/turismo/restaura.htm</NavigateUrl>
<AlternateText>Los Mejores Restaurantes Peruanos</AlternateText>
<Impressions>40</Impressions>
</Ad>
<Ad>
<ImageUrl>Imagenes\TORTAS.JPG</ImageUrl>
<NavigateUrl>http://www.tortasperu.com.pe/</NavigateUrl>
<AlternateText>Las mejores Tortas del Peru</AlternateText>
<Impressions>50</Impressions>
</Ad>
</Advertisements>
El diseo de nuestro formulario podra parecerse a:
AdRotator1
AdvertisementsFile = ~/Anuncios.xml
Button1
ID = BtnPulsar
Text = Pulsame

Este ejemplo no tiene ningn cdigo el la pagina asociada de Visual Basic.

6. Calendar
Este control ofrece un completo calendario. Es muy sencillo de utilizar aunque ofrece un alto
grado de personalizacin. Este control nos muestra un calendario que permite una navegacin
por fechas y tambin selecciones de fecha, el calendario se encuentra basado internamente,
de forma completa en cdigo JavaScript.
Para utilizar este control bastara solo con arrastrar y soltar nuestro control en nuestro formulario
Web.
Podemos personalizar el calendario, para lo cual estando seleccionado el control nos mostrara
una flecha en el borde superior derecho al hacerle un clic ASP.NET mostrara un smart tag
(Etiqueta inteligente) que nos permite realizar, en modo diseo, una serie de operaciones sobre
el control Web sobre el que se le aplica la etiqueta inteligente.
Para nuestro control el smart tag nos permitir cambiar el formato automtico (AutoFormat):

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 3 / 16

Ejemplo: En un formulario Web agregar una tabla de 4 filas por 1 columna. En la primera
fila indicaremos un titulo, en la segunda fila colocaremos un control Web Calendar, en la
tercera fila un Control Web Button (con el ID= btnSeleccionar y Text = Seleccionar) y en
la ltima fila una etiqueta (con el ID=lblMensaje), tal como se muestra a continuacin:

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 4 / 16

El cdigo asociado a la pgina Web de Visual Basic, corresponder al evento Clic del Botn:
Protected Sub btnSeleccionar_Click(ByVal
btnSeleccionar_Click(ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles btnSeleccionar.Click
'Capturando en una variable el valor del dia seleccionado
Dim cad As String = Me.Calendar1.SelectedDate.ToLongDateString
Me.Calendar1.SelectedDate.ToLongDateString
'Adicionando a la variable "Cad" el valor de la hora actual.
cad &= Space(5) & Now.ToLongTimeString()
lblMensaje.Text
lblMensaje.Text = cad
End Sub
Adems del aspecto del control Calendar, tambin nos va a interesar tener acceso a su
comportamiento, y variarlo segn nos convenga, para ello este control ofrece un gran numero
de propiedades que lo permiten. Una de estas propiedades, llamada SelectionMode, es la que
permite indicar el modo de seleccin de fecha deseado. La propiedad SelectionMode puede
presentar los siguientes valores:
Day: nicamente se permite la seleccin de un solo da del mes. Este valor es el
predeterminado.
DayWeek: Permite seleccionar de un da o bien de una semana completa.
DayWeekMonth: Esta es la seleccin mas completa, se permite elegir un da, una semana o el
mes completo.
Segn sea el modo de seleccin de fecha el control Calendar presentara aspectos distintos.
Para la seleccin de un da aparecern subrayados cada uno de los das del mes, para la
seleccin de semanas mostrara en la columna de la izquierda una serie de enlaces que
permiten seleccionar la semana, y para seleccionar el mes se ofrece en la esquina superior
izquierda un enlace.
Ejemplo: Crear una Pagina Web que contenga una tabla de 4 Filas por 1 columna,
primera columna un titulo, 2da columna un texto con un DropDownList, 3ra fila un
Calendar y en la 4ta fila Label, tal como se muestra a continuacin:

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 5 / 16

Eligiendo al control DropDownList ingresaremos a sus propiedades avanzadas (smart tag) de

Editar elementos (Edit tems) y adicionaremos 4 ListItems con los siguientes valores:
Elemento
ListItem1
ListItem1
ListItem1
ListItem1

Text
Ninguno
Da
Da y Semana
Da, Semana y Mes

Value
none
Day
DayWeek
DayWeekMonth

El siguiente cdigo corresponde con la pgina Web asociada a su cdigo de programacin.

Protected Sub Page_Load(ByVal
Page_Load(ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles Me.Load
Me.Load
Me.ddlEstiloCalendar.AutoPostBack
Me.ddlEstiloCalendar.AutoPostBack = True
Calendar1.SelectionMode = Me.ddlEstiloCalendar.SelectedIndex
Me.ddlEstiloCalendar.SelectedIndex
If Calendar1.SelectionMode = CalendarSelectionMode.None Then
Me.Calendar1.SelectedDates.Clear()
Me.Calendar1.SelectedDates.Clear()
End If
End Sub
Sub
Sobre el control Calendar, doble click para ingresar a su evento predeterminado
SelectionChanged y escribimos lo siguiente:
Protected Sub Calendar1_SelectionChanged(ByVal
Calendar1_SelectionChanged(ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
Calendar1.SelectionChanged
'De acuerdo a la cantidad de dias seleccionados
Select Case Calendar1.SelectedDates.Count
Case 0
lblMensaje.Text = "No se permite seleccionar una Fecha"
Case 1
lblMensaje.Text = "La fecha seleccionada es: " & _
Me.Calendar1.SelectedDate.ToShortDateString
Me.Calendar1.SelectedDate.ToShortDateString
Case 7
lblMensaje.Text = "La seleccion de la semana comienza el: " & _
Me.Calendar1.SelectedDate.ToShortDateString
Me.Calendar1.SelectedDate.ToShortDateString
Case Else
lblMensaje.Text = "La seleccion comienza el dia: " & _
Me.Calendar1.SelectedDate.ToShortDateString
Me.Calendar1.SelectedDate.ToShortDateString
End Select
End Sub
Como podemos ver se ha establecido sobre el control DropDownList la propiedad
AutoPostBack el valor de True, de esta manera al producirse algn cambio en la seleccin de
sus elementos, se producir un envo automtico del formulario al servidor Web, y en el evento
Page_Load asignaremos a la propiedad SelectionMode el valor de la lista de acuerdo al
ndice.
En este ejemplo se puede observar la forma de recuperar el valor de la fecha seleccionada en
el calendario en cada uno de los diferentes casos. El evento utilizado es SelectionChanged,
este evento se lanzara cada vez que cambie la seleccin de la fecha en el calendario.
El mtodo ToShortDateString() convierte el objeto DateTime que se encuentra en la
propiedad SelectedDate en una representacin sencilla de una cadena de caracteres de la
fecha seleccionada, del tipo da, mes y ao.
El ejemplo en ejecucin se muestra a continuacin:

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 6 / 16

7. MultiView
Este control Web es nuevo en ASP.NET 2.0, y nos permite mostrar/ocultar algunas partes de la
pagina ASPX que estamos visualizando en el navegador.
El control MultiView va a actuar como un contenedlo de controles View, y estos a su vez van a
contener grupos de controles Web hijos. El control MultiView nos va a permitir ir ocultando y
mostrando los distintos controles View que contiene, seria similar a ir modificando la visibilidad
de controles Panel. nicamente un control View puede estar activo en un mismo momento.
En la vista de diseo de nuestro formulario Web, podemos construir de manera rpida nuestro
control MultiView con los distintos controles View que formaran parte de el. Y dentro de estos
ltimos podemos arrastrar los controles hijos que estaran formando parte de cada View.
Ejemplo: Crear un formulario Web que contenga un control MultiView, dentro de este
control agregaremos 3 controles View, en el primer control View colocaremos los
controles del ejemplo del AdRotator, en el View2 colocaremos los controles del primer
ejemplo del control Calendar y en el tercer View adicionaremos un control Image. Fuera
del control MultiView crearemos una tabla de 1 fila por 3 columnas en donde
estableceremos la posibilidad que se pueda elegir desde un control DropDownList la
vista a mostrar.

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 7 / 16

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 8 / 16

El control DropDownList esta formado de 4 ListItems conteniendo lo siguiente

Elemento
ListItem1
ListItem2
ListItem3
ListItem4

Text
Seleccione
Vista 1
Vista 2
Vista 3

Value
-1
0
Selected
1
2

A continuacin se muestra el cdigo de nuestro formulario Web

En el evento Page_Load comprobaremos si la pagina esta cargandose por primera vez caso
contrario saldremos del bucle, si la pagina esta cargandose por primera vez estableceremos
que se cargue por defecto la vista 1, la cual tiene el indice 0.
Page_Load(ByVal
Protected Sub Page_Load(
ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles Me.Load
Me.Load
If Page.IsPostBack = True Then Exit Sub
Me.MultiView1.ActiveViewIndex
Me.MultiView1.ActiveViewIndex = 0
End Sub
Al momento de que se cambia de vista activa imprimiremos por pantalla el nombre de la nueva
vista a mostrarse, para lo cual, en la lista de eventos del control MultiView elegiremos el
metodo ActiveViewChanged, doble clic y escribiremos el codigo que se muestra a continuacion:
Protected Sub MultiView1_ActiveViewChanged(ByVal
MultiView1_ActiveViewChanged(ByVal sender As Object,
Object,
ByVal e As System.EventArgs) Handles MultiView1.ActiveViewChanged
Response.Write("<b>se
Response.Write("<b>se ha cambiado a la vista: " &
Me.MultiView1.GetActiveView.ClientID
Me.MultiView1.GetActiveView.ClientID & "</b>")
"</b>")
End Sub
Al seleccionar un nuevo elemento del control DropDownList y despues de presionar el boton
OK estableceremos cual es la nueva vista activa que mostraremos en el control MultiView
Protected Sub btnOk_Click(ByVal
btnOk_Click(ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles btnOk.Click
btnOk.Click
Me.MultiView1.ActiveViewIndex
Me.MultiView1.ActiveViewIndex = Me.DropDownList1.SelectedValue
Me.DropDownList1.SelectedValue
End Sub
Se ha copiado el cdigo programado en el evento SelectionChanged del control Calendar
desde el ejemplo del control Calendar.
Protected Sub Calendar1_SelectionChanged(ByVa
Calendar1_SelectionChanged(ByVal
ByVal sender As Object,
Object, ByVal
e As System.EventArgs) Handles Calendar1.SelectionChanged
'Capturando en una variable el valor del dia seleccionado
Dim cad As String = Me.Calendar1.SelectedDate.ToLongDateString
Me.Calendar1.SelectedDate.ToLongDateString
'Adicionando a la variable "Cad" el valor de la hora actual.
cad &= Space(5) & Now.ToLongTimeString()
lblMensaje.Text = cad
End Sub
Del ejemplo del control AdRotator, no se tenia que programar nada, pues todo esta en el
archivo XML y en las propiedades del control.

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 9 / 16

8. Wizard
Los asistentes proporcionan la infraestructura para mostrar al usuario los sucesivos pasos de
un proceso, proporcionando acceso a todos los datos recogidos en los pasos anteriores, con
una sencilla navegacin hacia delante y hacia atrs.
Al igual que el control Multiview, el control Wizard contiene una coleccin de objetos
WizardSteps. Estos WizardSteps derivan de la clase View y la relacion entre WizardSteps y el
control Wizard es similar a la que hay entre View y MultiView.
Un control Wizard se va a componer de los siguientes elementos:
Un conjunto de controles WizardStep, que van a representar cada uno de los pasos de lo
que se compone el proceso implementado. Los controles WizardStep pueden ser comparados
con los controles View, por que ambos pueden contener a otros controles Web.
rea de Navegacin, que nos permitir desplazarnos por los distintos pasos del control
Wizard, y que esta compuesta por los controles Button correspondientes.
Barra lateral, denominada SideBar, que va a mostrar, a modo de enlaces, todos los pasos de
que se compone el control Wizard. De esta manera se tiene la posibilidad de acceder a los
distintos pasos sin un orden determinado. Este elemento es opcional, podemos asignar el valor
true/false a la propiedad SideBarEnabled del control Wizard.
Cabecera, este tambin es un elemento opcional y su funcin es mostrar una cabecera o titulo
en cada uno de los pasos.
Al igual que con otros controles de ASP.NET, VS 2005 nos ofrece en la vista de diseo la
posibilidad de construir de forma sencilla y visual un control Wizard con sus distintos pasos,
gracias al Smart Tag que nos ofrece el control Wizard.
Entre las tareas que podemos realizar sobre el control Wizard, esta la de aplicar un formato
automtico, tal como se muestra en la siguiente figura:

Otra tarea comn es aadir pasos, para ello se debe elegir la opcin Agregar o quitar
WizardSteps, que nos llevara a la ventana que se muestra a continuacin:

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 10 / 16

El WizardStep tiene una propiedad StepType, que tiene uno de los valores de la enumeracin
WizardStepType. Por defecto StepType es Auto, en el que la interfaz de navegacin esta
determinada por el orden de los pasos en la coleccin WizardSteps.
Tabla de miembros de la enumeracin WizardStepType
Miembro

Descripcin

Auto

Interfaz de navegacin determinada automticamente por el orden en el que se

declara el paso. Es el valor predeterminado.

Complete

El ltimo paso que se mostrara. No se muestra ningn botn de navegacin.

Finish

El ultimo paso de recogida de datos. Se muestran los botones Finalizar y

Anterior.

Start

El primer paso. Solo muestra el botn Siguiente.

Step

Cualquier paso que no sea Start, Finish ni Complete. Se muestran los

botones Anterior y Siguiente.

El control Wizard tiene seis eventos, que se muestran en la siguiente Tabla. Uno de estos
eventos es ActiveStepChanged, que desencadena cuando se cambia el paso actual. Los
otros 5 eventos se desencadenan en respuesta al clic del botn.

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 11 / 16
Tabla de Eventos Wizard

Evento

Descripcin

ActiveStepChanged

Se desencadena cuando se muestra un nuevo paso.

CancelButtonClick

Se desencadena cuando se hace Clic en el botn Cancelar.

FinishButtonClick

Se desencadena cuando se hace Clic en el botn Finalizar.

NextButtonClick

Se desencadena cuando se hace Clic en el botn Siguiente.

PreviousButtonClick Se desencadena cuando se hace Clic en el botn Anterior.

SideBarButtonClick

Se desencadena cuando se hace Clic en un botn del cuadro adjunto.

Los 4 ltimos eventos mostrados en la tabla anterior tienen un argumento de evento del tipo
WizardNavigationEventArgs, que muestra tres propiedades:

Cancel: El valor booleano es True si hay que cancelar la navegacin al siguiente paso. Por
defecto es False.

CurrentStepIndex: El ndice entero de base cero del paso que se muestra en ese
momento en la coleccin WizardSteps.

NextStepIndex: El ndice entero de base cero del paso que se mostrara a continuacin.
Por ejemplo, si se ha hecho clic en el botn Anterior, el valor de NextStepIndex ser una
unidad inferior al de CurrentStepIndex.

Podemos controlar si enviaremos o no los resultados al paso final que es el Complete, que
para este ejemplo resulta ser el Resumen, para lo cual en el paso Finish se ha colocado un
RadioButtonList con 2 opciones (ListItems), los cuales determinaran si se enviaran o no los
datos.
Protected Sub Wizard1_FinishButtonClick(ByVal
Wizard1_FinishButtonClick(ByVal sender As Object,
Object, _
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
Handles Wizard1.FinishButtonClick
If e.NextStepIndex
e.NextStepIndex = 3 Then
If Me.RBLEnviar.Items(0).Selected
Me.RBLEnviar.Items(0).Selected Then
Wizard1.ActiveStepIndex = 3
Else
e.Cancel = True
End If
End If
'Colocar
'Colocar codigo
codigo para recuperar la informacion ingresada previamente
'en
'en los pasos anteriores y mostrarlos en los controles del paso
'Complete.
End Sub

9. FileUpload
Este control de servidor aparece en la versin 2.0 de ASP.NET y nos permite enviar archivos al
servidor Web de forma muy sencilla. Para poder utilizar correctamente este control, tenemos
que considerar 2 aspectos:
1. Tener los permisos de escritura en la carpeta de destino en el que se quiera copiar el
archivo.
2. Tamao del archivo (limite predeterminado 4096 kb, 4mb)
____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 12 / 16

En la carpeta de destino al que se va a copiar el archivo en el servidor Web, se debe establecer

permisos de Lectura /Escritura para el usuario ASPNET. Como se puede mostrar en la
siguiente figura:

Existe una limitacin por defecto en el tamao del archivo que se puede subir al servidor Web,
esta limitacin se utiliza para evitar ataques con la subida de archivos de gran tamao, y el
valor por defecto es de 4096 KB, es decir, 4 MB. Si queremos modificar este valor por defecto,
amplindolo o reducindolo debemos hacerlo en el archivo de configuracin de la aplicacin
Web (web.config). Para ello deberemos crear una seccin <httpRuntime> que sobrescriba el
valor de la propiedad maxRequestLength, la cual indica el mximo valor del tamao del
archivo en KB.
Al ampliar el tamao de esta propiedad deberemos tambin ampliar el valor de la propiedad
executionTimeout que tambin pertenece a la misma seccin. Esta ultima propiedad se
encuentra muy relacionada con la propiedad maxRequestLength ya que establece el tiempo
de espera de la ejecucin de una pgina ASP.NET, el valor por defecto de executionTimeout
es de 90 segundos, este ser el tiempo que el servidor esperara como mximo a que se
ejecute una pgina ASPX.
<system.web>
system.web>
<httpRuntime executionTimeout=
executionTimeout="90"
90" maxRequestLength=
maxRequestLength="10000
10000"
000" />
Vamos a ver en accin este control Web a travs del siguiente ejemplo, que consiste en un
sencillo formulario que al pulsar sobre un botn guarda (sube) en el servidor Web el archivo
indicado en el control FileUpload. Para esto utilizamos el mtodo de ese botn
(btn_subir_archivo) al que pasamos por parmetro la ruta completa en la que queremos
guardar el archivo. Una vez enviado el archivo al servidor Web, consultamos por el nombre del
archivo enviado y el tamao del mismo en bytes (ContentLength). Tambin vamos a

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 13 / 16

cerciorarnos que realmente se est enviando un archivo, para lo cual bastara por preguntar por
la propiedad HasFile del control FileUpload.
Protected Sub btnSubir_Archivo_Click(ByVal
btnSubir_Archivo_Click(ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles btnSubir_Archivo.Click
btnSubir_Archivo.Click
If Me.FileUpload1.HasFile
Me.FileUpload1.HasFile Then
Me.FileUpload1.SaveAs(
Me.FileUpload1.SaveAs("E:
.FileUpload1.SaveAs("E:\
"E:\PruebaFileUpload\
PruebaFileUpload\" &
Me.FileUpload1.FileName)
Me.FileUpload1.FileName)
lblMensaje.Text = String.Format(
String.Format("Se
.Format("Se ha copiado el archivo {0} con
{1} MBytes de Tamao",
Tamao", FileUpload1.PostedFile.FileName, _
(Me.FileUpload1.PostedFile.ContentLength
Me.FileUpload1.PostedFile.ContentLength / (1024 *
1024)).ToString("0#.0#"
1024)).ToString("0#.0#"))
"0#.0#"))
End If
End Sub
El control FileUpload por si solo no lanza el proceso de subida del archivo al servidor, en
nuestro caso se ha tenido que invocar este proceso al pulsar un botn del formulario Web.

10. ImageMap
Este control nos permite definir un mapa de imagen sensible, es decir, una imagen que posee
varias secciones y segn en la seccin en la que se pulse la pagina realizara una accin u otra.
Con este control podemos utilizar una imagen como un men de navegacin, por ejemplo.
Se pueden determinar las secciones sensibles del control ImageMap utilizando los controles
RectangleHotSpot, para indicar un rea rectangular, CircleHotSpot, para indicar un rea
circular y PolygonHotSpot, para indicar un rea en forma de polgono. En estos controles
asociados al control ImageMap, especificaremos el tamao y situacin del rea utilizando las
coordenadas correspondientes. Visual Studio 2005 no ofrece una utilidad para indicar estas
secciones, por lo que, por comodidad y productividad, tendremos que utilizar otra herramienta
para indicar estas coordenadas.
Para un control ImageMap podemos indicar el comportamiento que tendrn sus secciones
cuando pulsamos sobre una de ellas, esto lo conseguiremos mediante la propiedad
HotSpotMode. Esta propiedad puede tener 3 valores:

PostBack: Al pulsar la seccin se enviara la pgina al servidor.

Navigate: Al pulsar el rea se re-direcciona al usuario a la pagina que est asociada a esa
seccin de la imagen.

InActive: Al pulsar sobre las secciones no pasa absolutamente nada.

En el siguiente ejemplo se utilizara un control ImageMap y se crearan 2 secciones

rectangulares a travs de la propiedad RectangleHotSpot, y que al pulsar sobre cualquiera de
sus secciones va a realizar envos (PostBack) de la pgina al servidor. En el manejador del
evento se acceder a la propiedad PostBackValue del objeto de la clase
ImageMapEventArgs, para averiguar qu zona (seccin) ha sido pulsada. El valor de cada
zona de la imagen se establecer en la propiedad PostBackValue de cada uno de los objetos
RectangleHotSpot que definen las secciones de la imagen.

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 14 / 16

Para realizar este demo, agregaremos un control ImageMap, estableceremos una ruta de una
imagen sobre la propiedad ImageUrl, luego debemos establecer el tamao de la imagen
(Width), para este demo se estableci en 400. Luego sobre HostSpotMode se ha elegido la
opcin PostBack y en la coleccin HotSpots se han agregado 2 elementos rectangulares sobre
las cuales se han establecido las siguientes propiedades:

Algo similar estableceremos para la otra segunda seccin (Rectangular) de esta imagen.
(Top = 0, Bottom = 400, Left = 200, Right = 400)
El cdigo para saber en que seccin hemos realizado un clic lo detectamos en el evento
ImageMap1_Click, gracias a su argumento ImageMapEventArgs que nos brinda la
posibilidad de recuperar lo asignado en la propiedad PostBackValue.
Protected Sub ImageMap1_Click(ByVal
ImageMap1_Click(ByVal sender As Object,
Object, _
ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
System.Web.UI.WebControls.ImageMapEventArgs) _
Handles ImageMap1.Click
lblMensaje.Text = "Has hecho click sobre: " & e.PostBackValue
End Sub

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 15 / 16

11. Table, TableRow y TableCell

Estos controles Web se encuentran muy relacionados entre si, mediante la utilizacin de todos
ellos podremos generar tablas en HTML.
El control Web Table se corresponde con una tabla del lenguaje HTML, es decir, permite
generar tablas del lenguaje HTML. Esta clase posee una coleccin llamada Rows, que
contiene objetos de la clase TableRow.
En el siguiente ejemplo nuestro formulario Web permitir indicar el nmero de filas y de
columnas que queramos mostrar en la tabla.
Protected Sub btnGenerar_Click(ByVal
btnGenerar_Click(ByVal sender As Object,
Object, _
ByVal e As System.EventArgs) Handles btnGenerar.Click
Dim nfilas, ncols
ncols As Byte
nfilas = Convert.ToByte(txtnFilas.Text)
ncols = CByte(txtnCols.Text)
CByte(txtnCols.Text)
For F As Byte = 1 To nfilas
Dim fila As New TableRow
For C As Byte = 1 To ncols
Dim col As New TableCell
col.Text = "[" & F & "," & C & "]"
fila.Cells.Add(col)
Next
Table1.Rows.Add(fila)
Next
End Sub
Como podemos ver en el ejemplo se utilizan objetos de la clase TableRow y TableCell para
crear las filas y columnas de la tabla. Para aadir una columna se debe aadir un objeto
TableCell a la coleccin Cells del objeto TableRow correspondiente, y para aadir una fila se
aade un objeto TableRow a la coleccin Rows del objeto de la clase Table.

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 16 / 16

En este ejemplo se ha utilizado la propiedad GridLines del control Table para mostrar las
lneas de la tabla, tanto las horizontales como las verticales, para ello se le ha asignado el valor
Both.

____________________________________________________________________________
Lenguaje de Programacin IV
Profesores: Carlos Garca V. y Julio C. Lin R.