Sistemas UNI. Instructor: V. Carlos, Segura P.

LABORATORIO ASP.NET – 1.

Derechos Reservados, solo para ser usados dentro de la

institución.
Derechos de Autor

El contenido de este laboratorio tiene todos los derechos reservados, por lo tanto no
se puede reproducir, transcribir, almacenar a un sistema de recuperación o de
alteración, asimismo la traducción a otro idioma de ninguna forma o por ningún
medio mecánico, manual, electrónico, magnético, óptico o de otro modo.

La persecución de una reproducción no autorizada tiene como

consecuencia la cárcel y/o multas.

UNIVERSIDAD NACIONAL DE INGENIERIA 1

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

1 ASP.NET

1 Introducción a ASP.NET, AdRotator y Master Pages

1.1 Introducción a ASP.NET

ASP.NET, forma parte de .NET Framework, que proporciona clases y herramientas para crear
aplicaciones Web dinámicas.

ASP.NET se basa en un modelo de desarrollo Web unificado que incluye los servicios necesarios para crear
aplicaciones Web empresariales con código mínimo y aplicaciones tan sencillas y dinámicas con los nuevos
controles que nos proporciona, también permite acceder a las clases propias del .NET Framework. El
código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el Common Language
Runtime como en la aplicaciones Windows Forms, entre ellos Visual Basic, C#, JScript .NET y J#.

Contenido de ASP.NET

Marco de trabajo de página y controles en forma dinámica

Compilador de ASP.NET por compatibilidad con el CLR
Infraestructura de seguridad
Configuración de la aplicación
Capacidad de depuración
Marco de trabajo de servicios Web XML
Entorno de host extensible y administración del ciclo de vida de las aplicaciones
Entorno de diseñador extensible

Propiedades Importantes para Proyectos en ASP.NET

Mejor rendimiento.
Esta basado en un código del Common Language Runtime compilado que se ejecuta en el
servidor. A diferencia de antes, ASP.NET puede aprovechar las ventajas del enlace anticipado o
pre-compilación, la compilación just-in-time, la optimización nativa y los servicios de caché
desde el primer momento. Esto supone un incremento espectacular del rendimiento antes de
siquiera escribir una línea de código.

Compatibilidad con herramientas de primer nivel.

Se complementa con un diseñador y una caja de herramientas muy completos en el entorno
integrado de programación (Integrated Development Environment, IDE) de Visual Studio.
La edición WYSIWYG, los controles de servidor de arrastrar y colocar y la implementación
automática son sólo algunas de las características que proporciona esta eficaz herramienta.

UNIVERSIDAD NACIONAL DE INGENIERIA 2

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Eficacia y flexibilidad.
SE basa en Common Language Runtime, la eficacia y la flexibilidad de toda esa plataforma se
encuentra disponible para los programadores de aplicaciones Web. La biblioteca de clases de
.NET Framework, la Mensajería y las soluciones de Acceso a datos se encuentran accesibles
desde el Web de manera uniforme. ASP.NET es también independiente del lenguaje, por lo que
puede elegir el lenguaje que mejor se adapte a la aplicación o dividir la aplicación en varios
lenguajes. Además, la interoperabilidad de Common Language Runtime garantiza que la
inversión existente en programación basada en COM se conserva al migrar a ASP.NET.

Simplicidad.
Facilita la realización de tareas comunes, desde el sencillo envío de formularios y la
autenticación del cliente hasta la implementación y la configuración de sitios. Por ejemplo, el
marco de trabajo de página de ASP.NET permite generar interfaces de usuario, que separan
claramente la lógica de aplicación del código de presentación, y controlar eventos en un sencillo
modelo de procesamiento de formularios de tipo Visual Basic. Además, Common Language
Runtime simplifica la programación, con servicios de código administrado como el recuento de
referencia automático y el recolector de elementos no utilizados.

Facilidad de uso.
Se emplea un sistema de configuración jerárquico, basado en texto, que simplifica la aplicación
de la configuración al entorno de servidor y las aplicaciones Web. Debido a que la información
de configuración se almacena como texto sin formato, se puede aplicar la nueva configuración
sin la ayuda de herramientas de administración local. Esta filosofía de "administración local
cero" se extiende asimismo a la implementación de las aplicaciones ASP.NET Framework. Una
aplicación ASP.NET Framework se implementa en un servidor sencillamente mediante la copia
de los archivos necesarios al servidor. No se requiere el reinicio del servidor, ni siquiera para
implementar o reemplazar el código compilado en ejecución.

Seguridad.
Con la autenticación de Windows integrada y la configuración por aplicación, se puede tener la
completa seguridad de que las aplicaciones están a salvo.

UNIVERSIDAD NACIONAL DE INGENIERIA 3

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Los Web Forms

Las páginas de formularios Web de ASP.NET es un modelo de programación escalable de Common

Language Runtime que puede utilizarse en el servidor para generar páginas Web dinámicamente.

Basada en la evolución lógica de ASP (ASP.NET proporciona compatibilidad sintáctica con las páginas
existentes), el marco de trabajo de formularios Web ASP.NET se ha diseñado específicamente para tratar
varias deficiencias clave del modelo anterior. En particular, proporciona:

Capacidad para crear y utilizar controles de la interfaz de usuario reutilizables que puedan
encapsular funcionalidades comunes y, así, reducir la cantidad de código que tiene que
escribir el programador de una página.

Capacidad para que los programadores puedan estructurar limpiamente la lógica de la

página de forma ordenada (no revuelta).

Capacidad para que las herramientas de desarrollo proporcionen un fuerte soporte de diseño
WYSIWYG (Lo que ve es lo que se imprime) a las páginas (el código ASP existente es opaco
para las herramientas).

Utilizar bloques de representación ASP <%%>

ASP.NET proporciona compatibilidad sintáctica con páginas ASP existentes. Esto incluye compatibilidad
para bloques de representación de código <% %> que pueden entremezclarse con contenido HTML dentro
de un archivo .aspx. Estos bloques de código se ejecutan de arriba a abajo en tiempo de representación
de página.

En el siguiente ejemplo se muestra cómo se pueden utilizar bloques de representación <% %> para
ascender en bucle por un bloque HTML (aumentando el tamaño de fuente cada vez):

I.- Crear una pagina con el nombre BloquesServidor dentro del código HTML colocamos lo siguiente y lo
ejecutamos

UNIVERSIDAD NACIONAL DE INGENIERIA 4

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Usando controles de servidor en ASP.NET

Al utilizar bloques de código <% %> se usa para programar contenido dinámico, estos pueden utilizar
controles de servidor ASP.NET para programar páginas Web. Los controles de servidor se declaran dentro
de un archivo .aspx mediante etiquetas personalizadas o etiquetas HTML intrínsecas que contienen un
valor de atributo runat="server". Las etiquetas HTML intrínsecas las controla uno de los controles del
espacio de nombres System.Web.UI.HtmlControls.

En el siguiente ejemplo utilizaremos controles de servidor: runat=server. En tiempo de ejecución, estos

controles de servidor generan contenido HTML automáticamente.

UNIVERSIDAD NACIONAL DE INGENIERIA 5

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Eventos de controles de servidor

Cada control de servidor ASP.NET puede exponer un modelo de objeto con propiedades, métodos y
eventos. Estos se pueden utilizar con el objetivo para modificar e interactuar limpiamente con la página.

Luego este evento del botón será llamado desde:

Uso de Controles en ASP.NET

Propiedades de un ListBox

ListBox.Items.() : Contiene propiedades sobre la administración de los elementos agregados al

Listbox.

ListBox.Items.Add: Permite adicionar elementos dentro de un Listbox.

ListBox.Items.Clear: Permite eliminar todos los elementos de un Listbox.

ListBox.Items.Remove: Permite eliminar el elemento seleccionado, para esto necesita el valor

del elemento seleccionado.

ListBox.Items.RemoveAt: Permite eliminar el elemento seleccionado, para esto necesita el valor

del índice seleccionado.

ListBox.SelectedItem: Devuelve el valor del elemento seleccionado.

ListBox.SelectedIndex: Devuelve el valor del índice del elemento seleccionado (devuelve -1 sino
se selecciono ninguno).

UNIVERSIDAD NACIONAL DE INGENIERIA 6

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

I.- Crear un Web Form con el nombre Listados con el siguiente diseño:

II.- Dar doble clik sobre el botón agregar y escribimos lo siguiente:

III.- En el Botón escribimos :

IV.- En el Botón escribimos :

V.- Completar para los otros botones.

UNIVERSIDAD NACIONAL DE INGENIERIA 7

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

El Control ADRotator

Este control nos permite publicar imágenes que puedan rotar en forma aleatoria de acuerdo a los pesos
que le indicamos, los principales propiedades de este control es el siguiente:

Primero la estructura interna esta basado en código XML, para tener elementos bien
definidos.
Segundo se debe respetar las mayúsculas y minúsculas.
El AdRotator empieza con la etiqueta: <Advertisements>
Cada imagen agregada al control debe empezar con la etiqueta: <Ad>
Por cada imagen agregada debe contener lo siguiente:

<ImageUrl>
Ubicación física donde se encuentra el barner.

<NavigateUrl>
Enlace a donde apuntara la pagina.
<AlternateText>
Texto a mostrar sobre el cursor, propiedad ALT de la imagen.
<Impressions>
Peso que va a tener la imagen para ser mostrada.
<Keyword>
Nombre relacionado al barner.

I.- Crear un Web Forms con el nombre Ingreso, en el cual colocaremos un control AdRotator del cuadro
de herramientas:
Cuadro de herramientas:

El diseño del Web Forms:

II.- Crear una carpeta con el nombre logos y ubicar hasta 4 imágenes y colocarlas en esta carpeta.

UNIVERSIDAD NACIONAL DE INGENIERIA 8

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

III.- Agregar un nuevo elemento XML con el siguiente contenido y cuyo nombre será Banners:

IV.- Luego en el diseño seleccionamos el AdRotator en el cual seleccionamos en su propiedad

AdvertisementFile indicamos el archivo creado.

UNIVERSIDAD NACIONAL DE INGENIERIA 9

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

V.- Al ejecutar el proyecto:

UNIVERSIDAD NACIONAL DE INGENIERIA 10

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

1.2 Creación de Master Pages.

Introducción

Lo más habitual cuando se crea una aplicación o un sitio Web es que las páginas que lo conforman sean
todas bastante parecidas o al menos que existan varios grupos de páginas similares que sólo varían
ciertos contenidos entre ellas. Por ejemplo, puede haber una categoría de páginas para mostrar artículos
en el que todas son iguales excepto por el contenido del propio artículo en su parte central, mientras que
en otra zona de la aplicación el diseño es completamente diferente pero sus páginas se parecen todas
entre sí.

Por ejemplo, la siguiente figura muestra capturas de dos páginas pertenecientes al portal MSDN:

Estas páginas difieren únicamente en el contenido y los menús que muestran en el lateral (los banners del
lateral son rotativos), y conservan una estática y una serie de elementos que permanecen constantes en
todas las páginas del sitio.

ASP.NET 2.0 ofrece una nueva característica destinada a paliar esta tradicional carencia y permite definir
páginas cuyo aspecto y funcionalidad deriva de unas páginas especiales comunes llamadas Páginas
principales o Master Pages.

Master Pages, Definición:

Una Master Page proporciona una forma de definir una estructura e interfaz comunes para un
grupo de páginas pertenecientes a un mismo sitio Web. Esta estructura común se almacena en un
único archivo independiente. Ello facilita mucho su mantenimiento puesto que, para actualizar
todas las páginas que lo utilizan, basta con editar dicho archivo.
Una MP es en realidad como una página ASPX normal que contiene código, elementos HTML y
controles Web de servidor. Sin embargo posee una extensión diferente (.master) y utilizan una
directiva <% @ master %> en lugar de una directiva <% @ page %>. Por lo demás se pueden
considerar prácticamente equivalentes. Esto es importante porque significa que ya sabemos todo
lo necesario para crearlas.
Una página ASPX normal puede derivar su estructura a partir de una MP simplemente añadiendo
un atributo MasterPageFile a su directiva de página, así:

UNIVERSIDAD NACIONAL DE INGENIERIA 11

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Definición de una Master Page

Para agregar una Master Page a nuestro proyecto sólo hay que elegir el icono Página Principal en
el diálogo de agregar nueva referencia de cualquier carpeta del mismo:

Al abrir una MP aparece un diseñador idéntico al de una página ASPX normal. Podemos arrastrar sobre su
superficie cualquier control así como editar su HTML de la manera usual. También lleva un archivo de
código asociado en el que se puede responder a sus diversos eventos. La única diferencia apreciable a
simple vista respecto a una página normal es que contiene por defecto un control de tipo
ContentPlaceHolder. La sintaxis de este control es análoga a la siguiente:

Su única propiedad interesante es precisamente su identificador ya que este tipo de control se utiliza para
marcar las posiciones en las que irán los diferentes contenidos de las páginas derivadas dentro de la
plantilla de estructura que es una Master Page.
De este modo, cuando una página normal derive de una MP, sólo se podrá introducir código dentro de las
zonas definidas por estos comodines de contenido.
Cuando añadimos una nueva página ASPX a nuestro proyecto y existe al menos una Master Page,
podemos marcar una opción para que, antes de crearla, nos permita seleccionar de qué MP derivará:

UNIVERSIDAD NACIONAL DE INGENIERIA 12

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

I.- Crear un proyecto con el nombre “Web Master CLub”, dentro de el crear una carpeta con el nombre
Imágenes, en el cual seleccionaremos tres imágenes y deberán ser colocadas en esta carpeta.
II.- Crear un nuevo elemento Master Pages con el nombre default_Master:

III.- Al crear un Master Page, este tendrá el siguiente diseño por default:

IV.- El diseño quedara de la siguiente manera:

UNIVERSIDAD NACIONAL DE INGENIERIA 13

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

V.- Terminado esto crear las siguientes Web Forms, para las opciones de Inicio, Productos, Servicios,
proveedores y Soporte.
Diseño de Inicio.aspx:

Diseño de Productos.aspx:

VI.- Terminar los diseños para las paginas faltantes.

UNIVERSIDAD NACIONAL DE INGENIERIA 14

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS