GUIA DELABORATORIO Nº 04

SEMANA 04

CONTROLES DE ASP.NET
OBJETIVOS
Luego de completar este laboratorio, el estudiante será capaz de:
 Emplear diversos tipos de controles del servidor que ofrece ASP.NET para los Formularios Web
Agregar extensores a los controles estándar
Comprobar la información de las paginas mediante controles de validacion

III CONTROLES WEB

AVANZADOS
1. PANEL
Representa un control que actua como contenedor de otros controles.Util si desea generar controles mediante programacion ,
ocultar o mostrar un grupo de controles .
Ejemplo :Mostramos como podemos utiliza el
Panel, cree un webform, en el cual arrastra 2
controle, un Panel y un checkbox y
codificamos lo siguiente

Mo

<marquee id="ejemplo" direction="up"

scrolldelay="200" >
Este es una marquesina
con texto con DIRECTION se utiliza para <br />
modificar la dirección hacia la que se <br />
dirige el texto. Puede ser left (el valor<br />
por defecto), right, up o down:<br /></marquee>

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)

{
Panel1.Visible = CheckBox1.Checked;
}

Pág # 1 Prof. Gina Huertas Camacho

 2. 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 diseño de nuestro formulario Web, podemos construir de
manera rápida nuestro control 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 este
control agregaremos 4 controles View, c/u con botones de desplazamiento
siguiente anterior

protected void Button1_Click(object sender, EventArgs e)

{
if (MultiView1.ActiveViewIndex >0){
MultiView1.ActiveViewIndex = MultiView1.ActiveViewIndex - 1;
}

}
protected void Button1_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex >0){
MultiView1.ActiveViewIndex = MultiView1.ActiveViewIndex - 1;
}

}
protected void btnsiguiente_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex <MultiView1.Views.Count - 1)
{
MultiView1.ActiveViewIndex = MultiView1.ActiveViewIndex + 1;
}
}

Libre

Pág # 2 Prof. Gina Huertas Camacho

Diseñar el siguiente multiview con 3 controles view que contengan los controles según se muestra en la imagen y con algunos
botones de desplazamiento
Para rellenar los datos básicos personales.
1. En el primer view se llenará de datos personales, tales como nombre y apellido.
2. En un segundo paso se llena y datos de contacto
3. en el tercer paso se muestra el resumen de los datos
introducidos y el botón para el procesamiento de la forma (por
ejemplo guardar en base de datos).
SOLUCION
protected void Button1_Click(object sender,
EventArgs e)
{
MultiView1.ActiveViewIndex = 1;

}
protected void btnsiguiente_Click(object
sender, EventArgs e)
{

MultiView1.ActiveViewIndex = 2;
lblNombre.Text = txtNombre.Text;
lblApellidos.Text = txtApellido.Text;
lblCelular.Text = txtCelular.Text;
lblTeléfono.Text = txtTelefono.Text;
lblEmail.Text = txtEmail.Text;
lblFecha.Text = txtFecha.Text;

}
protected void Button1_Click1(object sender,
EventArgs e)
{

MultiView1.ActiveViewIndex = 1;
}

3 WIZARD
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 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 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 Navegación, 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.

Pág # 3 Prof. Gina Huertas Camacho

 Cabecera, este también es un elemento opcional y su función 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 diseño 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.

1. Agregar 4 steps
2. En la sesión de clase se dará mayor alcance de este control
Elegir evento doble click en FinishButtonClick

En este procedimiento de evento codificar lo siguiente

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)

{
String str;
str = "Sr/Srta " + txtNombre.Text + ", fue registrados en nuestra
bases toda la informacion se enviada a su correo : " + txtCorreo.Text + "
Gracias.";
lblmensaje.Text = str;
}

Pág # 4 Prof. Gina Huertas Camacho

 4. ADROTATOR

PUBLICIDAD.ASPX
Diseña un webform que muetra imágenes desde el
control AdRotator, además agregar un control que
permita seleccionar una fecha y al dar click en el
botón nos muestre la fecha seleccionada .Diseña la
siguiente interfaz

..
Crear el archivo xml
<Advertisements>
<Ad>
<ImageUrl>Microsoft.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Microsoft</AlternateText>
</Ad>
<Ad>
<ImageUrl>IBM.gif</ImageUrl>
<NavigateUrl>http://www.ibm.com</NavigateUrl>
<AlternateText>IBM</AlternateText>
</Ad>
<Ad>
<ImageUrl>SUN.gif</ImageUrl>
<NavigateUrl>http://www.Sun.com</NavigateUrl>
<AlternateText>SUN</AlternateText>
</Ad>
<Ad>
<ImageUrl>cabecera2.gif</ImageUrl>
<NavigateUrl>http://www.sistemasuni.edu.pe</NavigateUrl>
<AlternateText>Ir a Sistemas</AlternateText>
</Ad>
<Ad>
<ImageUrl>cabecer3.gif</ImageUrl>
<NavigateUrl>http://www.elguille.info</NavigateUrl>
<AlternateText>Ir a Guiller</AlternateText>
</Ad>
</Advertisements>
Insertar en su formulario un control ADROTATOR y en la ventana de propiedad Advertisements
seleccione el archivo.xml que creo

CÓDIGO DEL CALENDARIO

Protected Sub CalAviso_SelectionChanged(ByVal sender As Object….)

Pág # 5 Prof. Gina Huertas Camacho

 LblVerFecha.Text = CalAviso.SelectedDate.ToLongDateString
End Sub

5. IMAGEMAP

AGREGAR EN UN WEBFOR UN IMAGEMAP Y MODIFICAR SUS PROPIEDADES

DEFINIR EN HOSTPOTS LAS

SIGUIENTES AREAS

Pág # 6 Prof. Gina Huertas Camacho

Pág # 7 Prof. Gina Huertas Camacho
 CONTROLES
CONTROLESAJAX
AJAX
Objetivo del Curso

Entender y Desarrollar aplicaciones web basadas en .NET Framework 3.5 (ASP.NET )

orientadas a la web mediante la implementación de la multitecnología AJAX.

Ajax Extensions
Las Ajax Extensions o las extensiones de Ajax para ASP.NET, son unos controles de
servidor que nos permite añadir funcionalidades Ajax a nuestras aplicaciones
ASP.NET.
El control más importante de todos los controles que podemos encontrar en las
extensiones Ajax es el control ScriptManager del que hablaremos a continuación.
El control UpdatePanel habilita a la aplicación Web para actualizar una porción de la
página Web ASP.NET sin tener que recargar toda la página Web entera.
Todos los controles de las Ajax Extensions están instalados en ASP.NET 3.5 ó

superior.
El control ScriptManager
El control Script Manager es el control principal del lado del servidor que tiene
relación directa con Ajax y ASP.NET.
Ajax proporciona una comunicación "por debajo" entre el servidor y el navegador
Web (usuario) gestionada a través de código JavaScript. De ahí, que Ajax signifique
Asynchronous JavaScript And XML.
Este código JavaScript se encarga de hacer llamadas a recursos remotos manejando
hábilmente en la interfaz de usuario las respuestas que le devuelve el servidor sin
que el usaurio tenga la impresión de que se está haciendo, algo que ocurre con
frecuencia al refrescar la página Web entera.
El control ScriptManager tiene la misión de generar el código JavaScript necesario
para gestionar las peticiones Ajax con el navegador Web.
Agregando los controles de Ajax Control Toolkit en Visual Studio

Pág # 8 Prof. Gina Huertas Camacho

La primera tarea a llevar a cabo es la de descargar el ensamblado de Ajax Control
Toolkit en nuestro disco duro.Una vez hecho esto, iniciaremos Visual Studio con el
fin de crear un nuevo proyecto de aplicación Web.

Cuando hayamos creado nuestra aplicación inicial, añadiremos una nueva página
Web a nuestro proyecto y acudiremos a la ventana de herramientas y pulsaremos el
botón derecho del ratón con el fin de buscar el ensamblado AjaxControlToolkit.dll
que contendrá un numeroso número de controles de usuario de funcionalidad Ajax.

Al seleccionar el ensamblado, Visual Studio nos mostrará una gran cantidad de

controles listos para ser usados en nuestras aplicaciones Web.

1. Ajax Control Toolkit de Control Acordeón

Descripción
El control Web Accordion te permite ubicar múltiples paneles, de
modo que únicamente uno será visible en cada momento. Dichos
paneles son los AccordionPane, de los que debemos definir la
cabecera (Header) y el contenido (Content). El estado del
Accordion es guardado, de modo que el AccordionPane activo se
mantendrá visible a través de los postbacks.
De todas sus propiedades El control de Acordeón compatible con los siguientes AutoSize modos para adaptarse a
una variedad de diseños de página.
Ninguno - El control de Acordeón crece y se contrae sin restricción. Esto puede causar otros elementos de la página
para desplazarse hacia arriba y hacia abajo con el fin de acomodar el control de acordeón.
Límite - El control de Acordeón nunca se hace más grande que el valor especificado por su altura la propiedad. Esto
hace que el contenido para desplazarse si el contenido es demasiado largo para que se muestre en el espacio
asignado.
Llena - El control de Acordeón es un tamaño fijo, como se especifica en su altura la propiedad. Esto hace que el
contenido a ser ampliado o reducido si el contenido no se ajusta exactamente en el espacio asignado.

Creación de un acordeón simple

Elegir en sus propiedades panes ítems y agregar 3.

Pág # 9 Prof. Gina Huertas Camacho

Luego ir a vista de código y agregar encabezado(header) y contenido(content)
1. Agregar styles
<style type="text/css">
.accordion {
width: 400px;
}

.accordionHeader {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}

.accordionHeaderSelected {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}

.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
1. Insertar el control ajax acordion
2. Asignar los siguientes valores en la ventana de propiedades del accordion

3. En la vista Source agregar los Paneles

<asp:Accordion
ID="Accordion1"
CssClass="accordion"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
height="243px"
runat="server">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server">

Pág # 10 Prof. Gina Huertas Camacho

 <Header>Pane 1</Header>
<Content>
El control Web Accordion te permite ubicar múltiples paneles, de modo que
únicamente uno será visible en cada momento.

</Content>
</asp:AccordionPane>

<asp:AccordionPane ID="AccordionPane2" runat="server">

<Header>Pane 2</Header>
<Content>
Dichos paneles son los AccordionPane, de los que debemos definir la cabecera (Header)
y el contenido (Content).
El estado del Accordion es guardado, de modo que el AccordionPane activo se mantendrá
visible a través de los postbacks.
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header>Pane 3</Header>
<Content>
9 propiedades definen al Accordion
entre ellas
FadeTransitions: en caso de ser true se aplicacará un efecto de fading en
la transición, en caso de ser false la transición se realizará de modo normal.
Es optativo y por defecto vale false. • TransitionDuration: cantidad de milisegundos que
definen la duración de una transición. Se consigue un efecto muy agradeble con transición de unos
200-300 milisegundos.

</Content>
</asp:AccordionPane>
</Panes>

2. Ajax Control Toolkit Animación

La clase AnimationExtender le permite utilizar un marco de animación de gran alcance con las páginas existentes de
una manera fácil, declarativa. Reproduce animaciones cada vez que un evento específico
como OnLoad , OnClick , OnMouseOver o onmouseout se eleva por el control de destino. Puede especificar la
animación se reproduzca de forma declarativa. El marco proporciona animaciones para manejar el movimiento,
cambiar el tamaño, la decoloración, etc

1. INSERTAR UN CONTROL PANEL NOMBRE Message y crear un estilo interno

<style type="text/css">

#Message {
width: 250px;
padding: 10px;
margin-bottom:10px;
}

</style>

2. AGREGAR EL EXTENSOR ANIMATOR AL PANEL nombrarlo

Pág # 11 Prof. Gina Huertas Camacho

 3. INSERTAR UN LINKBUTTON y EN VISTA HTML CREAR LA ANIMACION
<asp:AnimationExtender ID="AnimationExtender1" TargetControlID="lnkYellowFade" runat="server">
<Animations>
<OnClick>
<Sequence>
<Color
AnimationTarget="Message"
Duration="2"
Property="style"
PropertyKey="backgroundColor"
StartValue="#FFFF66"
EndValue="#FFFFFF" />
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>

Sequence El SequenceAnimation ejecuta varias animaciones uno después del otro. También puede repetir la

secuencia de animaciones para un número determinado de iteraciones (que por defecto es una sola iteración, pero
se repetirá para siempre si especifica cero o menos iteraciones)

Ejemplo de animación 02
Muestra un texto que se desplaza hasta el centro y luego desaparece

Crear el style
<style type="text/css">

#Panel1
{
position:absolute;
padding:3px;
background-color: #eeeeee;
border:solid 1px black;
}

</style>

Extender en el panel la siguiente animación

<asp:AnimationExtender ID="Panel1_AnimationExtender" runat="server" Enabled="True"
TargetControlID="Panel1">

<Animations>
<OnLoad>
<Sequence>
<Move

Pág # 12 Prof. Gina Huertas Camacho

 Horizontal="300"
Vertical="300"
Duration="1"
Fps="20" />
<FadeOut
Duration="1"
Fps="20" />
</Sequence>
</OnLoad>
</Animations>

</asp:AnimationExtender>
Ejemplo de animación 03
Texto que aparece o desaparece cuando pasa el mouse

Agregar al panel la siguiente animacion

<asp:AnimationExtender ID="Panel1_AnimationExtender" runat="server" Enabled="True"
TargetControlID="Panel1">
<Animations>
<OnMouseOver>
<FadeOut Duration="2" Fps="20" />
</OnMouseOver>
</Animations>
</asp:AnimationExtender>

Pág # 13 Prof. Gina Huertas Camacho

 3. Ajax Control BallonPopup

< body>
<form id="form1" runat="server">
<div>
ingrese<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
<asp:BalloonPopupExtender
ID="TextBox1_BalloonPopupExtender"
runat="server"
CustomCssUrl="" DynamicServicePath=""
Enabled="True" ExtenderControlID=""
BalloonPopupControlID="Panel1"
Position="BottomRight"
BalloonStyle="Cloud"
BalloonSize="Small"
CustomClassName="oval"
UseShadow="true"
ScrollBars="Auto"
DisplayOnMouseOver="true"
DisplayOnFocus="false"
DisplayOnClick="true"
TargetControlID="TextBox1"></asp:BalloonPopupExtender>
<br />
segundo<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server">
esto se visualizara
</asp:Panel>
<br />
</form>

4. Control PasswordStrength
Descripción
El PasswordStrength es otro extendedor del TextBox. Con él podremos mostrar al usuario el nivel de fortaleza que tiene la
contraseña que está escribiendo, en base a unos parámetros típicos de fortaleza que definiremos nosotros: - Número total de
caracteres. - Exigencia de signos. - Exigencia de combinar mayúsculas y minúsculas. - Exigencia de números. Podemos elegir y
configurar los dos modos que tenemos de mostrar al usuario la fortaleza de su password: - Mediante texto 100% configurable.
- Mediante una barra que se irá rellenando. Además, podemos añadir la opción de “ayuda”, donde explicar al usuario cómo
debe ser su contraseña.
números, el 15% a mayúsculas/minúsculas y el 20% a la cantidad de caracteres no alfanuméricos. • BarBorderCssClass: Clase
CSS del borde de la barra indicadora.

Pág # 14 Prof. Gina Huertas Camacho

Ejemplo

Pág # 15 Prof. Gina Huertas Camacho

 5. Control Calendar

Calendario es un extensor ASP.NET AJAX que se puede conectar a cualquier control ASP.NET TextBox. Proporciona
funcionalidad con formato de fecha y personalizable interfaz de usuario en un control emergente. Puede interactuar
con el calendario haciendo clic en un día para establecer la fecha, o para ajustar la fecha actual.
Calendario Propiedades
El calendario asociado a un botón se ha inicializado con este código. :

<AjaxToolkit: Calendario runat = "server"

TargetControlID = "fecha1"

CssClass = "ClassName"

Formato = "MMMM d, yyyy"

PopupButtonID = "Image1" />

 TargetControlID - El ID de TextBox para extender el calendario.

 CssClass - Nombre de la clase CSS para estilizar el calendario. Vea la sección Calendario Tematización para más
información.
 Formato - Cadena de formato utilizado para mostrar la fecha seleccionada.
 PopupButtonID - El ID de un control para mostrar el calendario emergente cuando se hace clic. Si este valor no
está establecido, el calendario se abrirá cuando el cuadro de texto recibe el foco.
 PopupPosition - Indica que el calendario emergente debe aparecer en la BottomLeft (predeterminado),
bottomRight, topLeft, TopRight, izquierda o derecha del cuadro de texto.
 SelectedDate - Indica la fecha en que se inicia el extensor Calendario con.
 StartDate - Indica la fecha de inicio para el rango que está disponible para la selección.
 EndDate - Indica la fecha final para el rango de la disponible para la selección.
Ejemplo

Pág # 16 Prof. Gina Huertas Camacho

 6. DropShadowExtender

DropShadow es un extensor que aplica una sombra a un control Panel ASP.NET. El extensor permite especificar
el ancho de la sombra, la opacidad que es, y si la sombra deben tener las esquinas redondeadas. Para las
páginas que permiten al usuario mover o cambiar el tamaño del panel, el extensor tiene un modo que cambiará
el tamaño y la posición de la sombra para que coincida con el panel blanco en tiempo de ejecución.
ejemplos

<asp:DropShadowExtender
ID="Panel1_DropShadowExtender"
Rounded="true"
Radius="30" Width="15"
runat="server"
Enabled="True"
TargetControlID="Panel1">
</asp:DropShadowExtender>

Propiedades

7.FilteredTextBox
FilteredTextBox es un extensor que impide
que un usuario escriba caracteres no válidos
en un cuadro de texto. Tenga en cuenta que,
dado que este efecto puede ser evitado
mediante la desactivación de JavaScript, se
debe utilizar este extensor para su

Pág # 17 Prof. Gina Huertas Camacho

conveniencia para sus usuarios, pero no hay que esperar que los datos que se envían al servidor consiste en "válidas" chars
solamente.

8. ValidatorCallout
ValidatorCallout es un extensor ASP.NET AJAX que mejora la funcionalidad de ASP.NET validadores existentes. Para utilizar este
control, agregue un campo de entrada y un control de validación como lo haría normalmente. A continuación, añadir el
ValidatorCallout y establezca su propiedad TargetControlID hacer referencia al control validador.

Pág # 18 Prof. Gina Huertas Camacho