Apunte Visual STudio 2008 PDF

Universidad Nacional del Nordeste
Facultad de Ciencias Exactas y Naturales y Agrimensura

DEPARTAMENTO DE INFORMTICA

REA PROGRAMACIN

CTEDRA PROGRAMACIN II

DESARROLLO DE APLICACIONES WEB

AO 2009
PROF. OSCAR A. ZALAZAR
Ctedra: Programacin II
2
Los diferentes lenguajes de programaci n para l a web
Actualmente existen diferentes lenguajes de programacin para desarrollar en la
web, estos han ido surgiendo debido a las tendencias y necesidades de las
plataformas. Desde los inicios de Internet, fueron surgiendo diferentes demandas
por los usuarios y se dieron soluciones mediante lenguajes estticos. A medida que
paso el tiempo, las tecnologas fueron desarrollndose y surgieron nuevos
problemas a dar solucin. Esto dio lugar a desarrollar lenguajes de programacin
para la web dinmicos, que permitieran interactuar con los usuarios y utilizaran
Bases de Datos. A continuacin los lenguajes de programacin para la web mas
utilizados.
Lenguaj e HTML
Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje
HTML. Es un lenguaje esttico para el desarrollo de sitios web (acrnimo en ingls
de HyperText Markup Language, en espaol Lenguaje de Marcas Hipertextuales).
Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener
las extensiones (htm o html).
Sintaxis:
<html> (Inicio del documento HTML)
<head> ( Cabecera )
</head>
<body>( Cuerpo )
</body>
</html>

<b> </b> Negrita
<p> </p> Definir prrafo
<etiqueta> Apertura de la etiqueta
</etiqueta> Cierre de la etiqueta
Ventajas:
Sencillo que permite describir hipertexto.
Texto presentado de forma estructurada y agradable.
No necesita de grandes conocimientos cuando se cuenta con un editor de
pginas web o WYSIWYG.
Archivos pequeos.
Despliegue rpido.
Lenguaje de fcil aprendizaje.
Lo admiten todos los exploradores.
Desventajas:
Lenguaje esttico.
La interpretacin de cada navegador puede ser diferente.
Guarda muchas etiquetas que pueden convertirse en basura y dificultan la
correccin.
El diseo es ms lento.
Las etiquetas son muy limitadas.
Lenguaj e Javascript
Este es un lenguaje interpretado, no requiere compilacin. Fue creado por Brendan
Eich en la empresa Netscape Communications. Utilizado principalmente en pginas
web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no
3
dispone de herencias. La mayora de los navegadores en sus ltimas versiones
interpretan cdigo Javascript.
El cdigo Javascript puede ser integrado dentro de nuestras pginas web. Para
evitar incompatibilidades el World Wide Web Consortium (W3C) diseo un estndar
denominado DOM (en ingls Document Object Model, en su traduccin al espaol
Modelo de Objetos del Documento).
Sintaxis:
<script type="text/javascript"> ... </script>
Ventajas:
Lenguaje de scripting seguro y fiable.
Los script tienen capacidades limitadas, por razones de seguridad.
El cdigo Javascript se ejecuta en el cliente.
Desventajas:
Cdigo visible por cualquier usuario.
El cdigo debe descargarse completamente.
Puede poner en riesgo la seguridad del sitio, con el actual problema llamado
XSS (significa en ingls Cross Site Scripting renombrado a XSS por su
similitud con las hojas de estilo CSS).
Lenguaje PHP
Es un lenguaje de programacin utilizado para la creacin de sitio web. PHP es un
acrnimo recursivo que significa PHP Hypertext Pre-processor, (inicialmente se
llam Personal Home Page). Surgi en 1995, desarrollado por PHP Group.
PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la
generacin de pginas web dinmicas, embebidas en pginas HTML y ejecutadas en
el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento
necesita tener instalado Apache o IIS con las libreras de PHP. La mayor parte de su
sintaxis ha sido tomada de C, Java y Perl con algunas caractersticas especficas.
Los archivos cuentan con la extensin (php).
Sintaxis:
La sintaxis utilizada para incorporar cdigo PHP es la siguiente:
<?
$mensaje = Hola;
echo $mensaje;
?>
Tambin puede usarse:
<?php
$mensaje = Hola;
echo $mensaje;
?>
Ventajas:
Muy fcil de aprender.
Se caracteriza por ser un lenguaje muy rpido.
Soporta en cierta medida la orientacin a objeto. Clases y herencia.
Es un lenguaje multiplataforma: Linux, Windows, entre otros.
Capacidad de conexin con la mayora de los manejadores de base de datos:
MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.
4
Capacidad de expandir su potencial utilizando mdulos.
Posee documentacin en su pgina oficial la cual incluye descripcin y
ejemplos de cada una de sus funciones.
Es libre, por lo que se presenta como una alternativa de fcil acceso para
todos.
Incluye gran cantidad de funciones.
No requiere definicin de tipos de variables ni manejo detallado del bajo
nivel.
Desventajas:
Se necesita instalar un servidor web.
Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede
ser ms ineficiente a medida que las solicitudes aumenten de nmero.
La legibilidad del cdigo puede verse afectada al mezclar sentencias HTML y
PHP.
La programacin orientada a objetos es an muy deficiente para
aplicaciones grandes.
Dificulta la modularizacin.
Dificulta la organizacin por capas de la aplicacin.
Seguridad:
PHP es un poderoso lenguaje e intrprete, ya sea incluido como parte de un
servidor web en forma de mdulo o ejecutado como un binario CGI separado, es
capaz de acceder a archivos, ejecutar comandos y abrir conexiones de red en el
servidor. Estas propiedades hacen que cualquier cosa que sea ejecutada en un
servidor web sea insegura por naturaleza.
PHP est diseado especficamente para ser un lenguaje ms seguro para escribir
programas CGI que Perl o C, y con la seleccin correcta de opciones de
configuracin en tiempos de compilacin y ejecucin, y siguiendo algunas prcticas
correctas de programacin.
Lenguaj e ASP
Es una tecnologa del lado de servidor desarrollada por Microsoft para el desarrollo
de sitio web dinmicos. ASP significa en ingls (Active Server Pages), fue liberado
por Microsoft en 1996. Las pginas web desarrolladas bajo este lenguaje es
necesario tener instalado Internet Information Server (IIS).
ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se
pueden utilizar para crear pginas ASP. El ms utilizado es VBScript, nativo de
Microsoft. ASP se puede hacer tambin en Perl and Jscript (no JavaScript). El
cdigo ASP puede ser insertado junto con el cdigo HTML. Los archivos cuentan con
la extensin (asp).
Sintaxis:
<% %>
Ventajas:
Usa Visual Basic Script, siendo fcil para los usuarios.
Comunicacin ptima con SQL Server.
Soporta el lenguaje JScript (Javascript de Microsoft).
Desventajas:
Cdigo desorganizado.
5
Se necesita escribir mucho cdigo para realizar funciones sencillas.
Tecnologa propietaria.
Hospedaje de sitios web costosos.
Lenguaj e ASP.NET
Este es un lenguaje comercializado por Microsoft, y usado por programadores para
desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnologa
ASP, fue lanzada al mercado mediante una estrategia de mercado denominada
.NET.
El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor
ASP. Creado para desarrollar web sencillas o grandes aplicaciones. Para el
desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con
la extensin (aspx). Para su funcionamiento de las pginas se necesita tener
instalado IIS con el Framework .Net. Microsoft Windows 2003 incluye este
framework, solo se necesitar instalarlo en versiones anteriores.
Ventajas:
Completamente orientado a objetos.
Controles de usuario y personalizados.
Divisin entre la capa de aplicacin o diseo y el cdigo.
Facilita el mantenimiento de grandes aplicaciones.
Incremento de velocidad de respuesta del servidor.
Mayor velocidad.
Mayor seguridad.
Desventajas:
Mayor consumo de recursos.
Lenguaj e JSP
Es un lenguaje para la creacin de sitios web dinmicos, acrnimo de Java Server
Pages. Est orientado a desarrollar pginas web en Java. JSP es un lenguaje
multiplataforma. Creado para ejecutarse del lado del servidor.
JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las de
ASP.NET, desarrollado para la creacin de aplicaciones web potentes. Posee un
motor de pginas basado en los servlets de Java. Para su funcionamiento se
necesita tener instalado un servidor Tomcat.
Sintaxis:
Caractersticas:
Cdigo separado de la lgica del programa.
Las pginas son compiladas en la primera peticin.
Permite separar la parte dinmica de la esttica en las pginas web.
Los archivos se encuentran con la extensin (jsp).
El cdigo JSP puede ser incrustado en cdigo HTML.
Elementos de JSP
Los elementos que pueden ser insertados en las pginas JSP son los siguientes:
Cdigo: se puede incrustar cdigo Java.
Directivas: permite controlar parmetros del servlet.
6
Acciones: permite alterar el flujo normal de ejecucin de una pgina.
Ventajas:
Ejecucin rpida del servlets.
Crear pginas del lado del servidor.
Multiplataforma.
Cdigo bien estructurado.
Integridad con los mdulos de Java.
La parte dinmica est escrita en Java.
Permite la utilizacin se servlets.
Desventajas:
Complejidad de aprendizaje.
Lenguaj e Python
Es un lenguaje de programacin creado en el ao 1990 por Guido van Rossum, es
el sucesor del lenguaje de programacin ABC. Python es comparado habitualmente
con Perl. Los usuarios lo consideran como un lenguaje ms limpio para programar.
Permite la creacin de todo tipo de programas incluyendo los sitios web.
Su cdigo no necesita ser compilado, por lo que se llama que el cdigo es
interpretado. Es un lenguaje de programacin multiparadigma, lo cual fuerza a que
los programadores adopten por un estilo de programacin particular:
Programacin orientada a objetos.
Programacin estructurada.
Programacin funcional.
Programacin orientada a aspectos.
Sintaxis:
Ejemplo de una clase en Phyton:
def dibujar_muneco(opcion):
if opcion == 1:
C.create_line(580, 150, 580, 320, width=4, fill="blue")
C.create_oval(510, 150, 560, 200, width=2, fill='PeachPuff')
Ventajas:
Libre y fuente abierta.
Lenguaje de propsito general.
Gran cantidad de funciones y libreras.
Sencillo y rpido de programar.
Multiplataforma.
Licencia de cdigo abierto (Opensource).
Orientado a Objetos.
Portable.
Desventajas:
Lentitud por ser un lenguaje interpretado.
7
Lenguaj e Ruby
Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado
en el 1993 por el programador japons Yukihiro Matz Matsumoto. Su sintaxis est
inspirada en Phyton, Perl. Es distribuido bajo licencia de software libre
(Opensource).
Ruby es un lenguaje dinmico para una programacin orientada a objetos rpida y
sencilla. Para los que deseen iniciarse en este lenguaje pueden encontrar un tutorial
interactivo de ruby. Se encuentra tambin a disposicin de estos usuarios un sitio
con informaciones y cursos en espaol.
Sintaxis:
puts "hola"
Caractersticas:
Existe diferencia entre maysculas y minsculas.
Mltiples expresiones por lneas, separadas por punto y coma ;.
Dispone de manejo de excepciones.
Ruby puede cargar libreras de extensiones dinmicamente si el (Sistema
Operativo) lo permite.
Porttil.
Ventajas:
Permite desarrollar soluciones a bajo Costo.
Software libre.
Multiplataforma.

8
Introduccin a Visual Studio
Visual Studio es un conjunto completo de herramientas de desarrollo para la
generacin de:
Aplicaciones web ASP.NET.
Aplicaciones de escritorio.
Aplicaciones mviles.
Visual Basic, Visual C# utilizan todos el mismo entorno de desarrollo integrado
(IDE), que habilita el uso compartido de herramientas y hace ms sencilla la
creacin de soluciones en varios lenguajes, se pueden incorporar otros lenguajes al
entorno de desarrollo. Asimismo, dichos lenguajes utilizan las funciones de .NET
Framework, las cuales ofrecen acceso a tecnologas clave para simplificar el
desarrollo de aplicaciones web ASP.
Entorno de desarrollo integrado
La gama de productos de Visual Studio comparte un nico entorno de desarrollo
integrado (IDE) que se compone de varios elementos: el Men, barra de
herramientas Estndar, varias ventanas de herramientas que se acoplan u ocultan
automticamente a la izquierda, parte inferior y a la derecha, as como en el
espacio del editor. Las ventanas de herramientas, mens y barras de herramientas
disponibles dependen del tipo de proyecto o archivo en el que est trabajando.
IDE con la configuracin de desarrollo general aplicada

Dependiendo de la configuracin aplicada y de las subsiguientes personalizaciones
que haya realizado, variar la colocacin de las ventanas de herramientas y de
otros elementos en el IDE. Puede cambiar la configuracin mediante el Asistente
para importar y exportar configuraciones que se encuentra en el Men
Herramientas.
9
En esta figura tenemos el Men, la barra de herramienta estndar, abajo a la
izquierda el cuadro de herramientas, en el centro la pgina de inicio y despus el
explorador de soluciones.
Explorador de soluciones
El Explorador de soluciones proporciona una vista organizada de los proyectos y sus
archivos, as como acceso rpido a los comandos relativos a ello.
Las soluciones y los proyectos contienen elementos en forma de referencias,
conexiones de datos, carpetas y archivos necesarios para crear la aplicacin. Un
contenedor de tipo solucin puede contener varios proyectos y un contenedor de
tipo proyecto normalmente contiene varios elementos. El Explorador de soluciones
muestra soluciones, sus proyectos y los elementos incluidos en dichos proyectos.
En el Explorador de soluciones, puede abrir archivos para editar, agregar nuevos
archivos a un proyecto y ver las propiedades de las soluciones, proyectos y
elementos.
Explorador de soluciones

Pgina de Inicio
La Pgina de inicio proporciona una manera sencilla de crear o tener acceso a
proyectos, obtener informacin acerca de prximas publicaciones de productos y
conferencias o leer artculos recientes sobre programacin. Para tener acceso a la
Pgina de inicio, en el men Ver, seleccione Otras ventanas y, a continuacin,
haga clic en Pgina de inicio.
Editores y diseadores
En el IDE esta ubicado en el lugar de la pgina de inicio. El editor y los diseadores
que utilice dependern del tipo de archivo o documento que est creando. El Editor
de texto es el procesador de textos bsico del IDE, mientras que el Editor de cdigo
es el editor de cdigo fuente bsico.
Otros editores, como el Editor CSS, el Diseador HTML y el Diseador de pginas
Web, comparten muchas de las funciones del Editor de cdigo, junto con mejoras
especficas en el tipo de cdigo o de marcado admitido.
Los editores y diseadores normalmente tienen dos vistas: una vista de diseo
grfica y la vista de cdigo subyacente o vista de cdigo fuente. La vista de diseo
le permite especificar la ubicacin de los controles y otros elementos en la interfaz
de usuario o la pgina web. Puede arrastrar con facilidad un control desde el
Cuadro de herramientas y colocarlo en la superficie de diseo.
Diseador de pginas Web, vista Diseo
10

En la parte de abajo se puede ver que esta seleccionado diseo, es el lugar donde
colocamos los distintos controles, imgenes, etc. de nuestra pgina web, tambin
podemos ver el cdigo fuente asociado al diseo y si seleccionamos dividir vemos el
diseo y el cdigo.

Cuadro de Herramientas
El Cuadro de herramientas muestra los iconos de los elementos que puede agregar a los
proyectos Visual Studio. El Cuadro de herramientas est disponible en el men Ver. Puede
acoplarlo y fijarlo como abierto o establecerlo en Ocultar automticamente.
Cada icono del Cuadro de herramientas se puede arrastrar y colocar en una superficie de vista
de diseo; o bien, copiarse y pegarse en un editor de cdigo dentro del entorno de desarrollo
integrado (IDE) de Visual Studio. Cualquier accin agrega el cdigo bsico para crear una instancia
del elemento del Cuadro de herramientas en el archivo del proyecto activo.

Informacin sobre pginas Web ASP.NET
Las pginas Web ASP.NET se utilizan como la interfaz de usuario de la aplicacin
Web. Este tipo de pginas presenta la informacin al usuario en cualquier
explorador o dispositivo cliente e implementa lgica del sistema mediante el
software que se encuentra en el servidor. Las pginas Web ASP.NET:
Se basan en la tecnologa Microsoft ASP.NET, en la que el cdigo que se
ejecuta en el servidor genera de forma dinmica salida de pginas Web en un
explorador del cliente.
Son compatibles con cualquier explorador o dispositivo mvil. Las pginas
Web ASP.NET representan automticamente el cdigo HTML adecuado al
explorador para funciones tales como estilos, diseo, etc. Como alternativa, se
pueden disear las pginas Web ASP.NET para ejecutarse en un explorador
determinado.
Admiten cualquier lenguaje compatible con Common Language Runtime de
.NET, incluidos Microsoft Visual Basic, Microsoft Visual C#, Microsoft J# y
Microsoft JScript.NET.
Se crean en el entorno Microsoft .NET Framework. Esto proporciona todos los
beneficios del marco de trabajo, incluidos un entorno administrado, seguridad
de tipos y herencia.
Son flexibles gracias a la posibilidad de incorporar a ellas controles creados
por los usuarios y de otros fabricantes.
Componentes de pginas Web ASP.NET
En las pginas Web ASP.NET, la programacin de la interfaz de usuario se divide en
dos partes: el componente visual (diseo) y el lgico (cdigo).
11
El elemento visual est compuesto por un archivo que contiene el marcado esttico
como HTML o controles ASP.NET o ambos. La pgina Web ASP.NET funciona como
un contenedor del texto y los controles estticos que se desea mostrar.
La lgica de las pginas Web ASP.NET se compone del cdigo creado para
interactuar con la pgina. El cdigo puede residir en un bloque de script en la
pgina o en una clase independiente. Si el cdigo est en un archivo de clase
independiente, a este archivo se le conoce como archivo de cdigo subyacente. El
cdigo del archivo de cdigo subyacente se puede escribir en Visual Basic,
Visual C#, Visual J# o JScript .NET.
Las pginas Web ASP.NET se compilan en un archivo de biblioteca de vnculos
dinmicos (.dll). La primera vez que un usuario examina la pgina .aspx con el
explorador, ASP.NET genera automticamente un archivo de clase .NET que
representa a la pgina y la compila. El archivo .dll se ejecuta en el servidor y
genera dinmicamente la salida HTML para su pgina.
Ventajas que aportan las pginas Web ASP.NET
Implementacin de una interfaz de usuario Web compleja Puede ser
difcil y tedioso disear e implementar una interfaz de usuario utilizando las
funciones bsicas de HTML, especialmente si la pgina tiene un diseo
complejo, un gran cantidad de contenido dinmico y objetos con muchas
funciones y que requieren interaccin con el usuario.
Separacin de cliente y servidor En una aplicacin Web, el cliente
(explorador) y el servidor son programas diferentes que a menudo se ejecutan
en equipos distintos (e incluso en distintos sistemas operativos). Por lo tanto,
las dos mitades de la aplicacin comparten muy poca informacin; se pueden
comunicar, pero normalmente intercambian slo pequeas porciones de
informacin simple.
Ejecucin sin estado Cuando un servidor Web recibe una solicitud de una
pgina, la busca, la procesa y la enva al explorador y, a continuacin, descarta
toda la informacin de dicha pgina. Si el usuario solicita la pgina de nuevo, el
servidor repite la secuencia completa, volviendo a procesar la pgina desde el
principio. En otras palabras, los servidores no tienen memoria de las pginas
que han procesado, no tienen estado. Por consiguiente, si una aplicacin
necesita mantener informacin sobre una pgina, su naturaleza sin estado
podra ser un problema.
Funciones desconocidas del cliente En muchos casos, las aplicaciones
Web resultan accesibles a muchos usuarios que usan exploradores diferentes
Los exploradores ofrecen distintas funcionalidades, lo que hace muy difcil crear
una aplicacin que se ejecute con la misma calidad en todos ellos.
Complicaciones con el acceso a datos La lectura de los datos de un origen
de datos y la escritura en el mismo puede resultar complicada con las
aplicaciones Web tradicionales y requerir la utilizacin de varios recursos.
Complicaciones con la escalabilidad En muchos casos, las aplicaciones
Web diseadas con los mtodos existentes no pueden cumplir los objetivos de
escalabilidad debido a la falta de compatibilidad entre sus distintos
componentes. Este es a menudo el origen comn de los errores en aplicaciones
sometidas a un ciclo de crecimiento intenso.
Vencer estos retos de las aplicaciones Web puede requerir un tiempo y esfuerzo
importantes. Las pginas Web ASP.NET y el marco de trabajo de pginas
ASP.NET tratan de solucionar estos temas de los modos siguientes:
Intuitivo, modelo de objeto coherente El marco de trabajo de pginas
ASP.NET presenta un modelo de objetos que permite concebir los formularios
como una unidad, no como partes de cliente y servidor independientes. En este
modelo, se puede programar la pgina de un modo ms intuitivo que en las
aplicaciones Web tradicionales, ya que se incluye la capacidad de establecer las
propiedades de los elementos de la pgina y de responder a los eventos.
12
Adems, los controladores de servidor ASP.NET son una abstraccin del
contenido fsico de una pgina HTML y de la interaccin directa entre el
explorador y el servidor. En general, se pueden usar los controles de servidor
del mismo modo que se hara con los controles en una aplicacin cliente, pero
sin tener que preocuparse por crear el cdigo HTML para presentar y procesar
los controles y su contenido.
Modelo de programacin controlada por eventos Las pginas Web
ASP.NET aportan a las aplicaciones Web un modelo familiar que permite disear
controladores de eventos para aquellos eventos que se producen en el cliente o
en el servidor. El marco de trabajo de las pginas ASP.NET tienen un
mecanismo subyacente de captura de los eventos en el cliente, su transmisin
al servidor y la llamada al mtodo apropiado se realiza de modo automtico e
invisible para el usuario. El resultado es una estructura de cdigo clara y escrita
con facilidad, compatible con el desarrollo controlado por eventos.
Aplicaciones independientes del explorador El marco de trabajo de
pginas ASP.NET permite crear toda la lgica de la aplicacin en el servidor, lo
que elimina la necesidad de confeccionar explcitamente cdigo para las
diferencias de los diferentes exploradores. Sin embargo, todava le permite
aprovechar las funciones especficas de cada explorador al escribir cdigo para
la parte cliente con el fin de mejorar el rendimiento y de proporcionar una
experiencia ms enriquecedora en la parte cliente.
Compatibilidad de Common Language Runtime de .NET Framework El
marco de trabajo de la pgina ASP.NET se genera sobre .NET Framework, por lo
que todo el marco de trabajo est disponible para cualquier aplicacin ASP.NET.
Sus aplicaciones se pueden escribir en cualquier lenguaje que sea compatible
con el tiempo de ejecucin. Adems, el acceso a datos se ha simplificado
mediante la infraestructura de acceso a datos que ofrece .NET Framework,
incluido ADO.NET.
Rendimiento del servidor escalable de .NET Framework El marco de
trabajo de pginas ASP.NET permite escalar las aplicaciones Web de un equipo
con un nico procesador a una batera de servidores Web con varios equipos
perfectamente y sin realizar cambios complicados en la lgica de la aplicacin.
Funcionamiento de las Pginas Web de ASP.NET
El ciclo de procesamiento de una pgina Web de ASP.NET:
1. El usuario solicita la pgina. (La pgina se solicita utilizando un mtodo GET
de HTTP.) La pgina se ejecuta por primera vez, realizando el procesamiento
preliminar si la ha programado para hacerlo.
2. La pgina se representa en el explorador dinmicamente y lo que el usuario
ve es una pgina Web similar a cualquier otra.
3. El usuario escribe la informacin o la selecciona entre las opciones
disponibles y, a continuacin, hace clic en un botn. (Si los usuarios hacen clic
en un vnculo en lugar de en un botn, la pgina podra simplemente navegar
hasta otra pgina, sin que tenga lugar ningn procesamiento ms en la primera
pgina).
4. La pgina se manda al servidor Web. (El explorador ejecuta un mtodo
POST de HTTP, que en ASP.NET se denomina devolucin de datos.)
Especficamente, la pgina se devuelve datos a s misma. Por ejemplo, si el
usuario est trabajando con la pgina Default.aspx (web forms) y hace clic en
un botn de la pgina, la devuelve al servidor con un destino de Default.aspx.
5. En el servidor Web, la pgina se ejecuta de nuevo. La informacin que el
usuario escribi o seleccion est disponible para la pgina.
6. La pgina realiza el procesamiento que tiene programado hacer.
7. La pgina se representa a s misma en el explorador.
Este ciclo contina durante el tiempo que el usuario est trabajando en la pgina.
Cada vez que el usuario hace clic en un botn, la informacin de la pgina se
13
manda al servidor Web y la pgina se ejecuta de nuevo. Cada ciclo se conoce como
accin de ida y vuelta. Dado que el procesamiento de pginas se realiza en el
servidor Web, cada accin que la pgina puede hacer requiere un recorrido de ida y
vuelta al servidor.
Una pgina Web de ASP.NET puede ejecutar script de cliente, lo cual no requiere un
recorrido de ida y vuelta al servidor y resulta til para la validacin de la entrada
del usuario y para algunos tipos de programacin de la interfaz de usuario.

Crear Sitio y pgina web ASP.NET
Las pginas Web ASP.NET proporcionan la interfaz de usuario para sus aplicaciones
Web ASP.NET o tambin llamados sitios Web. Para el desarrollo de aplicaciones
Web necesitamos el Visual Web Developer que esta incluido en el Visual Studio o se
lo puede instalar tambin en forma independiente
Para crear un sitio Web de sistema de archivos
1. Abra Visual Web Developer o el Visual Studio
2. En la Pgina de Inicio haga clic en Crear Sitio Web o en el men
Archivo, haga clic en Nuevo sitio Web.
Aparecer el cuadro de dilogo Nuevo sitio Web, como se muestra en la
siguiente captura de pantalla.

3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web
ASP.NET.
Cuando se crea un sitio Web, se especifica una plantilla. Cada plantilla crea una
aplicacin Web que contiene diferentes archivos y carpetas. En este caso crea
los archivos:
App_Data: Contiene los archivos de datos de la aplicacin.
web.config: Contiene la configuracin del Sitio.
Default.aspx: Pgina web vacia.
Default.aspx.vb: Cdigo de la pgina web en este caso en el lenguaje
Visual Basic.
14
4. En el cuadro Ubicacin, seleccione el cuadro Sistema de archivos y
escriba el nombre de la carpeta en la que desea conservar las pginas del sitio
Web. Por ejemplo, escriba el nombre de carpeta C:\BasicWebSite.
Especifica el tipo de aplicacin Web que se desea crear o abrir. El tipo de
ubicacin que seleccione determinar el formato de la ubicacin en el cuadro
Ubicacin. Los tipos de ubicacin incluyen:
Sistema de archivos Una aplicacin Web en una carpeta del equipo local.
Los archivos no estn asociados a un servidor, una aplicacin de Internet
Information Services (IIS).
HTTP Una aplicacin Web de IIS en un equipo local o remoto. Los archivos
se almacenan bajo la raz de la aplicacin Web. Si se crea una aplicacin local
mediante HTTP, IIS debe estar instalado en el equipo. Si se crea una
aplicacin IIS en un equipo remoto, el equipo debe configurarse con
Extensiones de servidor de FrontPage de Microsoft, y es necesario tener
permisos para crear carpetas y archivos en ese equipo. Ejemplo:
http://servidorRemoto/MiAplicacinWeb o
http://servidorLocal/MiAplicacinWeb
FTP Una aplicacin Web a la que es posible conectarse utilizando las
credenciales del Protocolo de transferencia de archivos (FTP). Deben
proporcionarse credenciales para establecer conexin con el servidor FTP y
tener permisos de lectura y escritura en la ubicacin FTP. Ejemplo:
ftp://servidorFtp/MiAplicacinWeb.

5. En la lista Lenguaje, seleccione Visual Basic o Visual C#.
El lenguaje de programacin que ha elegido ser el lenguaje predeterminado
del sitio Web. Sin embargo, puede utilizar varios lenguajes en la misma
aplicacin Web mediante la creacin de pginas y componentes en lenguajes de
programacin diferentes.
6. Haga clic en Aceptar.

Visual Web Developer crea la carpeta y una nueva pgina denominada
Default.aspx. Cuando se crea una nueva pgina, Visual Web Developer la
muestra de manera predeterminada en la vista Cdigo fuente, que permite ver
los elementos HTML de la pgina. La captura de pantalla siguiente muestra la
vista Cdigo fuente de una pgina Web predeterminada.

15
Crear una nueva pgina Web o de formularios Web Forms
Cuando se crea un nuevo sitio Web, Visual Web Developer agrega una pgina
ASP.NET (pgina de formularios Web Forms) denominada Default.aspx. Puede
utilizar la pgina Default.aspx como pgina principal del sitio Web. En este caso
crearemos una nueva pgina.
Para agregar una pgina al sitio Web
1. Cierre la pgina Default.aspx. Para ello, haga clic con el botn secundario en
la ficha que contiene el nombre de archivo y seleccione Cerrar.
2. En el Explorador de soluciones, haga clic con el botn secundario en el sitio
Web, (por ejemplo, C:\BasicWebSite) y, a continuacin, haga clic en
Agregar nuevo elemento.
3. En Plantillas instaladas de Visual Studio, haga clic en Web Forms. La
captura de pantalla siguiente muestra el cuadro de dilogo Agregar nuevo
elemento.

4. En el cuadro Nombre, escriba el nombre de la nueva pgina.
5. En la lista Lenguaje, elija el lenguaje de programacin que prefiera utilizar
(Visual Basic, C# o J#). Cuando cre el sitio Web, especific un lenguaje
predeterminado. Sin embargo, cada vez que se crea una pgina o un
componente nuevo para el sitio Web, se puede utilizar un lenguaje diferente del
predeterminado. Puede utilizar diferentes lenguajes de programacin en el
mismo sitio Web.
6. La casilla Colocar el cdigo en un archivo independiente, si la
desactivamos, crear una pgina de un solo archivo con el cdigo y el texto
HTML en la misma pgina. El cdigo de las pginas ASP.NET se puede
encontrar en la pgina o en un archivo independiente.
7. Seleccionar la pgina principal, esta casilla se utiliza si creamos una
Pgina Maestra o Principal para la aplicacin, que nos permite tener partes de
las pginas con el mismo diseo e informacin y una parte modificable dentro
de cada pgina.
8. Haga clic en Agregar.
Visual Web Developer crea la nueva pgina y la abre en la vista Cdigo fuente.
16
Para agregar texto a la pgina
1. En la parte inferior de la ventana de documento, haga clic en la ficha
Diseo para pasar a la vista Diseo.
La vista Diseo muestra la pgina en la que se est trabajando en modo
WYSIWYG. En este punto, no hay texto ni controles en la pgina, por lo que
est en blanco.
2. En la pgina, escribir un texto.

3. De la vista Diseo pasamos a Dividir.
Puede ver el cdigo HTML que ha creado escribiendo en la vista Diseo, como se
muestra en la captura de pantalla siguiente.

Ejecutar la pgina
Para ejecutar una pgina, necesita un servidor Web. En un sitio Web de produccin,
se utiliza IIS como servidor Web. Sin embargo, para probar una pgina puede
utilizar el servidor de desarrollo de ASP.NET, que se ejecuta localmente y no
requiere IIS. En los sitios Web de sistema de archivos, el servidor Web
predeterminado en Visual Web Developer es el servidor de desarrollo de ASP.NET.
Para ejecutar la pgina

1. Presione CTRL+F5 para ejecutar la pgina o presione F5 para depurar y
ejecutar o tambin en el Men Depurar o la flecha verde de la barra de
herramientas:

Visual Web Developer inicia el servidor de desarrollo de ASP.NET. En la barra de
herramientas aparece un icono que indica que el servidor Web de Visual Web
Developer est en ejecucin:
17

La pgina se muestra en el explorador. Aunque la pgina creada tiene una
extensin .aspx, se ejecuta como cualquier pgina HTML.

2. Cierre el explorador.

Si el explorador genera un error que indica que la pgina no se puede mostrar, es
posible que necesite configurar el explorador para que omita los servidores Proxy
para solicitudes locales. Por ejemplo para el Explorer, en el men Herramientas
comando Opciones de Internet solapa Conexiones hacer clic sobre
Configuracin de Lan y si esta utilizando un servidor Proxy tildar la casilla no
usar servidor Proxy para direcciones locales y aceptar.
Agregar y programar controles
En esta parte, se agrega a la pgina un control Button, otro TextBox y otro Label, y
se escribe cdigo para controlar el evento Click del control Button.
Ahora agregar controles a la pgina. Los controles, entre los que se incluyen
botones, etiquetas, cuadros de texto y otros controles familiares, proporcionan las
funciones tpicas de procesamiento de formularios para las pginas Web ASP.NET.
Sin embargo, puede programar los controles con cdigo que se ejecuta en el
servidor, no el cliente.
El control Button es un botn que se utiliza para ejecutar un comando o realizar
una accin en el servidor, cuando el usuario hace click sobre el botn, se dispara el
evento click y se realiza una accin mediante programacin.
El control TextBox es un cuadro de texto, es un control de entrada que permite al
usuario ingresar texto.
El control Label es una etiqueta, es para mostrar texto en una ubicacin establecida
de la pgina, a diferencia de texto esttico se puede personalizar el texto que se
muestra.
Para agregar controles a la pgina
1. Haga clic en la ficha Diseo para cambiar a la vista Diseo.
2. Presione MAYS+ENTRAR varias veces para dejar espacio.
3. En el Cuadro de herramientas, en el grupo Estndar, arrastre tres
controles a la pgina: un control TextBox, otro Button y otro Label.
4. Coloque el punto de insercin sobre el control TextBox y, a continuacin,
escriba Ingrese su Nombre:.
Este texto HTML esttico es el ttulo del control TextBox. Puede mezclar HTML
esttico y controles en la misma pgina. La pantalla siguiente muestra cmo
aparecen los tres controles en la vista Diseo.

18

Establecer las propiedades de los controles
Visual Web Developer ofrece distintas maneras de establecer las propiedades de los
controles de la pgina. En esta parte, establecer propiedades en las vistas Diseo
y Cdigo fuente.
Para establecer las propiedades de los controles
1. Seleccione el control Button y, a continuacin, en la ventana Propiedades,
establezca Text en Mostrar Nombre, se muestra como queda el control en la
vista diseo en la captura de pantalla siguiente.

2. Cambie a la vista Cdigo fuente.
La vista Cdigo fuente muestra el cdigo HTML de la pgina, incluidos los
elementos que Visual Web Developer ha creado para los controles. Los
controles se declaran utilizando sintaxis de tipo HTML, con la excepcin de que
las etiquetas utilizan el prefijo asp: e incluyen el atributo runat="server".
Las propiedades del control se declaran como atributos. Por ejemplo, cuando
estableci la propiedad Text del control Button en el paso 1, en realidad
estableci el atributo Text del marcado del control.
Observe que todos los controles estn dentro de un elemento <form>, que
tambin tiene el atributo runat="server". El atributo runat="server" y el
prefijo asp: de las etiquetas de los controles marcan los controles para que
ASP.NET los procese en el servidor cuando se ejecuta la pgina. El cdigo que
se encuentra fuera de los elementos <form runat="server"> y <script
runat="server"> se enva como marcado o cdigo de cliente al explorador;
este es el motivo por el que el cdigo ASP.NET debe estar dentro de un
elemento cuya etiqueta de apertura contiene el atributo runat="server".

19

3. Coloque el punto de insercin en un espacio dentro de la etiqueta
<asp:label> y, a continuacin, presione la BARRA ESPACIADORA.
Aparece una lista desplegable que muestra las propiedades que se pueden
establecer para un control Label. Esta caracterstica, denominada IntelliSense,
ayuda en la vista Cdigo fuente con la sintaxis de los controles de servidor, los
elementos HTML y otros elementos de la pgina. Puede mostrar una lista
desplegable de IntelliSense en cualquier momento presionando Ctrl+J. La
captura de pantalla siguiente muestra la lista desplegable de IntelliSense para
el control Label.

4. Seleccione ForeColor y, a continuacin, escriba un signo igual (=).
IntelliSense muestra una lista de colores.
5. Seleccione un color para el texto del control Label.
20
El atributo ForeColor se completa con el color seleccionado, si el color muestra
un subrayado verde indica un error, si colocamos el cursor sobre el color nos
mostrar el error.
Programar el control Button
Escribiremos el cdigo que lee el nombre especificado por el usuario en el cuadro
de texto y lo muestra en el control Label.
Para agregar un controlador de eventos de botn predeterminado
1. Cambie a la vista Diseo.
2. Haga doble clic en el control Button.
Visual Web Developer cambia a la vista Cdigo fuente y crea un esquema del
controlador de eventos para el evento predeterminado del control Button, el
evento Click.

3. Dentro del controlador, escriba lo siguiente:
Label1.
Visual Web Developer muestra una lista de miembros disponibles para el control
Label, como se muestra en la captura de pantalla siguiente.

4. Complete el controlador de eventos Click para el botn de manera que
tenga el aspecto mostrado en el ejemplo de cdigo siguiente.

21
Pr ot ect ed Sub But t on1_Cl i ck( ByVal sender As Obj ect , ByVal e As
Syst em. Event Ar gs)
Label1.Text = TextBox1.Text & ", Bienvenido a Visual Web
Developer!"
End Sub
5. Desplcese hasta el elemento <asp:Button>. Observe que el elemento
<asp:Button> tiene ahora el atributo OnClick="Button1_Click". Este
atributo enlaza el evento Click del botn al mtodo controlador que codific en
el paso 4.
Los mtodos controladores de eventos pueden tener cualquier nombre; el
nombre que se ve es el nombre predeterminado creado por Visual Web
Developer. Lo importante es que el nombre utilizado para el atributo OnClick
debe coincidir con el nombre de un mtodo de la pgina.
Ejecutar la pgina
Ahora puede probar los controles de servidor en la pgina.
1. Presione CTRL+F5 para ejecutar la pgina en el explorador.
La pgina se ejecuta de nuevo utilizando el servidor de desarrollo de ASP.NET.
2. Escriba un nombre en el cuadro de texto y haga clic en el botn.
El nombre especificado se muestra en el control Label. Tenga en cuenta que
cuando se hace clic en el botn, la pgina se publica en el servidor Web.
ASP.NET vuelve a crear la pgina, ejecuta el cdigo (en este caso, se ejecuta
el controlador de eventos Click del control Button) y enva la nueva pgina al
explorador. Si observa la barra de estado del explorador, puede ver que la
pgina realiza un viaje de ida y vuelta al servidor Web cada vez que se hace
clic en el botn.
3. En el explorador, vea el cdigo fuente de la pgina que est ejecutando.
En el cdigo fuente de la pgina, slo se ve HTML ordinario; no se ven los
elementos <asp:> con los que ha trabajado en la vista Cdigo fuente.
Cuando la pgina se ejecuta, ASP.NET procesa los controles de servidor y
representa en la pgina los elementos HTML que realizan las funciones que
representan el control. Por ejemplo, el control <asp:Button> se representa
como elemento HTML <input type="submit">.
Trabajar con controles adicionales
En esta parte veremos el control Calendar, que muestra las fechas mes por mes.
El control Calendar es ms complejo que los controles de botn, cuadro de texto y
etiqueta con los que ha trabajado, e ilustra algunas funciones adicionales de los
controles de servidor.
Agregaremos un control Calendar a la pgina y le daremos formato.
Para agregar un control Calendar
1. En Visual Web Developer, cambie a la vista Diseo.
2. Desde la seccin Estndar del Cuadro de herramientas, arrastre un
control Calendar hasta la pgina.
Aparece el panel de etiquetas inteligentes del calendario. El panel muestra
comandos que ayudan a realizar las tareas ms comunes del control
seleccionado. La captura de pantalla siguiente muestra cmo se representa el
control Calendar en la vista Diseo.
22

3. En el panel de etiquetas inteligentes, elija Formato automtico.
Se muestra el cuadro de dilogo Formato automtico, que permite
seleccionar un esquema de formato para el calendario.

4. En la lista Seleccionar esquema, seleccione Simple y, a continuacin,
haga clic en Aceptar.
Puede ver el elemento <asp:Calendar>. Este elemento es mucho ms largo
que los elementos de los controles sencillos creados anteriormente. Tambin
incluye subelementos, como <WeekEndDayStyle>, que representa las
distintas configuraciones de formato. La captura de pantalla siguiente muestra
el control Calendar en la vista Cdigo fuente.

Programar el control Calendar
En esta seccin, programar el control Calendar para que muestre la fecha
actualmente seleccionada.
Para programar el control Calendar
1. En vista Diseo, haga doble clic en el control Calendar.
Un nuevo controlador de eventos se crea en la vista Cdigo fuente.
2. Complete el controlador de eventos SelectionChanged con el cdigo
resaltado siguiente.
23
Pr ot ect ed Sub Cal endar 1_Sel ect i onChanged( ByVal sender As
Obj ect , ByVal e As Syst em. Event Ar gs)
Label1.Text = Calendar1.SelectedDate.ToLongDateString
End Sub
Ejecutar la pgina
Ya puede probar el calendario.
1. Presione CTRL+F5 para ejecutar la pgina en el explorador.
2. Haga clic en una fecha del calendario.
La fecha especificada se muestra en el control Label.
3. En el explorador, vea el cdigo fuente de la pgina.
El control Calendar se ha representado en la pgina como una tabla, con cada
da como un elemento <td> que contiene un elemento <a>.

Exploracin de sitios Web
En cualquier sitio que no tenga un nmero muy reducido de pginas puede resultar
difcil crear un sistema de navegacin que permita a los usuarios desplazarse
libremente por las pginas, sobre todo si se realizan cambios en el sitio. La funcin
de navegacin de sitios de ASP.NET permite crear un mapa centralizado de las
pginas del sitio.
Puede utilizar las caractersticas de exploracin del sitio de ASP.NET con el fin de
proporcionar una manera coherente a los usuarios para que exploren el sitio.
Cuando un sitio crece y cuando se mueven sus pginas, puede resultar complicado
administrar todos los vnculos. La exploracin del sitio de ASP.NET permite
almacenar los vnculos de todas las pginas en una ubicacin central y representar
estos vnculos en listas o mens de desplazamiento en cada pgina incluyendo un
control de servidor Web especfico.
Con la exploracin del sitio de ASP.NET, puede crear una solucin de exploracin
consistente y fcil de administrar para el sitio. La exploracin del sitio de ASP.NET
cuenta con las caractersticas siguientes:
Mapas del sitio Puede utilizar un mapa del sitio para describir la estructura
lgica de su sitio. A continuacin, puede administrar la exploracin de la pgina
modificando el mapa del sitio cuando se agregan o se eliminan pginas en lugar
de modificar los hipervnculos en todas las pginas Web.
Controles ASP.NET Puede utilizar estos controles para mostrar los mens
de exploracin en las pginas Web. Los mens de exploracin se basan en el
mapa del sitio.
Control de programacin Puede utilizar la exploracin del sitio de
ASP.NET en el cdigo para crear controles de exploracin personalizados o
modificar la ubicacin de la informacin que se muestra en un men de
desplazamiento.
Reglas de acceso Puede configurar reglas de acceso que muestren u
oculten un vnculo en el men de desplazamiento.

Crear un mapa del sitio
Para la navegacin del sitio, necesita un medio de describir la disposicin de las
pginas en el sitio. El mtodo predeterminado consiste en crear un archivo .xml que
contenga la jerarqua del sitio, incluidos los ttulos de las pginas y las direcciones
URL.
24
La estructura del archivo .xml refleja la estructura del sitio. Cada pgina se
representa como un elemento siteMapNode en el mapa del sitio. El nodo de nivel
superior representa la pgina principal y los nodos secundarios representan pginas
que se encuentran en un nivel ms profundo en el sitio.
Nuestra estructura de Pginas es:
Inicio
Docentes
Ctedras
Carreras
Alumnos
Exmenes
Descargas
Para crear un mapa del sitio
1. En el Explorador de soluciones, haga clic con el botn secundario del mouse
en el nombre del sitio Web y, a continuacin, haga clic en Agregar nuevo
elemento.
2. En el cuadro de dilogo Agregar nuevo elemento:
a. En Plantillas instaladas de Visual Studio, haga clic en Mapa del
sitio.
b. En el cuadro Nombre, asegrese de que el nombre es Web.sitemap.
c. Haga clic en Agregar. Aparece una estructura vaca del <siteMap>
como se muestra en la siguiente imagen.

3. El archivo Web.sitemap contiene un conjunto de elementos siteMapNode
que se anidan en tres niveles. La estructura de cada elemento es la misma. La
nica diferencia entre ellos radica en su ubicacin dentro de la jerarqua XML.
Las partes del siteMapNode son:
Url es el nombre de la pgina que mostrar en caso de seleccionarla con
un clik.
Title es el ttulo que aparecer en la pgina para la navegacin.
Description es la descripcin que muestra en la pgina cuando
colocamos el Mouse sobre el ttulo.
Modificamos para agregar nuestra estructura de pginas.

25

4. La direccin URL de las pginas que se definen en el archivo .xml de ejemplo
es incompleta. Esto significa que todas las pginas se tratan como si tuvieran
direcciones URL relativas a la raz de la aplicacin. Sin embargo, puede
especificar cualquier URL para una pgina determinada: la estructura lgica
que defina en el mapa del sitio no tiene por qu corresponder al diseo fsico de
las pginas en las carpetas.
5. Guarde el archivo y cirrelo.
6. Crear las pginas que se describen en el mapa del sitio que definimos.
Crear un men de navegacin con el control TreeView
Ahora que tiene un mapa del sitio y las pginas, puede agregar funciones de
navegacin al sitio. Utilizar el control TreeView como men de navegacin
contrable.
Este control se utiliza para mostrar datos jerrquicos, como una tabla de contenido
o un directorio de archivo, en una estructura de rbol. Tiene compatibilidad con la
exploracin del sitio a travs de la integracin con el control SiteMapDataSource.
Se puede agregar una casilla de verificacin y una imagen para cada nodo
opcionalmente.
Para personalizar el aspecto y el estilo del control TreeView, puede hacer lo
siguiente:
Especificar las propiedades del control TreeView que afectan a la forma en
que se muestra y se representa el control.
Definir una propiedad ImageSet que seleccione un conjunto integrado de
imgenes para que se representen con el control en tiempo de ejecucin.
Especificar una imagen determinada y las propiedades de estilo que
controlan las caractersticas que afectan al modo en que se muestran y se
representan grupos especficos de objetos TreeNode incluidos en el control
TreeView.
Utilizar la caracterstica Autoformato de Visual Studio para personalizar un
conjunto de imgenes y las propiedades de estilo a la vez.
Para agregar un men de navegacin de tipo rbol
1. Abra la pgina Inicio.aspx.
2. Desde el Cuadro de herramientas, arrastre a la pgina un control
SiteMapDataSource del grupo Datos.
En su configuracin predeterminada, el control SiteMapDataSource recupera la
informacin que necesita del archivo Web.sitemap que cre anteriormente, por
lo que no tendr que especificar informacin adicional para el control.
3. Arrastre un control TreeView desde el grupo Navegacin del Cuadro de
herramientas hasta la pgina.
4. En el men Tareas de Treeview, en el cuadro Elegir origen de datos,
haga clic en SiteMapDataSource1.
26

5. Guarde la pgina.
6. Pruebe la pgina.
En el estado actual del sitio Web, el men de navegacin slo aparece en la pgina
principal (Inicio). Puede agregar los mismos controles SiteMapDataSource y
TreeView a cada pgina de la aplicacin para mostrar un men de navegacin en
cada pgina. Sin embargo, veremos ms adelante cmo colocar el men de
navegacin en una pgina principal de modo que el men de navegacin aparezca
automticamente con todas las pginas.
Mostrar el historial de navegacin con el control SiteMapPath
Adems de crear un men de navegacin mediante el control TreeView, en cada
pgina puede agregar funciones de navegacin que muestren dnde se encuentra
la pgina en la jerarqua actual. Este tipo de control de navegacin tambin se
conoce como ruta de exploracin. ASP.NET proporciona el control SiteMapPath
que puede implementar automticamente funciones de navegacin de pginas.
Ofrece un medio econmico desde el punto de vista del espacio para navegar
rpidamente por un sitio y sirve como punto de referencia para determinar en qu
lugar del sitio se encuentra la pgina que se muestra.
Para que se muestre el historial de navegacin
1. Abra la pgina Docentes.aspx y cambie a la vista Diseo.
2. Desde el grupo Navegacin del Cuadro de herramientas, arrastre un
control SiteMapPath hasta la pgina, coloque el cursor delante del control
SiteMapPath y, a continuacin, presione ENTRAR para crear una nueva lnea.
El control SiteMapPath muestra la posicin de la pgina actual en la jerarqua
de las pginas. De forma predeterminada, el control SiteMapPath representa
la jerarqua que se crea en el archivo Web.sitemap. Por ejemplo, cuando
muestra la pgina Docentess.aspx, el control SiteMapPath muestra la ruta de
acceso siguiente:
Inicio > Docentes
3. Se puede repetir este procedimiento para las otras pginas, excepto la
pgina principal (Inicio).
Todos los nombres de pgina que muestra el control SiteMapPath son vnculos,
excepto el ltimo, que representa la pgina actual. Puede convertir el nodo actual
en un vnculo si establece la propiedad RenderCurrentNodeAsLink del control
SiteMapPath en true.
27
El control SiteMapPath permite a los usuarios retroceder a niveles superiores de la
jerarqua, pero no saltar a una pgina que no se encuentre en la ruta de la
jerarqua actual.
Crear un men de navegacin con el control Menu
Adems de crear un men de navegacin mediante el control TreeView, puede
utilizar el control Men para que se muestre un men de navegacin expandible
que permita a los usuarios ver un nivel de nodos a la vez. Al pausar el puntero del
Mouse sobre un nodo que tenga nodos secundarios, se generar un submen de los
nodos secundarios.
El control Men utiliza dos modos de presentacin: esttica y dinmica. La
presentacin esttica implica que un parte o la totalidad de la estructura del Men
siempre est visible. Un men totalmente esttico muestra la estructura de men
completa y un usuario puede hacer clic en cualquier parte del mismo. La
presentacin dinmica implica que algunas partes de la estructura del men
aparecen cuando se coloca el puntero del mouse encima ciertos elementos; los
elementos de men secundarios se muestran slo cuando el usuario mantiene el
puntero encima de un nodo primario.
Para controlar la apariencia de la parte esttica del men, puede utilizar las
propiedades de estilo cuyos nombres contienen la palabra "Static":
StaticMenuStyle
StaticMenuItemStyle
StaticSelectedStyle
StaticHoverStyle
Para controlar la apariencia de la parte dinmica del men, puede utilizar las
propiedades de estilo cuyos nombres contienen la palabra "Dynamic":
DynamicMenuStyle
DynamicMenuItemStyle
DynamicSelectedStyle
DynamicHoverStyle
Otro mtodo para controlar la apariencia de los elementos de men es aplicar el
estilo a cada nivel de la estructura de men de manera independiente. Las
propiedades de estilo que se pueden utilizar para especificar la apariencia de cada
nivel incluyen en sus nombres la palabra "Level":
LevelMenuItemStyles
LevelSubMenuStyles
LevelSelectedStyles
Para agregar un recurso de navegacin de tipo men
1. Abra la pgina Alumnos.aspx y cambie a la vista Diseo.
2. Arrastre un control Menu desde el grupo Navegacin del Cuadro de
herramientas hasta la pgina.

28

3. En el men Tareas de men, en el cuadro Elegir origen de datos, haga
clic en <nuevo origen de datos> (NewDataSource).
4. En el asistente para la Configuracin de orgenes de datos, haga clic en
Mapa del sitio y, a continuacin, haga clic en Aceptar.

En este caso tenemos de donde elegir los datos de la estructura del Men que
es el Mapa del Sitio del control SiteMapDataSource. Si no tuviramos estos
datos podramos utilizar dentro de Tareas del Men la opcin Editar
elementos del men para generar la estructura del men.
5. Guarde la pgina.
6. Esta lista la pgina con sistema de navegacin.

29
Pginas principales o Maestras ASP.NET en Visual Web
Developer
En esta seccin veremos como crear una pgina principal y varias pginas de
contenido. Las pginas principales permiten crear un diseo de pgina (una
plantilla) y, a continuacin, crear pginas independientes con contenido que se
combina con la pgina principal en tiempo de ejecucin.
Crear la pgina principal
La pgina principal es la plantilla que define la apariencia que tendrn las pginas.
En esta seccin, crear primero una pgina principal. A continuacin, utilizar una
tabla para disear la pgina principal con un men, un logotipo y un pie que
aparecern en todas las pginas del sitio. Tambin trabajar con un marcador de
posicin de contenido, que es un rea de la pgina que se puede reemplazar por
informacin en una pgina de contenido.
Para crear la pgina principal

1. Primero debemos crear un sitio Web como vimos anteriormente.
2. En el Explorador de soluciones, haga clic con el botn secundario en el
nombre del sitio web y, a continuacin, seleccione Agregar nuevo elemento.
3. En Plantillas instaladas de Visual Studio, haga clic en Pgina principal.
4. En el cuadro Nombre, escriba PagMae.
5. Active la casilla Colocar el cdigo en un archivo independiente.
6. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que
prefiera trabajar y, a continuacin, haga clic en Agregar.

En la nueva pgina principal vayamos a la vista Cdigo fuente.
En la parte superior de la pgina hay una declaracin @ Master en lugar de la
declaracin @ Page que normalmente se encuentra en la parte superior de las
pginas ASP.NET. El cuerpo de la pgina contiene un control
ContentPlaceHolder, que es el rea de la pgina maestra donde se
combinar el contenido reemplazable de las pginas en tiempo de ejecucin.
Disear la pgina principal
La pgina principal define la apariencia de las pginas del sitio. Puede contener
cualquier combinacin de texto esttico y controles. Una pgina principal tambin
contiene uno o ms marcadores de posicin de contenido que indican dnde
aparecer el contenido dinmico cuando se muestren las pginas.
Utilizaremos una tabla como ayuda para colocar los elementos en la pgina.
Empezaremos por crear una tabla de diseo para alojar los elementos de la pgina
principal.
Para crear una tabla de diseo para la pgina principal
1. Con el archivo PagMae.master seleccionado en la vista Cdigo fuente,
definimos el esquema de destino para la validacin en Microsoft Internet
Explorer 6.0. Para establecer este valor, podemos utilizar la lista desplegable
de la barra de herramientas o seleccionar Opciones en el men
Herramientas y, a continuacin, hacer clic en Validacin.
3. En la lista desplegable de la parte superior de la ventana Propiedades,
seleccione DOCUMENTO y, a continuacin, establezca la propiedad BgColor
en un color distintivo, por ejemplo azul.
El color que selecciona no es importante.
30
Haga clic en la pgina donde desea colocar la tabla de diseo, no se debe
colocar en el control ContentPlaceHolder.
4. En el men Tabla, haga clic en Insertar tabla.
5. En el cuadro de dilogo Insertar tabla cree una tabla con tres filas y una
columna y, a continuacin, haga clic en Aceptar.
6. Coloque el cursor dentro de la segunda fila de la tabla.
7. En el men Tabla, en el submen Modificar, haga clic en Dividir celdas.
8. En el cuadro de dilogo Dividir celdas, seleccione Dividir en columnas y,
a continuacin, haga clic en Aceptar.
9. Configure las opciones siguientes:
En la fila central, haga clic en la columna situada ms a la izquierda y, a
continuacin, establezca su Ancho (Width) en 48 en la ventana
Propiedades.
Haga clic en la fila superior y, a continuacin, establezca su Alto
(Height) en 48 en la ventana Propiedades.
Haga clic en la fila inferior y, a continuacin, establezca su Alto en 48 en
la ventana Propiedades.
Para establecer el alto y ancho se puede hacer tambin arrastrando los
bordes de las celdas
10. Seleccione todas las celdas en la tabla y establezca BgColor en un color
diferente que el color de fondo.
Despus de disear la tabla, puede agregar el contenido a la pgina principal que
aparecer en todas las pginas. Agregar un mensaje de copyright como pie de
pgina y, a continuacin, un men. Si tiene un grfico de logotipo disponible,
tambin puede agregarlo.
Para agregar contenido esttico a la pgina principal
1. Haga clic en la celda inferior y, a continuacin, escriba el texto del pie de
pgina, por ejemplo Copyright 2009 Chamigo Inc.
2. En el Cuadro de herramientas, arrastre un control Men desde el grupo
de controles Navegacin hasta la celda superior.
3. Cree un men siguiendo estos pasos:
a. Establezca la propiedad orientacin (Orientation) del control Men en
Horizontal, asume cuando colocamos el control en la pgina en vertical.
b. Haga clic en la etiqueta inteligente (>) en el control Men y haga clic en
Editar elementos de men en el cuadro de dilogo Tareas de men.

4. En Elementos, haga clic tres veces en el icono Agregar un nodo raz para
agregar tres elementos de men:
a. Haga clic en el primer nodo y, a continuacin, establezca Text en Inicio
y NavigateUrl en Inicio.aspx.
b. Haga clic en el segundo nodo y, a continuacin, establezca Text en
Docentes y NavigateUrl en Docentes.aspx.
31
c. Haga clic en el Tercer nodo y, a continuacin, establezca Text en
Alumnos y NavigateUrl en Alumnos.aspx.
d. Haga clic en Docentes y en el icono Agregar un elemento
secundario, a continuacin, establezca Text en Ctedras y NavigateUrl
en Ctedras.aspx.
e. Haga clic en Aceptar para cerrar el cuadro de dilogo Editor de
elementos de men.

5. Si tiene un archivo grfico disponible para utilizarlo como logotipo, siga
estos pasos para colocarlo en la pgina principal:
a. En el Explorador de soluciones, haga clic con el botn secundario en
el nombre del sitio web y, a continuacin, seleccione Agregar elemento
existente.
b. Navegue a su archivo grfico, seleccinelo y, a continuacin, haga clic en
Agregar.
c. En el Cuadro de herramientas, arrastre un control Image desde el
grupo Estndar hasta la columna central izquierda de la tabla.
d. Establezca la propiedad ImageUrl del control Image en el nombre del
archivo grfico.
Ahora puede colocar el marcador de posicin de contenido para especificar dnde
puede mostrar contenido la pgina principal en tiempo de ejecucin.
Para agregar un marcador de posicin de contenido
1. Arrastre el control ContentPlaceHolder a la celda central derecha.
La propiedad ID del control es ContentPlaceholder1. Puede dejar este nombre
o cambiarlo. Si cambia el nombre, antelo porque necesitar recordarlo ms
adelante.
2. Guarde la pgina.
Crear contenido para la pgina principal
32
La pgina principal proporciona la plantilla para el contenido. El contenido de la
pgina principal se define creando una pgina ASP.NET que se asocia a la pgina
principal. La pgina de contenido es un formulario especializado de una pgina
ASP.NET que incluye slo el contenido que se va a combinar con la pgina principal.
En la pgina de contenido, agregar el texto y los controles que desee mostrar
cuando los usuarios soliciten la pgina.
Para crear la pgina de inicio
1. En el Explorador de soluciones, haga clic con el botn secundario en el
nombre del sitio web y, a continuacin, haga clic en Agregar nuevo
elemento.
2. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
3. En el cuadro Nombre, escriba Inicio.
4. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que
prefiera trabajar.
5. Active la casilla Seleccionar la pgina principal y, a continuacin, haga
clic en Agregar.
Aparece el cuadro de dilogo Seleccionar la pgina principal.
6. Haga clic en PagMae.master y en Aceptar.

Se crea un nuevo archivo .aspx. La pgina contiene una directiva @ Page que
asocia la pgina actual a la pgina principal seleccionada con el atributo
MasterPageFile.
La pgina tambin contiene un elemento de control Content con el que
trabajar luego.
Una pgina de contenido no tiene los elementos usuales que constituyen una
pgina ASP.NET, como html, body o form. En su lugar, el contenido que se desea
mostrar en la pgina principal se agrega reemplazando las reas de marcador de
posicin creadas en dicha pgina.
Para agregar contenido a la pgina de inicio
Los controles ContentPlaceHolder de la pgina maestra se muestran como
controles Content en la nueva pgina de contenido. Se muestra el resto del
contenido de la pgina maestra para que pueda ver el diseo. Sin embargo,
parece atenuado porque no puede cambiarlo mientras est editando una pgina
de contenido.
2. En la lista desplegable de la ventana Propiedades, haga clic en
DOCUMENTO y, a continuacin, establezca Ttulo en Inicio Chamigo.
Puede establecer el ttulo de cada pgina de contenido de forma independiente
a fin de que se muestre el ttulo correcto en el explorador cuando el contenido
se combine con la pgina principal. La informacin del ttulo se almacena en la
directiva @ Page de la pgina de contenido.
3. En el control Content que coincide con ContentPlaceHolder1 en la pgina
maestra, escriba Bienvenido al sitio web de Chamigo.
4. Seleccione el texto y, a continuacin, asgnele el formato de encabezado
seleccionando Encabezado 1 en la lista desplegable Formato del bloque
situada encima del Cuadro de herramientas.
5. Presione ENTRAR para crear una nueva lnea en blanco en el control
Content y, a continuacin, escriba cualquier texto.
El texto que agrega aqu no es importante; puede escribir cualquier texto que le
ayude a reconocer que es la pgina de inicio.
6. Guarde la pgina.
Hacer lo mismo con las otras pginas.
33
Puede probar las pginas ejecutndolas tal como hara con cualquier pgina
ASP.NET. Antes de probar en el Explorador de Soluciones seleccionar la pgina
Inicio.aspx haga clic con el botn secundario del Mouse y nuevamente haga clic
en Establecer como pgina de inicio.

34
Publicar un sitio Web
Veremos la utilidad de publicacin de sitios Web de la herramienta de desarrollo
Web de Microsoft Visual Web Developer para compilar un sitio Web y, a
continuacin, copiar el resultado en un sitio Web activo.
Si desea implementar un sitio Web terminado en un servidor, puede usar la utilidad
de publicacin de sitios Web de la herramienta de desarrollo Web de Microsoft
Visual Web Developer. La utilidad de publicacin de sitios Web realiza una
compilacin previa de las pginas y el cdigo del sitio Web y escribe el resultado del
compilador en una carpeta especificada por el usuario. A continuacin, se puede
copiar el resultado en el servidor Web de destino y ejecutar la aplicacin desde all.
La utilidad de publicacin de sitios Web no est disponible en Visual Web Developer
Express.
Debemos contar con Microsoft Internet Information Services (IIS) para poder
probar el resultado de la publicacin de un sitio Web.
Puede publicar el sitio Web en cualquier ubicacin a la que tenga acceso en el
equipo local o en una red en que se use uno protocolo de conexin compatible con
Visual Web Developer. Tiene las opciones siguientes para copiar el sitio Web:
Utilizar un recurso compartido UNC para copiarlo en una carpeta compartida
que est en otro equipo de la red.
Utilizar FTP para copiarlo en un servidor.
Utilizar el protocolo HTTP para copiarlo en un servidor compatible con las
Extensiones de servidor de FrontPage 2002 de Microsoft.
Para publicar el sitio Web en una carpeta local
1. En el men Generar, haga clic en Publicar sitio Web, tambin puede
hacer clic con el botn secundario del Mouse sobre el nombre de Sitio Web
en el explorador de soluciones y elegir el comando Publicar sitio Web.
Aparece el cuadro de dilogo Publicar sitio Web.

35

Ubicacin de destino
Especifica la ruta de acceso de los resultados del proceso de precompilacin.
Los resultados de la precompilacin se escriben en la carpeta especificada,
sobrescribiendo (sin advertencia) todo el contenido en esa ubicacin. Puede
especificar una ruta de acceso FTP, ruta de acceso HTTP o una ubicacin de
unidad fsica.
Permitir que este sitio precompilado se actualice
Especifica que el contenido de las pginas .aspx no se compila en un
ensamblado, sino que el marcado se deja tal cual, lo cual permite realizar
cambios en la funcionalidad del cliente y el cdigo HTML despus de
precompilar el sitio Web. La activacin de esta casilla equivale a agregar la
opcin -u al comando aspnet_compiler.exe.
Usar nombres fijos y ensamblados de pgina nicos
Especifica que las generaciones por lotes estar desactivada durante la
precompilacin para que se generen ensamblados con nombres fijos. Los
archivos de mscaras y temas seguirn compilndose en un solo
ensamblado. Esta opcin no est disponible para la compilacin en contexto.
Habilitar nombre seguro en los ensamblados precompilados
Especifica que a los ensamblados generados se les debe asignar un nombre
seguro mediante un archivo de claves o contenedor de claves para codificar
los ensamblados y asegurar que no se han alterado. Despus de activar esta
casilla, puede hacer lo siguiente:
Especificar la ubicacin de un archivo de claves que se va a utilizar para
firmar los ensamblados. Si utiliza un archivo de claves, puede seleccionar
Firma retardada para que el ensamblado se firme en dos fases: primero
con el archivo de claves pblicas y, a continuacin, con un archivo de
claves privadas que se especifique ms adelante durante una llamada al
comando aspnet_compiler.exe.
Especificar la ubicacin de un contenedor de claves del proveedor de
servicios criptogrficos (CSP) del sistema que se va a utilizar para asignar
un nombre a los ensamblados.
Especificar si se va a marcar el ensamblado con la propiedad
AllowPartiallyTrustedCallers, que permite que cdigo de confianza parcial
llame a los ensamblados con nombre seguro. Sin esta declaracin, slo el
cdigo de plena confianza puede utilizar esos ensamblados. Si selecciona
esta opcin, puede comprometer la seguridad del ensamblado generado.

2. En el cuadro Ubicacin de destino, escriba c:\CompiledSite.

3. Tambin podra publicar en un recurso compartido UNC. Si deseara publicar
en un sitio Web remoto mediante HTTP o FTP, debera especificar la
direccin URL del servidor remoto en el cuadro Ubicacin de destino.
4. La opcin Permitir que este sitio precompilado se actualice especifica
que todo el cdigo del programa se compila en ensamblados, pero que los
archivos .aspx (incluidas las pginas Web ASP.NET de un solo archivo) se
copian tal cual en la carpeta de destino.
5. Haga clic en Aceptar.
Visual Web Developer precompila el contenido del sitio Web y escribe el
resultado en la carpeta que ha especificado. En la ventana Resultados se
muestran mensajes de progreso. Si se produce un error durante la
compilacin, se crea un informe en la ventana Resultados.
6. Si se producen errores durante la publicacin, corrjalos y, a continuacin,
repita el paso 1.
36
Examinar el resultado del comando Publicar sitio Web
Resulta til examinar el resultado del comando Publicar sitio Web para
comprobar qu ha hecho Visual Web Developer con los archivos del sitio Web.
Para examinar el resultado del comando Publicar sitio Web
1. En el Explorador de Windows, desplcese a la carpeta que especific como el
destino para el comando Publicar sitio Web.
2. Utilizando un editor de texto, como Bloc de notas, abra una pgina .aspx.
Observe que el archivo no contiene el marcado que haba originalmente en el
archivo. En lugar de ello, la pgina .aspx es slo un marcador de posicin que
se puede utilizar como parte de una direccin URL.
3. Desplcese a la carpeta Bin.
La carpeta contiene dos tipos de archivos:
Archivos .compiled, que corresponden a las pginas.
Archivos .dll, que contienen el cdigo ejecutable para el sitio Web.

Para probar el sitio Web publicado
1. Cree un directorio virtual de IIS que indique la carpeta de destino.
Puede utilizar las herramientas administrativas de IIS o, alternativamente,
realizar los pasos siguientes:
a. En el Explorador de Windows, haga clic con el botn secundario en el
nombre de la carpeta de destino y, a continuacin, haga clic en Compartir
y seguridad.
b. En la ficha Uso compartido de Web, haga clic en Compartir esta
carpeta.
Aparecer el cuadro de dilogo Modificar alias.
c. Si lo desea, puede cambiar el nombre del alias.
Los permisos predeterminados permiten acceso de lectura y permiten
ejecutar scripts, por ejemplo pginas ASP.NET.
d. Haga clic en Aceptar para cerrar el cuadro de dilogo Modificar alias
y, a continuacin, haga clic en Aceptar para cerrar el cuadro de dilogo
Propiedades.
2. Abra el explorador y escriba la direccin URL siguiente:
http://localhost/CompiledSite/Inicio.aspx
Aparece la pgina. Sin embargo, esta vez ver la versin de la pgina creada
por el precompilador para su implementacin.

Copiar un sitio Web mediante la herramienta Copiar sitio Web
Trabajaremos con un sitio Web compartido y uno local, igual que lo hara en un
entorno de produccin. Un escenario tpico sera que el sitio Web compartido
estuviera en otro servidor, como por ejemplo, un servidor de ensayo o de
produccin. Cuando desee trabajar en el sitio, cree una versin local del mismo y
copie los archivos del servidor compartido en su equipo. Cuando haya terminado
sus actualizaciones, vuelva a copiar los archivos locales en el servidor compartido.
Tambin veremos cmo sera trabajar en un entorno con ms de un desarrollador.
Si hubiera otros desarrolladores trabajando en el sitio, tambin podran descargar
archivos, editarlos localmente y luego volver a copiarlos en el servidor compartido.
Por lo tanto, no solo debe copiar archivos del sitio Web local al sitio Web
compartido, sino que es posible que tenga que copiar versiones actualizadas de
archivos del sitio Web compartido al sitio Web local.
En lugar de residir en equipos separados, los dos sitios Web residen en el equipo
local. Esto le permite trabajar con la herramienta Copiar sitio Web tal y como lo
37
hara en un entorno de produccin pero sin tener que utilizar un segundo equipo.
Todas las tareas que se realizan funcionan de igual modo cuando el sitio Web
compartido est en otro equipo. Emular las ediciones realizadas por otros
desarrolladores utilizando el Bloc de notas para cambiar archivos.
Copiar archivos del sitio Web compartido al local
Debemos contar con un sitio Web compartido en su equipo y tiene un nuevo sitio
Web abierto. Si fuera un desarrollador nuevo en un proyecto, primero deseara
obtener todos los archivos del sitio Web compartido y despus los copiara en su
sitio Web local.
Para copiar todos los archivos del sitio Web compartido en el sitio Web
local
1. En el men Sitio Web, haga clic en Copiar sitio Web o en el explorador de
soluciones haga clic con el botn secundario del Mouse sobre el nombre del
sitio web y seleccione el comando Copiar sitio Web.
Aparecer la herramienta Copiar <NombreSitioWeb>.

2. Haga clic en Conectar.
Aparece el cuadro de dilogo Abrir sitio Web.

38

3. Haga clic en Sistema de archivos.
4. En el cuadro Carpeta, escriba C:\SitioWebCompartido.
Si el sitio compartido estuviera en otro equipo, escribira la direccin URL del
servidor.
5. Haga clic en Abrir.
Los archivos del sitio compartido se muestran en Sitio Web remoto.

Muchos de los archivos tienen smbolos junto a ellos que indican su estado. Si
sincroniza los sitios, el smbolo de flecha indica la direccin en que se copia el
archivo Actualmente, los archivos Alumnos.aspx, Carreras.aspx, etc. en la lista
Sitio Web remoto sealan a la lista Sitio Web de origen, porque si
sincroniza los sitios Web, los archivos se copiarn desde el sitio compartido al
sitio local.
Los archivos Default.aspx tienen signos de interrogacin (?) junto a ellos. Esto
indica que el archivo tiene el mismo nombre en los dos sitios, pero tiene datos
timestamp diferentes y ninguna informacin sobre la ltima vez que se
copiaron los archivos.

39

6. Debajo de Sitio Web remoto, resalte los archivos y carpetas que desea
seleccionar.
En este caso, desea obtener copias de todos los archivos del sitio compartido.
Est emulando un escenario en el que es un nuevo desarrollador de un sitio
Web existente y desea obtener las versiones ms actuales de los archivos del
sitio Web. Al haber creado un nuevo sitio local, no es necesario que copie
ningn archivo del sitio local al compartido.
7. Haga clic en el botn de flecha izquierda para copiar los archivos
seleccionados del sitio compartido al sitio local.
El botn de flecha izquierda no tiene etiqueta a menos que pase el puntero por
encima, en cuyo caso aparece una informacin descriptiva (ToolTip). La fecha
apunta al Sitio Web de origen.
Visual Web Developer comienza a copiar archivos. Cuando llega al archivo
Default.aspx, le pide que confirme si reemplaza la copia local del archivo con el
archivo del sitio compartido.
8. En el cuadro de dilogo Confirmar reemplazo de archivos, active la
casilla Aplicar a todo y haga clic en S.
En este caso, es seguro reemplazar todas las versiones locales de los archivos
que tenga nombres de archivo duplicados, ya que las versiones de archivo que
desea son las del sitio compartido. Cuando el proceso termine de copiar los
archivos, las listas en Sitio Web de origen y Sitio Web remoto son las
mismas.
Puede utilizar la herramienta Copiar sitio Web para copiar todos los archivos o
archivos especficos.

40
Sincronizar sitios Web
En el proceso de sincronizacin se copia la versin ms actual de cada archivo de
manera que los dos sitios Web tengan las mismas copias de todos los archivos.
Utilice la sincronizacin si es posible que otra persona tambin actualice los
archivos del sitio Web compartido.

Elegir una herramienta de implementacin
La eleccin de la herramienta Copiar sitio web o de la utilidad Publicar sitio web
depende de cmo desee utilizar y mantener el sitio.
Elegir la herramienta Copiar sitio Web
A continuacin se indican las ventajas de la herramienta Copiar sitio web:
La implementacin supone simplemente copiar los archivos desde el sitio web
al equipo de destino.
Puede implementar en un equipo de destino utilizando cualquier protocolo de
conexin que admita Visual Studio. Puede copiar en una carpeta compartida de
otro equipo de la red. Puede utilizar FTP para copiar en un servidor o utilizar el
protocolo HTTP para copiar en un servidor que admita Extensiones de servidor de
FrontPage.
Tambin es posible realizar cambios o corregir errores en las pginas
directamente en el servidor.
Si trabaja en un proyecto donde los archivos se almacenan en un servidor
centralizado, puede utilizar la caracterstica de sincronizacin para asegurarse de
que las versiones local y remota de los archivos estn sincronizadas.
A continuacin se indican los inconvenientes de la herramienta Copiar sitio web:
El sitio se copia tal cual. Por lo tanto, si algn archivo contiene un error de
compilacin, el error no se detectar hasta que alguien (quiz un usuario)
ejecute la pgina en la que existe el error.
Elegir la utilidad Publicar sitio Web
A continuacin se indican las ventajas de la utilidad Publicar sitio web:
El proceso de precompilacin ayuda a encontrar errores de compilacin y
posibles errores en el archivo Web.config y en otros archivos que no son de
cdigo.
El cdigo fuente se quita del sitio web, incluido, si se desea, el marcado de los
archivos web y los controles de usuario de ASP.NET. De esta forma, el contenido
queda ms protegido y resulta ms difcil que otros usuarios tengan acceso al
cdigo fuente del sitio.
Como las pginas del sitio ya estn compiladas, no necesitan compilarse
dinmicamente cuando se solicitan por primera vez. Esto puede reducir el tiempo
de respuesta inicial para una pgina. (Cuando se compilan las pginas
dinmicamente, el resultado se almacena en la memoria cach para las
solicitudes posteriores.)
A continuacin se indican los inconvenientes de la utilidad Publicar sitio web:
En funcin de las opciones de publicacin que especifique, es posible que deba
volver a compilar el sitio si realiza cambios en l. Por tanto, puede que no resulte
prctico emplear la utilidad Publicar sitio web si desarrolla un sitio y cambia las
pginas con frecuencia.
La utilidad Publicar sitio web no puede implementar el sitio compilado en un
servidor remoto. Slo puede copiar en el equipo local o en otro equipo de la red
de rea local.

41
Depurar pginas Web en Visual Web Developer
Visual Web Developer proporciona herramientas de ayuda para localizar errores en
pginas Web ASP.NET. Trabajaremos con el depurador, que le permite recorrer
lnea por lnea el cdigo de la pgina y examinar los valores de las variables.
Crearemos una pgina Web que contiene una calculadora simple que eleva un
nmero al cuadrado. Despus de crear la pgina (que incluir un error deliberado)
utilizar el depurador para examinar su ejecucin.
Comenzaremos creando un sitio web y agregando una nueva pgina que no tenga
el cdigo en forma independiente.
Ahora puede agregar controles a la pgina y, a continuacin, agregar el cdigo. El
cdigo ser simple, pero deber permitirle agregar despus puntos de interrupcin.
Para agregar controles y cdigo para la depuracin
1. Cambie a la vista Diseo y, desde la carpeta Estndar del Cuadro de
herramientas, arrastre los siguientes controles a la pgina y establezca las
propiedades correspondientes tal como se indica:

Control Propiedades
Label Id.: CaptionLabel
Text: (vaco)
TextBox Id.: NumeroTextBox
Text: (vaco)
Button Id.: CuadradoButton
Text: Cuadrado
Label Id.: ResultadoLabel
Text: (vaco)

2. Haga doble clic en el control Button para crear un controlador Click
asociado.
3. Agregue lgica al controlador Click para llamar a una funcin denominada
Cuadrado a fin de elevar al cuadrado el nmero escrito por el usuario. El
controlador podra tener una apariencia similar a la del ejemplo que se muestra
a continuacin.

Pr ot ect ed Sub Cuadr adoBut t on_Cl i ck( ByVal sender As Obj ect , ByVal
e As Syst em. Event Ar gs)
Di mnumer o, r esul t ado As I nt eger
numer o = CI nt ( Numer oText Box. Text )
r esul t ado = Cuadr ado( numer o)
Resul t adoLabel . Text = "El Cuadr ado de " & CSt r ( numer o) & " es
" & CSt r ( r esul t ado)
End Sub

CInt: es una funcin que devuelve un entero.
CStr: es una funcin que devuelve un string.

4. Cree la funcin que eleva el nmero al cuadrado. Incluya un error en el
cdigo de modo que el nmero se sume a s mismo, en lugar de multiplicarse.
42
El cdigo podra tener una apariencia similar a la del ejemplo que se muestra a
continuacin.

<scr i pt r unat ="ser ver ">
Funct i on Cuadr ado( ByVal numer o As I nt eger ) As I nt eger
Cuadr ado = numer o + numer o
End Funct i on
Tambin puede agregar a la pgina cdigo que cambie el texto de la etiqueta si es
la primera vez que se ejecuta la pgina.
Para cambiar el ttulo del control Label
1. En la vista Diseo, haga doble clic en la superficie de diseo (no en un
control) para crear un controlador de eventos Page_Load (cuando se carga la
pgina).
2. Establezca el texto del control Caption Label como Escriba un nmero: si
es la primera vez que se ejecuta la pgina, o como Escriba otro nmero: si
no es la primera vez. El controlador tendr una apariencia similar a la del
ejemplo de cdigo que se muestra a continuacin.

Pr ot ect ed Sub Page_Load( ByVal sender As Obj ect , ByVal e As
Syst em. Event Ar gs)
I f Page. I sPost Back = Fal se Then
Capt i onLabel . Text = "I ngr ese un Nmer o: "
El se
Capt i onLabel . Text = "I ngr ese ot r o Nmer o: "
End I f
End Sub

Page.IsPostBack: es una propiedad que indica si la pgina se carga por una
peticin del cliente (no es la primera vez que se carga la pgina).
Probar la pgina
Para asegurarse de que la pgina funciona, ejectela en su estado actual.
Depurar la pgina
Utilizaremos el depurador para examinar el cdigo de la pgina lnea por lnea
mientras se ejecuta, agregar puntos de interrupcin al cdigo y despus ejecutar
la pgina en modo de depuracin.
Empezar estableciendo los puntos de interrupcin en el cdigo. Un punto de
interrupcin es una lnea en el cdigo en la que se detiene la ejecucin y se invoca
al depurador.
Para establecer puntos de interrupcin
2. Haga clic con el botn secundario del mouse en la lnea que desee
interrumpir la ejecucin, elija Punto de interrupcin y, a continuacin, elija
Insertar punto de interrupcin.
3. Establezca punto de interrupcin en el IF y en Cuadrado =
4. No podemos establecer un punto de interrupcin en la declaracin de una
variable

43

Cuando haya establecido al menos un punto de interrupcin, podr ejecutar el
depurador.
Para ejecutar el depurador
1. En el men Depurar, elija Iniciar depuracin (o presione F5) para
ejecutar la pgina en modo de depuracin.
Si nunca ha ejecutado el depurador, es probable que la aplicacin no est
configurada para admitir la depuracin. De forma predeterminada, la
depuracin est desactivada en las aplicaciones por cuestiones de rendimiento
(las pginas se ejecutan ms lentamente en el depurador) y de seguridad.
Visual Web Developer muestra un mensaje que indica lo que se debe hacer
para habilitar la depuracin.
El modificador para habilitar la depuracin se almacena como valor de
configuracin en el archivo Web.config, que mantiene distintas opciones de
configuracin especficas del sitio. Si el archivo Web.config no existe, Visual
Web Developer lo crear y realizar la correspondiente configuracin del
depurador.
Si ya existe el archivo Web.config pero no est habilitada la depuracin, ver un
mensaje algo distinto, en el que se indica que Visual Web Developer modificar
el archivo Web.config.
2. Si ve el mensaje que le indica que no se ha habilitado la depuracin, haga
clic en Aceptar para habilitar la depuracin.
En Visual Web Developer, el diseador cambia al modo de depuracin, en el que
se muestran el cdigo de la pgina y algunas ventanas del depurador.
El depurador ejecuta la pgina lnea por lnea. Cuando el depurador llega a la
lnea en la que se encuentra el punto de interrupcin, se detiene y resalta la
lnea.
Dado que el punto de interrupcin est en el controlador Page_Load, la pgina
no ha finalizado todava el procesamiento. El explorador est abierto, pero an
no se muestra la pgina.
3. En el men Depurar, haga clic en Ventanas, haga clic en Inspeccin y, a
continuacin, haga clic en Inspeccin 1. Si esta utilizando el Visual Web
Developer Express Edition el depurador presenta solo una ventana Inspeccin.
4. Con esta operacin se abre una ventana Inspeccin, en la que puede
especificar los valores de los que desea realizar un seguimiento.
44
5. En el editor, haga clic con el botn secundario del mouse en la parte
IsPostBack de la expresin Page.IsPostBack y, a continuacin, haga clic en
Agregar inspeccin.
Con esta operacin se agrega la expresin a la ventana Inspeccin y se
muestra el valor actual de la propiedad (false) en la columna Valor. Si lo
prefiere, puede escribir el nombre de una variable o de una propiedad en la
columna Nombre de la ventana Inspeccin.

6. En el men Depurar, elija Continuar para seguir con la ejecucin o
presione F5.
El comando Continuar indica al depurador que contine hasta que llegue al
siguiente punto de interrupcin. El controlador de eventos Page_Load finaliza
el procesamiento y la pgina se muestra en el explorador.
7. Especifique el valor 2 en el cuadro de texto y haga clic en el botn
Cuadrado.
Se muestra de nuevo el depurador, con el punto de interrupcin en la lnea en
el controlador Page_Load. En esta ocasin, la ventana Inspeccin muestra
que el valor de Page.IsPostBack es true.
8. Presione de nuevo F5 para continuar.
El depurador procesa el controlador Page_Load y se detiene en el segundo
punto de interrupcin establecido.
9. En el men Depurar, haga clic en Ventanas y, a continuacin, haga clic en
Variables locales.
Con esta operacin se abre la ventana Variables locales, en la que se
muestran los valores de todas las variables y objetos de la lnea que se est
ejecutando que estn en el mbito. La ventana Variables locales proporciona
un mtodo alternativo para ver estos valores, con la ventaja de que no es
necesario establecer explcitamente una inspeccin de los elementos, aunque
con el inconveniente de que la ventana podra contener ms informacin de la
que desea ver simultneamente.
En la ventana Variables locales, ver que el valor de numero es 2 y que el
valor de resultado es 0.

45

Tambin puede ver el valor de cualquier variable del programa si mantiene el
puntero del Mouse sobre la variable.
10. En la columna Valor de la ventana Variables locales, haga clic con el
botn secundario del mouse en la lnea de la variable numero y seleccione
Editar valor. Edite el valor de la variable numero y cmbielo a 5.
El valor 2 para la variable numero no permite una comprobacin adecuada del
programa, porque tanto la suma como el cuadrado de 2 dan 4 como resultado.
Por consiguiente, mientras el programa se est ejecutando, puede cambiar el
valor de esta variable.
11. En el men Depurar, elija Paso a paso por Instrucciones, o F8 (Visual
Studio) F11 (Visual Web Developer), para examinar la funcin Cuadrado.
El comando Paso a paso hace que el depurador ejecute una lnea y despus se
detenga de nuevo.
12. Contine el examen paso a paso; para ello, presione F8 hasta llegar a la
siguiente lnea de cdigo.
13. El depurador recorre el cdigo lnea por lnea. Cuando el depurador ejecuta
la funcin Cuadrado, se puede utilizar la ventana Variables locales para
comprobar los datos pasados a la funcin (numero) y el valor devuelto por la
funcin (Cuadrado).
14. En el men Depurar, haga clic en Ventanas y, a continuacin, en
Inmediato.
La ventana Inmediato permite ejecutar comandos. Puede utilizar la ventana
para evaluar expresiones (por ejemplo, con el fin de obtener el valor de una
propiedad).
15. En la ventana Inmediato, escriba la expresin siguiente y presione Entrar.
? NumeroTextBox.Text
16. El signo de interrogacin (?) es un operador de la ventana Inmediato que
evala la expresin que lo sigue. En este ejemplo, va a evaluar la propiedad
Text del control NumeroTextBox en la pgina. Puede evaluar cualquier
46
variable, propiedad de objeto o expresin que las combine, utilizando la misma
sintaxis que utilizara en el cdigo.

17. En la ventana Inmediato, escriba lo siguiente y presione Entrar:
NumeroTextBox.Text = 5
18. Adems de evaluar expresiones, la ventana Inmediato le permite cambiar
variables o propiedades
19. Presione F5 para que contine la ejecucin del programa.
Cuando aparece la pgina, muestra el resultado de pasar 5 a la funcin
Cuadrado. Adems, el texto que contiene el cuadro de texto se ha cambiado a
5.
El resultado que se ve (10) no es correcto, ya que 10 no es el cuadrado de 5.
Ahora puede corregir el error.
Para corregir el error y repetir la prueba
1. Pase del explorador a Visual Web Developer.
2. En la funcin Cuadrado, cambie el operador "+" por el operador "*".
Dado que el cdigo no se est ejecutando (la pgina ha finalizado el
procesamiento), se encuentra en modo de edicin y puede realizar cambios
permanentes.
3. Guardar la pgina.
4. En el men Depurar, elija Eliminar todos los puntos de interrupcin
para que la pgina no se detenga cada vez que la ejecuta.
5. Cambie a la ventana del explorador.
6. Escriba 5 en el cuadro de texto y haga clic en el botn.
En esta ocasin, cuando ejecuta la pgina y especifica un valor, ste se eleva
al cuadrado correctamente. Los cambios temporales que realiz
anteriormente, como el de la propiedad Text del control NumeroTextBox, no
se han conservado, ya que slo se aplicaban la ltima vez que se ejecut la
pgina.
7. Cierre el explorador para detener el depurador.

Resumen Depurar Pginas Web

Podemos definir Puntos de Interrupcin (lnea de cdigo) donde se
detendr la ejecucin con la depuracin.
Podemos abrir la ventana de Inspeccin para ver el valor de
propiedades, variables, etc.
Podemos abrir la ventana de Variables Locales para ver todas la variable
de la lnea que se esta ejecutando.
47
Podemos ejecutar Paso a Paso por instrucciones o por
procedimientos.
Podemos abrir la ventana de Inmediato que nos permite evaluar
expresiones, ejecutar comandos.

Validar los datos introducidos por el usuario en una pgina de
formularios Web Forms
Validar los datos que se ingresan a los sistemas, independientemente de los tipos
de sistemas, plataformas, etc., es de suma importancia para la seguridad de los
mismos, y la consistencia de las bases de datos que se generan con estos datos.
Veremos cmo utilizar los controles validadores de ASP.NET para comprobar los
datos proporcionados por el usuario en una pgina Web. Trabajar con controles
que realizan todas las comprobaciones automticamente, sin necesidad de cdigo.
Tambin crear un validador que personalizar mediante cdigo; de ese modo se
ilustra cmo se puede agregar lgica al marco de trabajo de validacin en la
pgina. Finalmente, obtendr informacin acerca de cmo se pueden validar
condicionalmente los datos proporcionados por el usuario, de acuerdo con las
opciones que elige ste en una pgina.
En la pgina que va a crear se pedir al usuario una direccin de correo electrnico,
el nmero de personas para las que solicita reserva y una fecha preferida. La
pgina tambin permite al usuario solicitar confirmacin telefnica de la reserva.
(La opcin predeterminada para esta pgina, si se implementase, sera una
confirmacin por correo electrnico).
Crearemos un sitio Web y una pgina en la que podr trabajar con estilos.
Para agregar controles y texto
2. Escriba un encabezado de pgina, como Enviar una reserva.
3. Desde el grupo Estndar del Cuadro de herramientas, arrastre los controles
siguientes a la pgina y establezca sus propiedades tal como se indica.
a. TextBox, ID: TextEmail
b. TextBox, ID: TextNmero
c. TextBox, ID: TextFecha
d. Button, ID: ButtonMandar, Text: Enviar solicitud, ValidationGroup:
GrupoValidar1.
e. Label, ID: LabelMensaje, Text: en blanco.
4. Escriba el texto delante de los cuadros de texto como ttulos.
5. Haga doble clic en el botn con el objeto de crear un controlador para su
evento Click y, a continuacin, agregue el cdigo resaltado que se muestra a
continuacin:
Pr ot ect ed Sub But t onMandar _Cl i ck( ByVal sender As Obj ect , ByVal e
As Syst em. Event Ar gs) Handl es But t onMandar . Cl i ck
I f Page. I sVal i d Then
Label Mensaj e. Text = "Su r eser va ha si do Pr ocesada"
End I f
End Sub

IsValid indica si la validacin de la pgina ha sido correcta.

6. El controlador del botn slo muestra un mensaje; no realiza ningn
procesamiento real.
48
7. Cambie a la vista Diseo, haga doble clic en un rea en blanco en la pgina
para crear un controlador Page_Load y, a continuacin, agregue el cdigo
resaltado que se muestra a continuacin:

Pr ot ect ed Sub Page_Load( ByVal sender As Obj ect , ByVal e As
Syst em. Event Ar gs) Handl es Me. Load
Label Mensaj e. Text = ""
End Sub

8. Este cdigo borra el mensaje que muestra la pgina despus de la validacin
completa.
Agregar validacin bsica
Para su sistema de reservas imaginario, necesitar que se realicen las siguientes
comprobaciones de validacin:
La direccin de correo electrnico es obligatoria y su formato tiene que ser
correcto; por ejemplo, alguien@ejemplo.com. (Por lo general, no es viable
comprobar si la direccin de correo electrnico es real; no obstante, s se puede
comprobar que se ajusta al modelo correspondiente a las direcciones de correo
electrnico).
Tambin es necesario el nmero de personas, que debe ser un valor
numrico.
Se necesita la fecha preferida.
Puede agregar todos estos criterios de validacin mediante controles validadores,
que se encargan de realizar las comprobaciones y muestran los errores
automticamente.
Para agregar una validacin bsica
1. Cambie a la vista Diseo. Desde el grupo Validacin del Cuadro de
herramientas, arrastre un control RequiredFieldValidator y colquelo junto al
cuadro de texto TextEmail.
2. Establezca las siguientes propiedades del control RequiredFieldValidator:
a. ControlToValidate; TextEmail. Enlaza el control validador al
cuadro de texto cuyo contenido desea validar.
b. Display: Dinmico. Especifica que el control slo representa (y
ocupa espacio en la pgina) si es necesario para mostrar un error.
c. ErrorMessage: Se requiere la direccin de correo electrnico.
Muestra texto en un resumen de error.
d. Text: *. Para indicar que un campo es obligatorio, se suele utilizar
como convencin un signo en forma de estrella. Slo se mostrar
este texto en caso de error.
e. ValidationGroup: GrupoValidar1. Al igual que ocurre con los
botones de opcin, es posible reunir los validadores en grupos que se
tratan como una unidad.
3. Este control chequea que el usuario ingrese el dato requerido (obligatorio),
en este caso escribir una direccin de correo electrnico.

49

4. Desde el grupo Validacin del Cuadro de herramientas, arrastre un control
RegularExpressionValidator y colquelo junto al control
RequiredFieldValidator recin agregado.
5. Establezca las siguientes propiedades del control
RegularExpressionValidator:
a. ControlToValidate; TextEmail.
b. Display: Dinmico.
c. ErrorMessage: La direccin de correo electrnico debe estar
en el formato nombre@dominio.xyz.
d. Text: Formato no vlido.
e. ValidationGroup: GrupoValidar1.
6. Con el control RegularExpressionValidator todava seleccionado, haga clic
en el botn de puntos suspensivos en el cuadro ValidationExpression de la
ventana Propiedad.
Las expresiones regulares constituyen un lenguaje que se puede utilizar para
buscar con precisin modelos definidos en cadenas. En el control
RegularExpressionValidator, defina una expresin regular para el modelo
vlido (en este caso, el modelo de una direccin de correo electrnico vlida).
El Editor de expresiones regulares contiene una lista de expresiones
regulares utilizadas con frecuencia para que pueda usar el control validador sin
tener que conocer la sintaxis de las expresiones regulares.
7. En la lista Expresiones estndar, haga clic en Direccin de correo
electrnico de Internet.
La expresin regular para una direccin de correo electrnico se coloca en el
cuadro Expresin de validacin.
8. Haga clic en Aceptar para cerrar el cuadro de dilogo.

50

9. Agregue otro control RequiredFieldValidator segn las instrucciones de
los pasos 1 a 3. Sin embargo, en esta ocasin deber enlazarlo al cuadro de
texto TextNmero y establecer su propiedad ErrorMessage como Indique
para cuntas personas es la reserva.
RangeValidator y colquelo junto al control RequiredFieldValidator recin
agregado.
11. Establezca las siguientes propiedades del control RangeValidator:
a. ControlToValidate; TextNmero.
b. Display: Dinmico.
c. ErrorMessage: Escriba un nmero entre 1 y 20 para indicar el
nmero de personas para la reserva.
d. MaximumValue: 20.
e. MinimumValue: 1.
f. Text: Escriba un nmero entre 1 y 20.
g. Type: Entero.
h. ValidationGroup: GrupoValidar1.
12. El control RangeValidator realiza dos funciones: garantiza que los datos
que introduce un usuario son numricos y comprueba que el nmero
introducido se encuentra entre los valores mnimo y mximo especificados.
Probar la pgina
Ahora puede probar los controles validadores que tiene hasta el momento.
Para probar la validacin bsica
1. Presione CTRL+F5 para ejecutar la pgina.
2. Cuando la pgina aparece en el explorador, haga clic en el botn Enviar
Solicitud.
Se muestran varios errores de validacin porque no ha rellenado algunos
campos necesarios. Observe que se muestran los errores de validacin
inmediatamente. No se enva la pgina. De forma predeterminada, los
controles validadores insertan ECMAScript de cliente (JavaScript) en la pgina
para realizar una comprobacin de validacin en el explorador. Esto
proporciona a los usuarios informacin instantnea sobre errores de validacin;
sin script de cliente, para la comprobacin de errores de validacin se
necesitara una accin de ida y vuelta al servidor, lo que en ocasiones podra
resultar lento. De hecho, no es posible enviar la pgina hasta que se pasen
todas las comprobaciones de validacin en el cliente. (Como medida de
51
seguridad, se realiza de nuevo la misma comprobacin de validacin cuando se
enva la pgina).
3. Compruebe la validacin en el cuadro de texto TextEmail; para ello, escriba
una direccin de correo electrnico no vlida y, a continuacin, repita la prueba
con una direccin de correo electrnico vlida, como la suya.
4. Compruebe que slo se pueden escribir valores numricos entre el 1 y el 20
en el cuadro de texto Nmero de personas para la reserva.
5. Cuando haya escrito los valores vlidos, haga clic en el botn Enviar
solicitud. Si la validacin pasa todos los controles, ver el mensaje Se ha
procesado su reserva.
6. Despus de haber confirmado que esa validacin funciona segn lo previsto,
cierre el explorador.
Si la validacin no funciona segn lo previsto, asegrese de que ha establecido
todos los valores de configuracin de propiedades enumerados anteriormente y
despus ejecute de nuevo la pgina.

Formas alternativas de mostrar informacin de errores
De forma predeterminada, los controles validadores muestran el texto de los
errores en contexto; es decir, muestran el valor de la propiedad Text del control en
la ubicacin que tiene el control en la pgina. En ocasiones quiz desee que la
informacin de los errores se muestre de otro modo. Los controles validadores de
ASP.NET le proporcionan estas opciones adicionales:
Resumir todos los errores de validacin en un lugar. Puede hacerlo adems
de que se muestren los errores en contexto, o como alternativa a esa
presentacin. Si se muestran los resmenes de error, tambin es posible
mostrar mensajes de error ms largos.
Mostrar un mensaje emergente en el explorador con informacin de error.
Esta opcin solo funciona en exploradores habilitados para el uso de script.
Puede agregar estas dos opciones de presentacin con el control
ValidationSummary.
Para que se muestre informacin de validacin de formas alternativas
1. Arrastre un control ValidationSummary desde el grupo Validacin del
Cuadro de herramientas hasta la pgina.
2. Establezca la propiedad ValidationGroup del control ValidationSummary
como GrupoValidar1.
3. Ejecute la pgina.
4. Realice las mismas pruebas que realiz anteriormente.
52
Para cada error ver informacin en dos lugares. Se muestra un mensaje de
error corto (el valor de la propiedad Text del control validador) donde se
encuentra el control validador. El mensaje de error ms largo (el valor de la
propiedad ErrorMessage del control) se muestra en el control
ValidationSummary.

6. Establezca la propiedad ShowMessageBox del control
ValidationSummary en true, cada error produce un mensaje emergente en el
explorador.
53
7. Si no deseamos que adems salga el mensaje en la pgina en el lugar del
control ValidationSummary debemos cambiar la propiedad ShowSummary
en False.
8. Ejecute la pgina.
9. Realice las mismas pruebas.
En esta ocasin, cada error produce un mensaje emergente en el explorador.

Agregar validacin personalizada para comprobar la entrada de la
fecha
Entre los controles de validacin de ASP.NET no se incluye ninguno que compruebe
automticamente la validez de la fecha. Sin embargo, puede utilizar el control
CustomValidator con ese fin. El validador personalizado permite escribir cdigo de
validacin propio para comprobar cualquier condicin que necesite la aplicacin.
Con el control CustomValidator comprobaremos que el valor que escribe el
usuario en el cuadro de texto TextFecha se puede convertir en un valor de fecha.
Agregaremos dos bloques de cdigo de validacin personalizado. El primero es el
cdigo de validacin personalizado que se ejecuta cuando se enva la pgina.
Siempre debe tener lgica de validacin de servidor para un control
CustomValidator. Tambin escribir script de cliente (ECMAScript o JavaScript)
que realizar una comprobacin similar en el explorador para que el usuario tenga
informacin inmediata.
Para utilizar un control CustomValidator con el fin de comprobar una fecha
vlida
CustomValidator a la pgina y colquelo junto al cuadro de texto TextFecha.
2. Establezca las siguientes propiedades del control CustomValidator:
54
1. ControlToValidate; TextFecha.
2. Display: Dinmico.
3. ErrorMessage: Escriba una fecha en el formato dd/mm/aaaa.
4. Text: Formato de fecha no vlido (se requiere dd/mm/aaaa).
5. ValidationGroup: GrupoValidar1.

3. Haga doble clic en el control CustomValidator con el objeto de crear un
controlador para su evento ServerValidate y, a continuacin, agregue el
cdigo resaltado que se muestra a continuacin:

Pr ot ect ed Sub Cust omVal i dat or 1_Ser ver Val i dat e
( ByVal sour ce As Obj ect , ByVal ar gs As
Syst em. Web. UI . WebCont r ol s. Ser ver Val i dat eEvent Ar gs)
Handl es Cust omVal i dat or 1. Ser ver Val i dat e
Tr y
Dat eTi me. Par seExact ( ar gs. Val ue, "d", _
Syst em. Gl obal i zat i on. Dat eTi meFor mat I nf o. Cur r ent I nf o)
ar gs. I sVal i d = Tr ue
Cat ch ex As Except i on
ar gs. I sVal i d = Fal se
End Tr y
End Sub

4. Este cdigo se ejecuta cuando el usuario enva la pgina. El cdigo
interacta con el control validador mediante el objeto
ServerValidateEventArgs (ar gs) pasado al controlador. El valor que el
usuario ha especificado en el cuadro de texto TextFecha se pasa como la
propiedad Value del objeto ar gs. Despus de haber comprobado que la
entrada del usuario es vlida, establezca la propiedad IsValid del objeto ar gs
en true o false. Si la establece en false, el validador mostrar su mensaje de
error.
5. En este ejemplo, el cdigo utiliza un bloque try-catch para determinar si la
entrada del usuario se puede convertir en un objeto DateTime. Si el usuario
especifica un valor no vlido (que no se ajusta a una fecha de formato
dd/mm/aaaa), el mtodo ParseExact del objeto DateTime produce una
excepcin y se ejecuta el bloque Catch.
6. En el controlador Button_Clik, agregue el cdigo resaltado que se muestra
a continuacin:

Pr ot ect ed Sub But t onMandar _Cl i ck( ByVal sender As Obj ect , ByVal e
As Syst em. Event Ar gs) Handl es But t onMandar . Cl i ck
I f Page. I sVal i d Then
Label Mensaj e. Text = "Su r eser va ha si do Pr ocesada"
El se
Label Mensaj e. Text = "La Pgi na no es vl i da"
End I f
End Sub

7. Cuando se utiliza un control CustomValidator, debe comprobarse la
propiedad Page.IsValid en cualquier procesamiento de servidor para
asegurarse de que se han pasado todas las comprobaciones de validacin. La
propiedad IsValid devuelve el estado acumulado de todos los controles
validadores en la pgina. Esta propiedad se utiliza para asegurarse de que
todas las comprobaciones de validacin han pasado el procesamiento de
servidor.

55

Ahora ha agregado el cdigo de servidor para el control CustomValidator para
comprobar la validez de una fecha. Como ya se ha visto anteriormente, los
controles validadores tambin comprueban la entrada de un usuario mediante
script de cliente. Tambin puede agregar script de cliente al control
CustomValidator. En realidad, escribir script de cliente que duplica la lgica que
aplica la validacin de servidor. No siempre es viable escribir cdigo de validacin
personalizado de cliente (por ejemplo, si el cdigo personalizado valida una entrada
del usuario mediante consulta en una base de datos de servidor). Sin embargo, en
este caso puede crear cdigo de cliente que realice esencialmente la misma
comprobacin que est realizando su cdigo de servidor.
Para agregar script de cliente al control CustomValidator
1. Abra o cambie a Default.aspx.
2. En el elemento <head> de la pgina, agregue el siguiente bloque de script
de cliente:

<scr i pt l anguage="j avascr i pt ">
f unct i on val i daFecha( oSr c, ar gs)
{
var i Day, i Mont h, i Year ;
var ar r Val ues;
ar r Val ues = ar gs. Val ue. spl i t ( "/ ") ;
i Mont h = ar r Val ues[ 1] ;
i Day = ar r Val ues[ 0] ;
i Year = ar r Val ues[ 2] ;
var t est Dat e = new Dat e( i Year , i Mont h - 1, i Day) ;
i f ( ( t est Dat e. get Dat e( ) ! = i Day) | |
( t est Dat e. get Mont h( ) ! = i Mont h - 1) | |
( t est Dat e. get Ful l Year ( ) ! = i Year ) )
{
ar gs. I sVal i d = f al se;
r et ur n;
}
r et ur n t r ue;
}</ scr i pt >

3. Este cdigo es similar al de comprobacin de validacin de servidor, pero no
tan estricto. La entrada del usuario se pasa a la funcin como la propiedad
Value del objeto args, y se puede establecer la propiedad IsValid del objeto
para indicar si el valor pasa la validacin. En este ejemplo, el cdigo comprueba
que se han escrito fechas con un formato numrico vlido.
4. Observe que el cdigo para la validacin personalizada es ligeramente
diferente en el script de cliente que en el cdigo de servidor. ECMAScript no
proporciona exactamente la misma funcionalidad que en .NET Framework. Por
56
consiguiente, ECMAScript analiza el texto escrito en lugar del cdigo
ParseExact que se utiliza en el servidor para comprobar la fecha. Sin
embargo, las dos comprobaciones de validacin (cliente y servidor) son
bastante parecidas para proporcionarle la funcionalidad que necesita.
5. Coloque el punto de insercin en el elemento <asp:customvalidator> para
seleccionarlo.
6. En la ventana Propiedades, establezca la propiedad
ClientValidationFunction del control como validaFecha, que es el nombre
de la funcin ECMAScript que ha creado.
Ahora ha agregado una comprobacin de validacin personalizada que funciona
primero en el script de cliente para comprobar la entrada del usuario
inmediatamente y, despus, cuando la pgina se enva al servidor.
Ahora puede probar que su validacin personalizada est funcionando
correctamente.
Agregar controles opcionales con validacin condicional
Agregaremos informacin opcional al formulario de reservas. Los usuarios pueden
activar una casilla para indicar que desean confirmacin telefnica de sus reservas.
Si lo hacen, deben escribir su nmero de telfono. Por consiguiente, la pgina
contendr dos controles adicionales: una casilla y un cuadro de texto.
Como en el caso anterior, utilizar la validacin para comprobar las entradas del
usuario. Utilizar un control RequiredFieldValidator para asegurarse de que los
usuarios escriben un nmero de telfono, y un control
RegularExpressionValidator para comprobar el formato. El nmero de telfono
es opcional; slo tiene que comprobar el nmero de telfono si el usuario ha
activado la casilla Confirmo reserva por telfono. Por lo tanto, escribir cdigo
sencillo con el que se active o desactive la validacin del nmero de telfono en
funcin del estado de la casilla.
Para agregar una validacin condicional
1. Desde el grupo Estndar del Cuadro de herramientas, arrastre un control
CheckBox a la pgina y establezca las propiedades siguientes:
a. ID: chequeoTe
b. AutoPostBack: True. Cuando el usuario haga clic en la casilla, la
pgina realizar una accin de ida y vuelta y habilitar o no el
cuadro de texto y la validacin de ste.
c. CausesValidation: False. No se producir automticamente la
validacin al hacer clic en CheckBox.
d. Text: Confirme la reserva por telfono.
e. TextAlign: Left. Alinea el texto (Text) a la izquierda de la casilla.
2. Arrastre un control TextBox a la pgina, bajo el control CheckBox y
establezca las propiedades siguientes:
a. ID: nmeroTe
b. Enabled: False. No se habilitar el cuadro de texto hasta que el
usuario haga clic en la casilla.
3. Escriba un texto como Nmero de telfono: como un ttulo junto al cuadro
de texto correspondiente al nmero de telfono.
RequiredFieldValidator a la pgina y establezca las propiedades siguientes:
a. ID: validadorRequiereNuTe. No se estableci el ID de los
controles validadotes anteriores, pero en este caso haremos
referencia al control validador en cdigo, por lo que resulta til
proporcionarle un ID.
b. ControlToValidate: nmeroTe.
c. Display: Dinmico.
57
d. ErrorMessage: Debe proporcionar un nmero de telfono.
e. Text: *.
f. ValidationGroup: (dejarlo en blanco). Si esta propiedad est en
blanco significa que el validador no pertenece al
grupoGrupoValidar1 que establecimos para los otros controles
validadotes en la pgina. Como consecuencia de ello, esta validador
no se comprueba de forma predeterminada cuando se hace clic
sobre el botn
5. Arrastre un control RegularExpressionValidator a la pgina y establezca
las propiedades siguientes:
a. ID: validadorExpresinNuTe.
b. ControlToValidate: nmeroTe.
c. Display: Dinmico.
d. ErrorMessage: El formato del nmero de telfono no es
vlido.
e. Text: Formato no vlido.
f. ValidationExpresion: (usar el cuadro de dilogo Editor de
Expresiones regulares para seleccionar Nmero de Telfono
en u otra expresin para el nmero de telfono.
g. ValidationGroup: (dejarlo en blanco).

6. Haga doble clic en el control chequeoTe con objeto de crear un controlador
para su evento CheckedChanged y, a continuacin, agregue el cdigo
resaltado que se muestra a continuacin:

Pr ot ect ed Sub ChequeoTe_CheckedChanged( ByVal sender As Obj ect ,
ByVal e As Syst em. Event Ar gs) Handl es
ChequeoTe. CheckedChanged
I f ChequeoTe. Checked = Tr ue Then
nmer oTe. Enabl ed = Tr ue
val i dador Requi er eNuTe. Val i dat i onGr oup = "Gr upoVal i dar 1"
val i dador Expr esi nNuTe. Val i dat i onGr oup = "Gr upoVal i dar 1"
El se
nmer oTe. Enabl ed = Fal se
val i dador Requi er eNuTe. Val i dat i onGr oup = ""
val i dador Expr esi nNuTe. Val i dat i onGr oup = ""
End I f
End Sub
58

7. Cuando el usuario hace clic en la casilla, habilita el cuadro de texto para
ingresar el nmero de telfono control nmeroTe y los dos controles
validadores asociados al cuadro de texto se agregan al grupo de validacin al
que pertenecen los otros controles validadores. El efecto es que todos los
validadores de la pgina, incluidos los del nmero de telfono, se comprobarn
cuando el usuario enve la pgina. Si el usuario desactiva la casilla, los
validadores se quitan del grupo y, por lo tanto, no se procesan cuando se hace
clic en el botn Enviar solicitud.
8. Podemos probar la pgina.

Apunte Visual STudio 2008 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apunte Visual STudio 2008 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Universidad Nacional del Nordeste

Facultad de Ciencias Exactas y Naturales y Agrimensura

Vous aimerez peut-être aussi