PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 1

1
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
Controles de AjaxControlToolKit 4 VS2010
Parte 02

1.- El archivo: AjaxControlToolkit.dll, debe ser referenciado al sitio web o bien colocado en
la carpeta Bin. Nosotros realizaremos lo primero, para lo cual primero copiaremos este
archivo al sitio web.
2.- En la vista diseo de un formulario, crearemos sobre el cuadro de herramientas un
nuevo Tab (Nueva Ficha) con el nombre: AjaxControlToolkit, luego dentro del tab (Ficha)
recientemente creado clic derecho y elegimos del men contextual la opcin:
ChooseItems (elegir elementos), navegamos y nos situamos sobre el archivo
AjaxControlToolkit.dll y aceptamos.


PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 2

2
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
DropShadow
El DropShadow extiende al control Panel con dos caractersticas muy interesantes:
- Aade una sombra, permitindonos definir tanto su profundidad como su oscuridad.
- Crea un efecto de redondeado del Panel.

Propiedades
TargetControlID: ID del Panel sobre el que aplicaremos los efectos.
Width: profundidad en pixels de la sombra. Es un parmetro opcional que por defecto
vale 5.
Opacity: valor decimal en tre 0 y 1 que define la opacidad de la sombra, donde el 0
corresponde a transparencia total y 1.0 a completamente opaco. Tambin es opcional y su
valor por defecto es 0.5.
Rounded: Si queremos un efecto de redondeado lo pondremos a true, sino, vale con
ponerlo a false.

1.- DropShadow Extender

Agregamos un formulario Web con el nombre: Frm_ingreso_DropShadow
Agregamos un control Script Manager
Verificar o escribir sino estuviera en la vista HTML del formulario:
<%@Registerassembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"tagprefix="cc1"%>
Puede que tagprefix sea asp, el cual no es ningn problema.
Agregamos luego un control Panel al cual le damos un color de fondo por ejemplo:
BackColor="#FFFF66"Width="400px"
HorizontalAlign="Center"
Luego dentro del panel agregamos una Tabla HTML (Men Principal) de 4 filas por
2 columnas.
Combinamos la primera fila y escribimos BIENVENIDO AL SISTEMA
En la primera celda de la segunda fila escribiremos: Usuario y en la tercera fila
Clave, en las celdas contiguas adicionaremos un control TextBox en cada una de
ellas con los nombres: txtusuario y txtclave.
En la primera celda de la ltima fila adicionamos un linkbutton con el texto:
Aceptar, mientras que en la celda contigua un control HTML input button con el
Value: Cerrar.
Al hacer doble clic en este botn HTML escribiremos:


PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 3

3
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
function Button1_onclick()
{
if (confirm('Estas seguro de Salir'))
{
window.close();
}
}

Ahora debemos enlazar el control DropShadow con el control Panel1, para esto
nos situamos sobre el control Panel1 y sobre su Smart Tag elegimos Add Extender
seleccionando al control DropShadow.
Luego en sus propiedades de Panel1_DropShadowExtender, modificaremos a:

Rounded="True"

Una imagen de como quedara nuestro formulario seria:



Y al ejecutar nuestro formulario:









PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 4

4
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
Colocaremos un simple cdigo en el linkbutton Aceptar para poder ingresar:
Ojo: No olvide referenciar a la librera de .Net System.Windows.Forms e importarla en la
lista de libreras del formulario.
Protected void lnkAceptar_Click(object sender, EventArgs e)
{
if ((txtusuario.Text.ToUpper() == "IDAT") &&
(txtclave.Text == "2013PERU"))
MessageBox.Show("Bienvenido", "Aviso",
MessageBoxButtons.OK, MessageBoxIcon.Exclamation);
else
{
MessageBox.Show("Error, Usuario y/o Clave Incorrecta", "Aviso",
MessageBoxButtons.OK, MessageBoxIcon.Error);
txtusuario.Focus();
}
}


2.-PasswordStrength Extender

Ahora en nuestro formulario seleccionaremos el Textbox txtclave y en su Smart
Tag elegiremos Add Extender, eligiendo PasswordStrength



PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 5

5
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
Y en la propiedad txtclave_PasswordStrength estableceremos las siguientes
propiedades.



Finalmente en la propiedad TextMode estableceremos el valor de Password, al
ejecutar nuestra aplicacin veramos:







PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 6

6
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
3.-CollapsivePanel Extender

Agregamos un Nuevo formulario con el nombre Frm_Nuevo_Cliente.aspx
Adicionaremos al sitio web la carpeta imgenes la cual contiene 2 archivos MAS.jpg y
MENOS.jpg
Dibujaremos una tabla de 2 filas por 1 columna, en la primera fila colocaremos nuestro
control ScriptManager, en la segunda fila nuestro control UpdatePanel
Dentro del UpdatePanel dibujaremos tambin una tabla de 2 filas por 1 columna, en cada
fila colocaremos 1 control Panel.
Dentro de Panel1, colocaremos un Label y un control Image.
Dentro de Panel2 dibujaremos una tercera tabla de 4 filas por 2 columnas:

Control ID Text
TextBox txtcodigo Codigo
TextBox txtnombre Nombre
TextBox txtpais Pais
LinkButton lnkinsertar Insertar

Luego en este Panel2 haremos clic en su Smart Tag y elegiremos Add Extender eligiendo
CollapsivePanel y despus buscaremos en su propiedad Panel2_CollapsivePanelExtender
y estableceremos en las siguientes propiedades los valores que aqu se indican:

<asp:CollapsiblePanelExtender
ID="Panel2_CollapsiblePanelExtender"
runat="server"
CollapseControlID="Panel1"
Collapsed="True"
CollapsedImage="~/Imagenes/MAS.bmp"
CollapsedText="MostrarDatos"
Enabled="True"
ExpandControlID="Panel1"
ExpandedImage="~/Imagenes/MENOS.bmp"
ExpandedText="OcultarDatos"
ImageControlID="Image1"
SuppressPostBack="True"
TargetControlID="Panel2"
TextLabelID="Label1">
</asp:CollapsiblePanelExtender>






PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 7

7
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
Asimismo adicionaremos una hoja de estilo llamada Estilos1.css la cual contendr lo
siguiente:

.cssPanelCabecera
{
font-weight: bold; font-size: x-large;
width: 600px; color: lavender;
font-family: Calibri;
background-color: royalblue;
font-variant: small-caps; cursor: pointer;
padding: 3px;
}

.cssPanelDetalle
{
width: 600px; font-family: Calibri;
background-color: lavender; overflow: hidden;
height: 0px;
}

El Panel1 est asociado con la clase cssPanelCabecera por lo que buscaremos su propiedad
CssClass y lo estableceremos, lo mismo haremos con el Panel2 el cual se asocia con
cssPanelDetalle en la propiedad CssClass.

Por ultimo Panel2 comienza con el valor visible en false.







Este es el Panel 1, el cual
tiene una etiqueta y 1
imagen
Este es el Panel 2 el cual tiene
una tabla html (4 x 2), 3
textbox y 1 linkbutton.

PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 8

8
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
Al ejecutar el formulario podemos visualizar:







Finalmente seleccionaremos el LinkButton lnkgrabar y en su Smart Tag escogeremos Add
Extender y elegiremos: ConfirmButton y en su propiedad lnkgrabar_ConfirmButtonExtender
estableceremos el texto que contendr nuestra ventana de confirmacin en la propiedad
ConfirmText colocndole el valor: Seguro de Grabar?



El cdigo del linkbutton lnkgrabar seria como:

protected void lnkgrabar_Click(object sender, EventArgs e)
{
db.ADD_CLIENTE(txtcodigo.Text, txtnombre.Text, txtpais.Text);
Response.Redirect("Frm_Nuevo_Cliente.aspx");
}


Al hacer clic aqu mostraremos el panel2 que
sirve para grabar un Nuevo cliente.

PROFESOR: LIAN RODRIGUEZ, Julio Cesar Pgina 9

9
Controles de AjaxControl ToolKit 4 VS2010 Parte 02
Ojo: Aqu hemos configurado un DataContext BDNEPTUNO.dbml (LINQ To SQL Class) hacia la base
de datos Neptuno el cual tiene 4 procedimientos almacenados:
CREATE PROC LISTAR_PAISES
AS
SELECT DISTINCT Pais FROM Clientes
GO

CREATE PROC ADD_CLIENTE
@COD CHAR(5), @NOM VARCHAR(50), @PAIS VARCHAR(20)
AS
INSERT INTO Clientes(IdCliente, NombreCompaia,
Pais)
VALUES(@COD,@NOM,@PAIS)
GO

CREATE PROC LISTAR_CLIENTES_AUTO
@NOMBRE VARCHAR(20)='%'
AS
SELECT IdCliente, NombreCompaia FROM Clientes
WHERE NombreCompaia LIKE @NOMBRE+'%'
GO

CREATE PROC OBTENER_CODIGO_CLIENTE_AUTO
@NOMBRE VARCHAR(100)
AS
SELECT IdCliente FROM Clientes
WHERE NombreCompaia=@NOMBRE
GO