DESARROLLO

PARA ENTORNO
WEB
2

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 3

ÍNDICE Página

Presentación 5
Red de contenidos 6
Unidad de aprendizaje 1
1.1 Tema 1 : Introducción ASP.Net 4.0 8
1.2 Tema 2 : Diseño usando Master Pages y Administación de Estados 36
1.3 Tema 3 : Creación de Controles de Usuario 58
Unidad de aprendizaje 2
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
Unidad de aprendizaje 3
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 Imágenes en ASP.Net y AJAX 229
Unidad de aprendizaje 4
4.1 Tema 12 : ASP.Net MVC (Modelo – Vista – Controlador) 247

CIBERTEC CARRERAS PROFESIONALES
4

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 5

PRESENTACIÓN

Visual Studio 2010 y su plataforma .NET FrameWork 4.0 permite implementar desarrollos
de software de manera rápida y robusta. ASP .NET admite crear aplicaciones en tiempo
mínimo bajo una plataforma de librerías del .NET Framework. De esta manera, la
aplicación puede desarrollarse para entornos web y, luego, tener la posibilidad de emplear
cualquier dispositivo como cliente (teléfonos, palm, etc.) con muy poca modificación, sino
es nula.

El curso de Desarrollo para entorno web pertenece a la Escuela de Tecnología de
Información y se dicta en las carreras de Tecnología de la institución. Este curso brinda un
conjunto de herramientas de programación para trabajar en aplicaciones web, en función
al diseño de páginas web y con un origen de datos que permita al alumno realizar, en
forma eficiente, operaciones de consulta y actualización de datos bajo el entorno web.

El manual para este curso ha sido diseñado 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 prácticos que deberá desarrollar en cada sesión, los que le
permitirá reforzar lo aprendido en la clase.

El curso es eminentemente práctico: consiste en diseño y programación de aplicaciones
web con base de datos utilizando ADO .NET. La primera parte de este manual enseña a
familiarizarse con el entorno de desarrollo de una aplicación web: diseño de una página,
uso de temas, master page; manejo de controles del lado del cliente, del servidor, manejo
de estado de la página, acceso a datos y controles enlazados a los datos que permiten
realizar operaciones de consulta y actualización mediante ejemplos didácticos. Luego, se
desarrollará el tema de Seguridad, definiendo los miembros, roles y perfiles dentro de la
aplicación. A continuación, se va a implementar a la aplicación web la tecnología AJAX y el
desarrollo de una aplicación móvil con acceso a datos.

Este manual reviste importancia para una capacitación en conocimientos generales en el
manejo de aplicaciones web, utilizando la tecnología de punta que se implementa
actualmente en el mercado.

CIBERTEC CARRERAS PROFESIONALES
6

REDDECONTENIDOS

Desarrollo para Entorno Web

Diseño de Acceso a Manejo de ASP.Net
un sitio web datos y AJAX e MVC
seguridad imágenes

Introducción Diseño 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 imágene (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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 7

UNIDAD DE
APRENDIZAJE

1

INTRODUCCIÓN A ASP.NET 4.0
LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos, utilizando las técnicas explicadas en clase y los controles
que proporciona el Framework 4.0, construyen el diseño de páginas web para personalizar el
diseño y apariencia de una página, además de validar el ingreso de datos por parte de los
usuarios. También, navegan entre distintas páginas del sitio web enviando información entre
ellas.

TEMARIO

 Tipos de web site en Visual Studio 2010
 Desarrollo de un sitio web
 Manejo de controles de validación: RequiredFieldValidator, CompareValidator,
RegularExpressionValidator, CustomValidator, RangeValidator.
 Técnicas de navegación entre páginas: Clase Response, Server y QueryString.

ACTIVIDADES PROPUESTAS

• Los alumnos definirán el tipo de aplicación web.
• Los alumnos diseñarán una aplicación Web utilizando controles de servidor.
• Los alumnos programarán una página Web en el lado del cliente y del servidor.
• Los alumnos usarán los controles de validación para validar el ingreso de datos por
parte del usuario.
• Los alumnos manejarán el redireccionamiento entre las página ASP.NET.
• Los alumnos manejarán los errores de una aplicación web.

CIBERTEC CARRERAS PROFESIONALES
8

1. HISTORIA DE ASP.NET
La primera versión de ASP.Net, la 1.0, apareció en el mercado en enero del 2002, junto con la
edición inicial de Visual Studio para la plataforma .Net. Antes de este lanzamiento oficial, hubo
diversas Betas en las que aún la tecnología llevaba el nombre de ASP+. Estas estuvieron
disponibles para experimentar desde mediados del 2000, por lo que, en realidad, la plataforma
tiene mucho más recorrido del que se desprende de las fechas oficiales.
La idea era sustituir al ASP 3.0 clásico. 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 orientación a eventos y a objetos, uso de lenguajes
compilados, independencia automática del navegador y productividad, mucha productividad.
Con ASP.Net, se empezaron a borrar los límites 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
también 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, también, el uso de diversos dispositivos de tercera
generación 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 páginas 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,
también, la configuración de IIS adecuada para que IIS reconozca el sitio web como una
aplicación.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 9

Ventajas:
• El sitio es accesible desde otros equipos.
• Puede probar con características de IIS, como autenticación basada en HTTP, grupos de
aplicaciones y filtros ISAPI.
Inconvenientes:
• Debe tener derechos administrativos para crear o depurar un sitio web de IIS.
• Sólo 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
través de un recurso compartido de red. No se requiere que ejecute IIS en su equipo.
Ventajas:
• Sólo 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 características de IIS, como
autenticación 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 están 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 raíz virtual de IIS señala al directorio FTP,
puede ejecutar también las páginas 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 sólo 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 través 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 páginas 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 páginas, é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 configuración para depurar un sitio web remoto puede ser compleja.
• Sólo un desarrollador a la vez puede depurar el sitio web remoto. Se suspenden todas las
demás solicitudes, mientras el desarrollador está recorriendo el código.

CIBERTEC CARRERAS PROFESIONALES
10

3. CREACIÓN DE UN NUEVO SITIO WEB

Inicio de sitio web:

Seleccione la plantilla sitio web ASP.NET

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 11

Veamos el contenido del nuevo sitio web:

Vistas disponibles

Vista de diseño

Es la vista mediante la cual el usuario puede diseñar sus WebForms. Se conoce también 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 diseño de
las páginas web.

Vista de código

Esta es la vista en la cual conforme el usuario crea el diseño se puede ver todo el código en
HTML que se va generando. Incluso, las personas que dominan el lenguaje HTML pueden
incluir sus códigos en esta vista. Para aquellos que no conocen HTML no será problema, ya que
desde la vista de diseño, se genera todo el código. La sugerencia es que se conozca, por lo

CIBERTEC CARRERAS PROFESIONALES
12

menos, lo básico de HTML para que pueda mejorar la presentación de sus páginas; además, de
agregarle cierta funcionalidad del lado del cliente; por ejemplo, utilizando Javascript.

Vista de dividir

Esta es solo la combinación de la vista de diseño con la de código para que el usuario pueda
diseñar y al mismo tiempo ver el código que se va generando.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 13

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 continuación, se mostrarán los siguientes WebForms:
a. ChangePassword.aspx.- Diseñado para que el usuario que ingrese al sitio web
tenga la facilidad de poder cambiar su password en cualquier momento.
b. ChangePasswordSuccess.aspx.- Diseñado para que el usuario pueda ver la
confirmación de que su password fue cambiado con éxito.
c. Login.aspx.- Diseñado 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.- Diseñado para que se puedan registrar nuevos usuarios.

CIBERTEC CARRERAS PROFESIONALES
14

2. Scripts.- En esta carpeta, se encuentran algunos códigos en JavaScript para aumentar
ciertas funcionalidades a nuestro sitio web que iremos viendo más adelante.
3. Styles.- En esta carpeta, se encuentran las famosas hojas de estilo en cascada (css)
para poder crear plantillas de diseños 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 información de nuestro sitio web,
como información de contacto, sedes principales, características de mi sitio web, entre
otras.
5. Default.aspx.- Este es el WebForm principal de nuestro sitio web. Es conocido también
como el WebForm “Inicio” o “Home”.
6. Global.asax.- Este archivo es conocido como “Clase de aplicación Global” y entre las
principales utilidades que tiene es el poder definir objetos de sesión y objetos de
aplicación.
7. Site.master.- Este archivo es lo que nosotros llamamos una “Página Maestra” o en
inglés Master Page. Su objetivo es crear un diseño 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 configuración de nuestro sitio web. En ese archivo, se
puede definir varias secciones que se utilizarán luego en el Sitio Web, por mencionar
una de esas secciones es la famosa ConnectionStrings, en la cual se pueden definir
distintas cadenas de conexión para diferentes orígenes de datos.

4. Controles de Validación

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 15

4.1. RequiredFieldValidator

Este control de validación es el más fácil 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 validación.
ErrorMessage: indica el mensaje de error que se mostrará en el caso que no se cumpla la regla
de validación.

Ejemplo:
En el siguiente WebForm, debe ingresar su nombre y apellido como campos obligatorios; si no
los ingresa, se mostrarán los mensajes de Errory si se llenan los datos, mostrará el éxito de la
validación.

4.2. CompareValidator

El control de validación de comparación acepta dos controles como entrada para comparar el
valor de cada uno. Si los dos controles no satisfacen la condición que se especificó, el control
CompareValidator despliega un mensaje de error. Este control de validación también permite
comparar el valor de un control contra un valor fijo.

Propiedades:
ControlToValidate: indica a que control se le asignará el control de validación.
ErrorMessage: indica el mensaje de error que se mostrará en el caso que no se cumpla la regla
de validación.
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 comparación es contra el contenido de otro
control o ValueToCompare si la comparación es contra un valor estático, pero no se usan
ambas propiedades solo se escoge una de las dos.
Operator: define el operador que se usará en la comparación.

CIBERTEC CARRERAS PROFESIONALES
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 validación.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 17

4.3. RangeValidator

El control de validación de rango se asegura que la entrada en un dato se encuentre dentro de
un rango de valores.

Propiedades:
ControlToValidate: indica a que control se le asignará el control de validación.
ErrorMessage: indica el mensaje de error que se mostrará en el caso que no se cumpla la regla
de validación.
MinimumValue: establece el valor inicial o mínimo del rango de valores.
MaximumValue: establece el valor final o máximo 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 mostrarán los mensajes de Error. Si los dos datos que se ingresan están dentro de
los rangos de valores, se mostrará el éxito de la validación.

4.4. CustomValidator

Este control permite escribir código para crear la expresión de validación, es decir, la lógica de
validación puede ser personalizada para verificar la entrada del usuario contra una variable,
formula o entrada de una segunda fuente. El control de validación CustomValidator es usado, a
menudo, para situaciones, tal y como la verificación de un password, en el cual la entrada del
usuario es comparada con un código 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 validación. En los otros controles de validación ASP.net, crea los scripts de
validación del lado del cliente y del servidor, en este control el programador debe escribir
ambos scripts.

Propiedades:
ControlToValidate: indica a que control se le asignará el control de validación.
ErrorMessage: indica el mensaje de error que se mostrará en el caso que no se cumpla la regla
de validación.

CIBERTEC CARRERAS PROFESIONALES
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 número
divisible entre 2. Así, entonces, se obtendrá un TextBox llamado txtNumero y un Button. Para
validar el número, se hará primero la validación del lado del cliente y, luego, del lado del
servidor para comprobar ambas validaciones.

Colocar el siguiente código en la Vista de código 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:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 19

Del lado del Servidor sería el siguiente código:

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
validación, 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 validación haya sido correcta recién llegaba al servidor.
En este caso, como la validación fue desde el servidor, primero llega a éste y después hace la
validación. Habría que ver una forma de validar que el mensaje de éxito no se muestre.

4.5. RegularExpressionValidator

Este control de validación verifica que la entrada cumpla con un patrón que ha sido definido
por una expresión regular. Este control permite verificar secuencias de caracteres predecibles,
tales como direcciones de correo electrónico, direcciones, números de teléfonos y códigos
postales. Visual Studio.net proporciona patrones predefinidos para expresiones comunes, tales
como números telefónicos.

CIBERTEC CARRERAS PROFESIONALES
20

Este control de validación compara el patrón de caracteres, dígitos y símbolos, introducidos
por el usuario con uno o más patrones en el control.

Propiedades:
ControlToValidate: indica a que control se le asignará el control de validación.
ErrorMessage: indica el mensaje de error que se mostrará en el caso que no se cumpla la regla
de validación.
ValidationExpression: sirve para ingresar la expresión regular o patrón, también, existen
patrones ya definidos como las siguientes:

Construcción de una expresión regular.
Para construir una expresión regular, se debe de utilizar un conjunto de caracteres que son
mostrados a continuación:

Carácter definición
a Debe utilizar la letra a en minúscula, 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 número 1, cualquier número 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
| Separación de múltiples patrones válidos
\ El siguiente carácter debe ser un carácter comando
\w Debe tener un carácter
\d Debe tener un número
\. Debe tener un punto

Con estos caracteres, se puede empezar a elaborar los patrones, como ejemplo sencillo se
puede hacer la validación de un número de teléfono con código de área que esté entre
paréntesis el código de área es de tres dígitos, puede usarse después un guion y después debe
introducirse un número telefónico de 7 dígitos.

La expresión regular quedaría de la siguiente manera:
\(\d{3}\)-?(\d{7})

Carácter definición
\( Indica que se debe de usar un paréntesis que abre

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 21

\d{3} Indica que debe de introducirse un número entero de tres dígitos
-? Indica que puede usarse un guion
\d{7} Indica que debe introducirse un número de 7dígitos

Veamos los siguientes ejemplos de entrada:

Entrada Descripción
(12)1234567 Es incorrecto, porque el código de área solo tiene 2 elementos
(123)123456 Es incorrecto, porque el número telefónico tiene 6 elementos
(123)-123456 Es incorrecto, porque el número telefónico 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 dirección de correo electrónico, mostrará el
mensaje de error. En caso que el email tenga el formato correcto, mostrará el éxito de la
validación.

4.6. ValidationSummary

Este control muestra un resumen de todos los errores de validación que han aparecido en un
formulario; presenta el texto que ha sido introducido en la propiedad ErrorMessage de los
controles de validación.
Estos mensajes los puede desplegar en forma de frase o en forma de lista con o sin viñetas;
esto dependiendo del valor en el que se encuentre la propiedad DisplayMode del control
ValidationSummary

CIBERTEC CARRERAS PROFESIONALES
22

5. Técnicas de Navegación entre Web Forms en ASP .Net

5.1. Introducción
Un aspecto importante en la construcción de aplicaciones web es la navegación entre
páginas y el uso de links, que en conjunto unen las páginas de nuestra aplicación haciendo
de ésta un todo. Si esto no fuera así, se tendrían páginas aisladas que no se podrían
comunicar entre sí. En este artículo, se revisarán distintas técnicas de navegación, tanto
con código a nivel del servidor como del cliente. Conocer estas técnicas será de gran
utilidad en el momento de diseñar una aplicación Web.

5.2. Navegación con el Control HiperLink
Esta técnica permite navegar hasta otra página HTML, o ASPX. Este control no proporciona
ningún evento del lado del servidor. Cuando el usuario genera el evento click, del lado del
cliente, en el control, la navegación se realiza inmediatamente. La dirección de destino se
especifica en la propiedad NavigateURL del control. Si se quiere interceptar un evento click
desde el servidor para controlar la navegación desde código, se puede utilizar un control de
servidor Button, LinkButton o ImageButton más el objeto Response.

5.3. Utilizando el Método Response.Redirect

Permite navegar hasta otra página, pero por código. Es equivalente a la navegación con el
control HiperLink. Para utilizar este método, simplemente, introduce el siguiente código 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

Observación: El método sobrecargado Redirect(URL , Boolean) tiene un parámetro boolean
que especifica si se termina la ejecución de la página actual. Si se especifica True o si se utiliza
el método Redirect especificando solamente la URL de destino, se producirá una excepción del
tipo ThreadAbortException, que indica el término de la ejecución de la página que origina la
navegación. Se debe considerar este comentario cuando se tiene sentencias Redirect dentro
de bloques Try, ya que la excepción producida por el método Redirect puede no ser esperada
en el flujo de la aplicación.

5.4. Utilizando el método Server.Transfer

El método Server.Transfer sólo sirve para navegar entre páginas ASPX. Este método termina la
ejecución del Web Form que origina la llamada y navega hasta la página ASPX de destino. Si se
considera el comentario anterior, la utilización de este método siempre va a generar una
excepción del tipo ThreadAbortException, puesto que termina la ejecución de la página de
origen. La sintaxis es la misma que para el método Redirect:

Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As
System.Web.UI.ImageClickEventArgs)
Handles ImageButton1.Click
Server.Transfer("NuevaPagina.aspx")
End Sub

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 23

La versión sobrecargada de este método incorpora un valor booleano para especificar si se
conservan las colecciones QueryString y Form luego del término de la ejecución de la página
actual. Esto permite que podamos acceder a los valores del ViewState de la página de origen
desde la página de destino. Observe el siguiente ejemplo:

'PaginaOrigen.aspx
Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As
System.Web.UI.ImageClickEventArgs)
Handles ImageButton1.Click
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

Observación: debe introducirse la directiva EnableViewStateMac=”false” en la página de
origen para deshabilitar el hashing del ViewState, de lo contrario, se producirá una excepción.
La página de origen contiene un control de servidor TextBox llamado Textbox1.

5.5. Utilizando el método de script del lado del cliente Window.Open

Esta técnica permite navegar a páginas HTML ó ASPX. Como se trata de un script del lado del
cliente, a través de este método es posible controlar el aspecto y otras características 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 características, ya que este objeto de Internet Explorer sólo existe en el lado
del cliente (DOM).

Hay varios métodos para llamar a un script del lado del cliente desde código del lado del
servidor. En esta ocasión, se abordará un método para agregar código de cliente en la página
HTML utilizando RegisterStartupScript. Este método agrega secuencias de comandos al final
de la página HTML.

Ejemplo utilizando RegisterStartupScript

Agregaremos el script del cliente en el evento click de un control Button. Lo que hará el código
es agregar el script al final de la página 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) &

CIBERTEC CARRERAS PROFESIONALES
24

"width=510,height=360,left=200,top=250" & Chr(34)
pClientScript += " </script>"
RegisterStartupScript("PaginaDestino", pClientScript)
End Sub

El ejemplo anterior genera el siguiente código en la página 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 PÁGINAS WEB ASP.NET

Si en la aplicación se redirige de una página Web ASP.NET a otra, a menudo deseará pasar
información de la página de origen a la de destino.
La información se puede pasar entre páginas de varias formas:
• Utilice una cadena de consulta que anexe la información a la dirección URL de la página de
destino, a partir de la propiedad QueryString.
• En la página de destino, lea directamente en la página de origen los valores de los controles y
los valores de las propiedades públicas utilizando la propiedad PreviousPage de la clase Page.
6.1. USO DEL QUERYSTRING
La propiedad QueryString o HttpRequest.QueryString obtiene la colección de variables de tipo
cadena de consulta HTTP.
El siguiente código demuestra cómo pasar dos parámetros: nombre e ID en una QueryString a
una página Web: Default2.aspx utilizando Server.Transfer:

Server.Transfer("Default2.aspx?ID=123&nombre=ipod")

En la página Default2.aspx, el siguiente código lee los valores del QueryString

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 25

LABORATORIO 1.1
Tema: Validación de entrada de datos y técnica de navegación del lado del cliente

Diseñe un WebForm mediante el cual un cliente pueda registrarse para poder realizar sus
compras y envíe sus datos a otro WebForm donde se confirmen el envío de éstos. Use
controles de validación para el respectivo ingreso.

PageRegistro.aspx

Configurar las siguientes propiedades:

RequiredFieldValidaror1:
ControlToValidate: txtNombre
ErrorMessage: Ingrese su nombre
Text: *

RequiredFieldValidaror2:
ControlToValidate: txtApellidos
ErrorMessage: Ingrese sus apellidos
Text: *

RequiredFieldValidaror3:
ControlToValidate: txtEmail
ErrorMessage: Ingrese su email
Text: *

RegularExpressionValidator1:
ControlToValidate: txtEmail
ErrorMessage: Email no válido
Text: *
ValidationExpression: \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

CompareValidator1:
ControlToValidate: txtEmail2
ErrorMessage: Email no válido
Text: *
ControlToCompare: txtEmail
Operator: Equals
Type: String

CIBERTEC CARRERAS PROFESIONALES
26

CustomValidator1:
ControlToValidate: txtFecha
ErrorMessage: Edad no permitida
Text: *
ClientValidationFunction: FuncionEdad

Escribir el siguiente código 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: Teléfono no valido
Text: *
ValidationExpression: \(\d{3}\)-(\d{7})

Programación:

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 27

Programación:

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 combinación CTRL + F5.

LABORATORIO 1.2
Tema: Validación de entrada de datos y técnica de navegación 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.

CIBERTEC CARRERAS PROFESIONALES
28

Cuando agregue la clase al proyecto, le aparecerá el siguiente cuadro de diálogo, 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 botón “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 más rápida, digite la palabra “Property” y presione la
tecla “Tab”. Se dará cuenta que se debe crear una estructura de código para que defina su
atributo privado y su propiedad. Con la tecla “Tab”, puede moverse a través de toda la
estructura creada. De esta forma, la programación es mucho más rápida.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 29

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 continuación:

Programación:
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)

CIBERTEC CARRERAS PROFESIONALES
30

obj = New Producto
With obj
.Nombre = "Scanner"
.Precio = 350
.Stock = 50
End With
ProductosList.Add(obj)
obj = New Producto
With obj
.Nombre = "LCD"
.Precio = 599
.Stock = 240
End With
ProductosList.Add(obj)
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 página del lado del servidor
Server.Transfer("PageRecepcion.aspx")
End Sub

PageRecepcion.aspx

Programación:

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 _

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 31

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 combinación CTRL + F5.

CIBERTEC CARRERAS PROFESIONALES
32

Autoevaluación
1. ¿Cuáles son los tipos de sitios web que trabaja en Visual Studio 2010?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

2. ¿Cuál(es) de los controles de validación me permitiría validar la cantidad de un producto
sabiendo que la cantidad no debe ser menor a 1?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

3. ¿Para qué sirve el control ValidationSummary?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

4. ¿Cuáles son las técnicas para poder navegar entre las páginas de un sitio web?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

5. ¿Cómo podemos pasar información de una página a otra?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 33

Resumen
 Cuando crea páginas 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 más funciones incorporadas que los
del servidor HTML.
o Controles de validación: incorporan lógica para permitirle comprobar los
controles de entrada de los usuarios.
o Controles de usuario: controles que crea como páginas web ASP.NET. Se
pueden incrustar controles de usuario de ASP.NET en otras páginas
 Para agregar controles a una página web, puede utilizar un diseñador visual o bien,
puede escribir el elemento que representa el control en el marcado de la página.
 ASP.NET es una tecnología basada en servidor y, por lo tanto, no interactúa
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 cómo se ha invocado una página web: si se ha invocado
mediante una solicitud original (HTTP GET), una devolución de datos (HTTP POST), un
envío a través de páginas desde otra página (HTTP POST) o una transferencia de otra
página utilizando el método Transfer, o usando una devolución de llamada del
explorador.
o Para determinar cómo se ha invocado una página web:
o IsPostBack: obtiene un valor que indica si la página 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 página que transfirió el control a
la página actual.
o IsCrossPagePostBack: indica si la página participa en una devolución de datos
entre éstas.
o IsCallback: obtiene un valor que indica si la solicitud de la página es el
resultado de una devolución de llamada.
 La clase Page expone una propiedad denominada PreviousPage. Si la página de origen
y la de destino se encuentran en la misma aplicación ASP.NET, la propiedad
PreviousPage de la página de destino contiene una referencia a la de origen.

Referencias
 http://msdn.microsoft.com/es-es/library/bb386451.aspx
Página referente a trabajar con controles en asp.net
 http://msdn.microsoft.com/es-es/library/bb386451.aspx
Página referente a los controles de validación

Bibliografía especializada:
 http://www.macoratti.net
 http://www.willydev.net

CIBERTEC CARRERAS PROFESIONALES
34

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 35

UNIDAD DE
APRENDIZAJE

1

DISEÑANDO UN SITIO WEB USANDO MASTER PAGES
Y ADMINISTRANDO LOS ESTADOS DE UNA APLICACIÓN
LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos, utilizando las técnicas explicadas en clase y los controles
que proporciona el Framework 4.0, construyen el diseño de páginas web con coherencia
utilizando Master Pages, además de manejar las diferentes técnicas de administración de
estados de una aplicación web.

TEMARIO

 Creación de Master Pages
 Definición del Control ContentPlaceHolder
 Técnicas para administrar los estados de una aplicación web: ViewState, Cookies,
Session, y Application.

ACTIVIDADES PROPUESTAS

• Los alumnos diseñan Master Pages.
• Los alumnos diseñan Web Forms que hereden Master Pages.
• Los alumnos diseñan un sitio web administrando estados usando ViewState.
• Los alumnos diseñan un sitio web administrando estados usando Cookies.
• Los alumnos diseñan un sitio web administrando estados usando Session.
• Los alumnos diseñan un sitio web administrando estados usando Application.

CIBERTEC CARRERAS PROFESIONALES
36

1. DISEÑANDO UNA APLICACIÓN WEB ASP.NET
En este capítulo, se van a crear, personalizar y administrar una aplicación Web ASP.NET (a
veces, denominada simplemente sitio web). En estos temas, se ofrece información relativa a la
aplicación o sitio en su totalidad: la estructura de archivos de un sitio Web ASP.NET, el ciclo de
vida de una aplicación, los métodos para crear un aspecto (temas) y un diseño (páginas
maestras) coherentes en todas las páginas del sitio y cómo ampliar la aplicación con módulos
personalizados.

1.1. PÁGINAS MAESTRAS DE ASP.NET
Las páginas maestras de ASP.NET permiten crear un diseño de página que se puede utilizar en
ciertas páginas o en todas (páginas de contenido) en un sitio Web.
Una página maestra es un archivo de ASP.NET con la extensión .master que tiene un diseño
predefinido que puede incluir texto estático, elementos HTML y controles de servidor. La
página maestra se identifica mediante una directiva @Master especial que reemplaza la
directiva @Page utilizada en las páginas .aspx ordinarias. El aspecto de la directiva es el
siguiente:
<%@ Master Language="VB" CodeFile="Pg.master.vb" Inherits="MPage" %>
Además de la directiva @ Master, la página maestra también incluye todos los elementos
HTML de nivel superior de una página, como html, head y form. Por ejemplo, en una página
maestra, podría utilizar una tabla HTML para el diseño, un elemento img para el logotipo de la
compañía, texto estático para el aviso de copyright y controles de servidor para crear la
exploración estándar del sitio.
Además del texto estático y los controles que aparecerán en todas las páginas, la principal
incluye controles ContenPlaceHolder.

1.2. CONTENT PAGES (PÁGINAS DE CONTENIDO)
Para definir el contenido de los controles ContentPlaceHolder de la página maestra, cree
páginas de contenido individuales, que son páginas ASP.NET que están enlazadas a una página
maestra concreta. El enlace se establece en la directiva @ Page de la página de contenido al
incluir un atributo MasterPageFile que apunta a la página maestra que se va a utilizar.
Por ejemplo, una página de contenido podría tener la siguiente directiva @ Page, que la enlaza
con la página Master1.master.
<%@Page Language="VB" MasterPageFile="~/Master1.master" %>
En la página de contenido, cree el contenido agregando los controles Content y asignándolos a
los controles ContentPlaceHolder de la página maestra.

1.3. ÁMBITO DE LAS PÁGINAS MAESTRAS
Puede adjuntar páginas de contenido a una página maestra en tres niveles:
1. En el nivel de la página: puede utilizar una directiva de página en cada página de contenido
para enlazarla a una página maestra, como en el ejemplo de código siguiente.
<%@ Page Language="VB" MasterPageFile="MySite.Master" %>
2. En el nivel de la aplicación: al establecer la configuración del elemento pages en el
Web.config, puede especificar que todas las páginas de ASP.NET (archivos .aspx) de la
aplicación se enlacen automáticamente a una página maestra. El elemento podría 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 aplicación, excepto en que la configuración se define en un archivo Web.config en
una única carpeta.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 37

1.4. MODO DE CREAR UNA PÁGINA PRINCIPAL
La página maestra es la plantilla que define la apariencia que tendrán las páginas de contenido.
A continuación, se creará primero una página maestra.

1.4.1. Modo de añadir una página maestra al Web Site
1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el sitio Web
y, a continuación, seleccione Agregar nuevo Item.
2. En Plantillas, haga clic en Página maestra.
3. En el cuadro Nombre, escriba Master1.
4. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar y,
a continuación, haga clic en Agregar.

1.4.2. Edición de la página maestra
La página maestra define la apariencia de las páginas del sitio. Puede contener cualquier
combinación de texto estático y controles. Una página maestra también contiene uno o más
marcadores de posición de contenido los cuales indican dónde aparecerá el contenido. Cuando
edita una página maestra, el diseñador le ayuda de las siguientes maneras:
• Como valor predeterminado, la página maestra contiene un único control
ContentPlaceHolder. Se pueden agregar tantos ContentPlaceHolder adicionales como sean
necesarios.
• En la vista de código fuente, el editor comprueba el marcado de la página para asegurarse de
que no agrega elementos o atributos que no sean válidos en las páginas maestras. Por
ejemplo, si agrega un control Content a una página principal en la vista de código fuente, el
editor marca el control porque los controles Content no están permitidos en las páginas
maestras.
• Cuando edita una página maestra en el diseñador, el menú sitio web y el menú del botón
secundario contienen el comando agregar página de contenido, el cual crea una página nueva
que ya está vinculada con la página maestra actual.

1.5. PÁGINAS MAESTRAS ANIDADAS
Las páginas maestras anidadas permiten crear páginas maestras divididas en componentes.
Por ejemplo, un sitio de gran volumen podría contener una página maestra general en la que
se define la apariencia del sitio. Otros colaboradores del contenido del sitio pueden definir sus
propias páginas maestras secundarias que harán referencia a la página maestra del sitio y que,
a su vez, definirán la apariencia del contenido de ese colaborador.
Una página maestra secundaria tiene la extensión de nombre de archivo .master, como
cualquier página maestra. La página maestra secundaria, normalmente, contiene controles de
contenido que están asignados a los marcadores de posición de contenido de la página
maestra primaria. En este sentido, la página maestra secundaria está diseñada como cualquier
página de contenido.
Esta es la página 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>

CIBERTEC CARRERAS PROFESIONALES
38

Esta es la página 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 página 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. INFORMACIÓN GENERAL SOBRE LA ADMINISTRACIÓN DE
ESTADOS EN ASP .NET
Cada vez que la página se envía al servidor, se crea una nueva instancia de la clase de la página
Web. En la programación Web tradicional, esto se traduce en que toda la información asociada
a la página y sus controles se pierden con cada recorrido de ida y vuelta.
Para superar esta limitación inherente de la programación Web tradicional, ASP.NET incluye
varias opciones que ayudan a preservar los datos en cada página y en toda la aplicación. Estas
características son las siguientes:
• Estado de vista
• Estado de control
• Campos ocultos
• Cookies
• Cadenas de consulta
• Estado de aplicación
• Estado de sesión
• Propiedades de perfiles

2.1. OPCIONES DE ADMINISTRACIÓN DE ESTADO EN EL CLIENTE
Las siguientes secciones describen opciones para administrar el estado que almacenan la
información en la página o en el equipo cliente.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 39

2.1.1. Estado de vista: ViewState
Permite conservar valores entre las distintas solicitudes de una misma página. Éste es el
método predeterminado que la página utiliza para conservar los valores de las propiedades de
la propia página y sus controles entre recorridos de ida y vuelta.

2.1.2. Estado de control: ControlState
La propiedad ControlState permite mantener la información de las propiedades que es
específica 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 información, é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 página de forma explícita.
Para que los valores de los campos ocultos estén disponibles durante el procesamiento de la
página, debe enviarla mediante el método POST de HTTP. Si utiliza campos ocultos y una
página se procesa como respuesta a un vínculo o a un comando GET de HTTP, los campos
ocultos no estarán disponibles.

2.1.4. Cookies
Una cookie es una cantidad pequeña 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 sesión del
explorador cliente. Contiene información específica del sitio que el servidor envía al cliente
junto con el resultado de la página.

2.1.5. Cadenas de consulta: QueryString
Una cadena de consulta es información que se anexa al final de la dirección URL de una página.
Un ejemplo típico 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 interrogación (?) 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 estén disponibles durante el procesamiento de
la página, debe utilizar el método GET de HTTP.

2.2. OPCIONES DE ADMINISTRACIÓN DE ESTADO EN EL SERVIDOR
ASP.NET proporciona una serie de medios para mantener la información de estado en el
servidor, en lugar de conservarla en el cliente. Con la administración de estados basada en
servidor, puede reducir la cantidad de información que se envía al cliente para conservar el
estado.

2.2.1. Estado de aplicación: ApplicationState
El estado de aplicación es un mecanismo de almacenamiento global al que se puede obtener
acceso desde todas las páginas de la aplicación web.
Es una instancia de la clase HttpApplicationState, de cada aplicación Web activa. Por tanto, el
estado de aplicación resulta útil para almacenar la información que se debe mantener en los
recorridos de ida y vuelta del servidor, y entre las solicitudes de las páginas.

2.2.2. Estado de sesión: SessionState
Estado de sesión es similar a estado de aplicación con la diferencia de que el ámbito es la
actual sesión del explorador. Si hay varios usuarios utilizando la aplicación, cada uno de ellos
tendrá un estado de sesión distinto.

CIBERTEC CARRERAS PROFESIONALES
40

3. INFORMACIÓN GENERAL SOBRE LAS COOKIES
Las cookies son pequeños fragmentos de texto que acompaña a las solicitudes y a las páginas
mientras éstas se transmiten del servidor Web al explorador y viceversa. Permiten a los sitios
Web almacenar información sobre los visitantes.
Se utilizan para muchos propósitos; todos ellos destinados a facilitar al sitio web el
reconocimiento de los usuarios. Por ejemplo, un sitio que lleva a cabo un sondeo podría
utilizar una cookie, simplemente, como un valor booleano para indicar si el explorador del
usuario ya ha participado en la votación con el fin de evitar que el usuario vote dos veces.
La mayoría de los exploradores admiten cookies de un tamaño máximo de 4096 bytes. Los
exploradores también imponen limitaciones: sólo permiten 20 cookies por sitio; si se intenta
almacenar más, las cookies más antiguas se descartan.

3.1. MODO DE ESCRIBIR COOKIES
El explorador administra las cookies en los equipos de los clientes. Las cookies se envían 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 aplicación Web pueda identificarla cuando el
explorador la envíe 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 colección Cookies
Response.Cookies("userName").Value = "patrick"
Response.Cookies("userName").Expires = DateTime.Now.AddDays(1)
Crear una instancia del objeto HttpCookie y agregarla a la colección Cookies.
Dim aCookie As New HttpCookie("lastVisit")
aCookie.Value = DateTime.Now.ToString()
aCookie.Expires = DateTime.Now.AddDays(1)
Response.Cookies.Add(aCookie)
Las cookies también 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)
Response.Cookies.Add(aCookie)
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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 41

Para leer los nombres y los valores de todas las cookies disponibles para la página, puede
recorrer la colección Cookies mediante código 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. ELIMINACIÓN DE LAS COOKIES
La eliminación de una cookie, es decir, su borrado físico del disco duro del usuario, es una
variación del proceso de modificación. 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)
Response.Cookies.Add(aCookie)
Next

4. INFORMACIÓN GENERAL SOBRE EL ESTADO DE VISTA
El estado de vista es el método que permite conservar los valores de página y control entre
acciones de ida y vuelta. Puede tener acceso al estado de vista en su propio código mediante la
propiedad ViewState de la página 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 página ASP.NET en el que se pueden almacenar
valores que deben conservarse durante la devolución de datos.
Los datos de estado de vista se almacenan en uno o más campos ocultos como cadenas
codificadas en base64. Puede tener acceso a información de estado de vista mediante la
propiedad ViewState de la página que expone un objeto de diccionario. Puesto que el estado
de vista se envía 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" ... %>

CIBERTEC CARRERAS PROFESIONALES
42

4.2. MODO DE HABILITAR O DESHABILITAR EL VIEWSTATE PARA UN CONTROL O
PÁGINA
Para habilitar o deshabilitar el estado de vista para un control:
• Seleccione el control en la vista diseño 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 página:
• Seleccione la vista de origen (Source View) de la página Web.
• Ubique la directiva <% @Page %>
• Para habilitar el ViewState, añada a la directiva EnabledViewState=”true”; para deshabilitar
el ViewState, a la directiva EnabledViewState=”false”.

5. INFORMACIÓN GENERAL SOBRE EL ESTADO DE SESSION
El estado de sesión de ASP.NET identifica las solicitudes recibidas desde el mismo explorador
durante un tiempo limitado como una sesión y conserva los valores de las variables mientras
dure esa sesión.
Por ejemplo, crear las variables de sesión 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 sesión, y Session_OnEnd se
desencadena cuando se abandona una sesión.

5.1.1. Session_OnStart
Se ejecuta al principio de una solicitud, si ésta inicia una nueva sesión. Se utiliza para inicializar
las variables de sesión, así como para realizar el seguimiento de la información relacionada con
la sesión.

5.1.2. Session_OnEnd
Se ejecuta cuando se llama al método Abandon o cuando la sesión ha caducado. Una sesión
caduca cuando el número de minutos especificado por la propiedad Timeout transcurre sin
que se haya creado ninguna solicitud para la sesión.
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 información relacionada con la sesión.

Ejemplo de eventos de session
Las subrutinas definidas en este ejemplo crean un contador que realiza el seguimiento del
número de usuarios de la aplicación que utilizan dicha aplicación de forma activa. Observe que
este ejemplo sólo funcionará correctamente cuando la propiedad de estado de sesión Mode se
establezca en InProc, ya que el evento Session_OnEnd sólo es compatible con el almacén de
estado de sesión en proceso.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 43

<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
Application.UnLock()
End Sub
</script>

5.2. RECUPERAR LOS VALORES EN UN ESTADO DE SESSION
La propiedad Ítem permite recuperar los valores de un estado de sesión.
Dim firstName as String = CType(Session.Item("FirstName"), String)
Dim lastName as String = CType(Session.Item("LastName"), String)

El estado de la sesión caduca, de forma predeterminada, después de 20 minutos de
inactividad. Puede controlar el período de duración del estado de sesión mediante el atributo
timeout de la sección de configuración sessionState.

5.3. MODOS DE UN ESTADO DE SESSION
El estado de sesión de ASP.NET es compatible con distintas opciones de almacenamiento de
los datos de la sesión. En la lista siguiente se describen los modos de estado de sesión
disponibles:
• Modo InProc, que almacena el estado de sesión en memoria en el servidor Web. Éste es el
valor predeterminado.
• Modo StateServer, que almacena el estado de sesión en un proceso distinto denominado
"servicio de estado de ASP.NET". Este modo garantiza que el estado de sesión se mantiene si
se reinicia la aplicación web y que esté disponible también para varios servidores Web.
• Modo SQLServer, que almacena el estado de sesión en una base de datos de SQL Server.
Este modo garantiza que el estado de sesión se mantiene si se reinicia la aplicación web y que
esté disponible también para varios servidores web en una batería de servidores web.
• Modo Custom, que permite especificar un proveedor de almacenamiento personalizado.

6. INFORMACIÓN GENERAL SOBRE EL ESTADO DE APLICACIÓN

El estado de aplicación es un repositorio de datos disponible para todas las clases de una
aplicación ASP.NET. El estado de aplicación se almacena en la memoria del servidor y ofrece
más rapidez que el almacenamiento y la recuperación de información de una base de datos.
El estado de aplicación 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 dirección URL de la
aplicación.

CIBERTEC CARRERAS PROFESIONALES
44

6.1. MODO DE GUARDAR VALORES EN UN ESTADO DE APLICACIÓN
El estado de aplicación se almacena en la memoria del servidor, por lo que una cantidad
grande de datos puede llenarla rápidamente. Si se reinicia la aplicación, los datos de estado de
aplicación se pierden.

6.1.1. Modo de escribir un valor en el estado de aplicación
Establezca el valor de la variable en la clase HttpApplicationState, en el controlador
Application_Start del archivo Global.asax
En el ejemplo de código siguiente, se muestra cómo establecer la variable de aplicación
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 aplicación con bloqueo
Varios subprocesos pueden tener acceso, simultáneamente, a las variables de estado de
aplicación. Para establecer los valores es necesario bloquearlas para que sólo pueda escribir en
un subproceso.
Para establecer el valor de la variable de aplicación, llame al método Lock, y, a continuación,
llame al método UnLock a fin de desbloquear el estado de aplicación y liberarlo para otras
solicitudes de escritura.
En el ejemplo de código siguiente, incremente la variable Count en uno (1) y, a continuación,
desbloquee el estado de aplicación.
Application.Lock()
Application("Count") = CInt(Application("Count")) + 1
Application.UnLock()

6.2. MODO DE LEER VALORES EN UN ESTADO DE APLICACIÓN
El estado de aplicación 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 aplicación
Determine si la variable de aplicación existe y, a continuación, conviértala al tipo adecuado
cuando tenga acceso a ella.
En el ejemplo de código siguiente se recupera el valor AppTime de estado de aplicación 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. INFORMACIÓN SOBRE EL ALMACENAMIENTO EN CACHÉ

Para ayudarle a aumentar el rendimiento de la aplicación, ASP.NET proporciona
almacenamiento en caché mediante dos mecanismos básicos: almacenamiento en caché de
aplicaciones y caché de los resultados de las páginas.

7.1. CACHÉ DE APLICACIONES
Permite almacenar en memoria datos arbitrarios mediante programación utilizando pares de
clave y valor. Los datos de la caché de aplicaciones son volátiles. 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.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 45

7.2. CACHÉ DE RESULTADOS DE PÁGINAS
Almacena en memoria el contenido de una página ASP.NET procesada. Esto permite a ASP.NET
enviar una página de respuesta a un cliente sin volver a recorrer el ciclo de vida de
procesamiento de la página. El almacenamiento en caché de los resultados de las páginas
resulta especialmente útil en aquellas páginas que no cambian a menudo, pero cuya creación
requiere un cantidad significativa de procesamiento.
El almacenamiento en caché de resultados de páginas proporciona dos modelos de
almacenamiento: almacenamiento en caché de páginas completas y almacenamiento en caché
de una parte de las páginas. El almacenamiento en caché de páginas completas permite
conservar el contenido completo de la página en memoria y utilizarlo para satisfacer las
solicitudes de los clientes. El almacenamiento en caché de una parte de las páginas permite
almacenar en la caché ciertas partes de una página, mientras otras se recuperan de forma
dinámica.

7.3. MODO DE AGREGAR ELEMENTOS A CACHE
El objeto Caché tiene acceso a los elementos en la caché de la aplicación. Puede agregar un
elemento a la caché de la aplicación utilizando:
• El método Insert: agrega un elemento a la caché, si un elemento con el mismo nombre se
reemplaza el elemento de la caché.
• El método Add: maneja las mismas opciones que el método Insert; sin embargo, si ya existe
un elemento con el mismo nombre en la caché, el método no reemplazará el elemento y no
producirá una excepción.

7.3.1. Modo de agregar un elemento a la caché estableciendo directamente el elemento a
través de la clave y valor:
Cache("CacheItem1") = "Cached Item 1"

7.3.2. Modo de agregar elementos a la caché mediante el método 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 código 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 método Insert pasándole 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 método Add
Llame al método 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, _

CIBERTEC CARRERAS PROFESIONALES
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, asígnelo a su variable. De lo
contrario, vuelva a crear el elemento, agréguelo a la caché y, a continuación, tenga acceso a él.
En el ejemplo, se muestra cómo recuperar el elemento denominado CacheItem de la memoria
caché. Si el elemento no está en la caché, el código agrega el elemento a la caché y, a
continuación, 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 volátiles. Se pueden eliminar
automáticamente de la caché por una de las razones siguientes:
• La caché está llena.
• El elemento ha caducado.
• Un elemento depende de ciertos cambios.
El método concreto utilizado para eliminar un elemento de la caché se determina en el código
que se emplea para agregar el elemento a la caché.

7.5.1. Modo de eliminar un elemento de la caché de forma explícita
Llame al método Remove y pásele la clave del elemento a eliminar.
Cache.Remove("MyData1")

LABORATORIO 2.1
Tema: Diseño con Master Pages

Agregue un nuevo elemento al Sitio Web

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 47

Seleccione la plantilla Página Maestra:

En la vista de código, podrá ver lo que se genera y apreciar la etiqueta ContentPlaceHolder. Esa
debe ser el área del Master Page que debe quedar vacío para que sea llenado en las páginas de
contenido.

CIBERTEC CARRERAS PROFESIONALES
48

Fuera del ContentPlaceHolder diseñe una tabla de 4 filas por 1 columna:

En la primera fila, agregue un par de imágenes; y en la segunda fila de la categoría
“Navegación”, con control Menú, para que tenga las siguientes opciones:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 49

Éste debe ser el diseño final de la página maestra:

LABORATORIO 2.2
Tema: Creación de páginas de Contenido y Manejo de Cookies

Diseñe 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
página de compras debe mostrarse el login del usuario, leyéndose desde la cookie
creada. Esta página no es de contenido.

Login.aspx

Agregue otro WebForm y, en este caso, sí será una página de contenido que heredará
el diseño del Master Page creado. Seleccione la casilla que dice “Seleccionar página
maestra”

CIBERTEC CARRERAS PROFESIONALES
50

PageCompras.aspx

En el siguiente Cuadro de diálogo, seleccione la Página Maestra que se creó.

Dentro del ContentPlaceHolder desarrolle el siguiente diseño:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 51

Programación: (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

CIBERTEC CARRERAS PROFESIONALES
52

LABORATORIO 2.3
Tema: Administración de estados usando ViewState

A continuación, 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
información debe agregarse a un datatable que será almacenado usando el ViewState.

Programación: (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 …)
If Not Page.IsPostBack Then
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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 53

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.

CIBERTEC CARRERAS PROFESIONALES
54

Autoevaluación
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 cuál es su limitación?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

4. ¿Cómo escribir una cookie? ¿Se puede definir una cookie con varios valores?
Explique.
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

5. ¿Qué es un estado de sesión y cuáles son sus eventos?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

6. ¿Qué es un estado de aplicación y cómo se declara un estado de aplicación?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

7. ¿Qué es un Master Page y cómo funciona?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

8. ¿Qué es una página de contenido, cuál es la sintaxis al añadir una página de contenido al
Master Page?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

9. ¿Cuál es el comportamiento de un Master Page en tiempo de ejecución?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

10. ¿Cómo configurar una página de contenido en un Master Page?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 55

Resumen
 El estado de vista es el método que utiliza el marco de trabajo de la página ASP.NET
para conservar los valores de página 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 sesión de ASP.NET permite almacenar y recuperar los valores de un
usuario cuando el usuario explora diferentes páginas ASP.NET que conforman una
aplicación Web. El estado de sesión de ASP.NET identifica las solicitudes recibidas
desde el mismo explorador durante un período limitado de tiempo como una sesión y
conserva los valores de las variables durante la duración de esa sesión. ASP.NET
proporciona dos eventos que ayudan a administrar las sesiones de usuario:
Session_OnStart se desencadena cuando comienza una nueva sesión, y
Session_OnEnd se desencadena cuando se abandona o caduca una sesión.
 El estado de aplicación es un repositorio de datos disponible para todas las clases de
una aplicación ASP.NET. El estado de aplicación se almacena en la memoria del
servidor y ofrece más rapidez que el almacenamiento y la recuperación de información
de una base de datos.
 La caché de aplicaciones permite almacenar, en memoria, datos arbitrarios mediante
programación utilizando pares de clave y valor. La caché de aplicaciones son volátiles,
lo que significa que no se almacenan en memoria durante toda la duración de la
aplicación.
 Un Master Page es un archivo de ASP.NET con la extensión .master que tiene un diseño
predefinido que puede incluir texto estático, elementos HTML y controles de servidor.
El Master Page se identifica mediante una directiva @Master que reemplaza la
directiva @Page utilizadas en las páginas aspx.
 Para definir el contenido de los controles de la página principal, cree páginas de
contenido individuales, que son páginas ASP.NET (archivos .aspx y, opcionalmente,
archivos de código subyacente) que están enlazadas a una página principal concreta. El
enlace se establece en la directiva @ Page de la página de contenido al incluir un
atributo MasterPageFile que apunta a la página principal que se va a utilizar.
 Puede adjuntar páginas de contenido a un Master Page en tres niveles:
o En el nivel de la página, puede utilizar una directiva de página en cada página
de contenido para enlazarla a una página principal.
o En el nivel de la aplicación, en el Web.config, puede especificar todas las
páginas de ASP.NET (archivos .aspx) de la aplicación que se van a enlazar.
o En el nivel de la carpeta, la configuración se define en un archivo Web.config
en una única carpeta.

Si desea hacer consultas:
 http://msdn.microsoft.com/es-es/library/18sc7456.aspx
Página referente al Master Page
 http://msdn.microsoft.com/es-es/library/wcyt4fxb.aspx
Página referente al manejo de temas y máscaras
 http://msdn.microsoft.com/es-es/library/75x4ha6s.aspx
Página referente al manejo de estados

CIBERTEC CARRERAS PROFESIONALES
56

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 57

UNIDAD DE
APRENDIZAJE

1

CREACIÓN DE CONTROLES DE USUARIO
LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos, utilizando las técnicas explicadas en clase y los controles
que proporciona el Framework 4.0, construyen el diseño de controles de Usuario Web para
reutilizar el código en un Sitio Web, además de realizar un desarrollo mucho más rápido
trabajando de esta manera. También, desarrollan controles de asistente para un Sitio Web.

TEMARIO

 Definición de un control de usuario
 Estructura de un control de usuario
 Agregar un control de usuario a un Web Form
 Definir propiedades y métodos a un control de Usuario
 Eventos de los controles de usuario
 Hacer referencias a recursos externos

ACTIVIDADES PROPUESTAS

• Los alumnos crean un control de usuario.
• Los alumnos definen propiedades y métodos 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.

CIBERTEC CARRERAS PROFESIONALES
58

1. Definición de Controles de Usuario
Además de utilizar controles de servidor Web y HTML, puede crear controles personalizados y
reutilizables con las mismas técnicas que utiliza para las páginas 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 página 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 página Web ASP.NET.

Puede almacenar en caché el resultado de un control de usuario independientemente del
resto de la página Web ASP.NET en que está incluido. Esta técnica, 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 página solo contiene texto literal y código 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 aplicación

1.1. Información 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 continuación, puede tratar el control de usuario como
una unidad y definir propiedades y métodos para el mismo.
 Controles personalizados. Son clases escritas por un desarrollador que se derivan de
Control o WebControl.

Los controles de usuario son mucho más fáciles 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 página Web ASP.NET completa (archivo
.aspx) e incluye una página de interfaz de usuario y código. El proceso de creación del control
de usuario es muy similar al proceso de creación de una página ASP.NET, sólo que al final se
agregan el formato y los controles secundarios necesarios. Al igual que una página, un control
de usuario puede incluir el código necesario para manipular su contenido e incluso realizar
tareas como el enlace de datos.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 59

Un control de usuario se diferencia de una página Web ASP.NET en los siguientes aspectos:

 La extensión 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 configuración y otras propiedades.
 Los controles de usuario no se pueden ejecutar como archivos independientes. En su
lugar, debe agregarlos a las páginas ASP.NET, como haría con cualquier otro control.
 El control de usuario no contiene elementos html, body o form. Estos elementos
deben estar en la página de alojamiento.

En un control de usuario puede utilizar los mismos elementos HTML (excepto html, body y
form) y controles Web que en una página 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
número 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, _
ByVal e As System.EventArgs)
If currentColorIndex = 0 Then
currentColorIndex = colors.Length - 1
Else
currentColorIndex -= 1
End If
DisplayColor()
End Sub

CIBERTEC CARRERAS PROFESIONALES
60

Protected Sub buttonDown_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
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 página ASP.NET, ya que
contiene varios (un control TextBox y dos Button) y un código que dirige los eventos Click de
los botones y el evento Load de la página. Sin embargo, el control no contiene ningún formato,
excepto para los controles, y en lugar de una directiva @Page contiene una directiva
@Control.

3. Agregar un control de usuario a una página
Para agregar un control de usuario a una página, es necesario registrarlo primero en la que lo
aloja (o página host). Al hacerlo, se debe especificar el archivo .ascx que lo contiene, así como
un prefijo y un nombre de etiqueta que se utilizarán para declarar el control en la misma.

4. Definir propiedades y métodos para un control de usuario
Puede definir propiedades y métodos para un control de usuario de la misma manera que lo
haría para una página. La definición de una propiedad para un control de usuario permite
establecer sus propiedades mediante declaración y en el código.

5. Eventos de los controles de usuario
Si un control de usuario contiene controles de servidor Web, es posible escribir “un código” 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 botón.

De manera predeterminada, los eventos producidos por los controles secundarios en un
control de usuario no están disponibles para la página host. Sin embargo, es posible definir en
el control de usuario eventos y producirlos de modo que se notifiquen a la página host. Esto se
hace de la misma manera que la definición de eventos para una clase. Para obtener más
información, vea Provocar un evento.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 61

6. Hacer referencia a recursos externos
Cuando se ejecuta un control de usuario, las referencias a recursos externos, como imágenes o
delimitadores para otras páginas, se resuelven utilizando la dirección URL del control de
usuario como dirección URL base. Por ejemplo, si el control de usuario contiene un control
Image cuya propiedad ImageUrl se ha establecido en Images/Button1.gif, la dirección URL de la
imagen se agrega a la dirección 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 ejecución.

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 página host. Por consiguiente, puede agregar a las páginas controles de
usuario que permitan almacenar en caché partes de una página

LABORATORIO 3.1
Tema: Creación 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”

CIBERTEC CARRERAS PROFESIONALES
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…”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 63

Haga Click en el Botón “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 opción Paso = Finalizado y haga el siguiente diseño:

Programación:

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

CIBERTEC CARRERAS PROFESIONALES
64

De las Tareas de Wizard, seleccione el Paso 1. Compile con Ctrl + F5 y pruebe la aplicación.

LABORATORIO 3.2
Tema: Creación de un Web Control de Usuario

Agregue un nuevo elemento a su sitio web y seleccione la plantilla “Control de usuario
web”. Colóquele el nombre: ListPicker.ascx

Se generará el siguiente código:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 65

En la vista de diseño, agregue una tabla de 1 fila y 3 columnas:

Agregue 2 controles Listbox y 3 buttons que tengan el siguiente diseño:

Los Listbox se llamarán SourceList y TargetList respectivamente, y los buttons btnAddAll,
btnAddOne, y btnEliminar respectivamente

Programación:
Protected Sub AddItem(ByVal li As ListItem)
TargetList.SelectedIndex = -1
TargetList.Items.Add(li)
End Sub

Protected Sub btnAddAll_Click(ByVal sender …)
TargetList.SelectedIndex = -1
Dim li As ListItem
For Each li In SourceList.Items
AddItem(li)
Next
End Sub

CIBERTEC CARRERAS PROFESIONALES
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)
TargetList.SelectedIndex = -1
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 código 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 están en la directiva proporcionan la información necesaria para que ASP.NET
encuentre el control cuando compile y ejecute la página. Los atributos TagPrefix y TagName

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 67

juntos especifican cómo se declara el control de usuario en la página. El atributo Src especifica
el archivo y, si es necesario, la ruta de acceso donde está ubicado el archivo de código 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 automáticamente los valores cuando el control de usuario se coloca en la
página, se puede usar cualquier prefijo de etiqueta y nombre de etiqueta para el control de
usuario, siempre y cuando los valores no se estén empleando ya en la página.

Para probar el control de usuario

1. Presione CTRL+F5 para ejecutar la página. La página aparece en el explorador con las
dos listas y tres botones que constituyen su control de usuario.
2. Haga clic en el botón >> (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
botón X (Remove) hasta que haya quitado todos los elementos.
4. Seleccione un valor único en la lista SourceList y, a continuación, haga clic el botón >
(AddOne).
El valor único se copia en la lista TargetList.
5. Si lo desea, experimente más 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 métodos personalizados al control de usuario.

Ahora, el control de usuario funciona, pero no es todavía útil como un control de uso general.
Una versión más práctica del control de usuario le permitiría hacer lo siguiente:

 Especificar una lista de elementos que se mostrarán dinámicamente 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 rápidamente todos los elementos de
la lista TargetList.

La realización de estas tareas requiere que la página host pueda comunicarse con el control de
usuario para compartir valores (establecer y leer propiedades) y emitir comandos (llamar a
métodos). En esta parte, se cambiará el control de usuario y se le agregará algunos miembros
(propiedades y métodos).

Se le agregarán dos propiedades al control de usuario. La primera recupera todos los
elementos que están en la lista TargetList. La segunda permite especificar si la lista TargetList
acepta valores duplicados. Más adelante, en este ejemplo, se incluirá un método que le
permitirá rellenar la lista SourceList.

CIBERTEC CARRERAS PROFESIONALES
68

Para agregar el código que define las propiedades personalizadas

1. Para el control ListPicker, abra o cambie al archivo de código fuente.
2. Use el código siguiente para crear la propiedad SelectedItems
3. La propiedad AllowDuplicates es de lectura y escritura. El valor de la propiedad
AllowDuplicates se debe guardar explícitamente en Ver estado para que se conserve
entre recorridos de ida y vuelta. (La propiedad SelectedItems no tiene que guardarse
explícitamente 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, todavía debe modificar el código
existente en el control de usuario para aprovechar el valor de la propiedad AllowDuplicates.

Modificar el código de AddItem:

Protected Sub AddItem(ByVal li As ListItem)
TargetList.SelectedIndex = -1
If Me.AllowDuplicates = True Then
TargetList.Items.Add(li)
Else
If TargetList.Items.FindByText(li.Text) Is Nothing Then
TargetList.Items.Add(li)
End If
End If
End Sub

El código realiza la misma función que antes (agrega un elemento a la lista TargetList), pero
ahora también 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 código busca un elemento existente que tenga el
mismo valor que el nuevo elemento propuesto y, a continuación, agrega el nuevo elemento si
no encuentra ningún 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.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 69

Agregue los siguientes dos métodos:

Este método me ayudara establecer cuál 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

Programación:

‘Con este código llenamos con un ArrayList de Países el SourceList.

Protected Sub Page_Load(ByVal sender As …)
If Not Page.IsPostBack Then
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

CIBERTEC CARRERAS PROFESIONALES
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 diseño
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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 71

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.

CIBERTEC CARRERAS PROFESIONALES
72

Autoevaluación
1. ¿Cuáles son los tipos de controles de usuario que se pueden desarrollar?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

2. ¿Cómo agregó un control de usuario a un WebForm?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

3. ¿Cómo se definen los métodos y propiedades en un control de usuario?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

4. ¿Cuáles son las ventajas de utilizar controles de usuario?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

5. ¿Cómo se manejan los eventos en un control de usuario?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

6. ¿Cómo se acceden a las propiedades de un control de usuario desde el WebForm en el que
lo está utilizando?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 73

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 página 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 página Web
ASP.NET.
 Puede almacenar en caché el resultado de un control de usuario independientemente
del resto de la página Web ASP.NET en que está incluido. Esta técnica, 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 página solo contiene texto literal y
código 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 aplicación

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 continuación puede tratar el control de usuario como
una unidad y definir propiedades y métodos para el mismo.
 Controles personalizados. Son clases escritas por un desarrollador que se derivan de
Control o WebControl.

Los controles de usuario son mucho más fáciles 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.

Si desea hacer consultas:
 http://msdn.microsoft.com/es-es/library/4d1baz78(VS.80).aspx
Página referente a controles de Usuario
 http://msdn.microsoft.com/es-es/library/wt3k2fyw(v=VS.80).aspx
Página referente a creación de controles

Bibliografía especializada:
 http://www.macoratti.net
 http://www.willydev.net

CIBERTEC CARRERAS PROFESIONALES
74

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 75

UNIDAD DE
APRENDIZAJE

2

ACCESO A DATOS CON ADO.Net

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término 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

ACTIVIDADES PROPUESTAS
 Los alumnos manejan la conexión 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 actualización.

CIBERTEC CARRERAS PROFESIONALES
76

1. INTRODUCCIÓN AL ACCESO A DATOS

La mayoría de las aplicaciones se escriben para que procesen información 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
información desde y hacia la aplicación.
Estos servicios reciben la denominación genérica de ADO.NET. Esta nueva iteración aporta una
serie de interfaces y objetos, así como nuevos controles y mejoras en las clases ya existentes y,
también, en el propio motor que se encarga de la manipulación 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 conexión. A medida que el procesamiento de datos utiliza cada vez
más arquitecturas de varios niveles, los programadores están pasando a un enfoque sin
conexión 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á diseñado para el acceso a datos independientemente del origen de datos. Como
resultado, se puede utilizar con múltiples y distintos orígenes de datos, con datos XML o para
administrar datos locales de la aplicación. El DataSet contiene una colección de uno o más
objetos DataTable formados por filas y columnas de datos, así como información sobre claves
principales, claves externas, restricciones y relaciones relativas a los datos incluidos en los
objetos DataTable

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 77

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
mínimo entre el origen de datos y su código, 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 continuación, se describen los cuatro objetos centrales que constituyen un proveedor de
datos de .NET Framework.
 Connection. Establece una conexión 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 sólo avance y sólo 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 también incluyen las que se enumeran a
continuación:

 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, información acerca de parámetros
con las que puede rellenar la colección Parameters de un objeto Command.
 Parameter. Define los parámetros de entrada y salida para los comandos, y
procedimientos almacenados.
 Error. Expone la información relacionada con una advertencia o errores devueltos por
un origen de datos.
 ClientPermission. Se proporciona para los atributos de seguridad de acceso a código
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 página. Los controles de fuente de
datos también tienen otras capacidades como la clasificación, la paginación, el
"catching", la actualización, la inserción y la eliminación de datos, que los controles de
la UI pueden aprovechar sin requerir ningún tipo de código.

CIBERTEC CARRERAS PROFESIONALES
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, además, aprovechar las capacidades de la fuente de datos, haciendo así más
sencillo las operaciones de clasificación, paginación y actualización en páginas orientadas a
datos (data-driven).
 Parámetros de Control de Datos. Las fuentes de datos pueden aceptar parámetros de
entrada de diferentes fuentes utilizando los nuevos "objetos de parámetros" de controles
de datos de ASP.NET 2.0. Estos "objetos de parámetros" nos permiten proporcionar
fácilmente los valores de las propiedades de los controles de servidor (campos sesión,
aplicación, cookie y querystring) y las propiedades del perfil de usuario para operaciones
de datos parametrizadas. La utilización de estos parámetros permite el filtrado y
escenarios de "master-details" con poco código o código 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 común de enlazar un
control en una plantilla enlazada a datos. Es posible, además, asociar dos formas de
enlazar datos con las propiedades de un control en una plantilla para permitir, así que los
valores se pasen automáticamente para la actualización, inserción o borrado en la fuente
de datos. Para datos XML jerárquicos, ASP.NET 4.0 también incluye una sintaxis de
enlazado a datos basado en XPath.
 Bases de Datos de Ficheros Locales Utilizando SQL Express. Para un desarrollo más
sencillo, ASP.NET 4.0 soporta la habilidad de conectar con una base de datos SQL Express
como un fichero local de la aplicación, eliminando la necesidad de enviar la base de datos
a un servidor sólo para realizar el trabajo de desarrollo. Por supuesto, también se puede
seguir conectando a las bases de datos de un servidor SQL.

Esta sección describe éstas y otras características del acceso a datos en ASP.NET 4.0.

Prácticamente, todas las aplicaciones Web dinámicas realizan algún tipo de acceso a datos y,
afortunadamente, ASP.NET 4.0 facilita mucho esta acción. A diferencia de versiones
anteriores, que requería que los desarrolladores escribieran código personalizado para
recuperar y enlazar los datos a controles de servidor, ASP.NET 4.0 permite una solución
declarativa para el enlazado a datos que requiere poco código para los escenarios de datos
más comunes, como por ejemplo:

 Seleccionar y Mostrar Datos
 Ordenar, Paginar y Cachear Datos
 Actualizar, Insertar y Borrar Datos
 Filtrar o "Master-Details" utilizando parámetros

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.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 79

4. Controles de Fuente de Datos
Los controles de fuente de datos no se representan “ a sí mismos”, sino que representan un
almacén de datos; por ejemplo, una base de datos, un objeto de negocio, un fichero XML o un
Web Service XML. También, hacen posibles funcionalidades más "ricas" sobre los datos
(clasificación, paginación, filtrado, actualización, borrado e inserción) que pueden utilizar los
controles de enlazado a datos de la UI de forma automática. ASP.NET incluye los siguientes
controles de servidor, por defecto:

Nombre Descripción
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 jerarquía mostrada por un proveedor de navegación
de sites de ASP.NET 4.0.
LinqDataSource Permite el uso de Language-Integrated Query (LINQ) en una página web
ASP.NET a través 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 página. Estos
controles puedes aprovecharse, opcionalmente, de las capacidades de la fuente de datos,
como por ejemplo clasificación, paginación, filtrado, actualizado, borrado y inserción.
Asimismo, se conectan con una fuente de datos a través 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 Descripción
GridView Presenta los datos en formato de "rejilla" (grid). Es una evolución del control
DataGrid, y puede aprovechar automáticamente las características de la fuente de
datos.
DetailsView Presenta un sólo elemento en una tabla de parejas etiqueta/valor, similar a la
vista de formulario de Microsoft™ Access. Este control también puede aprovechar
automáticamente las características de la fuente de datos.
FormView Presenta de la forma definida en una platilla personalizada un sólo elemento de
datos. Presenta un elemento en una tabla de parejas etiqueta/valor, similar a la
vista de formulario de Microsoft™ Access. Este control también puede aprovechar
automáticamente las características de la fuente de datos.
TreeView Presenta los datos en una vista de árbol jerárquico de nodos expandibles.
Menu Presenta los datos en un menú dinámico expandible (incluyendo flyouts).

CIBERTEC CARRERAS PROFESIONALES
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 opción que dice “Configure Data Source”

Se abrirá el siguiente cuadro de diálogo donde debe dar click en el Botón “New Connection”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 81

De la lista de Data Source seleccione “Microsoft SQL Server”

Haga Click en el Botón “Continue” y llene los parámetros que muestra la figura a continuación:
(el password en nuestro caso es “sql”)

CIBERTEC CARRERAS PROFESIONALES
82

Haga Click en el Botón “OK” y se mostrará la siguiente figura donde se puede apreciar la
cadena de Conexión a la Base de Datos.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 83

Haga Click en el botón “Siguiente o Next” y debe colocar un nombre que usted elija para que la
cadena de conexión se guarde en el archivo de configuración. En este caso, se le pondrá “Cn”.

Haga Click en el botón “Siguiente o Next”. Seleccionar la tabla desde la que se van a consultar
los datos.

Haga Click en el botón “Siguiente o Next”. Seleccionar los campos que se van a consultar.

CIBERTEC CARRERAS PROFESIONALES
84

Haga Click en el botón “Siguiente o Next” y haga click en el botón “Test Query”.

Haga Click en Finalizar.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 85

Ahora, seleccione el control GridView y de “Tareas Comunes”y, luego, elija la opción el Origen
de Datos o Data source así como se muestra en la figura:

Presione Ctrl + F5 y compile la Aplicación. Debe mostrar la siguiente figura:

Se puede agregar otras funcionalidades como Paginación y Ordenación siguiendo los pasos que
se muestran a continuación:

CIBERTEC CARRERAS PROFESIONALES
86

Vuelva a compilar y vea los resultados:

Para cambiar la cantidad de registros por página, solo modifique la propiedad PageSize del
GridView y colóquele el valor que necesite.

Finalmente, revise el archivo Web.Config que se debe haber creado, automáticamente, donde
podrá visualizar la cadena de conexión con nombre “Cn”. Ésta la puede reutilizar en otro
webForm.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 87

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
número de factura, Fecha de facturación y Fecha de cancelación.

1. Crear el siguiente Web Form

2. Crear un objeto DataSet que será donde se establecerán 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”

CIBERTEC CARRERAS PROFESIONALES
88

4. A continuación, 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 opción “Add Query”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 89

6. Seleccione la primera opción del Asistente que aparece, ya que se creará una
sentencia SQL.

7. Seleccione la primera opción de la siguiente pantalla, ya que la sentencia SQL devuelve
un conjunto de registros.

CIBERTEC CARRERAS PROFESIONALES
90

8. Digite la clausula WHERE de la siguiente sentencia SQL:

9. Haga Click en “Siguiente” y coloque los nombres de los métodos, tal como lo muestra
la siguiente figura:

10. Haga Click en “Siguiente” y verifique que las sentencias se hayan generado con éxito:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 91

11. Haga click en “Finalizar” y aparecerán los nuevos métodos en el TableAdapter:

12. Configure el ObjectDataSource seleccionando la opción, de “Tareas Comunes”,
“Configurar Origen de Datos”:

CIBERTEC CARRERAS PROFESIONALES
92

13. Del siguiente cuadro de diálogo, seleccione el Objeto TB_FACTURATableAdapter:

14. Del siguiente cuadro de diálogo, seleccione el Método “GetDataByFechas” y configure
sus parámetros:

15. Dé Click en siguiente para configurar los 2 parámetros INICIO y FIN:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 93

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

CIBERTEC CARRERAS PROFESIONALES
94

17. Compile la aplicación CTRL + F5 y verá el siguiente resultado:

Pero se pidió que solo mostrara el número de factura, fecha de facturación y Fecha de
cancelación, para lo cual se va a configurar el GridView:

De las “Tareas Comunes”, seleccione la opción “Editar Columnas”

De la lista de Campos Seleccionados, eliminar todos, dejando solo aquellos que se han pedido:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 95

Haga Click en “OK” y verá como queda el GridView:

CIBERTEC CARRERAS PROFESIONALES
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 número de Factura,
Fecha de facturación y Fecha de cancelación

1. Diseñar el siguiente WebForm:

2. Crear un modelo de Clases LINQ to SQL llamado DataVentas:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 97

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

CIBERTEC CARRERAS PROFESIONALES
98

4. Configurar el LinqDataSource, seleccionando de “Tareas Comunes” la opción
“Configurar Origen de Datos”:

5. Seleccionar del siguiente Cuadro de Diálogo la opción DataVentasDataContext:

6. Seleccionar en el siguiente cuadro de diálogo los campos a utilizar: (esto es para el
control DropDownList)

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 99

7. Seleccione de las “Tareas Comunes” del DropDownList la opción “Seleccione Origen de
Datos” y configure las opciones:

8. Seleccione del Contol GridView de “Tareas Comunes” la opción “Seleccionar Origen de
Datos” y elija la opción “Nuevo Origen de Datos” o “New Data Source”

CIBERTEC CARRERAS PROFESIONALES
100

9. Elija del siguiente cuadro de diálogo la opción LINQ:

10. Elija del siguiente cuadro de diálogo “DataVentasDataContext”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 101

11. Del siguiente cuadro de diálogo seleccione el TB_FACTURA y los campos que va a
mostrar. Luego, dé Click en el botón “WHERE”:

12. Configure la sentencia WHERE, tal como aparece en la siguiente figura. Luego, haga
click en “Agregar”.

CIBERTEC CARRERAS PROFESIONALES
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 opción que dice
“Habilitar AutoPostBack”:

15. Compile la aplicación CTRL + F5

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 103

Autoevaluación
1. ¿Cuáles son los tipos de controles de fuente de datos?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

2. ¿Cuáles son los tipos de controles enlazado a datos?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

3. ¿Cuáles son los 4 componentes principales en ADO.Net?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

4. ¿Qué se genera en el Archivo de configuración Web.Config al utilizar el SqlDataSource?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

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

6. ¿Cuál es la diferencia al utilizar un ObjectDataSource de un SQLDataSource?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

CIBERTEC CARRERAS PROFESIONALES
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á diseñado para el acceso a datos independientemente del origen de
datos. Contiene una colección de uno o más objetos DataTable formados por filas y
columnas de datos, así como información 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
mínimo entre el origen de datos y su código, con lo que aumenta el rendimiento sin
sacrificar su funcionalidad.

 Una cadena de conexión proporciona la información 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 conexión 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
automáticamente en el momento apropiado del ciclo de vida de la solicitud de página.

Consulte las siguientes páginas:
 http://msdn.microsoft.com/es-es/library/6759sth4.aspx

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 105

UNIDAD DE
APRENDIZAJE

2

Arquitectura N Capas

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web que acceden a un origen de datos
usando el modelo de objetos ADO.NET bajo la arquitectura N Capas.

TEMARIO
 Capa de entidades de negocio: Creación de las clases, atributos y propiedades.
 Capa de datos: Conexión a la Base de datos, clases y Métodos de acceso a datos.
 Capa de negocio: Clases y Métodos que llamarán a los de la capa de datos.
 Capa de presentación: Diseño de GUI – Web Forms

ACTIVIDADES PROPUESTAS
 Los alumnos manejan la conexión y operaciones a la base de datos desde la Capa de
Datos a través de los métodos que se implementan.
 Los alumnos usan Entidades de Negocio para actualizar datos pasando la información
desde la Capa de Presentación a la Capa de Datos.
 Los alumnos configuran los controles enlazados a los datos utilizando los métodos de
la Capa de Negocio.

CIBERTEC CARRERAS PROFESIONALES
106

1. Arquitectura N Capas
Esta forma de desarrollo se ha implementado hace varios años con el objetivo principal de
reutilizar código y que el mantenimiento de las aplicaciones sea mucho más rápido y
ordenado. El manejo de Capas permite agrupar ciertas funciones que cumplen un objetivo
específico. Por ejemplo si yo quiero registrar, modificar o eliminar Clientes, tendré una Clase
Cliente, donde irán todos esos métodos, los cuales tendrán como objetivo manipular o
actualizar los datos de un cliente.

La Arquitectura N Capas se basa en la que anteriormente se conocía como arquitectura en 3
Capas: Capa de Datos, Capa de Negocio, y Capa de Presentación. Actualmente van creciendo el
número de capas ya que aparecen en el mercado nuevas tecnologías; por ejemplo, ahora se
podría crear capas de componentes donde vayan algunos DLL que se utilicen de manera global
para la aplicación; podría ir una capa de Servicios, donde se alojen los servicios web que se
utilizarán 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 aplicación ya no está
definida explícitamente.

En el diseño de aplicaciones distribuidas, se ha convertido en un principio ampliamente
aceptado la división de la aplicación en componentes que ofrezcan servicios de presentación,
empresariales y de datos.

Los componentes que realizan tipos de funciones similares se pueden agrupar en capas, que
en muchos casos están 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 solución 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
solución global. Sin embargo, internamente, el servicio está formado por componentes de
software, al igual que cualquier otra aplicación, los cuales se pueden agrupar de forma lógica
en servicios de presentación, empresariales y de datos.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 107

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
aplicación. Las interfaces de usuario se implementan utilizando formularios de Windows
Forms, páginas Microsoft ASP.NET, u otro tipo de tecnología que permita procesar y validar los
datos.

2.2 Componentes empresariales (BL)
La aplicación requiere del uso de componentes que implementen reglas empresariales y
realicen tareas empresariales. Por ejemplo, en la aplicación comercial, deberá implementar
una funcionalidad que calcule el precio total del pedido y agregue el costo adicional
correspondiente por el envío del mismo. Los componentes empresariales implementan la
lógica empresarial de la aplicación.

2.3 Componentes lógicos de acceso a datos (DAL)
La mayoría de las aplicaciones y servicios necesitan obtener acceso a un almacén de datos en
un momento determinado del proceso empresarial. Por ejemplo, la aplicación empresarial
necesita recuperar los datos de los productos para mostrar al usuario los detalles de los
mismos. Por tanto, es razonable abstraer la lógica necesaria para obtener acceso a los datos en
una capa independiente de componentes lógicos de acceso a datos, ya que de este modo se
centraliza la funcionalidad de acceso a datos y se facilita la configuración y el mantenimiento
de la misma.

2.4 Componentes de entidad empresarial (BE)
La mayoría de las aplicaciones requieren el paso de datos entre distintos componentes. Por
ejemplo, en la aplicación comercial es necesario pasar una lista de productos de los
componentes lógicos 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 aplicación suelen ser estructuras de datos, como conjuntos de datos,
DataReader o secuencias de lenguaje de marcado extensible (XML), aunque también se
pueden implementar utilizando clases orientadas a objetos personalizados que representan
entidades del mundo real necesarias para la aplicación, como productos o pedidos.

CIBERTEC CARRERAS PROFESIONALES
108

Laboratorio 5.1
Tema: Capa de Entidades de Negocio

Crear un Proyecto de tipo Librería de Clases llamado “BusinessEntitiesLayer”. Este tipo de
proyecto generan archivos DLL que pueden ser reutilizados luego en otros proyectos: (El
nombre de la Solución es LPIII-Sesion05)

1. Agregue una clase llamada ProveedorBE:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 109

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
Set(ByVal value As String)
_Codigo = value
End Set
End Property

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

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

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

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

CIBERTEC CARRERAS PROFESIONALES
110

Private _Representante As String
Public Property Representante() As String
Get
Return _Representante
End Get
Set(ByVal value As String)
_Representante = value
End Set
End Property
End Class

Laboratorio 5.2
Tema: Capa de Acceso a Datos

Agregar un Proyecto de tipo Librería de Clases llamado “DataLayer”. Este tipo genera archivos
DLL que pueden ser reutilizados luego en otros.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 111

1. Agregar la clase ConexionDAO:

2. Programar el siguiente código 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.

CIBERTEC CARRERAS PROFESIONALES
112

4. Implementar los siguientes métodos:

Imports System.Data
Imports System.Data.SqlClient
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)
Dim tabla As New DataTable
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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 113

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()
Dim msj As String = ""
Try
cmd.ExecuteNonQuery()
msj = "Actualización 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 código siguiente:

Imports System.Data
Imports System.Data.SqlClient
Imports BusinessEntityLayer

Public Class DistritoDAO
Private cn As New ConexionDAO
Private objCn As SqlConnection = cn.conectar

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

CIBERTEC CARRERAS PROFESIONALES
114

Laboratorio 5.3
Tema: Capa de Negocio

Agregar un Proyecto de tipo Librería de Clases llamado “BusinessLayer”. Este genera archivos
DLL que pueden ser reutilizados luego en otros proyectos.

La solución hasta este momento debe tener 3 proyectos de Librería de Clases:

Al proyecto BusinessLayer agregar la referencia de DataLayer y BusinessEntitiesLayer:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 115

Agregar la Clase ProveedorBL y definir los siguientes métodos:

Imports BusinessEntityLayer
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 métodos:

Imports BusinessEntityLayer
Imports DataLayer
Public Class DistritoBL
Private objDisDAO As New DistritoDAO

Function getDistritos() As DataTable
Return objDisDAO.getDistritos
End Function
End Class

CIBERTEC CARRERAS PROFESIONALES
116

Laboratorio 5.4
Tema: Capa de Presentación

Agregue un proyecto del tipo ASP.Net Web Site llamado “PresentationLayer”:

1. Agregue un WebForm que se llame Proveedores.aspx que tenga el siguiente diseño:

2. Agregue las siguientes referencias a este proyecto:

3. Agregue al Web.Config la cadena de conexión llamada “Cn”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 117

4. Programe el siguiente código en el WebForm:

Imports BusinessEntityLayer
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

Protected Sub Page_Load(ByVal sender …)
If Not Page.IsPostBack Then
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

Protected Sub btnRegistrar_Click(ByVal sender …)
LLenarPropiedades()
MsgBox(objProBL.RegistrarProveedor(objProBE), _
MsgBoxStyle.Information, "Resultado")
With gvProveedores
.DataSource = objProBL.getProveedores
.DataBind()
End With
End Sub
End Class

CIBERTEC CARRERAS PROFESIONALES
118

5. Compile la Aplicación CTRL + F5

De Click en “Aceptar” y compruebe que se registro al final el nuevo proveedor.

Agregue la opción al GridView para que se pueda seleccionar los datos siguiendo los
siguientes pasos:
a. Seleccionar de las “Tareas Comunes” la opción “Editar Columnas”

b. Del cuadro de diálogo seleccione CommandFields y agregue el que dice
“Select”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 119

6. Agregar el siguiente código 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), _
MsgBoxStyle.Information, "Resultado")
With gvProveedores
.DataSource = objProBL.getProveedores
.DataBind()
End With
End Sub

7. Vuelva a compilar la aplicación y compruebe la parte de modificar.

CIBERTEC CARRERAS PROFESIONALES
120

Verifique los datos modificados en el GridView

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 121

Autoevaluación
1. ¿Cuáles 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. ¿Cuál es la ventaja de programar en capas?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

6. Defina la Capa de presentación
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

CIBERTEC CARRERAS PROFESIONALES
122

Resumen
 La programación por capas es un estilo de programación en el que el objetivo
primordial es la separación de la lógica de negocios de la lógica de diseño; un ejemplo
básico de esto consiste en separar la capa de datos de la capa de presentación 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 algún cambio, sólo se ataca al nivel requerido sin
tener que revisar entre código mezclado.

 Además, permite distribuir el trabajo de creación de una aplicación por niveles; de este
modo, cada grupo de trabajo está totalmente abstraído del resto de niveles, de forma
que basta con conocer la API que existe entre niveles.

 En el actual diseño de sistemas informáticos, se suelen usar las arquitecturas multinivel
o Programación por capas. En éstas, a cada nivel se le confía una misión simple, lo que
permite el diseño de arquitecturas escalables (que pueden ampliarse con facilidad en
caso de que las necesidades aumenten).

 Capa de presentación: es la que ve el usuario (también se la denomina "capa de
usuario"), presenta el sistema al usuario, le comunica la información y captura la
información del usuario en un mínimo de proceso (realiza un filtrado previo para
comprobar que no hay errores de formato). También, es conocida como interfaz
gráfica y debe tener la característica de ser "amigable" (entendible y fácil 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 envían las respuestas tras el proceso. Se denomina capa de
negocio (e incluso de lógica del negocio) porque es aquí donde se establecen todas las
reglas que deben cumplirse. Ésta se comunica con la capa de presentación, 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. También, se consideran aquí los
programas de aplicación.

 Capa de datos: es donde residen los datos y es la encargada de acceder a los mismos.
Está formada por uno o más gestores de bases de datos que realizan todo el
almacenamiento de datos, reciben solicitudes de almacenamiento o recuperación de
información desde la capa de negocio.

Consultar a las siguientes páginas:
 http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ce40e4e1-9838-
4c89-a197-a373b2a60df2&displaylang=en

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 123

UNIDAD DE
APRENDIZAJE

2

Desarrollo de Carro de Compras

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran un carro de compras como un proceso de una tienda
virtual.

TEMARIO
 Definición de Objetos de Sesión en el Global.asax
 Diseño de las GUI para la tienda Virtual usando Master Pages.
 Configurar controles para mostrar imágenes de los productos.
 Definición de Métodos para consulta de productos y vista del Carro de Compras
 Proceso de Compra: Manejo de Transacciones para actualizar la Base de Datos

ACTIVIDADES PROPUESTAS
 Los alumnos definen objetos de Session en el archivo de configuración global llamado
Global.asax.
 Los alumnos diseñan los Master Pages y WebForms para el proceso de Carro de
Compra de la tienda virtual.
 Los alumnos configuran los controles para mostrar las imágenes de los productos.
 Los alumnos programan los WebForms para el proceso de Carro de Compras.

CIBERTEC CARRERAS PROFESIONALES
124

DESCRIPCIÓN DEL PROCESO DE CARRO DE COMPRA
1. Pantalla Inicial: permite seleccionar los productos filtrados por categoría.

2. Cuando el usuario selecciona un producto, carga la página 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:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 125

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 página, 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:

CIBERTEC CARRERAS PROFESIONALES
126

8. Esto culmina el proceso de compra. Ahora, se pasará a ver, a través 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. Diseñar 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 diseño:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 127

Para que se puedan mostrar imágenes de los productos en el GridView, siga los
siguientes pasos:

1. Seleccione de “Tareas Comunes” del Control GridView la opción “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 continuación:

 HeaderText: Foto
 DataImageUrlField: COD_PRO
 DataImageUrlFormatString: imagenes\{0}.jpg

CIBERTEC CARRERAS PROFESIONALES
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 diseño:

Todas las imágenes son controles “ImageButton” y también cuenta con un control
Image al lado derecho para mostrar la imagen del producto de una forma más grande
y detallada.

4. Agregar un WebForm llamado CarroCompras.aspx donde se hereda el master page
creado. Debe tener el siguiente diseño:

En el Gridview, agregue de CommadField la opción “Delete” y asigne la imagen que
aparece en la figura anterior a través de la propiedad DeleteImageUrl.

5. Agregar un WebForm llamado Login.aspx donde se hereda el master page creado.
Debe tener el siguiente diseño:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 129

Considere que al lado del txtEmail debe colocar un RegularExpressionValidator para
validar que el email que se ingrese tenga un formato válido.

6. Agregar un WebForm llamado Compra.aspx donde se hereda el master page creado.
Debe tener el siguiente diseño:

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 Aplicación Global llamado Global.asax
Global.asax
Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
'Código que se ejecuta cuando se inicia una nueva sesión
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

CIBERTEC CARRERAS PROFESIONALES
130

Sub Session_End(ByVal sender As Object, ByVal e As EventArgs)
Session("carrito") = Nothing
End Sub

Clase Categoría:
En esta Clase, se define un método que cargue las categorías ordenadas por su descripción.
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)
Dim tabla As New DataTable
da.Fill(tabla)
Return tabla
End Function
End Class

Clase Producto:
En esta Clase, se definen los siguientes métodos.
1. getProductos: devuelve todos los productos de la Base de Datos.
2. getProductosCategoria: devuelve los productos filtrados por la Categoría.
3. BuscarProducto: devuelve los datos de un producto buscado por el código.

Public Class Producto
Private cn As New Conexion
Dim objCn As SqlConnection = cn.conectar

Function getProductos() As DataTable
Dim da As New SqlDataAdapter("select * from tb_producto", objCn)
Dim tabla As New DataTable
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
Dim tabla As New DataTable
da.Fill(tabla)
Return tabla
End Function

Public Function BuscarProducto(ByVal id As String) As DataRow
Dim da As New SqlDataAdapter( _
"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
Dim tabla As New DataTable
da.Fill(tabla)
Return tabla.Rows(0)
End Function
End Class

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 131

Clase Cliente:
En esta Clase, se definen los siguientes métodos.
1. ValidarCliente: método para validar el acceso al sistema.
2. getDatosCliente: devuelve los datos de un cliente filtrado por email.

Public Class Cliente
Private cn As New Conexion
Private objCn As SqlConnection = cn.conectar

Function ValidarCliente(ByVal email As String, ByVal pass As String) As _
Boolean
Dim da As New SqlDataAdapter( _
"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
Dim tabla As New DataTable
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
Dim da As New SqlDataAdapter( _
"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
Dim tabla As New DataTable
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

CIBERTEC CARRERAS PROFESIONALES
132

Clase Pedido:

En esta clase, se definen los siguientes métodos:
1. RegistrarPedido: método para registrar el proceso de carro de compras en la
Base de Datos, utilizando transacciones.
Public Class Pedido
Private cn As New Conexion
Private objCn As SqlConnection = cn.conectar
Function RegistrarPedido(ByVal cli As String, ByVal tablaDet As _
DataTable) As String
Dim sql As String = "USP_REGISTRAPEDIDO"
Dim msj As String = ""
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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 133

LABORATORIO 03:
Tema: Programación de los Web Forms para ejecutar el proceso de Carro de Compras

Default.aspx
Partial Class _Default
Inherits System.Web.UI.Page
Dim objpro As New Producto
Dim objCat As New Categoria
Protected Sub Page_Load(ByVal sender …)
If Not Page.IsPostBack Then
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
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender …)
If Not Page.IsPostBack Then
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###BOT_TEXT###quot; + lblCodigo.Text.Trim + ".jpg"
End If
End If
End If
End Sub

CIBERTEC CARRERAS PROFESIONALES
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
Inherits System.Web.UI.Page
Private Sub Listado()
Dim tabla As DataTable = CType(Session("carrito"), DataTable)
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
Protected Sub Page_Load(ByVal sender As …)
If Not Page.IsPostBack Then
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
Dim tabla As DataTable = CType(Session("carrito"), DataTable)
For Each fila As DataRow In tabla.Rows
If fila(0) = cod Then
fila.Delete()
Exit For
End If
Next
Listado()
End Sub

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 135

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

Protected Sub btnComprar_Click(ByVal sender As Object, …)
Response.Redirect("Login.aspx")
End Sub
End Class

Login.aspx
Partial Class Login
Inherits System.Web.UI.Page
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
Inherits System.Web.UI.Page
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), _
MsgBoxStyle.Information, "Resultado")
End Sub
End Class

CIBERTEC CARRERAS PROFESIONALES
136

Autoevaluación
1. ¿Para qué sirve la Clase de aplicación global Global.asax?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

2. Defina qué son los objetos de Session
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

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

4. Defina cómo se configura el GridView para mostrar imágenes
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

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

6. Defina lo que es una transacción
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 137

Resumen
 El objeto Session permite tener valores almacenados de forma global dentro de la
aplicación Web. Desde el punto de vista del cliente, estos objetos se mantienen
“vivos” hasta que se permanece un tiempo inactivos o se cierra la sesión con el
navegador web.

 El archivo Global.asax, que también se conoce como el archivo Clase de Aplicación
ASP.NET, es un archivo opcional que contiene código para responder a eventos en el
nivel de aplicación provocados por ASP.NET o por HttpModules. Reside en el directorio
raíz de una aplicación basada en ASP.NET. En tiempo de ejecución, se analiza y se
compila en una clase de .NET Framework generada dinámicamente, derivada de la
clase base HttpApplication. Está configurado para que se rechace automáticamente
cualquier solicitud directa de dirección URL; los usuarios externos no pueden descargar
ni ver el código escrito dentro de él.

 Un control ContentPlaceHolder define una región relativa para contenido en una
página maestra y representa todo el texto, el marcado y los controles de servidor de
un control Content relacionado situado en una página 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 página maestra. Se
puede declarar más de un control ContentPlaceHolder en una página maestra.

 Dentro de una página de contenido, sólo un control Content puede proporcionar el
contenido de ContentPlaceHolder en la página maestra. Sin embargo, en cada página
de contenido que utilice una página maestra, puede tener controles Content
independientes asociados a ContentPlaceHolder. Por ejemplo, puede definir
ContentPlaceHolder para el título de página de una página maestra. Para cada página
de contenido que utilice la página maestra, puede agregar un control Content que
proporcione el texto y el marcado del título de página.

Consultar a las siguientes páginas:
 http://msdn.microsoft.com/es-es/library/8bhzsw6t.aspx

CIBERTEC CARRERAS PROFESIONALES
138

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 139

UNIDAD DE
APRENDIZAJE

2

Manejo de Servicios Web y WCF

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web que acceden a un origen de datos
utilizando servicios Web y WFC (Windows Comuncation Foundation).

TEMARIO
 Llamar a un servicio Windows Communication Foundation (WCF)
 Llamar a un servicio Web desde una página Web ASP.NET

ACTIVIDADES PROPUESTAS
 Los alumnos invocan un servicio WCF desde ASP.NET para realizar operaciones de
consulta y actualización.
 Los alumnos invocan un servicio Web desde una aplicación ASP.NET para realizar
operaciones de consulta y actualización de datos.

CIBERTEC CARRERAS PROFESIONALES
140

1. WINDOWS COMMUNICATION FOUNDATION

1.1 INTRODUCCIÓN
Windows Communication Foundation o WCF (también conocido como Indigo) es la nueva
plataforma de mensajería que forma parte de la API de la Plataforma .NET 4.0 (antes conocida
como WinFX, y que no son más que extensiones para la versión 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 tecnologías .NET para la creación y
puesta en marcha de sistemas interconectados. Es una nueva generación 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 mensajería segura,
fiable y organizada en transacciones, además de interoperabilidad.
El modelo de programación 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 mensajería, sistemas de codificación, topologías 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
consideración en la arquitectura de un Sistema Distribuido. La orientación a servicios te ayuda
a lograrlo. WCF, se diseña desde sus inicios con la orientacion a servicios en la mente.

2. Modelo de programación unificado: con frecuencia, los desarrolladores de aplicaciones
tienen que escoger entre múltiples tecnologías, cada una con un único modelo de
programación. Se debería emplear una tecnología para llamar a procedimientos remotos, otra
para queuing, otra para componentes transaccionales y otras habilidades para la comunicación
interoperable entre plataformas. WCF provee un solo modelo de programación para la
colección extensa de capacidades de comunicación.

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 estándares
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 colección de ‘Endpoints’ (extremos o puntos
de entrada de WCF). Cada ‘Endpoint’, es un punto de entrada de comunicación ‘con el mundo’.
Un Cliente es un programa que intercambia mensajes con uno o más ‘Endpoints’. Un cliente
puede exponer también un ‘Endpoint’ para recibir mensajes de un servicio basado en un
patrón de intercambio de mensajes de tipo dúplex.
Las siguientes secciones describen estos fundamentos con más detalle:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 141

2.1 ENDPOINTS
Un ‘Endpoint’ de un Servicio está compuesto por una ‘Address’ (Dirección), un ‘Binding’
(Enlace) y un ‘Contract’ (Contrato).
La dirección de un ‘Endpoint’ es una dirección de red donde reside dicho ‘Endpoint’.
El ‘binding’ de un ‘Endpoint’ especifica cómo se comunica dicho ‘Endpoint’ con el resto del
mundo, incluyendo aspectos como el protocolo de transporte (p.e. TCP, http, etc.), tipo de
codificación (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 básicamente está
compuesto por una colección de mensajes organizados internamente en operaciones que
tienen un patrón de intercambio de mensajes (Message Exchange Patterns o MEPs), como
‘one-way’ (un sentido), dúplex y request/reply (petición/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 dirección 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 más común. El código
de éste puede escribirse a mano o generado a partir de un documento WSDL mediante la
utilidad svcutil.exe.

CIBERTEC CARRERAS PROFESIONALES
142

Aunque los objetos ServiceDescription pueden crearse e instanciarse explícitamente, muchas
veces se crean ‘detrás del telón’ como parte de un Servicio en ejecución.
Igualmente, en el lado cliente, un ChannelDescription describe un canal cliente WCF para un
endpoint específico. La clase ChannelDescription tiene una colección de IChannelBehaviors,
que son comportamientos aplicados al canal.
También, 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 envío y recepción de mensajes.
Por ejemplo, cosas como formato de mensajes, aplicación de seguridad, y transmitir y recibir
mensajes mediante varios protocolos de transporte, así como proporcionar mensajes recibidos
a la operación apropiada, todo corresponde al runtime de WCF. Las siguientes secciones
explican los conceptos clave del runtime de WCF.

2.4 MENSAJE
Un mensaje es, básicamente, una representación en memoria de un InfoSet mensaje SOAP.
Hay que destacar que un mensaje (en lo relativo a su comunicación 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 abstracción principal para mandar mensajes y recibir mensajes desde un
Endpoint. Básicamente, hay dos tipos:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 143

‘Canales de Transporte’, que gestionan el envío y recepción de streams de ‘octetos opacos’
basándose en algún 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 añade y
procesa cabeceras de mensajes SOAP y puede modificar el cuerpo del mensaje, por ejemplo,
cifrándolo (encriptándolo).
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 dirección de escucha del EndpointListener, filtrado de mensajes, entrega, y pila de canales,
respectivamente. Contiene la pila de canales que es responsable del envío y recepción de
mensajes.

2.7 SERVICEHOST y CHANNELFACTORY
El runtime del Servicio WCF se crea normalmente ‘detrás del telón’ llamando a
ServiceHost.Open. Éste dirige la creación de un
ServiceDescription a partir del tipo del servicio e
instancia la colección ServiceEndpoint del
ServiceDescription con EndPoints definidos en el .config
o código 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 creación 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 conexión hacia el Servicio, así que no necesita estar
‘escuchando’ para aceptar conexiones de entrada.nt

3. SERVICIO WEB EN ASP.NET
3.1 INTRODUCCIÓN
Los servicios Web XML se prestan desde su sitio a otro, no a un visitante.
Este servicio puede consistir en
• Realizar un simple cálculo con unos datos que se le envían como parámetros.
• Acceder a una base de datos para recuperar un conjunto de registros.
• Validar la corrección de una información o contrastarla frente a otros datos, etc.
Para comprender mejor esta idea, imagínese la siguiente situación: tú estás desarrollando un
sitio que vende entradas para conciertos y espectáculos teatrales. ¿Qué sería lo primero que
harías si usarías ASP normal?
Preguntarías teatro por teatro qué espectáculos hay para ponerlos en tu sitio y vender los
tickets. Pero ¿Qué bueno sería que eso sea automático, no? No tener que preocuparme de
revisar teatro por teatro. Supongamos que todo el mundo usa ASP.net en su totalidad, sería
muy útil que pudieras comunicarte con la base de datos de los teatros y ver los espectáculos

CIBERTEC CARRERAS PROFESIONALES
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 podría tener un servicio
web que haría de intermediario entre la base de datos del teatro con los espectáculos y tu
sitio.

Funcionaría de esta manera

Primero, tu visitante pide los tickets disponibles a la página ASP.net, la página ASP.net se
conecta al servicio. Luego, el servicio busca en su base de datos los espectáculos en cartelera y
les manda los datos en forma de DataSet en código de XML. La página 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 CARACTERÍSTICAS DE LOS SERVICIOS WEB
 Están normalizados en un lenguaje de marcado denominado XML.
 Son un conjunto de componentes que proporcionan una funcionalidad distribuida y
accesible a través de Internet.
 Son independientes de la plataforma, de los lenguajes y de la localización.
 Siguen un modelo de computación distribuida.
 Poseen capacidad de gestión automática.
 Es una pieza de software residente en un servidor y se accede vía 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 evolución de Windows DNA para la inclusión de un nivel de Web Services.
Los mismos se encuentran dentro del .NET Framework, que también cuenta con un lenguaje
de programación mejorado respecto de la tecnología de origen.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 145

3.3 ESTÁNDARES 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 comunicación 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
publicación y localización de los servicios. Los directorios UDDI actúan como una guía
telefónica de Web Services.
3.3.1 SOAP (Simple Object Access Protocol)
La especificación SOAP indica cómo se deben codificar los mensajes que circularán entre las
dos aplicaciones.

En el núcleo de los servicios Web, se encuentra el protocolo simple de acceso a datos SOAP
que proporciona un mecanismo estándar de empaquetar mensajes. SOAP ha recibido gran
atención debido a que facilita una comunicación del estilo RPC entre un cliente y un servidor
remoto. Pero existen multitud de protocolos creados para facilitar la comunicación entre
aplicaciones, incluyendo RPC de Sum, DCE de Microsoft, RMI de Java y ORPC de CORBA. ¿Por
qué se presta tanta atención a SOAP?

CIBERTEC CARRERAS PROFESIONALES
146

Una de las razones principales es que SOAP ha recibido un increíble apoyo por parte de la
industria. Es el primer protocolo de su tipo que ha sido aceptado, prácticamente, por todas las
grandes compañías de software del mundo, que en raras ocasiones cooperan entre sí y
ofrecen su apoyo a este protocolo. Algunas de las mayores compañías que soportan SOAP son
Microsoft, IBM, SUN, Microsystems, SAP y Ariba.

SOAP proporciona un mecanismo estándar de empaquetar un mensaje. Un mensaje SOAP se
compone de un sobre que contiene el cuerpo del mensaje y cualquier información de cabecera
que se utiliza para describir el mensaje. A continuación, se muestra un ejemplo:

El elemento raíz del documento es el elemento Envelope. El ejemplo contiene dos sub
elementos, Body y Header. Un ejemplo de SOAP válido, también, puede contener otros
elementos hijo en el sobre.
El sobre puede contener un elemento Header opcional que contiene información 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 especificación SOAP define dos modelos de mensajes:
• Un mensaje que se enviará desde la aplicación cliente a la aplicación servidor, solicitando la
ejecución de un método al que se pasan una serie de parámetros.
• Un mensaje que se enviará desde la aplicación servidor al cliente y que contendrá datos XML
con los resultados de la ejecución del método solicitado.

Ejemplo: Mensaje SOAP petición

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 147

Ejemplo: Mensaje SOAP respuesta

3.3.2 WSDL (Lenguaje de descripción de servicio Web)
Permite describir los distintos métodos o funciones que están disponibles en un servicio web,
así como su signatura; es decir, el número de argumentos o parámetros que se les debe pasar
y el tipo de dato que devolverá la función 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 través de los extremos HTTP
configurados para asegurar la compatibilidad con los tipos WSDL. La respuesta WSDL es un
documento XML generado, dinámicamente, a partir de las funciones RPC asociadas al extremo
en el momento de generar la solicitud.

CONTENIDO DE WSDL
Una instancia del Lenguaje de definición de servicios Web (WSDL) es un documento XML con
un elemento <definitions> raíz en el que se especifica el espacio de nombres WSDL
(http://schemas.xmlsoap.org/wsdl) y se define un conjunto de servicios Web como colección

CIBERTEC CARRERAS PROFESIONALES
148

de extremos de red o puertos. Un documento WSDL típico presenta la siguiente estructura de
nivel superior:

3.3.3 UDDI (Descripción Universal de Integración y Descubrimiento)
Son las siglas del catálogo de negocios de Internet denominado Universal Description,
Discovery and Integration. El registro en el catálogo 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:
• Páginas blancas - dirección, contacto y otros identificadores conocidos.
• Páginas amarillas - categorización industrial basada en taxonomías.
• Páginas verdes - información técnica sobre los servicios que aportan las propias empresas.
UDDI es uno de los estándares básicos 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
catálogo de registros.
UDDI representa un salto cualitativo importante para el desarrollo de Internet como
plataforma para los negocios basados en las tecnologías de la información. Antes, no había
ningún estándar que permitiese localizar o dar a conocer servicios basados en el tratamiento
de la información ni existía ningún método que permitiera integrar los diferentes sistemas de
información de las organizaciones.
Algunas de las aportaciones de UDDI son las siguientes:
• Permite localizar el servicio apropiado entre los miles que están registrados en Internet.
• Define la interacción con el servicio elegido.
• Extiende el mercado potencial de los servicios.
• Describe los servicios y los métodos de negocio de forma automática en un entorno seguro,
sencillo y abierto.
¿Donde?
Contract
¿Qu

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 149

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. Diseñar 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 diseñador visual de LINQ.

CIBERTEC CARRERAS PROFESIONALES
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 función llamado Listado() de tipo List of
tb_producto.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 151

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 colección de
datos.

7. A continuación, asigne una referencia de servicio al proyecto, tal como se muestra en
la figura.

8. Presione el botón “Detectar” para disponer del servicio, despliegue el servicio y
seleccione el método Listado. Para terminar, presione botón “Aceptar”.

CIBERTEC CARRERAS PROFESIONALES
152

9. Programe en el evento Load de la página para listar los productos en el control
GridView1.

10. Presione las teclas Ctrl + F5 para ejecutar la aplicación.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 153

Laboratorio 9.2
Tema: Consulta de Datos consumiendo un servicio web

Implemente una consulta de productos por una categoría seleccionada. En dicho proceso, se
deberá consumir un servicio web para realizar la configuración de las categorías a un control
de selección (DropDownList1) y listar los productos por categoría 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 diseñador visual de LINQ.

CIBERTEC CARRERAS PROFESIONALES
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
métodos.(Eliminar la asociación de las 2 clases).

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 155

6. Asigne a los métodos del DataContext: usp_getProductosCat, la propiedad Return
Type, una tabla: tb_producto, y al método usp_getCategorias la propiedad Return
Type, una tabla: tb_categoria.

7. Defina los métodos dentro del Servicio de la aplicación Web

CIBERTEC CARRERAS PROFESIONALES
156

8. Agregar la referencia al Servicio Web:

9. Elegir la opción “Servicios Web en esta Solución”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 157

10. Elegir el Servicio Web “WebServiceVentas”

11. Dar Click en el botón “Agregar Referencia”

12. El proyecto debe tener una nueva carpeta que dice “App_WebReferences”

CIBERTEC CARRERAS PROFESIONALES
158

13. Diseñar 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 página, configure
el dropdownList y el evento del control para listar los productos por categoría.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 159

15. Presione la tecla Ctrl + F5 para ejecutar la página.

CIBERTEC CARRERAS PROFESIONALES
160

Autoevaluación
1. ¿Qué es WCF?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

2. ¿Por qué usar WCF en una aplicación Web?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

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

4. ¿Cuáles son las características del Servicio Web?
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

5. Explique cada uno de los estándares para un Servicio Web
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 161

Resumen
 Windows Communication Foundation es un conjunto de tecnologías .NET para la
creación y puesta en marcha de sistemas interconectados. Es una nueva generación 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 mensajería segura, fiable y organizada en transacciones,
además de interoperabilidad.

 Un Servicio WCF es un programa que expone una colección de ‘Endpoints’ (extremos o
puntos de entrada de WCF). Cada ‘Endpoint’ es un punto de entrada de comunicación
‘con el mundo’. Un Cliente es un programa que intercambia mensajes con uno o más
‘Endpoints’.

 Un ‘Endpoint’ de un Servicio está compuesto por una ‘Address’ (Dirección), un
‘Binding’ (Enlace) y un ‘Contract’ (Contrato). La dirección de un ‘Endpoint’ es una
dirección 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, básicamente, una representación en memoria de un InfoSet mensaje
SOAP. Hay que destacar que un mensaje (en lo relativo a su comunicación 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 cálculo con unos datos que se le envían como parámetro.
o Acceder a una base de datos para recuperar un conjunto de registros.
o Validar la corrección de una información 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
Página referente al tutorial del WCF

• http://burbujasnet.blogspot.com/2008/09/wcf-hospedando-servicios.html
Página referente a hospedar un servicio web

• http://www.elguille.info/NET/ASPNET/crearServicioWeb.aspx
Página referente a como crear un servicio Web

CIBERTEC CARRERAS PROFESIONALES
162

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 163

UNIDAD DE
APRENDIZAJE

3

Manejo de la Seguridad en ASP.Net

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web que acceden a un origen de datos
usando el modelo de objetos ADO.NET manejando la seguridad de ASP. Net haciendo uso de los
conceptos de autorización y autenticación.

TEMARIO
 Seguridad en las aplicaciones Web en ASP.Net
 Arquitectura de la seguridad en aplicaciones ASP.Net
 Autenticación y Autorización en ASP.Net
 Controles de Inicio de Sesión ASP.Net

ACTIVIDADES PROPUESTAS
 Los alumnos manejan la conexión y operaciones a la base de datos utilizando la
autenticación basada en Formularios.
 Los alumnos manejan los controles de Inicio de Sesión mediante los cuales pueden
acceder al sistema, registrar nuevos usuarios, y recuperar o cambiar su password.

CIBERTEC CARRERAS PROFESIONALES
164

1. Seguridad de las Aplicaciones Web
La seguridad de los sitios Web es una cuestión de importancia fundamental, además de
compleja, para los desarrolladores de sitios Web. La protección de un sitio requiere la
elaboración 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 aplicación ASP.NET, se deben llevar a cabo las dos funciones principales que se describen
en la siguiente tabla.

Función de Descripción
seguridad
Autenticación Ayuda a comprobar que el usuario es precisamente quien dice ser. La
aplicación obtiene las credenciales (diversas formas de identificación, como
nombre y contraseña) de un usuario, y las valida consultando a una autoridad
determinada. Si las credenciales son válidas, se considera a la entidad que ha
enviado las credenciales como una entidad autenticada.
Autorización Limita los derechos de acceso mediante la concesión o negación de permisos
específicos a una identidad autenticada.

Además, Internet Information Services (IIS) puede conceder o negar el acceso en función de la
dirección IP o del nombre de host del usuario. Cualquier autorización de acceso posterior se
realiza mediante la autorización de la dirección URL del permiso de acceso al sistema de
archivos NTFS.
Es importante entender cómo interactúan todos los diversos subsistemas de seguridad. Puesto
que ASP.NET se basa en Microsoft .NET Framework, el desarrollador de aplicaciones ASP.NET
también tiene acceso a todas las características de seguridad integradas de .NET Framework,
como la seguridad de acceso a código y la seguridad de acceso basada en funciones.

2. Arquitectura de Seguridad en ASP.Net

Como se muestra en la ilustración, todos los clientes Web se comunican con las aplicaciones
ASP.NET a través de Microsoft Internet Information Services (IIS). IIS autentica la solicitud si
fuera necesario y, a continuación, busca el recurso solicitado (como una aplicación ASP.NET). Si
el cliente está autorizado, el recurso estará disponible.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 165

2.1. Integrar autenticación de ASP.NET con IIS

Al considerar la autenticación de ASP.NET, deberá comprender la interacción con los servicios
de autenticación 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 autenticación: básica,
implícita y seguridad integrada de Windows (NTLM o Kerberos). Se puede seleccionar el tipo
de autenticación que se desea utilizar en los servicios de administración de IIS. Para obtener
más información sobre la autenticación de IIS, consulte la documentación correspondiente.
Si los usuarios solicitan una dirección URL que asigna una aplicación ASP.NET, la información
sobre la autenticación y la solicitud se entrega a la aplicación. ASP.NET proporciona la
autenticación de formularios. La autenticación de formularios es un sistema que redirige las
solicitudes no autenticadas a una página web ASP.NET que usted crea. El usuario proporciona
las credenciales y envía la página. Si la aplicación autentica la solicitud, el sistema emite un
vale de autenticación en una cookie que contiene las credenciales o una clave para readquirir
la identidad. Las solicitudes subsiguientes incluyen un vale de autenticación con la solicitud.

2.2. Configuración de seguridad del archivo de configuración de ASP.NET

La configuración de seguridad de ASP.NET se configura en los archivos Machine.config y
Web.config. Como con la demás información de configuración, la configuración base y la
predeterminada se establecen en el archivo Machine.config en el subdirectorio Config de la
instalación .NET Framework actual. Puede establecer una configuración específica del sitio y
otra específica de la aplicación (incluidos los valores de reemplazo del archivo Machine.config)
en los archivos Web.config en los directorios raíz del sitio Web y de la aplicación. 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 autenticación,
autorización e identidad. Los valores para cada elemento de seguridad normalmente se
establecen en el archivo Machine.config y se reemplazan según sea necesario en el archivo
Web.config en la aplicación. Todos los subdirectorios heredan automáticamente estos valores.
No obstante, los subdirectorios pueden tener sus propios archivos de configuración que
reemplazan valores heredados.

La configuración de ASP.NET sólo se aplica a recursos ASP.NET, en concreto a aquéllos que se
registraron para que los controlara la extensión Aspnet_isapi.dll en IIS. La configuración de
ASP.NET no puede proporcionar autorización 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 estén 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 explícitamente dichas extensiones de nombre de archivo a la
extensión Aspnet_isapi.dll mediante la herramienta de administración de IIS. Sin embargo, el
procesamiento de estos tipos de archivos a través de ASP.NET puede afectar al rendimiento
del sitio Web.

CIBERTEC CARRERAS PROFESIONALES
166

El ejemplo siguiente muestra la sintaxis de las secciones de seguridad de un archivo de
configuración:

<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 Descripción

<allow roles="" /> Una cadena vacía que indica que se permiten
todas las funciones de forma predeterminada.
<allow users="*" /> Una cadena vacía que indica que todos los
usuarios tienen acceso (no se requiere ninguna
autenticación).
<authentication mode="Windows" /> El tipo de autenticación que determina el
origen del valor User actual. El valor
predeterminado es Windows.
<credentials passwordFormat="SHA1" /> El algoritmo hash que se utiliza en las
contraseñas. El valor predeterminado es SHA1.
<deny roles="" /> Una cadena vacía que indica que no se deniega

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 167

ninguna función de forma predeterminada.
<deny users="" /> Una cadena vacía que indica que no se deniega
ningún usuario de forma predeterminada.
<forms loginUrl="logon.aspx" /> Dirección URL a la que se dirige la solicitud si
establece la autenticación mode como Forms y
si la solicitud no tiene un vale de autenticación
válido.
<forms name=".ASPXAUTH" /> El nombre bajo el que la cookie de
autenticación de formularios se almacena en el
equipo del usuario.
<forms path="/" /> La ruta de acceso a la que se aplica la
autenticación de formularios. El valor
predeterminado es todas las rutas de acceso
desde la raíz de la aplicación hacia abajo.
<forms protection="All" /> La seguridad que se ha aplicado al vale de
autenticación 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 autenticación de formularios expire y
los usuarios tengan que volver a autenticarse.
<forms requireSSL="false" /> Un valor booleano que indica si se requiere una
conexión SSL para transmitir la cookie de
autenticación.
<forms slidingExpiration="true" /> Un valor booleano que indica si está habilitado
el plazo de expiración. Para obtener más
información, vea la propiedad
SlidingExpiration.
<identity impersonate="false" /> Un valor booleano que indica si la suplantación
está deshabilitada. Para obtener más
información, vea Suplantación de ASP.NET.
<identity userName="" /> Una cadena vacía que indica que no se
especifica ninguna identidad de usuario de
forma predeterminada.
<identity password="" /> Una cadena vacía que indica que no se
especifica ninguna contraseña para la
identidad de usuario de forma
predeterminada.
<trust level="Full" originUrl="" /> La directiva de seguridad que se aplicará a la
aplicación.
<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

CIBERTEC CARRERAS PROFESIONALES
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. Autenticación de ASP.NET

La autenticación es un proceso que consiste en obtener las credenciales de identificación,
como nombre y contraseña, de un usuario y validarlas consultando a una autoridad
determinada. Si las credenciales son válidas, se considera a la entidad que ha enviado las
credenciales como una entidad autenticada. Una vez autenticada la identidad, el proceso de
autorización determina si esa identidad tiene acceso a un recurso específico.
ASP.NET implementa este proceso a través de proveedores de autenticación, que son módulos
que contienen el código necesario para autenticar las credenciales del solicitante. En los temas
de esta sección se describen los proveedores de autenticación integrados en ASP.NET.

Término Definición

Proveedor de Proporciona información sobre cómo utilizar la autenticación de
autenticación de Windows junto con la autenticación de Microsoft Internet Information
Windows Services (IIS) para proteger las aplicaciones ASP.NET.
Proveedor de Proporciona información sobre cómo crear un formulario de inicio de
autenticación sesión específico de la aplicación y realizar la autenticación mediante
mediante código propio. Una manera sencilla de trabajar con la autenticación de
formularios formularios consiste en utilizar la pertenencia a ASP.NET y los controles
de inicio de sesión de ASP.NET, que conjuntamente proporcionan un
método para recopilar las credenciales de usuario, autenticarlas y
administrarlas, con muy poco código o nada en absoluto. Para obtener
más información, vea Administrar usuarios mediante pertenencia y
Información general sobre controles de inicio de sesión de ASP.NET.

3.1. Proveedor de autenticación de Windows

La Autenticación de Windows trata la identidad de usuario proporcionada por Microsoft
Internet Information Services (IIS) como el usuario autenticado en una aplicación ASP.NET. IIS
ofrece diversos mecanismos de autenticación para comprobar la identidad del usuario,
incluyendo autenticación anónima, autenticación de Windows integrada (NTLM),
autenticación de Windows integrada (Kerberos), autenticación básica (codificada en base64),
autenticación implícita y autenticación basada en certificados de cliente.
La autenticación de Windows se implementa en ASP.NET utilizando el módulo
WindowsAuthenticationModule. El módulo construye una identidad WindowsIdentity
basándose en las credenciales proporcionadas por IIS y establece la identidad como el valor
actual de la propiedad User para la aplicación.
La autenticación de Windows es el mecanismo de autenticación predeterminado para las
aplicaciones ASP.NET y se identifica como el modo de autenticación para una aplicación

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 169

mediante el elemento de configuración authentication, tal como se muestra en el ejemplo de
código siguiente:

<system.web>
<authentication mode="Windows"/>
</system.web>

3.1.1. Suplantar la identidad de Windows

Si bien el modo de autenticación de Windows establece el valor de la propiedad User actual en
una identidad WindowsIdentity basándose 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 aplicación ASP.NET. De
forma predeterminada, ésta es la cuenta NETWORK SERVICE.
Para configurar la identidad de Windows de la aplicación ASP.NET como la identidad de
Windows proporcionada por IIS hay que habilitar la suplantación. Es decir, indica a la
aplicación 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 suplantación para la aplicación Web, en el archivo Web.config de la aplicación
establezca el atributo impersonate del elemento identity en true, como se muestra en el
ejemplo de código siguiente:

<system.web>
<authentication mode="Windows"/>
<identity impersonate="true"/>
</system.web>

3.2. Proveedor de autenticación mediante formularios

La autenticación de formularios permite autenticar el nombre de usuario y la contraseña de los
usuarios mediante un formulario de inicio de sesión que haya creado. Las solicitudes no
autenticadas se redirigen a una página de inicio de sesión, en la que el usuario proporciona las
credenciales y envía el formulario. Si la aplicación 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. Información general sobre la autenticación de formularios de ASP.NET

La autenticación de formularios permite autenticar a los usuarios mediante su propio código y,
a continuación, conserva un token de autenticación en una cookie o en la dirección URL de la
página. La autenticación de formularios contribuye al ciclo de vida de la página ASP.NET
mediante la clase FormsAuthenticationModule. Puede tener acceso a información y funciones
de autenticación de formularios mediante la clase FormsAuthentication.
Para usar la autenticación de formularios, se crea una página de inicio de sesión que recopila
las credenciales del usuario y que incluye el código para autenticar las credenciales.
Normalmente, la aplicación se configura para redirigir las solicitudes a la página de inicio de
sesión cuando los usuarios intentan tener acceso a un recurso protegido, como una página que
requiere autenticación. Si las credenciales del usuario son válidas, puede llamar a los métodos

CIBERTEC CARRERAS PROFESIONALES
170

de la clase FormsAuthentication para redirigir la solicitud al recurso solicitado originalmente
con un vale de autenticación adecuado (cookie). Si no desea redireccionar, puede simplemente
obtener la cookie de autenticación de formularios o establecerla. En las solicitudes siguientes,
el explorador del usuario pasa la cookie de la autenticación con la solicitud que, a
continuación, omite la página de inicio de sesión.
Configure la autenticación de formularios mediante el elemento de configuración de
autenticación. En el caso más simple, tiene una página de inicio de sesión. En el archivo de
configuración, especifique una dirección URL para redirigir las solicitudes no autenticadas a la
página de inicio de sesión. A continuación, defina credenciales válidas, ya sea en el archivo
Web.config o en un archivo independiente. El ejemplo siguiente muestra una sección de un
archivo de configuración que especifica una página de inicio de sesión y credenciales de
autenticación para el método Authenticate. Las contraseñas se han cifrado mediante el
método 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>

Después de una autenticación correcta, el módulo FormsAuthenticationModule establece el
valor de la propiedad User en una referencia al usuario autenticado. El ejemplo de código
siguiente muestra cómo leer mediante programación la identidad del usuario autenticado de
formularios.

Dim authUser2 As String = User.Identity.Name

3.2.2. Credenciales de autenticación de formularios

Las credenciales de autenticación mediante formularios que se utilizan para validar usuarios en
el inicio de sesión se pueden almacenar en un origen de datos externo o en el archivo de
configuración de aplicaciones.

Cuando se utiliza la autenticación mediante formularios, se pueden validar los usuarios a partir
de los pares de usuario y contraseña en la sección de credenciales del archivo de configuración
del sitio Web. Se puede utilizar el método Authenticate para comparar las credenciales
recopiladas del usuario con la lista de pares de usuario y contraseña de la sección de
credenciales para determinar si se debe conceder el acceso. En el ejemplo siguiente, los
usuarios Kim y John pueden iniciar una sesión si proporcionan la contraseña correcta.

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 171

Los pares de credenciales del ejemplo se cifran utilizando el formato hash de contraseñas
SHA1 (Secure Hash Algorithm-1). El atributo PasswordFormat es necesario. Los valores para
esta propiedad se muestran en la tabla siguiente:

Valor Descripción

Clear Las contraseñas se almacenan en texto no cifrado. La contraseña del usuario se
compara directamente con este valor, sin transformarlo.
MD5 Las contraseñas se almacenan utilizando una síntesis hash del mensaje (MD5). Para
validar las credenciales, se obtiene la clave hash de la contraseña del usuario mediante
el algoritmo MD5 y se compara con el valor almacenado. La contraseña 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 contraseñas se almacenan utilizando una síntesis hash del algoritmo SHA1. Para
validar las credenciales, se obtiene la clave hash de la contraseña del usuario mediante
el algoritmo MD5 y se compara con el valor almacenado. La contraseña no cifrada no se
almacena nunca. Utilice este algoritmo para mejorar la seguridad mejorada relacionada
con el algoritmo MD5.

.NET Framework incluye clases y métodos que facilitan la creación de valores hash mediante
programación para su almacenamiento permanente. FormsAuthentication es una clase que
puede resultar útil para la programación de esta tarea. Su método
HashPasswordForStoringInConfigFile puede obtener una clave hash. Para que el control sea
más preciso, también se pueden utilizar las clases System.Security.Cryptography.

Las contraseñas con valores hash almacenadas en un archivo de texto no se pueden utilizar
para regenerar la contraseña original, pero son potencialmente vulnerables a un ataque de
diccionario. En este tipo de ataque, el agresor, tras obtener acceso al archivo de contraseñas,
intenta adivinar las contraseñas mediante software con el fin de generar de manera iterativa
un valor hash para todas las palabras en un diccionario de gran tamaño y comparar los valores
hash generados con los almacenados. Si almacena las contraseñas con valores hash en algún
medio, debe notificar a los usuarios que elijan contraseñas que no sean palabras comunes y
que contengan números y caracteres no alfanuméricos para evitar los ataques de diccionario.
Además, puede facilitar la administración de las credenciales almacenándolas mediante la
pertenencia a ASP.NET

4. Autorización de ASP.NET

La autorización determina si se debería conceder acceso a una identidad a un recurso
concreto. EN ASP.NET existen dos formas de autorizar el acceso a un recurso dado:

 Autorización de archivos FileAuthorizationModule realiza la autorización de archivos.
Realiza una comprobación 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 autenticación de Windows) del usuario o para la identidad de Windows del
proceso de ASP.NET. Para obtener más información, vea Suplantación de ASP.NET.
 Autorización de URL UrlAuthorizationModule realiza la autorización de URL, que
asigna usuarios y funciones a direcciones URL en aplicaciones ASP.NET. Este módulo se

CIBERTEC CARRERAS PROFESIONALES
172

puede utilizar para permitir o denegar de forma selectiva el acceso a las partes
arbitrarias de una aplicación (normalmente los directorios) para usuarios concretos o
funciones.

4.1. Utilizar la autorización de URL

Con la autorización de URL, permite o deniega explícitamente el acceso a un directorio
determinado por nombre de usuario o función. Para ello, se crea una sección authorization en
el archivo de configuración para ese directorio. Para habilitar la autorización de URL, basta con
especificar una lista de usuarios o funciones en los elementos permitir o denegar de la sección
autorización de un archivo de configuración. Los permisos establecidos para un directorio
también se aplican a sus subdirectorios, a no ser que los archivos de configuración de un
subdirectorio los reemplacen.
A continuación se muestra la sintaxis para la sección 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 Descripción

users Identifica las identidades (cuentas de usuario) a las que se destina el elemento.
Los usuarios anónimos se identifican mediante un signo de interrogación (?). Puede
especificar todos los usuarios autenticados mediante un asterisco (*).
roles Identifica una función (un objeto RolePrincipal) para la solicitud actual a la que se
permite o deniega el acceso al recurso. Para obtener más información, vea
Administrar autorizaciones con roles.
verbs Define los verbos HTTP a los que se aplica la acción, 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 función Admins,
y deniega el acceso a la identidad John (a menos que la identidad John esté incluida en la
función Admins) y a todos los usuarios anónimos:

<authorization>
<allow users="Kim"/>
<allow roles="Admins"/>
<deny users="John"/>
<deny users="?"/>
</authorization>

La siguiente sección authorization muestra cómo permitir el acceso a la identidad John y
denegárselo a todos los demás usuarios:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 173

<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 método GET de HTTP para obtener
un recurso, pero solo permite a la identidad Kim realizar una operación 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 configuración en la aplicación tienen prioridad
sobre las reglas heredadas. El sistema determina la regla que tiene prioridad creando
una lista combinada de todas las reglas de una dirección URL, con las reglas más
recientes (más arriba en la jerarquía) al principio de la lista.
 Dado un conjunto de reglas combinadas para una aplicación, ASP.NET comienza al
principio de la lista y comprueba las reglas hasta que encuentra la primera
coincidencia. La configuración 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 autorización, se permite
la solicitud. Si se encuentra una coincidencia y ésta es un elemento deny, la solicitud se
devuelve con el código de estado 401 HTTP. Si coincide un elemento allow, el módulo
permite que se siga procesando la solicitud.

5. Controles de inicio de sesión de ASP.NET

ASP.NET proporciona una funcionalidad de inicio de sesión (autenticación) segura para las
aplicaciones web ASP.NET sin necesidad de programación. Las plantillas de proyecto
predeterminadas de Visual Studio para aplicaciones web y sitios web incluyen páginas ya
generadas que permiten que los usuarios se registren en una nueva cuenta, inicien una sesión
y cambien sus contraseñas.
También puede crear sus propias páginas a las que puede agregar controles de inicio de sesión
ASP.NET con el fin de agregar funcionalidad de inicio de sesión. Para utilizar los controles de
inicio de sesión, cree páginas web y, a continuación, agregue los controles de inicio de sesión
en las páginas desde el Cuadro de herramientas.
Normalmente, restringe el acceso a las páginas ASP.NET colocándolas en una carpeta
protegida. A continuación, configure la carpeta para denegar el acceso a los usuarios anónimos
(usuarios que no están 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 sólo a los

CIBERTEC CARRERAS PROFESIONALES
174

usuarios que han iniciado la sesión.) Opcionalmente, puede asignar usuarios a roles y, a
continuación, autorizar que los usuarios tengan acceso a páginas web concretas por rol.
De manera predeterminada, los controles de inicio de sesión se integran con la autenticación
de pertenencia a ASP.NET y de formularios de ASP.NET para ayudar a automatizar la
autenticación del usuario en un sitio web. Para obtener información sobre cómo utilizar la
autenticación de pertenencia y de formularios de ASP.NET
De manera predeterminada, los controles de inicio de sesión 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 sesión
proporcionándoles un nombre de usuario y contraseña. Esta
página incluye un vínculo a la página de registro. La página
Login.aspx es accesible a usuarios anónimos.
Contiene el control Login.
En la siguiente ilustración se muestra la página de inicio de
sesión en el explorador.
Register.aspx Habilita a los usuarios para registrarse y crear una nueva
cuenta. Esta página es accesible para los usuarios anónimos y
los usuarios autenticados.
Contiene el control CreateUserWizard.
En la ilustración siguiente se muestra la página para crear
nueva cuenta (registro) en el explorador.
ChangePassword.aspx Habilita a los usuarios registrados para cambiar sus
contraseñas. Esta página sólo es accesible para los usuarios
autenticados.
Contiene el control ChangePassword.
En la ilustración siguiente se muestra la página de cambio de
contraseña en el explorador.
ChangePasswordSuccess.aspx Muestra un mensaje que indica que la contraseña se ha
cambiado correctamente. Esta página sólo es accesible para los
usuarios autenticados.
Esta página no usa ningún control de inicio de sesión de
ASP.NET.
Web.config Contiene los valores que definen el acceso a las páginas en la
carpeta Cuenta

3.1. Control Login (inicio de sesión)

El control Login muestra una interfaz de usuario para la autenticación de usuario. El control
Login contiene cuadros de texto para el nombre de usuario y la contraseña, 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 automáticamente la próxima vez que visiten el
sitio.
El control Login tiene propiedades para una presentación personalizada, para mensajes
personalizados y para vínculos a otras páginas en las que los usuarios pueden cambiar su
contraseña o recuperarla si la han olvidado. El control Login se puede utilizar de forma

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 175

independiente en una página principal o puede utilizarlo en una página de inicio de sesión
dedicada.
Si utiliza el control Login con pertenencia a ASP.NET, no necesita escribir el código para realizar
la autenticación. Sin embargo, si desea crear su propia lógica de autenticación, puede
controlar el evento Authenticate del control Login y agregar el código de autenticación
personalizado.

3.2. Control LoginView

El control LoginView le permite mostrar información diferente a los usuarios anónimos y a los
que han iniciado una sesión. El control muestra una de las dos plantillas: AnonymousTemplate
o LoggedInTemplate. En las plantillas puede agregar marcado y controles que muestren
información apropiada para usuarios anónimos y usuarios autenticados, respectivamente.
El control LoginView también incluye eventos para ViewChanging y ViewChanged, que le
permiten escribir controladores para cuando el usuario inicie una sesión y cambie el estado.

3.3. Control LoginStatus

El control LoginStatus muestra un vínculo de inicio de sesión para los usuarios que no están
autenticados y un vínculo de cierre de sesión para los que están autenticados. El vínculo de
inicio de sesión lleva al usuario a una página de inicio de sesión. El vínculo de cierre de sesión
restablece la identidad del usuario actual para que sea un usuario anónimo.
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 sesión de un usuario si el usuario ha
iniciado la sesión mediante la pertenencia a ASP.NET. De forma alternativa, si el sitio utiliza
Autenticación de Windows integrada, el control muestra el nombre de cuenta de Windows del
usuario.

3.5. Control PasswordRecovery

El control PasswordRecovery permite recuperar las contraseñas del usuario basándose en la
dirección de correo electrónico que se utilizó cuando se creó la cuenta. El control
PasswordRecovery envía un mensaje de correo electrónico con la contraseña al usuario.
Puede configurar la pertenencia a ASP.NET para almacenar contraseñas mediante el cifrado no
reversible. En ese caso, el control PasswordRecovery genera una nueva contraseña en lugar de
enviar la contraseña original al usuario.
También puede configurar la pertenencia para que incluya una pregunta de seguridad que el
usuario debe contestar para recuperar una contraseña. Si lo hace, el control
PasswordRecovery hace la pregunta y comprueba la respuesta antes de recuperar la
contraseña.
El control PasswordRecovery requiere que su aplicación pueda reenviar el mensaje de correo
electrónico a un servidor de Protocolo simple de transferencia de correo (SMTP). Puede
personalizar el texto y formato del mensaje de correo electrónico enviados al usuario
estableciendo la propiedad MailDefinition.

El ejemplo siguiente muestra un control PasswordRecovery declarado en una página ASP.NET
con valores de propiedad MailDefinition para personalizar el mensaje de correo electrónico.

CIBERTEC CARRERAS PROFESIONALES
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 información 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 información sobre el usuario:
 Nombre de usuario
 Contraseña
 Confirmación de contraseña
 Dirección de correo electrónico
 Pregunta de seguridad
 Respuesta de seguridad.
Esta información se utiliza para autenticar a los usuarios y recuperar las contraseñas del
usuario, si fuera necesario.

El siguiente ejemplo muestra una declaración de ASP.NET típica 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 contraseña. El usuario debe
proporcionar primero la contraseña original y, a continuación, crear y confirmar la nueva
contraseña. Si la contraseña original es correcta, la contraseña del usuario se cambia a la
nueva contraseña. El control también se encarga de enviar un mensaje de correo electrónico
sobre la nueva contraseña.
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 contraseña del usuario. La segunda plantilla es
SuccessTemplate, que define la interfaz de usuario que se muestra después de haber
cambiado correctamente la contraseña 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 sesión. Si

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 177

el usuario se ha autenticado, el control rellena el cuadro de texto con el nombre de inicio de
sesión del usuario.

Laboratorio 10.1
Tema: Cómo: Implementar la autenticación de formularios simple

Implementar la autenticación mediante formularios de ASP.NET. El proceso es el siguiente: Los
usuarios solicitan un recurso protegido, que es una página denominada Default.aspx. Solo un
usuario tiene acceso al recurso protegido: jchen@contoso.com, con una contraseña de
"37Yj*99P". El nombre de usuario y la contraseña están incluidos en el código del archivo
Logon.aspx. El ejemplo necesita tres archivos: el archivo Web.config, una página denominada
Logon.aspx y una página denominada Default.aspx. Los archivos residen en el directorio raíz de
la aplicación.

1. Si la aplicación tiene un archivo Web.config en la raíz de la aplicación, ábralo.
2. Si la aplicación todavía no tiene un archivo Web.config en la carpeta raíz de la
aplicación, 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 mode="Forms">
</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 dirección
URL que se debe usar para la redirección si ASP.NET no encuentra una cookie
de autenticación 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
autenticación.

<system.web>
<authentication mode="Forms">
<forms loginUrl="Logon.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
</system.web>

CIBERTEC CARRERAS PROFESIONALES
178

5. Dentro del elemento system.web, cree un elemento authorization.

<system.web>
<authentication mode="Forms">
<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 aplicación.

<system.web>
<authentication mode="Forms">
<forms loginUrl="logon.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
<authorization>
<deny users="?" />
</authorization>
</system.web>

7. Guarde el archivo Web.config y ciérrelo.

Crear la página de inicio de sesión

Cuando los usuarios solicitan cualquier página del sitio web, y si previamente no se han
autenticado, se les redirige a una página denominada Logon.aspx. Especificó este nombre de
archivo anteriormente en el archivo Web.config.
La página Logon.aspx recoge las credenciales del usuario (dirección de correo electrónico y
contraseña) y las autentica. Si el usuario es autenticado correctamente, la página de inicio de
sesión le redirige a la página solicitada originalmente.

1. Cree una página ASP.NET denominada Logon.aspx en la carpeta raíz de la aplicación.
2. Digite el siguiente código en la vista “Código” o “HTML” no en el archivo vb.

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Web.Security" %>

<script runat="server">
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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 179

</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 página contiene controles de servidor ASP.NET que recogen información sobre el usuario y
una casilla en la que los usuarios pueden hacer clic para conservar sus credenciales de inicio de
sesión. El controlador de Click del botón Iniciar sesión contiene código que comprueba la
dirección de correo electrónico y la contraseña del usuario utilizando como referencia los

CIBERTEC CARRERAS PROFESIONALES
180

valores incluidos en el código. (La contraseña es una contraseña segura que contiene varios
caracteres no alfabéticos y que tiene al menos ocho caracteres de longitud.) Si las credenciales
del usuario son correctas, el código llama al método 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 autenticación como una cookie. El método
redirige al usuario a la página solicitada originalmente. Si las credenciales del usuario no
coinciden, se muestra un mensaje de error. Observe que la página importa el espacio de
nombres System.Web.Security, que contiene la clase FormsAuthentication.

Crear la página predeterminada

Para el ejemplo, creará una página ASP.NET en la carpeta raíz de la aplicación. Como especificó
en el archivo de configuración que se negaría a todos los usuarios no autenticados el acceso a
los recursos de ASP.NET de la aplicación (incluidos los archivos .aspx, pero no los archivos
estáticos, como los archivos HTML o los archivos multimedia con imágenes, música etc.),
cuando un usuario solicite la página, la autenticación de formularios comprobará sus
credenciales y, si es necesario, le redirigirá a la página de inicio de sesión. La página que cree
también permitirá a los usuarios cerrar la sesión, borrando su vale de autenticación
almacenado (cookie).

1. Cree una página ASP.NET denominada Default.aspx en la carpeta raíz de la aplicación.
2. Digite el siguiente código en la vista “Código” o “HTML” no en el archivo vb.

<%@ Page Language="VB" %>
<html>
<head>
<title>Forms Authentication - Default Page</title>
</head>

<script runat="server">
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 página muestra la identidad autenticada del usuario, establecida por la clase
FormsAuthentication y disponible en una página ASP.NET como propiedad
Context.User.Identity.Name. El controlador de Click del botón Cerrar sesión contiene código

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 181

que llama al método SignOut para borrar la identidad del usuario y quitar el vale de
autenticación (cookie). A continuación, redirige al usuario a la página de inicio de sesión.

Laboratorio 10.2
Tema: Crear un sitio web ASP.NET con inicio de sesión de usuario.

Muchos sitios web incluyen contenido que solo está disponible para las personas que han
iniciado sesión (es decir, que se han autenticado). De forma predeterminada, ASP.NET
proporciona plantillas de proyecto de sitio web que incluyen páginas que permiten realizar
tareas de autenticación.

Este laboratorio muestra cómo utilizar una plantilla de proyecto web ASP.NET para crear un
sitio web con funcionalidad de inicio de sesión básica.

En este laboratorio desarrollaremos las siguientes tareas:

 Crear un sitio web ASP.NET.
 Crear una página solo para miembros. Solo podrán tener acceso a la página los
usuarios autenticados (usuarios que han iniciado sesión).
 Utilizar la página de registro, que permite a los usuarios registrarse y crear una nueva
cuenta.
 Iniciar sesión y obtener acceso a información que solo está disponible para los usuarios
autenticados.
 Utilizar la página de cambio de contraseña, que permite a los usuarios que tienen una
cuenta cambiar su contraseña.
 Hacer que tengan acceso a la página de cambio de contraseña 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
autenticación.

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 opción, haga clic en Nuevo
y, a continuación, haga clic en Sitio web). Aparece el cuadro de diálogo Nuevo sitio web.
3) En Plantillas instaladas, haga clic en Visual Basic, a continuación, seleccione Sitio web
ASP.NET.
4) En el cuadro Ubicación web, seleccione Sistema de archivos y escriba el nombre de la
carpeta donde desee conservar las páginas del sitio web. Por ejemplo, escriba el nombre
de carpeta C:\Websites\Login y, a continuación, haga clic en Aceptar. Visual Studio crea la
carpeta y abre el sitio web en la vista Código fuente. Observe que el sitio web raíz contiene
varios archivos y carpetas, incluidos la carpeta Cuenta, un archivo Web.config, las páginas
About.aspx y Default.aspx, y la página maestra Site.master.
5) Presione CTRL+F5 para ejecutar la página. En el explorador se muestra la página principal
del sitio web. Observe los elementos de menú (Página principal, Acerca de) y el
hipervínculo Iniciar sesión.
6) Cierre el explorador.

CIBERTEC CARRERAS PROFESIONALES
182

Crear una página solo para miembros

En esta sección creará una página solo para miembros. Solo podrán obtener acceso a esta
página los usuarios que hayan iniciado sesión (usuarios autenticados). Agregará un control
HyperLink a la página maestra para redirigir a los usuarios autenticados a la página solo para
miembros. Cuando los usuarios que no hayan iniciado sesión (usuarios anónimos) hagan clic en
el hipervínculo solo para miembros, se les redirigirá a la página de inicio de sesión donde
podrán iniciar sesión o crear una cuenta.

Para crear la página solo para miembros

1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta Cuenta
y, a continuación, haga clic en Agregar nuevo elemento. (Asegúrese de que está
creando la nueva página en la carpeta Cuenta.)
2. En el cuadro de diálogo Nuevo sitio web, seleccione Web Forms.
3. En el cuadro de texto Nombre, escriba MembersOnly.aspx.
4. Active la casilla Seleccionar página maestra y, a continuación, haga clic en Agregar.

Aparece el cuadro de diálogo Seleccionar una página maestra.

5. Debajo de Contenido de la carpeta, seleccione Site.master y, a continuación, haga clic
en Aceptar.

La página MembersOnly.aspx se crea en la carpeta Cuenta. La página es una página de
contenido de la página Site.master.

6. En el Explorador de soluciones, haga doble clic en la página MemberOnly.aspx para
abrirla y, a continuación, cambie a la Vista de diseño.
7. Agregue contenido a la página principal.

Por ejemplo, puede agregar "Welcome to the members-only page. You have
successfully logged in".

Además de la página que ha creado, la carpeta Cuenta contiene las siguientes páginas y
archivos:

 Register.aspx. Esta página permite a los nuevos usuarios crear una cuenta.
 Página Login.aspx. Solicita un nombre de usuario y una contraseña.
 ChangePassword.aspx. Esta página permite que los usuarios registrados cambien su
contraseña.
 ChangePasswordSuccess.aspx. Esta página se muestra cuando los usuarios cambian
correctamente su contraseña.
 Un archivo Web.config.

De forma predeterminada, los usuarios anónimos no tienen acceso a las páginas de la carpeta
Cuenta, excepto las páginas Register.aspx y Login.aspx. Los valores que definen el acceso a las
páginas de la carpeta Cuenta se configuran en el archivo Web.config de esta carpeta. Los
valores que definen el acceso a la página de inicio de sesión se configuran en el archivo
Web.config raíz.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 183

A continuación, modificará el control Menu de la página maestra y agregará un elemento de
menú que vincula a la página solo para miembros.

Para agregar un elemento de menú para la página solo para miembros

1. En el Explorador de soluciones, haga doble clic en la página Site.master para abrirla y a
continuación, cambie a la Vista de diseño.
2. Seleccione el control Menu que contiene los elementos de menú Home y About y, a
continuación, 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 botón Agregar un elemento de raíz en la barra de
herramientas.

En el árbol de menús 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 continuación, haga clic en el botón de puntos
suspensivos (...) .

Aparecerá el cuadro de diálogo Seleccionar dirección URL.

8. Bajo Carpetas de proyecto, haga clic en Cuenta.
9. Debajo de Contenido de la carpeta, seleccione MembersOnly.aspx y, a continuación,
haga clic en Aceptar.
10. Haga clic en Aceptar para cerrar el cuadro de diálogo.
11. Guarde y cierre la página Site.master.
12. En el Explorador de soluciones, haga clic con el botón secundario en la página
Default.aspx y, a continuación, haga clic en Establecer como página principal.

Crear una nueva cuenta

Dado que todavía no tiene una cuenta, tiene que registrarse para iniciar sesión y obtener
acceso a la página solo para miembros. Los usuarios anónimos pueden tener acceso a la página
principal (Default.aspx) y la página About, pero no al contenido de la página maestra para
usuarios autenticados. Tampoco está disponible para los usuarios anónimos el contenido de la
carpeta Cuenta (excepto la página de registro y la página de inicio de sesión). Si los usuarios
anónimos intentan tener acceso a contenido protegido, se les redirige a la página de inicio de
sesión.

Para crear una nueva cuenta

1. Presione CTRL+F5 para ejecutar el sitio.
2. Haga clic en Solo miembros.

Se muestra la página de inicio de sesión.

CIBERTEC CARRERAS PROFESIONALES
184

3. Haga clic en Registrarse.

Se muestra la página Register.aspx (Crear una nueva cuenta).

4. Escriba la información solicitada.

Por ejemplo, puede escribir ScottBrown como nombre de usuario,
scott@example.com como correo electrónico y una contraseña. De forma
predeterminada, la contraseña debe tener como mínimo seis caracteres. El nombre de
usuario no requiere caracteres no alfanuméricos y la dirección de correo electrónico
no tiene que ser única.

5. Haga clic en Crear usuario.

Al terminar el registro para una nueva cuenta, se le redirige a la página solo para
miembros. Observe que su nombre de usuario se muestra junto a Cerrar sesión.

6. Haga clic en Cerrar sesión.

Se le redirige a la página principal.

7. Cierre el explorador.

Cambiar la contraseña

En esta sección creará un hipervínculo en la página principal para redirigir a los usuarios a la
página de cambio de contraseña. Utilizará esta página para cambiar la contraseña después de
iniciar sesión.

Para crear un vínculo a la página de cambio de contraseña

1. En el Explorador de soluciones, haga doble clic en la página Site.master y cambie a la
Vista de diseño.
2. Desde el nodo Estándar del Cuadro de herramientas, arrastre un control HyperLink
hacia la página maestra y colóquelo junto al hipervínculo Iniciar sesión.

En esta parte del tutorial no importa dónde coloca el control HyperLink.

3. En las ventanas Propiedades, cambie la propiedad Text a Cambiar contraseña. Puede
aceptar el identificador predeterminado.
4. En la ventana Propiedades, haga clic en NavigateUrl y, a continuación, en el botón de
puntos suspensivos (…) .

Aparecerá el cuadro de diálogo Seleccionar dirección URL.

5. Bajo Carpetas de proyecto, haga clic en Cuenta.
6. Debajo de Contenido de la carpeta, seleccione ChangePassword.aspx y, a
continuación, haga clic en Aceptar.
7. Presione CTRL+F5 para ejecutar la página.
8. Observe que puede tener acceso al vínculo Cambiar contraseña si no ha iniciado
sesión.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 185

9. Haga clic en Cambiar contraseña.

Se le redirige a la página de inicio de sesión porque solamente los usuarios
autenticados puede obtener acceso a la página de cambio de contraseña.

10. Escriba el nombre de usuario y la contraseña que creó anteriormente y, a
continuación, haga clic en Iniciar sesión.

Se muestra la página de cambio de contraseña.

11. Haga clic en Cerrar sesión.
12. Cuando vuelva a la página principal, cierre el explorador.

A continuación, modificará el hipervínculo Cambiar contraseña para que solo tengan acceso a
él los usuarios que hayan iniciado sesión. Para esto agregará el hipervínculo al control
HeadLoginView en la página maestra.

Para que el vínculo de cambio de contraseña solo esté disponible para los usuarios que
inicien sesión

1. En el Explorador de soluciones, haga doble clic en Site.master.aspx para abrirla y, a
continuación, cambie a la Vista de diseño.
2. Elimine el hipervínculo Cambiar contraseña que creó anteriormente.
3. Cambie a la vista Código fuente.
4. En el nodo Estándar del Cuadro de herramientas, arrastre un control HyperLink al
elemento LoggedInTemplate situado dentro del control LoginView.
5. Establezca la propiedad Text en Cambiar contraseña.
6. Después del atributo runat="server", escriba "NavigateUrl =" y, a continuación, haga
doble clic en Seleccionar URL… en la lista emergente.

Se muestra el cuadro de diálogo Seleccionar elemento de proyecto.

7. Bajo Carpetas de proyecto, haga clic en Cuenta.
8. Debajo de Contenido de la carpeta, seleccione ChangePassword.aspx y, a
continuación, haga clic en Aceptar.

El marcado del hipervínculo tendrá un aspecto similar al ejemplo siguiente:

<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/Account/ChangePassword.aspx">
Change Password
</asp:HyperLink>

Observe que este hipervínculo no será visible en la Vista de diseño, 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 contraseña del sitio web.

CIBERTEC CARRERAS PROFESIONALES
186

Para probar la página de cambio de contraseña

1. Presione CTRL+F5 para ejecutar el sitio.

Se muestra la página principal, pero el vínculo Cambiar la contraseña no está visible.

2. Haga clic en Iniciar sesión y escriba su nombre de usuario y contraseña.

Se le redirige a la página principal. Observe que su nombre y el vínculo Cambiar la
contraseña están ahora visibles.

3. Haga clic en Solo miembros.

Se le redirige a la página solo para miembros.

4. Haga clic en Cambiar la contraseña.

Se muestra la página de cambio de contraseña.

5. Escriba una nueva contraseña.

Haga clic en Cambiar contraseña. Si el cambio es correcto, se mostrará la página de
cambio correcto.

Probar la nueva contraseña

A continuación utilizará su nueva contraseña para volver a iniciar sesión y obtener acceso a la
página solo para miembros.

Para probar la nueva contraseña

1. Haga clic en Cerrar sesión. Se le redirigirá a la página principal que ven los usuarios
anónimos.
2. Haga clic en Iniciar sesión.
3. Escriba su nombre de usuario y la nueva contraseña y, a continuación, haga clic en
Iniciar sesión.

Se le redirige a la página principal. Ahora puede obtener acceso al contenido que está
disponible para los usuarios autenticados. .

4. Haga clic en Solo miembros.

Se le redirige a la página solo para miembros. Si intenta iniciar sesión con la
autenticación de contraseña anterior no podrá.

5. Cierre el explorador.

En este laboratorio, utilizó páginas 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, también puede
crear sus propias páginas de inicio de sesión para proporcionar la misma funcionalidad que se
muestra en este laboratorio

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 187

Autoevaluación
1. Defina por qué es importante la seguridad en un Sitio Web
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

2. Defina qué es Autenticación
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

3. ¿Qué es Autorización?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

4. ¿Cuáles son las formas de autenticación en ASP.Net?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

5. ¿Qué opciones tengo para encriptar el Password en mi archivo de configuración
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

6. ¿Para qué sirven los controles de Inicio de Sesión?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

7. ¿Cuáles son los controles de Inicio de Sesión?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

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?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

CIBERTEC CARRERAS PROFESIONALES
188

Resumen
ASP.NET, conjuntamente con Microsoft Internet Information Services (IIS), puede autenticar
las credenciales del usuario como nombres y contraseñas mediante los métodos de
autenticación siguientes:

 Windows: básica, implícita, y Autenticación de Windows integrada (NTLM o Kerberos).
 Autenticación mediante formularios, con la que crea una página de inicio de sesión y se
administra la autenticación en la aplicación.
 Autenticación mediante certificados de cliente

ASP.NET controla el acceso a la información 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 aplicación Web tienen acceso usuarios desconocidos, existen muchas probabilidades de
que algún usuario malintencionado intente también obtener acceso. Normalmente, los
servidores de Internet accesibles al público se sondean constantemente para descartar
vulnerabilidades. Por consiguiente, se recomienda que tome precauciones y adopte medidas
de seguridad en todas sus aplicaciones Web.

La autorización determina si se debería conceder acceso a una identidad a un recurso
concreto. EN ASP.NET existen dos formas de autorizar el acceso a un recurso dado:

 Autorización de archivos FileAuthorizationModule realiza la autorización de archivos.
Realiza una comprobación 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 autenticación de Windows) del usuario o para la identidad de Windows del
proceso de ASP.NET. Para obtener más información, vea Suplantación de ASP.NET.

1. Autorización de URL UrlAuthorizationModule realiza la autorización de URL, que
asigna usuarios y funciones a direcciones URL en aplicaciones ASP.NET. Este módulo se
puede utilizar para permitir o denegar de forma selectiva el acceso a las partes
arbitrarias de una aplicación (normalmente los directorios) para usuarios concretos o
funciones.

Si desea hacer consultas:
 http://msdn.microsoft.com/es-es/library/330a99hc.aspx
Página referente al Seguridad en ASP.Net
 http://msdn.microsoft.com/es-es/library/zdh19h94.aspx
Página referente a procedimientos de seguridad básica
 http://msdn.microsoft.com/es-es/library/ks310b8y.aspx
Página referente al funcionamiento de la seguridad

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 189

UNIDAD DE
APRENDIZAJE

4

AJAX en ASP.Net – Parte I

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web que acceden a un origen de datos
usando el modelo de objetos ADO.NET usando los controles que nos proporciona AJAX haciendo
que las aplicaciones se ejecuten de una forma más rápida y dinámica.

TEMARIO
 Controles Principales AJAX.
 Control ScriptManager para administrar los scripts del lado del cliente.
 Control UpdatePanel para cargar parcialmente las páginas de forma dinámica.
 Control Timer para ejecutar tareas en intervalos de tiempo.

ACTIVIDADES PROPUESTAS
 Los alumnos manejan la conexión 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.

CIBERTEC CARRERAS PROFESIONALES
190

1. Información 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 actualización de parte de una página
(actualizar partes seleccionadas de la página en lugar de actualizar toda la página con una
devolución) y la presentación del progreso de la actualización durante las devoluciones
asincrónicas. Las actualizaciones parciales de páginas asincrónicas evitan la sobrecarga de las
devoluciones de página completa.

1. ScriptManager (control) Administra el script de cliente para las páginas web ASP.NET
habilitadas para AJAX.
2. ScriptManagerProxy (control) Permite a los complementos anidados, como las
páginas de contenido y los controles de usuario, agregar referencias de servicios y
scripts a páginas 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 páginas a
un intervalo definido. El control Timer también permite enviar la página completa.
4. UpdatePanel (control) Permite crear aplicaciones web enriquecidas y centradas en
clientes. Con los controles UpdatePanel, puede realizar una actualización parcial de
páginas.
5. UpdateProgress (control) Proporciona información de estado acerca de las
actualizaciones parciales de páginas en los controles UpdatePanel.

Todos los controles ASP.NET AJAX requieren una configuración específica 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 Diseño de
la página donde habría aparecido el control. En la vista Diseño, si hace clic en un control que
está en ese estado, Microsoft Expression Web le ofrecerá la opción de crear un nuevo archivo
web.config o actualizar el existente.

2. ScriptManager (control)
El control ScriptManager administra el script de cliente para las páginas web habilitadas para
ASP.NET AJAX. De forma predeterminada, el control ScriptManager registra el script para
Microsoft AJAX Library con la página. Esto permite a los script de cliente usar las extensiones
del sistema tipo y admitir algunas características, como la representación parcial de páginas y
las llamadas de servicio web.

El control ScriptManager necesita una configuración específica 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 producirán errores en la vista Diseño de la página donde
debería mostrarse el control. En la vista Diseño, 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 página para habilitar las siguientes características
AJAX de ASP.NET:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 191

 Funcionalidad de script de cliente de Microsoft AJAX Library y todos los scripts
personalizados que desee enviar al explorador.
 La representación parcial de páginas, que permite actualizar partes de la página de
forma independiente sin que exista ninguna devolución de datos. Los controles
UpdatePanel, UpdateProgress y Timer de ASP.NET requieren un control ScriptManager
para admitir la representación parcial de páginas.
 Las clases de proxy JavaScript para los servicios web, que permiten usar scripts de
cliente para tener acceso a servicios web y métodos marcados especialmente en las
páginas ASP.NET. Para ello, expone los servicios web y los métodos de página como
objetos con establecimiento inflexible de tipos.
 Clases JavaScript para obtener acceso a los servicios de aplicación de autenticación,
perfiles y funciones de ASP.NET.

Cuando una página contiene uno o más controles UpdatePanel, el control ScriptManager
administra la representación parcial de páginas en el explorador. El control interactúa con el
ciclo de vida de la página para actualizar las partes de la página que están dentro de controles
UpdatePanel.

La propiedad EnablePartialRendering del control ScriptManager determina si una página
participa en actualizaciones parciales de páginas. De forma predeterminada, la propiedad
EnablePartialRendering está establecida en True. Por lo tanto, la representación parcial de
páginas está habilitada de forma predeterminada cuando se agrega un control ScriptManager
a la página.

2.1. Clase ScriptManagerProxy

Sólo se puede agregar una instancia del control ScriptManager a una página. La página puede
incluir el control directamente, o de forma indirecta dentro de un componente anidado como
un control de usuario, una página de contenido para una página maestra o una página maestra
anidada. Si una página contiene un control ScriptManager, pero un componente primario o
anidado necesita características adicionales del control ScriptManager, el componente puede
incluir un control ScriptManagerProxy. Por ejemplo, el control ScriptManagerProxy permite
agregar scripts y servicios que son específicos 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 página en lugar de actualizar toda la página con una devolución de
datos. Esto se conoce como actualización parcial de la página. Una página web ASP.NET que
contiene un control ScriptManager y uno o varios controles UpdatePanel puede participar
automáticamente en las actualizaciones parciales de la página, sin un script de cliente
personalizado.

El control UpdatePanel requiere una configuración específica 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 presentarán errores en la vista Diseño de la página en la que
debería aparecer el control. En la vista Diseño, si hace clic en el control que se encuentra en
dicho estado, Microsoft Expression Web le dará la opción de crear un nuevo archivo
web.config o de actualizar el archivo web.config existente.

CIBERTEC CARRERAS PROFESIONALES
192

El control UpdatePanel es un control de servidor que ayuda a desarrollar páginas web con un
comportamiento de cliente complejo que hace que una página web parezca más interactiva al
usuario final. Normalmente, escribir código que se coordine entre el servidor y el cliente para
actualizar sólo las partes especificadas de una página web requiere un conocimiento detallado
de ECMAScript (JavaScript). Sin embargo, mediante el uso del control UpdatePanel, puede
hacer que una página web participe en las actualizaciones parciales de página sin necesidad de
escribir ningún 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 página 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 página que se pueden
actualizar sin actualizar la página entera. Este proceso se coordina mediante el control de
servidor ScriptManager y la clase de cliente PageRequestManager. Cuando las actualizaciones
parciales de la página están habilitadas, los controles pueden enviar al servidor de forma
asincrónica. Una devolución de datos asincrónica se comporta como una devolución de datos
normal en cuanto que la página de servidor resultante ejecuta la página completa y controla el
ciclo de vida. Sin embargo, con una devolución de datos asincrónica, las actualizaciones de la
página se limitan a las regiones de la página que están incluidas en los controles UpdatePanel y
que están marcadas para actualizarse. El servidor envía el marcado HTML al explorador sólo
para los elementos implicados.

3.1. Habilitar actualizaciones parciales de página

El control UpdatePanel requiere un control ScriptManager en la página web. De forma
predeterminada, las actualizaciones parciales de la página están 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 colocándolo en el panel de la vista Diseño.
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 Diseño, automáticamente se agregan las etiquetas requeridas
<ContentTemplate></ContentTemplate> alrededor del contenido. Si agrega contenido a un
control UpdatePanel en la vista Código en lugar de la vista Diseño, 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 página que contiene uno o varios controles
UpdatePanel, se representa todo el contenido de los controles UpdatePanel y se envía al
explorador. En las devoluciones de datos asincrónicas posteriores, el contenido de los
controles UpdatePanel individuales podría actualizarse. Las actualizaciones dependen de las
opciones de configuración del panel, de qué elemento produjo la devolución de datos y del
código específico de cada panel.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 193

3.3. Especificar los desencadenadores UpdatePanel

De forma predeterminada, cualquier control de devolución de datos dentro de un control
UpdatePanel produce una devolución de datos asincrónica y actualiza el contenido del panel.
Sin embargo, también puede configurar otros controles de la página 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 devolución de datos
provocan la actualización de un panel. Cuando se provoca el evento especificado del control
desencadenador (por ejemplo, un evento Click de un botón), se actualiza el panel de
actualización.

Puede crear desencadenadores de un control UpdatePanel mediante el cuadro de diálogo
Editor de la colección 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. Cómo se actualizan los controles UpdatePanel

En la lista siguiente se describen los valores de las propiedades del control UpdatePanel que
determinan cuándo se actualiza el contenido de un panel durante la representación parcial de
la página:

 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 página. Esto incluye las devoluciones de datos asincrónicas de los
controles que están dentro de otros controles UpdatePanel y las devoluciones de
datos de los controles que no están 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 devolución de datos para ese control
UpdatePanel.
o Cuando se llama explícitamente al método 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 devolución de datos.
Los controles secundarios de los controles UpdatePanel anidados no provocan
actualizaciones del control UpdatePanel externo a menos que se definan
explícitamente 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 excepción. La propiedad ChildrenAsTriggers está diseñada
para utilizarse sólo cuando la propiedad UpdateMode se establezca en Conditional.

CIBERTEC CARRERAS PROFESIONALES
194

3.5. Usar los controles UpdatePanel anidados

Los controles UpdatePanel se pueden anidar. Si se actualiza el panel primario, todos los
paneles anidados también se actualizarán. Si se actualiza un panel secundarios, se actualiza
sólo 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
página y, por consiguiente, no están diseñados para funcionar dentro de un control
UpdatePanel:

 Control TreeView en varias condiciones. Cuando se habilitan devoluciones de llamada
que no forman parte de una devolución de datos asincrónica. Cuando se establecen
estilos directamente como propiedades de control en lugar de aplicar estilos
implícitamente 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
asincrónicas.
 Control Menu cuando se establecen estilos directamente como propiedades de control
en lugar de aplicar estilos implícitamente al control mediante una referencia a los
estilos CSS.
 Controles FileUpload y HtmlInputFile cuando se usan para cargar archivos como parte
de una devolución de datos asincrónica.
 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 devolución de datos que envía el archivo es un control PostBackTrigger del
panel. Los controles FileUpload y HtmlInputFile sólo se pueden usar en escenarios de
devolución de datos.

Todos los demás 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 páginas 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 página, cada uno de
ellos con su propio control WebPartZone.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 195

 El control WebPartManager administra toda la información de estado del cliente para
los controles de elementos web. Debe estar en el control UpdatePanel extremo de una
página.
 No puede importar ni exportar controles de elementos web mediante una devolución
de datos asincrónica. (Para realizar esta tarea es necesario un control FileUpload, que
no se puede usar con devoluciones de datos asincrónicas). De forma predeterminada,
la importación de los controles de elementos web realiza una devolución de datos
completa.
 No pueden agregar ni modificar los estilos de los controles de elementos web durante
las devoluciones de datos asincrónicas.

4. ScriptManagerProxy (control)
El control ScriptManagerProxy permite que los componentes anidados, como páginas de
contenido y controles de usuario, agreguen a las páginas referencias a scripts y servicios
cuando ya se ha definido un control ScriptManager en un elemento primario.

Una página web sólo puede contener un control ScriptManager, bien de forma directa en la
propia página, o de forma indirecta en un componente anidado o primario. El control
ScriptManagerProxy permite agregar scripts y servicios a páginas de contenido y controles de
usuario donde la página maestra o la página 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
específicos a cada página que incluya un control ScriptManager determinado, quítelos del
control ScriptManager y agréguelos a páginas individuales mediante el control
ScriptManagerProxy.

El control ScriptManagerProxy requiere configuración específica 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 Diseño de la página donde
podría haber aparecido el control. En la vista Diseño, si hace clic en el control que está en ese
estado, Microsoft Expression Web le ofrecerá la opción 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
páginas a un intervalo definido. El control Timer también permite enviar la página completa.

El control Timer requiere una configuración específica 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 Diseño de la página donde habría aparecido
el control. En la vista Diseño, si hace clic en el control que está en ese estado, Microsoft
Expression Web le ofrecerá la opción de crear un nuevo archivo web.config o actualizar el
existente.

CIBERTEC CARRERAS PROFESIONALES
196

El control Timer se usa para realizar las siguientes acciones:

 Actualizar periódicamente el contenido de uno o más controles UpdatePanel sin
actualizar toda la página web.
 Ejecutar código en el servidor cada vez que un control Timer provoque una devolución
de datos.
 Enviar de forma sincrónica la página web completa al servidor web a intervalos
definidos.

El control Timer es un control de servidor que incrusta un componente JavaScript en la página
web. El componente JavaScript inicia la devolución 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 código 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
página web.

Cuando el control Timer inicia una devolución 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 página se envíe al servidor.

La propiedad Interval se usa para especificar la frecuencia con la que se producirán 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 información de estado acerca de las actualizaciones
parciales de páginas en los controles UpdatePanel. Puede personalizar el contenido
predeterminado y el diseño del control UpdateProgress. Para evitar que se produzcan
intermitencias cuando una actualización parcial de páginas es muy rápida, puede especificar
un retraso antes de que se muestre el control UpdateProgress.

El control UpdateProgress requiere configuración específica 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 Diseño de la página donde
habría aparecido el control. En la vista Diseño, si hace clic en el control que está en ese estado,
Microsoft Expression Web le ofrecerá la opción para crear un nuevo archivo web.config o
actualizar el archivo web.config existente.

El control UpdateProgress ayuda a diseñar una interfaz de usuario más intuitiva cuando una
página web contiene uno o más controles UpdatePanel de representación parcial de páginas.
Si una actualización parcial de páginas es lenta, puede usar el control UpdateProgress para
proporcionar comentarios visuales acerca del estado de la actualización. Puede colocar varios
controles UpdateProgress en una página, 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 página.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 197

6.1. Información general

El control UpdateProgress representa un elemento <div> que se muestra u oculta en función
de que un control UpdatePanel asociado haya provocado o no una devolución asincrónica. El
control UpdateProgress no aparece para la representación de la página inicial y las
devoluciones sincrónicas.

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 devolución desde un control UpdatePanel, se muestran los controles UpdateProgress
asociados. Si no se asocia el control UpdateProgress con un control UpdatePanel específico, el
control UpdateProgress muestra el progreso de las devoluciones asincrónicas.

Si la propiedad ChildrenAsTriggers de un control UpdatePanel se establece en false y se origina
una devolución asincrónica desde dicho control UpdatePanel, se mostrarán 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 Diseño. Por ejemplo, puede arrastrar otros controles ASP.NET y
HTML al panel y, a continuación, colocar el cursor en el panel y escribir directamente en él. Al
agregar un mensaje a un control UpdateProgress en la vista Diseño, se agregan
automáticamente las etiquetas <ProgressTemplate> necesarias alrededor del contenido. Si
agrega contenido a un control UpdateProgress en la vista Código en lugar de hacerlo en la vista
Diseño, debe agregar manualmente las etiquetas <ProgressTemplate></ProgressTemplate> si
aún no existen; de lo contrario, el mensaje no se representará.

6.4. Especificar el diseño de contenido

Si la propiedad DynamicLayout es true, el control UpdateProgress no ocupa espacio
inicialmente en la presentación de la página. En su lugar, la página cambia dinámicamente para
mostrar el contenido del control UpdateProgress cuando es necesario. Para admitir la
presentación dinámica, el control se representa como un elemento <div> cuya propiedad de
estilo de presentación se ha establecido inicialmente en none.

Si la propiedad DynamicLayout es false, el control UpdateProgress ocupa espacio en la
presentación de la página, aunque no sea visible. En tal caso, el elemento <div> del control
tiene la propiedad de estilo de presentación establecida en block y la visibilidad establecida
inicialmente en hidden.

6.5. Colocar los controles UpdateProgress en la página

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

CIBERTEC CARRERAS PROFESIONALES
198

actualiza como resultado de una devolución asincrónica. 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 actualización, una devolución
originada dentro del panel secundario hace que se muestren los controles UpdateProgress
asociados con el panel secundario. También se muestran los controles UpdateProgress
asociados con el panel primario. Si se origina una devolución desde un control secundario
inmediato del panel primario, sólo se muestran los controles UpdateProgress asociados con el
panel primario. Esto sigue la lógica del desencadenamiento de devoluciones.

Laboratorio 11.1
Tema: Crear una página con dos regiones con actualización independiente

En este apartado, aprenderá a trabajar con varios controles UpdatePanel en una página. Al
usar varios controles UpdatePanel en una página, puede actualizar regiones de la página de
forma incremental por separado o conjuntamente.

Para crear una página con dos regiones con actualización independiente

1. En el menú Archivo, elija Nuevo y, a continuación, haga clic en ASPX.
2. Coloque el cursor en la vista Diseño de la página 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 página. Si aparece un cuadro
de diálogo para que agregue un archivo web.config al sitio web para admitir la versión
3.5 de .NET Framework, haga clic en Sí. Si aparece un cuadro de diálogo 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 página.
5. Con uno de los controles UpdatePanel seleccionado en la página, 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 categorías Controles ASP.NET y
Estándar, arrastre un control Label a uno de los controles UpdatePanel en la vista
Diseño.
7. Con el control Label seleccionado en la página, en el panel de tareas Propiedades de
etiqueta, establezca la propiedad Text en "Panel Created".
8. En el panel de tareas Cuadro de herramientas, en las categorías Controles ASP.NET y
Estándar, arrastre un control Button al mismo control UpdatePanel que contiene el
control Label.
9. Con el botón seleccionado en la página, en el panel de tareas Propiedades de etiqueta,
establezca la propiedad Text en "Refresh Panel".
10. En el panel de tareas Cuadro de herramientas, en las categorías Controles ASP.NET y
Estándar, arrastre un control Calendar al otro control UpdatePanel en la vista Diseño.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 199

11. En la vista Código de la página, antes de la etiqueta </head>, agregue siguiente código:

<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 Código, 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 página en el explorador web.
15. En la página en el explorador web, haga clic en el botón. El texto del panel cambia para
mostrar la última vez que se actualizó el contenido del panel. En el calendario,
desplácese 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 código final de la página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

CIBERTEC CARRERAS PROFESIONALES
200

<title>Untitled 2</title>
<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>
</head>
<body>
<form id="form1" runat="server">
<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
página. Cuando los controles UpdatePanel no están 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 devolución de datos asincrónica.)

Cuando los paneles están 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 actualización externo, el panel de actualización interno también se actualiza.

Laboratorio 11.2
Tema: Actualizar un control UpdatePanel en un intervalo de tiempo.

En este laboratorio se va actualizar parte de una página 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 página se elimina la necesidad
de actualizar toda la página con cada devolución de datos. Sólo se actualizará el contenido del
control UpdatePanel.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 201

Para actualizar un control UpdatePanel en un intervalo de tiempo

1. En el menú Archivo, elija Nuevo y, a continuación, haga clic en ASPX.
2. Coloque el cursor en la vista Diseño de la página 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 página. Si aparece un cuadro
de diálogo que le pide que agregue o actualice un archivo web.config para admitir la
versión 3.5 de .NET Framework, haga clic en Sí. Si aparece un cuadro de diálogo 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 página.
5. Coloque el cursor en el control UpdatePanel en la vista Diseño.
6. En el panel de tareas Cuadro de herramientas, en las categorías Controles ASP.NET y
AJAX, haga doble clic en el control Timer para insertarlo en el control UpdatePanel de
la página.
7. Con el control Timer seleccionado en la página, 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 Diseño.
9. En el panel de tareas Cuadro de herramientas, en las categorías Controles ASP.NET y
Estándar, haga doble clic en el control Label para agregarlo al control UpdatePanel.
10. Con el control Label seleccionado en la página, en el cuadro Texto del panel de tareas
Propiedades de etiqueta, escriba El panel aún no se ha actualizado.
11. Coloque el cursor fuera del control UpdatePanel.
12. En el panel de tareas Cuadro de herramientas, en las categorías Controles ASP.NET y
Estándar, haga doble clic en el control Label para agregar una segunda etiqueta a la
página.
13. En la vista Código de la página, antes de la etiqueta </head>, agregue siguiente código:

<script runat="server" type="text/vb">
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 Código, 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 página 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 código final de la página:

CIBERTEC CARRERAS PROFESIONALES
202

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/vb">
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>
<form id="form1" runat="server">
<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 básicos para usar un control Timer y un control
UpdatePanel para habilitar las actualizaciones parciales de páginas. Debe agregar un control
ScriptManager a cualquier página que contenga un control UpdatePanel o un control Timer. De
manera predeterminada, un control Timer que se encuentre dentro del panel hará que sólo se
actualice el panel durante una devolución de datos asincrónica. Un control Timer fuera de un
panel puede provocar que el control UpdatePanel se actualice si está configurado como un
desencadenador para el panel.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 203

Autoevaluación
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. ¿Cuál es la ventaja de programar usando AJAX?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

CIBERTEC CARRERAS PROFESIONALES
204

Resumen
La representación parcial de páginas elimina la necesidad de actualizar la página por completo,
como resultado de una devolución de datos. En su lugar, sólo se actualizan las partes de la
página que hayan cambiado. De este modo, la página no se vuelve a cargar por completo en
cada devolución de datos, lo que facilita la interacción del usuario con la página web. ASP.NET
permite agregar la representación parcial de páginas a páginas 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 asincrónico y XML). Las características de AJAX de ASP.NET
permiten crear aplicaciones web enriquecidas que incorporan muchas ventajas sobre las
aplicaciones web basadas totalmente en servidor. Use las características de AJAX cuando
desee realizar alguna de las siguientes acciones:

 Mejorar la experiencia del usuario con páginas web enriquecidas, que responden
mejor a las acciones de los usuarios y se comportan como aplicaciones clientes
tradicionales.
 Reducir actualizaciones de páginas completas y evitar el parpadeo de páginas.
 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 características principales de ASP.NET que admiten la representación parcial de páginas
son:

 Un modelo declarativo que funciona como los controles de servidor ASP.NET. En
muchos escenarios, puede especificar la representación parcial de páginas únicamente
mediante el uso del marcado declarativo.
 Controles de servidor que realizan las tareas subyacentes necesarias para las
actualizaciones parciales de páginas. Entre estos se incluye el control ScriptManager y
el control UpdatePanel.
 Integración 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
devolución de datos, mostrar mensajes de progreso personalizados durante una
devolución de datos asincrónica y determinar cómo se procesan las devoluciones de
datos asincrónicas simultáneas.
 Las opciones de control de errores para la representación parcial de páginas, 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 automática al
usar los controles de servidor.

 http://msdn.microsoft.com/es-es/library/cc295497.aspx
Página referente a Controles en AJAX
 http://msdn.microsoft.com/es-es/library/bb386573.aspx
Página referente a representación parcial de páginas.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 205

UNIDAD DE
APRENDIZAJE

4

AJAX en ASP.Net – Parte II

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web que acceden a un origen de datos
usando el modelo de objetos ADO.NET usando los controles que nos proporciona AJAX Control
Toolkit.

TEMARIO
 Definición de AJAX Control Toolkit
 Proceso de Instalación del AJAX Control Toolkit
 Controles más utilizados: Accordion, ConfirmButton, FilteredTextBox,
NumericUpDown, PasswordStrength, Slider.

ACTIVIDADES PROPUESTAS
 Los alumnos manejan la conexión 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 Aplicación Web.

CIBERTEC CARRERAS PROFESIONALES
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 características de
ASP.NET AJAX sin más que un arrastre de ratón. Del mismo modo, con su descarga disponemos
de ejemplos de uso, así como del propio código 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 añaden un comportamiento a
un control Web existente.

Se trata de una serie de pequeñas 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 botón con una alerta asociada, hasta un complejo panel
que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo información
entre el cliente y el servidor sin ningún tipo de recarga de página. Su uso hará que nuestra
Web sea mucho más atractiva y simpática 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 código fuente junto con el resto
del Kit. Nosotros elegiremos la opción en que sí lo tiene. Seguiremos a continuación los
siguientes pasos:

1.- Aceptar los términos y condiciones tras haberlos leído.

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 código fuente, su correspondiente
binario, templates, etc. Destacamos la carpeta “SampleWebSite”, un proyecto con ejemplos
específicos de cada uno de los controles que componen esta versión 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.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 207

Iniciamos un nuevo proyecto ASP.NET

6.- Ahora ya tenemos un proyecto totalmente preparado para trabajar con ASP.NET. A
continuación vamos a añadir los controles del ASP.NET AJAX Control Toolkit a nuestra caja de
herramientas. Para ello, una vez dentro de cualquiera de nuestras páginas (por ejemplo
default.aspx), ubiquemos el ratón sobre nuestra caja de herramientas y presionamos el botón
derecho para elegir Add Tab.

Añadimos una pestaña para el Toolkit

CIBERTEC CARRERAS PROFESIONALES
208

Con ello, crearemos un tab específico en nuestra caja de herramientas para el ASP.NET AJAX
Control Toolkit.

7.- Nombraremos ese tab como “ASP.NET AJAX Control Toolkit”.

8.- A continuación desplegamos nuestro nuevo tab, presionamos sobre éste el botón de la
derecha y elegimos “Choose ítems...”

9.- Desde la pestaña en que nos encontramos (.NET Framework Components), hacemos clic
sobre el botón 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.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 209

Controles y extendedores del Toolkit

2. Principales Controles del AJAX Control Toolkit
2.1. Accordion

El control Web Accordion te permite ubicar múltiples paneles, de modo que únicamente uno
será visible en cada momento. Dichos paneles son los AccordionPane, de los que debemos
definir la cabecera (Header) y el contenido (Content). El estado del Accordion es guardado, de
modo que el AccordionPane activo se mantendrá visible a través de los postbacks.

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. También se puede
definir individualmente como atributo de cada AccordionPane.

• FadeTransitions: en caso de ser true se aplicacará un efecto de fading en la transición, en

CIBERTEC CARRERAS PROFESIONALES
210

caso de ser false la transición se realizará de modo normal. Es optativo y por defecto vale false.

• TransitionDuration: cantidad de milisegundos que definen la duración de una transición. Se
consigue un efecto muy agradeble con transición de unos 200-300 milisegundos.

• FramesPerSecond: número de frames por segundo que se usará en la animación de las
transiciones. Suele ser suficiente un número superior a 40.

• AutoSize: define la restricción en la altura del Accordion. Puede tomar tres valores:

o None: No tiene ninguna restricción. La altura del Accordion no tiene límite. Es
importante reseñar que esto puede implicar que otros elementos de la misma Web
sean movidos.

o Limit: como máximo, el Accordion medirá lo que marque la propiedad Height. Si el
Accordion es más alto de lo que marque su Height, al AccordionPane activo se le
añadirá un scroll para ajustarse al límite. En caso de ser menor a ese límite 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 aplicación 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" >
<head runat="server">
<title>Accordion</title>
<style>
.accordionCabecera
{
border: 1px solid black;
background-color: #ffd800;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 211

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>
<form id="form1" runat="server">
<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">
<Header>Panel 2</Header>
<Content>Contenido 2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Panel 3</Header>
<Content>Contenido 3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

</div>
</form>
</body>
</html>

CIBERTEC CARRERAS PROFESIONALES
212

Al tratarse de nuestro primer ejemplo, hemos mostrado todo el código de la página al
completo. El motivo es que tengamos en cuenta que al arrastrar el control Accordion desde
nuestra caja de herramientas, automáticamente quedará registrado el Assembly
correspondiente.

Sin embargo, lo que no se hará automáticamente, y debemos hacerlo nosotros siempre, es
incluir una referencia al ScriptManager, lo que no requiere más que otro sencillo arrastre
desde nuestra caja de herramientas.

Además, y como es obvio, deberán definirse las clases CSS tanto de la cabecera como del
contenido.

En el resto de ejemplos, no mostraremos más que el código específico 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 confirmación. En ésta deberemos elegir “sí” o “no” para que se
ejecute o no el evento asociado al control en cuestión.

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…?”

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 213

Ejemplo
Mostraremos un botón que se ocupará de recargar la página. Cuando se nos muestre la
ventana de confirmación elegiremos si realmente deseamos recargarla o no.

<asp:Button ID="Button1" runat="server" Text="Recargar página" />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="Button1"
ConfirmText="¿Realmente desea recargar la página?" />
</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 múltiples
combinaciones:
- Numbers: todos los números
- LowercaseLetters: letras minúsculas.
- UppercaseLetters: letras mayúsculas.
- 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
separándolos en comas.
•ValidChars: sólo se le hará caso si hemos elegido a “Custom” como FilterType. Será un string
con los caracteres que consideraremos válidos.

Ejemplo
En nuestro ejemplo vamos a permitir que en nuestro TextBox se escriban únicamente números
y los signos matemáticos ‘+’, ‘-‘, ‘*’ 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 aritmético.
- Subir o bajar dentro de un listado de valores que le demos.
- Llamar a un servicio Web o un método de la página diferente según si incrementamos o
decrementamos.

Podremos asignar botones para que hagan de incrementador/decrementador o dejar los que
hay por defecto.

CIBERTEC CARRERAS PROFESIONALES
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 (mínimo 25). Si elegimos que otros botones hagan esa función, 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 función de
incrementar y decrementar.
•ServiceDownPath/ServiceUpPath: path del servicio Web al que llamaremos cuando se
incremente o decremente. En caso de estar trabajando con métodos de página no utilizaremos
esta propiedad.
•ServiceDownMethod/ServiceUpMethod: método 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 parámetro del método al que llamaríamos, y lo podemos
utilizar para distinguir qué elemento está llamando al método.

Ejemplo
En nuestro sencillo ejemplo, vamos a viajar por los planetas del sistema solar, donde ya no
incluiremos a nuestro querido Plutón.

<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;Júpiter;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 contraseña que está escribiendo, en base a unos parámetros
típicos de fortaleza que definiremos nosotros:

- Número total de caracteres.
- Exigencia de signos.
- Exigencia de combinar mayúsculas y minúsculas.
- Exigencia de números.

Podemos elegir y configurar los dos modos que tenemos de mostrar al usuario la fortaleza de
su password:
- Mediante texto 100% configurable.
- Mediante una barra que se irá rellenando.

Además, podemos añadir la opción de “ayuda”, donde explicar al usuario cómo debe ser su
contraseña.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 215

Propiedades
• TargetControlID: ID del TextBox sobre el que vamos a trabajar.
• DisplayPosition: posición 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 mínima que debería tener la contraseña.
• PrefixText: prefijo a mostrar cuando estemos mostrando el texto que describa la fortaleza de
la contraseña. Típicamente será “Fortaleza= “.
• TextCssClass: clase CSS que se aplicará al texto que describe la fortaleza de la contraseña.
• MinimumNumericCharacters: cantidad mínima de caracteres numéricos.
• MinimumSymbolCharacters: cantidad mínima de signos (ej.: $ ^ *)
• RequiresUpperAndLowerCaseCharacters: especificamos si exigimos la combinación de
mayúsculas y minúsculas.
• TextStrengthDescriptions: listado de texto que se usará para describir la fortaleza de la
contraseña. Irá ordenado de débil a fuerte y separado por punto y coma ‘;’. Tendrá un mínimo
de 2 textos y un máximo de 10. Por ejemplo: “muy débil;débil;mejorable;buena;perfecta”.
• CalculationWeightings: listado de 4 valores numéricos separados por ‘;’, donde la suma de
ellos debe dar 100. Cada valor asigna un porcentaje de importancia a una característica del
password; por ejemplo “40;25;15;20” significa que el 40% del peso de fortaleza viene de la
longitud de la contraseña, el 25% a la cantidad de números, el 15% a mayúsculas/minúsculas y
el 20% a la cantidad de caracteres no alfanuméricos.
• BarBorderCssClass: Clase CSS del borde de la barra indicadora.
• 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: posición 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:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<cc1:PasswordStrength ID="PasswordStrength1" runat="server"
DisplayPosition="rightside"
MinimumNumericCharacters="2"
MinimumSymbolCharacters="2"
PreferredPasswordLength="13"
PrefixText="Fortaleza: "
RequiresUpperAndLowerCaseCharacters="true"
StrengthIndicatorType="Text"
TargetControlID="TextBox1"
TextStrengthDescriptions="muy débil; débil; mejorable; buena; perfecta">
</cc1:PasswordStrength>

CIBERTEC CARRERAS PROFESIONALES
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 múltiples.
Por ejemplo se puede sincronizar con un TextBox o una Label, de modo que se va mostrando el
valor numérico que representa.
Podemos elegir un valor mínimo y un valor máximo, así como permitir números decimales. El
movimiento del Slider puede ser contínuo o discreto (le marcaremos los pasos que debe dar).
Además, 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 animación.
• HandleAnimationDuration: duración en milisegundos de la animación.
• RailCssClass: Asigna una clase CSS a la vía 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
botón izquierdo del ratón.

Ejemplo
Mostramos lo fácil que es crear un Slider.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="TextBox1"
BoundControlID="TextBox2" />

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 217

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. Diseñe el siguiente Web Form:

Observación: En este diseño es necesario que el control GridView se encuentre dentro
de un control UpdatePanel.

2. Añada la siguiente linea en la sección ConnectionStrings del web.config.

<add name="Cn"
connectionString="server=(local);database=ventasdemo;uid=sa;pwd=sql"/>

3. Cree una clase Conexión donde se pueda establecer la conexión con la base de datos y
devolver un objeto configurado SqlConnection.

Imports System.Data.SqlClient
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 código en el WebForm:

Imports System.Data
Imports System.Data.SqlClient

CIBERTEC CARRERAS PROFESIONALES
218

Public Class FacturasCliente
Inherits System.Web.UI.Page

Dim cn As New Conexion
Dim objCn As SqlConnection = cn.conectar

Protected Sub Page_Load(ByVal sender As Object,…)
If Not Page.IsPostBack Then
Dim da As New SqlDataAdapter("select * from tb_cliente order by 2", objCn)
Dim tabla As New DataTable
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
Dim tabla As New DataTable
da.Fill(tabla)
With GridView1
.DataSource = tabla
.DataBind()
End With
End Sub
End Class

5. Ejecutemos la Aplicación 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 página se vuelve ha
cargar, pero agregando un paso más 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 página lo cual hará que la consulta sea más rápida. Para poder ver eso
hagamos lo siguiente:

Seleccionemos el UpdatePanel desde la ventana de propiedades y entremos a la
propiedad Triggers:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 219

Aparecerá al siguiente cuadro de diálogo 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 aplicación CTRL + F5.
Ahora cuando lo ejecute se dará cuenta que cada vez que selecciona un cliente ya no
se recarga la página, 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 más rápida.

CIBERTEC CARRERAS PROFESIONALES
220

Laboratorio 12.2
Tema: Ejemplo de configuración de Controles de AJAX Control Toolkit

En este laboratorio desarrollaremos un ejemplo de como utilizar algunos de los controles del
AJAX Control Toolkit.

1. Diseñe el siguiente WebForm:

2. Agregue un control PasswordStrength de AJAX al txtPassword:

3. Haga Click en el botón “Ok” y pasemos a configurar sus propiedades:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 221

Para poder hacer que el password alcance el nivel de “Perfecto” debemos ingresar
como mínimo, a parte de todos los caracteres que queramos, 2 caracteres numéricos y
2 simbolos, de otra forma no alcanzaremos en nivel perfecto.

4. Agregue un control CalendarExtender de AJAX al txtFecha:

CIBERTEC CARRERAS PROFESIONALES
222

5. Haga Click en el botón “Ok” y pasemos a configurar sus propiedades:

El CalendarExtender tiene varias vistas: Por Días, por Meses, o por Años. Eso lo puede
configurar con la propiedad “DefaultView”. Es importante también configurar la
propiedad Format para que al seleccionar la fecha, en el Textbox aparezca la fecha en
el formato que se desea.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 223

6. Agregue un control FilteredTextBox de AJAX al txtDni:

7. Haga Click en el botón “Ok” y pasemos a configurar sus propiedades:

CIBERTEC CARRERAS PROFESIONALES
224

En este ejemplo solo estamos seleccionando la propiedad FilterType como Numbers para
que el usuario solo pueda digitar números, y para establecer la cantidad máxima de
caracteres a 8 solo configure la propiedad MaxLength del txtDni.

8. Agregue un control NumericUpDown de AJAX al txtEdad:

9. Haga Click en el botón “Ok” y pasemos a configurar sus propiedades:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 225

En este ejemplo estamos asumiendo que los usuarios no deben ser menores de edad por
tal razón 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:

CIBERTEC CARRERAS PROFESIONALES
226

11. Haga Click en el botón “Ok” y pasemos a configurar sus propiedades:

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 227

Autoevaluación
1. Defina qué es AJAX Control Toolkit
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

2. ¿Cómo 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
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

CIBERTEC CARRERAS PROFESIONALES
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 características de
ASP.NET AJAX sin más que un arrastre de ratón. Del mismo modo, con su descarga disponemos
de ejemplos de uso así como del propio código 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 añaden un comportamiento a
un control Web existente.

Se trata de una serie de pequeñas 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 botón con una alerta asociada, hasta un complejo panel
que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo información
entre el cliente y el servidor sin ningún tipo de recarga de página. Su uso hará que nuestra
Web sea mucho más atractiva y simpática al usuario a la par que potente y efectiva.

Tiene distintos controles que se podrían 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.

Páginas para consultar:

 http://msdn.microsoft.com/es-es/library/bb470455(v=vs.90).aspx

Página referente a AJAX Control Toolkit

 http://msdn.microsoft.com/es-es/library/bb470384(v=VS.90).aspx

Página referente a Controles de AJAX

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 229

UNIDAD DE
APRENDIZAJE

4

Manejo de Imágenes en ASP.Net y AJAX

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web conectadas con base de datos
utilizando el modelo de ADO.Net cargando imágenes en el servidor y almacenandolas en la
base de datos.

TEMARIO

 Explicación del Caso Práctico: Web de Contactos.

 Explicación del uso de LightBox2 en AJAX para crear una Galería de Imágenes.

ACTIVIDADES PROPUESTAS

 Los alumnos desarrollan la aplicación Web de Contactos conectandose con una base
de datos manejando imágenes.

 Los alumnos desarrollan aplicaciones utilizando el componente de AJAX LightBox 2.0
para crear una galeria de imágenes.

CIBERTEC CARRERAS PROFESIONALES
230

1. Caso práctico: Web de Contactos

En esta sesión haremos el desarrollo práctico del desarrollo de la Aplicación Web de
contactos que pasamos a detallar a continuación:

1.1. Página 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 página
de inicio, registrar un nuevo contacto, mostrar el listado de contactos, ver la
galería de fotos, o ir a la opción acerca de:

1.2. Página de Registro
En esta segunda pantalla el usuario podrá registrar un nuevo contacto
colocando sus datos personales tales como: Nombres, Apellidos, Email,
Teléfono y adicionalmente podrá agregarle una foto a través de un control
FileUpload.

Al seleccionar la foto ya queda la ruta del archivo en el control FileUpload
como lo muestra la siguiente figura:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 231

1.3. Página de Confirmación
Esta página se muestra cuando el usuario hace click en Registrar el nuevo
contacto de la página anterior, entonces aparece la página donde se confirman
sus datos ingresados, incluyendo la foto seleccionada.

1.4. Página de Listado
Esta página aparece cuando el usuario selecciona la opción “listado” del menú
principal, carga en un control DataList personalizado todos los contactos
ingresados con su respectiva foto, y muestra la opción de buscar contactos por
la letra en orden alfabético. Utilizamos un control RadioButtonList para poder
hacer la lista del abecedario.

CIBERTEC CARRERAS PROFESIONALES
232

Muestra solo los contactos filtrados por la letra seleccionada:

1.5. Página de Acerca de:
Esta página muestra información acerca de la empresa, o institución donde se
desarrolló este Web Site y datos del autor.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 233

2. Caso práctico: Galería de Imágenes con LightBox 2 en AJAX
1.1. Página de Galería:

En esta pantalla hay dos opciones de para mostrar galerías usando LigthBox 2
de AJAX: Una opción es de imágenes individuales y la otra opción es para
mostrar imágenes con opción de avanzar y retroceder.

En la siguiente figura se muestra la opción de imagen individual sin opciones
de navegación.

CIBERTEC CARRERAS PROFESIONALES
234

En las siguientes figuras se muestran la opción de imágenes con opciones de
navegación.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 235

Laboratorio 13.1
Tema: Desarrollo de Aplicación Web de Contactos con imágenes

1. Diseñe el siguiente WebForm llamado RegistroContactos.aspx que herede el diseño de la
página maestra site.master.

2. Programe el siguiente código 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 almacenarán en la carpeta
DirectorioImagenes.

Imports System.Data.SqlClient
Imports System.IO

Partial Class RegistroContacto
Inherits System.Web.UI.Page

Protected Sub btnRegistrar_Click(ByVal sender …)

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

cmd.ExecuteNonQuery()

'subir el archivo al servidor
Dim nombre As String = FileUploadImage.FileName
FileUploadImage.SaveAs(Server.MapPath("~/DirectorioImagenes/") + nombre)

CIBERTEC CARRERAS PROFESIONALES
236

'redireccionar la página
Response.Redirect("ConfirmacionRegistro.aspx")

Finally
connection.Close()
End Try
End Sub
End Class

3. Diseñe el siguiente WebForm llamado RegistroContactos.aspx que herede el diseño de la
página maestra site.master.

4. Programe el siguiente código en el cual veremos la confirmación de los datos del contacto
incluyendo la foto que se almacenó en la carpeta DirectorioImagenes. Al presionar el
botón “Aceptar” regresará a la página de inicio.

Imports System.IO
Imports System.Data.SqlClient
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Data
Partial Class ConfirmacionRegistro
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, …)

Dim connection As New _
SqlConnection("server=LocalHost;database=dbContactos;uid=sa;pwd=sql")

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()

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 237

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…)
Response.Redirect("Default.aspx")
End Sub
End Class

5. Diseñe el siguiente WebForm llamado ListadoContactos.aspx que herede el diseño de la
página maestra site.master.

Diseño del control DataList: Seleccione de “Tareas Comunes” la opción “Editar Plantillas”

Mostrará la plantilla ItemTemplate así como se muestra en la siguiente figura:

CIBERTEC CARRERAS PROFESIONALES
238

Hagamos el diseño que se muestra a continuación 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 opción “Edit
Databindings”.

Se mostrará el siguiente cuadro de diálogo donde debe escribir la siguiente expresión de
enlace a datos tal como muestra la figura:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 239

Para enlazar los labels a datos de “Tareas Comunes” seleccione la opción “Edit
DataBindins” y escriba la siguiente expresión de enlace a datos.

CIBERTEC CARRERAS PROFESIONALES
240

Haga click en “OK” y de “Tareas Comunes” del DataList Seleccione la opción “Finalizar
Editar Plantillas”. El DataList debe mostrase como esta en la figura a continuación:

Para cambiar el número de columnas seleccionamos de “Tareas Comunes” del control
DataList, la opción “Property Builder”:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 241

Cambiar donde dice “Columnas” con el valor 4.

Haga Click en OK. La siguiente figura muestra el acabado final del DataList:

CIBERTEC CARRERAS PROFESIONALES
242

6. Programe el siguiente código para mostrar la información de todos los contactos y de los
filtrados:
Imports System.Data
Imports System.Data.SqlClient
Partial Class ListadoContactos
Inherits System.Web.UI.Page
Dim connection As New _
SqlConnection("server=LocalHost;database=dbContactos;uid=sa;pwd=sql")
Protected Sub Page_Load(ByVal sender As Object, …)
If Not Page.IsPostBack Then
Dim da As New SqlDataAdapter( _
"select * from tb_contacto order by 3", connection)
Dim tabla As New DataTable
da.Fill(tabla)
With DataList1
.DataSource = tabla
.DataBind()
End With
End If
End Sub

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 243

Laboratorio 13.2
Tema: Desarrollo de Aplicación Web de Galería de imágenes 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 código en
la vista de código o HTML (sección 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 código

Protected Sub Page_Load(ByVal sender As Object, …)
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

CIBERTEC CARRERAS PROFESIONALES
244

Autoevaluación
1. ¿Cómo se puede almacenar imágenes en la base de datos?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

2. ¿Cómo puedo subir archivos al servidor?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

3. Defina cómo se configura un control DataList
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

4. ¿Cuál es la ventaja de un control DataList en comparación con un GridView?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 245

Resumen
El manejo de imágenes en una aplicación 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 imágenes en el servidor, por ello es que
debemos subir los archivos de la imagen a nuestro proyecto para que sea más fácil de
administrar y también el enlace de controles a datos sea más práctico y rápido.

El control FileUpload es de gran utilidad no solo para cargar imágenes sino también para subir
cualquier tipo de archivo a nuestro servidor o aplicación y se puede direccionar para que los
guarden en un directorio específico.

Ligthbox 2.04 es un proyecto desarrollado en AJAX para poder ser reutilizado y crear una
galería de imágenes.

Puede extender aplicaciones ASP.NET existentes y desarrollar otras nuevas que incorporen la
funcionalidad AJAX (JavaScript asincrónico y XML). Las características de AJAX de ASP.NET
permiten crear aplicaciones web enriquecidas que incorporan muchas ventajas sobre las
aplicaciones web basadas totalmente en servidor. Use las características de AJAX cuando
desee realizar alguna de las siguientes acciones:

 Mejorar la experiencia del usuario con páginas web enriquecidas, que responden
mejor a las acciones de los usuarios y se comportan como aplicaciones clientes
tradicionales.
 Reducir actualizaciones de páginas completas y evitar el parpadeo de páginas.
 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.

Página de consulta
 http://www.huddletogether.com/projects/lightbox2/
Página referente a LightBox 2.04

 http://www.123aspx.com/redir.aspx?res=30249
Página referente a Carga de Imágenes desde Base de Datos.

CIBERTEC CARRERAS PROFESIONALES
246

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 247

UNIDAD DE
APRENDIZAJE

4

ASP.Net MVC

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, los alumnos elaboran aplicaciones Web utilizando el patrón de
desarrollo MVC (Modelo – Vista – Controlador)

TEMARIO
 Definición de MVC
 Ventajas de una aplicación Web basada en MVC
 Características del Marco MVC
 Estructura de una aplicación MVC

ACTIVIDADES PROPUESTAS
 Los alumnos desarrollan aplicaciones utilizando el patrón de desarrollo MVC, utilizando
controllers y views.
 Los alumnos desarrollan aplicaciones utilizando el patrón de desarrollo MVC
agregando funcionalidades con Controles AJAX.

CIBERTEC CARRERAS PROFESIONALES
248

1. ASP.NET MVC
El Model-View-Controller (MVC) separa la arquitectura de una aplicación 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, presentación muy comprobable que (como con las aplicaciones de formularios
basados en Web) se integra con las características de ASP.NET, como páginas maestras
y la autenticación basada en membresía. 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 patrón de diseño estándar que muchos desarrolladores están
familiarizados. Algunos tipos de aplicaciones web se beneficiarán de la framework
MVC. Otros seguirán utilizando el tradicional patrón de la aplicación 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 aplicación que aplica la lógica para la
aplicación 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 información de una base de datos, operar sobre ella y, a
continuación escribir la información actualizada en una tabla Productos en SQL Server.

En aplicaciones pequeñas, el modelo es a menudo una separación conceptual en lugar de uno
físico. Por ejemplo, si la aplicación sólo lee un conjunto de datos y lo envía a la vista, la
aplicación no tiene una capa del modelo físico y las clases asociadas. En ese caso, el conjunto
de datos asume el papel de un modelo de objetos.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 249

 Puntos de vista. Las vistas son los componentes que muestran la aplicación, su
interfaz de usuario (UI). Normalmente, esta interfaz de usuario es creado a partir de
los datos del modelo. Un ejemplo podría ser una vista de edición de una tabla de
productos que muestra cuadros de texto, listas desplegables y las casillas de
verificación basada en el estado actual de los productos objeto.

 Controladores. Los controladores son los componentes que se encargan de la
interacción del usuario, el trabajo con el modelo, y en última instancia, seleccione una
vista que muestra la interfaz de usuario. En una aplicación MVC, la vista sólo muestra
la información, se encarga del tratamiento y responde a la entrada del usuario y la
interacción. 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 patrón MVC le ayuda a crear aplicaciones que separan los diferentes aspectos de la
aplicación (de entrada lógica, la lógica de negocio, y la lógica de la interfaz de usuario),
mientras que proporciona un acoplamiento entre estos elementos. El modelo especifica que
cada tipo de lógica debe estar ubicado en la solicitud. La lógica de la interfaz de usuario
pertenece a la vista. La lógica de entrada pertenece en el controlador. La lógica de negocio
pertenece al modelo. Esta separación le ayuda a gestionar la complejidad al crear una
aplicación, ya que le permite centrarse en un aspecto de la aplicación a la vez. Por ejemplo,
usted puede concentrarse en el punto de vista, sin depender de la lógica de negocio.

Además de gestionar la complejidad, el patrón MVC hace más fácil para probar las
aplicaciones de lo que es prueba de una web basada en formularios aplicación 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 página individual, debe crear instancias de la clase de página, todos
sus controles secundarios, y más dependiente de las clases en la aplicación. Debido a que
muchas clases se crean instancias para ejecutar la página, puede ser difícil 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 más difícil de
aplicar que las pruebas en una aplicación MVC. Por otra parte, los ensayos en una aplicación
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 aplicación MVC también
promueve el desarrollo paralelo. Por ejemplo, un desarrollador puede trabajar en la vista, un
segundo desarrollador puede trabajar en la lógica del controlador, y un tercer desarrollador
puede concentrarse en la lógica de negocio en el modelo.

2. Decidir cuándo crear una aplicación MVC
Usted debe considerar cuidadosamente la posibilidad de implementar una aplicación 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.)

CIBERTEC CARRERAS PROFESIONALES
250

Antes de decidirse a usar el framework MVC o el modelo de formularios Web Forms para un
sitio Web específico, debe saber las ventajas de cada enfoque.

2.1. Ventajas de una aplicación Web basada en MVC

 Es más fácil para manejar la complejidad de dividir una aplicación 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 aplicación.
 Se utiliza un patrón Front Controller que procesa las solicitudes de aplicaciones Web a
través de un solo controlador. Esto le permite diseñar una aplicación 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 diseñadores web que necesitan un alto grado de control sobre el
comportamiento de la aplicación.

2.2. Ventajas de una aplicación Web basada en formularios web

 Es compatible con un modelo de eventos que preserve el estado a través de HTTP, que
beneficia a la línea de negocio de desarrollo de aplicaciones Web. La aplicación Web
basada en formularios ofrece docenas de eventos que se apoyan en cientos de
controles de servidor.
 Se utiliza un patrón Page Controller que añade funcionalidad a las páginas individuales.
 Utiliza el estado de vista o formas basadas en servidor, que puede hacer más fácil la
gestión de la información de estado.
 Funciona bien para pequeños equipos de desarrolladores y diseñadores Web que
quieran aprovechar el gran número de componentes disponibles para el desarrollo
rápido de aplicaciones.
 Page En general, es menos complejo para el desarrollo de aplicaciones, ya que los
componentes (la clase Page, controles, etc) están estrechamente integradas y por lo
general requiere menos código que el modelo MVC.

3. Características del marco ASP.NET MVC
 La separación de tareas de la aplicación (de entrada lógica, la lógica de negocio, y la
lógica de la interfaz de usuario), capacidad de prueba y desarrollo de las pruebas (TDD)
por defecto. Todos los contratos básicos 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 aplicación. Puede probar la
aplicación sin tener que ejecutar los controladores en un proceso de ASP.NET, lo que
hace la unidad de pruebas rápidas 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
están diseñados para que puedan ser fácilmente reemplazados o modificados para
requisitos particulares. Puede conectar el motor de su propio punto de vista, la
política de enrutamiento de direcciones URL, la serialización de acción-parámetro del
método, y otros componentes. El marco de ASP.NET MVC también apoya el uso de la
inyección de dependencias (DI) y la Inversión de Control de los modelos de

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 251

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 configuración. Esto hace que las pruebas más
fáciles.
 Un componente de gran alcance URL de mapas que permite crear aplicaciones que
tienen comprensible y URL de búsqueda. El URL no tiene que incluir extensiones de
nombre de archivo, y está diseñado para soportar los patrones de URL de nombres
que funcionan bien para la optimización del Search Engine (SEO) y la transferencia de
estado de representación (REST) abordar.
 Soporte para el uso del margen de beneficio existentes en la página ASP.NET (. Aspx),
control de usuario (. Ascx), y la página principal (archivos. Maestro) archivos de
marcado como ver las plantillas. Usted puede utilizar las actuales características de
ASP.NET con el marco ASP.NET MVC, tales como las páginas maestras anidadas, en
expresiones en línea (<% =%>), los controles de servidor declarativos, las plantillas, de
enlace de datos, localización, etc.
 Soporte para las características de ASP.NET existentes. ASP.NET MVC le permite
utilizar funciones como autenticación de formularios y la autenticación de Windows, la
autorización de URL, la composición y funciones, la producción y el almacenamiento
en caché de datos, administración de estado de sesión y el perfil, vigilancia de la salud,
el sistema de configuración, y la arquitectura del proveedor.

4. Marco de MVC y estructura de aplicación
En un sitio web de ASP.NET, las direcciones URL se asignan normalmente a archivos que están
almacenados en disco (normalmente archivos .aspx). Estos archivos .aspx incluyen marcado y
código que se procesan para responder a la solicitud.

El marco de MVC de ASP.NET asigna las direcciones URL al código del servidor de manera
diferente que una página de formularios Web Forms de ASP.NET. En lugar de asignar las
direcciones URL a páginas 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 aplicación y la lógica de datos
correspondientes en función 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 lógica de negocio o dominio de la aplicación, 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 página de ASP.NET (.aspx), página maestra (.master) y control de usuario
(.ascx) para la representación en el explorador. El controlador busca el método de acción
adecuado en el controlador, obtiene los valores que se usarán como argumentos del método
de acción y administra los errores que se pudieran producir cuando se ejecuta el método de
acción. A continuación, representa la vista solicitada. De forma predeterminada, cada conjunto
de componentes está en una carpeta independiente de un proyecto de aplicación web de
MVC.

CIBERTEC CARRERAS PROFESIONALES
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. También puede hacer que el motor del enrutamiento
analice automáticamente las variables definidas en la dirección URL, y hacer que el marco de
MVC de ASP.NET pase los valores al controlador como argumentos de parámetro.

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 separación entre la
lógica de la interfaz de usuario y la lógica 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 páginas 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 aplicación web de MVC que se configura para tener las carpetas, plantillas de elementos
y entradas de archivo de configuración necesarias.

Al crear una nueva aplicación web de MVC, Visual Studio ofrece la opción de crear dos
proyectos al mismo tiempo. El primer proyecto es un proyecto web donde se implementa su
aplicación. 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 aplicación web
Cuando se crea un proyecto de MVC de aplicación web ASP.NET, los componentes de MVC se
separan en función de las carpetas de proyecto que se muestran en la ilustración siguiente:

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 253

De forma predeterminada, los proyectos de MVC incluyen las carpetas siguientes:

 App_Data, que es el almacén físico de los datos. Esta carpeta tiene el mismo rol que
en los sitios web ASP.NET que usan páginas de formularios Web Forms.
 Content, que es la ubicación recomendada para agregar los archivos de contenido,
como los archivos de hoja de estilos en cascada, imágenes, etc. En general, la carpeta
Content es para archivos estáticos.
 Controllers, que es la ubicación 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
aplicación web de MVC. Normalmente, esta carpeta incluye código que define los
objetos y la lógica para la interacción con el almacén de datos. Normalmente, los
objetos del modelo real estarán en bibliotecas de clases independientes. Sin embargo,
al crear una nueva aplicación, podría colocar las clases aquí y, a continuación, moverlas
a bibliotecas de clases independientes en un momento posterior del ciclo de
desarrollo.
 Scripts, que es la ubicación recomendada para los archivos de script que respaldan la
aplicación. De forma predeterminada, esta carpeta contiene archivos de base AJAX de
ASP.NET y la biblioteca de jQuery.
 Views, que es la ubicación recomendada para las vistas. Las vistas usan archivos
ViewPage (.aspx), ViewUserControl (.ascx) y ViewMasterPage (.master), además de
otros archivos relacionados con la representación 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,

CIBERTEC CARRERAS PROFESIONALES
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 también una carpeta denominada Shared en la
carpeta Views, que no corresponde a ningún controlador. La carpeta Shared se usa
para las vistas que se comparten entre varios controladores. Por ejemplo, puede
colocar la página maestra de la aplicación web en la carpeta Shared.

Además de las carpetas enumeradas anteriormente, una aplicación web de MVC usa el código
del archivo Global.asax para establecer los valores predeterminados de enrutamiento global
de direcciones URL, y usa el archivo Web.config para configurar la aplicación.

Laboratorio 14.1
Tema: Crear un proyecto ASP.Net MVC

Implementar una aplicación 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 diálogo Nuevo proyecto.

2. En Tipos de proyecto, expanda Visual Basic o Visual C# y, a continuación, haga clic en
Web.
3. En Plantillas instaladas de Visual Studio, seleccione Aplicación web de ASP.NET MVC 2.
4. En el cuadro Nombre, escriba MvcApplicationLab13-1.
5. En el cuadro Ubicación, escriba un nombre para la carpeta de proyecto.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 255

6. Si desea que el nombre de la solución difiera del nombre del proyecto, escriba un
nombre en el cuadro Nombre de la solución.
7. Seleccione Crear directorio para la solución.
8. Haga clic en Aceptar.

Aparecerá el cuadro de diálogo 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 aplicación 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.

10. Haga clic en Aceptar.

Se generan el nuevo proyecto de aplicación 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

CIBERTEC CARRERAS PROFESIONALES
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 aplicación.
 Controllers, para los archivos de controlador. Esta carpeta contiene los controladores
de ejemplo de la aplicación, que se denominan AccountController y HomeController.
La clase AccountController contiene la lógica de inicio de sesión para la aplicación. La
clase HomeController contiene la lógica a la que se llama de forma predeterminada
cuando la aplicación 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 paginación 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 sesión y para cambiar las
contraseñas. La carpeta Home contiene una vista Index (la página de inicio
predeterminada para la aplicación) y una vista de página Acerca de. La carpeta Shared
contiene la vista de la página maestra para la aplicación.

Si está utilizando una edición de Visual Studio distinta de Standard o Express, también 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 método
de acción HomeController (Index y About).

El proyecto de MVC recién generado es una aplicación completa que puede compilar y
ejecutar sin cambios. La ilustración siguiente muestra cómo aparecía la aplicación al ejecutarla
en un explorador.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 257

El proyecto de prueba unitaria también está listo para compilar y ejecutar. Para este
laboratorio, agregará un controlador con un método de acción y una vista y agregará una
prueba unitaria para el método de acción.

Agregar un controlador

Ahora agregará un controlador que contiene la lógica 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 botón secundario en la carpeta
Controllers, haga clic en Agregar y, a continuación, haga clic en Controlador.

Aparece el cuadro de diálogo 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 métodos de acción para los escenarios Create, Update y
Details.

CIBERTEC CARRERAS PROFESIONALES
258

4. Haga clic en Agregar.

Visual Studio agrega la clase MapsController al proyecto y lo abre en el editor.

Crear un código auxiliar de método de acción

Para aplicar técnicas de desarrollo basado en pruebas (TDD) a este proyecto debe escribir la
prueba unitaria para un método de acción antes de escribir el propio método de acción. Sin
embargo, si desea que su prueba unitaria se compile, debe tener un código auxiliar para el
método de acción planeado, que en este laboratorio es ViewMaps.

Para agregar un código auxiliar de método de acción

1. Abra o cambie a la clase MapsController.
2. Reemplace el método de acción Index con el código siguiente para crear el código
auxiliar de método de acción ViewMaps.

Function ViewMaps()
' Add action logic here
Throw New NotImplementedException()
End Function

Agregar pruebas unitarias para métodos de acción

A continuación agregará una clase de prueba de controlador al proyecto de pruebas. En la
clase, agregará una prueba unitaria para el método de acción ViewMaps. Se producirá un error
en la prueba unitaria, porque el código auxiliar de método de acción ViewMaps produce una
excepción. Al finalizar el método de acción posteriormente en este laboratorio, la prueba se
realizará correctamente.

Para agregar pruebas unitarias para los métodos de acción

1. En el proyecto de pruebas, haga clic con el botón secundario del mouse en la carpeta
Controllers, haga clic en Agregar y después 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 código que se muestra a continuación:

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

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 259

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 código define las pruebas unitarias para el método de acción que terminará después.

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 método de acción ViewMaps produce una excepción
actualmente.

Agregar el código al método de acción

Ahora agregará el código a la clase MapsController para el método de acción ViewMaps con
objeto de representar la vista Maps.

Para agregar el código al método de acción

1. Abra la clase MapsController y reemplace el código auxiliar de método de acción
ViewMaps con el código siguiente para representar la vista Maps:

Function ViewMaps() As ActionResult
Return View()
End Function

2. Guarde y cierre el archivo.

Agregar una vista

Después 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 página al proyecto de MVC

3. Abra la clase MapsController, haga clic con el botón secundario del mouse dentro del
método de acción ViewMaps y, a continuación, haga clic en Agregar vista.

CIBERTEC CARRERAS PROFESIONALES
260

Se mostrará el cuadro de diálogo 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 página maestra y establezca la página 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 continuación, 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>

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 261

<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 = new VEMap('earthMap');
map.LoadMap(new VELatLong(36.17, -115.14), 10 ,'i' ,true);
break;
case 'SaltLake':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(40.75, -111.89), 10 ,'i' ,true);
break;
case 'Dallas':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(32.78, -96.8), 10 ,'i' ,true);
break;
case 'Chicago':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(41.88, -87.62), 10 ,'i' ,true);
break;
case 'NewYork':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(40.7, -74), 10 ,'i' ,true);
break;
case 'Rio':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(-22.91, -43.18), 10 ,'i' ,true);
break;
case 'Paris':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(48.87, 2.33), 10 ,'i' ,true);

CIBERTEC CARRERAS PROFESIONALES
262

break;
case 'Naples':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(40.83, 14.25), 10 ,'i' ,true);
break;
case 'Keta':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(5.92, 0.983), 10 ,'i' ,true);
break;
case 'Beijing':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(39.91, 116.39), 10 ,'i' ,true);
break;
case 'Sydney':
map = new VEMap('earthMap');
map.LoadMap(new VELatLong(-33.86, 151.21), 10 ,'i' ,true);
}
}
</script>

Este marcado define una lista desplegable para seleccionar un mapa y la lógica de JavaScript
para recuperar el mapa seleccionado del servicio Web Microsoft Virtual Earth.

2. Guarde y cierre el archivo.

Agregar una pestaña al menú de página maestra

Agregará ahora un elemento al menú de página maestra que llama al método de acción
ViewMaps.

Para agregar una pestaña al menú de página 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 código siguiente a la lista entre el Índice y las pestañas About Us:

<li><%= Html.ActionLink("My City Maps", "ViewMaps", "Maps")%></li>

El método ActionLink es un método auxiliar con vínculos a un método de acción. Toma
los parámetros siguientes: el texto del vínculo, el nombre del método de acción y el
nombre del controlador.

3. Guarde y cierre el archivo.

Probar la aplicación MVC

Ya puede probar la aplicación.

Para probar la aplicación MVC

1. En el menú Prueba, haga clic sucesivamente en Ejecutar, Todas las pruebas de la
solución.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 263

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 aplicación.

Se muestra la página Index.aspx, que incluye las pestañas que están definidas en la
página maestra.

3. Haga clic en la pestaña My City Maps.

Se muestra la página My City Maps. Seleccione cualquier mapa para verlo en pantalla.

CIBERTEC CARRERAS PROFESIONALES
264

Laboratorio 14.2
Tema: Agregar scripting de ASP.NET AJAX a un proyecto de MVC

ASP.NET AJAX habilita una aplicación web para recuperar los datos del servidor de forma
asincrónica y actualizar partes de la página existente. Esto mejora la experiencia del usuario al
hacer que la aplicación web sea más sensible.

Este laboratorio muestra cómo comenzar a agregar la funcionalidad de ASP.NET AJAX a una
aplicación 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 diálogo Nuevo proyecto, expanda Visual Basic, a
continuación, haga clic en Web.
3. En Plantillas instaladas de Visual Studio, seleccione aplicación web ASP.NET MVC.
4. En el cuadro Nombre, escriba MvcAjaxApplication.
5. En el cuadro Ubicación, escriba el nombre de la carpeta de proyecto.
6. Seleccione Crear directorio para la solución.
7. Haga clic en Aceptar.
8. En el cuadro de diálogo Crear proyecto de prueba, seleccione No, no cree un proyecto
de prueba unitaria.
9. Haga clic en Aceptar.

Se genera el nuevo proyecto de aplicación 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 versión de lanzamiento y la
versión de depuración 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 continuación, 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>

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 265

También puede arrastrar estos archivos desde el Explorador de soluciones a la vista
Site.Master y este código se agregará automáticamente.

Agregar métodos de acción a la clase HomeController

Luego agregará dos métodos de acción a los que se puede llamar de forma asincrónica desde
el script de cliente. El método GetStatus sencillamente devuelve un estado de "OK" y la hora
actual. El método UpdateForm recibe la entrada de un formulario HTML y devuelve un
mensaje que incluye la hora actual.

Para agregar métodos de acción a la clase HomeController

1. En el Explorador de soluciones, expanda la carpeta Controllers y, a continuación, haga
doble clic en la clase HomeController para abrirla.
2. Agregue el siguiente código después del método 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 página de índice

Por último, reemplazará el contenido de la página Index.aspx, que se agrega automáticamente
al proyecto de Visual Studio para ASP.NET MVC. La nueva página Index.aspx muestra la hora a
la que se representa la página, un mensaje del estado que tiene un vínculo para actualizar el
mensaje de forma asincrónica y un formulario para enviar una cadena de texto.

Para volver a definir la página de índice

1. En el Explorador de soluciones, expanda la carpeta Views, expanda la carpeta Home y,
a continuación, 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"}))%>

CIBERTEC CARRERAS PROFESIONALES
266

<%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Submit"/>
<br />
<span id="textEntered">Nothing Entered</span>
<% End Using%>

Probar la aplicación

Ahora puede ejecutar la aplicación y ver cómo funciona.

Para ejecutar la aplicación MVC

1. Presione CTRL+F5.

La página muestra la hora en que se representó.

2. Haga clic en el vínculo Estado de la actualización.

El mensaje del estado se actualiza con la hora de la actualización. Observe que sólo se
actualizó el mensaje de estado.

3. En el cuadro de texto, escriba el texto y, a continuación, haga clic en el botón Enviar.

Un mensaje muestra el texto que escribió y la hora a la que lo escribió. Una vez más,
observe que sólo se procesó el formulario.

CARRERAS PROFESIONALES CIBERTEC
LENGUAJE DE PROGRAMACIÓN III 267

Autoevaluación
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 aplicación en MVC
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

6. ¿Cuáles son las ventajas de desarrollar en MVC?
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------

CIBERTEC CARRERAS PROFESIONALES
268

Resumen

El modelo Model-View-Controller (MVC) es un principio de diseño arquitectónico que separa
los componentes de una aplicación web. Esta separación ofrece más control sobre las partes
individuales de la aplicación, lo cual permite desarrollarlas, modificarlas y probarlas más
fácilmente.

ASP.NET MVC forma parte del marco de trabajo ASP.NET. Desarrollar una aplicación ASP.NET
MVC es una alternativa al desarrollo de páginas 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 aplicación que implementan la
lógica del dominio de datos de la aplicación. A menudo, los objetos de modelo
recuperan y almacenan el estado del modelo en una base de datos. Por ejemplo, un
objeto Product podría recuperar información de una base de datos, trabajar con ella y,
a continuación, escribir la información actualizada en una tabla Productos de una base
de datos de SQL Server. En las aplicaciones pequeñas, el modelo es a menudo una
separación conceptual en lugar de física. Por ejemplo, si la aplicación solo lee un
conjunto de datos y lo envía a la vista, la aplicación no tiene un nivel de modelo físico 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
aplicación. Normalmente, esta interfaz de usuario se crea a partir de los datos de
modelo. Un ejemplo sería una vista de edición de una tabla Productos que muestra
cuadros de texto, listas desplegables y casillas basándose en el estado actual de un
objeto Product.
 Controladores. Los controladores son los componentes que controlan la interacción
del usuario, trabajan con el modelo y por último seleccionan una vista para
representar la interfaz de usuario. En una aplicación MVC, la vista solo muestra
información; el controlador administra y responde a los datos proporcionados por el
usuario y su interacción. Por ejemplo, el controlador administra los valores de la
cadena de consulta y pasa estos valores al modelo, que a su vez podría utilizarlos para
consultar la base de datos.

Páginas de consulta
 http://msdn.microsoft.com/es-es/library/dd394709.aspx
Página referente a Model View Controller (MVC) de ASP.NET

 http://msdn.microsoft.com/es-es/library/dd410269.aspx
Página referente a Controladores y métodos de acción en aplicaciones MVC

CARRERAS PROFESIONALES CIBERTEC