1

Sobre el libro
Este libro ha sido creado con la intencin de poder transmitir
algunos conocimientos generales sobre la plataforma ASP.net.
El mismo es distribuido de forma electrnica y gratuita.
Toda reproduccin del mismo est totalmente permitida.
El presente libro ha sido escrito y editado enteramente por su autor.
Matas Iacono

Contenido
Captulo 11...................................................................................................................................
................................................................................................................................... 4
Herramientas y prerrequisitos ................................................................................................................................................................. 4
Visual Studio 2010 ..................................................................................................................................................................................... 4
El entorno de Visual Studio ..................................................................................................................................................................... 5
Microsoft SQL Server 2008 Express ...................................................................................................................................................... 7
Nuestro primer sitio Web ......................................................................................................................................................................... 8
Maquetar nuestra pgina .................................................................................................................................................................... 11
Crear el comportamiento .................................................................................................................................................................... 21
Catlogo de productos ......................................................................................................................................................................... 23
Crear la base de datos ........................................................................................................................................................................... 24

Captulo 1
Iniciaremos este libro con algunos ejercicios bsicos adems de la instalacin, configuracin y la comprensin de las herramientas que utilizaremos a lo largo de este manual.
En este captulo veremos cuatro ejercicios ligeros pero tiles los que nos darn un
paneo general sobre la potencia del desarrollo de pginas Web con ASP.net y el lenguaje
C# como base de nuestro cdigo.

Herramientas y prerrequisitos
Antes de comenzar con estos ejercicios es necesario que conozcamos que herramientas
utilizaremos, cules de estas son esenciales y cmo las utilizaremos. Si bien a medida
que avancemos y nos ejercitemos aprenderemos ms profundamente cada una de ellas,
necesitamos de una base mnima para poder desempearnos con cierta soltura dentro de
las mismas. En todo caso, en todo momento debemos tener en cuenta que las herramientas presentadas, tanto para la creacin de cdigo como la gestin de datos, pueden
ser remplazadas por cualquier otra que provea funcionalidades similares.
De cualquier manera en el transcurso de este libro utilizaremos como herramienta de
creacin de cdigo a Microsoft Visual Studio 2010 Ultimate y a Microsoft SQL
Server 2008 Express como motor de bases de datos. La primera es una herramienta
paga y la segunda es gratuita. Aunque la herramienta de desarrollo cuenta con versiones
gratuitas, debido a la potencia y prestaciones de la misma la utilizaremos en los ejemplos
de este libro.

Visual Studio 2010

Visual Studio 2010 Express
Podemos utilizar diferentes
herramientas en sus
versiones Express para crear
aplicaciones en diferentes
plataformas. Para descargar
Visual Studio 2010 Express
ingresa a la siguiente pgina
Web
www.microsoft.com/
express/
Busque la versin con la que
se sienta ms a gusto e
instlela en su ordenador
desde la seccin de
descargar.

En el mercado existen muchas herramientas para desarrollar software para la plataforma

Microsoft .Net. De cualquier manera, la herramienta por excelencia es la que provee
Microsoft bajo el nombre de Visual Studio. En la actualidad, la ltima versin de
Microsoft Visual Studio es la 2010 aunque Microsoft, en el momento en que este libro
se escribi ya ha sacado una versin de prueba de la versin 2011 de la misma herramienta. Microsoft Visual Studio 2010 cuenta con diferentes sub versiones, cada una de
estas orientadas a distintas reas de la ingeniera y el desarrollo de software, por lo que
encontraremos versiones para la realizacin de pruebas, para la creacin de cdigo, o
incluso para el desarrollo de la arquitectura de una aplicacin.
Es importante elegir una versin adecuada al trabajo que realizaremos por lo que en
nuestro caso tomaremos la ms potente de todas las versiones, la versin Ultimate de
Visual Studio 2010. Por otra parte, algo que debemos tener en claro es que para poder
desarrollar aplicaciones bajo la tecnologa Microsoft .Net no es necesario contar con
este tipo de herramientas ya que estas solo son un IDE (Integrated Development
Environment o, en castellano ambiente integrado de desarrollo) de desarrollo. Esto quiere decir
que solo nos provee atajos para diferentes actividades que podramos hacer directamente desde una consola de comandos, o mediante cualquier otra herramienta. Por supuesto, si bien la tecnologa, como el lenguaje de programacin que utilicemos no est atado
al IDE, en la actualidad, la complejidad de los mismos hace que el tener una de estas
herramientas nos simplifique mucho nuestras tareas de programacin.
Microsoft tambin nos provee de IDEs de desarrollo gratuitos entre los cuales podemos
encontrar las versiones Express de Visual Studio o WebMatrix. Si bien podramos
utilizar estas para desarrollar nuestras aplicaciones, los ejemplos de este libro sern
realizados con la versin mayor de Visual Studio 2010.
4

Si no contramos con una versin Ultimate de Visual Studio 2010 o quisiramos probar
las herramientas gratuitas, en nuestro caso necesitaremos descargar las relacionadas al
desarrollo Web con ASP.net. Este IDE tiene el nombre de Visual Web Developer 2010
Express y nos proveer de la ayuda necesaria para el desarrollo de nuestras pginas
Web. En la Figura 1 podemos ver el sitio oficial de WebMatrix, otra herramienta
gratuita para el desarrollo de aplicaciones Web con ASP.net.
Figura 1
El sitio oficial de
WebMatrix , una herramienta liviana para el desarrollo
de software con Microsoft
.Net .

Otra cuestin que tendremos que tener en cuenta al momento de iniciar los ejemplos es
el lenguaje de programacin a utilizar. Cuando desarrollamos bajo Microsoft .Net
podremos utilizar diferentes lenguajes de programacin. Sin importar cul de estos
utilicemos el resultado final ser el mismo, esto se debe a cmo esta tecnologa trabaja,
compilando el lenguaje en el que hubiramos escrito nuestra aplicacin en un lenguaje
intermedio comn.
De cualquier manera nosotros nos enfocaremos en C# como lenguaje de aprendizaje
por varios motivos. Uno de los ms importantes es que C# es considerado un lenguaje
estndar ECMA e ISO/IEC; otro motivo interesante es su raz en lenguajes como C y
C++ lo que brinda mayor flexibilidad a la hora de escribir cdigo y resulta en una
sintaxis ms clara y elegante.

El entorno de Visual Studio

Para ambientarnos al entorno de desarrollo , daremos un pequeo paseo por el mismo
poniendo especial foco en algunas caractersticas que, luego, ampliaremos en los
distintos ejemplos. El primer paso es la creacin de diferentes proyectos.
Cuando creamos un proyecto nuevo Visual Studio nos proveer de una gran cantidad de
plantillas las cuales apuntan a solucionar problemas especficos de programacin y
5

plataformas. En la Figura 2 podemos ver el asistente de creacin de proyectos con una

gran cantidad de opciones.

Figura 2
El asistente para la
creacin de proyectos no
solo provee de plantillas
estndares. Tambin
podremos descargar
nuevas plantillas desde
Internet.

En el caso especfico del desarrollo Web con ASP.net, Visual Studio 2010 nos provee de
una herramienta muy til. En el desarrollo Web es necesario no solo tener conocimientos sobre el cdigo que manipule los diferentes objetos colocados en una pgina , sino
que adems ser necesario poder maquetar la pgina en cuestin para lograr que la
misma sea visualmente atractiva, as como contar con una lista de componentes y
controles ya diseados, o asistentes para modificar sus propiedades y atributos. En la
Figura 3 podemos ver a Visual Studio 2010 desplegando un entorno de desarrollo
completo para cubrir todas las necesidades mencionadas anteriormente.

Figura 3
Adems de la lista de
controles mostrados a la
izquierda y sus propiedades a la derecha, podemos
cambiar entre la vista
Cdigo y de diseo para
manipular el cdigo
HTML.

Debemos destacar de la Figura 3 la posibilidad de dividir el rea de trabajo para poder

visualizar tanto el cdigo HTML como el resultado del mismo en una vista previa de la
pgina Web. Esto nos ser de mucha utilidad al momento de desarrollar pginas Web.

Microsoft SQL Server 2008 Express

En los diferentes ejercicios nos encontraremos con la necesidad de almacenar datos que
provengan de los usuarios de nuestras pginas Web. Existen para esto diferentes modelos de almacenamiento de datos, desde archivos de texto, XML y muchos otros. De
cualquier manera las bases de datos son las ms utilizadas por su potencia para almacenar y retribuir la informacin.
En nuestro caso utilizaremos Microsoft SQL Server 2008 en su versin Express. Esta
versin es gratuita y de libre distribucin, adems, no requiere de configuraciones para
su uso. Si instalamos Visual Studio 2010 o las versiones Express del mismo producto
este motor de bases de datos vendr incluido en la instalacin por lo que podremos
utilizarlo sin realizar ningn tipo de instalacin extra.
En la Figura 4 podemos ver cmo el asistente para la adicin de nuevos elementos
para nuestro sitio Web nos permite agregar una base de datos local de Microsoft SQL
Server 2008 Express.
Figura 4
Las bases de datos de
Microsoft SQL Server
2008 Express son
archivos individuales y no
requieren de un servidor
de bases de datos para
funcionar.

C# como estndar
El lenguaje de programacin C# es considerado
aceptado como estndar
ECMA. Puede acceder a
la informacin de ECMA
para C# en la sitio Web
oficial de la organizacin.
www.ecmainternational.org/
Tambin se puede consultar
la licencia del estndar ISO
sobre C# en el sitio oficial
de la organizacin.
standards.iso.org/ittf/
licence.html

Visual Studio 2010 en conjunto con Microsoft SQL Server 2008 Express no se limita a
proveernos un sistema dnde almacenar nuestros datos sino que adems nos otorga
soporte completo para la administracin de la base de datos y sus datos, ya sea por
cdigo o por medio de la administracin visual de los mismos. As, podremos agregar
nuevas tablas, vistas y otro conjunto de elementos propios de las bases de datos todo
desde el mismo IDE de desarrollo. En la Figura 5 podemos ver el Explorador de
servidores, una ventana que nos permitir tener acceso a las caractersticas citadas y
con el cual interactuaremos en los ejemplos.

Figura 5
Las bases de datos son
fundamentales para las
aplicaciones de la
actualidad. El poder
almacenar datos para
persistirlos y recuperarlos
luego ser el puntal de
nuestras aplicaciones.

Nuestro primer sitio Web

El primer ejercicio nos servir para entender los conceptos detrs de ASP.net, adems de
cmo el Microsoft .Net Framework nos provee de libreras de cdigo para soportar
este tipo de desarrollos. Para crear la primer aplicacin Web deberemos seguir los
siguientes pasos.
Como primer paso, abra Visual Studio 2010 y seleccione Archivo, luego Nuevo y finalmente Proyecto. Visual
Studio mostrar la lista de proyectos disponibles.

Herramientas externas
Adems del entorno de
Visual Studio como
entorno para la
manipulacin de bases de
datos, Microsoft nos
provee otras herramientas
ms especficas y con
mayores funcionalidades.
SQL Server
Management Studio es
una herramienta completa
y podemos descargarla
desde la siguiente
direccin.
www.microsoft.com/
download/en/
details.aspx?id=7593

Seleccione el tipo de aplicacin Aplicacin web vaca de ASP.net dentro de la categora Web y coloque un nombre
en la misma. Finalmente presione el botn Aceptar.

Pgina por defecto

Los sitios Webs tienen
una pgina que se ejecuta
por defecto cada vez que
accedemos al mismo. Si el
usuario no coloca el
nombre especfico de una
pgina Web a la cual
acceder el servidor
intentar buscar una que
coincida con la
configuracin que este
contenga. Normalmente los
nombres de las pginas por
defecto pueden ser
default.aspx o
index.aspx.

Una vez finalizados los procesos de creacin, agregue una nueva pgina ASP.net. Presione con el botn derecho
del mouse sobre el proyecto para desplegar el men contextual y seleccione Agregar y luego en Nuevo elemento.

En el asistente seleccione el tipo de archivo Web Forms, colquele el nombre Default.asp. Para finalizar el proceso
presione el botn Agregar.

El proceso anterior nos ha servido para crear un proyecto del tipo ASP.net el cual ya
puede ser considerado, con la pgina Default.aspx dentro, como un sitio Web completamente funcional.
Podemos ver en la pgina adicionada al proyecto ASP.net toda la estructura HTML
(Hypertext Markup Language, o en castellano lenguaje de marcadores para hipertexto). Esta
estructura es la misma que podramos encontrar en cualquier desarrollo Web ya que las
etiquetas HTML o tags, por su nombre en ingls, utilizadas se basan en el estndar de
HTML. De cualquier manera es importante destacar que en las pginas ASP.net nos
encontraremos con una etiqueta que siempre estar presente y del que solo podremos
tener una declarada por pgina Web. Esta etiqueta es la etiqueta Form (Formulario) y el
motivo por el cual solo puede y debe haber una por pgina es debido a que el motor de
ejecucin de ASP.net utiliza esta para manipular la informacin que pudiera ser escrita
en la pgina por parte del usuario y luego, esta informacin, enviada al servidor para ser
procesada. Adems, ASP.net utilizar esta etiqueta para manipular los diferentes controles que coloquemos en la pgina Web brindndonos el servicio de mantener los valores
de los mismos entre cada recarga de la pgina as como traducindolos a cdigo C# o
Visual Basic.Net para que podamos manipularlos.
Intentemos, entonces, agregar algo de nuestra mano dentro de este cdigo creado
automticamente.
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<body>
<form id="form1" runat="server">
<div>
Mi primer sitio Web con ASP.net
</div>
</form>
</body>

Cmo vemos en el cdigo anterior, hemos agregado un mensaje, el cual ha sido

10

especficamente escrito dentro de algunos otras etiquetas HTML. En todo caso, como
decamos anteriormente, lo importante ser respetar el alcance de la etiqueta de formulario descrita de la forma <form...></form>. Para probar este pequeo ejemplo inicial
deberemos contar con un servidor Web para hospedar el sitio Web, indudablemente esto
requerira ciertos esfuerzos de configuracin y no siempre podremos, mientras estamos
realizando nuestras aplicaciones, llevarlas a cabo.
Por suerte, Visual Studio 2010 trae consigo un pequeo motor de ejecucin para sitios
Webs que es desplegado cada vez que necesitemos probar nuestras pginas. Para probar
nuestras aplicaciones simplemente deberemos presionar la tecla F5 y Visual Studio 2010
se encargar del resto. Como podemos ver en la Figura 6 al ejecutarse la aplicacin el
navegador por defecto es lanzado y nuestra primer pgina Web es mostrada.
Figura 6
Visual Studio 2010
iniciar el servidor
portable para ASP.net y
mostrar el resultado en
el navegador configurado
por defecto.

Maquetar nuestra pgina

Si bien hemos podido crear una pgina Web y ejecutarla, esta se ve poco atractiva y
bastante simple. Por lo tanto para disear una pgina Web puede que requiramos
conocimientos de diseo visual en niveles avanzados, esto no quita el hecho de que
podamos utilizar algunos controles provistos por el entorno de desarrollo que nos
simplificarn este trabajo. En el Cuadro de herramientas ubicada a la izquierda encontraremos la lista de controles listos para usar. Figura 7
Figura 7
En Visual Studio 2010
podremos encontrar una
lista de controles y
componentes listos para
usar desde la barra de
herramientas.

Para utilizar cualquiera de estos controles simplemente deberemos presionar dos veces
sobre el mismo y este se adicionar a la pgina Web con la que estemos trabajando. En
la Tabla 1 podemos ver algunos de los controles ms utilizados.

11

Tabla 1
Una lista resumida de los
controles ms utilizados
en ASP.net.

Control

Funcionalidad

Button

Muestra un botn HTML en la pgina. Es utilizado para desencadenar

acciones por parte del usuario como el envo de informacin de un
formulario hacia el servidor.

Image

Despliega una imagen en la pgina HTML basado en una direccin

especfica.

GridView

Muestra informacin, cmo datos desde una base de datos, en formato

de filas y columnas.

Label

Utilizado para mostrar contenido de texto. Permite manipular el texto

desde el cdigo C# o Visual Basic.Net

DropDownList

Muestra una lista desplegable con tems seleccionables por parte del
usuario.

TextBox

Coloca una caja de texto en la pgina HTML para que el usuario pueda
ingresar texto libre.

Agreguemos a la pgina ya existente un control de tipo Label (Etiqueta) y un control

Button (Botn). Si inspeccionamos el cdigo HTML deberamos obtener un cdigo
similar al siguiente.
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<div>
Mi primer sitio Web con ASP.net
<asp:Label ID="Label1" runat="server" Text="Label"></
asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>

Si vemos la pgina desde la vista de Diseo podremos ver el texto, la etiqueta y el

botn uno seguido del otro. Figura 8. Esto se debe a que en HTML los distintos
elementos son visualizados de forma consecutiva, hasta que cubren toda una lnea
representada por el ancho del navegador Web, para recin colocar otros elementos en la

Figura 8
En la vista de diseo se
muestran todos los
controles de forma
consecutiva y en una
nica lnea.

12

lnea siguiente.

Servidor portable
Inicialmente, el servidor
portable para la ejecucin de
pginas Web desarrolladas
con ASP.net y Visual Studio
posea un nombre cdigo
peculiar. Podremos encontrar
informacin sobre esta
versin original con el
nombre de Cassini.
En la actualidad este ha
cambiado de nombre y se ha
vuelto ms robusto. Estn
programadas nuevas
versiones que acompaarn
el nuevo Visual Studio.

Es aqu donde entrar en juego el arte de la maquetacin de una pgina Web. Para tal
fin podremos utilizar diferentes conceptos. Por un lado podramos utilizar CSS3 (Cascade
Style Sheet 3, o en castellano hojas de estilo en cascada versin 3), este mtodo nos permite
configurar no solo el aspecto visual de la pgina, como los colores o el tamao de la
tipografa, sino que adems nos permite posicionar diferentes controles en posiciones
especficas de la pgina. Otro mecanismo que podemos utilizar es el de utilizar otras
etiquetas HTML para crear una estructura estable dentro de la pgina Web que nos
permita colocar los diferentes controles en algn punto que conserven su posicin y
caractersticas. Nosotros utilizaremos una combinacin de los dos mtodos para crear
esta estructura.
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

<table style="width:100%">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label"></
asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>

El cdigo anterior muestra la combinacin de cdigo HTML mediante una etiqueta

<table> (Tabla) y el posicionamiento de cada uno de los controles, previamente adicionados, en cada una de las celdas de esta tabla, adems, utilizamos CSS para dimensionar
la tabla y que ocupe el 100% del ancho del navegador. En la Figura 9 podemos ver el
resultado de esta estructura.
Figura 9
Al colocar los controles
en cada una de las celdas
de la tabla estos
respetarn las posiciones
dadas.

13

Modifiquemos el cdigo que tenemos hasta ahora agregando algunos controles ms y

una nueva columna en nuestra tabla.

Controles y el formulario
Cuando adicionamos nuevos
controles a una pgina
ASP.net es de suma
importancia que verifiquemos que los mismos estn
siendo adicionados dentro
del alcance de la etiqueta
<form>.
Si algn control quedara
fuera de esta etiqueta
recibiremos un error ya que
ASP.net no podr manejar el
mismo entre peticiones del
cliente y el servidor.

12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<table style="width: 100%">

<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label"></
asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></
asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Label"></
asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></
asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Label"></
asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Button"
/>
</td>
</tr>
</table>

En la vista de diseo de Visual Studio 2010 podremos ver cmo la estructura ha

cambiado ligeramente para contener los diferentes controles adicionados. En la Figura
10 vemos el resultado final.
Por otra parte tambin notaremos que los controles muestran mensajes por defecto que
no nos resultarn tiles para nuestro sitio Web. Podemos modificar las propiedades de
los controles de diferentes maneras, utilizando la ventana Propiedades una vez seleccionado el control a editar o mediante el cdigo HTML. Cualquiera sea el camino que
tomemos obtendremos resultados similares. En la Figura 11 vemos el resultado nuestra
pgina una vez modificada la propiedad Text (Texto) de los controles.
14

Figura 10
La estructura creada
mediante el uso de la
etiqueta para tablas nos
permite tener mayor
control sobre la posicin
de los controles.

Con los controles en su lugar y mostrando mensajes ms adecuados para nuestro sitio,
el siguiente paso ser modificar su aspecto visual. Si bien podemos hacerlo utilizando
CSS tambin podremos llevar adelante esta tarea desde el editor de propiedades de los
controles. Para esto deberemos seleccionar el control que queramos editar, como
hicimos en el caso de la propiedad Text e interactuar con las diferentes propiedades que

Figura 11
La propiedad Text suele
estar presente en todos los
controles ASP.net.
Generalmente est
asociada a que texto
descriptivo muestra el
control en la pgina.

modificarn su apariencia. En la Tabla 2 podemos ver algunas propiedades que modificarn el aspecto visual de los controles.

15

Tabla 2
Una lista resumida de los
controles ms utilizados
en ASP.net.

Propiedad

Funcionalidad

ForeColor

Color del texto del control.

Font

Configura el aspecto de la tipografa del control. Pudiendo cambiar el

tipo, tamao, peso y otros.

BorderStyle

Estilo del contorno del control.

BorderColor

Color del contorno del control.

BackColor

Color del fondo del control.

CssClass

Nombre de una clase CSS que aplique al control.

Para otorgar una apariencia diferente a la de los controles por defecto realizaremos
algunas modificaciones generales a los diferentes controles colocados en nuestra pgina
Web.
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<asp:Label ID="Label1" runat="server" Text="Nombre:" FontNames="Verdana"></asp:Label>

...
<asp:Button ID="Button1" runat="server" Text="Enviar"
BackColor="White"
BorderStyle="None" BorderWidth="0px" Font-Bold="True" FontNames="Verdana"
Font-Size="12pt" />
...

En el cdigo anterior podemos ver dos de los controles de nuestra pgina desde la vista
de cdigo y sus propiedades visuales modificadas. En la Figura 12 se muestra la
configuracin de todos los controles.
Si configuramos todos los controles de nuestra pgina podremos notar que la misma
configuracin se repite constantemente. Tomemos como ejemplos las etiquetas. Cada
Figura 12
Cada control ha sido
configurado desde la
ventana de propiedades.
Estas propiedades son
traducidas a cdigo CSS
estndar.

16

una de ellas ha tenido que recibir las mismas configuraciones y en la vista de cdigo
podremos ver que efectivamente es la misma configuracin multiplicada por tres. Esto
puede no causar problemas en la ejecucin de la pgina pero el tener que realizar
alguna modificacin a estos controles requerir que la hagamos tantas veces cmo
controles tengamos en la pgina. Para solucionar esto aplicaremos el concepto de
Temas y Mscaras. El primero, en ASP.net hace referencia a un conjunto de referencias visuales para los controles de nuestro sitio el cual podremos aplicar en cualquier
momento. Por lo tanto, podramos tener diferentes temas con diferentes configuraciones
visuales y aplicarlos sin tener que modificar los controles y sus configuraciones. Las
mscaras por lo tanto, son los elementos que contendr ese tema, pudiendo tener
mscaras para cada tipo de control dentro de nuestro sitio Web. Para agregar un tema
deberemos seguir los siguientes pasos.
Presione con el botn derecho del mouse sobre el proyecto ASP.net. En el men contextual seleccione Agregar,
luego Agregar carpeta ASP.net y finalmente Tema.

Cdigo HTML
Para el desarrollo de
pginas Web es necesario
estar familiarizado con las
diferentes etiquetas HTML.
Si bien ASP.net provee un
amplio abanico de
controles , algunos escapan
a su dominio. Si necesitamos saber ms sobre
HTML podremos visitar el
sitio Web de la W3C para
leer sobre el estndar.
www.w3.org/TR/html5/

En la ventana Explorador de soluciones escriba un nombre para el tema. Este nombre ser utilizado como
referencia en el futuro.

17

Con el nuevo tema creado, presione con el botn derecho del mouse y luego en Agregar y, finalmente en Nuevo
elemento. Por ltimo, agregue un nuevo Archivo de mscara.

Aspecto visual
El aspecto visual de una
pgina Web es de vital
importancia. Una pgina
correctamente diseada
ser ms atractiva para
nuestros clientes, por lo
tanto, adems de los
conocimientos de
programacin siempre ser
recomendable aprender el
uso de CSS y aplicarlo a
nuestros sitios Web. Para
consultar sobre este
estndar ingrese a la
siguiente direccin
www.w3.org/Style/CSS/

Este nuevo archivo servir para contener todas las definiciones de los distintos controles
y sus caractersticas visuales. Una forma simple de crear una nueva mscara es copiando
la estructura HTML de un control ya configurado y modificar el atributo ID
(Identificador) por SkinId (Identificador de mscara).

12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<asp:Label SkinId="mascaraEtiquetas" runat="server"

Font-Names="Verdana"></asp:Label>

La mscara anterior aplicar para todas los controles de tipo Label (Etiqueta) y podremos encontrarla mediante el nombre mascaraEtiquetas. El siguiente paso ser especificar en la pgina ASP.net que debe usar el tema creado y a los controles de etiqueta cual
mscara usar.
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<%@ Page Language="C#" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Theme="MiTema"
Inherits="Ejercicio1.Default" %>

Notemos que en la pgina ASP.net tenemos una cabecera que identifica, entre otras
cosas, el lenguaje en el cual la misma ser programada, as como cual clase se encargar
de manipularla. Otra propiedad ser la llamada Theme (Tema) dnde podremos especificar el tema que queremos utilizar para esta pgina. Nosotros usaremos el tema que
hemos creado en el paso anterior.

12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

<asp:Label ID="Label1" runat="server" Text="Nombre:"

SkinID="mascaraEtiquetas"></asp:Label>

Por ltimo, modificamos los diferentes controles de etiquetas adicionndole la referencia

a nuestra mscara mediante la propiedad SkinID. En la Figura 13 vemos que al ejecutar
nuestra pgina obtenemos el mismo resultado que obtuvimos configurando cada control
18

por separado.
Figura 13
Las mscaras pueden
prevenirnos de realizar
grandes modificaciones
masivas al comportamiento
visual de los controles.

El ltimo paso dentro de la maquetacin de las pginas, mediante otro componente

provisto por ASP.net, es la utilizacin de pginas maestras. Estas pginas nos permiten
crear un marco contenedor visual de todas las pginas de nuestro sitio Web pudiendo, al
igual que los temas, aplicar un modelo visual fcilmente intercambiable y modificable.
Para crear una pgina maestra deberemos seguir los mismos pasos utilizados para
agregar cualquier nuevo elemento a nuestro proyecto pero seleccionando el tipo de
archivo Pgina maestra desde el asistente. El cdigo de una pgina maestra por
defecto posee la siguiente estructura.
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

<%@ Master Language="C#" AutoEventWireup="true"

CodeBehind="Site1.master.cs" Inherits="Ejercicio1.Site1" %>
...
...
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</div>
</form>

Como vemos en el cdigo anterior, la estructura ser similar a la ya conocida. Las nicas
diferencias estn en la cabecera de la pgina la cual especifica que es una pgina maestra
mediante el uso del identificador <%@Master y el control ASP.net llamado
ContentPlaceHolder. Por lo tanto, podremos crear la estructura HTML que queramos
dentro de esta pgina como si se tratase de cualquier otra pgina Web. Lo nico que
deberemos tener en cuenta ser el lugar donde colocaremos el control
ContentPlaceHolder ya que este servir de referencia para las dems pginas Web que
utilicen la pgina maestra como molde de visualizacin. Para entender esto primero
agreguemos una tabla HTML a la pgina maestra dejando el control
ContentPlaceHolder dentro de una de las celdas de la misma.
19

1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234

<table style="width: 100%">

<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>

Esta estructura nos permitir colocar contenidos alrededor del control

ContentPlaceHolder mientras que las dems pginas que utilicen este molde colocarn
su contenido dentro de este control. En la Figura 14 vemos cmo nuestra primera
pgina Web ahora utiliza la pgina maestra para mostrar su contenido.
Figura 14
La pgina principal ahora
utiliza la pgina maestra
para reutilizar la estructura
visual que ha quedado
centralizada.

Si bien hemos tenido que realizar algunas modificaciones a la pgina inicial para que
pueda visualizar el contenido de la pgina maestra, estas sern menores. El primer paso
es modificar la cabecera de la pgina para que utilice, al igual que hicimos con los temas,
la pgina maestra.
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234
1234

<%@ Page Language="C#" MasterPageFile="~/Site1.Master"

AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Theme="MiTema" Inherits="Ejercicio1.Default" %>
20

Frames y pginas
maestras
Inicialmente resulta algo
complejo entender el
mecanismo de funcionamiento de las pginas maestras y
se las suele confundir con las
etiquetas HTML que hacen
referencia a Frames (Marcos).
A diferencia de estos, las
pginas maestras no
muestran varias pginas al
mismo tiempo si no que
antes de ejecutarse se
fusionan con la pgina de
contenidos para enviar una
nica pgina HTML al
navegador.

Dentro de la cabecera hemos adicionado un atributo llamado MasterPageFile (Archivo

de pgina maestra) colocando en su contenido el nombre de la pgina maestra recientemente adicionada. La segunda modificacin ser eliminar todo el contenido HTML
salvo aquellos que contengan funcionalidad especfica, en nuestro caso los controles,
etiquetas y cajas de texto. Esto se debe a que es ahora la pgina maestra la que contendr la etiqueta Form y la estructura HTML principal.
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1" runat="server">Mi
primer sitio Web con ASP.net
<table style="width: 100%">
<tr>
...
...
</asp:Content>

Podemos ver que nuestro cdigo HTML ahora est dentro de otro control llamado
Content (Contenido) el cual, dentro de sus atributos, contiene uno llamado
ContentPlaceHolderID (Identificador de contenedor) el que apuntar al identificador de
contenido que tenemos en la pgina maestra.

Crear el comportamiento
El ltimo paso ser crear algunas lneas de cdigo para manipular el comportamiento de
nuestro sitio Web. Lo primero que haremos ser agregar algunos tems al control de lista
desplegable que tenemos en nuestra pgina. Si presionamos dos veces sobre la pgina
Web en la vista de diseo, nos enviar automticamente al evento de cdigo principal de
carga de la pgina.
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

protected void Page_Load(object sender, EventArgs e)

{
if (!IsPostBack)
{
this.DropDownList1.Items.Add("La Paz");
this.DropDownList1.Items.Add("Crdoba");
this.DropDownList1.Items.Add("Santiago");
this.DropDownList1.Items.Add("Otra");
}
}

El cdigo anterior cargar algunos elementos dentro de la lista desplegable para que el
usuario pueda seleccionar uno. Adems hemos agregado una condicin que nos permita
asegurarnos que la lista se cargue solo cuando la pgina sea cargada por primera vez. En
la Figura 15 podemos ver el resultado de este cdigo.
Con datos cargados agregaremos cdigo para la accin del botn de forma que cuando
el usuario presione sobre el mismo podamos capturar los datos escritos por este y
enviarlos por correo electrnico a nuestra casilla de correo. Para esto, al igual que
hicimos con el formulario presionaremos dos veces sobre el botn desde la vista de
diseo de la pgina Web.

21

Figura 15
La lista desplegable
muestra cada uno de los
tems cargados por medio
del cdigo.

12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

protected void Button1_Click(object sender, EventArgs e)

{
var correo = new MailMessage();
correo.Subject = "Mensaje desde mi sitio Web";
correo.From = new MailAddress("Origne@servidor.com");
correo.To.Add("MiCorreo@servidor.com");
correo.Body = "Datos de contacto: " +
this.TextBox1.Text + "\n" +
this.TextBox2.Text + "\n" +
this.DropDownList1.SelectedItem.Text;
var smtp = new SmtpClient();
smtp.Host = "ServidorSMTP";
smtp.Send(correo);
}

En el cdigo anterior utilizamos las clases SmtpClient (Cliente Smtp) y MailMessage

(Mensaje de correo) del espacio de nombres System.Net.Mail para construir un correo
electrnico con los datos recolectados desde la pgina. De esta forma, cuando el usuario
presione el botn de envo en la pgina podremos acceder a las cajas de texto y la lista
desplegable para tomar esta informacin y enviar el correo electrnico a nuestra casilla.
El ltimo paso ser mostrar un mensaje al usuario avisando que su informacin ha sido
enviada. Para esto agregaremos una nueva pgina ASP.net y en ella un texto con el
mensaje para el usuario. La pgina debera verse de forma similar a como se muestra en
la Figura 16.
Para poder redirigir la accin de la primera pgina hacia la segunda despus de enviar el
correo electrnico utilizaremos el objeto Response (Respuesta), de esta forma podremos
navegar hacia otra pgina dentro de nuestro sitio Web.

22

Figura 16
Al tener una pgina
maestra todas las dems
pginas Web solo
requerirn el contenido a
visualizar y no toda la
estructura visual.

123
123
123
123
123
123
123
123
123
123
123
123
123
123

...
Response.Redirect("mensaje.aspx");
...

Dentro del objeto Response hacemos uso de la funcin Redirect (Redireccionar) pasando
como parmetro el nombre de la pgina a la cual queremos navegar. Esto producir que
el navegador ahora visualice la segunda pgina y no la del formulario como vemos en la
Figura 17.
Figura 17
Una vez el correo
electrnico es enviado el
usuario recibe el mensaje
de agradecimiento desde
la segunda pgina de
nuestro sitio Web.

Catlogo de productos
En este ejercicio nos enfocaremos en la utilizacin de SQL Server 2008 Express para el
almacenamiento y recuperacin de datos y cmo podremos accederlos desde nuestro
sitio Web para que sean desplegados hacia el usuario. Crearemos un catlogo de productos y aprenderemos a enlazar algunos de los controles utilizados para la muestra de
23