02-controles avanzados asp net 3.5

16
CONTROLES WEB AVANZADOS Página: 1 / 16  __________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R. 5. AdRotator El control rotador de anuncios (AdRotator), permite mostrar una serie de anuncios, en forma de imágenes, dentro de una pagina ASP.NET, alternando la aparición de las imágenes, en otras palabras un banner. Para indicar las imágenes 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 ratón sobre la imagen. Impressions:  El número 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 más alto comparado con los demás. Una vez definido el archivo con el formato adecuado, debemos guardarlo con cualquier nombre pero con extensión XML, y debe encontrarse físicamente 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 continuación (Recuerde tener lagunas imágenes en el formato JPG que sean recomendado de igual tamaño, los cuales a su vez para mayor orden pudieran situarse en una carpeta distinta) Anuncios.xml <  Advertisem ents> <  Ad > <ImageUrl >Imagenes\COMPUTADORAS.JPG </ImageUrl> <  NavigateUr l >http://www.solucionesnet.org </  NavigateUr l > <  AlternateT ext>Información de Tecnlogías </  AlternateText> <Impressions >90</Impressions > </  Ad > <  Ad > <ImageUrl >Imagenes\VISA.JPG </ImageUrl > <  NavigateUr l >http://www.visanet.com.pe/ </  NavigateUrl> <  AlternateT ext>Consultas sobre su Tarjeta VISA </  AlternateText > <Impressions >60</Impressions > </  Ad >

Upload: jhon-reyes-flores

Post on 05-Jul-2015

703 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 1/16

 

CONTROLES WEB AVANZADOS Página: 1 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

5. AdRotator

El control rotador de anuncios (AdRotator), permite mostrar una serie de anuncios, en forma deimágenes, dentro de una pagina ASP.NET, alternando la aparición de las imágenes, en otraspalabras un banner.

Para indicar las imágenes 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 anuncioviene representado por un elemento <Ad>, y cada elemento que se corresponde con unanuncio tiene una serie de propiedades que definen el comportamiento de dicho anuncio, y sonlas siguientes:

ImageUrl: Es la única de las propiedades que es obligatoria, y es utilizada para indicar la rutaen 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 laetiqueta <img> de la imagen del anuncio, es decir, será el tooltip que aparecerá cuando

situemos el cursor del ratón sobre la imagen.

Impressions: El número que muestre esta propiedad indicara el peso que se le va a asignar acada uno de los anuncios incluidos en el fichero XML. El anuncio se mostrara un mayor deveces si este valor es más alto comparado con los demás.

Una vez definido el archivo con el formato adecuado, debemos guardarlo con cualquier nombrepero con extensión XML, y debe encontrarse físicamente en el servidor Web en el que vayautilizarse.

Para utilizar el control Web AdRotator solo nos queda establecer el nombre del archivo XMLen 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 deAnuncios.xml el cual se muestra a continuación (Recuerde tener lagunas imágenes en elformato JPG que sean recomendado de igual tamaño, los cuales a su vez para mayororden pudieran situarse en una carpeta distinta)

Anuncios.xml

< Advertisements>< Ad>

<ImageUrl>Imagenes\COMPUTADORAS.JPG</ImageUrl>

< NavigateUrl>http://www.solucionesnet.org</ NavigateUrl>< AlternateText>Información de Tecnlogías</ 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>

Page 2: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 2/16

 

CONTROLES WEB AVANZADOS Página: 2 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

< 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 diseño de nuestro formulario podría parecerse a:

Este ejemplo no tiene ningún código el la pagina asociada de Visual Basic.

6. Calendar

Este control ofrece un completo calendario. Es muy sencillo de utilizar aunque ofrece un altogrado de personalización. Este control nos muestra un calendario que permite una navegaciónpor fechas y también selecciones de fecha, el calendario se encuentra basado internamente,de forma completa en código JavaScript.

Para utilizar este control bastara solo con arrastrar y soltar nuestro control en nuestro formularioWeb.

Podemos personalizar el calendario, para lo cual estando seleccionado el control nos mostrarauna flecha en el borde superior derecho al hacerle un clic ASP.NET mostrara un smart tag (Etiqueta inteligente) que nos permite realizar, en modo diseño, una serie de operaciones sobreel control Web sobre el que se le aplica la etiqueta inteligente.

Para nuestro control el smart tag nos permitirá cambiar el formato automático (AutoFormat):

 

AdRotator1AdvertisementsFile = ~/Anuncios.xml

Button1ID = BtnPulsarText = Pulsame

Page 3: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 3/16

 

CONTROLES WEB AVANZADOS Página: 3 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

Ejemplo: En un formulario Web agregar una tabla de 4 filas por 1 columna. En la primerafila 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 enla última fila una etiqueta (con el ID=lblMensaje), tal como se muestra a continuación:

Page 4: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 4/16

 

CONTROLES WEB AVANZADOS Página: 4 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

El código asociado a la página Web de Visual Basic, corresponderá al evento Clic del Botón:

ProtectedProtectedProtectedProtected SubSubSubSub btnSeleccionar_Click(btnSeleccionar_Click(btnSeleccionar_Click(btnSeleccionar_Click(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles btnSeleccionar.ClickbtnSeleccionar.ClickbtnSeleccionar.ClickbtnSeleccionar.Click

'Capturando en una variable el valor del dia seleccionado'Capturando en una variable el valor del dia seleccionado'Capturando en una variable el valor del dia seleccionado'Capturando en una variable el valor del dia seleccionadoDimDimDimDim cadcadcadcad AsAsAsAs StringStringStringString ==== MeMeMeMe.Calendar1.SelectedDate.ToLongDateString.Calendar1.SelectedDate.ToLongDateString.Calendar1.SelectedDate.ToLongDateString.Calendar1.SelectedDate.ToLongDateString

'Adicionando a la variable "Cad" el valor de la hora actual.'Adicionando a la variable "Cad" el valor de la hora actual.'Adicionando a la variable "Cad" el valor de la hora actual.'Adicionando a la variable "Cad" el valor de la hora actual.

cad &= Space(5) & Now.ToLongTimeString()cad &= Space(5) & Now.ToLongTimeString()cad &= Space(5) & Now.ToLongTimeString()cad &= Space(5) & Now.ToLongTimeString()lblMenlblMenlblMenlblMensaje.Text = cadsaje.Text = cadsaje.Text = cadsaje.Text = cad

EndEndEndEnd SubSubSubSub

Además del aspecto del control Calendar, también nos va a interesar tener acceso a sucomportamiento, y variarlo según nos convenga, para ello este control ofrece un gran numerode propiedades que lo permiten. Una de estas propiedades, llamada SelectionMode, es la quepermite indicar el modo de selección de fecha deseado. La propiedad SelectionMode puedepresentar los siguientes valores:

Day: Únicamente se permite la selección de un solo día del mes. Este valor es elpredeterminado.

DayWeek: Permite seleccionar de un día o bien de una semana completa.

DayWeekMonth: Esta es la selección mas completa, se permite elegir un día, una semana o elmes completo.

Según sea el modo de selección de fecha el control Calendar presentara aspectos distintos.Para la selección de un día aparecerán subrayados cada uno de los días del mes, para laselección de semanas mostrara en la columna de la izquierda una serie de enlaces quepermiten seleccionar la semana, y para seleccionar el mes se ofrece en la esquina superiorizquierda 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 unCalendar y en la 4ta fila Label, tal como se muestra a continuación:

Page 5: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 5/16

 

CONTROLES WEB AVANZADOS Página: 5 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

Eligiendo al control DropDownList ingresaremos a sus propiedades avanzadas (smart tag) deEditar elementos (Edit ítems…) y adicionaremos 4 ListItems con los siguientes valores:

Elemento Text ValueListItem1 Ninguno noneListItem1 Día DayListItem1 Día y Semana DayWeek

ListItem1 Día, Semana y Mes DayWeekMonth

El siguiente código corresponde con la página Web asociada a su código de programación.

ProtectedProtectedProtectedProtected SubSubSubSub Page_Load(Page_Load(Page_Load(Page_Load(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HHHHandlesandlesandlesandles MeMeMeMe.Load.Load.Load.Load

MeMeMeMe.ddlEstiloCalendar.AutoPostBack =.ddlEstiloCalendar.AutoPostBack =.ddlEstiloCalendar.AutoPostBack =.ddlEstiloCalendar.AutoPostBack = TrueTrueTrueTrueCalendar1.SelectionMode =Calendar1.SelectionMode =Calendar1.SelectionMode =Calendar1.SelectionMode = MeMeMeMe.ddlEstiloCalendar.SelectedIndex.ddlEstiloCalendar.SelectedIndex.ddlEstiloCalendar.SelectedIndex.ddlEstiloCalendar.SelectedIndex

IfIfIfIf Calendar1.SelectionMode = CalendarSelectionMode.NoneCalendar1.SelectionMode = CalendarSelectionMode.NoneCalendar1.SelectionMode = CalendarSelectionMode.NoneCalendar1.SelectionMode = CalendarSelectionMode.None ThenThenThenThenMeMeMeMe.Calendar1.SelectedDates.Clear().Calendar1.SelectedDates.Clear().Calendar1.SelectedDates.Clear().Calendar1.SelectedDates.Clear()

EndEndEndEnd IfIfIfIfEndEndEndEnd SuSuSuSubbbb

Sobre el control Calendar, doble click para ingresar a su evento predeterminadoSelectionChanged y escribimos lo siguiente:

ProtectedProtectedProtectedProtected SubSubSubSub Calendar1_SelectionChanged(Calendar1_SelectionChanged(Calendar1_SelectionChanged(Calendar1_SelectionChanged(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles Calendar1.SelectionChanCalendar1.SelectionChanCalendar1.SelectionChanCalendar1.SelectionChangedgedgedged

'De acuerdo a la cantidad de dias seleccionados'De acuerdo a la cantidad de dias seleccionados'De acuerdo a la cantidad de dias seleccionados'De acuerdo a la cantidad de dias seleccionados SelectSelectSelectSelect CaseCaseCaseCase Calendar1.SelectedDates.CountCalendar1.SelectedDates.CountCalendar1.SelectedDates.CountCalendar1.SelectedDates.Count

CaseCaseCaseCase 0000lblMensaje.Text =lblMensaje.Text =lblMensaje.Text =lblMensaje.Text = "No se permite seleccionar una Fecha""No se permite seleccionar una Fecha""No se permite seleccionar una Fecha""No se permite seleccionar una Fecha"

CaseCaseCaseCase 1111lblMensaje.Text =lblMensaje.Text =lblMensaje.Text =lblMensaje.Text = "La fecha seleccionada es: ""La fecha seleccionada es: ""La fecha seleccionada es: ""La fecha seleccionada es: " & _& _& _& _

MeMeMeMe.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateStringCaseCaseCaseCase 7777lblMensaje.Text =lblMensaje.Text =lblMensaje.Text =lblMensaje.Text = "La seleccion de la semana comienza el: ""La seleccion de la semana comienza el: ""La seleccion de la semana comienza el: ""La seleccion de la semana comienza el: " & _& _& _& _

MeMeMeMe.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateStringCaseCaseCaseCase ElseElseElseElse

lblMensaje.Text =lblMensaje.Text =lblMensaje.Text =lblMensaje.Text = "La seleccion comienza"La seleccion comienza"La seleccion comienza"La seleccion comienza el dia: "el dia: "el dia: "el dia: " & _& _& _& _MeMeMeMe.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString.Calendar1.SelectedDate.ToShortDateString

EndEndEndEnd SelectSelectSelectSelectEndEndEndEnd SubSubSubSub

Como podemos ver se ha establecido sobre el control DropDownList la propiedadAutoPostBack el valor de True, de esta manera al producirse algún cambio en la selección desus elementos, se producirá un envío automático del formulario al servidor Web, y en el eventoPage_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 enel calendario en cada uno de los diferentes casos. El evento utilizado es SelectionChanged,

este evento se lanzara cada vez que cambie la selección de la fecha en el calendario.

El método ToShortDateString() convierte el objeto DateTime que se encuentra en lapropiedad SelectedDate en una representación sencilla de una cadena de caracteres de lafecha seleccionada, del tipo día, mes y año.

El ejemplo en ejecución se muestra a continuación:

Page 6: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 6/16

 

CONTROLES WEB AVANZADOS Página: 6 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

7. MultiView

Este control Web es nuevo en ASP.NET 2.0, y nos permite mostrar/ocultar algunas partes de lapagina 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 acontener grupos de controles Web hijos. El control MultiView nos va a permitir ir ocultando ymostrando los distintos controles View que contiene, seria similar a ir modificando la visibilidadde controles Panel. Únicamente un control View puede estar activo en un mismo momento.

En la vista de diseño de nuestro formulario Web, podemos construir de manera rápida nuestrocontrol MultiView con los distintos controles View que formarían parte de el. Y dentro de estosúltimos podemos arrastrar los controles hijos que estarían formando parte de cada View.

Ejemplo: Crear un formulario Web que contenga un control MultiView, dentro de estecontrol agregaremos 3 controles View, en el primer control View colocaremos los

controles del ejemplo del AdRotator, en el View2 colocaremos los controles del primerejemplo del control Calendar y en el tercer View adicionaremos un control Image. Fueradel control MultiView crearemos una tabla de 1 fila por 3 columnas en dondeestableceremos la posibilidad que se pueda elegir desde un control DropDownList lavista a mostrar.

Page 7: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 7/16

 

CONTROLES WEB AVANZADOS Página: 7 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

Page 8: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 8/16

 

CONTROLES WEB AVANZADOS Página: 8 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

El control DropDownList esta formado de 4 ListItems conteniendo lo siguiente

Elemento Text ValueListItem1 Seleccione -1ListItem2 Vista 1 0 SelectedListItem3 Vista 2 1ListItem4 Vista 3 2

A continuación se muestra el código de nuestro formulario Web

En el evento Page_Load comprobaremos si la pagina esta cargandose por primera vez casocontrario saldremos del bucle, si la pagina esta cargandose por primera vez estableceremosque se cargue por defecto la vista 1, la cual tiene el indice 0.

ProtectedProtectedProtectedProtected SubSubSubSub Page_Load(Page_Load(Page_Load(Page_Load(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles MeMeMeMe.Load.Load.Load.Load

IfIfIfIf Page.IsPostBack =Page.IsPostBack =Page.IsPostBack =Page.IsPostBack = TrueTrueTrueTrue ThenThenThenThen ExitExitExitExit SubSubSubSubMeMeMeMe.MultiView1.ActiveViewIndex = 0.MultiView1.ActiveViewIndex = 0.MultiView1.ActiveViewIndex = 0.MultiView1.ActiveViewIndex = 0

EndEndEndEnd SubSubSubSub

Al momento de que se cambia de vista activa imprimiremos por pantalla el nombre de la nuevavista a mostrarse, para lo cual, en la lista de eventos del control MultiView elegiremos elmetodo ActiveViewChanged, doble clic y escribiremos el codigo que se muestra a continuacion:

ProtectedProtectedProtectedProtected SubSubSubSub MultiView1_ActiveViewChanged(MultiView1_ActiveViewChanged(MultiView1_ActiveViewChanged(MultiView1_ActiveViewChanged(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,,ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles MultiView1.ActiveViewChangedMultiView1.ActiveViewChangedMultiView1.ActiveViewChangedMultiView1.ActiveViewChanged

Response.Write(Response.Write(Response.Write(Response.Write("<b>se ha cambiado a la vista:"<b>se ha cambiado a la vista:"<b>se ha cambiado a la vista:"<b>se ha cambiado a la vista: """" &&&&MeMeMeMe.MultiView1.GetActiveView.ClientID &.MultiView1.GetActiveView.ClientID &.MultiView1.GetActiveView.ClientID &.MultiView1.GetActiveView.ClientID & "</b>""</b>""</b>""</b>"))))

EndEndEndEnd SubSubSubSub

Al seleccionar un nuevo elemento del control DropDownList y despues de presionar el botonOK estableceremos cual es la nueva vista activa que mostraremos en el control MultiView 

ProtectedProtectedProtectedProtected SubSubSubSub btnOk_Click(btnOk_Click(btnOk_Click(btnOk_Click(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles btnObtnObtnObtnOk.Clickk.Clickk.Clickk.Click

MeMeMeMe.MultiView1.ActiveViewIndex =.MultiView1.ActiveViewIndex =.MultiView1.ActiveViewIndex =.MultiView1.ActiveViewIndex = MeMeMeMe.DropDownList1.SelectedValue.DropDownList1.SelectedValue.DropDownList1.SelectedValue.DropDownList1.SelectedValueEndEndEndEnd SubSubSubSub

Se ha copiado el código programado en el evento SelectionChanged del control Calendardesde el ejemplo del control Calendar.

ProtectedProtectedProtectedProtected SubSubSubSub Calendar1_SelectionChanged(Calendar1_SelectionChanged(Calendar1_SelectionChanged(Calendar1_SelectionChanged(ByVaByVaByVaByVallll sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles Calendar1.SelectionChangedCalendar1.SelectionChangedCalendar1.SelectionChangedCalendar1.SelectionChanged

'Capturando en una variable el valor del dia seleccionado'Capturando en una variable el valor del dia seleccionado'Capturando en una variable el valor del dia seleccionado'Capturando en una variable el valor del dia seleccionadoDimDimDimDim cadcadcadcad AsAsAsAs StringStringStringString ==== MeMeMeMe.Calendar1.SelectedDate.ToLongDateString.Calendar1.SelectedDate.ToLongDateString.Calendar1.SelectedDate.ToLongDateString.Calendar1.SelectedDate.ToLongDateString'Adicionando a la variable'Adicionando a la variable'Adicionando a la variable'Adicionando a la variable "Cad" el valor de la hora actual."Cad" el valor de la hora actual."Cad" el valor de la hora actual."Cad" el valor de la hora actual.cad &= Space(5) & Now.ToLongTimeString()cad &= Space(5) & Now.ToLongTimeString()cad &= Space(5) & Now.ToLongTimeString()cad &= Space(5) & Now.ToLongTimeString()lblMensaje.Text = cadlblMensaje.Text = cadlblMensaje.Text = cadlblMensaje.Text = cad

EndEndEndEnd SubSubSubSub

Del ejemplo del control AdRotator, no se tenia que programar nada, pues todo esta en elarchivo XML y en las propiedades del control.

Page 9: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 9/16

 

CONTROLES WEB AVANZADOS Página: 9 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

8. Wizard

Los asistentes proporcionan la infraestructura para mostrar al usuario los sucesivos pasos deun proceso, proporcionando acceso a todos los datos recogidos en los pasos anteriores, conuna sencilla navegación hacia delante y hacia atrás.

Al igual que el control Multiview, el control Wizard contiene una colección de objetos

WizardSteps. Estos WizardSteps derivan de la clase View y la relacion entre WizardSteps y elcontrol 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 loque se compone el proceso implementado. Los controles WizardStep pueden ser comparadoscon los controles View, por que ambos pueden contener a otros controles Web.

Área de Navegación, que nos permitirá desplazarnos por los distintos pasos del controlWizard, y que esta compuesta por los controles Button correspondientes.

Barra lateral, denominada SideBar, que va a mostrar, a modo de enlaces, todos los pasos deque 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 valortrue/false a la propiedad SideBarEnabled del control Wizard.

Cabecera, este también es un elemento opcional y su función es mostrar una cabecera o tituloen cada uno de los pasos.

Al igual que con otros controles de ASP.NET, VS 2005 nos ofrece en la vista de diseño laposibilidad 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 formatoautomático, tal como se muestra en la siguiente figura:

Otra tarea común es añadir pasos, para ello se debe elegir la opción Agregar o quitarWizardSteps, que nos llevara a la ventana que se muestra a continuación:

Page 10: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 10/16

 

CONTROLES WEB AVANZADOS Página: 10 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

El WizardStep tiene una propiedad StepType, que tiene uno de los valores de la enumeraciónWizardStepType. Por defecto StepType es Auto, en el que la interfaz de navegación estadeterminada por el orden de los pasos en la colección WizardSteps.

Tabla de miembros de la enumeración WizardStepType

 

Miembro Descripción

Auto Interfaz de navegación determinada automáticamente por el orden en el que sedeclara el paso. Es el valor predeterminado.

Complete El último paso que se mostrara. No se muestra ningún botón de navegación.

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

Start El primer paso. Solo muestra el botón Siguiente.

Step Cualquier paso que no sea Start, Finish ni Complete. Se muestran losbotones Anterior y Siguiente.

El control Wizard tiene seis eventos, que se muestran en la siguiente Tabla. Uno de estoseventos es ActiveStepChanged, que desencadena cuando se cambia el paso actual. Losotros 5 eventos se desencadenan en respuesta al clic del botón.

Page 11: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 11/16

 

CONTROLES WEB AVANZADOS Página: 11 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

Tabla de Eventos Wizard

 

Evento Descripción

ActiveStepChanged Se desencadena cuando se muestra un nuevo paso.

CancelButtonClick Se desencadena cuando se hace Clic en el botón Cancelar.

FinishButtonClick Se desencadena cuando se hace Clic en el botón Finalizar.

NextButtonClick Se desencadena cuando se hace Clic en el botón Siguiente.

PreviousButtonClick Se desencadena cuando se hace Clic en el botón Anterior.

SideBarButtonClick Se desencadena cuando se hace Clic en un botón del cuadro adjunto.

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

•  Cancel: El valor booleano es True si hay que cancelar la navegación al siguiente paso. Por

defecto es False.•  CurrentStepIndex: El índice entero de base cero del paso que se muestra en ese

momento en la colección WizardSteps.

•  NextStepIndex: El índice entero de base cero del paso que se mostrara a continuación.Por ejemplo, si se ha hecho clic en el botón Anterior, el valor de NextStepIndex será unaunidad inferior al de CurrentStepIndex.

Podemos controlar si enviaremos o no los resultados al paso final que es el Complete, quepara este ejemplo resulta ser el Resumen, para lo cual en el paso Finish se ha colocado unRadioButtonList con 2 opciones (ListItems), los cuales determinaran si se enviaran o no losdatos.

ProtectedProtectedProtectedProtected SubSubSubSub Wizard1_FinishButtonClick(Wizard1_FinishButtonClick(Wizard1_FinishButtonClick(Wizard1_FinishButtonClick(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.Web.UI.WebControls.WizardNavigationEventArgs)System.Web.UI.WebControls.WizardNavigationEventArgs)System.Web.UI.WebControls.WizardNavigationEventArgs)System.Web.UI.WebControls.WizardNavigationEventArgs)HandlesHandlesHandlesHandles Wizard1.FinishButtonClickWizard1.FinishButtonClickWizard1.FinishButtonClickWizard1.FinishButtonClick

IfIfIfIf e.Nee.Nee.Nee.NextStepIndex = 3xtStepIndex = 3xtStepIndex = 3xtStepIndex = 3 ThenThenThenThenIfIfIfIf MeMeMeMe.RBLEnviar.Items(0).Selected.RBLEnviar.Items(0).Selected.RBLEnviar.Items(0).Selected.RBLEnviar.Items(0).Selected ThenThenThenThen

Wizard1.ActiveStepIndex = 3Wizard1.ActiveStepIndex = 3Wizard1.ActiveStepIndex = 3Wizard1.ActiveStepIndex = 3ElseElseElseElse

e.Cancel =e.Cancel =e.Cancel =e.Cancel = TrueTrueTrueTrueEndEndEndEnd IfIfIfIf

EndEndEndEnd IfIfIfIf'Co'Co'Co'Colocar colocar colocar colocar codigodigodigodigo para recuperar la informacion ingresada previamentepara recuperar la informacion ingresada previamentepara recuperar la informacion ingresada previamentepara recuperar la informacion ingresada previamente 'e'e'e'ennnn los pasos anteriores y mostrarlos en los controles del pasolos pasos anteriores y mostrarlos en los controles del pasolos pasos anteriores y mostrarlos en los controles del pasolos pasos anteriores y mostrarlos en los controles del paso''''Complete.Complete.Complete.Complete. 

EndEndEndEnd SubSubSubSub 

9. FileUploadEste control de servidor aparece en la versión 2.0 de ASP.NET y nos permite enviar archivos alservidor Web de forma muy sencilla. Para poder utilizar correctamente este control, tenemosque considerar 2 aspectos:

1. Tener los permisos de escritura en la carpeta de destino en el que se quiera copiar elarchivo.

2. Tamaño del archivo (limite predeterminado 4096 kb, 4mb)

Page 12: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 12/16

 

CONTROLES WEB AVANZADOS Página: 12 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

En la carpeta de destino al que se va a copiar el archivo en el servidor Web, se debe establecerpermisos de Lectura /Escritura para el usuario ASPNET. Como se puede mostrar en lasiguiente figura:

Existe una limitación por defecto en el tamaño del archivo que se puede subir al servidor Web,esta limitación se utiliza para evitar ataques con la subida de archivos de gran tamaño, y elvalor por defecto es de 4096 KB, es decir, 4 MB. Si queremos modificar este valor por defecto,ampliándolo o reduciéndolo debemos hacerlo en el archivo de configuración de la aplicaciónWeb (web.config). Para ello deberemos crear una sección <httpRuntime> que sobrescriba elvalor de la propiedad maxRequestLength, la cual indica el máximo valor del tamaño delarchivo en KB.

Al ampliar el tamaño de esta propiedad deberemos también ampliar el valor de la propiedadexecutionTimeout que también pertenece a la misma sección. Esta ultima propiedad seencuentra muy relacionada con la propiedad maxRequestLength ya que establece el tiempode espera de la ejecución de una página ASP.NET, el valor por defecto de executionTimeout es de 90 segundos, este será el tiempo que el servidor esperara como máximo a que seejecute una página ASPX.

<<<<system.websystem.websystem.websystem.web>>>><<<<httpRuntimehttpRuntimehttpRuntimehttpRuntime executionTimeoutexecutionTimeoutexecutionTimeoutexecutionTimeout====""""90909090"""" maxRequestLengthmaxRequestLengthmaxRequestLengthmaxRequestLength====""""10101010000000000000"""" />/>/>/>

Vamos a ver en acción este control Web a través del siguiente ejemplo, que consiste en unsencillo formulario que al pulsar sobre un botón guarda (sube) en el servidor Web el archivoindicado en el control FileUpload. Para esto utilizamos el método de ese botón(btn_subir_archivo) al que pasamos por parámetro la ruta completa en la que queremosguardar el archivo. Una vez enviado el archivo al servidor Web, consultamos por el nombre delarchivo enviado y el tamaño del mismo en bytes (ContentLength). También vamos a

Page 13: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 13/16

 

CONTROLES WEB AVANZADOS Página: 13 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

cerciorarnos que realmente se esté enviando un archivo, para lo cual bastara por preguntar porla propiedad HasFile del control FileUpload.

ProtectedProtectedProtectedProtected SubSubSubSub btnSubir_Archivo_Click(btnSubir_Archivo_Click(btnSubir_Archivo_Click(btnSubir_Archivo_Click(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles btnSubir_Archivo.ClicbtnSubir_Archivo.ClicbtnSubir_Archivo.ClicbtnSubir_Archivo.Clickkkk

IfIfIfIf MeMeMeMe.FileUpload1.HasFile.FileUpload1.HasFile.FileUpload1.HasFile.FileUpload1.HasFile ThenThenThenThenMeMeMeMe.FileUpload1.SaveAs(.FileUpload1.SaveAs(.FileUpload1.SaveAs(.FileUpload1.SaveAs("E:"E:"E:"E:\\\\PruebaFileUploadPruebaFileUploadPruebaFileUploadPruebaFileUpload\\\\"""" &&&&

MeMeMeMe.FileUpload1.FileName).FileUpload1.FileName).FileUpload1.FileName).FileUpload1.FileName)

lblMensaje.Text =lblMensaje.Text =lblMensaje.Text =lblMensaje.Text = StringStringStringString.Format(.Format(.Format(.Format("Se ha copiado el archivo {0} con"Se ha copiado el archivo {0} con"Se ha copiado el archivo {0} con"Se ha copiado el archivo {0} con{1} MBytes de Tamaño"{1} MBytes de Tamaño"{1} MBytes de Tamaño"{1} MBytes de Tamaño", FileUpload1.PostedFile.FileName, _, FileUpload1.PostedFile.FileName, _, FileUpload1.PostedFile.FileName, _, FileUpload1.PostedFile.FileName, _((((MeMeMeMe.FileUpload1.PostedFile.ContentLength / (1024 *.FileUpload1.PostedFile.ContentLength / (1024 *.FileUpload1.PostedFile.ContentLength / (1024 *.FileUpload1.PostedFile.ContentLength / (1024 *

1024)).ToString(1024)).ToString(1024)).ToString(1024)).ToString("0#.0#""0#.0#""0#.0#""0#.0#"))))))))EndEndEndEnd IfIfIfIf

EndEndEndEnd SubSubSubSub

El control FileUpload por si solo no lanza el proceso de subida del archivo al servidor, ennuestro caso se ha tenido que invocar este proceso al pulsar un botón del formulario Web.

10. ImageMap

Este control nos permite definir un mapa de imagen sensible, es decir, una imagen que poseevarias secciones y según en la sección en la que se pulse la pagina realizara una acción u otra.Con este control podemos utilizar una imagen como un menú de navegación, por ejemplo.

Se pueden determinar las secciones sensibles del control ImageMap utilizando los controlesRectangleHotSpot, para indicar un área rectangular, CircleHotSpot, para indicar un áreacircular y PolygonHotSpot, para indicar un área en forma de polígono. En estos controlesasociados al control ImageMap, especificaremos el tamaño y situación del área utilizando lascoordenadas correspondientes. Visual Studio 2005 no ofrece una utilidad para indicar estassecciones, por lo que, por comodidad y productividad, tendremos que utilizar otra herramientapara indicar estas coordenadas.

Para un control ImageMap podemos indicar el comportamiento que tendrán sus seccionescuando pulsamos sobre una de ellas, esto lo conseguiremos mediante la propiedadHotSpotMode. Esta propiedad puede tener 3 valores:

•  PostBack: Al pulsar la sección se enviara la página al servidor.

•  Navigate: Al pulsar el área se re-direcciona al usuario a la pagina que esté asociada a esasección 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 seccionesrectangulares a través de la propiedad RectangleHotSpot, y que al pulsar sobre cualquiera desus secciones va a realizar envíos (PostBack) de la página al servidor. En el manejador delevento se accederá a la propiedad PostBackValue del objeto de la claseImageMapEventArgs, para averiguar qué zona (sección) ha sido pulsada. El valor de cadazona de la imagen se establecerá en la propiedad PostBackValue de cada uno de los objetosRectangleHotSpot que definen las secciones de la imagen.

Page 14: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 14/16

 

CONTROLES WEB AVANZADOS Página: 14 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

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

Algo similar estableceremos para la otra segunda sección (Rectangular) de esta imagen.(Top = 0, Bottom = 400, Left = 200, Right = 400) 

El código para saber en que sección hemos realizado un clic lo detectamos en el eventoImageMap1_Click, gracias a su argumento ImageMapEventArgs que nos brinda laposibilidad de recuperar lo asignado en la propiedad PostBackValue.

ProtectedProtectedProtectedProtected SubSubSubSub ImageMap1_Click(ImageMap1_Click(ImageMap1_Click(ImageMap1_Click(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.Web.UI.WebControls.System.Web.UI.WebControls.System.Web.UI.WebControls.System.Web.UI.WebControls.ImageMapEventArgs)ImageMapEventArgs)ImageMapEventArgs)ImageMapEventArgs) ____HandlesHandlesHandlesHandles ImageMap1.ClickImageMap1.ClickImageMap1.ClickImageMap1.Click

lblMensaje.Text =lblMensaje.Text =lblMensaje.Text =lblMensaje.Text = "Has hecho click sobre: ""Has hecho click sobre: ""Has hecho click sobre: ""Has hecho click sobre: " & e.PostBackValue& e.PostBackValue& e.PostBackValue& e.PostBackValueEndEndEndEnd SubSubSubSub

Page 15: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 15/16

 

CONTROLES WEB AVANZADOS Página: 15 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

11. Table, TableRow y TableCell

Estos controles Web se encuentran muy relacionados entre si, mediante la utilización de todosellos podremos generar tablas en HTML.

El control Web Table se corresponde con una tabla del lenguaje HTML, es decir, permitegenerar tablas del lenguaje HTML. Esta clase posee una colección llamada Rows, quecontiene objetos de la clase TableRow.

En el siguiente ejemplo nuestro formulario Web permitirá indicar el número de filas y decolumnas que queramos mostrar en la tabla.

ProtectedProtectedProtectedProtected SubSubSubSub btnGenerar_Click(btnGenerar_Click(btnGenerar_Click(btnGenerar_Click(ByValByValByValByVal sendersendersendersender AsAsAsAs ObjectObjectObjectObject,,,, ____ByValByValByValByVal eeee AsAsAsAs System.EventArgs)System.EventArgs)System.EventArgs)System.EventArgs) HandlesHandlesHandlesHandles btnGenerar.ClickbtnGenerar.ClickbtnGenerar.ClickbtnGenerar.Click

DimDimDimDim nfilas, nnfilas, nnfilas, nnfilas, ncolscolscolscols AsAsAsAs ByteByteByteBytenfilas = Convert.ToByte(txtnFilas.Text)nfilas = Convert.ToByte(txtnFilas.Text)nfilas = Convert.ToByte(txtnFilas.Text)nfilas = Convert.ToByte(txtnFilas.Text)ncols =ncols =ncols =ncols = CByteCByteCByteCByte(txtnCols.Text)(txtnCols.Text)(txtnCols.Text)(txtnCols.Text)

ForForForFor FFFF AsAsAsAs ByteByteByteByte = 1= 1= 1= 1 ToToToTo nfilasnfilasnfilasnfilasDimDimDimDim filafilafilafila AsAsAsAs NewNewNewNew TableRowTableRowTableRowTableRowForForForFor CCCC AsAsAsAs ByteByteByteByte = 1= 1= 1= 1 ToToToTo ncolsncolsncolsncols

DimDimDimDim colcolcolcol AsAsAsAs NewNewNewNew TableCellTableCellTableCellTableCellcol.Text =col.Text =col.Text =col.Text = "[""[""[""[" &&&& F &F &F &F & ","","",""," & C && C && C && C & "]""]""]""]"

fila.Cells.Add(col)fila.Cells.Add(col)fila.Cells.Add(col)fila.Cells.Add(col)NextNextNextNext

Table1.Rows.Add(fila)Table1.Rows.Add(fila)Table1.Rows.Add(fila)Table1.Rows.Add(fila)NextNextNextNext

EndEndEndEnd SubSubSubSub 

Como podemos ver en el ejemplo se utilizan objetos de la clase TableRow y TableCell paracrear las filas y columnas de la tabla. Para añadir una columna se debe añadir un objetoTableCell a la colección Cells del objeto TableRow correspondiente, y para añadir una fila seañade un objeto TableRow a la colección Rows del objeto de la clase Table.

Page 16: 02-Controles Avanzados ASP Net 3.5

5/6/2018 02-Controles Avanzados ASP Net 3.5 - slidepdf.com

http://slidepdf.com/reader/full/02-controles-avanzados-asp-net-35 16/16

 

CONTROLES WEB AVANZADOS Página: 16 / 16

 ____________________________________________________________________________ Lenguaje de Programación IV Profesores: Carlos García V. y Julio C. Liñán R.

En este ejemplo se ha utilizado la propiedad GridLines del control Table para mostrar laslíneas de la tabla, tanto las horizontales como las verticales, para ello se le ha asignado el valorBoth.