Manual 2014-I 05 Desarrollo para Entorno Web (0778)

DESARROLLO
PARA ENTORNO
WEB
2
CARRERAS PROFESIONALES CIBERTEC

LENGUAJE DE PROGRAMACIN III 3
NDICE Pgina
Presentacin 5
Red de contenidos 6
Unidad de aprendizaje 1
1.1 Tema 1 : Introduccin ASP.Net 4.0 8
1.2 Tema 2 : Diseo usando Master Pages y Administacin de Estados 36
1.3 Tema 3 : Creacin de Controles de Usuario 58
2.1 Tema 4 : Acceso de Datos con ADO.Net 76
2.2 Tema 5 : Arquitectura N capas 106
2.3 Tema 6 : Desarrollo de Carro de Compras 124
2.4 Tema 7 : Manejo de Servicios y WFC 139
2.5 Tema 8 : Manejo de la Seguridad en ASP.Net 163
3.1 Tema 9 : AJAX en ASP.Net Parte I 189
3.2 Tema 10 : AJAX en ASP.Net Parte II 205
3.3 Tema 11 : Manejo de Imgenes en ASP.Net y AJAX 229
4.1 Tema 12 : ASP.Net MVC (Modelo Vista Controlador) 247
CIBERTEC CARRERAS PROFESIONALES

4

PRESENTACIN
Visual Studio 2010 y su plataforma .NET FrameWork 4.0 permite implementar desarrollos
de software de manera rpida y robusta. ASP .NET admite crear aplicaciones en tiempo
mnimo bajo una plataforma de libreras del .NET Framework. De esta manera, la
aplicacin puede desarrollarse para entornos web y, luego, tener la posibilidad de emplear
cualquier dispositivo como cliente (telfonos, palm, etc.) con muy poca modificacin, sino
es nula.
El curso de Desarrollo para entorno web pertenece a la Escuela de Tecnologa de

Informacin y se dicta en las carreras de Tecnologa de la institucin. Este curso brinda un
conjunto de herramientas de programacin para trabajar en aplicaciones web, en funcin
al diseo de pginas web y con un origen de datos que permita al alumno realizar, en
forma eficiente, operaciones de consulta y actualizacin de datos bajo el entorno web.
El manual para este curso ha sido diseado bajo la modalidad de unidades de aprendizaje,
las que desarrollamos durante semanas determinadas. En cada una de ellas, el alumno
hallar los logros que se deber alcanzar al final de la unidad; el tema tratado, el cual ser
ampliamente desarrollado; y los contenidos que debe desarrollar. Por ltimo, encontrar
las actividades y trabajos prcticos que deber desarrollar en cada sesin, los que le
permitir reforzar lo aprendido en la clase.
El curso es eminentemente prctico: consiste en diseo y programacin de aplicaciones

web con base de datos utilizando ADO .NET. La primera parte de este manual ensea a
familiarizarse con el entorno de desarrollo de una aplicacin web: diseo de una pgina,
uso de temas, master page; manejo de controles del lado del cliente, del servidor, manejo
de estado de la pgina, acceso a datos y controles enlazados a los datos que permiten
realizar operaciones de consulta y actualizacin mediante ejemplos didcticos. Luego, se
desarrollar el tema de Seguridad, definiendo los miembros, roles y perfiles dentro de la
aplicacin. A continuacin, se va a implementar a la aplicacin web la tecnologa AJAX y el
desarrollo de una aplicacin mvil con acceso a datos.
Este manual reviste importancia para una capacitacin en conocimientos generales en el

manejo de aplicaciones web, utilizando la tecnologa de punta que se implementa
actualmente en el mercado.

6
REDDECONTENIDOS
Desarrollo para Entorno Web
Diseo de Acceso a Manejo de ASP.Net

un sitio web datos y AJAX e MVC
seguridad imgenes
Introduccin Diseo Control Acceso Manejo Manejo Manejo AJAX

a ASP.Net con es de a datos de de de MVC
4.0 Master usuario con WebSe control imgene (Modelo
Pages ADO.N rvices es de sy Vista
y et y y WCF AJAX Proyect Controlad
manejo manejo os de or)
de de AJAX
estado capas
Sitio web

UNIDAD DE
APRENDIZAJE
INTRODUCCIN A ASP.NET 4.0

LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase y los controles
que proporciona el Framework 4.0, construyen el diseo de pginas web para personalizar el
diseo y apariencia de una pgina, adems de validar el ingreso de datos por parte de los
usuarios. Tambin, navegan entre distintas pginas del sitio web enviando informacin entre
ellas.
TEMARIO
Tipos de web site en Visual Studio 2010

Desarrollo de un sitio web
Manejo de controles de validacin: RequiredFieldValidator, CompareValidator,
RegularExpressionValidator, CustomValidator, RangeValidator.
Tcnicas de navegacin entre pginas: Clase Response, Server y QueryString.
ACTIVIDADES PROPUESTAS
Los alumnos definirn el tipo de aplicacin web.

Los alumnos disearn una aplicacin Web utilizando controles de servidor.
Los alumnos programarn una pgina Web en el lado del cliente y del servidor.
Los alumnos usarn los controles de validacin para validar el ingreso de datos por
parte del usuario.
Los alumnos manejarn el redireccionamiento entre las pgina ASP.NET.
Los alumnos manejarn los errores de una aplicacin web.

8
1. HISTORIA DE ASP.NET
La primera versin de ASP.Net, la 1.0, apareci en el mercado en enero del 2002, junto con la
edicin inicial de Visual Studio para la plataforma .Net. Antes de este lanzamiento oficial, hubo
diversas Betas en las que an la tecnologa llevaba el nombre de ASP+. Estas estuvieron
disponibles para experimentar desde mediados del 2000, por lo que, en realidad, la plataforma
tiene mucho ms recorrido del que se desprende de las fechas oficiales.
La idea era sustituir al ASP 3.0 clsico. Por eso, le dejaron un nombre parecido, aunque no
tenga nada que ver, y ofrecer un entorno de desarrollo para el servidor con grandes ventajas
sobre lo existente del mercado. Un punto importante era tratar de brindar los mismos
paradigmas de desarrollo que las tradicionales aplicaciones de escritorio, pero aplicadas a la
web. Esto implicaba sobre todo orientacin a eventos y a objetos, uso de lenguajes
compilados, independencia automtica del navegador y productividad, mucha productividad.
Con ASP.Net, se empezaron a borrar los lmites entre cliente y servidor en el desarrollo web.
2. TIPOS DE SITIOS WEB EN VISUAL STUDIO 2010

Puede utilizar Visual Studio para crear y trabajar con sitios Web ASP.NET (que se conocen
tambin como aplicaciones web) en numerosas configuraciones: sitios de IIS locales, sitios de
sistemas de archivos, sitios implementados de Protocolo de transferencia de archivos (FTP) y
sitios remotos. Este modelo permite, tambin, el uso de diversos dispositivos de tercera
generacin empleados por los usuarios para hacer frente a las necesidades presentes y
futuras.
2.1. Sitios web de IIS locales

Se ejecutan utilizando una copia de IIS instalada en el equipo. Cuando se crea un sitio web de
IIS local, las pginas y carpetas del sitio se almacenan en una carpeta situada en la carpeta de
IIS predeterminada, que se encuentra en [drive]:\Inetpub\wwwroot. Visual Studio crea,
tambin, la configuracin de IIS adecuada para que IIS reconozca el sitio web como una
aplicacin.

Ventajas:
El sitio es accesible desde otros equipos.
Puede probar con caractersticas de IIS, como autenticacin basada en HTTP, grupos de
aplicaciones y filtros ISAPI.
Inconvenientes:
Debe tener derechos administrativos para crear o depurar un sitio web de IIS.
Slo un usuario del equipo puede depurar un sitio web de IIS a la vez.
2.2. Sitios Web del sistema de archivos

En un sitio Web del sistema de archivos, puede crear y editar archivos de la carpeta que desee,
ya se encuentren en el equipo local o en una carpeta de otro equipo al que tiene acceso a
travs de un recurso compartido de red. No se requiere que ejecute IIS en su equipo.
Ventajas:
Slo se puede tener acceso al sitio desde el equipo local.
No necesita tener IIS instalado en el equipo.
No necesita derechos administrativos para crear o depurar un sitio web del sistema de
archivos local.
Si el equipo se configura para permitir conexiones de escritorios remotos, varios usuarios
pueden crear y depurar al mismo tiempo los sitios web del sistema de archivos locales.
Inconvenientes:
No puede probar un sitio web del sistema de archivos con caractersticas de IIS, como
autenticacin basada en HTTP, grupos de aplicaciones y filtros ISAPI.
2.3. Sitios web implementados en FTP

Visual Studio permite abrir y editar sitios web que estn disponibles en un servidor FTP. Puede
conectarse con cualquier servidor FTP en el que tenga permisos de lectura/escritura. Si el
servidor FTP est configurado con ASP.NET y una raz virtual de IIS seala al directorio FTP,
puede ejecutar tambin las pginas desde el servidor para probarlas.
Ventajas:
Puede probar el sitio web implementado por FTP en el servidor donde se va a implementar.
Inconvenientes:
No tiene copias locales de los archivos del sitio web implementado por FTP, a menos que los
copie.
No puede crear un sitio web implementado por FTP, sino que slo puede abrir uno.
2.4. Sitios web remotos

Un sitio web remoto es un sitio que utiliza IIS, pero est en otro equipo al que puede tener
acceso a travs de una red de rea local. El equipo remoto debe tener IIS instalado y estar
configurado con extensiones de servidor de FrontPage 2002 de Microsoft. Cuando se crea un
sitio web remoto, las pginas y carpetas del sitio se almacenan en la carpeta de IIS
predeterminada del equipo remoto que se encuentra en [drive]:\Inetpub\wwwroot. Cuando
ejecuta las pginas, stas se proporcionan utilizando IIS en el equipo remoto.
Ventajas:
Puede probar el sitio web en el servidor donde se va a implementar.
Varios desarrolladores pueden trabajar al mismo tiempo en el mismo sitio web remoto.
Inconvenientes:
La configuracin para depurar un sitio web remoto puede ser compleja.
Slo un desarrollador a la vez puede depurar el sitio web remoto. Se suspenden todas las
dems solicitudes, mientras el desarrollador est recorriendo el cdigo.

10
3. CREACIN DE UN NUEVO SITIO WEB
Inicio de sitio web:
Seleccione la plantilla sitio web ASP.NET

Veamos el contenido del nuevo sitio web:
Vistas disponibles
Vista de diseo
Es la vista mediante la cual el usuario puede disear sus WebForms. Se conoce tambin como
WYSIWYG, (What you see is what you get), lo que ves es lo que obtienes. En ella, se arrastran
los controles, se le aplican algunas propiedades y se da el acabado final en cuanto al diseo de
las pginas web.
Vista de cdigo
Esta es la vista en la cual conforme el usuario crea el diseo se puede ver todo el cdigo en
HTML que se va generando. Incluso, las personas que dominan el lenguaje HTML pueden
incluir sus cdigos en esta vista. Para aquellos que no conocen HTML no ser problema, ya que
desde la vista de diseo, se genera todo el cdigo. La sugerencia es que se conozca, por lo

12
menos, lo bsico de HTML para que pueda mejorar la presentacin de sus pginas; adems, de
agregarle cierta funcionalidad del lado del cliente; por ejemplo, utilizando Javascript.
Vista de dividir
Esta es solo la combinacin de la vista de diseo con la de cdigo para que el usuario pueda
disear y al mismo tiempo ver el cdigo que se va generando.

Explorando nuestro sitio web:
Como se puede apreciar, se han generado varias carpetas y archivos dentro de nuestro sitio
web. Pasaremos a explicar cada una de ellas:
1. Account.- En esta carpeta, se alojan 4 WebForms cuya finalidad es manejar la
seguridad del sitio web. A continuacin, se mostrarn los siguientes WebForms:
a. ChangePassword.aspx.- Diseado para que el usuario que ingrese al sitio web
tenga la facilidad de poder cambiar su password en cualquier momento.
b. ChangePasswordSuccess.aspx.- Diseado para que el usuario pueda ver la
confirmacin de que su password fue cambiado con xito.
c. Login.aspx.- Diseado para que el usuario acceda al sitio web al proveer su
usuario y password para poder ingresar a algunas opciones de nuestro sitio
web que son solamente para aquellos que se hayan registrado.
d. Register.aspx.- Diseado para que se puedan registrar nuevos usuarios.

14
2. Scripts.- En esta carpeta, se encuentran algunos cdigos en JavaScript para aumentar

ciertas funcionalidades a nuestro sitio web que iremos viendo ms adelante.
3. Styles.- En esta carpeta, se encuentran las famosas hojas de estilo en cascada (css)
para poder crear plantillas de diseos y poder aplicarlas en diferentes objetos o
controles en los distintos WebForms de nuestro sitio web.
4. About.aspx.- Este es un WebForm que muestra informacin de nuestro sitio web,
como informacin de contacto, sedes principales, caractersticas de mi sitio web, entre
otras.
5. Default.aspx.- Este es el WebForm principal de nuestro sitio web. Es conocido tambin
como el WebForm Inicio o Home.
6. Global.asax.- Este archivo es conocido como Clase de aplicacin Global y entre las
principales utilidades que tiene es el poder definir objetos de sesin y objetos de
aplicacin.
7. Site.master.- Este archivo es lo que nosotros llamamos una Pgina Maestra o en
ingls Master Page. Su objetivo es crear un diseo que, luego, se pueda heredar de
distintos WebForms. La idea de usarlo es uniformizar y mantener un contenido
coherente en los WebForms de un sitio web.
8. Web.config.- Es el archivo de configuracin de nuestro sitio web. En ese archivo, se
puede definir varias secciones que se utilizarn luego en el Sitio Web, por mencionar
una de esas secciones es la famosa ConnectionStrings, en la cual se pueden definir
distintas cadenas de conexin para diferentes orgenes de datos.
4. Controles de Validacin

4.1. RequiredFieldValidator
Este control de validacin es el ms fcil de entender. Asegura que el usuario no omita un

dato, es decir, que no deje en blanco un campo obligatorio; si es as, el control despliega un
mensaje de error.
Propiedades:
ControlToValidate: indica a que control se le asignar el control de validacin.
ErrorMessage: indica el mensaje de error que se mostrar en el caso que no se cumpla la regla
de validacin.
Ejemplo:
En el siguiente WebForm, debe ingresar su nombre y apellido como campos obligatorios; si no
los ingresa, se mostrarn los mensajes de Errory si se llenan los datos, mostrar el xito de la
validacin.
4.2. CompareValidator
El control de validacin de comparacin acepta dos controles como entrada para comparar el
valor de cada uno. Si los dos controles no satisfacen la condicin que se especific, el control
CompareValidator despliega un mensaje de error. Este control de validacin tambin permite
comparar el valor de un control contra un valor fijo.
Propiedades:
de validacin.
ControlToCompare: es el nombre del segundo control o control con el cual se va a comparar el
contenido del control que se est validando.
ValueToCompare: es el valor contra el cual se va a comparar el contenido del control que se
est validando. Se usa ControlToCompare si la comparacin es contra el contenido de otro
control o ValueToCompare si la comparacin es contra un valor esttico, pero no se usan
ambas propiedades solo se escoge una de las dos.
Operator: define el operador que se usar en la comparacin.

16
Type: define el tipo de dato de los datos que se van a comparar.
Ejemplo:
En el siguiente WebForm, debe ingresar su email y luego confirmarlo. Si estos no son iguales,
se mostrar el mensaje de Error. Si coinciden, se mostrar el xito de la validacin.

4.3. RangeValidator
El control de validacin de rango se asegura que la entrada en un dato se encuentre dentro de

un rango de valores.
Propiedades:
de validacin.
MinimumValue: establece el valor inicial o mnimo del rango de valores.
MaximumValue: establece el valor final o mximo del rango de valores.
Type: define el tipo de dato que se aceptar dentro del rango de valores. Son los mismos tipos
de datos que se ven en el CompareValidator.
Ejemplo:
En el siguiente WebForm, debe ingresar una nota entre los valores de 0 a 20 y la edad entre 18
y 65. En cualquiera de los casos, si el usuario ingresa un valor que est fuera del rango de
valores, se mostrarn los mensajes de Error. Si los dos datos que se ingresan estn dentro de
los rangos de valores, se mostrar el xito de la validacin.
4.4. CustomValidator
Este control permite escribir cdigo para crear la expresin de validacin, es decir, la lgica de
validacin puede ser personalizada para verificar la entrada del usuario contra una variable,
formula o entrada de una segunda fuente. El control de validacin CustomValidator es usado, a
menudo, para situaciones, tal y como la verificacin de un password, en el cual la entrada del
usuario es comparada con un cdigo de seguridad, que est almacenado en la base de datos.
El control CustomValidator valida del lado del servidor y puede validar del lado del cliente si el
navegador soporta validacin. En los otros controles de validacin ASP.net, crea los scripts de
validacin del lado del cliente y del servidor, en este control el programador debe escribir
ambos scripts.
Propiedades:
de validacin.

18
ClientValidationFunction: es el script que se requiere que ejecute del lado del cliente.
Ejemplo:
Esta vez se realizar un ejemplo donde el dato que proporcione el usuario debe ser un nmero
divisible entre 2. As, entonces, se obtendr un TextBox llamado txtNumero y un Button. Para
validar el nmero, se har primero la validacin del lado del cliente y, luego, del lado del
servidor para comprobar ambas validaciones.
Colocar el siguiente cdigo en la Vista de cdigo en HTML:

<script language = "Jscript" type="text/jscript">
function MiFuncionCliente(s, args) {
alert("Estoy Corriendo del lado del Cliente! ");
var intValue = args.Value;
if (intValue % 2 == 0) {
args.IsValid = true;
}
else {
args.IsValid = false;
}
}
</script>
Al ejecutar, mostrar lo siguiente:

Del lado del Servidor sera el siguiente cdigo:
Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As

System.Web.UI.WebControls.ServerValidateEventArgs) Handles
CustomValidator1.ServerValidate
Dim intValue As Integer = Convert.ToInt32(args.Value)
If (intValue Mod 2 = 0) Then
args.IsValid = True
Else
args.IsValid = False
End If
End Sub
Hay que observar que al haberse ejecutado desde el lado del servidor muestra el mensaje de
validacin, pero muestra el mensaje de Datos enviados con xito. Por qu? La respuesta es
que todas las validaciones anteriores eran del lado del cliente, y se ejecutaban en el cliente sin
nunca llegar al servidor a menos que la validacin haya sido correcta recin llegaba al servidor.
En este caso, como la validacin fue desde el servidor, primero llega a ste y despus hace la
validacin. Habra que ver una forma de validar que el mensaje de xito no se muestre.
4.5. RegularExpressionValidator
Este control de validacin verifica que la entrada cumpla con un patrn que ha sido definido
por una expresin regular. Este control permite verificar secuencias de caracteres predecibles,
tales como direcciones de correo electrnico, direcciones, nmeros de telfonos y cdigos
postales. Visual Studio.net proporciona patrones predefinidos para expresiones comunes, tales
como nmeros telefnicos.

20
Este control de validacin compara el patrn de caracteres, dgitos y smbolos, introducidos

por el usuario con uno o ms patrones en el control.
Propiedades:
de validacin.
ValidationExpression: sirve para ingresar la expresin regular o patrn, tambin, existen
patrones ya definidos como las siguientes:
Construccin de una expresin regular.

Para construir una expresin regular, se debe de utilizar un conjunto de caracteres que son
mostrados a continuacin:
Carcter definicin
a Debe utilizar la letra a en minscula, cualquier letra que no precedida por una diagonal
invertida \, o parte de un rango, es un requerimiento para ese valor literal
1 Debe utilizar el nmero 1, cualquier nmero que no es precedido por una diagonal
invertida \, o parte de un rango, es un requerimiento para ese valor literal
? 0 un elemento
* 0 a muchos elementos
+ 1 N elementos (al menos 1)
[0-n] Rango de valor entero de 0 a N
{n} Longitud debe ser n caracteres
| Separacin de mltiples patrones vlidos
\ El siguiente carcter debe ser un carcter comando
\w Debe tener un carcter
\d Debe tener un nmero
\. Debe tener un punto
Con estos caracteres, se puede empezar a elaborar los patrones, como ejemplo sencillo se
puede hacer la validacin de un nmero de telfono con cdigo de rea que est entre
parntesis el cdigo de rea es de tres dgitos, puede usarse despus un guion y despus debe
introducirse un nmero telefnico de 7 dgitos.
La expresin regular quedara de la siguiente manera:

$\d{3}$-?(\d{7})
Carcter definicin
\( Indica que se debe de usar un parntesis que abre

\d{3} Indica que debe de introducirse un nmero entero de tres dgitos

-? Indica que puede usarse un guion
\d{7} Indica que debe introducirse un nmero de 7dgitos
Veamos los siguientes ejemplos de entrada:
Entrada Descripcin
(12)1234567 Es incorrecto, porque el cdigo de rea solo tiene 2 elementos
(123)123456 Es incorrecto, porque el nmero telefnico tiene 6 elementos
(123)-123456 Es incorrecto, porque el nmero telefnico tiene 6 elementos
(123)1234567 Es correcto, porque no es necesario utilizar el guion
(123)-1234567 Es correcto, porque se puede utilizar el guion
Ejemplo:
Esta vez se realizar un ejemplo donde el dato que proporcione el usuario debe ser su email. Si
el email no tiene el formato correcto de una direccin de correo electrnico, mostrar el
mensaje de error. En caso que el email tenga el formato correcto, mostrar el xito de la
validacin.
4.6. ValidationSummary
Este control muestra un resumen de todos los errores de validacin que han aparecido en un
formulario; presenta el texto que ha sido introducido en la propiedad ErrorMessage de los
controles de validacin.
Estos mensajes los puede desplegar en forma de frase o en forma de lista con o sin vietas;
esto dependiendo del valor en el que se encuentre la propiedad DisplayMode del control
ValidationSummary

22
5. Tcnicas de Navegacin entre Web Forms en ASP .Net
5.1. Introduccin
Un aspecto importante en la construccin de aplicaciones web es la navegacin entre
pginas y el uso de links, que en conjunto unen las pginas de nuestra aplicacin haciendo
de sta un todo. Si esto no fuera as, se tendran pginas aisladas que no se podran
comunicar entre s. En este artculo, se revisarn distintas tcnicas de navegacin, tanto
con cdigo a nivel del servidor como del cliente. Conocer estas tcnicas ser de gran
utilidad en el momento de disear una aplicacin Web.
5.2. Navegacin con el Control HiperLink

Esta tcnica permite navegar hasta otra pgina HTML, o ASPX. Este control no proporciona
ningn evento del lado del servidor. Cuando el usuario genera el evento click, del lado del
cliente, en el control, la navegacin se realiza inmediatamente. La direccin de destino se
especifica en la propiedad NavigateURL del control. Si se quiere interceptar un evento click
desde el servidor para controlar la navegacin desde cdigo, se puede utilizar un control de
servidor Button, LinkButton o ImageButton ms el objeto Response.
5.3. Utilizando el Mtodo Response.Redirect
Permite navegar hasta otra pgina, pero por cdigo. Es equivalente a la navegacin con el
control HiperLink. Para utilizar este mtodo, simplemente, introduce el siguiente cdigo en el
evento click de un control de servidor Button:
Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As

System.Web.UI.ImageClickEventArgs)
Handles ImageButton1.Click
Response.Redirect("PaginaDestino.aspx")
End Sub
Observacin: El mtodo sobrecargado Redirect(URL , Boolean) tiene un parmetro boolean

que especifica si se termina la ejecucin de la pgina actual. Si se especifica True o si se utiliza
el mtodo Redirect especificando solamente la URL de destino, se producir una excepcin del
tipo ThreadAbortException, que indica el trmino de la ejecucin de la pgina que origina la
navegacin. Se debe considerar este comentario cuando se tiene sentencias Redirect dentro
de bloques Try, ya que la excepcin producida por el mtodo Redirect puede no ser esperada
en el flujo de la aplicacin.
5.4. Utilizando el mtodo Server.Transfer
El mtodo Server.Transfer slo sirve para navegar entre pginas ASPX. Este mtodo termina la
ejecucin del Web Form que origina la llamada y navega hasta la pgina ASPX de destino. Si se
considera el comentario anterior, la utilizacin de este mtodo siempre va a generar una
excepcin del tipo ThreadAbortException, puesto que termina la ejecucin de la pgina de
origen. La sintaxis es la misma que para el mtodo Redirect:

Server.Transfer("NuevaPagina.aspx")
End Sub

La versin sobrecargada de este mtodo incorpora un valor booleano para especificar si se

conservan las colecciones QueryString y Form luego del trmino de la ejecucin de la pgina
actual. Esto permite que podamos acceder a los valores del ViewState de la pgina de origen
desde la pgina de destino. Observe el siguiente ejemplo:
'PaginaOrigen.aspx
Server.Transfer("PaginaDestino.aspx", True)
End Sub
'PaginaDestino.aspx
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles
MyBase.Load
Dim pCollectionForm As System.Collections.Specialized.NameValueCollection
pCollectionForm = Request.Form
Label1.Text = pCollectionForm.Item("TextBox1")
End Sub
Observacin: debe introducirse la directiva EnableViewStateMac=false en la pgina de

origen para deshabilitar el hashing del ViewState, de lo contrario, se producir una excepcin.
La pgina de origen contiene un control de servidor TextBox llamado Textbox1.
5.5. Utilizando el mtodo de script del lado del cliente Window.Open
Esta tcnica permite navegar a pginas HTML ASPX. Como se trata de un script del lado del
cliente, a travs de este mtodo es posible controlar el aspecto y otras caractersticas propias
de la ventana de Internet Explorer, como por ejemplo el abrir el contenido en una nueva
ventana o en una ventana tipo popup. Desde los objetos del lado del servidor no es posible
controlar estas caractersticas, ya que este objeto de Internet Explorer slo existe en el lado
del cliente (DOM).
Hay varios mtodos para llamar a un script del lado del cliente desde cdigo del lado del
servidor. En esta ocasin, se abordar un mtodo para agregar cdigo de cliente en la pgina
HTML utilizando RegisterStartupScript. Este mtodo agrega secuencias de comandos al final
de la pgina HTML.
Ejemplo utilizando RegisterStartupScript
Agregaremos el script del cliente en el evento click de un control Button. Lo que har el cdigo
es agregar el script al final de la pgina de origen, lo que har que este se ejecute como si
siempre hubiese estado all.
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles Button1.Click
Dim pClientScript As String
pClientScript = "<script language=vbScript> "
pClientScript += " window.open " & Chr(34) & _
"PaginaTres.aspx" & Chr(34) & _
"," & Chr(34) & "_blank" & Chr(34) & "," & Chr(34) &

24
"width=510,height=360,left=200,top=250" & Chr(34)

pClientScript += " </script>"
RegisterStartupScript("PaginaDestino", pClientScript)
End Sub
El ejemplo anterior genera el siguiente cdigo en la pgina HTML, antes de la etiqueta

</form>:
< script language =vbScript>

window.open "PaginaTres.aspx","_blank","width=510,height=360,left=200,top=250"
</ script >
6. MODO DE PASAR VALORES ENTRE PGINAS WEB ASP.NET
Si en la aplicacin se redirige de una pgina Web ASP.NET a otra, a menudo desear pasar
informacin de la pgina de origen a la de destino.
La informacin se puede pasar entre pginas de varias formas:
Utilice una cadena de consulta que anexe la informacin a la direccin URL de la pgina de
destino, a partir de la propiedad QueryString.
En la pgina de destino, lea directamente en la pgina de origen los valores de los controles y
los valores de las propiedades pblicas utilizando la propiedad PreviousPage de la clase Page.
6.1. USO DEL QUERYSTRING
La propiedad QueryString o HttpRequest.QueryString obtiene la coleccin de variables de tipo
cadena de consulta HTTP.
El siguiente cdigo demuestra cmo pasar dos parmetros: nombre e ID en una QueryString a
una pgina Web: Default2.aspx utilizando Server.Transfer:
Server.Transfer("Default2.aspx?ID=123&nombre=ipod")
En la pgina Default2.aspx, el siguiente cdigo lee los valores del QueryString
Dim id As String = Request.QueryString("ID")

Dim producto As String = Request.QueryString("nombre")

LABORATORIO 1.1
Tema: Validacin de entrada de datos y tcnica de navegacin del lado del cliente
Disee un WebForm mediante el cual un cliente pueda registrarse para poder realizar sus
compras y enve sus datos a otro WebForm donde se confirmen el envo de stos. Use
controles de validacin para el respectivo ingreso.
PageRegistro.aspx
Configurar las siguientes propiedades:
RequiredFieldValidaror1:
ControlToValidate: txtNombre
ErrorMessage: Ingrese su nombre
Text: *
ControlToValidate: txtApellidos
ErrorMessage: Ingrese sus apellidos
Text: *
ControlToValidate: txtEmail
ErrorMessage: Ingrese su email
Text: *
RegularExpressionValidator1:
ControlToValidate: txtEmail
ErrorMessage: Email no vlido
Text: *
ValidationExpression: \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
CompareValidator1:
ControlToValidate: txtEmail2
ErrorMessage: Email no vlido
Text: *
ControlToCompare: txtEmail
Operator: Equals
Type: String

26
CustomValidator1:
ControlToValidate: txtFecha
ErrorMessage: Edad no permitida
Text: *
ClientValidationFunction: FuncionEdad
Escribir el siguiente cdigo en la vista de HTML

<script language = "Jscript" type="text/jscript">
function FuncionEdad(s, args) {
alert("Estoy Corriendo del lado del Cliente! ");
var intValue = args.Value;
if (intValue >= 18) {
args.IsValid = true;
}
else {
args.IsValid = false;
}
}
</script>
RegularExpressionValidator2:
ControlToValidate: txtTelefono
ErrorMessage: Telfono no valido
Text: *
ValidationExpression: $\d{3}$-(\d{7})
Programacin:
Protected Sub BtnEnviar_Click(ByVal sender As Object, ByVal e As

System.EventArgs) Handles BtnEnviar.Click
Dim nombre As String = txtNombre.Text & " " & txtApellido.Text
Dim correo As String = txtEmail.Text
Dim telef As String = txtTelefono.Text
'redireccionar del lado del cliente
Response.Redirect("PageConfirmacion.aspx?nom=" & nombre & _
"&email=" & correo & "&tel=" & telef)
End Sub
PageConfirmacion.aspx

Programacin:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load
Dim nom As String = Request.QueryString("nom")
Dim email As String = Request.QueryString("email")
Dim tel As String = Request.QueryString("tel")
lblNombre.Text = nom
lblEmail.Text = email
lblTelefono.Text = tel
End Sub
Protected Sub BtnRegresar_Click(ByVal sender As Object, ByVal e As

System.EventArgs) Handles BtnRegresar.Click
Response.Redirect("PageRegistro.aspx")
End Sub
Compile el proyecto, para ejecutar presione la combinacin CTRL + F5.
LABORATORIO 1.2
Tema: Validacin de entrada de datos y tcnica de navegacin del lado del servidor
PageProductos.aspx
El control al lado del txtCantidad de un CompareValidator que debe estar configurado de la

siguiente forma:
ControlToValidate: txtCantidad
ControlToCompare: txtUnidades
ErrorMessage: Cantidad no puede exceder a las Unidades
Operator: LessThan
Type: Integer
Agregue al proyecto una clase llamada producto.

28
Cuando agregue la clase al proyecto, le aparecer el siguiente cuadro de dilogo, el cual es

muy importante para que se pueda crear la carpeta App_Code donde se guardan las clases. Es
muy importante que haga click en el botn S, ya que si no se crea esa carpeta al momento
de crear objetos de una clase no la va a reconocer; por ello, es necesario que para aplicaciones
web las clases se encuentren en la carpeta App_Code para que puedan ser reconocidas.
Para programar las clases de una forma ms rpida, digite la palabra Property y presione la
tecla Tab. Se dar cuenta que se debe crear una estructura de cdigo para que defina su
atributo privado y su propiedad. Con la tecla Tab, puede moverse a travs de toda la
estructura creada. De esta forma, la programacin es mucho ms rpida.

Public Class Producto
Private _Nombre As String

Public Property Nombre() As String
Get
Return _Nombre
End Get
Set(ByVal value As String)
_Nombre = value
End Set
End Property
Private _Precio As Double

Public Property Precio() As Double
Get
Return _Precio
End Get
Set(ByVal value As Double)
_Precio = value
End Set
End Property
Private _Stock As Integer

Public Property Stock() As Integer
Get
Return _Stock
End Get
Set(ByVal value As Integer)
_Stock = value
End Set
End Property
End Class
Habilite la propiedad del DropDownList AutoPostBack asi como se muestra a continuacin:
Programacin:
Dim ProductosList As New List(Of Producto)
Protected Sub Page_Load(ByVal sender As )

Dim obj As New Producto
With obj
.Nombre = "Impresora"
.Precio = 250
.Stock = 100
End With
ProductosList.Add(obj)

30
obj = New Producto

With obj
.Nombre = "Scanner"
.Precio = 350
.Stock = 50
End With
obj = New Producto
With obj
.Nombre = "LCD"
.Precio = 599
.Stock = 240
End With
If Not Page.IsPostBack Then
With ddlProductos
.DataSource = ProductosList
.DataTextField = "Nombre"
.DataBind()
End With
End If
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender)

txtPrecio.Text = ProductosList(ddlProductos.SelectedIndex).Precio
txtUnidades.Text = ProductosList(ddlProductos.SelectedIndex).Stock
End Sub
Protected Sub btnRegistrar_Click(ByVal sender )

redireccionar la pgina del lado del servidor
Server.Transfer("PageRecepcion.aspx")
End Sub
PageRecepcion.aspx
Programacin:
Protected Sub Page_Load(ByVal sender As Object, )

If Not PreviousPage Is Nothing Then
Dim nombre As DropDownList = PreviousPage.FindControl("ddlProductos")
Dim cantidad As TextBox = PreviousPage.FindControl("txtCantidad")
Dim precio As TextBox = PreviousPage.FindControl("txtPrecio")
If Not nombre Is Nothing And Not cantidad Is Nothing And _

Not precio Is Nothing Then

lblNombre.Text = nombre.Text
lblCantidad.Text = cantidad.Text
lblMonto.Text = cantidad.Text * precio.Text
End If
Else
Response.Redirect("PageProducto.aspx")
End If
End Sub
Protected Sub BtnRegresar_Click(ByVal sender As Object, )

Response.Redirect("PageProducto.aspx")
End Sub
Compile el proyecto. Para ejecutar, presione la combinacin CTRL + F5.

32
Autoevaluacin
1. Cules son los tipos de sitios web que trabaja en Visual Studio 2010?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
2. Cul(es) de los controles de validacin me permitira validar la cantidad de un producto

sabiendo que la cantidad no debe ser menor a 1?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
3. Para qu sirve el control ValidationSummary?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
4. Cules son las tcnicas para poder navegar entre las pginas de un sitio web?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
5. Cmo podemos pasar informacin de una pgina a otra?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
6. Qu es un QueryString?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

Resumen
Cuando crea pginas Web ASP.NET, puede utilizar estos tipos de controles:
o Controles de servidor HTML: elementos HTML expuestos al servidor para que
se puedan programar.
o Controles de servidor Web: cuentan con ms funciones incorporadas que los
del servidor HTML.
o Controles de validacin: incorporan lgica para permitirle comprobar los
controles de entrada de los usuarios.
o Controles de usuario: controles que crea como pginas web ASP.NET. Se
pueden incrustar controles de usuario de ASP.NET en otras pginas
Para agregar controles a una pgina web, puede utilizar un diseador visual o bien,
puede escribir el elemento que representa el control en el marcado de la pgina.
ASP.NET es una tecnologa basada en servidor y, por lo tanto, no interacta
directamente con el explorador. Para interactuar con el explorador, se controla mejor
con secuencias de comandos de cliente escritas en JavaScript o Jscript.
A menudo, resulta til saber cmo se ha invocado una pgina web: si se ha invocado
mediante una solicitud original (HTTP GET), una devolucin de datos (HTTP POST), un
envo a travs de pginas desde otra pgina (HTTP POST) o una transferencia de otra
pgina utilizando el mtodo Transfer, o usando una devolucin de llamada del
explorador.
o Para determinar cmo se ha invocado una pgina web:
o IsPostBack: obtiene un valor que indica si la pgina se est cargando como
respuesta a un valor devuelto por el cliente o si es la primera vez que se carga.
o PreviousPage: obtiene un valor que indica la pgina que transfiri el control a
la pgina actual.
o IsCrossPagePostBack: indica si la pgina participa en una devolucin de datos
entre stas.
o IsCallback: obtiene un valor que indica si la solicitud de la pgina es el
resultado de una devolucin de llamada.
La clase Page expone una propiedad denominada PreviousPage. Si la pgina de origen
y la de destino se encuentran en la misma aplicacin ASP.NET, la propiedad
PreviousPage de la pgina de destino contiene una referencia a la de origen.
Referencias
http://msdn.microsoft.com/es-es/library/bb386451.aspx
Pgina referente a trabajar con controles en asp.net
Pgina referente a los controles de validacin
Bibliografa especializada:
http://www.macoratti.net
http://www.willydev.net

34

UNIDAD DE
APRENDIZAJE
DISEANDO UN SITIO WEB USANDO MASTER PAGES

Y ADMINISTRANDO LOS ESTADOS DE UNA APLICACIN
que proporciona el Framework 4.0, construyen el diseo de pginas web con coherencia
utilizando Master Pages, adems de manejar las diferentes tcnicas de administracin de
estados de una aplicacin web.
TEMARIO
Creacin de Master Pages

Definicin del Control ContentPlaceHolder
Tcnicas para administrar los estados de una aplicacin web: ViewState, Cookies,
Session, y Application.
Los alumnos disean Master Pages.

Los alumnos disean Web Forms que hereden Master Pages.
Los alumnos disean un sitio web administrando estados usando ViewState.
Los alumnos disean un sitio web administrando estados usando Cookies.
Los alumnos disean un sitio web administrando estados usando Session.
Los alumnos disean un sitio web administrando estados usando Application.

36
1. DISEANDO UNA APLICACIN WEB ASP.NET

En este captulo, se van a crear, personalizar y administrar una aplicacin Web ASP.NET (a
veces, denominada simplemente sitio web). En estos temas, se ofrece informacin relativa a la
aplicacin o sitio en su totalidad: la estructura de archivos de un sitio Web ASP.NET, el ciclo de
vida de una aplicacin, los mtodos para crear un aspecto (temas) y un diseo (pginas
maestras) coherentes en todas las pginas del sitio y cmo ampliar la aplicacin con mdulos
personalizados.
1.1. PGINAS MAESTRAS DE ASP.NET

Las pginas maestras de ASP.NET permiten crear un diseo de pgina que se puede utilizar en
ciertas pginas o en todas (pginas de contenido) en un sitio Web.
Una pgina maestra es un archivo de ASP.NET con la extensin .master que tiene un diseo
predefinido que puede incluir texto esttico, elementos HTML y controles de servidor. La
pgina maestra se identifica mediante una directiva @Master especial que reemplaza la
directiva @Page utilizada en las pginas .aspx ordinarias. El aspecto de la directiva es el
siguiente:
<%@ Master Language="VB" CodeFile="Pg.master.vb" Inherits="MPage" %>
Adems de la directiva @ Master, la pgina maestra tambin incluye todos los elementos
HTML de nivel superior de una pgina, como html, head y form. Por ejemplo, en una pgina
maestra, podra utilizar una tabla HTML para el diseo, un elemento img para el logotipo de la
compaa, texto esttico para el aviso de copyright y controles de servidor para crear la
exploracin estndar del sitio.
Adems del texto esttico y los controles que aparecern en todas las pginas, la principal
incluye controles ContenPlaceHolder.
1.2. CONTENT PAGES (PGINAS DE CONTENIDO)

Para definir el contenido de los controles ContentPlaceHolder de la pgina maestra, cree
pginas de contenido individuales, que son pginas ASP.NET que estn enlazadas a una pgina
maestra concreta. El enlace se establece en la directiva @ Page de la pgina de contenido al
incluir un atributo MasterPageFile que apunta a la pgina maestra que se va a utilizar.
Por ejemplo, una pgina de contenido podra tener la siguiente directiva @ Page, que la enlaza
con la pgina Master1.master.
<%@Page Language="VB" MasterPageFile="~/Master1.master" %>
En la pgina de contenido, cree el contenido agregando los controles Content y asignndolos a
los controles ContentPlaceHolder de la pgina maestra.
1.3. MBITO DE LAS PGINAS MAESTRAS

Puede adjuntar pginas de contenido a una pgina maestra en tres niveles:
1. En el nivel de la pgina: puede utilizar una directiva de pgina en cada pgina de contenido
para enlazarla a una pgina maestra, como en el ejemplo de cdigo siguiente.
<%@ Page Language="VB" MasterPageFile="MySite.Master" %>
2. En el nivel de la aplicacin: al establecer la configuracin del elemento pages en el
Web.config, puede especificar que todas las pginas de ASP.NET (archivos .aspx) de la
aplicacin se enlacen automticamente a una pgina maestra. El elemento podra tener el
aspecto siguiente:
<pages masterPageFile="MySite.Master" />
3. En el nivel de la carpeta: esta estrategia es igual que la estrategia de definir enlaces en el
nivel de la aplicacin, excepto en que la configuracin se define en un archivo Web.config en
una nica carpeta.

1.4. MODO DE CREAR UNA PGINA PRINCIPAL

La pgina maestra es la plantilla que define la apariencia que tendrn las pginas de contenido.
A continuacin, se crear primero una pgina maestra.
1.4.1. Modo de aadir una pgina maestra al Web Site

1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el sitio Web
y, a continuacin, seleccione Agregar nuevo Item.
2. En Plantillas, haga clic en Pgina maestra.
3. En el cuadro Nombre, escriba Master1.
4. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que prefiera trabajar y,
a continuacin, haga clic en Agregar.
1.4.2. Edicin de la pgina maestra

La pgina maestra define la apariencia de las pginas del sitio. Puede contener cualquier
combinacin de texto esttico y controles. Una pgina maestra tambin contiene uno o ms
marcadores de posicin de contenido los cuales indican dnde aparecer el contenido. Cuando
edita una pgina maestra, el diseador le ayuda de las siguientes maneras:
Como valor predeterminado, la pgina maestra contiene un nico control
ContentPlaceHolder. Se pueden agregar tantos ContentPlaceHolder adicionales como sean
necesarios.
En la vista de cdigo fuente, el editor comprueba el marcado de la pgina para asegurarse de
que no agrega elementos o atributos que no sean vlidos en las pginas maestras. Por
ejemplo, si agrega un control Content a una pgina principal en la vista de cdigo fuente, el
editor marca el control porque los controles Content no estn permitidos en las pginas
maestras.
Cuando edita una pgina maestra en el diseador, el men sitio web y el men del botn
secundario contienen el comando agregar pgina de contenido, el cual crea una pgina nueva
que ya est vinculada con la pgina maestra actual.
1.5. PGINAS MAESTRAS ANIDADAS

Las pginas maestras anidadas permiten crear pginas maestras divididas en componentes.
Por ejemplo, un sitio de gran volumen podra contener una pgina maestra general en la que
se define la apariencia del sitio. Otros colaboradores del contenido del sitio pueden definir sus
propias pginas maestras secundarias que harn referencia a la pgina maestra del sitio y que,
a su vez, definirn la apariencia del contenido de ese colaborador.
Una pgina maestra secundaria tiene la extensin de nombre de archivo .master, como
cualquier pgina maestra. La pgina maestra secundaria, normalmente, contiene controles de
contenido que estn asignados a los marcadores de posicin de contenido de la pgina
maestra primaria. En este sentido, la pgina maestra secundaria est diseada como cualquier
pgina de contenido.
Esta es la pgina maestra primaria:
<% @ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<body>
<form id="Form1" runat="server">
<div> <h1>Parent Master</h1> <p>
<font color="red">This is parent master content.</font> </P>
<asp:ContentPlaceHolder ID="MainContent" runat="server" /> </div>
</form> </body> </html>

38
Esta es la pgina maestra secundaria:

<%@ Master Language="VB" master="Parent.master"%>
<asp:Content id="Content1" ContentPlaceholderID="MainContent" runat="server">
<asp:panel runat="server" id="panelMain" backcolor="lightyellow">
<h2>Child master</h2>
<asp:panel runat="server" id="panel1" backcolor="lightblue">
<p>This is childmaster content.</p>
<asp:ContentPlaceHolder ID="Content1" runat="server" />
</asp:panel>
<asp:panel runat="server" id="panel2" backcolor="pink">
<p>This is childmaster content.</p>
<asp:ContentPlaceHolder ID="Content2" runat="server" />
</asp:panel>
</asp:panel>
</asp:Content>
Este es un archivo secundario que hace referencia a la pgina maestra secundaria:

<%@ Page Language="VB" master="Child.Master"%>
<asp:Content id="Content1" ContentPlaceholderID="Content1" runat="server">
<asp:Label runat="server" id="Label1" text="Child label1" font-bold="true" /> <br>
</asp:Content>
<asp:Content id="Content2" ContentPlaceholderID="Content2" runat=server>
<asp:Label runat="server" id="Label2" text="Child label2" font-bold=true/>
</asp:Content>
2. INFORMACIN GENERAL SOBRE LA ADMINISTRACIN DE

ESTADOS EN ASP .NET
Cada vez que la pgina se enva al servidor, se crea una nueva instancia de la clase de la pgina
Web. En la programacin Web tradicional, esto se traduce en que toda la informacin asociada
a la pgina y sus controles se pierden con cada recorrido de ida y vuelta.
Para superar esta limitacin inherente de la programacin Web tradicional, ASP.NET incluye
varias opciones que ayudan a preservar los datos en cada pgina y en toda la aplicacin. Estas
caractersticas son las siguientes:
Estado de vista
Estado de control
Campos ocultos
Cookies
Cadenas de consulta
Estado de aplicacin
Estado de sesin
Propiedades de perfiles
2.1. OPCIONES DE ADMINISTRACIN DE ESTADO EN EL CLIENTE

Las siguientes secciones describen opciones para administrar el estado que almacenan la
informacin en la pgina o en el equipo cliente.

2.1.1. Estado de vista: ViewState

Permite conservar valores entre las distintas solicitudes de una misma pgina. ste es el
mtodo predeterminado que la pgina utiliza para conservar los valores de las propiedades de
la propia pgina y sus controles entre recorridos de ida y vuelta.
2.1.2. Estado de control: ControlState

La propiedad ControlState permite mantener la informacin de las propiedades que es
especfica de un control y que no se puede desactivar como ocurre con la propiedad
ViewState. Por ejemplo, si ha escrito un control personalizado con varias fichas que muestran
distintos tipos de informacin, ste debe saber la ficha que se selecciona en los recorridos de
ida y vuelta para que funcione tal y como se espera.
2.1.3. Campos ocultos: HiddenField

Un control HiddenField almacena una nica variable en su propiedad Value y se debe agregar
en la pgina de forma explcita.
Para que los valores de los campos ocultos estn disponibles durante el procesamiento de la
pgina, debe enviarla mediante el mtodo POST de HTTP. Si utiliza campos ocultos y una
pgina se procesa como respuesta a un vnculo o a un comando GET de HTTP, los campos
ocultos no estarn disponibles.
2.1.4. Cookies
Una cookie es una cantidad pequea de datos que se almacena en un archivo de texto en el
sistema de archivos del cliente o que se mantiene en la memoria durante la sesin del
explorador cliente. Contiene informacin especfica del sitio que el servidor enva al cliente
junto con el resultado de la pgina.
2.1.5. Cadenas de consulta: QueryString

Una cadena de consulta es informacin que se anexa al final de la direccin URL de una pgina.
Un ejemplo tpico de cadena de consulta:
http://www.contoso.com/listwidgets.aspx?category=basic&price=100
En la ruta URL indicada, la cadena de consulta empieza por un signo de interrogacin (?) e
incluye dos pares de atributo-valor, uno de ellos se denomina "category" y el otro, "price".
Para que los valores de las cadenas de consulta estn disponibles durante el procesamiento de
la pgina, debe utilizar el mtodo GET de HTTP.
2.2. OPCIONES DE ADMINISTRACIN DE ESTADO EN EL SERVIDOR

ASP.NET proporciona una serie de medios para mantener la informacin de estado en el
servidor, en lugar de conservarla en el cliente. Con la administracin de estados basada en
servidor, puede reducir la cantidad de informacin que se enva al cliente para conservar el
estado.
2.2.1. Estado de aplicacin: ApplicationState

El estado de aplicacin es un mecanismo de almacenamiento global al que se puede obtener
acceso desde todas las pginas de la aplicacin web.
Es una instancia de la clase HttpApplicationState, de cada aplicacin Web activa. Por tanto, el
estado de aplicacin resulta til para almacenar la informacin que se debe mantener en los
recorridos de ida y vuelta del servidor, y entre las solicitudes de las pginas.
2.2.2. Estado de sesin: SessionState

Estado de sesin es similar a estado de aplicacin con la diferencia de que el mbito es la
actual sesin del explorador. Si hay varios usuarios utilizando la aplicacin, cada uno de ellos
tendr un estado de sesin distinto.

40
3. INFORMACIN GENERAL SOBRE LAS COOKIES

Las cookies son pequeos fragmentos de texto que acompaa a las solicitudes y a las pginas
mientras stas se transmiten del servidor Web al explorador y viceversa. Permiten a los sitios
Web almacenar informacin sobre los visitantes.
Se utilizan para muchos propsitos; todos ellos destinados a facilitar al sitio web el
reconocimiento de los usuarios. Por ejemplo, un sitio que lleva a cabo un sondeo podra
utilizar una cookie, simplemente, como un valor booleano para indicar si el explorador del
usuario ya ha participado en la votacin con el fin de evitar que el usuario vote dos veces.
La mayora de los exploradores admiten cookies de un tamao mximo de 4096 bytes. Los
exploradores tambin imponen limitaciones: slo permiten 20 cookies por sitio; si se intenta
almacenar ms, las cookies ms antiguas se descartan.
3.1. MODO DE ESCRIBIR COOKIES

El explorador administra las cookies en los equipos de los clientes. Las cookies se envan al
cliente utilizando el objeto HttpResponse, que expone una propiedad denominada Cookies.
Cuando escriba una nueva cookie, deber especificar sus propiedades Name y Value. Cada
cookie debe tener un nombre nico para que la aplicacin Web pueda identificarla cuando el
explorador la enve con solicitudes futuras.
Hay dos maneras de escribir una cookie en el equipo de un usuario:
Establecer las propiedades de la cookie directamente en la coleccin Cookies
Response.Cookies("userName").Value = "patrick"
Response.Cookies("userName").Expires = DateTime.Now.AddDays(1)
Crear una instancia del objeto HttpCookie y agregarla a la coleccin Cookies.
Dim aCookie As New HttpCookie("lastVisit")
aCookie.Value = DateTime.Now.ToString()
aCookie.Expires = DateTime.Now.AddDays(1)
Response.Cookies.Add(aCookie)
Las cookies tambin pueden almacenar varios pares de nombre y valor en una sola cookie.
En el ejemplo siguiente se muestra la manera de escribir la misma cookie, cada una con dos
subclaves:
Dim aCookie As New HttpCookie("userInfo")
aCookie.Values("userName") = "patrick"
aCookie.Values("lastVisit") = DateTime.Now.ToString()
aCookie.Expires = DateTime.Now.AddDays(1)
Para limitar las cookies a una carpeta del servidor, establezca la propiedad Path de la cookie,
como en el ejemplo siguiente:
Dim appCookie As New HttpCookie("AppCookie")
appCookie.Value = "written " & DateTime.Now.ToString()
appCookie.Expires = DateTime.Now.AddDays(1)
appCookie.Path = "/Application1"
Response.Cookies.Add(appCookie)
3.2. MODO DE LEER LAS COOKIES

En sus aplicaciones ASP.NET, puede leer las cookies mediante el objeto HttpRequest, que est
disponible como propiedad Request de la clase Page. En el ejemplo, se muestran dos maneras
de obtener el valor de una cookie denominada username:
If Not Request.Cookies("userName") Is Nothing Then
Dim aCookie As HttpCookie = Request.Cookies("userName")
Label1.Text = Server.HtmlEncode(aCookie.Value)
End If

Para leer los nombres y los valores de todas las cookies disponibles para la pgina, puede
recorrer la coleccin Cookies mediante cdigo como el siguiente.
Dim output As System.Text.StringBuilder = New System.Text.StringBuilder
Dim aCookie As HttpCookie
For i as Integer= 0 to Request.Cookies.Count - 1
aCookie = Request.Cookies(i)
output.Append("<br/>")
output.Append("Name=" & Server.HtmlEncode(aCookie.Name) & "<br />")
output.Append("Value=" & Server.HtmlEncode(aCookie.Value) & "<br />")
Next
Label1.Text = output.ToString()
3.3. ELIMINACIN DE LAS COOKIES

La eliminacin de una cookie, es decir, su borrado fsico del disco duro del usuario, es una
variacin del proceso de modificacin. No es posible eliminar directamente una cookie, ya que
se encuentra en el equipo del usuario. Sin embargo, puede conseguir que el explorador la
elimine.
Dim aCookie As HttpCookie
Dim cookieName As String
Dim limit As Integer = Request.Cookies.Count - 1
For i as Integer=0 To limit
cookieName = Request.Cookies(i).Name
aCookie = New HttpCookie(cookieName)
aCookie.Expires = DateTime.Now.AddDays(-1)
Next
4. INFORMACIN GENERAL SOBRE EL ESTADO DE VISTA

El estado de vista es el mtodo que permite conservar los valores de pgina y control entre
acciones de ida y vuelta. Puede tener acceso al estado de vista en su propio cdigo mediante la
propiedad ViewState de la pgina para conservar los datos durante las acciones de ida y vuelta
al servidor web.
4.1. MODO DE GUARDAR VALORES EN EL ESTADO DE VISTA

El estado de vista es un repositorio de una pgina ASP.NET en el que se pueden almacenar
valores que deben conservarse durante la devolucin de datos.
Los datos de estado de vista se almacenan en uno o ms campos ocultos como cadenas
codificadas en base64. Puede tener acceso a informacin de estado de vista mediante la
propiedad ViewState de la pgina que expone un objeto de diccionario. Puesto que el estado
de vista se enva como un campo oculto, se pueden realizar cambios en el estado hasta el
evento PreRender.
4.1.1. Para guardar un valor en el estado de vista:

Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs)
Me.ViewState.Add("arrayListInViewState", PageArrayList)
End Sub
4.1.2. Para cifrar el estado de vista:

En la directiva @Page, establezca el atributo ViewStateEncryptionMode en "Always", como en
el ejemplo siguiente:
<% @Page ViewStateEncryptionMode="Always" ... %>

42
4.2. MODO DE HABILITAR O DESHABILITAR EL VIEWSTATE PARA UN CONTROL O

PGINA
Para habilitar o deshabilitar el estado de vista para un control:
Seleccione el control en la vista diseo del Web form.
En la ventana de propiedad, seleccione la propiedad EnabledViewState y seleccione el valor
de true para habilitar el estado; seleccione false para deshabilitar el estado de la vista del
control.
Para habilitar o deshabilitar el estado de vista de una pgina:
Seleccione la vista de origen (Source View) de la pgina Web.
Ubique la directiva <% @Page %>
Para habilitar el ViewState, aada a la directiva EnabledViewState=true; para deshabilitar
el ViewState, a la directiva EnabledViewState=false.
5. INFORMACIN GENERAL SOBRE EL ESTADO DE SESSION

El estado de sesin de ASP.NET identifica las solicitudes recibidas desde el mismo explorador
durante un tiempo limitado como una sesin y conserva los valores de las variables mientras
dure esa sesin.
Por ejemplo, crear las variables de sesin FirstName y LastName para representar el nombre y
el apellido de un usuario y las variables se establecen en los valores recuperados de los
controles.
Session("FirstName") = FirstNameTextBox.Text
Session("LastName") = LastNameTextBox.Text
5.1. EVENTOS DEL ESTADO DE SESSION

ASP.NET proporciona dos eventos que ayudan a administrar las sesiones de usuario:
Session_OnStart se desencadena cuando inicia una nueva sesin, y Session_OnEnd se
desencadena cuando se abandona una sesin.
5.1.1. Session_OnStart
Se ejecuta al principio de una solicitud, si sta inicia una nueva sesin. Se utiliza para inicializar
las variables de sesin, as como para realizar el seguimiento de la informacin relacionada con
la sesin.
5.1.2. Session_OnEnd
Se ejecuta cuando se llama al mtodo Abandon o cuando la sesin ha caducado. Una sesin
caduca cuando el nmero de minutos especificado por la propiedad Timeout transcurre sin
que se haya creado ninguna solicitud para la sesin.
Si la propiedad Mode del objeto Session es StateServer o SQLServer, se omite el evento
Session_OnEnd en el archivo Global.asax. Puede utilizar el evento Session_OnEnd para limpiar
la informacin relacionada con la sesin.
Ejemplo de eventos de session

Las subrutinas definidas en este ejemplo crean un contador que realiza el seguimiento del
nmero de usuarios de la aplicacin que utilizan dicha aplicacin de forma activa. Observe que
este ejemplo slo funcionar correctamente cuando la propiedad de estado de sesin Mode se
establezca en InProc, ya que el evento Session_OnEnd slo es compatible con el almacn de
estado de sesin en proceso.

<script language="VB" runat="server">

Public Sub Application_OnStart()
Application("UsersOnline") = 0
End Sub
Public Sub Session_OnStart()

Application.Lock()
Application("UsersOnline") = CInt(Application("UsersOnline")) + 1
Application.UnLock()
End Sub
Public Sub Session_OnEnd()

Application.Lock()
Application("UsersOnline") = CInt(Application("UsersOnline")) - 1
End Sub
</script>
5.2. RECUPERAR LOS VALORES EN UN ESTADO DE SESSION

La propiedad tem permite recuperar los valores de un estado de sesin.
Dim firstName as String = CType(Session.Item("FirstName"), String)
Dim lastName as String = CType(Session.Item("LastName"), String)
El estado de la sesin caduca, de forma predeterminada, despus de 20 minutos de

inactividad. Puede controlar el perodo de duracin del estado de sesin mediante el atributo
timeout de la seccin de configuracin sessionState.
5.3. MODOS DE UN ESTADO DE SESSION

El estado de sesin de ASP.NET es compatible con distintas opciones de almacenamiento de
los datos de la sesin. En la lista siguiente se describen los modos de estado de sesin
disponibles:
Modo InProc, que almacena el estado de sesin en memoria en el servidor Web. ste es el
valor predeterminado.
Modo StateServer, que almacena el estado de sesin en un proceso distinto denominado
"servicio de estado de ASP.NET". Este modo garantiza que el estado de sesin se mantiene si
se reinicia la aplicacin web y que est disponible tambin para varios servidores Web.
Modo SQLServer, que almacena el estado de sesin en una base de datos de SQL Server.
Este modo garantiza que el estado de sesin se mantiene si se reinicia la aplicacin web y que
est disponible tambin para varios servidores web en una batera de servidores web.
Modo Custom, que permite especificar un proveedor de almacenamiento personalizado.
6. INFORMACIN GENERAL SOBRE EL ESTADO DE APLICACIN
El estado de aplicacin es un repositorio de datos disponible para todas las clases de una
aplicacin ASP.NET. El estado de aplicacin se almacena en la memoria del servidor y ofrece
ms rapidez que el almacenamiento y la recuperacin de informacin de una base de datos.
El estado de aplicacin se almacena en una instancia de la clase HttpApplicationState. Esta
expone un diccionario de objetos con valores y claves. La instancia de HttpApplicationState se
crea la primera vez que el usuario tiene acceso a cualquier recurso de direccin URL de la
aplicacin.

44
6.1. MODO DE GUARDAR VALORES EN UN ESTADO DE APLICACIN

El estado de aplicacin se almacena en la memoria del servidor, por lo que una cantidad
grande de datos puede llenarla rpidamente. Si se reinicia la aplicacin, los datos de estado de
aplicacin se pierden.
6.1.1. Modo de escribir un valor en el estado de aplicacin

Establezca el valor de la variable en la clase HttpApplicationState, en el controlador
Application_Start del archivo Global.asax
En el ejemplo de cdigo siguiente, se muestra cmo establecer la variable de aplicacin
Message en una cadena.
Application("Message") = "Bienvenido al Portal Cibertec"
Application("Count") = 0
6.1.2. Modo de escribir un valor en el estado de aplicacin con bloqueo

Varios subprocesos pueden tener acceso, simultneamente, a las variables de estado de
aplicacin. Para establecer los valores es necesario bloquearlas para que slo pueda escribir en
un subproceso.
Para establecer el valor de la variable de aplicacin, llame al mtodo Lock, y, a continuacin,
llame al mtodo UnLock a fin de desbloquear el estado de aplicacin y liberarlo para otras
solicitudes de escritura.
En el ejemplo de cdigo siguiente, incremente la variable Count en uno (1) y, a continuacin,
desbloquee el estado de aplicacin.
Application.Lock()
Application("Count") = CInt(Application("Count")) + 1
6.2. MODO DE LEER VALORES EN UN ESTADO DE APLICACIN

El estado de aplicacin almacena los datos como tipos de datos Object. Por consiguiente, debe
convertirlos al tipo apropiado al recuperarlos.
5.2.1 Modo de leer un valor desde el estado de aplicacin
Determine si la variable de aplicacin existe y, a continuacin, convirtala al tipo adecuado
cuando tenga acceso a ella.
En el ejemplo de cdigo siguiente se recupera el valor AppTime de estado de aplicacin y se
convierte en una variable denominada AppStartTime de tipo DateTime.
If (Not Application("AppTime") Is Nothing) Then
Dim AppTime As DateTime = CDate(Application("AppTime"))
End If
7. INFORMACIN SOBRE EL ALMACENAMIENTO EN CACH
Para ayudarle a aumentar el rendimiento de la aplicacin, ASP.NET proporciona

almacenamiento en cach mediante dos mecanismos bsicos: almacenamiento en cach de
aplicaciones y cach de los resultados de las pginas.
7.1. CACH DE APLICACIONES

Permite almacenar en memoria datos arbitrarios mediante programacin utilizando pares de
clave y valor. Los datos de la cach de aplicaciones son voltiles. La ventaja de utilizar la cach
de aplicaciones es que ASP.NET se encarga de administrarla y elimina los elementos cuando
caducan o se invalidan, o cuando hay poca memoria.

7.2. CACH DE RESULTADOS DE PGINAS

Almacena en memoria el contenido de una pgina ASP.NET procesada. Esto permite a ASP.NET
enviar una pgina de respuesta a un cliente sin volver a recorrer el ciclo de vida de
procesamiento de la pgina. El almacenamiento en cach de los resultados de las pginas
resulta especialmente til en aquellas pginas que no cambian a menudo, pero cuya creacin
requiere un cantidad significativa de procesamiento.
El almacenamiento en cach de resultados de pginas proporciona dos modelos de
almacenamiento: almacenamiento en cach de pginas completas y almacenamiento en cach
de una parte de las pginas. El almacenamiento en cach de pginas completas permite
conservar el contenido completo de la pgina en memoria y utilizarlo para satisfacer las
solicitudes de los clientes. El almacenamiento en cach de una parte de las pginas permite
almacenar en la cach ciertas partes de una pgina, mientras otras se recuperan de forma
dinmica.
7.3. MODO DE AGREGAR ELEMENTOS A CACHE

El objeto Cach tiene acceso a los elementos en la cach de la aplicacin. Puede agregar un
elemento a la cach de la aplicacin utilizando:
El mtodo Insert: agrega un elemento a la cach, si un elemento con el mismo nombre se
reemplaza el elemento de la cach.
El mtodo Add: maneja las mismas opciones que el mtodo Insert; sin embargo, si ya existe
un elemento con el mismo nombre en la cach, el mtodo no reemplazar el elemento y no
producir una excepcin.
7.3.1. Modo de agregar un elemento a la cach estableciendo directamente el elemento a

travs de la clave y valor:
Cache("CacheItem1") = "Cached Item 1"
7.3.2. Modo de agregar elementos a la cach mediante el mtodo Insert

Cache.Insert("CacheItem2", "Cached Item 2")
7.3.3. Modo de agregar un elemento a la cach especificando una dependencia

El siguiente ejemplo de cdigo agrega un elemento denominado CacheItem3 que es
dependiente de otro elemento en la cach denominado CacheItem2:
Dim dependencies As String() = {"CacheItem2"}
Cache.Insert("CacheItem3", "Cached Item 3", _
New Caching.CacheDependency(Nothing, dependencies))
7.3.4. Modo de agregar un elemento a la cach con directivas de caducidad

Llame al mtodo Insert pasndole una hora de caducidad absoluta o un plazo de tiempo.
El ejemplo agrega un elemento a la cach con plazo de caducidad de 10 minutos:
Cache.Insert("CacheItem7", "Cached Item 7", Nothing, _
Caching.Cache.NoAbsoluteExpiration, New TimeSpan(0, 10, 0))
7.3.5. Modo de agregar un elemento a la cach mediante el mtodo Add

Llame al mtodo Add, que devuelve un objeto que representa el elemento.
El siguiente ejemplo agrega un elemento a la cach y establece el valor de la variable para
que sea el elemento que se agreg.
Dim CacheIt As String = CStr(Cache.Add("Item9", "Item 9", _
Nothing, System.Web.Caching.Cache.NoAbsoluteExpiration, _
System.Web.Caching.Cache.NoSlidingExpiration, _

46
System.Web.Caching.CacheItemPriority.Default, Nothing))
7.4. MODO DE RECUPERAR VALORES ALMACENADOS EN CACHE

Para recuperar los datos de la cach, especifique la clave con la que se almacen el elemento
en memoria cach.
7.4.1. Modo de obtener el valor de un elemento almacenado en cach

Compruebe si el elemento no es null, en el objeto Cache. Si existe, asgnelo a su variable. De lo
contrario, vuelva a crear el elemento, agrguelo a la cach y, a continuacin, tenga acceso a l.
En el ejemplo, se muestra cmo recuperar el elemento denominado CacheItem de la memoria
cach. Si el elemento no est en la cach, el cdigo agrega el elemento a la cach y, a
continuacin, asigna el elemento a cachedString.
Dim cachedString As String = CStr(Cache("CacheItem"))
If cachedString Is Nothing Then
cachedString = "Hello, World."
Cache.Insert("CacheItem", cachedString)
End If
7.5. MODO DE ELIMINAR ELEMENTOS DE CACH EN ASP.NET

Los datos almacenados en la cach de ASP.NET son voltiles. Se pueden eliminar
automticamente de la cach por una de las razones siguientes:
La cach est llena.
El elemento ha caducado.
Un elemento depende de ciertos cambios.
El mtodo concreto utilizado para eliminar un elemento de la cach se determina en el cdigo
que se emplea para agregar el elemento a la cach.
7.5.1. Modo de eliminar un elemento de la cach de forma explcita

Llame al mtodo Remove y psele la clave del elemento a eliminar.
Cache.Remove("MyData1")
LABORATORIO 2.1
Tema: Diseo con Master Pages
Agregue un nuevo elemento al Sitio Web

Seleccione la plantilla Pgina Maestra:
En la vista de cdigo, podr ver lo que se genera y apreciar la etiqueta ContentPlaceHolder. Esa
debe ser el rea del Master Page que debe quedar vaco para que sea llenado en las pginas de
contenido.

48
Fuera del ContentPlaceHolder disee una tabla de 4 filas por 1 columna:
En la primera fila, agregue un par de imgenes; y en la segunda fila de la categora

Navegacin, con control Men, para que tenga las siguientes opciones:

ste debe ser el diseo final de la pgina maestra:
LABORATORIO 2.2
Tema: Creacin de pginas de Contenido y Manejo de Cookies
Disee un WebForm donde el usuario pueda acceder al sitio web usando su usuario y
password. El login del usuario debe almacenarse en una cookie y luego al cargarse la
pgina de compras debe mostrarse el login del usuario, leyndose desde la cookie
creada. Esta pgina no es de contenido.
Login.aspx
Agregue otro WebForm y, en este caso, s ser una pgina de contenido que heredar
el diseo del Master Page creado. Seleccione la casilla que dice Seleccionar pgina
maestra

50
PageCompras.aspx
En el siguiente Cuadro de dilogo, seleccione la Pgina Maestra que se cre.
Dentro del ContentPlaceHolder desarrolle el siguiente diseo:

Programacin: (Login.aspx)
Protected Sub btnIngresar_Click(ByVal sender )
Dim aceptado As Boolean = False
Select Case txtUsuario.Text.ToLower
Case "pepe"
If txtPassword.Text = "Jose" Then
aceptado = True
End If
Case "rafa"
If txtPassword.Text = "Rafael" Then
aceptado = True
End If
Case "pili"
If txtPassword.Text = "Pilar" Then
aceptado = True
End If
Case "guille"
If txtPassword.Text = "Guillermo" Then
aceptado = True
End If
Case Else
aceptado = False
End Select
If aceptado Then
Response.Cookies("datos").Values.Add("usuario", txtUsuario.Text)
Response.Redirect("PageCompras.aspx")
Else
Response.Write("<font color=red><b>" & "Usuario no autorizado" & _
"</b></font>")
End If
End Sub

52
LABORATORIO 2.3
Tema: Administracin de estados usando ViewState
A continuacin, programaremos el Web Form PageCompras.aspx, en el cual el usuario

debe registrar los productos que desea comprar junto con la cantidad que desea. Esta
informacin debe agregarse a un datatable que ser almacenado usando el ViewState.
Programacin: (PageCompras.aspx)
Function CrearCarro() As DataTable
Dim tabla As New DataTable
With tabla.Columns
.Add("Producto", Type.GetType("System.String"))
.Add("Precio", Type.GetType("System.Double"))
.Add("Cantidad", Type.GetType("System.Int32"))
.Add("SubTotal", Type.GetType("System.Double"), "Precio*Cantidad")
End With
Return tabla
End Function
Function getProductos() As Dictionary(Of String, Double)

Dim productos As New Dictionary(Of String, Double)
productos.Add("Borrador Blanco", 1.5)
productos.Add("Papel Bond A4", 0.2)
productos.Add("Papel Bulky Oficio", 0.1)
productos.Add("Tajador de Metal", 1.4)
productos.Add("Engrampador", 3.5)
Return productos
End Function
Protected Sub Page_Load(ByVal sender )

lblUsuario.Text = Request.Cookies("datos").Values("usuario").ToString
Me.ViewState("Productos") = getProductos()
Me.ViewState("Carrito") = CrearCarro()
With ddlProductos
.DataSource = CType(ViewState("Productos"), _
Dictionary(Of String, Double)).Keys
.DataBind()
End With
End If
End Sub
Protected Sub ddlProductos_SelectedIndexChanged(ByV)

txtPrecio.Text = CType(ViewState("Productos"), _
Dictionary(Of String, Double))(ddlProductos.Text)
End Sub

Protected Sub btnRegistrar_Click(ByVal )

Dim tabla As DataTable = CType(ViewState("Carrito"), DataTable)
Dim fila As DataRow = tabla.NewRow
fila(0) = ddlProductos.Text
fila(1) = txtPrecio.Text
fila(2) = txtCantidad.Text
tabla.Rows.Add(fila)
With gvProductos
.DataSource = tabla
.DataBind()
End With
End Sub
Compile con Ctrl + F5, y compruebe los resultados.

54
Autoevaluacin
1. Defina cada una de las opciones para administrar el estado en el cliente
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
2. Defina cada una de las opciones para administrar el estado en el servidor

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
3. Qu es una cookie y cul es su limitacin?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
4. Cmo escribir una cookie? Se puede definir una cookie con varios valores?
Explique.
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
5. Qu es un estado de sesin y cules son sus eventos?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
6. Qu es un estado de aplicacin y cmo se declara un estado de aplicacin?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
7. Qu es un Master Page y cmo funciona?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
8. Qu es una pgina de contenido, cul es la sintaxis al aadir una pgina de contenido al

Master Page?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
9. Cul es el comportamiento de un Master Page en tiempo de ejecucin?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
10. Cmo configurar una pgina de contenido en un Master Page?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

Resumen
El estado de vista es el mtodo que utiliza el marco de trabajo de la pgina ASP.NET
para conservar los valores de pgina y control entre acciones de ida y vuelta. La
propiedad ViewState es un diccionario que contiene pares clave/valor con los datos
del estado de vista.
El estado de sesin de ASP.NET permite almacenar y recuperar los valores de un
usuario cuando el usuario explora diferentes pginas ASP.NET que conforman una
aplicacin Web. El estado de sesin de ASP.NET identifica las solicitudes recibidas
desde el mismo explorador durante un perodo limitado de tiempo como una sesin y
conserva los valores de las variables durante la duracin de esa sesin. ASP.NET
proporciona dos eventos que ayudan a administrar las sesiones de usuario:
Session_OnStart se desencadena cuando comienza una nueva sesin, y
Session_OnEnd se desencadena cuando se abandona o caduca una sesin.
El estado de aplicacin es un repositorio de datos disponible para todas las clases de
una aplicacin ASP.NET. El estado de aplicacin se almacena en la memoria del
servidor y ofrece ms rapidez que el almacenamiento y la recuperacin de informacin
de una base de datos.
La cach de aplicaciones permite almacenar, en memoria, datos arbitrarios mediante
programacin utilizando pares de clave y valor. La cach de aplicaciones son voltiles,
lo que significa que no se almacenan en memoria durante toda la duracin de la
aplicacin.
Un Master Page es un archivo de ASP.NET con la extensin .master que tiene un diseo
predefinido que puede incluir texto esttico, elementos HTML y controles de servidor.
El Master Page se identifica mediante una directiva @Master que reemplaza la
directiva @Page utilizadas en las pginas aspx.
Para definir el contenido de los controles de la pgina principal, cree pginas de
contenido individuales, que son pginas ASP.NET (archivos .aspx y, opcionalmente,
archivos de cdigo subyacente) que estn enlazadas a una pgina principal concreta. El
enlace se establece en la directiva @ Page de la pgina de contenido al incluir un
atributo MasterPageFile que apunta a la pgina principal que se va a utilizar.
Puede adjuntar pginas de contenido a un Master Page en tres niveles:
o En el nivel de la pgina, puede utilizar una directiva de pgina en cada pgina
de contenido para enlazarla a una pgina principal.
o En el nivel de la aplicacin, en el Web.config, puede especificar todas las
pginas de ASP.NET (archivos .aspx) de la aplicacin que se van a enlazar.
o En el nivel de la carpeta, la configuracin se define en un archivo Web.config
en una nica carpeta.
Si desea hacer consultas:

http://msdn.microsoft.com/es-es/library/18sc7456.aspx
Pgina referente al Master Page
http://msdn.microsoft.com/es-es/library/wcyt4fxb.aspx
Pgina referente al manejo de temas y mscaras
http://msdn.microsoft.com/es-es/library/75x4ha6s.aspx
Pgina referente al manejo de estados

56

UNIDAD DE
APRENDIZAJE
CREACIN DE CONTROLES DE USUARIO

que proporciona el Framework 4.0, construyen el diseo de controles de Usuario Web para
reutilizar el cdigo en un Sitio Web, adems de realizar un desarrollo mucho ms rpido
trabajando de esta manera. Tambin, desarrollan controles de asistente para un Sitio Web.
TEMARIO
Definicin de un control de usuario

Estructura de un control de usuario
Agregar un control de usuario a un Web Form
Definir propiedades y mtodos a un control de Usuario
Eventos de los controles de usuario
Hacer referencias a recursos externos
Los alumnos crean un control de usuario.

Los alumnos definen propiedades y mtodos de un control de usuario.
Los alumnos agregan un control de usuario a un WebForm.
Los alumnos reutilizar un control de usuario en distintos WebForms.

58
1. Definicin de Controles de Usuario

Adems de utilizar controles de servidor Web y HTML, puede crear controles personalizados y
reutilizables con las mismas tcnicas que utiliza para las pginas Web ASP.NET. Estos se
denominan controles de usuario.
Aunque debe elegir un nico lenguaje cuando crea un control de usuario, puede incluir
diversos, cada uno de ellos creado con un lenguaje diferente, en una misma pgina Web
ASP.NET. Por ejemplo, puede crear con Visual Basic un control de usuario que importe datos
de un archivo XML y crear con C# otro que contenga un formulario de pedido, y puede incluir
ambos controles en la misma pgina Web ASP.NET.
Puede almacenar en cach el resultado de un control de usuario independientemente del

resto de la pgina Web ASP.NET en que est incluido. Esta tcnica, denominada
almacenamiento en cach de fragmentos, puede mejorar el rendimiento del sitio. Por ejemplo,
si el control de usuario contiene un control de servidor ASP.NET que realiza una solicitud a la
base de datos, pero el resto de la pgina solo contiene texto literal y cdigo simple que se
ejecuta en el servidor, puede utilizar en el control de usuario el almacenamiento en cach de
fragmentos para mejorar el rendimiento de la aplicacin
1.1. Informacin general sobre los controles de usuario ASP.NET
En ocasiones, es posible que necesite cierta funcionalidad en un control que no est incluida
en los controles de servidor Web ASP.NET integrados. En estos casos, puede crear sus propios
controles. Dispone de dos opciones. Puede crear lo siguiente:
Controles de usuario. Son contenedores en los que puede colocar controles de

formato y de servidor Web. A continuacin, puede tratar el control de usuario como
una unidad y definir propiedades y mtodos para el mismo.
Controles personalizados. Son clases escritas por un desarrollador que se derivan de
Control o WebControl.
Los controles de usuario son mucho ms fciles de crear que los controles personalizados, ya
que es posible reutilizar los ya existentes. Esto permite crear con facilidad controles con
elementos de interfaz de usuario complejos.
2. Estructura de los controles de usuario

Un control de usuario Web ASP.NET es similar a una pgina Web ASP.NET completa (archivo
.aspx) e incluye una pgina de interfaz de usuario y cdigo. El proceso de creacin del control
de usuario es muy similar al proceso de creacin de una pgina ASP.NET, slo que al final se
agregan el formato y los controles secundarios necesarios. Al igual que una pgina, un control
de usuario puede incluir el cdigo necesario para manipular su contenido e incluso realizar
tareas como el enlace de datos.

Un control de usuario se diferencia de una pgina Web ASP.NET en los siguientes aspectos:
La extensin de nombre de archivo para el control de usuario es .ascx.

En lugar de una directiva @Page, el control de usuario contiene una directiva
@Control que define la configuracin y otras propiedades.
Los controles de usuario no se pueden ejecutar como archivos independientes. En su
lugar, debe agregarlos a las pginas ASP.NET, como hara con cualquier otro control.
El control de usuario no contiene elementos html, body o form. Estos elementos
deben estar en la pgina de alojamiento.
En un control de usuario puede utilizar los mismos elementos HTML (excepto html, body y
form) y controles Web que en una pgina Web ASP.NET. Por ejemplo, si est creando un
control de usuario para utilizar una barra de herramientas, puede colocar una serie de
controles de servidor Web Button en el control y crear controladores de eventos para los
botones.
En el ejemplo siguiente, se muestra un control de usuario que implementa un control de

nmero en el que los usuarios pueden hacer clic en los botones arriba y abajo para mostrar
varias opciones de un cuadro de texto.
<%@ Control Language="VB" ClassName="UserControl1" %>

<script runat="server">
Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
Protected currentColorIndex As Integer = 0
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs)
If IsPostBack Then
currentColorIndex = CInt(ViewState("currentColorIndex"))
Else
currentColorIndex = 0
DisplayColor()
End If
End Sub
Protected Sub DisplayColor()

textColor.Text = colors(currentColorIndex)
ViewState("currentColorIndex") = currentColorIndex.ToString()
End Sub
Protected Sub buttonUp_Click(ByVal sender As Object, _

If currentColorIndex = 0 Then
currentColorIndex = colors.Length - 1
Else
currentColorIndex -= 1
End If
DisplayColor()
End Sub

60
Protected Sub buttonDown_Click(ByVal sender As Object, _

If currentColorIndex = colors.Length - 1 Then
currentColorIndex = 0
Else
currentColorIndex += 1
End If
DisplayColor()
End Sub
</script>
<asp:TextBox ID="textColor" runat="server"
ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp" runat="server"
Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown" runat="server"
Text="v" OnClick="buttonDown_Click" />
Tenga en cuenta que el control de usuario es muy similar a una pgina ASP.NET, ya que
contiene varios (un control TextBox y dos Button) y un cdigo que dirige los eventos Click de
los botones y el evento Load de la pgina. Sin embargo, el control no contiene ningn formato,
excepto para los controles, y en lugar de una directiva @Page contiene una directiva
@Control.
3. Agregar un control de usuario a una pgina

Para agregar un control de usuario a una pgina, es necesario registrarlo primero en la que lo
aloja (o pgina host). Al hacerlo, se debe especificar el archivo .ascx que lo contiene, as como
un prefijo y un nombre de etiqueta que se utilizarn para declarar el control en la misma.
4. Definir propiedades y mtodos para un control de usuario

Puede definir propiedades y mtodos para un control de usuario de la misma manera que lo
hara para una pgina. La definicin de una propiedad para un control de usuario permite
establecer sus propiedades mediante declaracin y en el cdigo.
5. Eventos de los controles de usuario

Si un control de usuario contiene controles de servidor Web, es posible escribir un cdigo en
dicho control para controlar los eventos producidos por los controles secundarios. Por
ejemplo, si su control de usuario contiene un control Button, puede crear un controlador en el
primero para el evento Click del botn.
De manera predeterminada, los eventos producidos por los controles secundarios en un

control de usuario no estn disponibles para la pgina host. Sin embargo, es posible definir en
el control de usuario eventos y producirlos de modo que se notifiquen a la pgina host. Esto se
hace de la misma manera que la definicin de eventos para una clase. Para obtener ms
informacin, vea Provocar un evento.

6. Hacer referencia a recursos externos

Cuando se ejecuta un control de usuario, las referencias a recursos externos, como imgenes o
delimitadores para otras pginas, se resuelven utilizando la direccin URL del control de
usuario como direccin URL base. Por ejemplo, si el control de usuario contiene un control
Image cuya propiedad ImageUrl se ha establecido en Images/Button1.gif, la direccin URL de la
imagen se agrega a la direccin URL del control de usuario para resolver la ruta de acceso
completa a la imagen. Si el control de usuario hace referencia a un recurso que no se
encuentra en una subcarpeta del propio control, se debe proporcionar una ruta de acceso que
se resuelva en la carpeta correcta en tiempo de ejecucin.
7. Almacenamiento en cach y controles de usuario

Los controles de usuario pueden admitir el uso de directivas de almacenamiento en cach
independientes de la pgina host. Por consiguiente, puede agregar a las pginas controles de
usuario que permitan almacenar en cach partes de una pgina
LABORATORIO 3.1
Tema: Creacin de un Control Wizard. Este control nos permite configurar pasos para
poder ejecutar alguna tarea.
Cree un WebForm y del Cuadro de herramientas agregue un control Wizard

62
Haga Click en el link que dice Step 1 y agregue un texto que diga Nombre y al lado un control
TextBox.
Haga Click en el link que dice Step 2 y agregue un texto que diga Email y al lado un control
TextBox.
De las Tareas de Wizard seleccione Agregar o quitar WizardSteps

Haga Click en el Botn Agregar y agregue un paso que Diga en el Title Finalizado y en su
propiedad StepType=Complete.
De las tareas de Wizard seleccione en la opcin Paso = Finalizado y haga el siguiente diseo:
Programacin:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Me.Load
lblUsuario.Text = TextBox1.Text
lblEmail.Text = TextBox2.Text
End Sub

64
De las Tareas de Wizard, seleccione el Paso 1. Compile con Ctrl + F5 y pruebe la aplicacin.
LABORATORIO 3.2
Tema: Creacin de un Web Control de Usuario
Agregue un nuevo elemento a su sitio web y seleccione la plantilla Control de usuario

web. Colquele el nombre: ListPicker.ascx
Se generar el siguiente cdigo:

En la vista de diseo, agregue una tabla de 1 fila y 3 columnas:
Agregue 2 controles Listbox y 3 buttons que tengan el siguiente diseo:
Los Listbox se llamarn SourceList y TargetList respectivamente, y los buttons btnAddAll,

btnAddOne, y btnEliminar respectivamente
Programacin:
Protected Sub AddItem(ByVal li As ListItem)
TargetList.SelectedIndex = -1
TargetList.Items.Add(li)
End Sub
Protected Sub btnAddAll_Click(ByVal sender )

Dim li As ListItem
For Each li In SourceList.Items
AddItem(li)
Next
End Sub

66
Protected Sub btnAddOne_Click(ByVal sender As )

If SourceList.SelectedIndex >= 0 Then
AddItem(SourceList.SelectedItem)
End If
End Sub
Protected Sub btnEliminar_Click(ByVal sender )

If TargetList.SelectedIndex >= 0 Then
TargetList.Items.RemoveAt(TargetList.SelectedIndex)
End If
End Sub
Agregue un WebForm que se llame HostUserControl.aspx y arrastre el archivo ListPicker.ascx

dentro del WebForm. El resultado ser el siguiente:
Revisemos el cdigo que se ha generado:
<%@ Register Src="ListPicker.ascx" TagName="ListPicker" TagPrefix="uc1" %>
Se requiere la directiva @ Register porque el control de usuario es un componente externo.

Los valores que estn en la directiva proporcionan la informacin necesaria para que ASP.NET
encuentre el control cuando compile y ejecute la pgina. Los atributos TagPrefix y TagName

juntos especifican cmo se declara el control de usuario en la pgina. El atributo Src especifica
el archivo y, si es necesario, la ruta de acceso donde est ubicado el archivo de cdigo fuente.
<uc1:ListPicker id="ListPicker1" Runat="server" />
El elemento para un control de usuario es similar al elemento para un control de servidor

ASP.NET normal. La diferencia consiste en que el control de usuario tiene un prefijo de
etiqueta diferente (uc1) y un nombre de etiqueta nico (ListPicker). Aunque la directiva
@ Register establece automticamente los valores cuando el control de usuario se coloca en la
pgina, se puede usar cualquier prefijo de etiqueta y nombre de etiqueta para el control de
usuario, siempre y cuando los valores no se estn empleando ya en la pgina.
Para probar el control de usuario
1. Presione CTRL+F5 para ejecutar la pgina. La pgina aparece en el explorador con las
dos listas y tres botones que constituyen su control de usuario.
2. Haga clic en el botn >> (AddAll). Todos los valores de la lista SourceList se copian en
la lista TargetList.
3. Haga clic en cada elemento de la lista TargetList, de uno en uno, y luego haga clic en el
botn X (Remove) hasta que haya quitado todos los elementos.
4. Seleccione un valor nico en la lista SourceList y, a continuacin, haga clic el botn >
(AddOne).
El valor nico se copia en la lista TargetList.
5. Si lo desea, experimente ms con el control hasta que est seguro de que funciona
como esperaba.
6. Cuando finalice, cierre el explorador.
LABORATORIO 3.3
Tema: Agregar propiedades y mtodos personalizados al control de usuario.
Ahora, el control de usuario funciona, pero no es todava til como un control de uso general.
Una versin ms prctica del control de usuario le permitira hacer lo siguiente:
Especificar una lista de elementos que se mostrarn dinmicamente en la lista

SourceList.
Obtener la lista de elementos que el usuario ha seleccionado en la lista TargetList.
Especificar opcionalmente si desea permitir valores duplicados en la lista TargetList.
Proporcionar a los usuarios una manera de borrar rpidamente todos los elementos de
la lista TargetList.
La realizacin de estas tareas requiere que la pgina host pueda comunicarse con el control de
usuario para compartir valores (establecer y leer propiedades) y emitir comandos (llamar a
mtodos). En esta parte, se cambiar el control de usuario y se le agregar algunos miembros
(propiedades y mtodos).
Se le agregarn dos propiedades al control de usuario. La primera recupera todos los

elementos que estn en la lista TargetList. La segunda permite especificar si la lista TargetList
acepta valores duplicados. Ms adelante, en este ejemplo, se incluir un mtodo que le
permitir rellenar la lista SourceList.

68
Para agregar el cdigo que define las propiedades personalizadas
1. Para el control ListPicker, abra o cambie al archivo de cdigo fuente.

2. Use el cdigo siguiente para crear la propiedad SelectedItems
3. La propiedad AllowDuplicates es de lectura y escritura. El valor de la propiedad
AllowDuplicates se debe guardar explcitamente en Ver estado para que se conserve
entre recorridos de ida y vuelta. (La propiedad SelectedItems no tiene que guardarse
explcitamente en Ver estado porque la lista TargetList guarda los valores all.)
Public ReadOnly Property SelectedItems() As ListItemCollection

Get
Return TargetList.Items
End Get
End Property
Public Property AllowDuplicates() As Boolean

Get
Return CType(ViewState("allowDuplicates"), Boolean)
End Get
Set(ByVal value As Boolean)
ViewState("allowDuplicates") = value
End Set
End Property
Ahora, tiene las propiedades definidas. Sin embargo, todava debe modificar el cdigo
existente en el control de usuario para aprovechar el valor de la propiedad AllowDuplicates.
Modificar el cdigo de AddItem:
Protected Sub AddItem(ByVal li As ListItem)

If Me.AllowDuplicates = True Then
Else
If TargetList.Items.FindByText(li.Text) Is Nothing Then
End If
End If
End Sub
El cdigo realiza la misma funcin que antes (agrega un elemento a la lista TargetList), pero
ahora tambin comprueba si la propiedad AllowDuplicate est establecida en true. Si la
propiedad AllowDuplicate se establece en true, el elemento se agrega. Si la propiedad
AllowDuplicate se establece en false, el cdigo busca un elemento existente que tenga el
mismo valor que el nuevo elemento propuesto y, a continuacin, agrega el nuevo elemento si
no encuentra ningn elemento existente.
Como va a establecer el contenido de la lista SourceList utilizando una propiedad, puede quitar
los datos de prueba que introdujo A, B, C.

Agregue los siguientes dos mtodos:
Este mtodo me ayudara establecer cul ser el origen de datos del control SourceList:
Public Sub AddSourceItem(ByVal sourceItem As Object)

SourceList.DataSource = sourceItem
SourceList.DataBind()
End Sub
Public Sub ClearAll()

SourceList.Items.Clear()
TargetList.Items.Clear()
End Sub
Cambie en el WebForm de Prueba del control de Usuario la propiedad AllowDuplicates =True
Programacin:
Con este cdigo llenamos con un ArrayList de Pases el SourceList.

Dim arreglo As New ArrayList
With arreglo
.Add("BRASIL")
.Add("PERU")
.Add("ARGENTINA")
.Add("COLOMBIA")
.Add("ECUADOR")
End With
ListPicker1.AddSourceItem(arreglo)
End If
End Sub

70
Compile Ctrl + F5, y compruebe los resultados.
LABORATORIO 3.4
Tema: Reutilizando un Control de Usuario en distintos Web Forms.
Agregue un nuevo WebForm llamado HostUserControl2.aspx y cree el siguiente diseo

utilizando un control ListPicker del ejemplo anterior.
Programacion
Protected Sub btnLoad_Click(ByVal sender )

Dim path As String = Server.MapPath(Request.ApplicationPath)
Dim files() As String = System.IO.Directory.GetFiles(path)
ListPicker1.AddSourceItem(files)
End Sub

Protected Sub btnShow_Click(ByVal sender )

Dim lItem As ListItem
Dim selectedItemsString As String = ""
For Each lItem In ListPicker1.SelectedItems
selectedItemsString &= "<br>" & lItem.Text
Next
lblMensaje.Text = selectedItemsString
End Sub
Protected Sub btnClear_Click(ByVal sender )

ListPicker1.ClearAll()
End Sub
Compile con Ctrl + F5, y compruebe los resultados.

72
Autoevaluacin
1. Cules son los tipos de controles de usuario que se pueden desarrollar?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
2. Cmo agreg un control de usuario a un WebForm?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
3. Cmo se definen los mtodos y propiedades en un control de usuario?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
4. Cules son las ventajas de utilizar controles de usuario?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
5. Cmo se manejan los eventos en un control de usuario?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
6. Cmo se acceden a las propiedades de un control de usuario desde el WebForm en el que

lo est utilizando?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

Resumen
Aunque debe elegir un nico lenguaje cuando crea un control de usuario, puede incluir
diversos controles de usuario, cada uno de ellos creado con un lenguaje diferente, en
una misma pgina Web ASP.NET. Por ejemplo, puede crear con Visual Basic un control
de usuario que importe datos de un archivo XML y crear con C# otro que contenga un
formulario de pedido, y puede incluir ambos controles en la misma pgina Web
ASP.NET.
Puede almacenar en cach el resultado de un control de usuario independientemente
del resto de la pgina Web ASP.NET en que est incluido. Esta tcnica, denominada
almacenamiento en cach de fragmentos, puede mejorar el rendimiento del sitio. Por
ejemplo, si el control de usuario contiene un control de servidor ASP.NET que realiza
una solicitud a la base de datos, pero el resto de la pgina solo contiene texto literal y
cdigo simple que se ejecuta en el servidor, puede utilizar en el control de usuario el
almacenamiento en cach de fragmentos para mejorar el rendimiento de la aplicacin
En ocasiones, es posible que necesite cierta funcionalidad en un control que no est incluida
en los controles de servidor Web ASP.NET integrados. En estos casos, puede crear sus propios
controles. Dispone de dos opciones. Puede crear:
Controles de usuario. Son contenedores en los que puede colocar controles de

formato y de servidor Web. A continuacin puede tratar el control de usuario como
una unidad y definir propiedades y mtodos para el mismo.
Controles personalizados. Son clases escritas por un desarrollador que se derivan de
Control o WebControl.
Los controles de usuario son mucho ms fciles de crear que los controles personalizados, ya
que es posible reutilizar los ya existentes. Esto permite crear con facilidad controles con
elementos de interfaz de usuario complejos.

http://msdn.microsoft.com/es-es/library/4d1baz78(VS.80).aspx
Pgina referente a controles de Usuario
http://msdn.microsoft.com/es-es/library/wt3k2fyw(v=VS.80).aspx
Pgina referente a creacin de controles
Bibliografa especializada:
http://www.macoratti.net
http://www.willydev.net

74

UNIDAD DE
APRENDIZAJE
ACCESO A DATOS CON ADO.Net
Al trmino de la unidad, los alumnos elaboran aplicaciones Web que acceden a un origen de datos
usando el modelo de objetos ADO.NET.
TEMARIO
El modelo de objetos ADO.NET
Manejo de datos utilizando DataSet y DataReader
Manejo de controles de datos: GridView, DataList, DropDownList
Manejo de controles DataSource: SqlDataSource, ObjectDataSource y XmlDataSource,
LinqDataSource
Los alumnos manejan la conexin a la base de datos de un origen de datos.
Los alumnos consultan y actualizan los datos desde un origen de datos
Los alumnos configurar los controles enlazados a los datos para realizar operaciones de
consultas y actualizacin.

76
1. INTRODUCCIN AL ACCESO A DATOS
La mayora de las aplicaciones se escriben para que procesen informacin que est
almacenada o lo estar en un soporte concreto: una base de datos o un RDBMS. Es
fundamental contar con servicios que hagan posible conectar con esos recursos y transferir la
informacin desde y hacia la aplicacin.
Estos servicios reciben la denominacin genrica de ADO.NET. Esta nueva iteracin aporta una
serie de interfaces y objetos, as como nuevos controles y mejoras en las clases ya existentes y,
tambin, en el propio motor que se encarga de la manipulacin de los datos en el cliente.
ADO.NET incorpora varios proveedores de datos, entre ellos dos que permiten conectar con
SQL Server y Oracle, as como otros que facilitan el uso de controladores ODBC
2. ARQUITECTURA DE ADO .NET

Tradicionalmente, el procesamiento de datos ha dependido principalmente de un modelo de
dos niveles basado en una conexin. A medida que el procesamiento de datos utiliza cada vez
ms arquitecturas de varios niveles, los programadores estn pasando a un enfoque sin
conexin con el fin de proporcionar una escalabilidad mejor para sus aplicaciones.
2.1 COMPONENTES DE ADO.NET

Existen dos componentes de ADO .NET que se pueden utilizar para obtener acceso a datos y
manipularlos:
El DataSet
Proveedores de datos de .NET FrameWork
2.1.1 El DataSet
Est diseado para el acceso a datos independientemente del origen de datos. Como
resultado, se puede utilizar con mltiples y distintos orgenes de datos, con datos XML o para
administrar datos locales de la aplicacin. El DataSet contiene una coleccin de uno o ms
objetos DataTable formados por filas y columnas de datos, as como informacin sobre claves
principales, claves externas, restricciones y relaciones relativas a los datos incluidos en los
objetos DataTable

2.1.2 Proveedores de datos de .NET Framework

Un proveedor de datos de .NET Framework sirve para conectarse a una base de datos, ejecutar
comandos y recuperar resultados. Los proveedores de datos de .NET Framework crean un nivel
mnimo entre el origen de datos y su cdigo, con lo que aumenta el rendimiento sin sacrificar
su funcionalidad.
Proveedor de Datos
System.Data.SqlClient: acceso a datos para SQL Server 7.0 o posterior
System.Data.OleDb: origen de datos que se exponen mediante OLE DB
System.Data.Odbc: origen de datos que se exponen mediante ODBC
System.Data.OracleClient: acceso a datos de Oracle 8.1.7 o posterior
2.1.3 Objetos principales de los proveedores de datos de .NET Framework

A continuacin, se describen los cuatro objetos centrales que constituyen un proveedor de
datos de .NET Framework.
Connection. Establece una conexin a un origen de datos determinado.
Command. Ejecuta una sentencia o procedure. Expone Parameters y puede ejecutarse
en el mbito de un objeto Transaction.
DataReader. Lee una secuencia de datos de slo avance y slo lectura desde un origen
de datos.
DataAdapter. Llena un DataSet y realiza las actualizaciones necesarias en el origen de
datos.
Los proveedores de datos de .NET Framework tambin incluyen las que se enumeran a
continuacin:
Transaction. Permite incluir comandos en las transacciones que se realizan en el

origen de datos.
CommandBuilder. Objeto que genera las propiedades de comando de un DataAdapter
o que obtiene, de un procedimiento almacenado, informacin acerca de parmetros
con las que puede rellenar la coleccin Parameters de un objeto Command.
Parameter. Define los parmetros de entrada y salida para los comandos, y
procedimientos almacenados.
Error. Expone la informacin relacionada con una advertencia o errores devueltos por
un origen de datos.
ClientPermission. Se proporciona para los atributos de seguridad de acceso a cdigo
de los proveedores de datos de .NET Framework.
3. Efectuando Acceso a Datos
Controles de Fuente de Datos. ASP.NET 4.0 tiene controles declarativos de fuente de

datos que hacen accesibles los datos de almacenes internos (bases de datos SQL,
objetos de negocios de capa intermedia o ficheros XML) a los controles de la interfaz
de usuario (UI), para el enlazado a datos en una pgina. Los controles de fuente de
datos tambin tienen otras capacidades como la clasificacin, la paginacin, el
"catching", la actualizacin, la insercin y la eliminacin de datos, que los controles de
la UI pueden aprovechar sin requerir ningn tipo de cdigo.

78
Controles de Enlazado a Datos. ASP.NET incluye controles de UI de enlazado a datos como

el GridView, DetailsView, FormView, TreeView y Men, que se pueden personalizar para
mostrar los datos en diferentes formatos. Los controles GridView, DetailsView y FormView
pueden, adems, aprovechar las capacidades de la fuente de datos, haciendo as ms
sencillo las operaciones de clasificacin, paginacin y actualizacin en pginas orientadas a
datos (data-driven).
Parmetros de Control de Datos. Las fuentes de datos pueden aceptar parmetros de
entrada de diferentes fuentes utilizando los nuevos "objetos de parmetros" de controles
de datos de ASP.NET 2.0. Estos "objetos de parmetros" nos permiten proporcionar
fcilmente los valores de las propiedades de los controles de servidor (campos sesin,
aplicacin, cookie y querystring) y las propiedades del perfil de usuario para operaciones
de datos parametrizadas. La utilizacin de estos parmetros permite el filtrado y
escenarios de "master-details" con poco cdigo o cdigo personalizado.
Sintaxis de Enlazado a Datos Mejorada. La sintaxis de enlazado a datos de
DataBinder.Eval en ASP.NET se ha simplificado para el escenario comn de enlazar un
control en una plantilla enlazada a datos. Es posible, adems, asociar dos formas de
enlazar datos con las propiedades de un control en una plantilla para permitir, as que los
valores se pasen automticamente para la actualizacin, insercin o borrado en la fuente
de datos. Para datos XML jerrquicos, ASP.NET 4.0 tambin incluye una sintaxis de
enlazado a datos basado en XPath.
Bases de Datos de Ficheros Locales Utilizando SQL Express. Para un desarrollo ms
sencillo, ASP.NET 4.0 soporta la habilidad de conectar con una base de datos SQL Express
como un fichero local de la aplicacin, eliminando la necesidad de enviar la base de datos
a un servidor slo para realizar el trabajo de desarrollo. Por supuesto, tambin se puede
seguir conectando a las bases de datos de un servidor SQL.
Esta seccin describe stas y otras caractersticas del acceso a datos en ASP.NET 4.0.
Prcticamente, todas las aplicaciones Web dinmicas realizan algn tipo de acceso a datos y,
afortunadamente, ASP.NET 4.0 facilita mucho esta accin. A diferencia de versiones
anteriores, que requera que los desarrolladores escribieran cdigo personalizado para
recuperar y enlazar los datos a controles de servidor, ASP.NET 4.0 permite una solucin
declarativa para el enlazado a datos que requiere poco cdigo para los escenarios de datos
ms comunes, como por ejemplo:
Seleccionar y Mostrar Datos

Ordenar, Paginar y Cachear Datos
Actualizar, Insertar y Borrar Datos
Filtrar o "Master-Details" utilizando parmetros
ASP.NET 4.0 tiene dos tipos de controles de servidor que participan en este modelo declarativo
de enlazado a datos. Estos manejan toda la complejidad del modelo Web para escenarios de
datos, de forma que los desarrolladores no tienen que entender los eventos del ciclo de vida
de las peticiones para realizar el enlazado de los datos. Otro beneficio es que se puede
extender de forma sencilla para soportar el acceso a datos de otros proveedores.

4. Controles de Fuente de Datos

Los controles de fuente de datos no se representan a s mismos, sino que representan un
almacn de datos; por ejemplo, una base de datos, un objeto de negocio, un fichero XML o un
Web Service XML. Tambin, hacen posibles funcionalidades ms "ricas" sobre los datos
(clasificacin, paginacin, filtrado, actualizacin, borrado e insercin) que pueden utilizar los
controles de enlazado a datos de la UI de forma automtica. ASP.NET incluye los siguientes
controles de servidor, por defecto:
Nombre Descripcin
SqlDataSource Permite enlazar a una base de datos SQL representada por un proveedor
ADO.NET, como por ejemplo Microsoft SQL Server.
ObjectDataSource Permite enlazar a un objeto de capa intermedia como los de capa de
acceso a datos o un componente de negocios.
AccessDataSource Permite enlazar a una base de datos Microsoft Access (Jet).
SiteMapDataSource Permite enlazar a la jerarqua mostrada por un proveedor de navegacin
de sites de ASP.NET 4.0.
LinqDataSource Permite el uso de Language-Integrated Query (LINQ) en una pgina web
ASP.NET a travs de texto de marcado para recuperar y modificar los
datos de un objeto de datos.
XmlDataSource Permite enlazar a un fichero o documento XML.
5. Controles de Enlazado de Datos

Los controles de enlazado de datos son controles de UI que renderizan los datos como marcas
para los dispositivos o navegadores clientes. Pueden auto-enlazar una fuente de datos a un
dato mostrado y traerlos en el momento apropiado dentro del ciclo de vida de la pgina. Estos
controles puedes aprovecharse, opcionalmente, de las capacidades de la fuente de datos,
como por ejemplo clasificacin, paginacin, filtrado, actualizado, borrado y insercin.
Asimismo, se conectan con una fuente de datos a travs de su propiedad DataSourceID. Se
puede estar familiarizado con algunos de los controles de enlazado de datos de ASP.NET 1.x,
como por ejemplo DataGrid, DataList, Repeater, y controles de lista como DropDownList.
ASP.NET 4.0 contiene varios controles de enlazado de datos, como
Nombre Descripcin
GridView Presenta los datos en formato de "rejilla" (grid). Es una evolucin del control
DataGrid, y puede aprovechar automticamente las caractersticas de la fuente de
datos.
DetailsView Presenta un slo elemento en una tabla de parejas etiqueta/valor, similar a la
vista de formulario de Microsoft Access. Este control tambin puede aprovechar
automticamente las caractersticas de la fuente de datos.
FormView Presenta de la forma definida en una platilla personalizada un slo elemento de
datos. Presenta un elemento en una tabla de parejas etiqueta/valor, similar a la
vista de formulario de Microsoft Access. Este control tambin puede aprovechar
automticamente las caractersticas de la fuente de datos.
TreeView Presenta los datos en una vista de rbol jerrquico de nodos expandibles.
Menu Presenta los datos en un men dinmico expandible (incluyendo flyouts).

80
LABORATORIO 4.1
Tema: Conectarse a una Base de Datos SQL Server
Mostrar en un control GridView el listado de los Clientes de la Base de Datos.
1. Crear el siguiente Web Form
2. Configurar el SqlDataSource mediante los siguientes pasos:
Haga Click de Tareas Comunes la opcin que dice Configure Data Source
Se abrir el siguiente cuadro de dilogo donde debe dar click en el Botn New Connection

De la lista de Data Source seleccione Microsoft SQL Server
Haga Click en el Botn Continue y llene los parmetros que muestra la figura a continuacin:
(el password en nuestro caso es sql)

82
Haga Click en el Botn OK y se mostrar la siguiente figura donde se puede apreciar la

cadena de Conexin a la Base de Datos.

Haga Click en el botn Siguiente o Next y debe colocar un nombre que usted elija para que la
cadena de conexin se guarde en el archivo de configuracin. En este caso, se le pondr Cn.
Haga Click en el botn Siguiente o Next. Seleccionar la tabla desde la que se van a consultar
los datos.
Haga Click en el botn Siguiente o Next. Seleccionar los campos que se van a consultar.

84
Haga Click en el botn Siguiente o Next y haga click en el botn Test Query.
Haga Click en Finalizar.

Ahora, seleccione el control GridView y de Tareas Comunesy, luego, elija la opcin el Origen
de Datos o Data source as como se muestra en la figura:
Presione Ctrl + F5 y compile la Aplicacin. Debe mostrar la siguiente figura:
Se puede agregar otras funcionalidades como Paginacin y Ordenacin siguiendo los pasos que
se muestran a continuacin:

86
Vuelva a compilar y vea los resultados:
Para cambiar la cantidad de registros por pgina, solo modifique la propiedad PageSize del
GridView y colquele el valor que necesite.
Finalmente, revise el archivo Web.Config que se debe haber creado, automticamente, donde
podr visualizar la cadena de conexin con nombre Cn. sta la puede reutilizar en otro
webForm.

LABORATORIO 4.2
Tema: Conectarse a un origen de Datos tipo Objeto.
Mostrar en un control GridView el listado de las facturas en un rango de fechas. Solo el

nmero de factura, Fecha de facturacin y Fecha de cancelacin.
1. Crear el siguiente Web Form
2. Crear un objeto DataSet que ser donde se establecern los objetos de acceso a datos
mediante los TableAdapters.
3. De la Pantalla que aparece en el DataSet, haga click en el link que dice Server
Explorer

88
4. A continuacin, aparecer el Server Explorer desde donde arrastre la tabla

TB_FACTURA para que se cree el DataTable y el TableAdapter.
5. Agregue una consulta al TableAdapter, haciendo Click en la opcin Add Query

6. Seleccione la primera opcin del Asistente que aparece, ya que se crear una
sentencia SQL.
7. Seleccione la primera opcin de la siguiente pantalla, ya que la sentencia SQL devuelve

un conjunto de registros.

90
8. Digite la clausula WHERE de la siguiente sentencia SQL:
9. Haga Click en Siguiente y coloque los nombres de los mtodos, tal como lo muestra
la siguiente figura:
10. Haga Click en Siguiente y verifique que las sentencias se hayan generado con xito:

11. Haga click en Finalizar y aparecern los nuevos mtodos en el TableAdapter:
12. Configure el ObjectDataSource seleccionando la opcin, de Tareas Comunes,

Configurar Origen de Datos:

92
13. Del siguiente cuadro de dilogo, seleccione el Objeto TB_FACTURATableAdapter:
14. Del siguiente cuadro de dilogo, seleccione el Mtodo GetDataByFechas y configure

sus parmetros:
15. D Click en siguiente para configurar los 2 parmetros INICIO y FIN:

16. Haga Click en Finalizar y Configure el GridView para que se enlace con el
ObjectDatasource:

94
17. Compile la aplicacin CTRL + F5 y ver el siguiente resultado:
Pero se pidi que solo mostrara el nmero de factura, fecha de facturacin y Fecha de
cancelacin, para lo cual se va a configurar el GridView:
De las Tareas Comunes, seleccione la opcin Editar Columnas
De la lista de Campos Seleccionados, eliminar todos, dejando solo aquellos que se han pedido:

Haga Click en OK y ver como queda el GridView:

96
Vuelva a compilar para ver el WebForm:
LABORATORIO 4.3
Tema: Conectarse a un origen de Datos usando del modelo de Clases LINQ.
Mostrar en un control GridView el listado de las facturas de un Cliente y el nmero de Factura,

Fecha de facturacin y Fecha de cancelacin
1. Disear el siguiente WebForm:
2. Crear un modelo de Clases LINQ to SQL llamado DataVentas:

3. Haga Click en el link que dice Server Explorer y arrastre la tabla TB_FACTURA y
TB_CLIENTE para generar las 2 Clases.

98
4. Configurar el LinqDataSource, seleccionando de Tareas Comunes la opcin

Configurar Origen de Datos:
5. Seleccionar del siguiente Cuadro de Dilogo la opcin DataVentasDataContext:
6. Seleccionar en el siguiente cuadro de dilogo los campos a utilizar: (esto es para el

control DropDownList)

7. Seleccione de las Tareas Comunes del DropDownList la opcin Seleccione Origen de

Datos y configure las opciones:
8. Seleccione del Contol GridView de Tareas Comunes la opcin Seleccionar Origen de

Datos y elija la opcin Nuevo Origen de Datos o New Data Source

100
9. Elija del siguiente cuadro de dilogo la opcin LINQ:
10. Elija del siguiente cuadro de dilogo DataVentasDataContext

11. Del siguiente cuadro de dilogo seleccione el TB_FACTURA y los campos que va a
mostrar. Luego, d Click en el botn WHERE:
12. Configure la sentencia WHERE, tal como aparece en la siguiente figura. Luego, haga
click en Agregar.

102
13. Luego, haga click en OK y se mostrar las siguiente figura. Se dar cuenta que ahora se
gener otro LinqDataSource.
14. Para finalizar de las Tareas Comunes del DropDownList, habilite la opcin que dice
Habilitar AutoPostBack:
15. Compile la aplicacin CTRL + F5

Autoevaluacin
1. Cules son los tipos de controles de fuente de datos?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
2. Cules son los tipos de controles enlazado a datos?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
3. Cules son los 4 componentes principales en ADO.Net?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
4. Qu se genera en el Archivo de configuracin Web.Config al utilizar el SqlDataSource?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
5. Para qu sirve un control LinqDataSource?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
6. Cul es la diferencia al utilizar un ObjectDataSource de un SQLDataSource?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

104
Resumen
ADO.NET incorpora varios proveedores de datos, entre ellos dos que permiten
conectar con SQL Server y Oracle, as como otros que facilitan el uso de controladores
ODBC y OLE DB para acceder a aquellos provenientes de Excel, Access, MySQL, etc.
Existen dos componentes de ADO .NET, que se pueden utilizar para obtener acceso a
datos y manipularlos: DataSet, Proveedores de datos de .NET FrameWork.
El DataSet est diseado para el acceso a datos independientemente del origen de

datos. Contiene una coleccin de uno o ms objetos DataTable formados por filas y
columnas de datos, as como informacin sobre claves principales, claves externas,
restricciones y relaciones relativas a los datos incluidos en los objetos DataTable.
Proveedores de datos sirve para conectarse a una base de datos, ejecutar comandos y
recuperar resultados. Los proveedores de datos de .NET Framework crean un nivel
mnimo entre el origen de datos y su cdigo, con lo que aumenta el rendimiento sin
sacrificar su funcionalidad.
Una cadena de conexin proporciona la informacin que un proveedor necesita para

comunicarse con una base de datos determinada. Se puede almacenar en el archivo
Web.config y hacer referencia en un control de origen de datos.
Es recomendable incluir las cadenas de conexin en el archivo Web.config. En el

elemento <configuration>, se puede crear un elemento secundario denominado
<connectionStrings>
Los controles enlazados a datos representan datos como marcados al explorador que
realiz la solicitud. Se pueden enlazar a un control de origen de datos y buscar datos
automticamente en el momento apropiado del ciclo de vida de la solicitud de pgina.
Consulte las siguientes pginas:

http://msdn.microsoft.com/es-es/library/6759sth4.aspx

UNIDAD DE
APRENDIZAJE
Arquitectura N Capas
usando el modelo de objetos ADO.NET bajo la arquitectura N Capas.
TEMARIO
Capa de entidades de negocio: Creacin de las clases, atributos y propiedades.
Capa de datos: Conexin a la Base de datos, clases y Mtodos de acceso a datos.
Capa de negocio: Clases y Mtodos que llamarn a los de la capa de datos.
Capa de presentacin: Diseo de GUI Web Forms
Los alumnos manejan la conexin y operaciones a la base de datos desde la Capa de
Datos a travs de los mtodos que se implementan.
Los alumnos usan Entidades de Negocio para actualizar datos pasando la informacin
desde la Capa de Presentacin a la Capa de Datos.
Los alumnos configuran los controles enlazados a los datos utilizando los mtodos de
la Capa de Negocio.

106
1. Arquitectura N Capas
Esta forma de desarrollo se ha implementado hace varios aos con el objetivo principal de
reutilizar cdigo y que el mantenimiento de las aplicaciones sea mucho ms rpido y
ordenado. El manejo de Capas permite agrupar ciertas funciones que cumplen un objetivo
especfico. Por ejemplo si yo quiero registrar, modificar o eliminar Clientes, tendr una Clase
Cliente, donde irn todos esos mtodos, los cuales tendrn como objetivo manipular o
actualizar los datos de un cliente.
La Arquitectura N Capas se basa en la que anteriormente se conoca como arquitectura en 3

Capas: Capa de Datos, Capa de Negocio, y Capa de Presentacin. Actualmente van creciendo el
nmero de capas ya que aparecen en el mercado nuevas tecnologas; por ejemplo, ahora se
podra crear capas de componentes donde vayan algunos DLL que se utilicen de manera global
para la aplicacin; podra ir una capa de Servicios, donde se alojen los servicios web que se
utilizarn para desarrollar ciertas tareas, entre otras. Por eso es que ahora ya no se habla de 3
Capas sino de N Capas ya que la cantidad de Capas que pueda tener una aplicacin ya no est
definida explcitamente.
En el diseo de aplicaciones distribuidas, se ha convertido en un principio ampliamente

aceptado la divisin de la aplicacin en componentes que ofrezcan servicios de presentacin,
empresariales y de datos.
Los componentes que realizan tipos de funciones similares se pueden agrupar en capas, que
en muchos casos estn organizados en forma de apilamiento para que los componentes que se
encuentran por "encima" de una capa determinada utilicen los servicios proporcionados por
sta, y un componente especifico utilizar la funcionalidad proporcionada por otros
componentes de su propia capa, y otras capas "inferiores", para realizar su trabajo.
Desde un punto de vista de alto nivel, se puede considerar que la solucin basada en servicios
est formada por varios servicios, los cuales se comunican entre s pasando mensajes. Desde el
punto de vista conceptual, los servicios se pueden considerar como componentes de la
solucin global. Sin embargo, internamente, el servicio est formado por componentes de
software, al igual que cualquier otra aplicacin, los cuales se pueden agrupar de forma lgica
en servicios de presentacin, empresariales y de datos.

2. TIPOS DE COMPONENTES DE LA ARQUITECTURA

2.1 Componentes de interfaz de usuario (IU)
La mayor parte de las soluciones necesitan ofrecer al usuario un modo de interactuar con la
aplicacin. Las interfaces de usuario se implementan utilizando formularios de Windows
Forms, pginas Microsoft ASP.NET, u otro tipo de tecnologa que permita procesar y validar los
datos.
2.2 Componentes empresariales (BL)

La aplicacin requiere del uso de componentes que implementen reglas empresariales y
realicen tareas empresariales. Por ejemplo, en la aplicacin comercial, deber implementar
una funcionalidad que calcule el precio total del pedido y agregue el costo adicional
correspondiente por el envo del mismo. Los componentes empresariales implementan la
lgica empresarial de la aplicacin.
2.3 Componentes lgicos de acceso a datos (DAL)

La mayora de las aplicaciones y servicios necesitan obtener acceso a un almacn de datos en
un momento determinado del proceso empresarial. Por ejemplo, la aplicacin empresarial
necesita recuperar los datos de los productos para mostrar al usuario los detalles de los
mismos. Por tanto, es razonable abstraer la lgica necesaria para obtener acceso a los datos en
una capa independiente de componentes lgicos de acceso a datos, ya que de este modo se
centraliza la funcionalidad de acceso a datos y se facilita la configuracin y el mantenimiento
de la misma.
2.4 Componentes de entidad empresarial (BE)

La mayora de las aplicaciones requieren el paso de datos entre distintos componentes. Por
ejemplo, en la aplicacin comercial es necesario pasar una lista de productos de los
componentes lgicos de acceso a datos a los componentes de la interfaz de usuario para que
ste pueda visualizar dicha lista. Los datos se utilizan para representar entidades empresariales
del mundo real, como productos o pedidos. Las entidades empresariales que se utilizan de
forma interna en la aplicacin suelen ser estructuras de datos, como conjuntos de datos,
DataReader o secuencias de lenguaje de marcado extensible (XML), aunque tambin se
pueden implementar utilizando clases orientadas a objetos personalizados que representan
entidades del mundo real necesarias para la aplicacin, como productos o pedidos.

108
Laboratorio 5.1
Tema: Capa de Entidades de Negocio
Crear un Proyecto de tipo Librera de Clases llamado BusinessEntitiesLayer. Este tipo de

proyecto generan archivos DLL que pueden ser reutilizados luego en otros proyectos: (El
nombre de la Solucin es LPIII-Sesion05)
1. Agregue una clase llamada ProveedorBE:

2. Defina los siguientes atributos y propiedades de la clase proveedor:
Public Class ProveedorBE

Private _Codigo As String
Public Property Codigo() As String
Get
Return _Codigo
End Get
_Codigo = value
End Set
End Property
Private _Razon As String

Public Property Razon() As String
Get
Return _Razon
End Get
_Razon = value
End Set
End Property
Private _Direccion As String

Public Property Direccion() As String
Get
Return _Direccion
End Get
_Direccion = value
End Set
End Property
Private _Telefono As String

Public Property Telefono() As String
Get
Return _Telefono
End Get
_Telefono = value
End Set
End Property
Private _Distrito As String

Public Property Distrito() As String
Get
Return _Distrito
End Get
_Distrito = value
End Set
End Property

110
Private _Representante As String

Public Property Representante() As String
Get
Return _Representante
End Get
_Representante = value
End Set
End Property
End Class
Laboratorio 5.2
Tema: Capa de Acceso a Datos
Agregar un Proyecto de tipo Librera de Clases llamado DataLayer. Este tipo genera archivos
DLL que pueden ser reutilizados luego en otros.

1. Agregar la clase ConexionDAO:
2. Programar el siguiente cdigo en la clase:
'Agregar como referencia a System.Configuration

Imports System.Configuration.ConfigurationManager
Imports System.Data.SqlClient
Public Class ConexionDAO

Private cn As New SqlConnection( _
ConnectionStrings("Cn").ConnectionString)
Public ReadOnly Property conectar As SqlConnection
Get
Return cn
End Get
End Property
End Class
3. Agregar la clase ProveedorDAO y agregar la referencia al otro proyecto

BusinessEntitiesLayer.

112
4. Implementar los siguientes mtodos:
Imports System.Data
Imports BusinessEntityLayer
Public Class ProveedorDAO
Private cn As New ConexionDAO

Private objCn As SqlConnection = cn.conectar
Function getProveedores() As DataTable

Dim da As New SqlDataAdapter("select * from tb_proveedor", objCn)
da.Fill(tabla)
Return tabla
End Function
Function RegistrarProveedor(ByVal objPro As ProveedorBE) As String

Dim cmd As New SqlCommand( _
"insert into tb_proveedor values(@cod,@raz,@dir,@tel,@dis,@rep)", _
objCn)
With cmd.Parameters
.Add("@cod", SqlDbType.Char, 4).Value = objPro.Codigo
.Add("@raz", SqlDbType.VarChar, 30).Value = objPro.Razon
.Add("@dir", SqlDbType.VarChar, 50).Value = objPro.Direccion
.Add("@tel", SqlDbType.VarChar, 15).Value = objPro.Telefono
.Add("@dis", SqlDbType.Char, 3).Value = objPro.Distrito
.Add("@rep", SqlDbType.VarChar, 20).Value = objPro.Representante
End With
objCn.Open()
Dim msj As String = ""
Try
cmd.ExecuteNonQuery()
msj = "Registro Correcto"
Catch ex As Exception
msj = ex.Message
Finally
objCn.Close()
End Try
Return msj
End Function

Function ActualizarProveedor(ByVal objPro As ProveedorBE) As String

Dim cmd As New SqlCommand( _
"update tb_proveedor set raz_soc_prv=@raz,dir_prv=@dir,tel_prv=@tel," & _
"cod_dis=@dis,rep_ven=@rep where cod_prv=@cod", objCn)
With cmd.Parameters
.Add("@raz", SqlDbType.VarChar, 30).Value = objPro.Razon
.Add("@dir", SqlDbType.VarChar, 50).Value = objPro.Direccion
.Add("@tel", SqlDbType.VarChar, 15).Value = objPro.Telefono
.Add("@dis", SqlDbType.Char, 3).Value = objPro.Distrito
.Add("@rep", SqlDbType.VarChar, 20).Value = objPro.Representante
.Add("@cod", SqlDbType.Char, 4).Value = objPro.Codigo
End With
objCn.Open()
Try
msj = "Actualizacin Correcta"
Catch ex As Exception
msj = ex.Message
Finally
objCn.Close()
End Try
Return msj
End Function
End Class
5. Agregar la Clase DistritoDAO con el cdigo siguiente:
Imports System.Data
Public Class DistritoDAO

Private cn As New ConexionDAO
Function getDistritos() As DataTable

Dim da As New SqlDataAdapter("select * from tb_distrito order by 2", objCn)
da.Fill(tabla)
Return tabla
End Function
End Class

114
Laboratorio 5.3
Tema: Capa de Negocio
Agregar un Proyecto de tipo Librera de Clases llamado BusinessLayer. Este genera archivos
DLL que pueden ser reutilizados luego en otros proyectos.
La solucin hasta este momento debe tener 3 proyectos de Librera de Clases:
Al proyecto BusinessLayer agregar la referencia de DataLayer y BusinessEntitiesLayer:

Agregar la Clase ProveedorBL y definir los siguientes mtodos:
Imports DataLayer
Public Class ProveedorBL
Private objProDAO As New ProveedorDAO
Function getProveedores() As DataTable
Return objProDAO.getProveedores
End Function
Function RegistrarProveedor(ByVal objPro As ProveedorBE) As String
Return objProDAO.RegistrarProveedor(objPro)
End Function
Function ActualizarProveedor(ByVal objPro As ProveedorBE) As String
Return objProDAO.ActualizarProveedor(objPro)
End Function
End Class
Agregar la Clase DistritoBL y definir los siguientes mtodos:
Imports DataLayer
Public Class DistritoBL
Private objDisDAO As New DistritoDAO
Function getDistritos() As DataTable

Return objDisDAO.getDistritos
End Function
End Class

116
Laboratorio 5.4
Tema: Capa de Presentacin
Agregue un proyecto del tipo ASP.Net Web Site llamado PresentationLayer:
1. Agregue un WebForm que se llame Proveedores.aspx que tenga el siguiente diseo:
2. Agregue las siguientes referencias a este proyecto:
3. Agregue al Web.Config la cadena de conexin llamada Cn

4. Programe el siguiente cdigo en el WebForm:
Imports BusinessLayer
Partial Class Proveedores

Inherits System.Web.UI.Page
Dim objProBL As New ProveedorBL

Dim objProBE As New ProveedorBE
Dim objDisBL As New DistritoBL

With ddlDistritos
.DataSource = objDisBL.getDistritos
.DataTextField = "NOM_DIS"
.DataValueField = "COD_DIS"
.DataBind()
End With
With gvProveedores
.DataSource = objProBL.getProveedores
.DataBind()
End With
End If
End Sub
Sub LLenarPropiedades()
With objProBE
.Codigo = txtCod.Text
.Razon = txtRaz.Text
.Direccion = txtDir.Text
.Telefono = txtTel.Text
.Distrito = ddlDistritos.SelectedValue
.Representante = txtRep.Text
End With
End Sub

LLenarPropiedades()
MsgBox(objProBL.RegistrarProveedor(objProBE), _
MsgBoxStyle.Information, "Resultado")
With gvProveedores
.DataBind()
End With
End Sub
End Class

118
5. Compile la Aplicacin CTRL + F5
De Click en Aceptar y compruebe que se registro al final el nuevo proveedor.
Agregue la opcin al GridView para que se pueda seleccionar los datos siguiendo los
siguientes pasos:
a. Seleccionar de las Tareas Comunes la opcin Editar Columnas
b. Del cuadro de dilogo seleccione CommandFields y agregue el que dice

Select

6. Agregar el siguiente cdigo para que al seleccionar los datos del GridView se coloquen
en los controles de la parte superior y se pueda modificar los datos del proveedor.
Protected Sub gvProveedores_SelectedIndexChanged(ByVal sender )

Dim i As Integer = gvProveedores.SelectedIndex
With gvProveedores.Rows(i)
txtCod.Text = .Cells(1).Text
txtRaz.Text = .Cells(2).Text
txtDir.Text = .Cells(3).Text
txtTel.Text = .Cells(4).Text
ddlDistritos.SelectedValue = .Cells(5).Text
txtRep.Text = .Cells(6).Text
End With
End Sub
Protected Sub btnModificar_Click(ByVal sender As )

LLenarPropiedades()
MsgBox(objProBL.ActualizarProveedor(objProBE), _
With gvProveedores
.DataBind()
End With
End Sub
7. Vuelva a compilar la aplicacin y compruebe la parte de modificar.

120
Verifique los datos modificados en el GridView

Autoevaluacin
1. Cules son los componentes de una arquitectura en N Capas?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
2. Defina la Capa de entidades de negocio

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
3. Defina la Capa de acceso a datos

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
4. Defina para qu sirve la Capa de negocio

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
5. Cul es la ventaja de programar en capas?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
6. Defina la Capa de presentacin

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

122
Resumen
La programacin por capas es un estilo de programacin en el que el objetivo
primordial es la separacin de la lgica de negocios de la lgica de diseo; un ejemplo
bsico de esto consiste en separar la capa de datos de la capa de presentacin al
usuario.
La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios
niveles y, en caso de que sobrevenga algn cambio, slo se ataca al nivel requerido sin
tener que revisar entre cdigo mezclado.
Adems, permite distribuir el trabajo de creacin de una aplicacin por niveles; de este
modo, cada grupo de trabajo est totalmente abstrado del resto de niveles, de forma
que basta con conocer la API que existe entre niveles.
En el actual diseo de sistemas informticos, se suelen usar las arquitecturas multinivel

o Programacin por capas. En stas, a cada nivel se le confa una misin simple, lo que
permite el diseo de arquitecturas escalables (que pueden ampliarse con facilidad en
caso de que las necesidades aumenten).
Capa de presentacin: es la que ve el usuario (tambin se la denomina "capa de

usuario"), presenta el sistema al usuario, le comunica la informacin y captura la
informacin del usuario en un mnimo de proceso (realiza un filtrado previo para
comprobar que no hay errores de formato). Tambin, es conocida como interfaz
grfica y debe tener la caracterstica de ser "amigable" (entendible y fcil de usar) para
el usuario. Esta capa se comunica nicamente con la capa de negocio.
Capa de negocio: es donde residen los programas que se ejecutan, se reciben las
peticiones del usuario y se envan las respuestas tras el proceso. Se denomina capa de
negocio (e incluso de lgica del negocio) porque es aqu donde se establecen todas las
reglas que deben cumplirse. sta se comunica con la capa de presentacin, para recibir
las solicitudes y presentar los resultados, y con la de datos, para solicitar al gestor de
base de datos almacenar o recuperar datos de l. Tambin, se consideran aqu los
programas de aplicacin.
Capa de datos: es donde residen los datos y es la encargada de acceder a los mismos.
Est formada por uno o ms gestores de bases de datos que realizan todo el
almacenamiento de datos, reciben solicitudes de almacenamiento o recuperacin de
informacin desde la capa de negocio.
Consultar a las siguientes pginas:

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ce40e4e1-9838-
4c89-a197-a373b2a60df2&displaylang=en

UNIDAD DE
APRENDIZAJE
Desarrollo de Carro de Compras
Al trmino de la unidad, los alumnos elaboran un carro de compras como un proceso de una tienda
virtual.
TEMARIO
Definicin de Objetos de Sesin en el Global.asax
Diseo de las GUI para la tienda Virtual usando Master Pages.
Configurar controles para mostrar imgenes de los productos.
Definicin de Mtodos para consulta de productos y vista del Carro de Compras
Proceso de Compra: Manejo de Transacciones para actualizar la Base de Datos
Los alumnos definen objetos de Session en el archivo de configuracin global llamado
Global.asax.
Los alumnos disean los Master Pages y WebForms para el proceso de Carro de
Compra de la tienda virtual.
Los alumnos configuran los controles para mostrar las imgenes de los productos.
Los alumnos programan los WebForms para el proceso de Carro de Compras.

124
DESCRIPCIN DEL PROCESO DE CARRO DE COMPRA

1. Pantalla Inicial: permite seleccionar los productos filtrados por categora.
2. Cuando el usuario selecciona un producto, carga la pgina donde se ve al detalle el

producto seleccionado y puede ingresar la cantidad de productos que va a comprar.
3. Al Dar Click en Agregar al Carro de Compra, mostrar el mensaje de Producto

Registrado
4. Al Dar Click en Ver el Carro de Compra, mostrar el Carro de Compra como muestra
la siguiente figura:

5. Al darle Click en Comprar, pedir que ingrese al sistema, ya que se supone que estoy
registrado como cliente de esa empresa.
6. Al ingresar el cliente en la siguiente pgina, aparecer el resumen de su carro de

compra y los datos del cliente:
7. Al darle click en Comprar Ahora, se mostrar el mensaje que su compra fue

registrada:

126
8. Esto culmina el proceso de compra. Ahora, se pasar a ver, a travs de los laboratorios,
el desarrollo paso a paso de este carro de compra.
LABORATORIO 01
Tema: Desarrollo de las GUIs para el proceso de Carro de Compras
1. Disear el siguiente master page llamado Principal.master, en la cual hay una tabla
con 2 filas: en la primera se coloca la imagen Ventas On Line, y en la segunda fila se
deja libre el ContentPlaceHolder.
2. Agregar un WebForm llamado Default.aspx donde se hereda el master page creado.

Debe tener el siguiente diseo:

Para que se puedan mostrar imgenes de los productos en el GridView, siga los
siguientes pasos:
1. Seleccione de Tareas Comunes del Control GridView la opcin Editar

Columnas y mostrar la siguiente figura:
2. Tal como muestra la figura anterior, se debe agregar esas columnas que
aparecen en Campos Seleccionados, pero, adicionalmente, colocar al final un
campo de Tipo ImageField y configurar las propiedades que se muestran y se
detallan a continuacin:
HeaderText: Foto
DataImageUrlField: COD_PRO
DataImageUrlFormatString: imagenes\{0}.jpg

128
ControlStyle:
Height: 50px
Width: 50px
3. Agregar un WebForm llamado Page_Producto.aspx donde se hereda el master page

creado. Debe tener el siguiente diseo:
Todas las imgenes son controles ImageButton y tambin cuenta con un control
Image al lado derecho para mostrar la imagen del producto de una forma ms grande
y detallada.
4. Agregar un WebForm llamado CarroCompras.aspx donde se hereda el master page

creado. Debe tener el siguiente diseo:
En el Gridview, agregue de CommadField la opcin Delete y asigne la imagen que

aparece en la figura anterior a travs de la propiedad DeleteImageUrl.
5. Agregar un WebForm llamado Login.aspx donde se hereda el master page creado.


Considere que al lado del txtEmail debe colocar un RegularExpressionValidator para

validar que el email que se ingrese tenga un formato vlido.
6. Agregar un WebForm llamado Compra.aspx donde se hereda el master page creado.

LABORATORIO 02
Tema: Desarrollo de las Clases para el manejo del proceso de Carro de Compras
Crearemos un objeto de Session para el Carro de Compras. Agregaremos al Proyecto una Clase
de Aplicacin Global llamado Global.asax
Global.asax
Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
'Cdigo que se ejecuta cuando se inicia una nueva sesin
Dim tabla As New Data.DataTable
tabla.Columns.Add("codigo", Type.GetType("System.String"))
tabla.Columns.Add("Descripcion", Type.GetType("System.String"))
tabla.Columns.Add("Precio", Type.GetType("System.Double"))
tabla.Columns.Add("Cantidad", Type.GetType("System.Int32"))
tabla.Columns.Add("Monto", Type.GetType("System.Double"), "Precio*Cantidad")
Session("carrito") = tabla
End Sub

130
Sub Session_End(ByVal sender As Object, ByVal e As EventArgs)

Session("carrito") = Nothing
End Sub
Clase Categora:
En esta Clase, se define un mtodo que cargue las categoras ordenadas por su descripcin.
Public Class Categoria
Private cn As New Conexion
Dim objCn As SqlConnection = cn.conectar
Function getCategorias() As DataTable

Dim da As New SqlDataAdapter("select * from tb_categoria order by 2", objCn)
da.Fill(tabla)
Return tabla
End Function
End Class
Clase Producto:
En esta Clase, se definen los siguientes mtodos.
1. getProductos: devuelve todos los productos de la Base de Datos.
2. getProductosCategoria: devuelve los productos filtrados por la Categora.
3. BuscarProducto: devuelve los datos de un producto buscado por el cdigo.
Public Class Producto

Function getProductos() As DataTable

Dim da As New SqlDataAdapter("select * from tb_producto", objCn)
da.Fill(tabla)
Return tabla
End Function
Function getProductosCategoria(ByVal lin As Integer) As DataTable

Dim da As New SqlDataAdapter( _
"select * from tb_producto where cod_cat=@cat", objCn)
da.SelectCommand.Parameters.Add("@cat", SqlDbType.Int).Value = lin
da.Fill(tabla)
Return tabla
End Function
Public Function BuscarProducto(ByVal id As String) As DataRow

"SELECT cod_pro, des_pro, des_cat, pre_pro, stk_pro " + _
"FROM tb_producto p INNER JOIN tb_Categoria c ON p.cod_cat = c.cod_cat " + _
"Where cod_pro=@id", objCn)
da.SelectCommand.Parameters.Add("@id", SqlDbType.Char, 4).Value = id
da.Fill(tabla)
Return tabla.Rows(0)
End Function
End Class

Clase Cliente:
En esta Clase, se definen los siguientes mtodos.
1. ValidarCliente: mtodo para validar el acceso al sistema.
2. getDatosCliente: devuelve los datos de un cliente filtrado por email.
Public Class Cliente

Function ValidarCliente(ByVal email As String, ByVal pass As String) As _

Boolean
"select * from tb_cliente where email_cli=@email and pass_cli=@pass", objCn)
With da.SelectCommand.Parameters
.Add("@email", SqlDbType.VarChar, 30).Value = email
.Add("@pass", SqlDbType.VarChar, 30).Value = pass
End With
da.Fill(tabla)
If tabla.Rows.Count = 1 Then
Return True
Else
Return False
End If
End Function
Function getDatosCliente(ByVal email As String) As DataRow

"select cod_cli,nom_cli+' '+ape_cli as nombre, dir_cli, nom_dis from + _
tb_cliente c join tb_distrito d on c.cod_dis=d.cod_dis where + _
email_cli=@email", objCn)
With da.SelectCommand.Parameters
.Add("@email", SqlDbType.VarChar, 30).Value = email
End With
da.Fill(tabla)
Return tabla.Rows(0)
End Function
End Class
Procedures a utilizar en el proceso de compras:

--PROCEDURES
CREATE PROCEDURE USP_REGISTRAPEDIDO
@cli char(4),
@fec datetime
as
insert into tb_pedido(cod_cli,fecha_ped) values(@cli,@fec)
go
CREATE PROCEDURE USP_REGISTRADETALLE
@NUM INT, @COD CHAR(4), @PRE MONEY, @CAN INT
AS
INSERT INTO tb_detalle_pedido VALUES(@NUM,@COD,@PRE,@CAN)
GO
CREATE PROCEDURE USP_GETCODIGOPEDIDO
AS
SELECT MAX(NUM_PED) FROM tb_pedido
GO

132
Clase Pedido:
En esta clase, se definen los siguientes mtodos:

1. RegistrarPedido: mtodo para registrar el proceso de carro de compras en la
Base de Datos, utilizando transacciones.
Public Class Pedido
Function RegistrarPedido(ByVal cli As String, ByVal tablaDet As _
DataTable) As String
Dim sql As String = "USP_REGISTRAPEDIDO"
objCn.Open()
Dim tran As SqlTransaction = objCn.BeginTransaction
Dim cmd As New SqlCommand(sql, objCn, tran)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Clear()
With cmd.Parameters
.Add("@FEC", SqlDbType.DateTime).Value = Now
.Add("@CLI", SqlDbType.Char, 4).Value = cli
End With
Dim i As Integer = cmd.ExecuteNonQuery
If i = 0 Then
msj = "No se registro la factura"
tran.Rollback()
Else
'insertar los detalles
If tablaDet.Rows.Count = 0 Then
msj = "No hay productos que guardar"
tran.Rollback()
Else
cmd = New SqlCommand("USP_GETCODIGOPEDIDO", objCn, tran)
cmd.Parameters.Clear()
Dim cod As String = cmd.ExecuteScalar
cmd = New SqlCommand("USP_REGISTRADETALLE", objCn, tran)
cmd.CommandType = CommandType.StoredProcedure
For Each row As DataRow In tablaDet.Rows
With cmd.Parameters
.Clear()
.Add("@NUM", SqlDbType.Char, 5).Value = cod
.Add("@COD", SqlDbType.Char, 4).Value = row("Codigo")
.Add("@CAN", SqlDbType.Int).Value = row("Cantidad")
.Add("@PRE", SqlDbType.Money).Value = row("Precio")
End With
Dim j As Integer = cmd.ExecuteNonQuery
If j = 0 Then
msj = "No se registro algun detalle"
tran.Rollback()
End If
Next
msj = "Compra Registrada"
tran.Commit()
End If
End If
Return msj
End Function
End Class

LABORATORIO 03:
Tema: Programacin de los Web Forms para ejecutar el proceso de Carro de Compras
Default.aspx
Partial Class _Default
Dim objpro As New Producto
Dim objCat As New Categoria
With gvProductos
.DataSource = objpro.getProductos
.DataBind()
End With
With gvCategorias
.DataSource = objCat.getCategorias
.DataBind()
End With
End If
End Sub
Protected Sub gvCategorias_SelectedIndexChanged(ByVal sender As )
Dim i As Integer = gvCategorias.SelectedIndex
Dim cod As String = gvCategorias.Rows(i).Cells(1).Text
With gvProductos
.DataSource = objpro.getProductosLinea(cod)
.DataBind()
End With
End Sub
Protected Sub gvProductos_SelectedIndexChanged(ByVal sender )

Dim i As Integer = gvProductos.SelectedIndex
Dim cod As String = gvProductos.Rows(i).Cells(1).Text
Response.Redirect("Page_Producto.aspx?cod=" + cod)
End Sub
End Class
Page_Producto.aspx
Partial Class Page_Producto
If Not Request.QueryString("cod") Is Nothing Then
Dim cod As String = Request.QueryString("cod")
Dim objPro As New Producto
Dim f As DataRow = objPro.BuscarProducto(cod)
If Not f Is Nothing Then
Me.lblCodigo.Text = f("cod_pro")
Me.lblDescripcion.Text = f("des_pro")
Me.lblCategoria.Text = f("des_cat")
Me.lblPrecio.Text = f("Pre_pro")
Me.lblStock.Text = f("stk_pro")
Me.ImgFoto.ImageUrl = "imagenes\" + lblCodigo.Text.Trim + ".jpg"
End If
End If
End If
End Sub

134
Protected Sub btnAgregar_Click(ByVal sender As )

If Val(txtCantidad.Text) > Val(lblStock.Text) Then
Me.lblMensaje.Text = "Cantidad Solicitada superior a la Existente"
Else
Dim tabla As DataTable = CType(Session("carrito"), DataTable)
Dim fila As DataRow = tabla.NewRow
fila("codigo") = Me.lblCodigo.Text
fila("descripcion") = Me.lblDescripcion.Text
fila("precio") = Me.lblPrecio.Text
fila("cantidad") = Val(txtCantidad.Text)
tabla.Rows.Add(fila)
Me.lblMensaje.Text = "Producto Registrado"
Me.btnAgregar.Enabled = False
End If
End Sub
Protected Sub btnRegresar_Click(ByVal sender As )

Response.Redirect("Default.aspx")
End Sub
Protected Sub btnVer_Click(ByVal sender As Object, )

Response.Redirect("CarroCompras.aspx")
End Sub
End Class
CarroCompras.aspx
Partial Class CarroCompras
Private Sub Listado()
Me.gvCarro.DataSource = tabla
Me.gvCarro.DataBind()
If tabla.Rows.Count > 0 Then
Me.lblMonto.Text = tabla.Compute("Sum(Monto)", "")
Else
Me.lblMonto.Text = 0
End If
End Sub
If Not Session("carrito") Is Nothing Then
Listado()
End If
End If
End Sub
Protected Sub gvCarro_RowDeleting(ByVal sender As Object, )
Dim f As Integer = e.RowIndex
Dim cod As String = gvCarro.Rows(f).Cells(1).Text
For Each fila As DataRow In tabla.Rows
If fila(0) = cod Then
fila.Delete()
Exit For
End If
Next
Listado()
End Sub

Protected Sub btnBack_Click(ByVal sender As Object, )

End Sub
Protected Sub btnComprar_Click(ByVal sender As Object, )

Response.Redirect("Login.aspx")
End Sub
End Class
Login.aspx
Partial Class Login
Dim objCli As New Cliente
Protected Sub btnIngresar_Click(ByVal sender As )
If objCli.ValidarCliente(txtEmail.Text, txtPassword.Text) = True Then
Response.Redirect("Compra.aspx?email=" + txtEmail.Text)
Else
lblMensaje.Text = "Cliente no registrado"
End If
End Sub
End Class
Compra.aspx
Partial Class Compra
Dim objCli As New Cliente
Dim tablaDet As New DataTable
Dim objPed As New Pedido
Protected Sub Page_Load(ByVal sender)

Dim email As String = Request.QueryString("email")
Dim fila As DataRow = objCli.getDatosCliente(email)
lblNombre.Text = fila(1)
lblDireccion.Text = fila(2)
lblDistrito.Text = fila(3)
Session("codigo") = fila(0)
tablaDet = CType(Session("Carrito"), DataTable)
If tablaDet.Rows.Count > 0 Then
GridView1.DataSource = tablaDet
GridView1.DataBind()
lblMonto.Text = tablaDet.Compute("Sum(Monto)", "")
End If
End Sub
Protected Sub btnComprar_Click(ByVal sender As )

MsgBox(objPed.RegistrarPedido(Session("codigo"), tablaDet), _
End Sub
End Class

136
Autoevaluacin
1. Para qu sirve la Clase de aplicacin global Global.asax?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
2. Defina qu son los objetos de Session

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
3. Para qu sirve el control ContentPlaceHolder?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
4. Defina cmo se configura el GridView para mostrar imgenes

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
5. En qu se diferencia un control ImageButton e Image?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
6. Defina lo que es una transaccin

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

Resumen
El objeto Session permite tener valores almacenados de forma global dentro de la
aplicacin Web. Desde el punto de vista del cliente, estos objetos se mantienen
vivos hasta que se permanece un tiempo inactivos o se cierra la sesin con el
navegador web.
El archivo Global.asax, que tambin se conoce como el archivo Clase de Aplicacin

ASP.NET, es un archivo opcional que contiene cdigo para responder a eventos en el
nivel de aplicacin provocados por ASP.NET o por HttpModules. Reside en el directorio
raz de una aplicacin basada en ASP.NET. En tiempo de ejecucin, se analiza y se
compila en una clase de .NET Framework generada dinmicamente, derivada de la
clase base HttpApplication. Est configurado para que se rechace automticamente
cualquier solicitud directa de direccin URL; los usuarios externos no pueden descargar
ni ver el cdigo escrito dentro de l.
Un control ContentPlaceHolder define una regin relativa para contenido en una

pgina maestra y representa todo el texto, el marcado y los controles de servidor de
un control Content relacionado situado en una pgina de contenido.
Un control Content se asocia a ContentPlaceHolder utilizando su propiedad

ContentPlaceHolderID. Establezca la propiedad ContentPlaceHolderID en el valor de la
propiedad ID del control ContentPlaceHolder relacionado en una pgina maestra. Se
puede declarar ms de un control ContentPlaceHolder en una pgina maestra.
Dentro de una pgina de contenido, slo un control Content puede proporcionar el

contenido de ContentPlaceHolder en la pgina maestra. Sin embargo, en cada pgina
de contenido que utilice una pgina maestra, puede tener controles Content
independientes asociados a ContentPlaceHolder. Por ejemplo, puede definir
ContentPlaceHolder para el ttulo de pgina de una pgina maestra. Para cada pgina
de contenido que utilice la pgina maestra, puede agregar un control Content que
proporcione el texto y el marcado del ttulo de pgina.
Consultar a las siguientes pginas:

http://msdn.microsoft.com/es-es/library/8bhzsw6t.aspx

138

UNIDAD DE
APRENDIZAJE
Manejo de Servicios Web y WCF
utilizando servicios Web y WFC (Windows Comuncation Foundation).
TEMARIO
Llamar a un servicio Windows Communication Foundation (WCF)
Llamar a un servicio Web desde una pgina Web ASP.NET
Los alumnos invocan un servicio WCF desde ASP.NET para realizar operaciones de
consulta y actualizacin.
Los alumnos invocan un servicio Web desde una aplicacin ASP.NET para realizar
operaciones de consulta y actualizacin de datos.

140
1. WINDOWS COMMUNICATION FOUNDATION
1.1 INTRODUCCIN
Windows Communication Foundation o WCF (tambin conocido como Indigo) es la nueva
plataforma de mensajera que forma parte de la API de la Plataforma .NET 4.0 (antes conocida
como WinFX, y que no son ms que extensiones para la versin 2.0). Se encuentra basada en la
Plataforma .NET 2.0 y de forma predeterminada se incluye en el Sistema Operativo Microsoft
Windows Vista.
Windows Communication Foundation es un conjunto de tecnologas .NET para la creacin y
puesta en marcha de sistemas interconectados. Es una nueva generacin de infraestructura de
comunicaciones que gira en torno a la arquitectura de servicios Web. El soporte para servicios
Web avanzados en Windows Communication Foundation proporciona una mensajera segura,
fiable y organizada en transacciones, adems de interoperabilidad.
El modelo de programacin orientado a servicios de Windows Communication Foundation se
basa en Microsoft .NET Framework y simplifica el desarrollo de sistemas interconectados.
Windows Communication Foundation unifica una gran variedad de funcionalidades de
sistemas distribuidos en una arquitectura organizable y extensible, que abarca transportes,
sistemas de seguridad, patrones de mensajera, sistemas de codificacin, topologas de red y
modelos de alojamiento. Asimismo, estar disponible en Windows Vista (antes conocido
como "Longhorn") y para Windows XP y Windows Server 2003.
1.2 POR QU USAR WINDOWS COMMUNICATION FOUNDATION?
1. Cuando necesites crear aplicaciones conectadas: actualmente, la conectividad es la primera

consideracin en la arquitectura de un Sistema Distribuido. La orientacin a servicios te ayuda
a lograrlo. WCF, se disea desde sus inicios con la orientacion a servicios en la mente.
2. Modelo de programacin unificado: con frecuencia, los desarrolladores de aplicaciones

tienen que escoger entre mltiples tecnologas, cada una con un nico modelo de
programacin. Se debera emplear una tecnologa para llamar a procedimientos remotos, otra
para queuing, otra para componentes transaccionales y otras habilidades para la comunicacin
interoperable entre plataformas. WCF provee un solo modelo de programacin para la
coleccin extensa de capacidades de comunicacin.
3. Requiere una amplia interoperabilidad: la independencia de la plataforma se ha vuelto una

necesidad obligatoria de todas las aplicaciones conectadas. WCF usa los protocolos estndares
de la industria que permiten a ste interoperar con cualquier plataforma que soporte estos
Protocolos.
2. FUNDAMENTOS DEL WCF

Un Servicio WCF es un programa que expone una coleccin de Endpoints (extremos o puntos
de entrada de WCF). Cada Endpoint, es un punto de entrada de comunicacin con el mundo.
Un Cliente es un programa que intercambia mensajes con uno o ms Endpoints. Un cliente
puede exponer tambin un Endpoint para recibir mensajes de un servicio basado en un
patrn de intercambio de mensajes de tipo dplex.
Las siguientes secciones describen estos fundamentos con ms detalle:

2.1 ENDPOINTS
Un Endpoint de un Servicio est compuesto por una Address (Direccin), un Binding
(Enlace) y un Contract (Contrato).
La direccin de un Endpoint es una direccin de red donde reside dicho Endpoint.
El binding de un Endpoint especifica cmo se comunica dicho Endpoint con el resto del
mundo, incluyendo aspectos como el protocolo de transporte (p.e. TCP, http, etc.), tipo de
codificacin (p.e. texto, binario), y requerimientos de seguridad (p.e. SSL, seguridad basada en
mensajes SOAP, etc.). La clase Binding representa un binding de WCF.
El contrato de un endpoint especifica qu comunica dicho endpoint y bsicamente est
compuesto por una coleccin de mensajes organizados internamente en operaciones que
tienen un patrn de intercambio de mensajes (Message Exchange Patterns o MEPs), como
one-way (un sentido), dplex y request/reply (peticin/respuesta). La clase
ContractDescription representa un contrato WCF.
La clase ServiceEndpoint representa un Endpoint y tiene un EndpointAddress, un Binding y un
ContractDescription que corresponden a la direccin del endpoint, al enlace y al contrato,
respectivamente.
Serve
ABC
2.2 DESCRIPCIONES DE SERVICIO Y CANAL

La clase ServiceDescription es una estructura en memoria que describe un Servicio WCF,
incluyendo los EndPoints expuestos por el Servicio, los Behaviors aplicados al servicio y el tipo
(una clase) que implementa el servicio. ServiceDescription se utiliza para crear metadatos,
codificar/configurar, y canales. Se puede construir a mano este objeto ServiceDescription y a
partir de un tipo marcado con ciertos atributos WCF, que es el escenario ms comn. El cdigo
de ste puede escribirse a mano o generado a partir de un documento WSDL mediante la
utilidad svcutil.exe.

142
Aunque los objetos ServiceDescription pueden crearse e instanciarse explcitamente, muchas

veces se crean detrs del teln como parte de un Servicio en ejecucin.
Igualmente, en el lado cliente, un ChannelDescription describe un canal cliente WCF para un
endpoint especfico. La clase ChannelDescription tiene una coleccin de IChannelBehaviors,
que son comportamientos aplicados al canal.
Tambin, tiene un ServiceEndPoint, que describe el EndPoint con el cual el canal se
comunicar.
Es importante destacar que, al contrario de ServiceDescription, ChannelDescription contiene,
solamente, un ServiceEndPoint que representa el EndPoint objetivo con el cual se comunicar
el canal.
2.3 RUNTIME DE WCF

El runtime de WCF es el conjunto de objetos responsable del envo y recepcin de mensajes.
Por ejemplo, cosas como formato de mensajes, aplicacin de seguridad, y transmitir y recibir
mensajes mediante varios protocolos de transporte, as como proporcionar mensajes recibidos
a la operacin apropiada, todo corresponde al runtime de WCF. Las siguientes secciones
explican los conceptos clave del runtime de WCF.
2.4 MENSAJE
Un mensaje es, bsicamente, una representacin en memoria de un InfoSet mensaje SOAP.
Hay que destacar que un mensaje (en lo relativo a su comunicacin por la red) no est ligado a
texto XML. Por el contrario, dependiendo de qu mecanismo de encoding se utilice, un
mensaje puede serializarse basado en el formato binario de WCF, texto XML o cualquier otro
formato propio.
2.5 CHANNELS (Canales)

Los canales son la abstraccin principal para mandar mensajes y recibir mensajes desde un
Endpoint. Bsicamente, hay dos tipos:

Canales de Transporte, que gestionan el envo y recepcin de streams de octetos opacos

basndose en algn tipo de protocolo de transporte como TCP, UDP o MSMQ.
Los canales de protocolo, por otro lado, implementan un protocolo basado en SOAP para
procesar y, posiblemente, modificar mensajes. Por ejemplo, el canal de seguridad aade y
procesa cabeceras de mensajes SOAP y puede modificar el cuerpo del mensaje, por ejemplo,
cifrndolo (encriptndolo).
Los canales son componentizables de forma que un canal puede estar basado sobre otro que,
a su vez, est basado en un tercero.
2.6 ENDPOINTLISTENER
Un EndPointListener es el runtime equivalente a un ServiceEndpoint. El EndPointAddress,
Contrato y Binding de un ServiceEndpoint (representando el donde, qu y como), corresponde
a la direccin de escucha del EndpointListener, filtrado de mensajes, entrega, y pila de canales,
respectivamente. Contiene la pila de canales que es responsable del envo y recepcin de
mensajes.
2.7 SERVICEHOST y CHANNELFACTORY

El runtime del Servicio WCF se crea normalmente detrs del teln llamando a
ServiceHost.Open. ste dirige la creacin de un
ServiceDescription a partir del tipo del servicio e
instancia la coleccin ServiceEndpoint del
ServiceDescription con EndPoints definidos en el .config
o cdigo o en ambos. Entonces, hace uso de
ServiceDescription para crear la pila de canales en la
forma de un objeto EndPointListener para cada
ServiceEnpoint en el ServiceDescription.
De forma paralela, en el lado cliente, el runtime cliente
es creado por ChannelFactory, que es el equivalente del
cliente a ServiceHost.
ChannelFactory dirige la creacin de un ChannelDescription basado en un tipo de contrato, un
binding, y un EndPointAddress. Entonces, hace uso de este ChannelDescription para crear la
pila de canales Cliente.
De forma contraria, al runtime del Servicio, el runtime cliente no contiene EndPointListeners,
porque un Cliente siempre inicia la conexin hacia el Servicio, as que no necesita estar
escuchando para aceptar conexiones de entrada.nt
3. SERVICIO WEB EN ASP.NET

3.1 INTRODUCCIN
Los servicios Web XML se prestan desde su sitio a otro, no a un visitante.
Este servicio puede consistir en
Realizar un simple clculo con unos datos que se le envan como parmetros.
Acceder a una base de datos para recuperar un conjunto de registros.
Validar la correccin de una informacin o contrastarla frente a otros datos, etc.
Para comprender mejor esta idea, imagnese la siguiente situacin: t ests desarrollando un
sitio que vende entradas para conciertos y espectculos teatrales. Qu sera lo primero que
haras si usaras ASP normal?
Preguntaras teatro por teatro qu espectculos hay para ponerlos en tu sitio y vender los
tickets. Pero Qu bueno sera que eso sea automtico, no? No tener que preocuparme de
revisar teatro por teatro. Supongamos que todo el mundo usa ASP.net en su totalidad, sera
muy til que pudieras comunicarte con la base de datos de los teatros y ver los espectculos

144
en cartelera, y luego mostrarlos en tu sitio. Imposible, no? Claro, es imposible acceder a una
base de datos de otro sitio como si fuese nuestra; pero, cada teatro podra tener un servicio
web que hara de intermediario entre la base de datos del teatro con los espectculos y tu
sitio.
Funcionara de esta manera
Primero, tu visitante pide los tickets disponibles a la pgina ASP.net, la pgina ASP.net se
conecta al servicio. Luego, el servicio busca en su base de datos los espectculos en cartelera y
les manda los datos en forma de DataSet en cdigo de XML. La pgina recibe el DataSet y lo
procesa, puede mostrar parte s, parte no; en fin, hace lo que quiera con los datos y se los
muestra al usuario.
3.2 CARACTERSTICAS DE LOS SERVICIOS WEB

Estn normalizados en un lenguaje de marcado denominado XML.
Son un conjunto de componentes que proporcionan una funcionalidad distribuida y
accesible a travs de Internet.
Son independientes de la plataforma, de los lenguajes y de la localizacin.
Siguen un modelo de computacin distribuida.
Poseen capacidad de gestin automtica.
Es una pieza de software residente en un servidor y se accede va http.
No posee, necesariamente, interfaz de usuario.
Proporciona un API bien definida basada en http.
Son intercambiables y reutilizables: SOAP, WSDL, UDDI.
3.3 SERVICIOS WEB Y .NET

Microsoft .NET es la evolucin de Windows DNA para la inclusin de un nivel de Web Services.
Los mismos se encuentran dentro del .NET Framework, que tambin cuenta con un lenguaje
de programacin mejorado respecto de la tecnologa de origen.

3.3 ESTNDARES PARA LOS SERVICIOS WEB

Los servicios Web se definen a partir de las siguientes especificaciones:
WSDL (Web Services Definition Service): este protocolo se encarga de describir el Web
Service cuando es publicado. Es el lenguaje XML que los proveedores emplean para describir
sus Web Services.
SOAP (Simple Object Access Protocol): permite que programas, que corren en diferentes
sistemas operativos, se comuniquen. La comunicacin entre las diferentes entidades se realiza
mediante mensajes que son rutados en un sobre SOAP.
UDDI (Universal Description Discovery and Integration): este protocolo permite la
publicacin y localizacin de los servicios. Los directorios UDDI actan como una gua
telefnica de Web Services.
3.3.1 SOAP (Simple Object Access Protocol)
La especificacin SOAP indica cmo se deben codificar los mensajes que circularn entre las
dos aplicaciones.
En el ncleo de los servicios Web, se encuentra el protocolo simple de acceso a datos SOAP
que proporciona un mecanismo estndar de empaquetar mensajes. SOAP ha recibido gran
atencin debido a que facilita una comunicacin del estilo RPC entre un cliente y un servidor
remoto. Pero existen multitud de protocolos creados para facilitar la comunicacin entre
aplicaciones, incluyendo RPC de Sum, DCE de Microsoft, RMI de Java y ORPC de CORBA. Por
qu se presta tanta atencin a SOAP?

146
Una de las razones principales es que SOAP ha recibido un increble apoyo por parte de la
industria. Es el primer protocolo de su tipo que ha sido aceptado, prcticamente, por todas las
grandes compaas de software del mundo, que en raras ocasiones cooperan entre s y
ofrecen su apoyo a este protocolo. Algunas de las mayores compaas que soportan SOAP son
Microsoft, IBM, SUN, Microsystems, SAP y Ariba.
SOAP proporciona un mecanismo estndar de empaquetar un mensaje. Un mensaje SOAP se

compone de un sobre que contiene el cuerpo del mensaje y cualquier informacin de cabecera
que se utiliza para describir el mensaje. A continuacin, se muestra un ejemplo:
El elemento raz del documento es el elemento Envelope. El ejemplo contiene dos sub
elementos, Body y Header. Un ejemplo de SOAP vlido, tambin, puede contener otros
elementos hijo en el sobre.
El sobre puede contener un elemento Header opcional que contiene informacin sobre el
mensaje. En el ejemplo anterior, la cabecera contiene dos elementos que describen a quien
compuso el mensaje y posible receptor del mismo.
El sobre debe contener un elemento body (cuerpo). ste contiene la carga de datos del
mensaje. En el ejemplo, el cuerpo contiene una simple cadena de caracteres.
Un mensaje debe estar dentro de sobre de SOAP bien construido. Un sobre se compone de un
nico elemento envelope, el sobre puede contener un elemento Header y un elemento body.
Si existe la cabecera debe ser el elemento hijo inmediato del sobre, con el cuerpo siguiendo
inmediatamente a la cabecera.
El cuerpo contiene la carga de datos del mensaje y la cabecera contiene los datos adicionales
que no pertenecen necesariamente al cuerpo del mensaje.
La especificacin SOAP define dos modelos de mensajes:

Un mensaje que se enviar desde la aplicacin cliente a la aplicacin servidor, solicitando la
ejecucin de un mtodo al que se pasan una serie de parmetros.
Un mensaje que se enviar desde la aplicacin servidor al cliente y que contendr datos XML
con los resultados de la ejecucin del mtodo solicitado.
Ejemplo: Mensaje SOAP peticin

Ejemplo: Mensaje SOAP respuesta
3.3.2 WSDL (Lenguaje de descripcin de servicio Web)

Permite describir los distintos mtodos o funciones que estn disponibles en un servicio web,
as como su signatura; es decir, el nmero de argumentos o parmetros que se les debe pasar
y el tipo de dato que devolver la funcin como resultado.
Se establece una equivalencia entre el documento WSDL y un contrato que especifica los
servicios que el servidor se compromete a ofrecer al cliente, siempre que ste los solicite de la
forma adecuada.
El cliente puede solicitar una respuesta WSDL de una instancia de SQL Server y utilizarla para
generar solicitudes de lotes RPC y SQL que enviar al servidor a travs de los extremos HTTP
configurados para asegurar la compatibilidad con los tipos WSDL. La respuesta WSDL es un
documento XML generado, dinmicamente, a partir de las funciones RPC asociadas al extremo
en el momento de generar la solicitud.
CONTENIDO DE WSDL
Una instancia del Lenguaje de definicin de servicios Web (WSDL) es un documento XML con
un elemento <definitions> raz en el que se especifica el espacio de nombres WSDL
(http://schemas.xmlsoap.org/wsdl) y se define un conjunto de servicios Web como coleccin

148
de extremos de red o puertos. Un documento WSDL tpico presenta la siguiente estructura de

nivel superior:
3.3.3 UDDI (Descripcin Universal de Integracin y Descubrimiento)

Son las siglas del catlogo de negocios de Internet denominado Universal Description,
Discovery and Integration. El registro en el catlogo se hace en XML. UDDI es una iniciativa
industrial abierta (sufragada por la OASIS) entroncada en el contexto de los servicios Web.
El registro de un negocio en UDDI tiene tres partes:
Pginas blancas - direccin, contacto y otros identificadores conocidos.
Pginas amarillas - categorizacin industrial basada en taxonomas.
Pginas verdes - informacin tcnica sobre los servicios que aportan las propias empresas.
UDDI es uno de los estndares bsicos de los servicios Web cuyo objetivo es ser accedido por
los mensajes SOAP y dar paso a documentos WSDL, en los que se describen los requisitos del
protocolo y los formatos del mensaje solicitados para interactuar con los servicios Web del
catlogo de registros.
UDDI representa un salto cualitativo importante para el desarrollo de Internet como
plataforma para los negocios basados en las tecnologas de la informacin. Antes, no haba
ningn estndar que permitiese localizar o dar a conocer servicios basados en el tratamiento
de la informacin ni exista ningn mtodo que permitiera integrar los diferentes sistemas de
informacin de las organizaciones.
Algunas de las aportaciones de UDDI son las siguientes:
Permite localizar el servicio apropiado entre los miles que estn registrados en Internet.
Define la interaccin con el servicio elegido.
Extiende el mercado potencial de los servicios.
Describe los servicios y los mtodos de negocio de forma automtica en un entorno seguro,
sencillo y abierto.
Donde?
Contract
Qu

Laboratorio 9.1
Tema: Consulta de Datos consumiendo un WCF?
Implementar un servicio WCF (Windows Communication Foundation) que permita mostrar los
productos, utilizando el modelo de datos LINQ to SQL.
1. Disear el siguiente WebForm:
2. Agregue un nuevo elemento al proyecto Web. En este caso, ser un dataContext que
es propio del nuevo control de acceso a datos LINQ. Entonces, se escoge LINQ to SQL
Clases y colocamos el nombre de DataVentas.dbml
3. Seleccione la base de datos PedidosWeb, las tablas de tb_Categoria y tb_Producto, y

arrastre las tablas al diseador visual de LINQ.

150
4. Se agrega un nuevo elemento al proyecto. En este caso, ser un servicio de WCF.

Asigne el nombre de ProductService.
5. En la interfaz IServicioProducto, agregue una funcin llamado Listado() de tipo List of

tb_producto.

6. Seleccione el archivo ServicioProducto. Implemente la clase con la interface

IServicioProducto. Se codifica nuestra consulta de LINQ, que consiste en traer a todos
los productos del dataContext DataVentasDataContext, retornando la coleccin de
datos.
7. A continuacin, asigne una referencia de servicio al proyecto, tal como se muestra en

la figura.
8. Presione el botn Detectar para disponer del servicio, despliegue el servicio y

seleccione el mtodo Listado. Para terminar, presione botn Aceptar.

152
9. Programe en el evento Load de la pgina para listar los productos en el control

GridView1.
10. Presione las teclas Ctrl + F5 para ejecutar la aplicacin.

Laboratorio 9.2
Tema: Consulta de Datos consumiendo un servicio web
Implemente una consulta de productos por una categora seleccionada. En dicho proceso, se
deber consumir un servicio web para realizar la configuracin de las categoras a un control
de seleccin (DropDownList1) y listar los productos por categora seleccionada.?
1. En el proyecto, agregue un proyecto Web Service: WebServiceVentas.
2. Agregue un nuevo elemento al proyecto Web que tenemos. En este caso, ser un
dataContext que es propio del nuevo control de acceso a datos LINQ. Escogemos LINQ
to SQL Clases y colocamos el nombre de DataVentas.dbml
3. Seleccione la base de datos PedidosWeb, seleccione las tablas de tb_Categoria y

tb_Producto, arrastrar las tablas al diseador visual de LINQ.

154
4. Programe los siguientes procedures:

CREATE PROCEDURE usp_getCategorias
as
SELECT * FROM tb_categoria order by 2
GO
CREATE PROCEDURE usp_getProductosCat

@COD as int
as
SELECT * FROM tb_producto
WHERE cod_cat=@COD
GO
5. Agregue los procedures arrastrandolos al DataContext en el panel de

mtodos.(Eliminar la asociacin de las 2 clases).

6. Asigne a los mtodos del DataContext: usp_getProductosCat, la propiedad Return

Type, una tabla: tb_producto, y al mtodo usp_getCategorias la propiedad Return
Type, una tabla: tb_categoria.
7. Defina los mtodos dentro del Servicio de la aplicacin Web

156
8. Agregar la referencia al Servicio Web:
9. Elegir la opcin Servicios Web en esta Solucin

10. Elegir el Servicio Web WebServiceVentas
11. Dar Click en el botn Agregar Referencia
12. El proyecto debe tener una nueva carpeta que dice App_WebReferences

158
13. Disear el siguiente WebForm
14. Codifique la ventana Default para realizar el proceso de la consulta. Instancie la

referencia del servicio Web llamado servicio. En el evento Load de la pgina, configure
el dropdownList y el evento del control para listar los productos por categora.

15. Presione la tecla Ctrl + F5 para ejecutar la pgina.

160
Autoevaluacin
1. Qu es WCF?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
2. Por qu usar WCF en una aplicacin Web?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
3. Defina las descripciones de servicio y canal.

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
4. Cules son las caractersticas del Servicio Web?

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
5. Explique cada uno de los estndares para un Servicio Web

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
6. Defina los pasos para agregar una referencia al Servicio Web

------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

Resumen
Windows Communication Foundation es un conjunto de tecnologas .NET para la
creacin y puesta en marcha de sistemas interconectados. Es una nueva generacin de
infraestructura de comunicaciones que gira en torno a la arquitectura de servicios
Web. El soporte para servicios Web avanzados en Windows Communication
Foundation proporciona una mensajera segura, fiable y organizada en transacciones,
adems de interoperabilidad.
Un Servicio WCF es un programa que expone una coleccin de Endpoints (extremos o

puntos de entrada de WCF). Cada Endpoint es un punto de entrada de comunicacin
con el mundo. Un Cliente es un programa que intercambia mensajes con uno o ms
Endpoints.
Un Endpoint de un Servicio est compuesto por una Address (Direccin), un

Binding (Enlace) y un Contract (Contrato). La direccin de un Endpoint es una
direccin de red donde reside dicho Endpoint.
La clase ServiceDescription es una estructura en memoria que describe un Servicio

WCF incluyendo los EndPoints expuestos por el Servicio, los Behaviors aplicados al
servicio y el tipo (una clase) que implementa el servicio. ServiceDescription se utiliza
para crear metadatos, codificar/configurar, y canales. Se puede construir a mano este
objeto ServiceDescription.
Un mensaje es, bsicamente, una representacin en memoria de un InfoSet mensaje

SOAP. Hay que destacar que un mensaje (en lo relativo a su comunicacin por la red)
no est ligado a texto XML.
Los servicios Web XML son servicios que se prestan desde tu sitio a otro sitio, no a un
visitante.
Este servicio puede consistir en cualquier cosa:

o Realizar un simple clculo con unos datos que se le envan como parmetro.
o Acceder a una base de datos para recuperar un conjunto de registros.
o Validar la correccin de una informacin o contrastarla frente a otros datos,
etc.
Si desea consultar:
http://geeks.ms/blogs/jnunez/archive/2007/08/10/tutorial-wcf-2-de-5.aspx
Pgina referente al tutorial del WCF
http://burbujasnet.blogspot.com/2008/09/wcf-hospedando-servicios.html
Pgina referente a hospedar un servicio web
http://www.elguille.info/NET/ASPNET/crearServicioWeb.aspx
Pgina referente a como crear un servicio Web

162

UNIDAD DE
APRENDIZAJE
Manejo de la Seguridad en ASP.Net
usando el modelo de objetos ADO.NET manejando la seguridad de ASP. Net haciendo uso de los
conceptos de autorizacin y autenticacin.
TEMARIO
Seguridad en las aplicaciones Web en ASP.Net
Arquitectura de la seguridad en aplicaciones ASP.Net
Autenticacin y Autorizacin en ASP.Net
Controles de Inicio de Sesin ASP.Net
Los alumnos manejan la conexin y operaciones a la base de datos utilizando la
autenticacin basada en Formularios.
Los alumnos manejan los controles de Inicio de Sesin mediante los cuales pueden
acceder al sistema, registrar nuevos usuarios, y recuperar o cambiar su password.

164
1. Seguridad de las Aplicaciones Web

La seguridad de los sitios Web es una cuestin de importancia fundamental, adems de
compleja, para los desarrolladores de sitios Web. La proteccin de un sitio requiere la
elaboracin cuidadosa de un plan; por consiguiente, los programadores y administradores de
sitios Web deben comprender perfectamente las opciones para proteger los sitios.
ASP.NET funciona junto con Microsoft .NET Framework e Internet Information Services (IIS)
para ayudar a proporcionar aplicaciones Web seguras. Para ayudar a proteger la seguridad de
una aplicacin ASP.NET, se deben llevar a cabo las dos funciones principales que se describen
en la siguiente tabla.
Funcin de Descripcin
seguridad
Autenticacin Ayuda a comprobar que el usuario es precisamente quien dice ser. La
aplicacin obtiene las credenciales (diversas formas de identificacin, como
nombre y contrasea) de un usuario, y las valida consultando a una autoridad
determinada. Si las credenciales son vlidas, se considera a la entidad que ha
enviado las credenciales como una entidad autenticada.
Autorizacin Limita los derechos de acceso mediante la concesin o negacin de permisos
especficos a una identidad autenticada.
Adems, Internet Information Services (IIS) puede conceder o negar el acceso en funcin de la
direccin IP o del nombre de host del usuario. Cualquier autorizacin de acceso posterior se
realiza mediante la autorizacin de la direccin URL del permiso de acceso al sistema de
archivos NTFS.
Es importante entender cmo interactan todos los diversos subsistemas de seguridad. Puesto
que ASP.NET se basa en Microsoft .NET Framework, el desarrollador de aplicaciones ASP.NET
tambin tiene acceso a todas las caractersticas de seguridad integradas de .NET Framework,
como la seguridad de acceso a cdigo y la seguridad de acceso basada en funciones.
2. Arquitectura de Seguridad en ASP.Net
Como se muestra en la ilustracin, todos los clientes Web se comunican con las aplicaciones
ASP.NET a travs de Microsoft Internet Information Services (IIS). IIS autentica la solicitud si
fuera necesario y, a continuacin, busca el recurso solicitado (como una aplicacin ASP.NET). Si
el cliente est autorizado, el recurso estar disponible.

2.1. Integrar autenticacin de ASP.NET con IIS
Al considerar la autenticacin de ASP.NET, deber comprender la interaccin con los servicios

de autenticacin de IIS.
Internet Information Services (IIS) supone que se asigna un conjunto de credenciales a una
cuenta de Microsoft Windows NT y que se utilizan las credenciales para autenticar a los
usuarios. En las versiones 5.0 y 6.0 de IIS, hay tres clases distintas de autenticacin: bsica,
implcita y seguridad integrada de Windows (NTLM o Kerberos). Se puede seleccionar el tipo
de autenticacin que se desea utilizar en los servicios de administracin de IIS. Para obtener
ms informacin sobre la autenticacin de IIS, consulte la documentacin correspondiente.
Si los usuarios solicitan una direccin URL que asigna una aplicacin ASP.NET, la informacin
sobre la autenticacin y la solicitud se entrega a la aplicacin. ASP.NET proporciona la
autenticacin de formularios. La autenticacin de formularios es un sistema que redirige las
solicitudes no autenticadas a una pgina web ASP.NET que usted crea. El usuario proporciona
las credenciales y enva la pgina. Si la aplicacin autentica la solicitud, el sistema emite un
vale de autenticacin en una cookie que contiene las credenciales o una clave para readquirir
la identidad. Las solicitudes subsiguientes incluyen un vale de autenticacin con la solicitud.
2.2. Configuracin de seguridad del archivo de configuracin de ASP.NET
La configuracin de seguridad de ASP.NET se configura en los archivos Machine.config y

Web.config. Como con la dems informacin de configuracin, la configuracin base y la
predeterminada se establecen en el archivo Machine.config en el subdirectorio Config de la
instalacin .NET Framework actual. Puede establecer una configuracin especfica del sitio y
otra especfica de la aplicacin (incluidos los valores de reemplazo del archivo Machine.config)
en los archivos Web.config en los directorios raz del sitio Web y de la aplicacin. Los
subdirectorios heredan las configuraciones del directorio, a no ser que se reemplacen por un
archivo Web.config del subdirectorio.
Hay tres subsecciones principales en un archivo Web.config: las secciones autenticacin,

autorizacin e identidad. Los valores para cada elemento de seguridad normalmente se
establecen en el archivo Machine.config y se reemplazan segn sea necesario en el archivo
Web.config en la aplicacin. Todos los subdirectorios heredan automticamente estos valores.
No obstante, los subdirectorios pueden tener sus propios archivos de configuracin que
reemplazan valores heredados.
La configuracin de ASP.NET slo se aplica a recursos ASP.NET, en concreto a aqullos que se

registraron para que los controlara la extensin Aspnet_isapi.dll en IIS. La configuracin de
ASP.NET no puede proporcionar autorizacin para recursos que no haya procesado ASP.NET.
Por lo tanto, .txt, .htm, .html, .gif, .jpg, .jpeg, .asp y otros tipos de archivo son accesibles para
todos los usuarios (sujetos a los permisos de IIS). Por ejemplo, aunque los recursos de un
directorio de ASP.NET estn incluidos en un archivo Web.config con acceso restringido, los
usuarios pueden ver los archivos de ese directorio, siempre que el explorador de directorios
est activado y no haya otro tipo de restricciones. Estos tipos de archivos pueden estar bajo la
seguridad de ASP.NET si se asigna explcitamente dichas extensiones de nombre de archivo a la
extensin Aspnet_isapi.dll mediante la herramienta de administracin de IIS. Sin embargo, el
procesamiento de estos tipos de archivos a travs de ASP.NET puede afectar al rendimiento
del sitio Web.

166
El ejemplo siguiente muestra la sintaxis de las secciones de seguridad de un archivo de

configuracin:
<authentication mode="[Windows|Forms| None]">

<forms name="name"
loginUrl="url"
protection="[All|None|Encryption|Validation]"
path="path" timeout="minutes"
requireSSL="[true|false]"
slidingExpiration="[true|false]">
<credentials passwordFormat="[Clear|MD5|SHA1]">
<user name="********"
password="********"/>
</credentials>
</forms>
</authentication>
<authorization>
<allow users="comma-separated list of users"
roles="comma-separated list of roles" />
<deny users="comma-separated list of users"
roles="comma-separated list of roles" />
</authorization>
<identity impersonate ="[true|false]"

userName="domain\username"
password="password" />
<trust level="[Full|High|Medium|Low|Minimal]"
originUrl=""/>
<securityPolicy>
<trustLevel name="Full" policyFile="internal"/>
<trustLevel name="High" policyFile="web_hightrust.config"/>
<trustLevel name="Medium" policyFile="web_mediumtrust.config"/>
<trustLevel name="Low" policyFile="web_lowtrust.config"/>
<trustLevel name="Minimal" policyFile="web_minimaltrust.config"/>
</securityPolicy>
Los valores predeterminados de estos elementos se incluyen en la tabla siguiente:
Valor predeterminado Descripcin
<allow roles="" /> Una cadena vaca que indica que se permiten
todas las funciones de forma predeterminada.
<allow users="*" /> Una cadena vaca que indica que todos los
usuarios tienen acceso (no se requiere ninguna
autenticacin).
<authentication mode="Windows" /> El tipo de autenticacin que determina el
origen del valor User actual. El valor
predeterminado es Windows.
<credentials passwordFormat="SHA1" /> El algoritmo hash que se utiliza en las
contraseas. El valor predeterminado es SHA1.
<deny roles="" /> Una cadena vaca que indica que no se deniega

ninguna funcin de forma predeterminada.

<deny users="" /> Una cadena vaca que indica que no se deniega
ningn usuario de forma predeterminada.
<forms loginUrl="logon.aspx" /> Direccin URL a la que se dirige la solicitud si
establece la autenticacin mode como Forms y
si la solicitud no tiene un vale de autenticacin
vlido.
<forms name=".ASPXAUTH" /> El nombre bajo el que la cookie de
autenticacin de formularios se almacena en el
equipo del usuario.
<forms path="/" /> La ruta de acceso a la que se aplica la
autenticacin de formularios. El valor
predeterminado es todas las rutas de acceso
desde la raz de la aplicacin hacia abajo.
<forms protection="All" /> La seguridad que se ha aplicado al vale de
autenticacin de formularios. Los valores
incluyen All, None, Encryption y Validation.
<forms timeout="30" /> El tiempo de espera en minutos antes de que el
vale de autenticacin de formularios expire y
los usuarios tengan que volver a autenticarse.
<forms requireSSL="false" /> Un valor booleano que indica si se requiere una
conexin SSL para transmitir la cookie de
autenticacin.
<forms slidingExpiration="true" /> Un valor booleano que indica si est habilitado
el plazo de expiracin. Para obtener ms
informacin, vea la propiedad
SlidingExpiration.
<identity impersonate="false" /> Un valor booleano que indica si la suplantacin
est deshabilitada. Para obtener ms
informacin, vea Suplantacin de ASP.NET.
<identity userName="" /> Una cadena vaca que indica que no se
especifica ninguna identidad de usuario de
forma predeterminada.
<identity password="" /> Una cadena vaca que indica que no se
especifica ninguna contrasea para la
identidad de usuario de forma
predeterminada.
<trust level="Full" originUrl="" /> La directiva de seguridad que se aplicar a la
aplicacin.
<trustLevel name="Full" El archivo de directivas predeterminado para el
policyFile="internal"/> nivel de confianza Full.
<trustLevel name="High" El archivo de directivas predeterminado para el
policyFile="web_hightrust.config"/> nivel de confianza High.
<trustLevel name="Medium" El archivo de directivas predeterminado para el

168
policyFile="web_mediumtrust.config"/> nivel de confianza Medium.

<trustLevel name="Low" El archivo de directivas predeterminado para el
policyFile="web_lowtrust.config"/> nivel de confianza Low.
<trustLevel name="Minimal" El archivo de directivas predeterminado para el
policyFile="web_minimaltrust.config"/> nivel de confianza Minimal.
3. Autenticacin de ASP.NET
La autenticacin es un proceso que consiste en obtener las credenciales de identificacin,

como nombre y contrasea, de un usuario y validarlas consultando a una autoridad
determinada. Si las credenciales son vlidas, se considera a la entidad que ha enviado las
credenciales como una entidad autenticada. Una vez autenticada la identidad, el proceso de
autorizacin determina si esa identidad tiene acceso a un recurso especfico.
ASP.NET implementa este proceso a travs de proveedores de autenticacin, que son mdulos
que contienen el cdigo necesario para autenticar las credenciales del solicitante. En los temas
de esta seccin se describen los proveedores de autenticacin integrados en ASP.NET.
Trmino Definicin
Proveedor de Proporciona informacin sobre cmo utilizar la autenticacin de

autenticacin de Windows junto con la autenticacin de Microsoft Internet Information
Windows Services (IIS) para proteger las aplicaciones ASP.NET.
Proveedor de Proporciona informacin sobre cmo crear un formulario de inicio de
autenticacin sesin especfico de la aplicacin y realizar la autenticacin mediante
mediante cdigo propio. Una manera sencilla de trabajar con la autenticacin de
formularios formularios consiste en utilizar la pertenencia a ASP.NET y los controles
de inicio de sesin de ASP.NET, que conjuntamente proporcionan un
mtodo para recopilar las credenciales de usuario, autenticarlas y
administrarlas, con muy poco cdigo o nada en absoluto. Para obtener
ms informacin, vea Administrar usuarios mediante pertenencia y
Informacin general sobre controles de inicio de sesin de ASP.NET.
3.1. Proveedor de autenticacin de Windows
La Autenticacin de Windows trata la identidad de usuario proporcionada por Microsoft

Internet Information Services (IIS) como el usuario autenticado en una aplicacin ASP.NET. IIS
ofrece diversos mecanismos de autenticacin para comprobar la identidad del usuario,
incluyendo autenticacin annima, autenticacin de Windows integrada (NTLM),
autenticacin de Windows integrada (Kerberos), autenticacin bsica (codificada en base64),
autenticacin implcita y autenticacin basada en certificados de cliente.
La autenticacin de Windows se implementa en ASP.NET utilizando el mdulo
WindowsAuthenticationModule. El mdulo construye una identidad WindowsIdentity
basndose en las credenciales proporcionadas por IIS y establece la identidad como el valor
actual de la propiedad User para la aplicacin.
La autenticacin de Windows es el mecanismo de autenticacin predeterminado para las
aplicaciones ASP.NET y se identifica como el modo de autenticacin para una aplicacin

mediante el elemento de configuracin authentication, tal como se muestra en el ejemplo de

cdigo siguiente:
<system.web>
<authentication mode="Windows"/>
</system.web>
3.1.1. Suplantar la identidad de Windows
Si bien el modo de autenticacin de Windows establece el valor de la propiedad User actual en

una identidad WindowsIdentity basndose en las credenciales proporcionadas por IIS, no
modifica la identidad de Windows proporcionada al sistema operativo. La identidad de
Windows proporcionada al sistema operativo se utiliza para comprobar los permisos, como los
permisos de archivos NTFS, o para conectarse a una base de datos mediante la seguridad
integrada. De forma predeterminada, esta identidad de Windows es la identidad del proceso
de ASP.NET. En Microsoft Windows 2000 y Windows XP Professional, sta es la identidad del
proceso de trabajo de ASP.NET, que es la cuenta local de ASPNET. En Windows Server 2003,
sta es la identidad del Grupo de aplicaciones IIS del que forma parte la aplicacin ASP.NET. De
forma predeterminada, sta es la cuenta NETWORK SERVICE.
Para configurar la identidad de Windows de la aplicacin ASP.NET como la identidad de
Windows proporcionada por IIS hay que habilitar la suplantacin. Es decir, indica a la
aplicacin ASP.NET que suplante la identidad suministrada por IIS para todas las tareas
autenticadas por el sistema operativo Windows, incluyendo el acceso a archivos y a la red.
Para habilitar la suplantacin para la aplicacin Web, en el archivo Web.config de la aplicacin
establezca el atributo impersonate del elemento identity en true, como se muestra en el
ejemplo de cdigo siguiente:
<system.web>
<authentication mode="Windows"/>
<identity impersonate="true"/>
</system.web>
3.2. Proveedor de autenticacin mediante formularios
La autenticacin de formularios permite autenticar el nombre de usuario y la contrasea de los

usuarios mediante un formulario de inicio de sesin que haya creado. Las solicitudes no
autenticadas se redirigen a una pgina de inicio de sesin, en la que el usuario proporciona las
credenciales y enva el formulario. Si la aplicacin autentica la solicitud, el sistema emite un
vale que contiene una clave con el fin de restablecer la identidad para posteriores solicitudes.
3.2.1. Informacin general sobre la autenticacin de formularios de ASP.NET
La autenticacin de formularios permite autenticar a los usuarios mediante su propio cdigo y,

a continuacin, conserva un token de autenticacin en una cookie o en la direccin URL de la
pgina. La autenticacin de formularios contribuye al ciclo de vida de la pgina ASP.NET
mediante la clase FormsAuthenticationModule. Puede tener acceso a informacin y funciones
de autenticacin de formularios mediante la clase FormsAuthentication.
Para usar la autenticacin de formularios, se crea una pgina de inicio de sesin que recopila
las credenciales del usuario y que incluye el cdigo para autenticar las credenciales.
Normalmente, la aplicacin se configura para redirigir las solicitudes a la pgina de inicio de
sesin cuando los usuarios intentan tener acceso a un recurso protegido, como una pgina que
requiere autenticacin. Si las credenciales del usuario son vlidas, puede llamar a los mtodos

170
de la clase FormsAuthentication para redirigir la solicitud al recurso solicitado originalmente

con un vale de autenticacin adecuado (cookie). Si no desea redireccionar, puede simplemente
obtener la cookie de autenticacin de formularios o establecerla. En las solicitudes siguientes,
el explorador del usuario pasa la cookie de la autenticacin con la solicitud que, a
continuacin, omite la pgina de inicio de sesin.
Configure la autenticacin de formularios mediante el elemento de configuracin de
autenticacin. En el caso ms simple, tiene una pgina de inicio de sesin. En el archivo de
configuracin, especifique una direccin URL para redirigir las solicitudes no autenticadas a la
pgina de inicio de sesin. A continuacin, defina credenciales vlidas, ya sea en el archivo
Web.config o en un archivo independiente. El ejemplo siguiente muestra una seccin de un
archivo de configuracin que especifica una pgina de inicio de sesin y credenciales de
autenticacin para el mtodo Authenticate. Las contraseas se han cifrado mediante el
mtodo HashPasswordForStoringInConfigFile.
<authentication mode="Forms">
<forms name="SavingsPlan" loginUrl="/Login.aspx">
<credentials passwordFormat="SHA1">
<user name="Kim"
password="07B7F3EE06F278DB966BE960E7CBBD103DF30CA6"/>
<user name="John"
password="BA56E5E0366D003E98EA1C7F04ABF8FCB3753889"/>
</credentials>
</forms>
</authentication>
Despus de una autenticacin correcta, el mdulo FormsAuthenticationModule establece el

valor de la propiedad User en una referencia al usuario autenticado. El ejemplo de cdigo
siguiente muestra cmo leer mediante programacin la identidad del usuario autenticado de
formularios.
Dim authUser2 As String = User.Identity.Name
3.2.2. Credenciales de autenticacin de formularios
Las credenciales de autenticacin mediante formularios que se utilizan para validar usuarios en
el inicio de sesin se pueden almacenar en un origen de datos externo o en el archivo de
configuracin de aplicaciones.
Cuando se utiliza la autenticacin mediante formularios, se pueden validar los usuarios a partir
de los pares de usuario y contrasea en la seccin de credenciales del archivo de configuracin
del sitio Web. Se puede utilizar el mtodo Authenticate para comparar las credenciales
recopiladas del usuario con la lista de pares de usuario y contrasea de la seccin de
credenciales para determinar si se debe conceder el acceso. En el ejemplo siguiente, los
usuarios Kim y John pueden iniciar una sesin si proporcionan la contrasea correcta.
<credentials passwordFormat="SHA1" >

<user name="Kim"
password="07B7F3EE06F278DB966BE960E7CBBD103DF30CA6"/>
<user name="John"
password="BA56E5E0366D003E98EA1C7F04ABF8FCB3753889"/>
</credentials>

Los pares de credenciales del ejemplo se cifran utilizando el formato hash de contraseas
SHA1 (Secure Hash Algorithm-1). El atributo PasswordFormat es necesario. Los valores para
esta propiedad se muestran en la tabla siguiente:
Valor Descripcin
Clear Las contraseas se almacenan en texto no cifrado. La contrasea del usuario se

compara directamente con este valor, sin transformarlo.
MD5 Las contraseas se almacenan utilizando una sntesis hash del mensaje (MD5). Para
validar las credenciales, se obtiene la clave hash de la contrasea del usuario mediante
el algoritmo MD5 y se compara con el valor almacenado. La contrasea no cifrada no se
almacena ni se compara nunca si se utiliza este valor. Con este algoritmo el rendimiento
es mayor que con el algoritmo SHA1.
SHA1 Las contraseas se almacenan utilizando una sntesis hash del algoritmo SHA1. Para
validar las credenciales, se obtiene la clave hash de la contrasea del usuario mediante
el algoritmo MD5 y se compara con el valor almacenado. La contrasea no cifrada no se
almacena nunca. Utilice este algoritmo para mejorar la seguridad mejorada relacionada
con el algoritmo MD5.
.NET Framework incluye clases y mtodos que facilitan la creacin de valores hash mediante
programacin para su almacenamiento permanente. FormsAuthentication es una clase que
puede resultar til para la programacin de esta tarea. Su mtodo
HashPasswordForStoringInConfigFile puede obtener una clave hash. Para que el control sea
ms preciso, tambin se pueden utilizar las clases System.Security.Cryptography.
Las contraseas con valores hash almacenadas en un archivo de texto no se pueden utilizar
para regenerar la contrasea original, pero son potencialmente vulnerables a un ataque de
diccionario. En este tipo de ataque, el agresor, tras obtener acceso al archivo de contraseas,
intenta adivinar las contraseas mediante software con el fin de generar de manera iterativa
un valor hash para todas las palabras en un diccionario de gran tamao y comparar los valores
hash generados con los almacenados. Si almacena las contraseas con valores hash en algn
medio, debe notificar a los usuarios que elijan contraseas que no sean palabras comunes y
que contengan nmeros y caracteres no alfanumricos para evitar los ataques de diccionario.
Adems, puede facilitar la administracin de las credenciales almacenndolas mediante la
pertenencia a ASP.NET
4. Autorizacin de ASP.NET
La autorizacin determina si se debera conceder acceso a una identidad a un recurso

concreto. EN ASP.NET existen dos formas de autorizar el acceso a un recurso dado:
Autorizacin de archivos FileAuthorizationModule realiza la autorizacin de archivos.

Realiza una comprobacin de la lista de control de acceso (ACL) del archivo de
controladores .aspx o .asmx para determinar si un usuario debe tener acceso al
archivo. Los permisos de ACL se comprueban para la identidad de Windows (si se
habilita la autenticacin de Windows) del usuario o para la identidad de Windows del
proceso de ASP.NET. Para obtener ms informacin, vea Suplantacin de ASP.NET.
Autorizacin de URL UrlAuthorizationModule realiza la autorizacin de URL, que
asigna usuarios y funciones a direcciones URL en aplicaciones ASP.NET. Este mdulo se

172
puede utilizar para permitir o denegar de forma selectiva el acceso a las partes
arbitrarias de una aplicacin (normalmente los directorios) para usuarios concretos o
funciones.
4.1. Utilizar la autorizacin de URL
Con la autorizacin de URL, permite o deniega explcitamente el acceso a un directorio

determinado por nombre de usuario o funcin. Para ello, se crea una seccin authorization en
el archivo de configuracin para ese directorio. Para habilitar la autorizacin de URL, basta con
especificar una lista de usuarios o funciones en los elementos permitir o denegar de la seccin
autorizacin de un archivo de configuracin. Los permisos establecidos para un directorio
tambin se aplican a sus subdirectorios, a no ser que los archivos de configuracin de un
subdirectorio los reemplacen.
A continuacin se muestra la sintaxis para la seccin authorization:
<authorization>
<[allow|deny] users roles verbs />
</authorization>
Se requiere el elemento allow o deny. Debe especificar el atributo users o roles. Se pueden
incluir los dos atributos, aunque no es necesario. El atributo verbs es opcional.
Los elementos allow y deny conceden y revocan el acceso, respectivamente. Cada elemento
admite los atributos mostrados en la tabla siguiente:
Atributo Descripcin
users Identifica las identidades (cuentas de usuario) a las que se destina el elemento.
Los usuarios annimos se identifican mediante un signo de interrogacin (?). Puede
especificar todos los usuarios autenticados mediante un asterisco (*).
roles Identifica una funcin (un objeto RolePrincipal) para la solicitud actual a la que se
permite o deniega el acceso al recurso. Para obtener ms informacin, vea
Administrar autorizaciones con roles.
verbs Define los verbos HTTP a los que se aplica la accin, como GET, HEAD y POST. El valor
predeterminado es "*" que especifica todos los verbos.
El siguiente ejemplo concede acceso a la identidad Kim y a los miembros de la funcin Admins,
y deniega el acceso a la identidad John (a menos que la identidad John est incluida en la
funcin Admins) y a todos los usuarios annimos:
<authorization>
<allow users="Kim"/>
<allow roles="Admins"/>
<deny users="John"/>
<deny users="?"/>
</authorization>
La siguiente seccin authorization muestra cmo permitir el acceso a la identidad John y

denegrselo a todos los dems usuarios:

<authorization>
<allow users="John"/>
<deny users="*"/>
</authorization>
Puede especificar varias entidades para los atributos users y roles utilizando una lista separada
por comas, como se muestra en el ejemplo siguiente:
<allow users="John, Kim, contoso\Jane"/>
Tenga en cuenta que si especifica el nombre de una cuenta de dominio, el nombre debe incluir
tanto el dominio como el nombre de usuario (contoso\Jane).
El siguiente ejemplo permite a todos los usuarios utilizar el mtodo GET de HTTP para obtener
un recurso, pero solo permite a la identidad Kim realizar una operacin POST:
<authorization>
<allow verbs="GET" users="*"/>
<allow verbs="POST" users="Kim"/>
<deny verbs="POST" users="*"/>
</authorization>
Las reglas se aplican de la siguiente manera:

Las reglas contenidas en archivos de configuracin en la aplicacin tienen prioridad
sobre las reglas heredadas. El sistema determina la regla que tiene prioridad creando
una lista combinada de todas las reglas de una direccin URL, con las reglas ms
recientes (ms arriba en la jerarqua) al principio de la lista.
Dado un conjunto de reglas combinadas para una aplicacin, ASP.NET comienza al
principio de la lista y comprueba las reglas hasta que encuentra la primera
coincidencia. La configuracin predeterminada de ASP.NET incluye un elemento <allow
users="*">, que autoriza a todos los usuarios. (Esta regla se aplica en ltimo lugar de
forma predeterminada.) Si no coincide ninguna otra regla de autorizacin, se permite
la solicitud. Si se encuentra una coincidencia y sta es un elemento deny, la solicitud se
devuelve con el cdigo de estado 401 HTTP. Si coincide un elemento allow, el mdulo
permite que se siga procesando la solicitud.
5. Controles de inicio de sesin de ASP.NET
ASP.NET proporciona una funcionalidad de inicio de sesin (autenticacin) segura para las
aplicaciones web ASP.NET sin necesidad de programacin. Las plantillas de proyecto
predeterminadas de Visual Studio para aplicaciones web y sitios web incluyen pginas ya
generadas que permiten que los usuarios se registren en una nueva cuenta, inicien una sesin
y cambien sus contraseas.
Tambin puede crear sus propias pginas a las que puede agregar controles de inicio de sesin
ASP.NET con el fin de agregar funcionalidad de inicio de sesin. Para utilizar los controles de
inicio de sesin, cree pginas web y, a continuacin, agregue los controles de inicio de sesin
en las pginas desde el Cuadro de herramientas.
Normalmente, restringe el acceso a las pginas ASP.NET colocndolas en una carpeta
protegida. A continuacin, configure la carpeta para denegar el acceso a los usuarios annimos
(usuarios que no estn registrados) y conceder acceso a los usuarios autenticados
(registrados). (La plantilla de proyecto predeterminada para proyectos web incluye una
carpeta denominada Cuentas que ya est configurada para permitir el acceso slo a los

174
usuarios que han iniciado la sesin.) Opcionalmente, puede asignar usuarios a roles y, a
continuacin, autorizar que los usuarios tengan acceso a pginas web concretas por rol.
De manera predeterminada, los controles de inicio de sesin se integran con la autenticacin
de pertenencia a ASP.NET y de formularios de ASP.NET para ayudar a automatizar la
autenticacin del usuario en un sitio web. Para obtener informacin sobre cmo utilizar la
autenticacin de pertenencia y de formularios de ASP.NET
De manera predeterminada, los controles de inicio de sesin de ASP.NET se transmiten en
forma de texto sin formato en HTTP. Si le preocupa la seguridad, utilice HTTPS con cifrado SSL.
En la siguiente tabla podremos ver cual es el contenido de la carpeta Account o Cuenta

Page Description
Login.aspx Habilita a los usuarios que tienen una cuenta para iniciar sesin
proporcionndoles un nombre de usuario y contrasea. Esta
pgina incluye un vnculo a la pgina de registro. La pgina
Login.aspx es accesible a usuarios annimos.
Contiene el control Login.
En la siguiente ilustracin se muestra la pgina de inicio de
sesin en el explorador.
Register.aspx Habilita a los usuarios para registrarse y crear una nueva
cuenta. Esta pgina es accesible para los usuarios annimos y
los usuarios autenticados.
Contiene el control CreateUserWizard.
En la ilustracin siguiente se muestra la pgina para crear
nueva cuenta (registro) en el explorador.
ChangePassword.aspx Habilita a los usuarios registrados para cambiar sus
contraseas. Esta pgina slo es accesible para los usuarios
autenticados.
Contiene el control ChangePassword.
En la ilustracin siguiente se muestra la pgina de cambio de
contrasea en el explorador.
ChangePasswordSuccess.aspx Muestra un mensaje que indica que la contrasea se ha
cambiado correctamente. Esta pgina slo es accesible para los
usuarios autenticados.
Esta pgina no usa ningn control de inicio de sesin de
ASP.NET.
Web.config Contiene los valores que definen el acceso a las pginas en la
carpeta Cuenta
3.1. Control Login (inicio de sesin)
El control Login muestra una interfaz de usuario para la autenticacin de usuario. El control
Login contiene cuadros de texto para el nombre de usuario y la contrasea, y una casilla que
permite a los usuarios indicar si quieren que el servidor almacene su identidad utilizando la
pertenencia a ASP.NET y que los autentique automticamente la prxima vez que visiten el
sitio.
El control Login tiene propiedades para una presentacin personalizada, para mensajes
personalizados y para vnculos a otras pginas en las que los usuarios pueden cambiar su
contrasea o recuperarla si la han olvidado. El control Login se puede utilizar de forma

independiente en una pgina principal o puede utilizarlo en una pgina de inicio de sesin
dedicada.
Si utiliza el control Login con pertenencia a ASP.NET, no necesita escribir el cdigo para realizar
la autenticacin. Sin embargo, si desea crear su propia lgica de autenticacin, puede
controlar el evento Authenticate del control Login y agregar el cdigo de autenticacin
personalizado.
3.2. Control LoginView
El control LoginView le permite mostrar informacin diferente a los usuarios annimos y a los
que han iniciado una sesin. El control muestra una de las dos plantillas: AnonymousTemplate
o LoggedInTemplate. En las plantillas puede agregar marcado y controles que muestren
informacin apropiada para usuarios annimos y usuarios autenticados, respectivamente.
El control LoginView tambin incluye eventos para ViewChanging y ViewChanged, que le
permiten escribir controladores para cuando el usuario inicie una sesin y cambie el estado.
3.3. Control LoginStatus
El control LoginStatus muestra un vnculo de inicio de sesin para los usuarios que no estn
autenticados y un vnculo de cierre de sesin para los que estn autenticados. El vnculo de
inicio de sesin lleva al usuario a una pgina de inicio de sesin. El vnculo de cierre de sesin
restablece la identidad del usuario actual para que sea un usuario annimo.
Puede personalizar el aspecto del control LoginStatus estableciendo las propiedades LoginText
y LoginImageUrl.
3.4. Control LoginName
El control LoginName muestra el nombre de inicio de sesin de un usuario si el usuario ha

iniciado la sesin mediante la pertenencia a ASP.NET. De forma alternativa, si el sitio utiliza
Autenticacin de Windows integrada, el control muestra el nombre de cuenta de Windows del
usuario.
3.5. Control PasswordRecovery
El control PasswordRecovery permite recuperar las contraseas del usuario basndose en la

direccin de correo electrnico que se utiliz cuando se cre la cuenta. El control
PasswordRecovery enva un mensaje de correo electrnico con la contrasea al usuario.
Puede configurar la pertenencia a ASP.NET para almacenar contraseas mediante el cifrado no
reversible. En ese caso, el control PasswordRecovery genera una nueva contrasea en lugar de
enviar la contrasea original al usuario.
Tambin puede configurar la pertenencia para que incluya una pregunta de seguridad que el
usuario debe contestar para recuperar una contrasea. Si lo hace, el control
PasswordRecovery hace la pregunta y comprueba la respuesta antes de recuperar la
contrasea.
El control PasswordRecovery requiere que su aplicacin pueda reenviar el mensaje de correo
electrnico a un servidor de Protocolo simple de transferencia de correo (SMTP). Puede
personalizar el texto y formato del mensaje de correo electrnico enviados al usuario
estableciendo la propiedad MailDefinition.
El ejemplo siguiente muestra un control PasswordRecovery declarado en una pgina ASP.NET

con valores de propiedad MailDefinition para personalizar el mensaje de correo electrnico.

176
<asp:PasswordRecovery ID="PasswordRecovery1" Runat="server"

SubmitButtonText="Get Password" SubmitButtonType="Link">
<MailDefinition From="administrator@Contoso.com"
Subject="Your new password"
BodyFileName="PasswordMail.txt" />
</asp:PasswordRecovery>
3.6. Control CreateUserWizard
El control CreateUserWizard recoge informacin de los posibles usuarios. De forma

predeterminada, el control CreateUserWizard agrega el nuevo usuario al sistema de
pertenencias de ASP.NET.
El control CreateUserWizard recopila la siguiente informacin sobre el usuario:
Nombre de usuario
Contrasea
Confirmacin de contrasea
Direccin de correo electrnico
Pregunta de seguridad
Respuesta de seguridad.
Esta informacin se utiliza para autenticar a los usuarios y recuperar las contraseas del
usuario, si fuera necesario.
El siguiente ejemplo muestra una declaracin de ASP.NET tpica para el control

CreateUserWizard:
<asp:CreateUserWizard ID="CreateUserWizard1" Runat="server"

ContinueDestinationPageUrl="~/Default.aspx">
<WizardSteps>
<asp:CreateUserWizardStep Runat="server"
Title="Sign Up for Your New Account">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep Runat="server"
Title="Complete">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
3.7. Control ChangePassword
El control ChangePassword permite a los usuarios cambiar su contrasea. El usuario debe

proporcionar primero la contrasea original y, a continuacin, crear y confirmar la nueva
contrasea. Si la contrasea original es correcta, la contrasea del usuario se cambia a la
nueva contrasea. El control tambin se encarga de enviar un mensaje de correo electrnico
sobre la nueva contrasea.
El control ChangePassword incluye dos vistas con plantilla que se muestran al usuario. La
primera es ChangePasswordTemplate, que muestra la interfaz de usuario que se utiliza para
recopilar los datos necesarios para cambiar la contrasea del usuario. La segunda plantilla es
SuccessTemplate, que define la interfaz de usuario que se muestra despus de haber
cambiado correctamente la contrasea del usuario.
El control ChangePassword funciona con usuarios autenticados y no autenticados. Si el usuario
no se ha autenticado, el control solicita al usuario que escriba un nombre de inicio de sesin. Si

el usuario se ha autenticado, el control rellena el cuadro de texto con el nombre de inicio de

sesin del usuario.
Laboratorio 10.1
Tema: Cmo: Implementar la autenticacin de formularios simple
Implementar la autenticacin mediante formularios de ASP.NET. El proceso es el siguiente: Los

usuarios solicitan un recurso protegido, que es una pgina denominada Default.aspx. Solo un
usuario tiene acceso al recurso protegido: jchen@contoso.com, con una contrasea de
"37Yj*99P". El nombre de usuario y la contrasea estn incluidos en el cdigo del archivo
Logon.aspx. El ejemplo necesita tres archivos: el archivo Web.config, una pgina denominada
Logon.aspx y una pgina denominada Default.aspx. Los archivos residen en el directorio raz de
la aplicacin.
1. Si la aplicacin tiene un archivo Web.config en la raz de la aplicacin, bralo.

2. Si la aplicacin todava no tiene un archivo Web.config en la carpeta raz de la
aplicacin, cree un archivo de texto denominado Web.config y agregue los siguientes
elementos:
<?xml version="1.0"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
</system.web>
</configuration>
3. Dentro del elemento system.web, cree un elemento authentication y establezca su

atributo mode en Forms, como se muestra en el ejemplo siguiente:
<system.web>
</authentication>
</system.web>
4. Dentro del elemento authentication, cree un elemento forms y establezca los atributos
siguientes:
1. loginUrl: Establezca este atributo en "Logon.aspx". Logon.aspx es la direccin
URL que se debe usar para la redireccin si ASP.NET no encuentra una cookie
de autenticacin con la solicitud.
2. name: Establezca este atributo en ".ASPXFORMSAUTH". De este modo se
establece el sufijo del nombre de la cookie que contiene el vale de
autenticacin.
<system.web>
<forms loginUrl="Logon.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
</system.web>

178
5. Dentro del elemento system.web, cree un elemento authorization.
<system.web>
<forms loginUrl="Logon.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
<authorization>
</authorization>
</system.web>
6. Dentro del elemento authorization, cree un elemento deny y establezca su atributo

users en "?". Esto especifica que los usuarios no autenticados (representados por "?")
no tienen acceso a los recursos de esta aplicacin.
<system.web>
<forms loginUrl="logon.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
<authorization>
<deny users="?" />
</authorization>
</system.web>
7. Guarde el archivo Web.config y cirrelo.
Crear la pgina de inicio de sesin
Cuando los usuarios solicitan cualquier pgina del sitio web, y si previamente no se han
autenticado, se les redirige a una pgina denominada Logon.aspx. Especific este nombre de
archivo anteriormente en el archivo Web.config.
La pgina Logon.aspx recoge las credenciales del usuario (direccin de correo electrnico y
contrasea) y las autentica. Si el usuario es autenticado correctamente, la pgina de inicio de
sesin le redirige a la pgina solicitada originalmente.
1. Cree una pgina ASP.NET denominada Logon.aspx en la carpeta raz de la aplicacin.

2. Digite el siguiente cdigo en la vista Cdigo o HTML no en el archivo vb.
<%@ Page Language="VB" %>

<%@ Import Namespace="System.Web.Security" %>
Sub Logon_Click(ByVal sender As Object, ByVal e As EventArgs)
If ((UserEmail.Text = "jchen@contoso.com") And _
(UserPass.Text = "37Yj*99Ps")) Then
FormsAuthentication.RedirectFromLoginPage _
(UserEmail.Text, Persist.Checked)
Else
Msg.Text = "Invalid credentials. Please try again."
End If
End Sub

</script>
<html>
<head id="Head1" runat="server">
<title>Forms Authentication - Login</title>
</head>
<body>
<form id="form1" runat="server">
<h3>
Logon Page</h3>
<table>
<tr>
<td>
E-mail address:</td>
<td>
<asp:TextBox ID="UserEmail" runat="server" /></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ControlToValidate="UserEmail"
Display="Dynamic"
ErrorMessage="Cannot be empty."
runat="server" />
</td>
</tr>
<tr>
<td>
Password:</td>
<td>
<asp:TextBox ID="UserPass" TextMode="Password"
runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
ControlToValidate="UserPass"
ErrorMessage="Cannot be empty."
runat="server" />
</td>
</tr>
<tr>
<td>
Remember me?</td>
<td>
<asp:CheckBox ID="Persist" runat="server" /></td>
</tr>
</table>
<asp:Button ID="Submit1" OnClick="Logon_Click" Text="Log On"
runat="server" />
<p>
<asp:Label ID="Msg" ForeColor="red" runat="server" />
</p>
</form>
</body>
</html>
La pgina contiene controles de servidor ASP.NET que recogen informacin sobre el usuario y
una casilla en la que los usuarios pueden hacer clic para conservar sus credenciales de inicio de
sesin. El controlador de Click del botn Iniciar sesin contiene cdigo que comprueba la
direccin de correo electrnico y la contrasea del usuario utilizando como referencia los

180
valores incluidos en el cdigo. (La contrasea es una contrasea segura que contiene varios
caracteres no alfabticos y que tiene al menos ocho caracteres de longitud.) Si las credenciales
del usuario son correctas, el cdigo llama al mtodo RedirectFromLoginPage de la clase
FormsAuthentication, pasando el nombre del usuario y un valor booleano (derivado de la
casilla) que indica si se va conservar o no un vale de autenticacin como una cookie. El mtodo
redirige al usuario a la pgina solicitada originalmente. Si las credenciales del usuario no
coinciden, se muestra un mensaje de error. Observe que la pgina importa el espacio de
nombres System.Web.Security, que contiene la clase FormsAuthentication.
Crear la pgina predeterminada
Para el ejemplo, crear una pgina ASP.NET en la carpeta raz de la aplicacin. Como especific
en el archivo de configuracin que se negara a todos los usuarios no autenticados el acceso a
los recursos de ASP.NET de la aplicacin (incluidos los archivos .aspx, pero no los archivos
estticos, como los archivos HTML o los archivos multimedia con imgenes, msica etc.),
cuando un usuario solicite la pgina, la autenticacin de formularios comprobar sus
credenciales y, si es necesario, le redirigir a la pgina de inicio de sesin. La pgina que cree
tambin permitir a los usuarios cerrar la sesin, borrando su vale de autenticacin
almacenado (cookie).
1. Cree una pgina ASP.NET denominada Default.aspx en la carpeta raz de la aplicacin.

2. Digite el siguiente cdigo en la vista Cdigo o HTML no en el archivo vb.

<html>
<head>
<title>Forms Authentication - Default Page</title>
</head>
Sub Page_Load(ByVal Src As Object, ByVal e As EventArgs)
Welcome.Text = "Hello, " & Context.User.Identity.Name
End Sub
Sub Signout_Click(ByVal sender As Object, ByVal e As EventArgs)

FormsAuthentication.SignOut()
Response.Redirect("Logon.aspx")
End Sub
</script>
<body>
<h3>
Using Forms Authentication</h3>
<asp:Label ID="Welcome" runat="server" />
<form id="Form1" runat="server">
<asp:Button ID="Submit1" OnClick="Signout_Click"
Text="Sign Out" runat="server" /><p>
</form>
</body>
</html>
La pgina muestra la identidad autenticada del usuario, establecida por la clase

FormsAuthentication y disponible en una pgina ASP.NET como propiedad
Context.User.Identity.Name. El controlador de Click del botn Cerrar sesin contiene cdigo

que llama al mtodo SignOut para borrar la identidad del usuario y quitar el vale de
autenticacin (cookie). A continuacin, redirige al usuario a la pgina de inicio de sesin.
Laboratorio 10.2
Tema: Crear un sitio web ASP.NET con inicio de sesin de usuario.
Muchos sitios web incluyen contenido que solo est disponible para las personas que han
iniciado sesin (es decir, que se han autenticado). De forma predeterminada, ASP.NET
proporciona plantillas de proyecto de sitio web que incluyen pginas que permiten realizar
tareas de autenticacin.
Este laboratorio muestra cmo utilizar una plantilla de proyecto web ASP.NET para crear un
sitio web con funcionalidad de inicio de sesin bsica.
En este laboratorio desarrollaremos las siguientes tareas:
Crear un sitio web ASP.NET.

Crear una pgina solo para miembros. Solo podrn tener acceso a la pgina los
usuarios autenticados (usuarios que han iniciado sesin).
Utilizar la pgina de registro, que permite a los usuarios registrarse y crear una nueva
cuenta.
Iniciar sesin y obtener acceso a informacin que solo est disponible para los usuarios
autenticados.
Utilizar la pgina de cambio de contrasea, que permite a los usuarios que tienen una
cuenta cambiar su contrasea.
Hacer que tengan acceso a la pgina de cambio de contrasea los usuarios
autenticados (y solo los usuarios autenticados).
Crear un nuevo proyecto de sitio web
Comenzar creando un nuevo proyecto de sitio web ASP.NET. La plantilla de proyecto que
usar incluye muchos de los elementos necesarios para crear un sitio que admita la
autenticacin.
Para crear un nuevo sitio web ASP.NET

1) Inicie Visual Studio o Visual Web Developer.
2) En el men Archivo, haga clic en Nuevo sitio Web. (Si no ve esta opcin, haga clic en Nuevo
y, a continuacin, haga clic en Sitio web). Aparece el cuadro de dilogo Nuevo sitio web.
3) En Plantillas instaladas, haga clic en Visual Basic, a continuacin, seleccione Sitio web
ASP.NET.
4) En el cuadro Ubicacin web, seleccione Sistema de archivos y escriba el nombre de la
carpeta donde desee conservar las pginas del sitio web. Por ejemplo, escriba el nombre
de carpeta C:\Websites\Login y, a continuacin, haga clic en Aceptar. Visual Studio crea la
carpeta y abre el sitio web en la vista Cdigo fuente. Observe que el sitio web raz contiene
varios archivos y carpetas, incluidos la carpeta Cuenta, un archivo Web.config, las pginas
About.aspx y Default.aspx, y la pgina maestra Site.master.
5) Presione CTRL+F5 para ejecutar la pgina. En el explorador se muestra la pgina principal
del sitio web. Observe los elementos de men (Pgina principal, Acerca de) y el
hipervnculo Iniciar sesin.
6) Cierre el explorador.

182
Crear una pgina solo para miembros
En esta seccin crear una pgina solo para miembros. Solo podrn obtener acceso a esta
pgina los usuarios que hayan iniciado sesin (usuarios autenticados). Agregar un control
HyperLink a la pgina maestra para redirigir a los usuarios autenticados a la pgina solo para
miembros. Cuando los usuarios que no hayan iniciado sesin (usuarios annimos) hagan clic en
el hipervnculo solo para miembros, se les redirigir a la pgina de inicio de sesin donde
podrn iniciar sesin o crear una cuenta.
Para crear la pgina solo para miembros
1. En el Explorador de soluciones, haga clic con el botn secundario en la carpeta Cuenta

y, a continuacin, haga clic en Agregar nuevo elemento. (Asegrese de que est
creando la nueva pgina en la carpeta Cuenta.)
2. En el cuadro de dilogo Nuevo sitio web, seleccione Web Forms.
3. En el cuadro de texto Nombre, escriba MembersOnly.aspx.
4. Active la casilla Seleccionar pgina maestra y, a continuacin, haga clic en Agregar.
Aparece el cuadro de dilogo Seleccionar una pgina maestra.
5. Debajo de Contenido de la carpeta, seleccione Site.master y, a continuacin, haga clic

en Aceptar.
La pgina MembersOnly.aspx se crea en la carpeta Cuenta. La pgina es una pgina de

contenido de la pgina Site.master.
6. En el Explorador de soluciones, haga doble clic en la pgina MemberOnly.aspx para

abrirla y, a continuacin, cambie a la Vista de diseo.
7. Agregue contenido a la pgina principal.
Por ejemplo, puede agregar "Welcome to the members-only page. You have
successfully logged in".
Adems de la pgina que ha creado, la carpeta Cuenta contiene las siguientes pginas y
archivos:
Register.aspx. Esta pgina permite a los nuevos usuarios crear una cuenta.
Pgina Login.aspx. Solicita un nombre de usuario y una contrasea.
ChangePassword.aspx. Esta pgina permite que los usuarios registrados cambien su
contrasea.
ChangePasswordSuccess.aspx. Esta pgina se muestra cuando los usuarios cambian
correctamente su contrasea.
Un archivo Web.config.
De forma predeterminada, los usuarios annimos no tienen acceso a las pginas de la carpeta
Cuenta, excepto las pginas Register.aspx y Login.aspx. Los valores que definen el acceso a las
pginas de la carpeta Cuenta se configuran en el archivo Web.config de esta carpeta. Los
valores que definen el acceso a la pgina de inicio de sesin se configuran en el archivo
Web.config raz.

A continuacin, modificar el control Menu de la pgina maestra y agregar un elemento de

men que vincula a la pgina solo para miembros.
Para agregar un elemento de men para la pgina solo para miembros
1. En el Explorador de soluciones, haga doble clic en la pgina Site.master para abrirla y a

continuacin, cambie a la Vista de diseo.
2. Seleccione el control Menu que contiene los elementos de men Home y About y, a
continuacin, haga clic en la etiqueta inteligente del control de men.
3. En Tareas de men, haga clic en Editar elementos de men
Se muestra el Editor de elementos de men.
4. Bajo Elementos, haga clic en el botn Agregar un elemento de raz en la barra de

herramientas.
En el rbol de mens se crea un nuevo elemento.
5. Seleccione Nuevo elemento.

6. En la ventana Propiedades del Editor de elementos de men, establezca la propiedad
Text en "Solo miembros".
7. Hacer clic en NavigateUrl y, a continuacin, haga clic en el botn de puntos
suspensivos (...) .
Aparecer el cuadro de dilogo Seleccionar direccin URL.
8. Bajo Carpetas de proyecto, haga clic en Cuenta.

9. Debajo de Contenido de la carpeta, seleccione MembersOnly.aspx y, a continuacin,
haga clic en Aceptar.
10. Haga clic en Aceptar para cerrar el cuadro de dilogo.
11. Guarde y cierre la pgina Site.master.
12. En el Explorador de soluciones, haga clic con el botn secundario en la pgina
Default.aspx y, a continuacin, haga clic en Establecer como pgina principal.
Crear una nueva cuenta
Dado que todava no tiene una cuenta, tiene que registrarse para iniciar sesin y obtener
acceso a la pgina solo para miembros. Los usuarios annimos pueden tener acceso a la pgina
principal (Default.aspx) y la pgina About, pero no al contenido de la pgina maestra para
usuarios autenticados. Tampoco est disponible para los usuarios annimos el contenido de la
carpeta Cuenta (excepto la pgina de registro y la pgina de inicio de sesin). Si los usuarios
annimos intentan tener acceso a contenido protegido, se les redirige a la pgina de inicio de
sesin.
Para crear una nueva cuenta
1. Presione CTRL+F5 para ejecutar el sitio.

2. Haga clic en Solo miembros.
Se muestra la pgina de inicio de sesin.

184
3. Haga clic en Registrarse.
Se muestra la pgina Register.aspx (Crear una nueva cuenta).
4. Escriba la informacin solicitada.
Por ejemplo, puede escribir ScottBrown como nombre de usuario,

scott@example.com como correo electrnico y una contrasea. De forma
predeterminada, la contrasea debe tener como mnimo seis caracteres. El nombre de
usuario no requiere caracteres no alfanumricos y la direccin de correo electrnico
no tiene que ser nica.
5. Haga clic en Crear usuario.
Al terminar el registro para una nueva cuenta, se le redirige a la pgina solo para
miembros. Observe que su nombre de usuario se muestra junto a Cerrar sesin.
6. Haga clic en Cerrar sesin.
Se le redirige a la pgina principal.
7. Cierre el explorador.
Cambiar la contrasea
En esta seccin crear un hipervnculo en la pgina principal para redirigir a los usuarios a la
pgina de cambio de contrasea. Utilizar esta pgina para cambiar la contrasea despus de
iniciar sesin.
Para crear un vnculo a la pgina de cambio de contrasea
1. En el Explorador de soluciones, haga doble clic en la pgina Site.master y cambie a la

Vista de diseo.
2. Desde el nodo Estndar del Cuadro de herramientas, arrastre un control HyperLink
hacia la pgina maestra y colquelo junto al hipervnculo Iniciar sesin.
En esta parte del tutorial no importa dnde coloca el control HyperLink.
3. En las ventanas Propiedades, cambie la propiedad Text a Cambiar contrasea. Puede

aceptar el identificador predeterminado.
4. En la ventana Propiedades, haga clic en NavigateUrl y, a continuacin, en el botn de
puntos suspensivos () .
Aparecer el cuadro de dilogo Seleccionar direccin URL.

6. Debajo de Contenido de la carpeta, seleccione ChangePassword.aspx y, a
continuacin, haga clic en Aceptar.
7. Presione CTRL+F5 para ejecutar la pgina.
8. Observe que puede tener acceso al vnculo Cambiar contrasea si no ha iniciado
sesin.

9. Haga clic en Cambiar contrasea.
Se le redirige a la pgina de inicio de sesin porque solamente los usuarios

autenticados puede obtener acceso a la pgina de cambio de contrasea.
10. Escriba el nombre de usuario y la contrasea que cre anteriormente y, a

continuacin, haga clic en Iniciar sesin.
Se muestra la pgina de cambio de contrasea.
11. Haga clic en Cerrar sesin.

12. Cuando vuelva a la pgina principal, cierre el explorador.
A continuacin, modificar el hipervnculo Cambiar contrasea para que solo tengan acceso a
l los usuarios que hayan iniciado sesin. Para esto agregar el hipervnculo al control
HeadLoginView en la pgina maestra.
Para que el vnculo de cambio de contrasea solo est disponible para los usuarios que
inicien sesin
1. En el Explorador de soluciones, haga doble clic en Site.master.aspx para abrirla y, a

continuacin, cambie a la Vista de diseo.
2. Elimine el hipervnculo Cambiar contrasea que cre anteriormente.
3. Cambie a la vista Cdigo fuente.
4. En el nodo Estndar del Cuadro de herramientas, arrastre un control HyperLink al
elemento LoggedInTemplate situado dentro del control LoginView.
5. Establezca la propiedad Text en Cambiar contrasea.
6. Despus del atributo runat="server", escriba "NavigateUrl =" y, a continuacin, haga
doble clic en Seleccionar URL en la lista emergente.
Se muestra el cuadro de dilogo Seleccionar elemento de proyecto.

8. Debajo de Contenido de la carpeta, seleccione ChangePassword.aspx y, a
continuacin, haga clic en Aceptar.
El marcado del hipervnculo tendr un aspecto similar al ejemplo siguiente:
<asp:HyperLink ID="HyperLink1" runat="server"

NavigateUrl="~/Account/ChangePassword.aspx">
Change Password
</asp:HyperLink>
Observe que este hipervnculo no ser visible en la Vista de diseo, ya que el

contenido del elemento LoggedInTemplate no resulta visible de forma
predeterminada.
Prueba del sitio Web
Ahora puede probar la funcionalidad de cambio de contrasea del sitio web.

186
Para probar la pgina de cambio de contrasea
1. Presione CTRL+F5 para ejecutar el sitio.
Se muestra la pgina principal, pero el vnculo Cambiar la contrasea no est visible.
2. Haga clic en Iniciar sesin y escriba su nombre de usuario y contrasea.
Se le redirige a la pgina principal. Observe que su nombre y el vnculo Cambiar la

contrasea estn ahora visibles.
Se le redirige a la pgina solo para miembros.
4. Haga clic en Cambiar la contrasea.
Se muestra la pgina de cambio de contrasea.
5. Escriba una nueva contrasea.
Haga clic en Cambiar contrasea. Si el cambio es correcto, se mostrar la pgina de

cambio correcto.
Probar la nueva contrasea
A continuacin utilizar su nueva contrasea para volver a iniciar sesin y obtener acceso a la
pgina solo para miembros.
Para probar la nueva contrasea
1. Haga clic en Cerrar sesin. Se le redirigir a la pgina principal que ven los usuarios
annimos.
2. Haga clic en Iniciar sesin.
3. Escriba su nombre de usuario y la nueva contrasea y, a continuacin, haga clic en
Iniciar sesin.
Se le redirige a la pgina principal. Ahora puede obtener acceso al contenido que est
disponible para los usuarios autenticados. .
Se le redirige a la pgina solo para miembros. Si intenta iniciar sesin con la

autenticacin de contrasea anterior no podr.
5. Cierre el explorador.
En este laboratorio, utiliz pginas que forman parte de la plantilla de proyecto de sitio web
ASP.NET para crear un sitio web que autentica a los usuarios. Si lo prefiere, tambin puede
crear sus propias pginas de inicio de sesin para proporcionar la misma funcionalidad que se
muestra en este laboratorio

Autoevaluacin
1. Defina por qu es importante la seguridad en un Sitio Web
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
2. Defina qu es Autenticacin
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
3. Qu es Autorizacin?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
4. Cules son las formas de autenticacin en ASP.Net?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
5. Qu opciones tengo para encriptar el Password en mi archivo de configuracin

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
6. Para qu sirven los controles de Inicio de Sesin?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
7. Cules son los controles de Inicio de Sesin?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
8. Para qu sirve la carpeta Cuenta o Account de un Sitio Web en ASP.Net?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
9. Para qu sirve el control LoginView?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
10. Para qu sirve el control LoginStatus?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

188
Resumen
ASP.NET, conjuntamente con Microsoft Internet Information Services (IIS), puede autenticar
las credenciales del usuario como nombres y contraseas mediante los mtodos de
autenticacin siguientes:
Windows: bsica, implcita, y Autenticacin de Windows integrada (NTLM o Kerberos).

Autenticacin mediante formularios, con la que crea una pgina de inicio de sesin y se
administra la autenticacin en la aplicacin.
Autenticacin mediante certificados de cliente
ASP.NET controla el acceso a la informacin de los sitios comparando las credenciales

autenticadas, o representaciones de las mismas, con los permisos del sistema de archivos de
Microsoft Windows NT o con un archivo XML que contiene la lista de usuarios autorizados,
funciones autorizadas (grupos) o verbos HTTP autorizados
Si a su aplicacin Web tienen acceso usuarios desconocidos, existen muchas probabilidades de

que algn usuario malintencionado intente tambin obtener acceso. Normalmente, los
servidores de Internet accesibles al pblico se sondean constantemente para descartar
vulnerabilidades. Por consiguiente, se recomienda que tome precauciones y adopte medidas
de seguridad en todas sus aplicaciones Web.
La autorizacin determina si se debera conceder acceso a una identidad a un recurso

concreto. EN ASP.NET existen dos formas de autorizar el acceso a un recurso dado:
Autorizacin de archivos FileAuthorizationModule realiza la autorizacin de archivos.

Realiza una comprobacin de la lista de control de acceso (ACL) del archivo de
controladores .aspx o .asmx para determinar si un usuario debe tener acceso al
archivo. Los permisos de ACL se comprueban para la identidad de Windows (si se
habilita la autenticacin de Windows) del usuario o para la identidad de Windows del
proceso de ASP.NET. Para obtener ms informacin, vea Suplantacin de ASP.NET.
1. Autorizacin de URL UrlAuthorizationModule realiza la autorizacin de URL, que

asigna usuarios y funciones a direcciones URL en aplicaciones ASP.NET. Este mdulo se
puede utilizar para permitir o denegar de forma selectiva el acceso a las partes
arbitrarias de una aplicacin (normalmente los directorios) para usuarios concretos o
funciones.

http://msdn.microsoft.com/es-es/library/330a99hc.aspx
Pgina referente al Seguridad en ASP.Net
http://msdn.microsoft.com/es-es/library/zdh19h94.aspx
Pgina referente a procedimientos de seguridad bsica
http://msdn.microsoft.com/es-es/library/ks310b8y.aspx
Pgina referente al funcionamiento de la seguridad

UNIDAD DE
APRENDIZAJE
AJAX en ASP.Net Parte I
usando el modelo de objetos ADO.NET usando los controles que nos proporciona AJAX haciendo
que las aplicaciones se ejecuten de una forma ms rpida y dinmica.
TEMARIO
Controles Principales AJAX.
Control ScriptManager para administrar los scripts del lado del cliente.
Control UpdatePanel para cargar parcialmente las pginas de forma dinmica.
Control Timer para ejecutar tareas en intervalos de tiempo.
Los alumnos manejan la conexin y operaciones a la base de datos utilizando los
controles de AJAX principalmente del ScriptManager y UpdatePanel.
Los alumnos trabajan con controles complementarios de AJAX como el control Timer
para poder ejecutar tareas en intervalos de tiempo.

190
1. Informacin general sobre los controles ASP.NET AJAX

Los controles ASP.NET AJAX permiten crear un comportamiento de cliente enriquecido con
muy pocos scripts de cliente, o ninguno, por ejemplo la actualizacin de parte de una pgina
(actualizar partes seleccionadas de la pgina en lugar de actualizar toda la pgina con una
devolucin) y la presentacin del progreso de la actualizacin durante las devoluciones
asincrnicas. Las actualizaciones parciales de pginas asincrnicas evitan la sobrecarga de las
devoluciones de pgina completa.
1. ScriptManager (control) Administra el script de cliente para las pginas web ASP.NET
habilitadas para AJAX.
2. ScriptManagerProxy (control) Permite a los complementos anidados, como las
pginas de contenido y los controles de usuario, agregar referencias de servicios y
scripts a pginas cuando ya hay un control ScriptManager definido en un elemento
primario.
3. Timer (control) Realiza devoluciones a intervalos definidos. Si se usa el control Timer
con un control UpdatePanel, se pueden habilitar actualizaciones parciales de pginas a
un intervalo definido. El control Timer tambin permite enviar la pgina completa.
4. UpdatePanel (control) Permite crear aplicaciones web enriquecidas y centradas en
clientes. Con los controles UpdatePanel, puede realizar una actualizacin parcial de
pginas.
5. UpdateProgress (control) Proporciona informacin de estado acerca de las
actualizaciones parciales de pginas en los controles UpdatePanel.
Todos los controles ASP.NET AJAX requieren una configuracin especfica en un archivo
web.config para funcionar correctamente. Si trata de trabajar con uno de estos controles, y el
sitio web no contiene el archivo web.config necesario, aparecen errores en la vista Diseo de
la pgina donde habra aparecido el control. En la vista Diseo, si hace clic en un control que
est en ese estado, Microsoft Expression Web le ofrecer la opcin de crear un nuevo archivo
web.config o actualizar el existente.
2. ScriptManager (control)
El control ScriptManager administra el script de cliente para las pginas web habilitadas para
ASP.NET AJAX. De forma predeterminada, el control ScriptManager registra el script para
Microsoft AJAX Library con la pgina. Esto permite a los script de cliente usar las extensiones
del sistema tipo y admitir algunas caractersticas, como la representacin parcial de pginas y
las llamadas de servicio web.
El control ScriptManager necesita una configuracin especfica en un archivo web.config para

funcionar correctamente. Si intenta trabajar con este control, y el sitio web no contiene el
archivo web.config necesario, se producirn errores en la vista Diseo de la pgina donde
debera mostrarse el control. En la vista Diseo, si hace clic en el control que se encuentra en
ese estado, Microsoft Expression Web le ofrecer la posibilidad de crear un nuevo archivo
web.config o actualizar el existente.
Debe usar un control ScriptManager en una pgina para habilitar las siguientes caractersticas
AJAX de ASP.NET:

Funcionalidad de script de cliente de Microsoft AJAX Library y todos los scripts

personalizados que desee enviar al explorador.
La representacin parcial de pginas, que permite actualizar partes de la pgina de
forma independiente sin que exista ninguna devolucin de datos. Los controles
UpdatePanel, UpdateProgress y Timer de ASP.NET requieren un control ScriptManager
para admitir la representacin parcial de pginas.
Las clases de proxy JavaScript para los servicios web, que permiten usar scripts de
cliente para tener acceso a servicios web y mtodos marcados especialmente en las
pginas ASP.NET. Para ello, expone los servicios web y los mtodos de pgina como
objetos con establecimiento inflexible de tipos.
Clases JavaScript para obtener acceso a los servicios de aplicacin de autenticacin,
perfiles y funciones de ASP.NET.
Cuando una pgina contiene uno o ms controles UpdatePanel, el control ScriptManager

administra la representacin parcial de pginas en el explorador. El control interacta con el
ciclo de vida de la pgina para actualizar las partes de la pgina que estn dentro de controles
UpdatePanel.
La propiedad EnablePartialRendering del control ScriptManager determina si una pgina

participa en actualizaciones parciales de pginas. De forma predeterminada, la propiedad
EnablePartialRendering est establecida en True. Por lo tanto, la representacin parcial de
pginas est habilitada de forma predeterminada cuando se agrega un control ScriptManager
a la pgina.
2.1. Clase ScriptManagerProxy
Slo se puede agregar una instancia del control ScriptManager a una pgina. La pgina puede
incluir el control directamente, o de forma indirecta dentro de un componente anidado como
un control de usuario, una pgina de contenido para una pgina maestra o una pgina maestra
anidada. Si una pgina contiene un control ScriptManager, pero un componente primario o
anidado necesita caractersticas adicionales del control ScriptManager, el componente puede
incluir un control ScriptManagerProxy. Por ejemplo, el control ScriptManagerProxy permite
agregar scripts y servicios que son especficos de los componentes anidados.
3. UpdatePanel (control)
Los controles de ASP.NET UpdatePanel permiten generar aplicaciones web enriquecidas y
centradas en el cliente. Mediante el uso de los controles UpdatePanel, se pueden actualizar
partes seleccionadas de la pgina en lugar de actualizar toda la pgina con una devolucin de
datos. Esto se conoce como actualizacin parcial de la pgina. Una pgina web ASP.NET que
contiene un control ScriptManager y uno o varios controles UpdatePanel puede participar
automticamente en las actualizaciones parciales de la pgina, sin un script de cliente
personalizado.
El control UpdatePanel requiere una configuracin especfica en un archivo web.config para

funcionar correctamente. Si intenta trabajar con este control y su sitio web no contiene el
archivo web.config requerido, se presentarn errores en la vista Diseo de la pgina en la que
debera aparecer el control. En la vista Diseo, si hace clic en el control que se encuentra en
dicho estado, Microsoft Expression Web le dar la opcin de crear un nuevo archivo
web.config o de actualizar el archivo web.config existente.

192
El control UpdatePanel es un control de servidor que ayuda a desarrollar pginas web con un
comportamiento de cliente complejo que hace que una pgina web parezca ms interactiva al
usuario final. Normalmente, escribir cdigo que se coordine entre el servidor y el cliente para
actualizar slo las partes especificadas de una pgina web requiere un conocimiento detallado
de ECMAScript (JavaScript). Sin embargo, mediante el uso del control UpdatePanel, puede
hacer que una pgina web participe en las actualizaciones parciales de pgina sin necesidad de
escribir ningn script de cliente. Si lo desea, puede agregar el script de cliente personalizado
para mejorar la experiencia del usuario cliente. Cuando se usa un control UpdatePanel, el
comportamiento de la pgina es independiente del explorador y puede reducir la cantidad de
datos que se transfieren entre el cliente y el servidor.
Los controles UpdatePanel trabajan especificando las regiones de una pgina que se pueden
actualizar sin actualizar la pgina entera. Este proceso se coordina mediante el control de
servidor ScriptManager y la clase de cliente PageRequestManager. Cuando las actualizaciones
parciales de la pgina estn habilitadas, los controles pueden enviar al servidor de forma
asincrnica. Una devolucin de datos asincrnica se comporta como una devolucin de datos
normal en cuanto que la pgina de servidor resultante ejecuta la pgina completa y controla el
ciclo de vida. Sin embargo, con una devolucin de datos asincrnica, las actualizaciones de la
pgina se limitan a las regiones de la pgina que estn incluidas en los controles UpdatePanel y
que estn marcadas para actualizarse. El servidor enva el marcado HTML al explorador slo
para los elementos implicados.
3.1. Habilitar actualizaciones parciales de pgina
El control UpdatePanel requiere un control ScriptManager en la pgina web. De forma

predeterminada, las actualizaciones parciales de la pgina estn habilitadas porque el valor
predeterminado de la propiedad EnablePartialRendering del control ScriptManager es True.
3.2. Especificar el contenido del control UpdatePanel
Puede agregar contenido a un control UpdatePanel colocndolo en el panel de la vista Diseo.

Por ejemplo, puede arrastrar otros controles ASP.NET y HTML al panel, y situar el cursor en el
panel y escribir directamente en l. Cuando agrega contenido a un control UpdatePanel en la
vista Diseo, automticamente se agregan las etiquetas requeridas
<ContentTemplate></ContentTemplate> alrededor del contenido. Si agrega contenido a un
control UpdatePanel en la vista Cdigo en lugar de la vista Diseo, debe agregar las etiquetas
<ContentTemplate></ContentTemplate> manualmente si no existen ya; de lo contrario, el
contenido no se representar en el control UpdatePanel.
Cuando se representa por primera vez una pgina que contiene uno o varios controles
UpdatePanel, se representa todo el contenido de los controles UpdatePanel y se enva al
explorador. En las devoluciones de datos asincrnicas posteriores, el contenido de los
controles UpdatePanel individuales podra actualizarse. Las actualizaciones dependen de las
opciones de configuracin del panel, de qu elemento produjo la devolucin de datos y del
cdigo especfico de cada panel.

3.3. Especificar los desencadenadores UpdatePanel
De forma predeterminada, cualquier control de devolucin de datos dentro de un control

UpdatePanel produce una devolucin de datos asincrnica y actualiza el contenido del panel.
Sin embargo, tambin puede configurar otros controles de la pgina para actualizar un control
UpdatePanel. Para ello, defina un desencadenador para el control UpdatePanel. Un
desencadenador es un enlace que especifica qu evento y qu control de devolucin de datos
provocan la actualizacin de un panel. Cuando se provoca el evento especificado del control
desencadenador (por ejemplo, un evento Click de un botn), se actualiza el panel de
actualizacin.
Puede crear desencadenadores de un control UpdatePanel mediante el cuadro de dilogo

Editor de la coleccin UpdatePanelTrigger, que se visualiza desde la propiedad Triggers
(Desencadenadores) en el panel de tareas Propiedades de etiqueta.
Los eventos de control de los desencadenadores son opcionales. Si no se especifica un evento,

el evento desencadenador es el evento predeterminado del control. Por ejemplo, para el
control Button, el evento predeterminado es el evento Click.
3.4. Cmo se actualizan los controles UpdatePanel
En la lista siguiente se describen los valores de las propiedades del control UpdatePanel que
determinan cundo se actualiza el contenido de un panel durante la representacin parcial de
la pgina:
Si la propiedad UpdateMode se establece en Always, el contenido de control

UpdatePanel se actualiza en todas las devoluciones de datos que se originen en
cualquier lugar de la pgina. Esto incluye las devoluciones de datos asincrnicas de los
controles que estn dentro de otros controles UpdatePanel y las devoluciones de
datos de los controles que no estn dentro de los controles UpdatePanel.
Si la propiedad UpdateMode se establece en Conditional, el contenido del control
UpdatePanel se actualiza cuando se da una de las siguientes condiciones:
o Cuando un desencadenador produce la devolucin de datos para ese control
UpdatePanel.
o Cuando se llama explcitamente al mtodo Update del control UpdatePanel.
o Cuando se anida el control UpdatePanel dentro de otro control UpdatePanel y
se actualiza el panel primario.
o Cuando la propiedad ChildrenAsTriggers se establece en True y cualquier
control secundario del control UpdatePanel provoca una devolucin de datos.
Los controles secundarios de los controles UpdatePanel anidados no provocan
actualizaciones del control UpdatePanel externo a menos que se definan
explcitamente como desencadenadores para el panel primario.
Si la propiedad ChildrenAsTriggers se establece en False y la propiedad UpdateMode se

establece en Always, se inicia una excepcin. La propiedad ChildrenAsTriggers est diseada
para utilizarse slo cuando la propiedad UpdateMode se establezca en Conditional.

194
3.5. Usar los controles UpdatePanel anidados
Los controles UpdatePanel se pueden anidar. Si se actualiza el panel primario, todos los
paneles anidados tambin se actualizarn. Si se actualiza un panel secundarios, se actualiza
slo el panel secundario.
3.6. Controles que no son compatibles con los controles UpdatePanel
Los controles ASP.NET siguientes no son compatibles con las actualizaciones parciales de la
pgina y, por consiguiente, no estn diseados para funcionar dentro de un control
UpdatePanel:
Control TreeView en varias condiciones. Cuando se habilitan devoluciones de llamada

que no forman parte de una devolucin de datos asincrnica. Cuando se establecen
estilos directamente como propiedades de control en lugar de aplicar estilos
implcitamente al control utilizando una referencia a los estilos CSS. Cuando la
propiedad EnableClientScript es False (el valor predeterminado es True). Cuando se
cambia el valor de la propiedad EnableClientScript entre las devoluciones de datos
asincrnicas.
Control Menu cuando se establecen estilos directamente como propiedades de control
en lugar de aplicar estilos implcitamente al control mediante una referencia a los
estilos CSS.
Controles FileUpload y HtmlInputFile cuando se usan para cargar archivos como parte
de una devolucin de datos asincrnica.
Controles GridView y DetailsView cuando su propiedad
EnableSortingAndPagingCallbacks es True. El valor predeterminado es False.
Controles Login, PasswordRecovery, ChangePassword y CreateUserWizard cuyo
contenido no se ha convertido en plantillas editables.
El control Substitution.
Para usar un control FileUpload o HtmlInputFile dentro de un control UpdatePanel, especifique

que el control de devolucin de datos que enva el archivo es un control PostBackTrigger del
panel. Los controles FileUpload y HtmlInputFile slo se pueden usar en escenarios de
devolucin de datos.
Todos los dems controles funcionan dentro los controles UpdatePanel.
3.7. Usar los controles de elemento web dentro los controles UpdatePanel
Los elementos web ASP.NET son un conjunto integrado de controles para crear sitios web que
permiten a los usuarios finales modificar el contenido, la apariencia y el comportamiento de
las pginas web directamente desde un explorador. Puede usar controles de elementos web
dentro los controles UpdatePanel con las siguientes restricciones:
Todos los controles WebPartZone deben estar dentro del mismo control UpdatePanel.
Por ejemplo, no puede tener dos controles UpdatePanel en la pgina, cada uno de
ellos con su propio control WebPartZone.

El control WebPartManager administra toda la informacin de estado del cliente para

los controles de elementos web. Debe estar en el control UpdatePanel extremo de una
pgina.
No puede importar ni exportar controles de elementos web mediante una devolucin
de datos asincrnica. (Para realizar esta tarea es necesario un control FileUpload, que
no se puede usar con devoluciones de datos asincrnicas). De forma predeterminada,
la importacin de los controles de elementos web realiza una devolucin de datos
completa.
No pueden agregar ni modificar los estilos de los controles de elementos web durante
las devoluciones de datos asincrnicas.
4. ScriptManagerProxy (control)
El control ScriptManagerProxy permite que los componentes anidados, como pginas de
contenido y controles de usuario, agreguen a las pginas referencias a scripts y servicios
cuando ya se ha definido un control ScriptManager en un elemento primario.
Una pgina web slo puede contener un control ScriptManager, bien de forma directa en la
propia pgina, o de forma indirecta en un componente anidado o primario. El control
ScriptManagerProxy permite agregar scripts y servicios a pginas de contenido y controles de
usuario donde la pgina maestra o la pgina host ya contienen un control ScriptManager.
Cuando se usa el control ScriptManagerProxy, puede agregar las colecciones de scripts y

servicios definidas por el control ScriptManager. Si no desea incluir scripts y servicios
especficos a cada pgina que incluya un control ScriptManager determinado, qutelos del
control ScriptManager y agrguelos a pginas individuales mediante el control
ScriptManagerProxy.
El control ScriptManagerProxy requiere configuracin especfica en un archivo web.config para

funcionar correctamente. Si intenta trabajar con este control y el sitio web no contiene el
archivo web.config necesario, los errores aparecen en la vista Diseo de la pgina donde
podra haber aparecido el control. En la vista Diseo, si hace clic en el control que est en ese
estado, Microsoft Expression Web le ofrecer la opcin de crear un nuevo archivo web.config
o actualizar el archivo web.config existente.
5. Timer (control)
El control Timer de ASP.NET AJAX realiza devoluciones de datos a intervalos definidos. Si se usa
el control Timer con un control UpdatePanel, se pueden habilitar actualizaciones parciales de
pginas a un intervalo definido. El control Timer tambin permite enviar la pgina completa.
El control Timer requiere una configuracin especfica en un archivo web.config para funcionar
correctamente. Si trata de trabajar con este control y el sitio web no contiene el archivo
web.config necesario, aparecen errores en la vista Diseo de la pgina donde habra aparecido
el control. En la vista Diseo, si hace clic en el control que est en ese estado, Microsoft
Expression Web le ofrecer la opcin de crear un nuevo archivo web.config o actualizar el
existente.

196
El control Timer se usa para realizar las siguientes acciones:
Actualizar peridicamente el contenido de uno o ms controles UpdatePanel sin

actualizar toda la pgina web.
Ejecutar cdigo en el servidor cada vez que un control Timer provoque una devolucin
de datos.
Enviar de forma sincrnica la pgina web completa al servidor web a intervalos
definidos.
El control Timer es un control de servidor que incrusta un componente JavaScript en la pgina

web. El componente JavaScript inicia la devolucin de datos desde el explorador cuando ha
transcurrido el intervalo definido en la propiedad Interval. Las propiedades para el control
Timer se definen en el cdigo que se ejecuta en el servidor y se pasan al componente
JavaScript.
Cuando se usa el control Timer, se debe incluir una instancia de la clase ScriptManager en la
pgina web.
Cuando el control Timer inicia una devolucin de datos, se genera el evento Tick en el servidor.
Se puede crear un controlador de eventos para el evento Tick de forma que realice acciones
cuando la pgina se enve al servidor.
La propiedad Interval se usa para especificar la frecuencia con la que se producirn las
devoluciones y la propiedad Enabled para activar o desactivar el control Timer. La propiedad
Interval se define en milisegundos y tiene un valor predeterminado de 60.000 milisegundos (60
segundos).
6. UpdateProgress (control)
El control UpdateProgress proporciona informacin de estado acerca de las actualizaciones
parciales de pginas en los controles UpdatePanel. Puede personalizar el contenido
predeterminado y el diseo del control UpdateProgress. Para evitar que se produzcan
intermitencias cuando una actualizacin parcial de pginas es muy rpida, puede especificar
un retraso antes de que se muestre el control UpdateProgress.
El control UpdateProgress requiere configuracin especfica en un archivo web.config para

funcionar correctamente. Si intenta trabajar con este control y el sitio web no contiene el
archivo web.config necesario, los errores aparecen en la vista Diseo de la pgina donde
habra aparecido el control. En la vista Diseo, si hace clic en el control que est en ese estado,
Microsoft Expression Web le ofrecer la opcin para crear un nuevo archivo web.config o
actualizar el archivo web.config existente.
El control UpdateProgress ayuda a disear una interfaz de usuario ms intuitiva cuando una
pgina web contiene uno o ms controles UpdatePanel de representacin parcial de pginas.
Si una actualizacin parcial de pginas es lenta, puede usar el control UpdateProgress para
proporcionar comentarios visuales acerca del estado de la actualizacin. Puede colocar varios
controles UpdateProgress en una pgina, cada uno de ellos asociado con un control
UpdatePanel distinto. Como alternativa, puede usar un control UpdateProgress y asociarlo con
todos los controles UpdatePanel de la pgina.

6.1. Informacin general
El control UpdateProgress representa un elemento <div> que se muestra u oculta en funcin

de que un control UpdatePanel asociado haya provocado o no una devolucin asincrnica. El
control UpdateProgress no aparece para la representacin de la pgina inicial y las
devoluciones sincrnicas.
6.2. Asociar un control UpdateProgress con un control UpdatePanel
Para asociar un control UpdateProgress con un control UpdatePanel, debe establecer la

propiedad AssociatedUpdatePanelID del control UpdateProgress. Cuando se origina un evento
de devolucin desde un control UpdatePanel, se muestran los controles UpdateProgress
asociados. Si no se asocia el control UpdateProgress con un control UpdatePanel especfico, el
control UpdateProgress muestra el progreso de las devoluciones asincrnicas.
Si la propiedad ChildrenAsTriggers de un control UpdatePanel se establece en false y se origina

una devolucin asincrnica desde dicho control UpdatePanel, se mostrarn todos los controles
UpdateProgress asociados.
6.3. Crear contenido para el control UpdateProgress
Para especificar el mensaje que muestra un control UpdateProgress, coloque el contenido que
desee en el panel de la vista Diseo. Por ejemplo, puede arrastrar otros controles ASP.NET y
HTML al panel y, a continuacin, colocar el cursor en el panel y escribir directamente en l. Al
agregar un mensaje a un control UpdateProgress en la vista Diseo, se agregan
automticamente las etiquetas <ProgressTemplate> necesarias alrededor del contenido. Si
agrega contenido a un control UpdateProgress en la vista Cdigo en lugar de hacerlo en la vista
Diseo, debe agregar manualmente las etiquetas <ProgressTemplate></ProgressTemplate> si
an no existen; de lo contrario, el mensaje no se representar.
6.4. Especificar el diseo de contenido
Si la propiedad DynamicLayout es true, el control UpdateProgress no ocupa espacio

inicialmente en la presentacin de la pgina. En su lugar, la pgina cambia dinmicamente para
mostrar el contenido del control UpdateProgress cuando es necesario. Para admitir la
presentacin dinmica, el control se representa como un elemento <div> cuya propiedad de
estilo de presentacin se ha establecido inicialmente en none.
Si la propiedad DynamicLayout es false, el control UpdateProgress ocupa espacio en la

presentacin de la pgina, aunque no sea visible. En tal caso, el elemento <div> del control
tiene la propiedad de estilo de presentacin establecida en block y la visibilidad establecida
inicialmente en hidden.
6.5. Colocar los controles UpdateProgress en la pgina
Los controles UpdateProgress pueden colocarse dentro o fuera de los controles UpdatePanel.
Un control UpdateProgress aparece cuando el control UpdatePanel con el que est asociado se

198
actualiza como resultado de una devolucin asincrnica. Esto se cumple aunque el control
UpdateProgress se encuentre dentro de otro control UpdatePanel.
Si un control UpdatePanel se encuentra dentro de otro panel de actualizacin, una devolucin

originada dentro del panel secundario hace que se muestren los controles UpdateProgress
asociados con el panel secundario. Tambin se muestran los controles UpdateProgress
asociados con el panel primario. Si se origina una devolucin desde un control secundario
inmediato del panel primario, slo se muestran los controles UpdateProgress asociados con el
panel primario. Esto sigue la lgica del desencadenamiento de devoluciones.
Laboratorio 11.1
Tema: Crear una pgina con dos regiones con actualizacin independiente
En este apartado, aprender a trabajar con varios controles UpdatePanel en una pgina. Al
usar varios controles UpdatePanel en una pgina, puede actualizar regiones de la pgina de
forma incremental por separado o conjuntamente.
Para crear una pgina con dos regiones con actualizacin independiente
1. En el men Archivo, elija Nuevo y, a continuacin, haga clic en ASPX.

2. Coloque el cursor en la vista Diseo de la pgina ASPX.
3. En el panel de tareas Cuadro de herramientas, en Controles ASP.NET, bajo AJAX, haga
doble clic en el control ScriptManager para agregarlo a la pgina. Si aparece un cuadro
de dilogo para que agregue un archivo web.config al sitio web para admitir la versin
3.5 de .NET Framework, haga clic en S. Si aparece un cuadro de dilogo que le
pregunta si desea activar una ayuda visual para los controles no visuales, haga clic en
S.
4. En el panel de tareas Cuadro de herramientas, en Controles ASP.NET, bajo AJAX, haga
doble clic en el control UpdatePanel dos veces para agregar dos controles UpdatePanel
a la pgina.
5. Con uno de los controles UpdatePanel seleccionado en la pgina, en el panel de tareas
Propiedades de etiqueta, establezca la propiedad UpdateMode en Conditional. Repita
este paso para el otro control UpdatePanel.
6. En el panel de tareas Cuadro de herramientas, en las categoras Controles ASP.NET y
Estndar, arrastre un control Label a uno de los controles UpdatePanel en la vista
Diseo.
7. Con el control Label seleccionado en la pgina, en el panel de tareas Propiedades de
etiqueta, establezca la propiedad Text en "Panel Created".
Estndar, arrastre un control Button al mismo control UpdatePanel que contiene el
control Label.
9. Con el botn seleccionado en la pgina, en el panel de tareas Propiedades de etiqueta,
establezca la propiedad Text en "Refresh Panel".
Estndar, arrastre un control Calendar al otro control UpdatePanel en la vista Diseo.

11. En la vista Cdigo de la pgina, antes de la etiqueta </head>, agregue siguiente cdigo:
<script runat="server" type="text/vb">

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.
EventArgs)
Label1.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
12. En la vista Cdigo, busque la etiqueta <asp:Button runat="server" Text="Refresh

Panel" id="Button1" /> y agregue "OnClick="Button1_Click" a la etiqueta.
13. En el men Archivo, haga clic en Guardar.
14. Presione F12 para obtener una vista previa de la pgina en el explorador web.
15. En la pgina en el explorador web, haga clic en el botn. El texto del panel cambia para
mostrar la ltima vez que se actualiz el contenido del panel. En el calendario,
desplcese a un mes diferente. La hora del otro panel no cambia. El contenido de
ambos paneles se actualiza de forma independiente.
En las tablas siguientes se muestra el cdigo final de la pgina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

200
<title>Untitled 2</title>
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.
EventArgs)
Label1.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
</head>
<body>
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional"
>
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Butt
on1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional"
>
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Este laboratorio ha presentado el concepto de usar varios controles UpdatePanel en una

pgina. Cuando los controles UpdatePanel no estn anidados, puede actualizar cada panel de
forma independiente al establecer la propiedad UpdateMode en Condicional. (El valor
predeterminado de la propiedad UpdateMode es Always. Esto provoca que el panel se
actualice en respuesta a cualquier devolucin de datos asincrnica.)
Cuando los paneles estn anidados, el comportamiento es ligeramente diferente. Si establece

la propiedad UpdateMode del control externo y el control anidado en Conditional, el panel
interior se puede actualizar sin que se actualice el panel externo. Sin embargo, si se actualiza el
panel de actualizacin externo, el panel de actualizacin interno tambin se actualiza.
Laboratorio 11.2
Tema: Actualizar un control UpdatePanel en un intervalo de tiempo.
En este laboratorio se va actualizar parte de una pgina web en un intervalo de tiempo

mediante tres controles de servidor ASP.NET AJAX: el control ScriptManager, el control
UpdatePanel y el control Timer. Al agregar estos controles a una pgina se elimina la necesidad
de actualizar toda la pgina con cada devolucin de datos. Slo se actualizar el contenido del
control UpdatePanel.

Para actualizar un control UpdatePanel en un intervalo de tiempo
1. En el men Archivo, elija Nuevo y, a continuacin, haga clic en ASPX.

2. Coloque el cursor en la vista Diseo de la pgina ASPX.
3. En el panel de tareas Cuadro de herramientas, en Controles ASP.NET, en AJAX, haga
doble clic en el control ScriptManager para agregarlo a la pgina. Si aparece un cuadro
de dilogo que le pide que agregue o actualice un archivo web.config para admitir la
versin 3.5 de .NET Framework, haga clic en S. Si aparece un cuadro de dilogo que le
pregunta si desea activar una ayuda visual para los controles no visuales, haga clic en
S.
4. En el panel de tareas Cuadro de herramientas, en Controles ASP.NET, en AJAX, haga
doble clic en el control UpdatePanel para agregarlo a la pgina.
5. Coloque el cursor en el control UpdatePanel en la vista Diseo.
AJAX, haga doble clic en el control Timer para insertarlo en el control UpdatePanel de
la pgina.
7. Con el control Timer seleccionado en la pgina, en el panel de tareas Propiedades de
etiqueta, establezca la propiedad Interval en 10000. La propiedad Interval se define en
milisegundos, por lo que al establecer la propiedad Interval en 10.000 milisegundos, el
control UpdatePanel se actualizar cada 10 segundos.
8. Coloque el cursor en el control UpdatePanel en la vista Diseo.
Estndar, haga doble clic en el control Label para agregarlo al control UpdatePanel.
10. Con el control Label seleccionado en la pgina, en el cuadro Texto del panel de tareas
Propiedades de etiqueta, escriba El panel an no se ha actualizado.
11. Coloque el cursor fuera del control UpdatePanel.
Estndar, haga doble clic en el control Label para agregar una segunda etiqueta a la
pgina.
13. En la vista Cdigo de la pgina, antes de la etiqueta </head>, agregue siguiente cdigo:

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.E
ventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub
</script>
14. En la vista Cdigo, busque la etiqueta <asp:Timer runat="server" id="Timer1"

Interval="10000"> y agregue OnTick="Timer1_Tick" a la etiqueta.
15. En el men Archivo, haga clic en Guardar.
16. Presione F12 para obtener una vista previa de la pgina en el explorador web. Espere
al menos 10 segundos para que el panel UpdatePanel se actualice. El texto dentro del
panel cambia para mostrar la ltima vez que se actualiz el contenido del panel. Sin
embargo, no se actualiza el texto fuera del panel.
Se muestra el cdigo final de la pgina:

202
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.E
ventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub
</script>
</head>
<body>
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick
"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>
Este laboratorio presenta los conceptos bsicos para usar un control Timer y un control
UpdatePanel para habilitar las actualizaciones parciales de pginas. Debe agregar un control
ScriptManager a cualquier pgina que contenga un control UpdatePanel o un control Timer. De
manera predeterminada, un control Timer que se encuentre dentro del panel har que slo se
actualice el panel durante una devolucin de datos asincrnica. Un control Timer fuera de un
panel puede provocar que el control UpdatePanel se actualice si est configurado como un
desencadenador para el panel.

Autoevaluacin
1. Defina qu es AJAX
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
2. Defina para qu sirve el control ScriptManager

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
3. Defina para qu sirve el control UpdatePanel

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
4. Defina para qu sirve el control Timer

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
5. Cul es la ventaja de programar usando AJAX?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

204
Resumen
La representacin parcial de pginas elimina la necesidad de actualizar la pgina por completo,
como resultado de una devolucin de datos. En su lugar, slo se actualizan las partes de la
pgina que hayan cambiado. De este modo, la pgina no se vuelve a cargar por completo en
cada devolucin de datos, lo que facilita la interaccin del usuario con la pgina web. ASP.NET
permite agregar la representacin parcial de pginas a pginas web ASP.NET nuevas o
existentes sin escribir un script de cliente.
Puede extender aplicaciones ASP.NET existentes y desarrollar otras nuevas que incorporen la
funcionalidad AJAX (JavaScript asincrnico y XML). Las caractersticas de AJAX de ASP.NET
permiten crear aplicaciones web enriquecidas que incorporan muchas ventajas sobre las
aplicaciones web basadas totalmente en servidor. Use las caractersticas de AJAX cuando
desee realizar alguna de las siguientes acciones:
Mejorar la experiencia del usuario con pginas web enriquecidas, que responden
mejor a las acciones de los usuarios y se comportan como aplicaciones clientes
tradicionales.
Reducir actualizaciones de pginas completas y evitar el parpadeo de pginas.
Habilitar la compatibilidad entre exploradores sin escribir scripts de cliente.
Realizar comunicaciones cliente/servidor de tipo AJAX sin escribir scripts de cliente.
Usar controles y componentes de ASP.NET AJAX Control Toolkit.
Desarrollar controles ASP.NET AJAX personalizados.
Las caractersticas principales de ASP.NET que admiten la representacin parcial de pginas

son:
Un modelo declarativo que funciona como los controles de servidor ASP.NET. En

muchos escenarios, puede especificar la representacin parcial de pginas nicamente
mediante el uso del marcado declarativo.
Controles de servidor que realizan las tareas subyacentes necesarias para las
actualizaciones parciales de pginas. Entre estos se incluye el control ScriptManager y
el control UpdatePanel.
Integracin entre controles de servidor ASP.NET AJAX y Microsoft AJAX Library para
tareas comunes. Entre estas tareas se incluye permitir que los usuarios cancelen una
devolucin de datos, mostrar mensajes de progreso personalizados durante una
devolucin de datos asincrnica y determinar cmo se procesan las devoluciones de
datos asincrnicas simultneas.
Las opciones de control de errores para la representacin parcial de pginas, que
permiten personalizar la forma en la que se muestran los errores en el explorador.
Compatibilidad entre exploradores, que se integra en la funcionalidad AJAX de
ASP.NET. La funcionalidad del explorador apropiada se invoca de forma automtica al
usar los controles de servidor.
http://msdn.microsoft.com/es-es/library/cc295497.aspx
Pgina referente a Controles en AJAX
Pgina referente a representacin parcial de pginas.

UNIDAD DE
APRENDIZAJE
AJAX en ASP.Net Parte II
usando el modelo de objetos ADO.NET usando los controles que nos proporciona AJAX Control
Toolkit.
TEMARIO
Definicin de AJAX Control Toolkit
Proceso de Instalacin del AJAX Control Toolkit
Controles ms utilizados: Accordion, ConfirmButton, FilteredTextBox,
NumericUpDown, PasswordStrength, Slider.
Los alumnos manejan la conexin y operaciones a la base de datos utilizando los
controles de AJAX Control Toolkit
Los alumnos trabajan consultas con las base de datos utilizando los controles del AJAX
Control Toolkit con lo que enriquece la Aplicacin Web.

206
1. Qu es el ASP.NET AJAX Control Toolkit?

El ASP.NET AJAX Control Toolkit nace como un proyecto conjunto entre la comunidad de
programadores y Microsoft. Est desarrollado en base a ASP.NET AJAX y contiene una serie de
controles Web y extendedores con los que podremos utilizar las avanzadas caractersticas de
ASP.NET AJAX sin ms que un arrastre de ratn. Del mismo modo, con su descarga disponemos
de ejemplos de uso, as como del propio cdigo fuente de los controles. Y lo mejor de todo es
que es totalmente gratuito.
Vamos a distinguir entre controles Web y extendedores, donde los primeros tienen una
entidad por s mismos, mientras que los segundos nicamente aaden un comportamiento a
un control Web existente.
Se trata de una serie de pequeas funcionalidades que cualquier webmaster, en su historia de

programador, ha utilizado o deseado para sus Webs. La diferencia ahora es que los ejemplos
son 100% AJAX y usarlos no exige conocimiento alguno sobre AJAX, javascript o XML.
Estos controles van desde un simple botn con una alerta asociada, hasta un complejo panel
que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo informacin
entre el cliente y el servidor sin ningn tipo de recarga de pgina. Su uso har que nuestra
Web sea mucho ms atractiva y simptica al usuario a la par que potente y efectiva.
Una vez instalado el paquete de Atlas, ya estamos preparados para instalar nuestro ASP.NET
AJAX Control Toolkit.
Para ello acudiremos a la Web donde se centraliza el trabajo sobre el ASP.NET AJAX Control
Toolkit, en su apartado de descargas:
http://ajaxcontroltoolkit.codeplex.com/
Como observamos podemos elegir entre descargarnos o no el cdigo fuente junto con el resto
del Kit. Nosotros elegiremos la opcin en que s lo tiene. Seguiremos a continuacin los
siguientes pasos:
1.- Aceptar los trminos y condiciones tras haberlos ledo.
2.- Guardar el archivo AjaxControlToolkit.zip en nuestro ordenador.
3.- Descomprimimos el fichero y guardamos el resultado en una carpeta. Comprobamos que

dentro tenemos varios directorios, donde se ubica el cdigo fuente, su correspondiente
binario, templates, etc. Destacamos la carpeta SampleWebSite, un proyecto con ejemplos
especficos de cada uno de los controles que componen esta versin del ASP.NET AJAX Control
Toolkit.
4.- Ahora iniciemos nuestro programa de la familia Visual Studio 2005, en nuestro caso el
Visual Web Developer.
5.- Elijamos crear un nuevo WebSite.

Iniciamos un nuevo proyecto ASP.NET
6.- Ahora ya tenemos un proyecto totalmente preparado para trabajar con ASP.NET. A
continuacin vamos a aadir los controles del ASP.NET AJAX Control Toolkit a nuestra caja de
herramientas. Para ello, una vez dentro de cualquiera de nuestras pginas (por ejemplo
default.aspx), ubiquemos el ratn sobre nuestra caja de herramientas y presionamos el botn
derecho para elegir Add Tab.
Aadimos una pestaa para el Toolkit

208
Con ello, crearemos un tab especfico en nuestra caja de herramientas para el ASP.NET AJAX
Control Toolkit.
7.- Nombraremos ese tab como ASP.NET AJAX Control Toolkit.
8.- A continuacin desplegamos nuestro nuevo tab, presionamos sobre ste el botn de la
derecha y elegimos Choose tems...
9.- Desde la pestaa en que nos encontramos (.NET Framework Components), hacemos clic
sobre el botn de Browse... y navegamos hacia la carpeta donde hemos instalado nuestro
ASP.NET AJAX Control Toolkit.
10.- Elegimos AjaxControlToolkit.dll y presionamos sobre open.
11.- Volvemos a presionar OK y ya tendremos instalados los controles del

ASP.NETAJAXControl Toolkit en nuestro Visual Web Developer, prestos y dispuestos a ser
utilizados.

Controles y extendedores del Toolkit
2. Principales Controles del AJAX Control Toolkit

2.1. Accordion
El control Web Accordion te permite ubicar mltiples 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 travs de los postbacks.
Propiedades
9 propiedades definen al Accordion:
SelectedIndex: Define el AccordionPane que estar activo por defecto, donde el primero
tiene como ndice 0. Es opcional y por defecto vale 0.
HeaderCssClass / ContentCssClass: Identifica el nombre de la clase CSS utilizada para las

cabeceras/contenidos (Header/content). Si se define como atributo del Accordion, la clase se
aplicar por defecto a todos los AccordionPane de que est compuesto. Tambin se puede
definir individualmente como atributo de cada AccordionPane.
FadeTransitions: en caso de ser true se aplicacar un efecto de fading en la transicin, en

210
caso de ser false la transicin se realizar de modo normal. Es optativo y por defecto vale false.
TransitionDuration: cantidad de milisegundos que definen la duracin de una transicin. Se

consigue un efecto muy agradeble con transicin de unos 200-300 milisegundos.
FramesPerSecond: nmero de frames por segundo que se usar en la animacin de las

transiciones. Suele ser suficiente un nmero superior a 40.
AutoSize: define la restriccin en la altura del Accordion. Puede tomar tres valores:
o None: No tiene ninguna restriccin. La altura del Accordion no tiene lmite. Es

importante resear que esto puede implicar que otros elementos de la misma Web
sean movidos.
o Limit: como mximo, el Accordion medir lo que marque la propiedad Height. Si el

Accordion es ms alto de lo que marque su Height, al AccordionPane activo se le
aadir un scroll para ajustarse al lmite. En caso de ser menor a ese lmite el
Accordion no sufre cambios.
o Fill: el Accordion siempre medir lo que marqu su propiedad Height, expandiendo o

minimizando el contenido en base a las necesidades.
Header: es una propiedad del AccordionPane y define el valor de su cabecera.
Content: es una propiedad del AccordionPane y define el valor de su contenido.
DataSource: El DataSource a aplicar (totalmente optativo). Para una correcta aplicacin hay
que llamar a DataBind().
DataSourceID: Alternativamente, poder asignar el identificador de nuestra fuente de datos.
DataMember: el miembro a enlazar cuando se usa el DataSourceID.
Ejemplo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACT-

Accordion.aspx.cs" Inherits="Accordion_ACT_Accordion" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<title>Accordion</title>
<style>
.accordionCabecera
{
border: 1px solid black;
background-color: #ffd800;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;

padding: 4px;
margin-top: 4px;
cursor: pointer;
}
.accordionContenido
{
font-family: Sans-Serif;
background-color: #fff8ab;
border: 1px solid black;
border-top: none;
font-size: 12px;
padding: 7px;
}
</style>
</head>
<body>
<div>
<asp:ScriptManager id="ScriptManager" runat="server" />
<ajaxToolkit:Accordion ID="Accordion1" runat="server"

FadeTransitions="True"
FramesPerSecond="50"
Width="250px"
TransitionDuration="200"
HeaderCssClass="accordionCabecera"
ContentCssClass="accordionContenido">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>Panel 1</Header>
<Content>Contenido 1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<ajaxToolkit:AccordionPane runat="server">
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>

212
Al tratarse de nuestro primer ejemplo, hemos mostrado todo el cdigo de la pgina al

completo. El motivo es que tengamos en cuenta que al arrastrar el control Accordion desde
nuestra caja de herramientas, automticamente quedar registrado el Assembly
correspondiente.
Sin embargo, lo que no se har automticamente, y debemos hacerlo nosotros siempre, es

incluir una referencia al ScriptManager, lo que no requiere ms que otro sencillo arrastre
desde nuestra caja de herramientas.
Adems, y como es obvio, debern definirse las clases CSS tanto de la cabecera como del
contenido.
En el resto de ejemplos, no mostraremos ms que el cdigo especfico del control en el que

estemos trabajando.
2.2. ConfirmButton
Con el ConfirmButton conseguimos una sencilla funcionalidad. Lo asignaremos a un Button,

LinkButton o Hyperlink, de modo que cuando se haga clic sobre ste, el navegador nos
muestre una ventana de confirmacin. En sta deberemos elegir s o no para que se
ejecute o no el evento asociado al control en cuestin.
Propiedades
TargetControlID: ID del control al que aplicaremos el efecto el ConfirmButton.
ConfirmText: Texto que se mostrar al presionar sobre el control. Por ejemplo Realmente
desea ejecutar?

Ejemplo
Mostraremos un botn que se ocupar de recargar la pgina. Cuando se nos muestre la
ventana de confirmacin elegiremos si realmente deseamos recargarla o no.
<asp:Button ID="Button1" runat="server" Text="Recargar pgina" />

<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="Button1"
ConfirmText="Realmente desea recargar la pgina?" />
</ajaxToolkit:ConfirmButtonExtender>
2.3. FilteredTextBox
El FilteredTextBox extiende al TextBox de modo que podemos definir qu tipo de caracteres

permitimos que escriba el usuario. Elegiremos entre estas configuraciones y sus mltiples
combinaciones:
- Numbers: todos los nmeros
- LowercaseLetters: letras minsculas.
- UppercaseLetters: letras maysculas.
- Custom: los caracteres que definamos.
Propiedades
TargetControlID: ID del TextBox sobre el que vamos a actuar.
FilterType: Tipo de filtro de entre los que hemos definido previamente. Los combinaremos
separndolos en comas.
ValidChars: slo se le har caso si hemos elegido a Custom como FilterType. Ser un string
con los caracteres que consideraremos vlidos.
Ejemplo
En nuestro ejemplo vamos a permitir que en nuestro TextBox se escriban nicamente nmeros
y los signos matemticos +, -, * y /.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1"
runat="server"
TargetControlID="TextBox1"
FilterType="Numbers,Custom"
ValidChars="+-*/" >
</ajaxToolkit:FilteredTextBoxExtender>
2.4. NumericUpDown
El NumericUpDown extiende al control Web TextBox habilitando unos botones que

incrementan/decrementan el valor de ste. El incremento/decremento puede corresponder a:
- El simple +1/-1 aritmtico.

- Subir o bajar dentro de un listado de valores que le demos.
- Llamar a un servicio Web o un mtodo de la pgina diferente segn si incrementamos o
decrementamos.
Podremos asignar botones para que hagan de incrementador/decrementador o dejar los que
hay por defecto.

214
Propiedades
TargetControlID: ID del TextBox sobre el que vamos a actuar.
Width: anchura combinada del TextBox y sus botones de arriba/abajo que vienen dados por
defecto (mnimo 25). Si elegimos que otros botones hagan esa funcin, est propiedad se
ignorar.
RefValues: listado de valores sobre los que querremos ir subiendo y bajando. Los daremos en
forma de string separado por punto y coma ;.
TargetButtonDownID/TargetButtonUpID: ID de los botones que har la funcin de
incrementar y decrementar.
ServiceDownPath/ServiceUpPath: path del servicio Web al que llamaremos cuando se
incremente o decremente. En caso de estar trabajando con mtodos de pgina no utilizaremos
esta propiedad.
ServiceDownMethod/ServiceUpMethod: mtodo que ser llamado para
incrementar/decrementar el TextBox. Deber tener la forma:
[WebMethod]
public int NextValue(int current, string tag)
{}
Tag: se corresponde con el segundo parmetro del mtodo al que llamaramos, y lo podemos
utilizar para distinguir qu elemento est llamando al mtodo.
Ejemplo
En nuestro sencillo ejemplo, vamos a viajar por los planetas del sistema solar, donde ya no
incluiremos a nuestro querido Plutn.
<asp:TextBox ID="TextBox1" runat="server" Text="Tierra" Width="120"

style="text-align:center"></asp:TextBox>
<cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server

TargetControlID="TextBox1" Width="120"
RefValues="Mercurio;Venus;Tierra;Marte;Jpiter;Saturno;Urano;Neptuno"
ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID=""
TargetButtonUpID="">
</cc1:NumericUpDownExtender>
2.5. PasswordStrength
El PasswordStrength es otro extendedor del TextBox. Con l podremos mostrar al usuario el

nivel de fortaleza que tiene la contrasea que est escribiendo, en base a unos parmetros
tpicos de fortaleza que definiremos nosotros:
- Nmero total de caracteres.

- Exigencia de signos.
- Exigencia de combinar maysculas y minsculas.
- Exigencia de nmeros.
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.
Adems, podemos aadir la opcin de ayuda, donde explicar al usuario cmo debe ser su
contrasea.

Propiedades
TargetControlID: ID del TextBox sobre el que vamos a trabajar.
DisplayPosition: posicin relativa del indicador con respecto al TextBox. Puede tomar 6
valores: AboveLeft, AboveRight, BelowLeft, BelowRight, LeftSide, RightSide.
StrengthIndicatorType: tipo de indicador: Text o BarIndicator.
PreferredPasswordLength: longitud mnima que debera tener la contrasea.
PrefixText: prefijo a mostrar cuando estemos mostrando el texto que describa la fortaleza de
la contrasea. Tpicamente ser Fortaleza= .
TextCssClass: clase CSS que se aplicar al texto que describe la fortaleza de la contrasea.
MinimumNumericCharacters: cantidad mnima de caracteres numricos.
MinimumSymbolCharacters: cantidad mnima de signos (ej.: $ ^ *)
RequiresUpperAndLowerCaseCharacters: especificamos si exigimos la combinacin de
maysculas y minsculas.
TextStrengthDescriptions: listado de texto que se usar para describir la fortaleza de la
contrasea. Ir ordenado de dbil a fuerte y separado por punto y coma ;. Tendr un mnimo
de 2 textos y un mximo de 10. Por ejemplo: muy dbil;dbil;mejorable;buena;perfecta.
CalculationWeightings: listado de 4 valores numricos separados por ;, donde la suma de
ellos debe dar 100. Cada valor asigna un porcentaje de importancia a una caracterstica del
password; por ejemplo 40;25;15;20 significa que el 40% del peso de fortaleza viene de la
longitud de la contrasea, el 25% a la cantidad de nmeros, el 15% a maysculas/minsculas y
el 20% a la cantidad de caracteres no alfanumricos.
BarBorderCssClass: Clase CSS del borde de la barra indicadora.
BarIndicatorCssClass: Clase CSS del interior de la barra indicadora.
HelpStatusLabelID: ID de la Label que usaremos opcionalmente- para mostrar el texto de
ayuda.
HelpHandleCssClass: clase CSS del elemento que mostrar el texto de ayuda.
HelpHandlePosition: posicin relativa del elemento de ayuda con respecto al TextBox. Puede
tomar 6 valores: AboveLeft, AboveRight, BelowLeft, BelowRight, LeftSide, RightSide.
Ejemplo
Veamos qu fortaleza nos asigna este control:
<cc1:PasswordStrength ID="PasswordStrength1" runat="server"

DisplayPosition="rightside"
MinimumNumericCharacters="2"
MinimumSymbolCharacters="2"
PreferredPasswordLength="13"
PrefixText="Fortaleza: "
RequiresUpperAndLowerCaseCharacters="true"
StrengthIndicatorType="Text"
TextStrengthDescriptions="muy dbil; dbil; mejorable; buena; perfecta">
</cc1:PasswordStrength>

216
2.6. Slider
El Slider es un extendedor del TextBox, de modo que al aplicarlo sobre l, se convierte en un

deslizador (ver ejemplo). Sus funcionalidades son mltiples.
Por ejemplo se puede sincronizar con un TextBox o una Label, de modo que se va mostrando el
valor numrico que representa.
Podemos elegir un valor mnimo y un valor mximo, as como permitir nmeros decimales. El
movimiento del Slider puede ser contnuo o discreto (le marcaremos los pasos que debe dar).
Adems, soporta postbacks e incluso lo podemos combinar con un UpdatePanel para viajar al
servidor en modo AJAX.
Propiedades
Minimum: Valor inferior. Por defecto es 0.
Maximum: Valor superior. Por defecto 100.
Decimals: Cantidad de decimales. Por defecto no hay.
Steps: Cuando queramos un deslizamiento discreto, marcaremos la cantidad de pasos.
Value: Valor actual del deslizador.
EnableHandleAnimation: Activa la animacin.
HandleAnimationDuration: duracin en milisegundos de la animacin.
RailCssClass: Asigna una clase CSS a la va sobre la que se mueve el deslizador.
HandleCssClass: Asigna una clase CSS al deslizador.
HandleImageURL: opcionalmente podemos asignar una imagen al deslizador.
Length: Longitud del deslizador. Por defecto se coger la longitud del TextBox que estamos
extendiendo
BoundControlID: ID del TextBox o Label en el que estamos mostrando el valor del deslizador.
RaiseChangeOnlyOnMouseUp: Si se activa, lanza el evento change cuando se suelta el
botn izquierdo del ratn.
Ejemplo
Mostramos lo fcil que es crear un Slider.
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
BoundControlID="TextBox2" />

Laboratorio 12.1
Tema: Control ScriptManager y UpdatePanel conectados con Base de Datos.
En este laboratorio desarrollaremos un ejemplo comenzando por lo visto la semana anterior,

pero en este caso ser un ejemplo paso a paso para realizar una consulta conectados con una
base de datos.
1. Disee el siguiente Web Form:
Observacin: En este diseo es necesario que el control GridView se encuentre dentro

de un control UpdatePanel.
2. Aada la siguiente linea en la seccin ConnectionStrings del web.config.
<add name="Cn"
connectionString="server=(local);database=ventasdemo;uid=sa;pwd=sql"/>
3. Cree una clase Conexin donde se pueda establecer la conexin con la base de datos y
devolver un objeto configurado SqlConnection.
Imports System.Configuration.ConfigurationManager
Public Class Conexion

Private cn As New SqlConnection(ConnectionStrings("Cn").ConnectionString)
Public ReadOnly Property conectar As SqlConnection

Get
Return cn
End Get
End Property
End Class
4. Programe el siguiente cdigo en el WebForm:
Imports System.Data

218
Public Class FacturasCliente

Dim cn As New Conexion

Protected Sub Page_Load(ByVal sender As Object,)

Dim da As New SqlDataAdapter("select * from tb_cliente order by 2", objCn)
da.Fill(tabla)
With DropDownList1
.DataSource = tabla
.DataTextField = "raz_soc_cli"
.DataValueField = "cod_cli"
.DataBind()
End With
End If
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(ByVal )

Dim da As New SqlDataAdapter("select num_fac,fec_fac,fec_can,nom_ven,ape_ven" & _
" from tb_factura f join tb_vendedor v on f.cod_ven=v.cod_ven" & _
" where cod_cli=@cli", objCn)
da.SelectCommand.Parameters.Add( _
"@cli", SqlDbType.Char, 4).Value = DropDownList1.SelectedValue
da.Fill(tabla)
With GridView1
.DataSource = tabla
.DataBind()
End With
End Sub
End Class
5. Ejecutemos la Aplicacin y veremos los resultados CTRL+F5
6. Hasta este momento no hemos usado AJAX debido a que vemos que al seleccionar el
cliente aun hay postback, es decir, podemos apreciar como la pgina se vuelve ha
cargar, pero agregando un paso ms podremos apreciar como el postback se hace en
un segundo plano, es decir, que para el usuario es como que no hay postback, no se
recargar la pgina lo cual har que la consulta sea ms rpida. Para poder ver eso
hagamos lo siguiente:
Seleccionemos el UpdatePanel desde la ventana de propiedades y entremos a la

propiedad Triggers:

Aparecer al siguiente cuadro de dilogo donde agregaremos un evento que queremos

que se ejecute de forma asincrona, es decir, en un segundo plano, de tal manera que
sea transparente para el usuario:
7. Damos Click en OK y volvamos a ejecutar la aplicacin CTRL + F5.

Ahora cuando lo ejecute se dar cuenta que cada vez que selecciona un cliente ya no
se recarga la pgina, y no es que no se haga el postBack sino que como esta en un
segundo plano el usuario no lo puede apreciar, pero hace que la consulta cargue de
una manera ms rpida.

220
Laboratorio 12.2
Tema: Ejemplo de configuracin de Controles de AJAX Control Toolkit
En este laboratorio desarrollaremos un ejemplo de como utilizar algunos de los controles del
AJAX Control Toolkit.
1. Disee el siguiente WebForm:
2. Agregue un control PasswordStrength de AJAX al txtPassword:
3. Haga Click en el botn Ok y pasemos a configurar sus propiedades:

Para poder hacer que el password alcance el nivel de Perfecto debemos ingresar
como mnimo, a parte de todos los caracteres que queramos, 2 caracteres numricos y
2 simbolos, de otra forma no alcanzaremos en nivel perfecto.
4. Agregue un control CalendarExtender de AJAX al txtFecha:

222
El CalendarExtender tiene varias vistas: Por Das, por Meses, o por Aos. Eso lo puede
configurar con la propiedad DefaultView. Es importante tambin configurar la
propiedad Format para que al seleccionar la fecha, en el Textbox aparezca la fecha en
el formato que se desea.

6. Agregue un control FilteredTextBox de AJAX al txtDni:

224
En este ejemplo solo estamos seleccionando la propiedad FilterType como Numbers para
que el usuario solo pueda digitar nmeros, y para establecer la cantidad mxima de
caracteres a 8 solo configure la propiedad MaxLength del txtDni.
8. Agregue un control NumericUpDown de AJAX al txtEdad:

En este ejemplo estamos asumiendo que los usuarios no deben ser menores de edad por
tal razn el valor de Minimum es 18, y Maximum 80. Es importante configurar la
propiedad Width ya que de otra manera no se podr apreciar el NumericUpDown.
10. Agregue un control ConfirmButton de AJAX al btnRegistrar:

226
En este ejemplo configuramos este control para que cuando el usuario haga click aparezca
un mensaje que diga Esta Seguro del Registro?

Autoevaluacin
1. Defina qu es AJAX Control Toolkit
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
2. Cmo instalo el AJAX Control Toolkit?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
3. Defina para qu sirve el control FilteredTextBox

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
4. Defina para qu sirve el control Accordion

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
5. Defina para qu sirve el control CalendarExtender

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
6. Defina para qu sirve el control NumericUpDown

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
7. Defina para qu sirve el control PasswordStrength

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

228
Resumen
El ASP.NET AJAX Control Toolkit nace como un proyecto conjunto entre la comunidad de
programadores y Microsoft. Est desarrollado en base a ASP.NET AJAX y contiene una serie de
controles Web y extendedores con los que podremos utilizar las avanzadas caractersticas de
ASP.NET AJAX sin ms que un arrastre de ratn. Del mismo modo, con su descarga disponemos
de ejemplos de uso as como del propio cdigo fuente de los controles. Y lo mejor de todo es
que es totalmente gratuito.
Vamos a distinguir entre controles Web y extendedores, donde los primeros tienen una
entidad por s mismos, mientras que los segundos nicamente aaden un comportamiento a
un control Web existente.
Se trata de una serie de pequeas funcionalidades que cualquier webmaster, en su historia de

programador, ha utilizado o deseado para sus Webs. La diferencia ahora es que los ejemplos
son 100% AJAX y usarlos no exige conocimiento alguno sobre AJAX, javascript o XML.
Estos controles van desde un simple botn con una alerta asociada, hasta un complejo panel
que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo informacin
entre el cliente y el servidor sin ningn tipo de recarga de pgina. Su uso har que nuestra
Web sea mucho ms atractiva y simptica al usuario a la par que potente y efectiva.
Tiene distintos controles que se podran categorizar de la siguiente forma:
Input Helpers- FilteredTextBox y NumericUpDown.

Input Helpers - MaskEdit and Slider.
Input Helpers - CascadingDropDown and Calendar.
Input Helpers - ToggleButton, Rating and ValidatorCallout.
Containers - Dynamic Populate and CollapsiblePanel.
Containers -Tabs.
Containers - Accordion.
Popups - Popup, DropDown and ModalPopup.
Others- NotBot and PasswordStrength.
Others- ToolkitScriptManager.
Pginas para consultar:
http://msdn.microsoft.com/es-es/library/bb470455(v=vs.90).aspx
Pgina referente a AJAX Control Toolkit
http://msdn.microsoft.com/es-es/library/bb470384(v=VS.90).aspx
Pgina referente a Controles de AJAX

UNIDAD DE
APRENDIZAJE
Manejo de Imgenes en ASP.Net y AJAX
Al trmino de la unidad, los alumnos elaboran aplicaciones Web conectadas con base de datos
utilizando el modelo de ADO.Net cargando imgenes en el servidor y almacenandolas en la
base de datos.
TEMARIO
Explicacin del Caso Prctico: Web de Contactos.
Explicacin del uso de LightBox2 en AJAX para crear una Galera de Imgenes.
Los alumnos desarrollan la aplicacin Web de Contactos conectandose con una base
de datos manejando imgenes.
Los alumnos desarrollan aplicaciones utilizando el componente de AJAX LightBox 2.0

para crear una galeria de imgenes.

230
1. Caso prctico: Web de Contactos
En esta sesin haremos el desarrollo prctico del desarrollo de la Aplicacin Web de

contactos que pasamos a detallar a continuacin:
1.1. Pgina Inicial

Esta es la pantalla de Home o Inicio desde donde el usuario podr seleccionar
del men de la parte superior la tarea que desea realizar ya sea ir a la pgina
de inicio, registrar un nuevo contacto, mostrar el listado de contactos, ver la
galera de fotos, o ir a la opcin acerca de:
1.2. Pgina de Registro

En esta segunda pantalla el usuario podr registrar un nuevo contacto
colocando sus datos personales tales como: Nombres, Apellidos, Email,
Telfono y adicionalmente podr agregarle una foto a travs de un control
FileUpload.
Al seleccionar la foto ya queda la ruta del archivo en el control FileUpload

como lo muestra la siguiente figura:

1.3. Pgina de Confirmacin

Esta pgina se muestra cuando el usuario hace click en Registrar el nuevo
contacto de la pgina anterior, entonces aparece la pgina donde se confirman
sus datos ingresados, incluyendo la foto seleccionada.
1.4. Pgina de Listado

Esta pgina aparece cuando el usuario selecciona la opcin listado del men
principal, carga en un control DataList personalizado todos los contactos
ingresados con su respectiva foto, y muestra la opcin de buscar contactos por
la letra en orden alfabtico. Utilizamos un control RadioButtonList para poder
hacer la lista del abecedario.

232
Muestra solo los contactos filtrados por la letra seleccionada:
1.5. Pgina de Acerca de:

Esta pgina muestra informacin acerca de la empresa, o institucin donde se
desarroll este Web Site y datos del autor.

2. Caso prctico: Galera de Imgenes con LightBox 2 en AJAX

1.1. Pgina de Galera:
En esta pantalla hay dos opciones de para mostrar galeras usando LigthBox 2
de AJAX: Una opcin es de imgenes individuales y la otra opcin es para
mostrar imgenes con opcin de avanzar y retroceder.
En la siguiente figura se muestra la opcin de imagen individual sin opciones

de navegacin.

234
En las siguientes figuras se muestran la opcin de imgenes con opciones de

navegacin.

Laboratorio 13.1
Tema: Desarrollo de Aplicacin Web de Contactos con imgenes
1. Disee el siguiente WebForm llamado RegistroContactos.aspx que herede el diseo de la

pgina maestra site.master.
2. Programe el siguiente cdigo en el cual veremos el registro de los datos del contacto
incluyendo la foto que se almacenar como binario y a su vez se subir el archivo de
imagen al servidor, es decir, a su proyecto y se almacenarn en la carpeta
DirectorioImagenes.
Imports System.IO
Partial Class RegistroContacto

Dim len As Integer = FileUploadImage.PostedFile.ContentLength

Dim pic(len) As Byte
FileUploadImage.PostedFile.InputStream.Read(pic, 0, len)
Dim connection As SqlConnection = New _

SqlConnection("server=LocalHost;database=dbContactos;uid=sa;pwd=sql")
Try
connection.Open()
Dim cmd As SqlCommand = New SqlCommand( _

"insert into tb_Contacto values (@nom,@ape,@ema,@tel,@pic,@ruta)", connection)
cmd.Parameters.Add("@nom", Data.SqlDbType.VarChar, 30).Value = txtNombres.Text

cmd.Parameters.Add("@ape", Data.SqlDbType.VarChar, 30).Value = txtApellidos.Text
cmd.Parameters.Add("@ema", Data.SqlDbType.VarChar, 30).Value = txtEmail.Text
cmd.Parameters.Add("@tel", Data.SqlDbType.VarChar, 30).Value = txtTelefono.Text
cmd.Parameters.Add("@pic", Data.SqlDbType.Image).Value = pic
cmd.Parameters.Add("@ruta", Data.SqlDbType.VarChar, 30).Value = _
FileUploadImage.FileName
'subir el archivo al servidor

Dim nombre As String = FileUploadImage.FileName
FileUploadImage.SaveAs(Server.MapPath("~/DirectorioImagenes/") + nombre)

236
'redireccionar la pgina
Response.Redirect("ConfirmacionRegistro.aspx")
Finally
connection.Close()
End Try
End Sub
End Class
3. Disee el siguiente WebForm llamado RegistroContactos.aspx que herede el diseo de la

4. Programe el siguiente cdigo en el cual veremos la confirmacin de los datos del contacto
incluyendo la foto que se almacen en la carpeta DirectorioImagenes. Al presionar el
botn Aceptar regresar a la pgina de inicio.
Imports System.IO
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Data
Partial Class ConfirmacionRegistro
Dim connection As New _

connection.Open()
'Especificamos la consulta que nos devuelve la imagen

Dim command As New SqlCommand( _
"select * from tb_Contacto where Id=(select max(Id) from tb_Contacto)", connection)
Dim dr As SqlDataReader = command.ExecuteReader
dr.Read()

lblNombre.Text = dr(1) + " " + dr(2)
lblEmail.Text = dr(3)
lblTelefono.Text = dr(4)
Dim strfn As String = "~/DirectorioImagenes/" + dr(6).ToString
'Al control image le indicamos la URL

Image1.ImageUrl = strfn
End Sub
Protected Sub btnAceptar_Click(ByVal s)

End Sub
End Class
5. Disee el siguiente WebForm llamado ListadoContactos.aspx que herede el diseo de la

Diseo del control DataList: Seleccione de Tareas Comunes la opcin Editar Plantillas
Mostrar la plantilla ItemTemplate as como se muestra en la siguiente figura:

238
Hagamos el diseo que se muestra a continuacin creando una tabla de 5 x 2 y agregando

en la primera fila un control Image, y en el resto de filas controles labels para mostrar los
datos de la consulta.
Para enlazar a datos al control Image seleccione de Tareas Comunes la opcin Edit
Databindings.
Se mostrar el siguiente cuadro de dilogo donde debe escribir la siguiente expresin de

enlace a datos tal como muestra la figura:

Para enlazar los labels a datos de Tareas Comunes seleccione la opcin Edit
DataBindins y escriba la siguiente expresin de enlace a datos.

240
Haga click en OK y de Tareas Comunes del DataList Seleccione la opcin Finalizar

Editar Plantillas. El DataList debe mostrase como esta en la figura a continuacin:
Para cambiar el nmero de columnas seleccionamos de Tareas Comunes del control

DataList, la opcin Property Builder:

Cambiar donde dice Columnas con el valor 4.
Haga Click en OK. La siguiente figura muestra el acabado final del DataList:

242
6. Programe el siguiente cdigo para mostrar la informacin de todos los contactos y de los
filtrados:
Imports System.Data
Partial Class ListadoContactos
Dim connection As New _
"select * from tb_contacto order by 3", connection)
da.Fill(tabla)
With DataList1
.DataSource = tabla
.DataBind()
End With
End If
End Sub
Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender )

"select * from tb_contacto where apellidos like @letra order by 3", connection)
da.SelectCommand.Parameters.Add( _
"@letra", Data.SqlDbType.Char, 2).Value = RadioButtonList1.SelectedValue + "%"
da.Fill(tabla)
With DataList1
.DataSource = tabla
.DataBind()
End With
End Sub
End Class

Laboratorio 13.2
Tema: Desarrollo de Aplicacin Web de Galera de imgenes con LightBox 2 en AJAX.
1. Descargue LightBox 2.04 desde el siguiente link:
http://www.huddletogether.com/projects/lightbox2/
2. Las carpetas de LightBox 2.04 que debe agregar a su Proyecto son las siguientes:
Agregue un nuevo WebForm llamado GaleriaAJAX.aspx y coloque el siguiente cdigo en

la vista de cdigo o HTML (seccin HEAD) para poder hacer referencias a la hoja de estilo y
a los scripts.
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Luego en el archive .VB agregue el siguiente cdigo

Response.Write( _
"<font name=Arial><b>Galeria de Imagenes Individuales</b></font><hr>")
For i As Integer = 1 To 10
Response.Write("<a href=fotos/" + _
i.ToString + ".jpg rel=lightbox title='imagen" + i.ToString + _
"'>imagen " + i.ToString + "</a><br>")
Next
Response.Write( _
"<br><font name=Arial><b>Galeria de Imagenes con Opciones de Avanzar y
Retroceder</b></font><hr>")
For i As Integer = 1 To 10
Response.Write("<a href=fotos/" + _
i.ToString + ".jpg rel=lightbox[roadtrip]>image #" + _
i.ToString + "</a><br>")
Next
End Sub

244
Autoevaluacin
1. Cmo se puede almacenar imgenes en la base de datos?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
2. Cmo puedo subir archivos al servidor?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
3. Defina cmo se configura un control DataList

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
4. Cul es la ventaja de un control DataList en comparacin con un GridView?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
5. Qu es Lightbox 2.04 en AJAX?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

Resumen
El manejo de imgenes en una aplicacin generalmente se hace de 2 formas: Almacenando la
imagen en formato binario en la misma base de datos, o se almacena solo la ruta en la base de
datos y los archivos de imagen se almacenan en una carpeta.
En las aplicaciones Web es importante tener las imgenes en el servidor, por ello es que
debemos subir los archivos de la imagen a nuestro proyecto para que sea ms fcil de
administrar y tambin el enlace de controles a datos sea ms prctico y rpido.
El control FileUpload es de gran utilidad no solo para cargar imgenes sino tambin para subir
cualquier tipo de archivo a nuestro servidor o aplicacin y se puede direccionar para que los
guarden en un directorio especfico.
Ligthbox 2.04 es un proyecto desarrollado en AJAX para poder ser reutilizado y crear una
galera de imgenes.
Puede extender aplicaciones ASP.NET existentes y desarrollar otras nuevas que incorporen la
funcionalidad AJAX (JavaScript asincrnico y XML). Las caractersticas de AJAX de ASP.NET
permiten crear aplicaciones web enriquecidas que incorporan muchas ventajas sobre las
aplicaciones web basadas totalmente en servidor. Use las caractersticas de AJAX cuando
desee realizar alguna de las siguientes acciones:
Mejorar la experiencia del usuario con pginas web enriquecidas, que responden
mejor a las acciones de los usuarios y se comportan como aplicaciones clientes
tradicionales.
Reducir actualizaciones de pginas completas y evitar el parpadeo de pginas.
Habilitar la compatibilidad entre exploradores sin escribir scripts de cliente.
Realizar comunicaciones cliente/servidor de tipo AJAX sin escribir scripts de cliente.
Usar controles y componentes de ASP.NET AJAX Control Toolkit.
Desarrollar controles ASP.NET AJAX personalizados.
Pgina de consulta
http://www.huddletogether.com/projects/lightbox2/
Pgina referente a LightBox 2.04
http://www.123aspx.com/redir.aspx?res=30249
Pgina referente a Carga de Imgenes desde Base de Datos.

246

UNIDAD DE
APRENDIZAJE
ASP.Net MVC
Al trmino de la unidad, los alumnos elaboran aplicaciones Web utilizando el patrn de

desarrollo MVC (Modelo Vista Controlador)
TEMARIO
Definicin de MVC
Ventajas de una aplicacin Web basada en MVC
Caractersticas del Marco MVC
Estructura de una aplicacin MVC
Los alumnos desarrollan aplicaciones utilizando el patrn de desarrollo MVC, utilizando
controllers y views.
Los alumnos desarrollan aplicaciones utilizando el patrn de desarrollo MVC
agregando funcionalidades con Controles AJAX.

248
1. ASP.NET MVC
El Model-View-Controller (MVC) separa la arquitectura de una aplicacin en tres
componentes principales: el modelo, la vista, y el controlador. El marco de ASP.NET
MVC proporciona una alternativa al modelo de formularios Web Forms ASP.NET para
crear aplicaciones web basadas en MVC. El marco de ASP.NET MVC es un marco
ligero, presentacin muy comprobable que (como con las aplicaciones de formularios
basados en Web) se integra con las caractersticas de ASP.NET, como pginas maestras
y la autenticacin basada en membresa. El framework MVC se define en el espacio de
nombres System.Web.Mvc y es un derecho fundamental, con el apoyo de parte del
espacio de nombres System.Web.
MVC es un patrn de diseo estndar que muchos desarrolladores estn

familiarizados. Algunos tipos de aplicaciones web se beneficiarn de la framework
MVC. Otros seguirn utilizando el tradicional patrn de la aplicacin ASP.NET que se
basa en formularios Web Forms y las devoluciones de datos. Otros tipos de
aplicaciones Web pueden combinar los dos enfoques, ni un enfoque excluye al otro.
El framework MVC incluye los siguientes componentes:
Modelos. Modelo de objetos es la parte de la aplicacin que aplica la lgica para la

aplicacin y dominio de datos. A menudo, los objetos del modelo recuperan y
almacenan el estado de modelo en una base de datos. Por ejemplo, un objeto del
producto puede recuperar informacin de una base de datos, operar sobre ella y, a
continuacin escribir la informacin actualizada en una tabla Productos en SQL Server.
En aplicaciones pequeas, el modelo es a menudo una separacin conceptual en lugar de uno

fsico. Por ejemplo, si la aplicacin slo lee un conjunto de datos y lo enva a la vista, la
aplicacin no tiene una capa del modelo fsico y las clases asociadas. En ese caso, el conjunto
de datos asume el papel de un modelo de objetos.

Puntos de vista. Las vistas son los componentes que muestran la aplicacin, su
interfaz de usuario (UI). Normalmente, esta interfaz de usuario es creado a partir de
los datos del modelo. Un ejemplo podra ser una vista de edicin de una tabla de
productos que muestra cuadros de texto, listas desplegables y las casillas de
verificacin basada en el estado actual de los productos objeto.
Controladores. Los controladores son los componentes que se encargan de la

interaccin del usuario, el trabajo con el modelo, y en ltima instancia, seleccione una
vista que muestra la interfaz de usuario. En una aplicacin MVC, la vista slo muestra
la informacin, se encarga del tratamiento y responde a la entrada del usuario y la
interaccin. Por ejemplo, el controlador maneja los valores de cadena de consulta, de
pasar estos valores al modelo, que a su vez consulta la base de datos mediante el uso
de los valores.
El patrn MVC le ayuda a crear aplicaciones que separan los diferentes aspectos de la
aplicacin (de entrada lgica, la lgica de negocio, y la lgica de la interfaz de usuario),
mientras que proporciona un acoplamiento entre estos elementos. El modelo especifica que
cada tipo de lgica debe estar ubicado en la solicitud. La lgica de la interfaz de usuario
pertenece a la vista. La lgica de entrada pertenece en el controlador. La lgica de negocio
pertenece al modelo. Esta separacin le ayuda a gestionar la complejidad al crear una
aplicacin, ya que le permite centrarse en un aspecto de la aplicacin a la vez. Por ejemplo,
usted puede concentrarse en el punto de vista, sin depender de la lgica de negocio.
Adems de gestionar la complejidad, el patrn MVC hace ms fcil para probar las
aplicaciones de lo que es prueba de una web basada en formularios aplicacin Web ASP.NET.
Por ejemplo, en una web basada en formularios de aplicaciones Web ASP.NET, una sola clase
se utiliza tanto para mostrar la salida y para responder a la entrada del usuario. Escribir
pruebas automatizadas para las aplicaciones ASP.NET Web Forms-basado puede ser complejo,
porque para probar una pgina individual, debe crear instancias de la clase de pgina, todos
sus controles secundarios, y ms dependiente de las clases en la aplicacin. Debido a que
muchas clases se crean instancias para ejecutar la pgina, puede ser difcil de escribir las
pruebas que se centran exclusivamente en las partes individuales de la solicitud. Las pruebas
de aplicaciones Web ASP.NET basada en formularios por lo tanto puede ser ms difcil de
aplicar que las pruebas en una aplicacin MVC. Por otra parte, los ensayos en una aplicacin
Web ASP.NET basada en formularios requiere un servidor Web. El framework MVC separa los
componentes y hace un uso intensivo de las interfaces, lo que permite probar los
componentes individuales de forma aislada del resto del marco.
El acoplamiento entre los tres principales componentes de una aplicacin MVC tambin
promueve el desarrollo paralelo. Por ejemplo, un desarrollador puede trabajar en la vista, un
segundo desarrollador puede trabajar en la lgica del controlador, y un tercer desarrollador
puede concentrarse en la lgica de negocio en el modelo.
2. Decidir cundo crear una aplicacin MVC

Usted debe considerar cuidadosamente la posibilidad de implementar una aplicacin web
utilizando el marco ASP.NET MVC o el modelo de formularios Web Forms ASP.NET. El
framework MVC no sustituye el modelo de formularios Web Forms, puede utilizar cualquier
marco para las aplicaciones Web. (Si ya dispone de las aplicaciones Web basada en
formularios, estos siguen trabajando exactamente como siempre lo han hecho.)

250
Antes de decidirse a usar el framework MVC o el modelo de formularios Web Forms para un
sitio Web especfico, debe saber las ventajas de cada enfoque.
2.1. Ventajas de una aplicacin Web basada en MVC
Es ms fcil para manejar la complejidad de dividir una aplicacin en el modelo, la

vista, y el controlador.
No utiliza el estado de vista o formas basadas en servidor. Esto hace que el ideal
framework MVC para los desarrolladores que quieren tener el control total sobre el
comportamiento de una aplicacin.
Se utiliza un patrn Front Controller que procesa las solicitudes de aplicaciones Web a
travs de un solo controlador. Esto le permite disear una aplicacin que es
compatible con una rica infraestructura de enrutamiento.
Ofrece un mejor soporte para el desarrollo controlado por pruebas (TDD).
Funciona bien para las aplicaciones Web que son apoyados por grandes equipos de
desarrolladores y diseadores web que necesitan un alto grado de control sobre el
comportamiento de la aplicacin.
2.2. Ventajas de una aplicacin Web basada en formularios web
Es compatible con un modelo de eventos que preserve el estado a travs de HTTP, que
beneficia a la lnea de negocio de desarrollo de aplicaciones Web. La aplicacin Web
basada en formularios ofrece docenas de eventos que se apoyan en cientos de
controles de servidor.
Se utiliza un patrn Page Controller que aade funcionalidad a las pginas individuales.
Utiliza el estado de vista o formas basadas en servidor, que puede hacer ms fcil la
gestin de la informacin de estado.
Funciona bien para pequeos equipos de desarrolladores y diseadores Web que
quieran aprovechar el gran nmero de componentes disponibles para el desarrollo
rpido de aplicaciones.
Page En general, es menos complejo para el desarrollo de aplicaciones, ya que los
componentes (la clase Page, controles, etc) estn estrechamente integradas y por lo
general requiere menos cdigo que el modelo MVC.
3. Caractersticas del marco ASP.NET MVC

La separacin de tareas de la aplicacin (de entrada lgica, la lgica de negocio, y la
lgica de la interfaz de usuario), capacidad de prueba y desarrollo de las pruebas (TDD)
por defecto. Todos los contratos bsicos en el marco MVC son interfaz basada y se
puede probar mediante el uso de objetos simulacros, que son objetos simulados que
imitan el comportamiento de los objetos reales en la aplicacin. Puede probar la
aplicacin sin tener que ejecutar los controladores en un proceso de ASP.NET, lo que
hace la unidad de pruebas rpidas y flexibles. Usted puede usar cualquier marco de
unidad de prueba que es compatible con. NET Framework.
Un marco extensible y conectable. Los componentes del marco de ASP.NET MVC
estn diseados para que puedan ser fcilmente reemplazados o modificados para
requisitos particulares. Puede conectar el motor de su propio punto de vista, la
poltica de enrutamiento de direcciones URL, la serializacin de accin-parmetro del
mtodo, y otros componentes. El marco de ASP.NET MVC tambin apoya el uso de la
inyeccin de dependencias (DI) y la Inversin de Control de los modelos de

contenedores (COI). DI permite que se inyecte en una clase de objetos, en lugar de

confiar en la clase para crear el objeto en s. COI se especifica que si un objeto
requiere otro objeto, los objetos en primer lugar pueden obtener el segundo objeto de
una fuente externa como un archivo de configuracin. Esto hace que las pruebas ms
fciles.
Un componente de gran alcance URL de mapas que permite crear aplicaciones que
tienen comprensible y URL de bsqueda. El URL no tiene que incluir extensiones de
nombre de archivo, y est diseado para soportar los patrones de URL de nombres
que funcionan bien para la optimizacin del Search Engine (SEO) y la transferencia de
estado de representacin (REST) abordar.
Soporte para el uso del margen de beneficio existentes en la pgina ASP.NET (. Aspx),
control de usuario (. Ascx), y la pgina principal (archivos. Maestro) archivos de
marcado como ver las plantillas. Usted puede utilizar las actuales caractersticas de
ASP.NET con el marco ASP.NET MVC, tales como las pginas maestras anidadas, en
expresiones en lnea (<% =%>), los controles de servidor declarativos, las plantillas, de
enlace de datos, localizacin, etc.
Soporte para las caractersticas de ASP.NET existentes. ASP.NET MVC le permite
utilizar funciones como autenticacin de formularios y la autenticacin de Windows, la
autorizacin de URL, la composicin y funciones, la produccin y el almacenamiento
en cach de datos, administracin de estado de sesin y el perfil, vigilancia de la salud,
el sistema de configuracin, y la arquitectura del proveedor.
4. Marco de MVC y estructura de aplicacin

En un sitio web de ASP.NET, las direcciones URL se asignan normalmente a archivos que estn
almacenados en disco (normalmente archivos .aspx). Estos archivos .aspx incluyen marcado y
cdigo que se procesan para responder a la solicitud.
El marco de MVC de ASP.NET asigna las direcciones URL al cdigo del servidor de manera
diferente que una pgina de formularios Web Forms de ASP.NET. En lugar de asignar las
direcciones URL a pginas o controladores de ASP.NET, el marco asigna las direcciones URL a
las clases de controlador. Las clases de controlador controlan las solicitudes entrantes, como
los datos e interacciones del usuario, y ejecuta la aplicacin y la lgica de datos
correspondientes en funcin de los datos proporcionados por el usuario. Normalmente, una
clase de controlador llama a un componente de vista independiente que genera una salida
HTML como respuesta.
El marco de MVC de ASP.NET separa los componentes del modelo, vista y controlador. El
modelo representa la lgica de negocio o dominio de la aplicacin, normalmente con los datos
proporcionados por una base de datos. El controlador selecciona la vista, que representa la
interfaz de usuario adecuada. De forma predeterminada, el marco de MVC de ASP.NET usa los
tipos existentes de pgina de ASP.NET (.aspx), pgina maestra (.master) y control de usuario
(.ascx) para la representacin en el explorador. El controlador busca el mtodo de accin
adecuado en el controlador, obtiene los valores que se usarn como argumentos del mtodo
de accin y administra los errores que se pudieran producir cuando se ejecuta el mtodo de
accin. A continuacin, representa la vista solicitada. De forma predeterminada, cada conjunto
de componentes est en una carpeta independiente de un proyecto de aplicacin web de
MVC.

252
4.1. Enrutamiento de direcciones URL
El marco de MVC de ASP.NET usa el motor de enrutamiento de ASP.NET, que proporciona la

flexibilidad de asignar direcciones URL a las clases de controlador. Puede definir las reglas de
enrutamiento que el marco de MVC de ASP.NET usar para evaluar direcciones URL entrantes
y seleccionar el controlador adecuado. Tambin puede hacer que el motor del enrutamiento
analice automticamente las variables definidas en la direccin URL, y hacer que el marco de
MVC de ASP.NET pase los valores al controlador como argumentos de parmetro.
4.2. Marco de MVC y postbacks
El marco de MVC de ASP.NET no usa el modelo de postback de los formularios Web Forms de
ASP.NET para las interacciones con el servidor. En su lugar, todas las interacciones del usuario
final se enrutan a una clase de controlador. De este modo se mantiene la separacin entre la
lgica de la interfaz de usuario y la lgica empresarial, y aumenta la facilidad de pruebas. Por
consiguiente, el estado de vista de ASP.NET y los eventos de ciclo de vida de las pginas de
formularios Web Forms de ASP.NET no se integran con las vistas basadas en MVC.
4.3. Plantilla de proyecto de MVC
El marco de MVC de ASP.NET incluye una plantilla de proyecto de Visual Studio que ayuda a
crear aplicaciones web estructuradas para admitir el modelo de MVC. Esta plantilla crea una
nueva aplicacin web de MVC que se configura para tener las carpetas, plantillas de elementos
y entradas de archivo de configuracin necesarias.
Al crear una nueva aplicacin web de MVC, Visual Studio ofrece la opcin de crear dos
proyectos al mismo tiempo. El primer proyecto es un proyecto web donde se implementa su
aplicacin. El segundo proyecto es un proyecto de prueba unitaria donde puede escribir las
pruebas unitarias para los componentes de MVC del primer proyecto.
5. Estructura de proyectos de MVC de aplicacin web

Cuando se crea un proyecto de MVC de aplicacin web ASP.NET, los componentes de MVC se
separan en funcin de las carpetas de proyecto que se muestran en la ilustracin siguiente:

De forma predeterminada, los proyectos de MVC incluyen las carpetas siguientes:
App_Data, que es el almacn fsico de los datos. Esta carpeta tiene el mismo rol que
en los sitios web ASP.NET que usan pginas de formularios Web Forms.
Content, que es la ubicacin recomendada para agregar los archivos de contenido,
como los archivos de hoja de estilos en cascada, imgenes, etc. En general, la carpeta
Content es para archivos estticos.
Controllers, que es la ubicacin recomendada para los controladores. El marco de
MVC requiere que los nombres de todos los controladores terminen con "Controller",
como HomeController, LoginController o ProductController.
Models, disponible para las clases que representan el modelo de aplicaciones de su
aplicacin web de MVC. Normalmente, esta carpeta incluye cdigo que define los
objetos y la lgica para la interaccin con el almacn de datos. Normalmente, los
objetos del modelo real estarn en bibliotecas de clases independientes. Sin embargo,
al crear una nueva aplicacin, podra colocar las clases aqu y, a continuacin, moverlas
a bibliotecas de clases independientes en un momento posterior del ciclo de
desarrollo.
Scripts, que es la ubicacin recomendada para los archivos de script que respaldan la
aplicacin. De forma predeterminada, esta carpeta contiene archivos de base AJAX de
ASP.NET y la biblioteca de jQuery.
Views, que es la ubicacin recomendada para las vistas. Las vistas usan archivos
ViewPage (.aspx), ViewUserControl (.ascx) y ViewMasterPage (.master), adems de
otros archivos relacionados con la representacin de vistas. La carpeta Views contiene
una carpeta para cada controlador; el nombre de la carpeta es el prefijo del nombre
del controlador. Por ejemplo, si tiene un controlador denominado HomeController, la
carpeta Views contiene una carpeta denominada Home. De forma predeterminada,

254
cuando el marco de MVC de ASP.NET carga una vista, busca un archivo ViewPage
(.aspx) con el nombre de la vista solicitada en la carpeta Views\nombreControlador.
De forma predeterminada, existe tambin una carpeta denominada Shared en la
carpeta Views, que no corresponde a ningn controlador. La carpeta Shared se usa
para las vistas que se comparten entre varios controladores. Por ejemplo, puede
colocar la pgina maestra de la aplicacin web en la carpeta Shared.
Adems de las carpetas enumeradas anteriormente, una aplicacin web de MVC usa el cdigo
del archivo Global.asax para establecer los valores predeterminados de enrutamiento global
de direcciones URL, y usa el archivo Web.config para configurar la aplicacin.
Laboratorio 14.1
Tema: Crear un proyecto ASP.Net MVC
Implementar una aplicacin la cual consuma el WebService de Microsoft VirtualEarth para

poder ver los mapas de distintos estados de USA.
Para crear un proyecto nuevo de MVC
1. En el men Archivo, haga clic en Nuevo proyecto.
Aparecer el cuadro de dilogo Nuevo proyecto.
2. En Tipos de proyecto, expanda Visual Basic o Visual C# y, a continuacin, haga clic en

Web.
3. En Plantillas instaladas de Visual Studio, seleccione Aplicacin web de ASP.NET MVC 2.
4. En el cuadro Nombre, escriba MvcApplicationLab13-1.
5. En el cuadro Ubicacin, escriba un nombre para la carpeta de proyecto.

6. Si desea que el nombre de la solucin difiera del nombre del proyecto, escriba un
nombre en el cuadro Nombre de la solucin.
7. Seleccione Crear directorio para la solucin.
8. Haga clic en Aceptar.
Aparecer el cuadro de dilogo Crear proyecto de prueba unitaria.
9. Seleccione S, crear un proyecto de prueba unitaria.
De forma predeterminada, el nombre del proyecto de prueba es el nombre del

proyecto de aplicacin y se le agrega "Tests". Sin embargo, puede cambiar el nombre
del proyecto de prueba. De forma predeterminada, el proyecto de prueba utilizar el
marco de pruebas unitarias de Visual Studio.
Se generan el nuevo proyecto de aplicacin MVC y un proyecto de prueba. (Si est

utilizando las ediciones Standard o Express de Visual Studio, no se crea el proyecto de
prueba.)
Examinar El Proyecto de MVC

256
La estructura de carpetas de un proyecto de MVC difiere de la de un proyecto de sitio web de

ASP.NET. El proyecto de MVC contiene las carpetas siguientes:
Content, para los archivos de compatibilidad del contenido. Esta carpeta contiene la
hoja de estilos en cascada (archivo .css) para la aplicacin.
Controllers, para los archivos de controlador. Esta carpeta contiene los controladores
de ejemplo de la aplicacin, que se denominan AccountController y HomeController.
La clase AccountController contiene la lgica de inicio de sesin para la aplicacin. La
clase HomeController contiene la lgica a la que se llama de forma predeterminada
cuando la aplicacin se inicia.
Models, para los archivos de modelo de datos como los archivos .dbml de LINQ to SQL
o los archivos de entidad de datos.
Scripts, para los archivos de script, como los compatibles con ASP.NET AJAX y jQuery.
Views, para los archivos de paginacin de vistas. Esta carpeta contiene tres
subcarpetas: Account, Home y Shared. La carpeta Account contiene vistas que se
utilizan como interfaz de usuario para el inicio de sesin y para cambiar las
contraseas. La carpeta Home contiene una vista Index (la pgina de inicio
predeterminada para la aplicacin) y una vista de pgina Acerca de. La carpeta Shared
contiene la vista de la pgina maestra para la aplicacin.
Si est utilizando una edicin de Visual Studio distinta de Standard o Express, tambin se
gener un proyecto de prueba. El proyecto de prueba tiene una carpeta Controllers que
contiene la clase HomeControllerTest. Esta clase tiene una prueba unitaria para cada mtodo
de accin HomeController (Index y About).
El proyecto de MVC recin generado es una aplicacin completa que puede compilar y
ejecutar sin cambios. La ilustracin siguiente muestra cmo apareca la aplicacin al ejecutarla
en un explorador.

El proyecto de prueba unitaria tambin est listo para compilar y ejecutar. Para este
laboratorio, agregar un controlador con un mtodo de accin y una vista y agregar una
prueba unitaria para el mtodo de accin.
Agregar un controlador
Ahora agregar un controlador que contiene la lgica para descargar mapas urbanos del
servicio Web Microsoft Virtual Earth.
Para agregar un controlador al proyecto de MVC
1. En el Explorador de soluciones, haga clic con el botn secundario en la carpeta

Controllers, haga clic en Agregar y, a continuacin, haga clic en Controlador.
Aparece el cuadro de dilogo Agregar controlador.
2. En el cuadro Nombre, escriba MapsController.
El marco de ASP.NET MVC exige que los nombres de controlador acaben en "Controller",
como HomeController, GameController o MapsController.
3. Desactive la casilla Agregar mtodos de accin para los escenarios Create, Update y
Details.

258
4. Haga clic en Agregar.
Visual Studio agrega la clase MapsController al proyecto y lo abre en el editor.
Crear un cdigo auxiliar de mtodo de accin
Para aplicar tcnicas de desarrollo basado en pruebas (TDD) a este proyecto debe escribir la
prueba unitaria para un mtodo de accin antes de escribir el propio mtodo de accin. Sin
embargo, si desea que su prueba unitaria se compile, debe tener un cdigo auxiliar para el
mtodo de accin planeado, que en este laboratorio es ViewMaps.
Para agregar un cdigo auxiliar de mtodo de accin
1. Abra o cambie a la clase MapsController.

2. Reemplace el mtodo de accin Index con el cdigo siguiente para crear el cdigo
auxiliar de mtodo de accin ViewMaps.
Function ViewMaps()
' Add action logic here
Throw New NotImplementedException()
End Function
Agregar pruebas unitarias para mtodos de accin
A continuacin agregar una clase de prueba de controlador al proyecto de pruebas. En la

clase, agregar una prueba unitaria para el mtodo de accin ViewMaps. Se producir un error
en la prueba unitaria, porque el cdigo auxiliar de mtodo de accin ViewMaps produce una
excepcin. Al finalizar el mtodo de accin posteriormente en este laboratorio, la prueba se
realizar correctamente.
Para agregar pruebas unitarias para los mtodos de accin
1. En el proyecto de pruebas, haga clic con el botn secundario del mouse en la carpeta
Controllers, haga clic en Agregar y despus haga clic en Clase.
2. En el cuadro de texto Nombre, escriba MapsControllerTest.
3. Haga clic en Agregar. Visual Studio agrega la clase MapsControllerTest al proyecto de
prueba.
4. Abra la clase MapsControllerTest y escriba el cdigo que se muestra a continuacin:
Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Web.Mvc
Imports Microsoft.VisualStudio.TestTools.UnitTesting
Imports MvcApplicationLab13-1
<TestClass()> Public Class MapsControllerTest

Private testContextInstance As TestContext
'Gets or sets the test context which provides
'information about and functionality for the current test run.
Public Property TestContext() As TestContext
Get
Return testContextInstance

End Get
Set(ByVal value As TestContext)
testContextInstance = value
End Set
End Property
<TestMethod()> Public Sub ViewMaps()

' Arrange
Dim controller As MapsController = New MapsController()
' Act
Dim result As ViewResult = controller.ViewMaps()
' Assert
Assert.IsNotNull(result)
End Sub
End Class
Este cdigo define las pruebas unitarias para el mtodo de accin que terminar despus.
5. En Explorador de soluciones, seleccione el proyecto de prueba y presione CTRL+F5

para ejecutar las pruebas unitarias.
La prueba produce un error, porque el mtodo de accin ViewMaps produce una excepcin
actualmente.
Agregar el cdigo al mtodo de accin
Ahora agregar el cdigo a la clase MapsController para el mtodo de accin ViewMaps con
objeto de representar la vista Maps.
Para agregar el cdigo al mtodo de accin
1. Abra la clase MapsController y reemplace el cdigo auxiliar de mtodo de accin

ViewMaps con el cdigo siguiente para representar la vista Maps:
Function ViewMaps() As ActionResult

Return View()
End Function
2. Guarde y cierre el archivo.
Agregar una vista
Despus agregar una vista Maps. Para mantener las vistas organizadas, agregar primero una
carpeta Maps bajo la carpeta Views.
Para agregar una vista de contenido de pgina al proyecto de MVC
3. Abra la clase MapsController, haga clic con el botn secundario del mouse dentro del
mtodo de accin ViewMaps y, a continuacin, haga clic en Agregar vista.

260
Se mostrar el cuadro de dilogo Agregar vista.
4. En el cuadro Nombre de vista, escriba ViewMaps.

5. Desactive las casillas Crear una vista parcial (.ascx) y Crear una vista fuertemente
tipada.
6. Active la casilla Seleccionar la pgina maestra y establezca la pgina maestra en
~/Views/Shared/Site.Master.
7. Establezca ContentPlaceHolder ID en "MainContent".
8. Haga clic en Agregar.
La nueva vista se agrega al proyecto en la carpeta Maps.
Agregar contenido a la vista
A continuacin, agregar contenido a la nueva vista.
Para agregar contenido a la vista
1. Abra ViewMaps.aspx y agregue el contenido siguiente dentro del elemento Content:
<h2>My City Maps</h2>

Select map:
<select onclick="GetMap(value);">
<option value="Seattle">Seattle, WA</option>
<option value="LasVegas">Las Vegas, NV</option>

<option value="SaltLake">Salt Lake City, UT</option>

<option value="Dallas">Dallas, TX</option>
<option value="Chicago">Chicago, IL</option>
<option value="NewYork">New York, NY</option>
<option value="Rio">Rio de Janeiro, Brazil</option>
<option value="Paris">Paris, France</option>
<option value="Naples">Naples, Italy</option>
<option value="Keta">Keta, Ghana</option>
<option value="Beijing">Beijing, China</option>
<option value="Sydney">Sydney, Australia</option>
</select>
<br />
<br />
<div id='earthMap' style="position:relative; width:400px; height:400px;">
</div>
<script charset="UTF-8" type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-
us">
</script>
<script type="text/javascript">
var map = null;
var mapID = '';
function GetMap(mapID)
{
switch (mapID)
{
case 'Seattle':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'i', true);
break;
case 'LasVegas':
map.LoadMap(new VELatLong(36.17, -115.14), 10 ,'i' ,true);
break;
case 'SaltLake':
break;
case 'Dallas':
break;
case 'Chicago':
break;
case 'NewYork':
map.LoadMap(new VELatLong(40.7, -74), 10 ,'i' ,true);
break;
case 'Rio':
map.LoadMap(new VELatLong(-22.91, -43.18), 10 ,'i' ,true);
break;
case 'Paris':
map.LoadMap(new VELatLong(48.87, 2.33), 10 ,'i' ,true);

262
break;
case 'Naples':
break;
case 'Keta':
break;
case 'Beijing':
break;
case 'Sydney':
map.LoadMap(new VELatLong(-33.86, 151.21), 10 ,'i' ,true);
}
}
</script>
Este marcado define una lista desplegable para seleccionar un mapa y la lgica de JavaScript
para recuperar el mapa seleccionado del servicio Web Microsoft Virtual Earth.
Agregar una pestaa al men de pgina maestra
Agregar ahora un elemento al men de pgina maestra que llama al mtodo de accin
ViewMaps.
Para agregar una pestaa al men de pgina maestra
1. En la carpeta Shared, abra el archivo Site.master y busque la lista no ordenada

(elemento ul) en el elemento div cuyo identificador es "menucontainer".
2. Agregue el cdigo siguiente a la lista entre el ndice y las pestaas About Us:
<li><%= Html.ActionLink("My City Maps", "ViewMaps", "Maps")%></li>
El mtodo ActionLink es un mtodo auxiliar con vnculos a un mtodo de accin. Toma

los parmetros siguientes: el texto del vnculo, el nombre del mtodo de accin y el
nombre del controlador.
Probar la aplicacin MVC
Ya puede probar la aplicacin.
Para probar la aplicacin MVC
1. En el men Prueba, haga clic sucesivamente en Ejecutar, Todas las pruebas de la

solucin.

Los resultados se muestran en la ventana Resultados de pruebas. Esta vez las pruebas
se realizan correctamente.
2. En Explorador de soluciones, seleccione el proyecto de tutorial y presione CTRL+F5

para ejecutar la aplicacin.
Se muestra la pgina Index.aspx, que incluye las pestaas que estn definidas en la
pgina maestra.
3. Haga clic en la pestaa My City Maps.
Se muestra la pgina My City Maps. Seleccione cualquier mapa para verlo en pantalla.

264
Laboratorio 14.2
Tema: Agregar scripting de ASP.NET AJAX a un proyecto de MVC
ASP.NET AJAX habilita una aplicacin web para recuperar los datos del servidor de forma
asincrnica y actualizar partes de la pgina existente. Esto mejora la experiencia del usuario al
hacer que la aplicacin web sea ms sensible.
Este laboratorio muestra cmo comenzar a agregar la funcionalidad de ASP.NET AJAX a una
aplicacin ASP.NET MVC.
Crear un proyecto de MVC nuevo
1. En el men Archivo, haga clic en Nuevo proyecto.

2. En Tipos de proyecto del cuadro de dilogo Nuevo proyecto, expanda Visual Basic, a
continuacin, haga clic en Web.
3. En Plantillas instaladas de Visual Studio, seleccione aplicacin web ASP.NET MVC.
4. En el cuadro Nombre, escriba MvcAjaxApplication.
5. En el cuadro Ubicacin, escriba el nombre de la carpeta de proyecto.
6. Seleccione Crear directorio para la solucin.
8. En el cuadro de dilogo Crear proyecto de prueba, seleccione No, no cree un proyecto
de prueba unitaria.
Se genera el nuevo proyecto de aplicacin MVC.
Hacer referencia a las bibliotecas de scripts de ASP.NET AJAX
La compatibilidad con la funcionalidad del cliente de ASP.NET AJAX se encuentra en dos

bibliotecas de scripts: MicrosoftAjax.js y MicrosoftMvcAjax.js. La versin de lanzamiento y la
versin de depuracin de estos scripts se encuentran en la carpeta Scripts del proyecto. Para
poder tener acceso a estas bibliotecas en el script de cliente, debe agregar las referencias de la
biblioteca a las vistas de MVC en el proyecto actual.
Para hacer referencia a las bibliotecas de scripts de ASP.NET AJAX
1. En el Explorador de soluciones, expanda la carpeta Views y, a continuacin, expanda la

carpeta Shared.
2. Haga doble clic en el archivo Site.Master para abrirlo.
3. Agregue el siguiente marcado al final del elemento head:
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"

type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>"
type="text/javascript"></script>

Tambin puede arrastrar estos archivos desde el Explorador de soluciones a la vista

Site.Master y este cdigo se agregar automticamente.
Agregar mtodos de accin a la clase HomeController
Luego agregar dos mtodos de accin a los que se puede llamar de forma asincrnica desde
el script de cliente. El mtodo GetStatus sencillamente devuelve un estado de "OK" y la hora
actual. El mtodo UpdateForm recibe la entrada de un formulario HTML y devuelve un
mensaje que incluye la hora actual.
Para agregar mtodos de accin a la clase HomeController
1. En el Explorador de soluciones, expanda la carpeta Controllers y, a continuacin, haga

doble clic en la clase HomeController para abrirla.
2. Agregue el siguiente cdigo despus del mtodo About.
Public Function GetStatus() As String

Return "Status OK at " + DateTime.Now.ToLongTimeString()
End Function
Public Function UpdateForm(ByVal textBox1 As String) As String

If textBox1 <> "Enter text" Then
Return "You entered: """ + textBox1.ToString() + """ at " + _
DateTime.Now.ToLongTimeString()
End If
Return [String].Empty
End Function
Volver a definir la pgina de ndice
Por ltimo, reemplazar el contenido de la pgina Index.aspx, que se agrega automticamente

al proyecto de Visual Studio para ASP.NET MVC. La nueva pgina Index.aspx muestra la hora a
la que se representa la pgina, un mensaje del estado que tiene un vnculo para actualizar el
mensaje de forma asincrnica y un formulario para enviar una cadena de texto.
Para volver a definir la pgina de ndice
1. En el Explorador de soluciones, expanda la carpeta Views, expanda la carpeta Home y,

a continuacin, abra la vista Index.
2. Reemplace el contenido del control Content con el marcado siguiente:
<h2><%= Html.Encode(ViewData("Message")) %></h2>

<p>
Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
</p>
<span id="status">No Status</span>
<br />
<%=Ajax.ActionLink("Update Status", "GetStatus", New AjaxOptions With
{.UpdateTargetId = "status"})%>
<br /><br />
<% Using (Ajax.BeginForm("UpdateForm", New AjaxOptions With
{.UpdateTargetId = "textEntered"}))%>

266
<%= Html.TextBox("textBox1","Enter text")%>

<input type="submit" value="Submit"/>
<br />
<span id="textEntered">Nothing Entered</span>
<% End Using%>
Probar la aplicacin
Ahora puede ejecutar la aplicacin y ver cmo funciona.
Para ejecutar la aplicacin MVC
1. Presione CTRL+F5.
La pgina muestra la hora en que se represent.
2. Haga clic en el vnculo Estado de la actualizacin.
El mensaje del estado se actualiza con la hora de la actualizacin. Observe que slo se
actualiz el mensaje de estado.
3. En el cuadro de texto, escriba el texto y, a continuacin, haga clic en el botn Enviar.
Un mensaje muestra el texto que escribi y la hora a la que lo escribi. Una vez ms,
observe que slo se proces el formulario.

Autoevaluacin
1. Defina qu es MVC
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
2. Defina qu son los modelos

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
3. Defina qu son los controladores

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
4. Defina qu son las vistas

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
5. Defina la estructura de una aplicacin en MVC

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
6. Cules son las ventajas de desarrollar en MVC?

-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

268
Resumen
El modelo Model-View-Controller (MVC) es un principio de diseo arquitectnico que separa

los componentes de una aplicacin web. Esta separacin ofrece ms control sobre las partes
individuales de la aplicacin, lo cual permite desarrollarlas, modificarlas y probarlas ms
fcilmente.
ASP.NET MVC forma parte del marco de trabajo ASP.NET. Desarrollar una aplicacin ASP.NET
MVC es una alternativa al desarrollo de pginas de formularios Web Forms de ASP.NET; no
reemplaza el modelo de formularios Web Forms.
Si ha instalado Visual Studio 2010, ASP.NET MVC 2 ya est instalado en su equipo.
El marco de MVC incluye los componentes siguientes:
Modelos. Los objetos de modelo son las partes de la aplicacin que implementan la
lgica del dominio de datos de la aplicacin. A menudo, los objetos de modelo
recuperan y almacenan el estado del modelo en una base de datos. Por ejemplo, un
objeto Product podra recuperar informacin de una base de datos, trabajar con ella y,
a continuacin, escribir la informacin actualizada en una tabla Productos de una base
de datos de SQL Server. En las aplicaciones pequeas, el modelo es a menudo una
separacin conceptual en lugar de fsica. Por ejemplo, si la aplicacin solo lee un
conjunto de datos y lo enva a la vista, la aplicacin no tiene un nivel de modelo fsico y
las clases asociadas. En ese caso, el conjunto de datos asume el rol de un objeto de
modelo.
Vistas. Las vistas son los componentes que muestra la interfaz de usuario de la
aplicacin. Normalmente, esta interfaz de usuario se crea a partir de los datos de
modelo. Un ejemplo sera una vista de edicin de una tabla Productos que muestra
cuadros de texto, listas desplegables y casillas basndose en el estado actual de un
objeto Product.
Controladores. Los controladores son los componentes que controlan la interaccin
del usuario, trabajan con el modelo y por ltimo seleccionan una vista para
representar la interfaz de usuario. En una aplicacin MVC, la vista solo muestra
informacin; el controlador administra y responde a los datos proporcionados por el
usuario y su interaccin. Por ejemplo, el controlador administra los valores de la
cadena de consulta y pasa estos valores al modelo, que a su vez podra utilizarlos para
consultar la base de datos.
Pginas de consulta
http://msdn.microsoft.com/es-es/library/dd394709.aspx
Pgina referente a Model View Controller (MVC) de ASP.NET
http://msdn.microsoft.com/es-es/library/dd410269.aspx
Pgina referente a Controladores y mtodos de accin en aplicaciones MVC

Manual 2014-I 05 Desarrollo para Entorno Web (0778)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual 2014-I 05 Desarrollo para Entorno Web (0778)

Uploaded by

Copyright:

Available Formats

DESARROLLO

CARRERAS PROFESIONALES CIBERTEC

CIBERTEC CARRERAS PROFESIONALES

CARRERAS PROFESIONALES CIBERTEC

El curso de Desarrollo para entorno web pertenece a la Escuela de Tecnologa de

El curso es eminentemente prctico: consiste en diseo y programacin de aplicaciones

Este manual reviste importancia para una capacitacin en conocimientos generales en el

CIBERTEC CARRERAS PROFESIONALES

Desarrollo para Entorno Web

Diseo de Acceso a Manejo de ASP.Net

Introduccin Diseo Control Acceso Manejo Manejo Manejo AJAX

CARRERAS PROFESIONALES CIBERTEC

INTRODUCCIN A ASP.NET 4.0

Tipos de web site en Visual Studio 2010

Los alumnos definirn el tipo de aplicacin web.

CIBERTEC CARRERAS PROFESIONALES

2. TIPOS DE SITIOS WEB EN VISUAL STUDIO 2010

2.1. Sitios web de IIS locales

CARRERAS PROFESIONALES CIBERTEC

2.2. Sitios Web del sistema de archivos

2.3. Sitios web implementados en FTP

2.4. Sitios web remotos

CIBERTEC CARRERAS PROFESIONALES

3. CREACIN DE UN NUEVO SITIO WEB

Inicio de sitio web:

Seleccione la plantilla sitio web ASP.NET

CARRERAS PROFESIONALES CIBERTEC

Veamos el contenido del nuevo sitio web:

CIBERTEC CARRERAS PROFESIONALES

CARRERAS PROFESIONALES CIBERTEC

Explorando nuestro sitio web:

d. Register.aspx.- Diseado para que se puedan registrar nuevos usuarios.

CIBERTEC CARRERAS PROFESIONALES

2. Scripts.- En esta carpeta, se encuentran algunos cdigos en JavaScript para aumentar

CARRERAS PROFESIONALES CIBERTEC

Este control de validacin es el ms fcil de entender. Asegura que el usuario no omita un

CIBERTEC CARRERAS PROFESIONALES

Type: define el tipo de dato de los datos que se van a comparar.

CARRERAS PROFESIONALES CIBERTEC

El control de validacin de rango se asegura que la entrada en un dato se encuentre dentro de

CIBERTEC CARRERAS PROFESIONALES

Colocar el siguiente cdigo en la Vista de cdigo en HTML:

Al ejecutar, mostrar lo siguiente:

CARRERAS PROFESIONALES CIBERTEC

Del lado del Servidor sera el siguiente cdigo:

Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As

CIBERTEC CARRERAS PROFESIONALES

Este control de validacin compara el patrn de caracteres, dgitos y smbolos, introducidos

Construccin de una expresin regular.

La expresin regular quedara de la siguiente manera:

CARRERAS PROFESIONALES CIBERTEC

\d{3} Indica que debe de introducirse un nmero entero de tres dgitos

Veamos los siguientes ejemplos de entrada:

CIBERTEC CARRERAS PROFESIONALES

5. Tcnicas de Navegacin entre Web Forms en ASP .Net

5.2. Navegacin con el Control HiperLink

5.3. Utilizando el Mtodo Response.Redirect

Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As

Observacin: El mtodo sobrecargado Redirect(URL , Boolean) tiene un parmetro boolean

5.4. Utilizando el mtodo Server.Transfer

Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As

CARRERAS PROFESIONALES CIBERTEC

La versin sobrecargada de este mtodo incorpora un valor booleano para especificar si se