Apunte Visual STudio 2008 y ASP.NET
Anuncio
Universidad Nacional del Nordeste Facultad de Ciencias Exactas y Naturales y Agrimensura DEPARTAMENTO DE INFORMÁTICA ÁREA PROGRAMACIÓN CÁTEDRA PROGRAMACIÓN II DESARROLLO DE APLICACIONES WEB AÑO 2009 PROF. OSCAR A. ZALAZAR Cátedra: Programación II Los diferentes lenguajes de programación para la web Actualmente existen diferentes lenguajes de programación 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 estáticos. A medida que paso el tiempo, las tecnologías fueron desarrollándose y surgieron nuevos problemas a dar solución. Esto dio lugar a desarrollar lenguajes de programación para la web dinámicos, que permitieran interactuar con los usuarios y utilizaran Bases de Datos. A continuación los lenguajes de programación para la web mas utilizados. Lenguaje HTML Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML. Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español 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 párrafo <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 páginas web o WYSIWYG. Archivos pequeños. Despliegue rápido. Lenguaje de fácil aprendizaje. Lo admiten todos los exploradores. Desventajas: Lenguaje estático. La interpretación de cada navegador puede ser diferente. Guarda muchas etiquetas que pueden convertirse en “basura” y dificultan la corrección. El diseño es más lento. Las etiquetas son muy limitadas. Lenguaje Javascript Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no 2 Cátedra: Programación II dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript. El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object Model, en su traducción al español 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 código Javascript se ejecuta en el cliente. Desventajas: Código visible por cualquier usuario. El código debe descargarse completamente. Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en inglés Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS). Lenguaje PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo 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 generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php). Sintaxis: La sintaxis utilizada para incorporar código PHP es la siguiente: <? $mensaje = “Hola”; echo $mensaje; ?> También puede usarse: <?php $mensaje = “Hola”; echo $mensaje; ?> Ventajas: Muy fácil de aprender. Se caracteriza por ser un lenguaje muy rápido. Soporta en cierta medida la orientación a objeto. Clases y herencia. Es un lenguaje multiplataforma: Linux, Windows, entre otros. Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras. 3 Cátedra: Programación II Capacidad de expandir su potencial utilizando módulos. Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus funciones. Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. Incluye gran cantidad de funciones. No requiere definición 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 más ineficiente a medida que las solicitudes aumenten de número. La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP. La programación orientada a objetos es aún muy deficiente para aplicaciones grandes. Dificulta la modularización. Dificulta la organización por capas de la aplicación. Seguridad: PHP es un poderoso lenguaje e intérprete, ya sea incluido como parte de un servidor web en forma de módulo 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á diseñado específicamente para ser un lenguaje más seguro para escribir programas CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos de compilación y ejecución, y siguiendo algunas prácticas correctas de programación. Lenguaje ASP Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en 1996. Las páginas 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 páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el código HTML. Los archivos cuentan con la extensión (asp). Sintaxis: <% %> Ventajas: Usa Visual Basic Script, siendo fácil para los usuarios. Comunicación óptima con SQL Server. Soporta el lenguaje JScript (Javascript de Microsoft). Desventajas: Código desorganizado. 4 Cátedra: Programación II Se necesita escribir mucho código para realizar funciones sencillas. Tecnología propietaria. Hospedaje de sitios web costosos. Lenguaje 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 tecnología 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 extensión (aspx). Para su funcionamiento de las páginas 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. División entre la capa de aplicación o diseño y el código. Facilita el mantenimiento de grandes aplicaciones. Incremento de velocidad de respuesta del servidor. Mayor velocidad. Mayor seguridad. Desventajas: Mayor consumo de recursos. Lenguaje JSP Es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages. Está orientado a desarrollar páginas 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 creación de aplicaciones web potentes. Posee un motor de páginas basado en los servlets de Java. Para su funcionamiento se necesita tener instalado un servidor Tomcat. Sintaxis: Características: Código separado de la lógica del programa. Las páginas son compiladas en la primera petición. Permite separar la parte dinámica de la estática en las páginas web. Los archivos se encuentran con la extensión (jsp). El código JSP puede ser incrustado en código HTML. Elementos de JSP Los elementos que pueden ser insertados en las páginas JSP son los siguientes: Código: se puede incrustar código “Java”. Directivas: permite controlar parámetros del servlet. 5 Cátedra: Programación II Acciones: permite alterar el flujo normal de ejecución de una página. Ventajas: Ejecución rápida del servlets. Crear páginas del lado del servidor. Multiplataforma. Código bien estructurado. Integridad con los módulos de Java. La parte dinámica está escrita en Java. Permite la utilización se servlets. Desventajas: Complejidad de aprendizaje. Lenguaje Python Es un lenguaje de programación creado en el año 1990 por Guido van Rossum, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Los usuarios lo consideran como un lenguaje más limpio para programar. Permite la creación de todo tipo de programas incluyendo los sitios web. Su código no necesita ser compilado, por lo que se llama que el código es interpretado. Es un lenguaje de programación multiparadigma, lo cual fuerza a que los programadores adopten por un estilo de programación particular: Programación Programación Programación Programación orientada a objetos. estructurada. funcional. 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 propósito general. Gran cantidad de funciones y librerías. Sencillo y rápido de programar. Multiplataforma. Licencia de código abierto (Opensource). Orientado a Objetos. Portable. Desventajas: Lentitud por ser un lenguaje interpretado. 6 Cátedra: Programación II Lenguaje Ruby Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el 1993 por el programador japonés Yukihiro “Matz” Matsumoto. Su sintaxis está inspirada en Phyton, Perl. Es distribuido bajo licencia de software libre (Opensource). Ruby es un lenguaje dinámico para una programación orientada a objetos rápida y sencilla. Para los que deseen iniciarse en este lenguaje pueden encontrar un tutorial interactivo de ruby. Se encuentra también a disposición de estos usuarios un sitio con informaciones y cursos en español. Sintaxis: puts "hola" Características: Existe diferencia entre mayúsculas y minúsculas. Múltiples expresiones por líneas, separadas por punto y coma “;”. Dispone de manejo de excepciones. Ruby puede cargar librerías de extensiones dinámicamente si el (Sistema Operativo) lo permite. Portátil. Ventajas: Permite desarrollar soluciones a bajo Costo. Software libre. Multiplataforma. 7 Cátedra: Programación II Introducción a Visual Studio Visual Studio es un conjunto completo de herramientas de desarrollo para la generación de: Aplicaciones web ASP.NET. Aplicaciones de escritorio. Aplicaciones móviles. Visual Basic, Visual C# utilizan todos el mismo entorno de desarrollo integrado (IDE), que habilita el uso compartido de herramientas y hace más sencilla la creación 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 tecnologías 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 Estándar, varias ventanas de herramientas que se acoplan u ocultan automáticamente a la izquierda, parte inferior y a la derecha, así como en el espacio del editor. Las ventanas de herramientas, menús y barras de herramientas disponibles dependen del tipo de proyecto o archivo en el que esté trabajando. IDE con la configuración de desarrollo general aplicada Dependiendo de la configuración aplicada y de las subsiguientes personalizaciones que haya realizado, variará la colocación de las ventanas de herramientas y de otros elementos en el IDE. Puede cambiar la configuración mediante el Asistente para importar y exportar configuraciones que se encuentra en el Menú Herramientas. 8 Cátedra: Programación II En esta figura tenemos el Menú, la barra de herramienta estándar, abajo a la izquierda el cuadro de herramientas, en el centro la página de inicio y después el explorador de soluciones. Explorador de soluciones El Explorador de soluciones proporciona una vista organizada de los proyectos y sus archivos, así como acceso rápido 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 aplicación. Un contenedor de tipo solución 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 Página de Inicio La Página de inicio proporciona una manera sencilla de crear o tener acceso a proyectos, obtener información acerca de próximas publicaciones de productos y conferencias o leer artículos recientes sobre programación. Para tener acceso a la Página de inicio, en el menú Ver, seleccione Otras ventanas y, a continuación, haga clic en Página de inicio. Editores y diseñadores En el IDE esta ubicado en el lugar de la página de inicio. El editor y los diseñadores que utilice dependerán del tipo de archivo o documento que esté creando. El Editor de texto es el procesador de textos básico del IDE, mientras que el Editor de código es el editor de código fuente básico. Otros editores, como el Editor CSS, el Diseñador HTML y el Diseñador de páginas Web, comparten muchas de las funciones del Editor de código, junto con mejoras específicas en el tipo de código o de marcado admitido. Los editores y diseñadores normalmente tienen dos vistas: una vista de diseño gráfica y la vista de código subyacente o vista de código fuente. La vista de diseño le permite especificar la ubicación de los controles y otros elementos en la interfaz de usuario o la página web. Puede arrastrar con facilidad un control desde el Cuadro de herramientas y colocarlo en la superficie de diseño. Diseñador de páginas Web, vista Diseño 9 Cátedra: Programación II En la parte de abajo se puede ver que esta seleccionado diseño, es el lugar donde colocamos los distintos controles, imágenes, etc. de nuestra página web, también podemos ver el código fuente asociado al diseño y si seleccionamos dividir vemos el diseño y el código. 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 automáticamente. Cada icono del Cuadro de herramientas se puede arrastrar y colocar en una superficie de vista de diseño; o bien, copiarse y pegarse en un editor de código dentro del entorno de desarrollo integrado (IDE) de Visual Studio. Cualquier acción agrega el código básico para crear una instancia del elemento del Cuadro de herramientas en el archivo del proyecto activo. Información sobre páginas Web ASP.NET Las páginas Web ASP.NET se utilizan como la interfaz de usuario de la aplicación Web. Este tipo de páginas presenta la información al usuario en cualquier explorador o dispositivo cliente e implementa lógica del sistema mediante el software que se encuentra en el servidor. Las páginas Web ASP.NET: Se basan en la tecnología Microsoft ASP.NET, en la que el código que se ejecuta en el servidor genera de forma dinámica salida de páginas Web en un explorador del cliente. Son compatibles con cualquier explorador o dispositivo móvil. Las páginas Web ASP.NET representan automáticamente el código HTML adecuado al explorador para funciones tales como estilos, diseño, etc. Como alternativa, se pueden diseñar las páginas 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 páginas Web ASP.NET En las páginas Web ASP.NET, la programación de la interfaz de usuario se divide en dos partes: el componente visual (diseño) y el lógico (código). 10 Cátedra: Programación II El elemento visual está compuesto por un archivo que contiene el marcado estático como HTML o controles ASP.NET o ambos. La página Web ASP.NET funciona como un contenedor del texto y los controles estáticos que se desea mostrar. La lógica de las páginas Web ASP.NET se compone del código creado para interactuar con la página. El código puede residir en un bloque de script en la página o en una clase independiente. Si el código está en un archivo de clase independiente, a este archivo se le conoce como archivo de código subyacente. El código del archivo de código subyacente se puede escribir en Visual Basic, Visual C#, Visual J# o JScript .NET. Las páginas Web ASP.NET se compilan en un archivo de biblioteca de vínculos dinámicos (.dll). La primera vez que un usuario examina la página .aspx con el explorador, ASP.NET genera automáticamente un archivo de clase .NET que representa a la página y la compila. El archivo .dll se ejecuta en el servidor y genera dinámicamente la salida HTML para su página. Ventajas que aportan las páginas Web ASP.NET Implementación de una interfaz de usuario Web compleja Puede ser difícil y tedioso diseñar e implementar una interfaz de usuario utilizando las funciones básicas de HTML, especialmente si la página tiene un diseño complejo, un gran cantidad de contenido dinámico y objetos con muchas funciones y que requieren interacción con el usuario. Separación de cliente y servidor En una aplicación 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 aplicación comparten muy poca información; se pueden comunicar, pero normalmente intercambian sólo pequeñas porciones de información simple. Ejecución sin estado Cuando un servidor Web recibe una solicitud de una página, la busca, la procesa y la envía al explorador y, a continuación, descarta toda la información de dicha página. Si el usuario solicita la página de nuevo, el servidor repite la secuencia completa, volviendo a procesar la página desde el principio. En otras palabras, los servidores no tienen memoria de las páginas que han procesado, no tienen estado. Por consiguiente, si una aplicación necesita mantener información sobre una página, su naturaleza sin estado podría 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 difícil crear una aplicación 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 utilización de varios recursos. Complicaciones con la escalabilidad En muchos casos, las aplicaciones Web diseñadas con los métodos existentes no pueden cumplir los objetivos de escalabilidad debido a la falta de compatibilidad entre sus distintos componentes. Este es a menudo el origen común 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 páginas Web ASP.NET y el marco de trabajo de páginas ASP.NET tratan de solucionar estos temas de los modos siguientes: Intuitivo, modelo de objeto coherente El marco de trabajo de páginas 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 página de un modo más intuitivo que en las aplicaciones Web tradicionales, ya que se incluye la capacidad de establecer las propiedades de los elementos de la página y de responder a los eventos. 11 Cátedra: Programación II Además, los controladores de servidor ASP.NET son una abstracción del contenido físico de una página HTML y de la interacción directa entre el explorador y el servidor. En general, se pueden usar los controles de servidor del mismo modo que se haría con los controles en una aplicación cliente, pero sin tener que preocuparse por crear el código HTML para presentar y procesar los controles y su contenido. Modelo de programación controlada por eventos Las páginas Web ASP.NET aportan a las aplicaciones Web un modelo familiar que permite diseñar controladores de eventos para aquellos eventos que se producen en el cliente o en el servidor. El marco de trabajo de las páginas ASP.NET tienen un mecanismo subyacente de captura de los eventos en el cliente, su transmisión al servidor y la llamada al método apropiado se realiza de modo automático e invisible para el usuario. El resultado es una estructura de código clara y escrita con facilidad, compatible con el desarrollo controlado por eventos. Aplicaciones independientes del explorador El marco de trabajo de páginas ASP.NET permite crear toda la lógica de la aplicación en el servidor, lo que elimina la necesidad de confeccionar explícitamente código para las diferencias de los diferentes exploradores. Sin embargo, todavía le permite aprovechar las funciones específicas de cada explorador al escribir código para la parte cliente con el fin de mejorar el rendimiento y de proporcionar una experiencia más enriquecedora en la parte cliente. Compatibilidad de Common Language Runtime de .NET Framework El marco de trabajo de la página ASP.NET se genera sobre .NET Framework, por lo que todo el marco de trabajo está disponible para cualquier aplicación ASP.NET. Sus aplicaciones se pueden escribir en cualquier lenguaje que sea compatible con el tiempo de ejecución. Además, 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 páginas ASP.NET permite escalar las aplicaciones Web de un equipo con un único procesador a una batería de servidores Web con varios equipos perfectamente y sin realizar cambios complicados en la lógica de la aplicación. Funcionamiento de las Páginas Web de ASP.NET El ciclo de procesamiento de una página Web de ASP.NET: 1. El usuario solicita la página. (La página se solicita utilizando un método GET de HTTP.) La página se ejecuta por primera vez, realizando el procesamiento preliminar si la ha programado para hacerlo. 2. La página se representa en el explorador dinámicamente y lo que el usuario ve es una página Web similar a cualquier otra. 3. El usuario escribe la información o la selecciona entre las opciones disponibles y, a continuación, hace clic en un botón. (Si los usuarios hacen clic en un vínculo en lugar de en un botón, la página podría simplemente navegar hasta otra página, sin que tenga lugar ningún procesamiento más en la primera página). 4. La página se manda al servidor Web. (El explorador ejecuta un método POST de HTTP, que en ASP.NET se denomina devolución de datos.) Específicamente, la página se devuelve datos a sí misma. Por ejemplo, si el usuario está trabajando con la página Default.aspx (web forms) y hace clic en un botón de la página, la devuelve al servidor con un destino de Default.aspx. 5. En el servidor Web, la página se ejecuta de nuevo. La información que el usuario escribió o seleccionó está disponible para la página. 6. La página realiza el procesamiento que tiene programado hacer. 7. La página se representa a sí misma en el explorador. Este ciclo continúa durante el tiempo que el usuario esté trabajando en la página. Cada vez que el usuario hace clic en un botón, la información de la página se 12 Cátedra: Programación II manda al servidor Web y la página se ejecuta de nuevo. Cada ciclo se conoce como acción de ida y vuelta. Dado que el procesamiento de páginas se realiza en el servidor Web, cada acción que la página puede hacer requiere un recorrido de ida y vuelta al servidor. Una página 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 validación de la entrada del usuario y para algunos tipos de programación de la interfaz de usuario. Crear Sitio y página web ASP.NET Las páginas Web ASP.NET proporcionan la interfaz de usuario para sus aplicaciones Web ASP.NET o también 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 también en forma independiente Para crear un sitio Web de sistema de archivos 1. Abra Visual Web Developer o el Visual Studio 2. En la Página de Inicio haga clic en Crear Sitio Web o en el menú Archivo, haga clic en Nuevo sitio Web. Aparecerá el cuadro de diálogo 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 aplicación Web que contiene diferentes archivos y carpetas. En este caso crea los archivos: App_Data: Contiene los archivos de datos de la aplicación. web.config: Contiene la configuración del Sitio. Default.aspx: Página web vacia. Default.aspx.vb: Código de la página web en este caso en el lenguaje Visual Basic. 13 Cátedra: Programación II 4. En el cuadro Ubicación, seleccione el cuadro Sistema de archivos y escriba el nombre de la carpeta en la que desea conservar las páginas del sitio Web. Por ejemplo, escriba el nombre de carpeta C:\BasicWebSite. Especifica el tipo de aplicación Web que se desea crear o abrir. El tipo de ubicación que seleccione determinará el formato de la ubicación en el cuadro Ubicación. Los tipos de ubicación incluyen: Sistema de archivos Una aplicación Web en una carpeta del equipo local. Los archivos no están asociados a un servidor, una aplicación de Internet Information Services (IIS). HTTP Una aplicación Web de IIS en un equipo local o remoto. Los archivos se almacenan bajo la raíz de la aplicación Web. Si se crea una aplicación local mediante HTTP, IIS debe estar instalado en el equipo. Si se crea una aplicación 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/MiAplicaciónWeb o http://servidorLocal/MiAplicaciónWeb FTP Una aplicación Web a la que es posible conectarse utilizando las credenciales del Protocolo de transferencia de archivos (FTP). Deben proporcionarse credenciales para establecer conexión con el servidor FTP y tener permisos de lectura y escritura en la ubicación FTP. Ejemplo: ftp://servidorFtp/MiAplicaciónWeb. 5. En la lista Lenguaje, seleccione Visual Basic o Visual C#. El lenguaje de programación que ha elegido será el lenguaje predeterminado del sitio Web. Sin embargo, puede utilizar varios lenguajes en la misma aplicación Web mediante la creación de páginas y componentes en lenguajes de programación diferentes. 6. Haga clic en Aceptar. Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx. Cuando se crea una nueva página, Visual Web Developer la muestra de manera predeterminada en la vista Código fuente, que permite ver los elementos HTML de la página. La captura de pantalla siguiente muestra la vista Código fuente de una página Web predeterminada. 14 Cátedra: Programación II Crear una nueva página Web o de formularios Web Forms Cuando se crea un nuevo sitio Web, Visual Web Developer agrega una página ASP.NET (página de formularios Web Forms) denominada Default.aspx. Puede utilizar la página Default.aspx como página principal del sitio Web. En este caso crearemos una nueva página. Para agregar una página al sitio Web 1. Cierre la página Default.aspx. Para ello, haga clic con el botón secundario en la ficha que contiene el nombre de archivo y seleccione Cerrar. 2. En el Explorador de soluciones, haga clic con el botón secundario en el sitio Web, (por ejemplo, C:\BasicWebSite) y, a continuación, 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 diálogo Agregar nuevo elemento. 4. En el cuadro Nombre, escriba el nombre de la nueva página. 5. En la lista Lenguaje, elija el lenguaje de programación 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 página o un componente nuevo para el sitio Web, se puede utilizar un lenguaje diferente del predeterminado. Puede utilizar diferentes lenguajes de programación en el mismo sitio Web. 6. La casilla Colocar el código en un archivo independiente, si la desactivamos, creará una página de un solo archivo con el código y el texto HTML en la misma página. El código de las páginas ASP.NET se puede encontrar en la página o en un archivo independiente. 7. Seleccionar la página principal, esta casilla se utiliza si creamos una Página Maestra o Principal para la aplicación, que nos permite tener partes de las páginas con el mismo diseño e información y una parte modificable dentro de cada página. 8. Haga clic en Agregar. Visual Web Developer crea la nueva página y la abre en la vista Código fuente. 15 Cátedra: Programación II Para agregar texto a la página 1. En la parte inferior de la ventana de documento, haga clic en la ficha Diseño para pasar a la vista Diseño. La vista Diseño muestra la página en la que se está trabajando en modo WYSIWYG. En este punto, no hay texto ni controles en la página, por lo que está en blanco. 2. En la página, escribir un texto. 3. De la vista Diseño pasamos a Dividir. Puede ver el código HTML que ha creado escribiendo en la vista Diseño, como se muestra en la captura de pantalla siguiente. Ejecutar la página Para ejecutar una página, necesita un servidor Web. En un sitio Web de producción, se utiliza IIS como servidor Web. Sin embargo, para probar una página 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 página 1. Presione CTRL+F5 para ejecutar la página o presione F5 para depurar y ejecutar o también 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 ejecución: 16 Cátedra: Programación II La página se muestra en el explorador. Aunque la página creada tiene una extensión .aspx, se ejecuta como cualquier página HTML. 2. Cierre el explorador. Si el explorador genera un error que indica que la página 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 Configuración 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 página un control Button, otro TextBox y otro Label, y se escribe código para controlar el evento Click del control Button. Ahora agregará controles a la página. Los controles, entre los que se incluyen botones, etiquetas, cuadros de texto y otros controles familiares, proporcionan las funciones típicas de procesamiento de formularios para las páginas Web ASP.NET. Sin embargo, puede programar los controles con código que se ejecuta en el servidor, no el cliente. El control Button es un botón que se utiliza para ejecutar un comando o realizar una acción en el servidor, cuando el usuario hace click sobre el botón, se dispara el evento click y se realiza una acción mediante programación. 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 ubicación establecida de la página, a diferencia de texto estático se puede personalizar el texto que se muestra. Para agregar controles a la página 1. Haga clic en la ficha Diseño para cambiar a la vista Diseño. 2. Presione MAYÚS+ENTRAR varias veces para dejar espacio. 3. En el Cuadro de herramientas, en el grupo Estándar, arrastre tres controles a la página: un control TextBox, otro Button y otro Label. 4. Coloque el punto de inserción sobre el control TextBox y, a continuación, escriba Ingrese su Nombre:. Este texto HTML estático es el título del control TextBox. Puede mezclar HTML estático y controles en la misma página. La pantalla siguiente muestra cómo aparecen los tres controles en la vista Diseño. 17 Cátedra: Programación II Establecer las propiedades de los controles Visual Web Developer ofrece distintas maneras de establecer las propiedades de los controles de la página. En esta parte, establecerá propiedades en las vistas Diseño y Código fuente. Para establecer las propiedades de los controles 1. Seleccione el control Button y, a continuación, en la ventana Propiedades, establezca Text en Mostrar Nombre, se muestra como queda el control en la vista diseño en la captura de pantalla siguiente. 2. Cambie a la vista Código fuente. La vista Código fuente muestra el código HTML de la página, incluidos los elementos que Visual Web Developer ha creado para los controles. Los controles se declaran utilizando sintaxis de tipo HTML, con la excepción 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 están dentro de un elemento <form>, que también 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 página. El código que se encuentra fuera de los elementos <form runat="server"> y <script runat="server"> se envía como marcado o código de cliente al explorador; este es el motivo por el que el código ASP.NET debe estar dentro de un elemento cuya etiqueta de apertura contiene el atributo runat="server". 18 Cátedra: Programación II 3. Coloque el punto de inserción en un espacio dentro de la etiqueta <asp:label> y, a continuación, presione la BARRA ESPACIADORA. Aparece una lista desplegable que muestra las propiedades que se pueden establecer para un control Label. Esta característica, denominada IntelliSense, ayuda en la vista Código fuente con la sintaxis de los controles de servidor, los elementos HTML y otros elementos de la página. 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 continuación, escriba un signo igual (=). IntelliSense muestra una lista de colores. 5. Seleccione un color para el texto del control Label. 19 Cátedra: Programación II 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 código 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 botón predeterminado 1. Cambie a la vista Diseño. 2. Haga doble clic en el control Button. Visual Web Developer cambia a la vista Código 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 botón de manera que tenga el aspecto mostrado en el ejemplo de código siguiente. 20 Cátedra: Programación II Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = TextBox1.Text & ", Bienvenido a Visual Web Developer!" End Sub 5. Desplácese 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 botón al método controlador que codificó en el paso 4. Los métodos 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 método de la página. Ejecutar la página Ahora puede probar los controles de servidor en la página. Para ejecutar la página 1. Presione CTRL+F5 para ejecutar la página en el explorador. La página 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 botón. El nombre especificado se muestra en el control Label. Tenga en cuenta que cuando se hace clic en el botón, la página se publica en el servidor Web. ASP.NET vuelve a crear la página, ejecuta el código (en este caso, se ejecuta el controlador de eventos Click del control Button) y envía la nueva página al explorador. Si observa la barra de estado del explorador, puede ver que la página realiza un viaje de ida y vuelta al servidor Web cada vez que se hace clic en el botón. 3. En el explorador, vea el código fuente de la página que está ejecutando. En el código fuente de la página, sólo se ve HTML ordinario; no se ven los elementos <asp:> con los que ha trabajado en la vista Código fuente. Cuando la página se ejecuta, ASP.NET procesa los controles de servidor y representa en la página 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">. 4. Cierre el explorador. Trabajar con controles adicionales En esta parte veremos el control Calendar, que muestra las fechas mes por mes. El control Calendar es más complejo que los controles de botón, 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 página y le daremos formato. Para agregar un control Calendar 1. En Visual Web Developer, cambie a la vista Diseño. 2. Desde la sección Estándar del Cuadro de herramientas, arrastre un control Calendar hasta la página. Aparece el panel de etiquetas inteligentes del calendario. El panel muestra comandos que ayudan a realizar las tareas más comunes del control seleccionado. La captura de pantalla siguiente muestra cómo se representa el control Calendar en la vista Diseño. 21 Cátedra: Programación II 3. En el panel de etiquetas inteligentes, elija Formato automático. Se muestra el cuadro de diálogo Formato automático, que permite seleccionar un esquema de formato para el calendario. 4. En la lista Seleccionar esquema, seleccione Simple y, a continuación, haga clic en Aceptar. 5. Cambie a la vista Código fuente. Puede ver el elemento <asp:Calendar>. Este elemento es mucho más largo que los elementos de los controles sencillos creados anteriormente. También incluye subelementos, como <WeekEndDayStyle>, que representa las distintas configuraciones de formato. La captura de pantalla siguiente muestra el control Calendar en la vista Código fuente. Programar el control Calendar En esta sección, programará el control Calendar para que muestre la fecha actualmente seleccionada. Para programar el control Calendar 1. En vista Diseño, haga doble clic en el control Calendar. Un nuevo controlador de eventos se crea en la vista Código fuente. 2. Complete el controlador de eventos SelectionChanged con el código resaltado siguiente. 22 Cátedra: Programación II Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = Calendar1.SelectedDate.ToLongDateString End Sub Ejecutar la página Ya puede probar el calendario. Para ejecutar la página 1. Presione CTRL+F5 para ejecutar la página 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 código fuente de la página. El control Calendar se ha representado en la página como una tabla, con cada día como un elemento <td> que contiene un elemento <a>. 4. Cierre el explorador. Exploración de sitios Web En cualquier sitio que no tenga un número muy reducido de páginas puede resultar difícil crear un sistema de navegación que permita a los usuarios desplazarse libremente por las páginas, sobre todo si se realizan cambios en el sitio. La función de navegación de sitios de ASP.NET permite crear un mapa centralizado de las páginas del sitio. Puede utilizar las características de exploración 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 páginas, puede resultar complicado administrar todos los vínculos. La exploración del sitio de ASP.NET permite almacenar los vínculos de todas las páginas en una ubicación central y representar estos vínculos en listas o menús de desplazamiento en cada página incluyendo un control de servidor Web específico. Con la exploración del sitio de ASP.NET, puede crear una solución de exploración consistente y fácil de administrar para el sitio. La exploración del sitio de ASP.NET cuenta con las características siguientes: Mapas del sitio Puede utilizar un mapa del sitio para describir la estructura lógica de su sitio. A continuación, puede administrar la exploración de la página modificando el mapa del sitio cuando se agregan o se eliminan páginas en lugar de modificar los hipervínculos en todas las páginas Web. Controles ASP.NET Puede utilizar estos controles para mostrar los menús de exploración en las páginas Web. Los menús de exploración se basan en el mapa del sitio. Control de programación Puede utilizar la exploración del sitio de ASP.NET en el código para crear controles de exploración personalizados o modificar la ubicación de la información que se muestra en un menú de desplazamiento. Reglas de acceso Puede configurar reglas de acceso que muestren u oculten un vínculo en el menú de desplazamiento. Crear un mapa del sitio Para la navegación del sitio, necesita un medio de describir la disposición de las páginas en el sitio. El método predeterminado consiste en crear un archivo .xml que contenga la jerarquía del sitio, incluidos los títulos de las páginas y las direcciones URL. 23 Cátedra: Programación II La estructura del archivo .xml refleja la estructura del sitio. Cada página se representa como un elemento siteMapNode en el mapa del sitio. El nodo de nivel superior representa la página principal y los nodos secundarios representan páginas que se encuentran en un nivel más profundo en el sitio. Nuestra estructura de Páginas es: Inicio Docentes Cátedras Carreras Alumnos Exámenes Descargas Para crear un mapa del sitio 1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Agregar nuevo elemento. 2. En el cuadro de diálogo Agregar nuevo elemento: a. En Plantillas instaladas de Visual Studio, haga clic en Mapa del sitio. b. En el cuadro Nombre, asegúrese de que el nombre es Web.sitemap. c. Haga clic en Agregar. Aparece una estructura vacía 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 ubicación dentro de la jerarquía XML. Las partes del siteMapNode son: Url es el nombre de la página que mostrará en caso de seleccionarla con un clik. Title es el título que aparecerá en la página para la navegación. Description es la descripción que muestra en la página cuando colocamos el Mouse sobre el título. Modificamos para agregar nuestra estructura de páginas. 24 Cátedra: Programación II 4. La dirección URL de las páginas que se definen en el archivo .xml de ejemplo es incompleta. Esto significa que todas las páginas se tratan como si tuvieran direcciones URL relativas a la raíz de la aplicación. Sin embargo, puede especificar cualquier URL para una página determinada: la estructura lógica que defina en el mapa del sitio no tiene por qué corresponder al diseño físico de las páginas en las carpetas. 5. Guarde el archivo y ciérrelo. 6. Crear las páginas que se describen en el mapa del sitio que definimos. Crear un menú de navegación con el control TreeView Ahora que tiene un mapa del sitio y las páginas, puede agregar funciones de navegación al sitio. Utilizará el control TreeView como menú de navegación contraíble. Este control se utiliza para mostrar datos jerárquicos, como una tabla de contenido o un directorio de archivo, en una estructura de árbol. Tiene compatibilidad con la exploración del sitio a través de la integración con el control SiteMapDataSource. Se puede agregar una casilla de verificación 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 imágenes para que se representen con el control en tiempo de ejecución. Especificar una imagen determinada y las propiedades de estilo que controlan las características que afectan al modo en que se muestran y se representan grupos específicos de objetos TreeNode incluidos en el control TreeView. Utilizar la característica Autoformato de Visual Studio para personalizar un conjunto de imágenes y las propiedades de estilo a la vez. Para agregar un menú de navegación de tipo árbol 1. Abra la página Inicio.aspx. 2. Desde el Cuadro de herramientas, arrastre a la página un control SiteMapDataSource del grupo Datos. En su configuración predeterminada, el control SiteMapDataSource recupera la información que necesita del archivo Web.sitemap que creó anteriormente, por lo que no tendrá que especificar información adicional para el control. 3. Arrastre un control TreeView desde el grupo Navegación del Cuadro de herramientas hasta la página. 4. En el menú Tareas de Treeview, en el cuadro Elegir origen de datos, haga clic en SiteMapDataSource1. 25 Cátedra: Programación II 5. Guarde la página. 6. Pruebe la página. En el estado actual del sitio Web, el menú de navegación sólo aparece en la página principal (Inicio). Puede agregar los mismos controles SiteMapDataSource y TreeView a cada página de la aplicación para mostrar un menú de navegación en cada página. Sin embargo, veremos más adelante cómo colocar el menú de navegación en una página principal de modo que el menú de navegación aparezca automáticamente con todas las páginas. Mostrar el historial de navegación con el control SiteMapPath Además de crear un menú de navegación mediante el control TreeView, en cada página puede agregar funciones de navegación que muestren dónde se encuentra la página en la jerarquía actual. Este tipo de control de navegación también se conoce como ruta de exploración. ASP.NET proporciona el control SiteMapPath que puede implementar automáticamente funciones de navegación de páginas. Ofrece un medio económico desde el punto de vista del espacio para navegar rápidamente por un sitio y sirve como punto de referencia para determinar en qué lugar del sitio se encuentra la página que se muestra. Para que se muestre el historial de navegación 1. Abra la página Docentes.aspx y cambie a la vista Diseño. 2. Desde el grupo Navegación del Cuadro de herramientas, arrastre un control SiteMapPath hasta la página, coloque el cursor delante del control SiteMapPath y, a continuación, presione ENTRAR para crear una nueva línea. El control SiteMapPath muestra la posición de la página actual en la jerarquía de las páginas. De forma predeterminada, el control SiteMapPath representa la jerarquía que se crea en el archivo Web.sitemap. Por ejemplo, cuando muestra la página Docentess.aspx, el control SiteMapPath muestra la ruta de acceso siguiente: Inicio > Docentes 3. Se puede repetir este procedimiento para las otras páginas, excepto la página principal (Inicio). Todos los nombres de página que muestra el control SiteMapPath son vínculos, excepto el último, que representa la página actual. Puede convertir el nodo actual en un vínculo si establece la propiedad RenderCurrentNodeAsLink del control SiteMapPath en true. 26 Cátedra: Programación II El control SiteMapPath permite a los usuarios retroceder a niveles superiores de la jerarquía, pero no saltar a una página que no se encuentre en la ruta de la jerarquía actual. Crear un menú de navegación con el control Menu Además de crear un menú de navegación mediante el control TreeView, puede utilizar el control Menú para que se muestre un menú de navegación 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 presentación: estática y dinámica. La presentación estática implica que un parte o la totalidad de la estructura del Menú siempre esté visible. Un menú totalmente estático muestra la estructura de menú completa y un usuario puede hacer clic en cualquier parte del mismo. La presentación dinámica 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 sólo cuando el usuario mantiene el puntero encima de un nodo primario. Para controlar la apariencia de la parte estática 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 dinámica del menú, puede utilizar las propiedades de estilo cuyos nombres contienen la palabra "Dynamic": DynamicMenuStyle DynamicMenuItemStyle DynamicSelectedStyle DynamicHoverStyle Otro método 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 navegación de tipo menú 1. Abra la página Alumnos.aspx y cambie a la vista Diseño. 2. Arrastre un control Menu desde el grupo Navegación del Cuadro de herramientas hasta la página. 27 Cátedra: Programación II 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 Configuración de orígenes de datos, haga clic en Mapa del sitio y, a continuación, 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 tuviéramos estos datos podríamos utilizar dentro de Tareas del Menú la opción Editar elementos del menú para generar la estructura del menú. 5. Guarde la página. 6. Esta lista la página con sistema de navegación. 28 Cátedra: Programación II Páginas principales o Maestras ASP.NET en Visual Web Developer En esta sección veremos como crear una página principal y varias páginas de contenido. Las páginas principales permiten crear un diseño de página (una plantilla) y, a continuación, crear páginas independientes con contenido que se combina con la página principal en tiempo de ejecución. Crear la página principal La página principal es la plantilla que define la apariencia que tendrán las páginas. En esta sección, creará primero una página principal. A continuación, utilizará una tabla para diseñar la página principal con un menú, un logotipo y un pie que aparecerán en todas las páginas del sitio. También trabajará con un marcador de posición de contenido, que es un área de la página que se puede reemplazar por información en una página de contenido. Para crear la página principal 1. Primero debemos crear un sitio Web como vimos anteriormente. 2. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, seleccione Agregar nuevo elemento. 3. En Plantillas instaladas de Visual Studio, haga clic en Página principal. 4. En el cuadro Nombre, escriba PagMae. 5. Active la casilla Colocar el código en un archivo independiente. 6. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar y, a continuación, haga clic en Agregar. En la nueva página principal vayamos a la vista Código fuente. En la parte superior de la página hay una declaración @ Master en lugar de la declaración @ Page que normalmente se encuentra en la parte superior de las páginas ASP.NET. El cuerpo de la página contiene un control ContentPlaceHolder, que es el área de la página maestra donde se combinará el contenido reemplazable de las páginas en tiempo de ejecución. Diseñar la página principal La página principal define la apariencia de las páginas del sitio. Puede contener cualquier combinación de texto estático y controles. Una página principal también contiene uno o más marcadores de posición de contenido que indican dónde aparecerá el contenido dinámico cuando se muestren las páginas. Utilizaremos una tabla como ayuda para colocar los elementos en la página. Empezaremos por crear una tabla de diseño para alojar los elementos de la página principal. Para crear una tabla de diseño para la página principal 1. Con el archivo PagMae.master seleccionado en la vista Código fuente, definimos el esquema de destino para la validación 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 continuación, hacer clic en Validación. 2. Cambie a la vista Diseño. 3. En la lista desplegable de la parte superior de la ventana Propiedades, seleccione DOCUMENTO y, a continuación, establezca la propiedad BgColor en un color distintivo, por ejemplo azul. El color que selecciona no es importante. 29 Cátedra: Programación II Haga clic en la página donde desea colocar la tabla de diseño, no se debe colocar en el control ContentPlaceHolder. 4. En el menú Tabla, haga clic en Insertar tabla. 5. En el cuadro de diálogo Insertar tabla cree una tabla con tres filas y una columna y, a continuación, 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 diálogo Dividir celdas, seleccione Dividir en columnas y, a continuación, haga clic en Aceptar. 9. Configure las opciones siguientes: En la fila central, haga clic en la columna situada más a la izquierda y, a continuación, establezca su Ancho (Width) en 48 en la ventana Propiedades. Haga clic en la fila superior y, a continuación, establezca su Alto (Height) en 48 en la ventana Propiedades. Haga clic en la fila inferior y, a continuación, establezca su Alto en 48 en la ventana Propiedades. Para establecer el alto y ancho se puede hacer también 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. Después de diseñar la tabla, puede agregar el contenido a la página principal que aparecerá en todas las páginas. Agregará un mensaje de copyright como pie de página y, a continuación, un menú. Si tiene un gráfico de logotipo disponible, también puede agregarlo. Para agregar contenido estático a la página principal 1. Haga clic en la celda inferior y, a continuación, escriba el texto del pie de página, por ejemplo Copyright 2009 Chamigo Inc. 2. En el Cuadro de herramientas, arrastre un control Menú desde el grupo de controles Navegación hasta la celda superior. 3. Cree un menú siguiendo estos pasos: a. Establezca la propiedad orientación (Orientation) del control Menú en Horizontal, asume cuando colocamos el control en la página 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 diálogo Tareas de menú. 4. En Elementos, haga clic tres veces en el icono Agregar un nodo raíz para agregar tres elementos de menú: a. Haga clic en el primer nodo y, a continuación, establezca Text en Inicio y NavigateUrl en Inicio.aspx. b. Haga clic en el segundo nodo y, a continuación, establezca Text en Docentes y NavigateUrl en Docentes.aspx. 30 Cátedra: Programación II c. Haga clic en el Tercer nodo y, a continuación, establezca Text en Alumnos y NavigateUrl en Alumnos.aspx. d. Haga clic en Docentes y en el icono Agregar un elemento secundario, a continuación, establezca Text en Cátedras y NavigateUrl en Cátedras.aspx. e. Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de elementos de menú. 5. Si tiene un archivo gráfico disponible para utilizarlo como logotipo, siga estos pasos para colocarlo en la página principal: a. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, seleccione Agregar elemento existente. b. Navegue a su archivo gráfico, selecciónelo y, a continuación, haga clic en Agregar. c. En el Cuadro de herramientas, arrastre un control Image desde el grupo Estándar hasta la columna central izquierda de la tabla. d. Establezca la propiedad ImageUrl del control Image en el nombre del archivo gráfico. Ahora puede colocar el marcador de posición de contenido para especificar dónde puede mostrar contenido la página principal en tiempo de ejecución. Para agregar un marcador de posición 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, anótelo porque necesitará recordarlo más adelante. 2. Guarde la página. Crear contenido para la página principal 31 Cátedra: Programación II La página principal proporciona la plantilla para el contenido. El contenido de la página principal se define creando una página ASP.NET que se asocia a la página principal. La página de contenido es un formulario especializado de una página ASP.NET que incluye sólo el contenido que se va a combinar con la página principal. En la página de contenido, agregará el texto y los controles que desee mostrar cuando los usuarios soliciten la página. Para crear la página de inicio 1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, 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 programación con el que prefiera trabajar. 5. Active la casilla Seleccionar la página principal y, a continuación, haga clic en Agregar. Aparece el cuadro de diálogo Seleccionar la página principal. 6. Haga clic en PagMae.master y en Aceptar. Se crea un nuevo archivo .aspx. La página contiene una directiva @ Page que asocia la página actual a la página principal seleccionada con el atributo MasterPageFile. La página también contiene un elemento de control Content con el que trabajará luego. Una página de contenido no tiene los elementos usuales que constituyen una página ASP.NET, como html, body o form. En su lugar, el contenido que se desea mostrar en la página principal se agrega reemplazando las áreas de marcador de posición creadas en dicha página. Para agregar contenido a la página de inicio 1. Cambie a la vista Diseño. Los controles ContentPlaceHolder de la página maestra se muestran como controles Content en la nueva página de contenido. Se muestra el resto del contenido de la página maestra para que pueda ver el diseño. Sin embargo, parece atenuado porque no puede cambiarlo mientras está editando una página de contenido. 2. En la lista desplegable de la ventana Propiedades, haga clic en DOCUMENTO y, a continuación, establezca Título en Inicio Chamigo. Puede establecer el título de cada página de contenido de forma independiente a fin de que se muestre el título correcto en el explorador cuando el contenido se combine con la página principal. La información del título se almacena en la directiva @ Page de la página de contenido. 3. En el control Content que coincide con ContentPlaceHolder1 en la página maestra, escriba Bienvenido al sitio web de Chamigo. 4. Seleccione el texto y, a continuación, asígnele 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 línea en blanco en el control Content y, a continuación, escriba cualquier texto. El texto que agrega aquí no es importante; puede escribir cualquier texto que le ayude a reconocer que es la página de inicio. 6. Guarde la página. Hacer lo mismo con las otras páginas. 32 Cátedra: Programación II Puede probar las páginas ejecutándolas tal como haría con cualquier página ASP.NET. Antes de probar en el Explorador de Soluciones seleccionar la página Inicio.aspx haga clic con el botón secundario del Mouse y nuevamente haga clic en Establecer como página de inicio. 33 Cátedra: Programación II Publicar un sitio Web Veremos la utilidad de publicación de sitios Web de la herramienta de desarrollo Web de Microsoft Visual Web Developer para compilar un sitio Web y, a continuación, copiar el resultado en un sitio Web activo. Si desea implementar un sitio Web terminado en un servidor, puede usar la utilidad de publicación de sitios Web de la herramienta de desarrollo Web de Microsoft Visual Web Developer. La utilidad de publicación de sitios Web realiza una compilación previa de las páginas y el código del sitio Web y escribe el resultado del compilador en una carpeta especificada por el usuario. A continuación, se puede copiar el resultado en el servidor Web de destino y ejecutar la aplicación desde allí. La utilidad de publicación 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 publicación de un sitio Web. Puede publicar el sitio Web en cualquier ubicación a la que tenga acceso en el equipo local o en una red en que se use uno protocolo de conexión 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, también puede hacer clic con el botón 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 diálogo Publicar sitio Web. 34 Cátedra: Programación II Ubicación de destino Especifica la ruta de acceso de los resultados del proceso de precompilación. Los resultados de la precompilación se escriben en la carpeta especificada, sobrescribiendo (sin advertencia) todo el contenido en esa ubicación. Puede especificar una ruta de acceso FTP, ruta de acceso HTTP o una ubicación de unidad física. Permitir que este sitio precompilado se actualice Especifica que el contenido de las páginas .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 código HTML después de precompilar el sitio Web. La activación de esta casilla equivale a agregar la opción -u al comando aspnet_compiler.exe. Usar nombres fijos y ensamblados de página únicos Especifica que las generaciones por lotes estará desactivada durante la precompilación para que se generen ensamblados con nombres fijos. Los archivos de máscaras y temas seguirán compilándose en un solo ensamblado. Esta opción no está disponible para la compilación 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. Después de activar esta casilla, puede hacer lo siguiente: Especificar la ubicación 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 públicas y, a continuación, con un archivo de claves privadas que se especifique más adelante durante una llamada al comando aspnet_compiler.exe. Especificar la ubicación de un contenedor de claves del proveedor de servicios criptográficos (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 código de confianza parcial llame a los ensamblados con nombre seguro. Sin esta declaración, sólo el código de plena confianza puede utilizar esos ensamblados. Si selecciona esta opción, puede comprometer la seguridad del ensamblado generado. 2. En el cuadro Ubicación de destino, escriba c:\CompiledSite. 3. También podría publicar en un recurso compartido UNC. Si deseara publicar en un sitio Web remoto mediante HTTP o FTP, debería especificar la dirección URL del servidor remoto en el cuadro Ubicación de destino. 4. La opción Permitir que este sitio precompilado se actualice especifica que todo el código del programa se compila en ensamblados, pero que los archivos .aspx (incluidas las páginas 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 compilación, se crea un informe en la ventana Resultados. 6. Si se producen errores durante la publicación, corríjalos y, a continuación, repita el paso 1. 35 Cátedra: Programación II 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, desplácese 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 página .aspx. Observe que el archivo no contiene el marcado que había originalmente en el archivo. En lugar de ello, la página .aspx es sólo un marcador de posición que se puede utilizar como parte de una dirección URL. 3. Desplácese a la carpeta Bin. La carpeta contiene dos tipos de archivos: Archivos .compiled, que corresponden a las páginas. Archivos .dll, que contienen el código 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 botón secundario en el nombre de la carpeta de destino y, a continuación, haga clic en Compartir y seguridad. b. En la ficha Uso compartido de Web, haga clic en Compartir esta carpeta. Aparecerá el cuadro de diálogo 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 páginas ASP.NET. d. Haga clic en Aceptar para cerrar el cuadro de diálogo Modificar alias y, a continuación, haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades. 2. Abra el explorador y escriba la dirección URL siguiente: http://localhost/CompiledSite/Inicio.aspx Aparece la página. Sin embargo, esta vez verá la versión de la página creada por el precompilador para su implementación. Copiar un sitio Web mediante la herramienta Copiar sitio Web Trabajaremos con un sitio Web compartido y uno local, igual que lo haría en un entorno de producción. Un escenario típico sería que el sitio Web compartido estuviera en otro servidor, como por ejemplo, un servidor de ensayo o de producción. Cuando desee trabajar en el sitio, cree una versión 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. También veremos cómo sería trabajar en un entorno con más de un desarrollador. Si hubiera otros desarrolladores trabajando en el sitio, también podrían 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 36 Cátedra: Programación II haría en un entorno de producción 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 desearía obtener todos los archivos del sitio Web compartido y después los copiaría 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 botón 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 diálogo Abrir sitio Web. 37 Cátedra: Programación II 3. Haga clic en Sistema de archivos. 4. En el cuadro Carpeta, escriba C:\SitioWebCompartido. Si el sitio compartido estuviera en otro equipo, escribiría la dirección URL del servidor. 5. Haga clic en Abrir. Los archivos del sitio compartido se muestran en Sitio Web remoto. Muchos de los archivos tienen símbolos junto a ellos que indican su estado. Si sincroniza los sitios, el símbolo de flecha indica la dirección en que se copia el archivo Actualmente, los archivos Alumnos.aspx, Carreras.aspx, etc. en la lista Sitio Web remoto señalan a la lista Sitio Web de origen, porque si sincroniza los sitios Web, los archivos se copiarán desde el sitio compartido al sitio local. Los archivos Default.aspx tienen signos de interrogación (?) junto a ellos. Esto indica que el archivo tiene el mismo nombre en los dos sitios, pero tiene datos timestamp diferentes y ninguna información sobre la última vez que se copiaron los archivos. 38 Cátedra: Programación II 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 más actuales de los archivos del sitio Web. Al haber creado un nuevo sitio local, no es necesario que copie ningún archivo del sitio local al compartido. 7. Haga clic en el botón de flecha izquierda para copiar los archivos seleccionados del sitio compartido al sitio local. El botón de flecha izquierda no tiene etiqueta a menos que pase el puntero por encima, en cuyo caso aparece una información 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 diálogo 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 específicos. 39 Cátedra: Programación II Sincronizar sitios Web En el proceso de sincronización se copia la versión más actual de cada archivo de manera que los dos sitios Web tengan las mismas copias de todos los archivos. Utilice la sincronización si es posible que otra persona también actualice los archivos del sitio Web compartido. Elegir una herramienta de implementación La elección de la herramienta Copiar sitio web o de la utilidad Publicar sitio web depende de cómo desee utilizar y mantener el sitio. Elegir la herramienta Copiar sitio Web A continuación se indican las ventajas de la herramienta Copiar sitio web: La implementación supone simplemente copiar los archivos desde el sitio web al equipo de destino. Puede implementar en un equipo de destino utilizando cualquier protocolo de conexión 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. También es posible realizar cambios o corregir errores en las páginas directamente en el servidor. Si trabaja en un proyecto donde los archivos se almacenan en un servidor centralizado, puede utilizar la característica de sincronización para asegurarse de que las versiones local y remota de los archivos están sincronizadas. A continuación se indican los inconvenientes de la herramienta Copiar sitio web: El sitio se copia tal cual. Por lo tanto, si algún archivo contiene un error de compilación, el error no se detectará hasta que alguien (quizá un usuario) ejecute la página en la que existe el error. Elegir la utilidad Publicar sitio Web A continuación se indican las ventajas de la utilidad Publicar sitio web: El proceso de precompilación ayuda a encontrar errores de compilación y posibles errores en el archivo Web.config y en otros archivos que no son de código. El código 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 más protegido y resulta más difícil que otros usuarios tengan acceso al código fuente del sitio. Como las páginas del sitio ya están compiladas, no necesitan compilarse dinámicamente cuando se solicitan por primera vez. Esto puede reducir el tiempo de respuesta inicial para una página. (Cuando se compilan las páginas dinámicamente, el resultado se almacena en la memoria caché para las solicitudes posteriores.) A continuación se indican los inconvenientes de la utilidad Publicar sitio web: En función de las opciones de publicación que especifique, es posible que deba volver a compilar el sitio si realiza cambios en él. Por tanto, puede que no resulte práctico emplear la utilidad Publicar sitio web si desarrolla un sitio y cambia las páginas con frecuencia. La utilidad Publicar sitio web no puede implementar el sitio compilado en un servidor remoto. Sólo puede copiar en el equipo local o en otro equipo de la red de área local. 40 Cátedra: Programación II Depurar páginas Web en Visual Web Developer Visual Web Developer proporciona herramientas de ayuda para localizar errores en páginas Web ASP.NET. Trabajaremos con el depurador, que le permite recorrer línea por línea el código de la página y examinar los valores de las variables. Crearemos una página Web que contiene una calculadora simple que eleva un número al cuadrado. Después de crear la página (que incluirá un error deliberado) utilizará el depurador para examinar su ejecución. Comenzaremos creando un sitio web y agregando una nueva página que no tenga el código en forma independiente. Ahora puede agregar controles a la página y, a continuación, agregar el código. El código será simple, pero deberá permitirle agregar después puntos de interrupción. Para agregar controles y código para la depuración 1. Cambie a la vista Diseño y, desde la carpeta Estándar del Cuadro de herramientas, arrastre los siguientes controles a la página y establezca las propiedades correspondientes tal como se indica: Control Propiedades Label Id.: CaptionLabel Text: (vacío) TextBox Id.: NumeroTextBox Text: (vacío) Button Id.: CuadradoButton Text: Cuadrado Label Id.: ResultadoLabel Text: (vacío) 2. Haga doble clic en el control Button para crear un controlador Click asociado. 3. Agregue lógica al controlador Click para llamar a una función denominada Cuadrado a fin de elevar al cuadrado el número escrito por el usuario. El controlador podría tener una apariencia similar a la del ejemplo que se muestra a continuación. Protected Sub CuadradoButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim numero, resultado As Integer numero = CInt(NumeroTextBox.Text) resultado = Cuadrado(numero) ResultadoLabel.Text = "El Cuadrado de " & CStr(numero) & " es " & CStr(resultado) End Sub CInt: es una función que devuelve un entero. CStr: es una función que devuelve un string. 4. Cree la función que eleva el número al cuadrado. Incluya un error en el código de modo que el número se sume a sí mismo, en lugar de multiplicarse. 41 Cátedra: Programación II El código podría tener una apariencia similar a la del ejemplo que se muestra a continuación. <script runat="server"> Function Cuadrado(ByVal numero As Integer) As Integer Cuadrado = numero + numero End Function También puede agregar a la página código que cambie el texto de la etiqueta si es la primera vez que se ejecuta la página. Para cambiar el título del control Label 1. En la vista Diseño, haga doble clic en la superficie de diseño (no en un control) para crear un controlador de eventos Page_Load (cuando se carga la página). 2. Establezca el texto del control Caption Label como Escriba un número: si es la primera vez que se ejecuta la página, o como Escriba otro número: si no es la primera vez. El controlador tendrá una apariencia similar a la del ejemplo de código que se muestra a continuación. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If Page.IsPostBack = False Then CaptionLabel.Text = "Ingrese un Número: " Else CaptionLabel.Text = "Ingrese otro Número: " End If End Sub Page.IsPostBack: es una propiedad que indica si la página se carga por una petición del cliente (no es la primera vez que se carga la página). Probar la página Para asegurarse de que la página funciona, ejecútela en su estado actual. Depurar la página Utilizaremos el depurador para examinar el código de la página línea por línea mientras se ejecuta, agregará puntos de interrupción al código y después ejecutará la página en modo de depuración. Empezará estableciendo los puntos de interrupción en el código. Un punto de interrupción es una línea en el código en la que se detiene la ejecución y se invoca al depurador. Para establecer puntos de interrupción 1. Cambie a la vista Código fuente. 2. Haga clic con el botón secundario del mouse en la línea que desee interrumpir la ejecución, elija Punto de interrupción y, a continuación, elija Insertar punto de interrupción. 3. Establezca punto de interrupción en el IF y en Cuadrado = … 4. No podemos establecer un punto de interrupción en la declaración de una variable 42 Cátedra: Programación II Cuando haya establecido al menos un punto de interrupción, podrá ejecutar el depurador. Para ejecutar el depurador 1. En el menú Depurar, elija Iniciar depuración (o presione F5) para ejecutar la página en modo de depuración. Si nunca ha ejecutado el depurador, es probable que la aplicación no esté configurada para admitir la depuración. De forma predeterminada, la depuración está desactivada en las aplicaciones por cuestiones de rendimiento (las páginas se ejecutan más lentamente en el depurador) y de seguridad. Visual Web Developer muestra un mensaje que indica lo que se debe hacer para habilitar la depuración. El modificador para habilitar la depuración se almacena como valor de configuración en el archivo Web.config, que mantiene distintas opciones de configuración específicas del sitio. Si el archivo Web.config no existe, Visual Web Developer lo creará y realizará la correspondiente configuración del depurador. Si ya existe el archivo Web.config pero no está habilitada la depuración, 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 depuración, haga clic en Aceptar para habilitar la depuración. En Visual Web Developer, el diseñador cambia al modo de depuración, en el que se muestran el código de la página y algunas ventanas del depurador. El depurador ejecuta la página línea por línea. Cuando el depurador llega a la línea en la que se encuentra el punto de interrupción, se detiene y resalta la línea. Dado que el punto de interrupción está en el controlador Page_Load, la página no ha finalizado todavía el procesamiento. El explorador está abierto, pero aún no se muestra la página. 3. En el menú Depurar, haga clic en Ventanas, haga clic en Inspección y, a continuación, haga clic en Inspección 1. Si esta utilizando el Visual Web Developer Express Edition el depurador presenta solo una ventana Inspección. 4. Con esta operación se abre una ventana Inspección, en la que puede especificar los valores de los que desea realizar un seguimiento. 43 Cátedra: Programación II 5. En el editor, haga clic con el botón secundario del mouse en la parte IsPostBack de la expresión Page.IsPostBack y, a continuación, haga clic en Agregar inspección. Con esta operación se agrega la expresión a la ventana Inspección 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 Inspección. 6. En el menú Depurar, elija Continuar para seguir con la ejecución o presione F5. El comando Continuar indica al depurador que continúe hasta que llegue al siguiente punto de interrupción. El controlador de eventos Page_Load finaliza el procesamiento y la página se muestra en el explorador. 7. Especifique el valor 2 en el cuadro de texto y haga clic en el botón Cuadrado. Se muestra de nuevo el depurador, con el punto de interrupción en la línea en el controlador Page_Load. En esta ocasión, la ventana Inspección 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 interrupción establecido. 9. En el menú Depurar, haga clic en Ventanas y, a continuación, haga clic en Variables locales. Con esta operación se abre la ventana Variables locales, en la que se muestran los valores de todas las variables y objetos de la línea que se está ejecutando que están en el ámbito. La ventana Variables locales proporciona un método alternativo para ver estos valores, con la ventaja de que no es necesario establecer explícitamente una inspección de los elementos, aunque con el inconveniente de que la ventana podría contener más información de la que desea ver simultáneamente. En la ventana Variables locales, verá que el valor de numero es 2 y que el valor de resultado es 0. 44 Cátedra: Programación II También 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 botón secundario del mouse en la línea de la variable numero y seleccione Editar valor. Edite el valor de la variable numero y cámbielo a 5. El valor 2 para la variable numero no permite una comprobación 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 función Cuadrado. El comando Paso a paso hace que el depurador ejecute una línea y después se detenga de nuevo. 12. Continúe el examen paso a paso; para ello, presione F8 hasta llegar a la siguiente línea de código. 13. El depurador recorre el código línea por línea. Cuando el depurador ejecuta la función Cuadrado, se puede utilizar la ventana Variables locales para comprobar los datos pasados a la función (numero) y el valor devuelto por la función (Cuadrado). 14. En el menú Depurar, haga clic en Ventanas y, a continuación, 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 expresión siguiente y presione Entrar. ? NumeroTextBox.Text 16. El signo de interrogación (?) es un operador de la ventana Inmediato que evalúa la expresión que lo sigue. En este ejemplo, va a evaluar la propiedad Text del control NumeroTextBox en la página. Puede evaluar cualquier 45 Cátedra: Programación II variable, propiedad de objeto o expresión que las combine, utilizando la misma sintaxis que utilizaría en el código. 17. En la ventana Inmediato, escriba lo siguiente y presione Entrar: NumeroTextBox.Text = “5” 18. Además de evaluar expresiones, la ventana Inmediato le permite cambiar variables o propiedades 19. Presione F5 para que continúe la ejecución del programa. Cuando aparece la página, muestra el resultado de pasar 5 a la función Cuadrado. Además, 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 función Cuadrado, cambie el operador "+" por el operador "*". Dado que el código no se está ejecutando (la página ha finalizado el procesamiento), se encuentra en modo de edición y puede realizar cambios permanentes. 3. Guardar la página. 4. En el menú Depurar, elija Eliminar todos los puntos de interrupción para que la página 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 botón. En esta ocasión, cuando ejecuta la página 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 sólo se aplicaban la última vez que se ejecutó la página. 7. Cierre el explorador para detener el depurador. Resumen Depurar Páginas Web Podemos definir Puntos de Interrupción (línea de código) donde se detendrá la ejecución con la depuración. Podemos abrir la ventana de Inspección para ver el valor de propiedades, variables, etc. Podemos abrir la ventana de Variables Locales para ver todas la variable de la línea que se esta ejecutando. 46 Cátedra: Programación II Podemos ejecutar procedimientos. Paso a Paso por instrucciones o por Podemos abrir la ventana de Inmediato que nos permite evaluar expresiones, ejecutar comandos. Validar los datos introducidos por el usuario en una página 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 cómo utilizar los controles validadores de ASP.NET para comprobar los datos proporcionados por el usuario en una página Web. Trabajará con controles que realizan todas las comprobaciones automáticamente, sin necesidad de código. También creará un validador que personalizará mediante código; de ese modo se ilustra cómo se puede agregar lógica al marco de trabajo de validación en la página. Finalmente, obtendrá información acerca de cómo se pueden validar condicionalmente los datos proporcionados por el usuario, de acuerdo con las opciones que elige éste en una página. En la página que va a crear se pedirá al usuario una dirección de correo electrónico, el número de personas para las que solicita reserva y una fecha preferida. La página también permite al usuario solicitar confirmación telefónica de la reserva. (La opción predeterminada para esta página, si se implementase, sería una confirmación por correo electrónico). Crearemos un sitio Web y una página en la que podrá trabajar con estilos. Para agregar controles y texto 1. Cambie a la vista Diseño. 2. Escriba un encabezado de página, como Enviar una reserva. 3. Desde el grupo Estándar del Cuadro de herramientas, arrastre los controles siguientes a la página y establezca sus propiedades tal como se indica. a. TextBox, ID: TextEmail b. TextBox, ID: TextNúmero 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 títulos. 5. Haga doble clic en el botón con el objeto de crear un controlador para su evento Click y, a continuación, agregue el código resaltado que se muestra a continuación: Protected Sub ButtonMandar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonMandar.Click If Page.IsValid Then LabelMensaje.Text = "Su reserva ha sido Procesada" End If End Sub IsValid indica si la validación de la página ha sido correcta. 6. El controlador del botón sólo muestra un mensaje; no realiza ningún procesamiento real. 47 Cátedra: Programación II 7. Cambie a la vista Diseño, haga doble clic en un área en blanco en la página para crear un controlador Page_Load y, a continuación, agregue el código resaltado que se muestra a continuación: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load LabelMensaje.Text = "" End Sub 8. Este código borra el mensaje que muestra la página después de la validación completa. Agregar validación básica Para su sistema de reservas imaginario, necesitará que se realicen las siguientes comprobaciones de validación: La dirección de correo electrónico es obligatoria y su formato tiene que ser correcto; por ejemplo, [email protected]. (Por lo general, no es viable comprobar si la dirección de correo electrónico es real; no obstante, sí se puede comprobar que se ajusta al modelo correspondiente a las direcciones de correo electrónico). También es necesario el número de personas, que debe ser un valor numérico. Se necesita la fecha preferida. Puede agregar todos estos criterios de validación mediante controles validadores, que se encargan de realizar las comprobaciones y muestran los errores automáticamente. Para agregar una validación básica 1. Cambie a la vista Diseño. Desde el grupo Validación del Cuadro de herramientas, arrastre un control RequiredFieldValidator y colóquelo 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: Dinámico. Especifica que el control sólo representa (y ocupa espacio en la página) si es necesario para mostrar un error. c. ErrorMessage: Se requiere la dirección de correo electrónico. Muestra texto en un resumen de error. d. Text: *. Para indicar que un campo es obligatorio, se suele utilizar como convención un signo en forma de estrella. Sólo se mostrará este texto en caso de error. e. ValidationGroup: GrupoValidar1. Al igual que ocurre con los botones de opción, 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 dirección de correo electrónico. 48 Cátedra: Programación II 4. Desde el grupo Validación del Cuadro de herramientas, arrastre un control RegularExpressionValidator y colóquelo junto al control RequiredFieldValidator recién agregado. 5. Establezca las siguientes propiedades del control RegularExpressionValidator: a. ControlToValidate; TextEmail. b. Display: Dinámico. c. ErrorMessage: La dirección de correo electrónico debe estar en el formato [email protected]. d. Text: Formato no válido. e. ValidationGroup: GrupoValidar1. 6. Con el control RegularExpressionValidator todavía seleccionado, haga clic en el botón de puntos suspensivos en el cuadro ValidationExpression de la ventana Propiedad. Las expresiones regulares constituyen un lenguaje que se puede utilizar para buscar con precisión modelos definidos en cadenas. En el control RegularExpressionValidator, defina una expresión regular para el modelo válido (en este caso, el modelo de una dirección de correo electrónico válida). 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 estándar, haga clic en Dirección de correo electrónico de Internet. La expresión regular para una dirección de correo electrónico se coloca en el cuadro Expresión de validación. 8. Haga clic en Aceptar para cerrar el cuadro de diálogo. 49 Cátedra: Programación II 9. Agregue otro control RequiredFieldValidator según las instrucciones de los pasos 1 a 3. Sin embargo, en esta ocasión deberá enlazarlo al cuadro de texto TextNúmero y establecer su propiedad ErrorMessage como Indique para cuántas personas es la reserva. 10. Desde el grupo Validación del Cuadro de herramientas, arrastre un control RangeValidator y colóquelo junto al control RequiredFieldValidator recién agregado. 11. Establezca las siguientes propiedades del control RangeValidator: a. ControlToValidate; TextNúmero. b. Display: Dinámico. c. ErrorMessage: Escriba un número entre 1 y 20 para indicar el número de personas para la reserva. d. MaximumValue: 20. e. MinimumValue: 1. f. Text: Escriba un número 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 numéricos y comprueba que el número introducido se encuentra entre los valores mínimo y máximo especificados. Probar la página Ahora puede probar los controles validadores que tiene hasta el momento. Para probar la validación básica 1. Presione CTRL+F5 para ejecutar la página. 2. Cuando la página aparece en el explorador, haga clic en el botón Enviar Solicitud. Se muestran varios errores de validación porque no ha rellenado algunos campos necesarios. Observe que se muestran los errores de validación inmediatamente. No se envía la página. De forma predeterminada, los controles validadores insertan ECMAScript de cliente (JavaScript) en la página para realizar una comprobación de validación en el explorador. Esto proporciona a los usuarios información instantánea sobre errores de validación; sin script de cliente, para la comprobación de errores de validación se necesitaría una acción de ida y vuelta al servidor, lo que en ocasiones podría resultar lento. De hecho, no es posible enviar la página hasta que se pasen todas las comprobaciones de validación en el cliente. (Como medida de 50 Cátedra: Programación II seguridad, se realiza de nuevo la misma comprobación de validación cuando se envía la página). 3. Compruebe la validación en el cuadro de texto TextEmail; para ello, escriba una dirección de correo electrónico no válida y, a continuación, repita la prueba con una dirección de correo electrónico válida, como la suya. 4. Compruebe que sólo se pueden escribir valores numéricos entre el 1 y el 20 en el cuadro de texto Número de personas para la reserva. 5. Cuando haya escrito los valores válidos, haga clic en el botón Enviar solicitud. Si la validación pasa todos los controles, verá el mensaje Se ha procesado su reserva. 6. Después de haber confirmado que esa validación funciona según lo previsto, cierre el explorador. Si la validación no funciona según lo previsto, asegúrese de que ha establecido todos los valores de configuración de propiedades enumerados anteriormente y después ejecute de nuevo la página. Formas alternativas de mostrar información 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 ubicación que tiene el control en la página. En ocasiones quizá desee que la información de los errores se muestre de otro modo. Los controles validadores de ASP.NET le proporcionan estas opciones adicionales: Resumir todos los errores de validación en un lugar. Puede hacerlo además de que se muestren los errores en contexto, o como alternativa a esa presentación. Si se muestran los resúmenes de error, también es posible mostrar mensajes de error más largos. Mostrar un mensaje emergente en el explorador con información de error. Esta opción solo funciona en exploradores habilitados para el uso de script. Puede agregar estas ValidationSummary. dos opciones de presentación con el control Para que se muestre información de validación de formas alternativas 1. Arrastre un control ValidationSummary desde el grupo Validación del Cuadro de herramientas hasta la página. 2. Establezca la propiedad ValidationGroup del control ValidationSummary como GrupoValidar1. 3. Ejecute la página. 4. Realice las mismas pruebas que realizó anteriormente. 51 Cátedra: Programación II Para cada error verá información 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 más largo (el valor de la propiedad ErrorMessage del control) se muestra en el control ValidationSummary. 5. Cierre el explorador. 6. Establezca la propiedad ShowMessageBox del control ValidationSummary en true, cada error produce un mensaje emergente en el explorador. 52 Cátedra: Programación II 7. Si no deseamos que además salga el mensaje en la página en el lugar del control ValidationSummary debemos cambiar la propiedad ShowSummary en False. 8. Ejecute la página. 9. Realice las mismas pruebas. En esta ocasión, cada error produce un mensaje emergente en el explorador. 10. Cierre el explorador. Agregar validación personalizada para comprobar la entrada de la fecha Entre los controles de validación de ASP.NET no se incluye ninguno que compruebe automáticamente la validez de la fecha. Sin embargo, puede utilizar el control CustomValidator con ese fin. El validador personalizado permite escribir código de validación propio para comprobar cualquier condición que necesite la aplicación. 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 código de validación personalizado. El primero es el código de validación personalizado que se ejecuta cuando se envía la página. Siempre debe tener lógica de validación de servidor para un control CustomValidator. También escribirá script de cliente (ECMAScript o JavaScript) que realizará una comprobación similar en el explorador para que el usuario tenga información inmediata. Para utilizar un control CustomValidator con el fin de comprobar una fecha válida 1. Desde el grupo Validación del Cuadro de herramientas, arrastre un control CustomValidator a la página y colóquelo junto al cuadro de texto TextFecha. 2. Establezca las siguientes propiedades del control CustomValidator: 53 Cátedra: Programación II 1. 2. 3. 4. 5. ControlToValidate; TextFecha. Display: Dinámico. ErrorMessage: Escriba una fecha en el formato dd/mm/aaaa. Text: Formato de fecha no válido (se requiere dd/mm/aaaa). ValidationGroup: GrupoValidar1. 3. Haga doble clic en el control CustomValidator con el objeto de crear un controlador para su evento ServerValidate y, a continuación, agregue el código resaltado que se muestra a continuación: Protected Sub CustomValidator1_ServerValidate (ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate Try DateTime.ParseExact(args.Value, "d", _ System.Globalization.DateTimeFormatInfo.CurrentInfo) args.IsValid = True Catch ex As Exception args.IsValid = False End Try End Sub 4. Este código se ejecuta cuando el usuario envía la página. El código interactúa con el control validador mediante el objeto ServerValidateEventArgs (args) pasado al controlador. El valor que el usuario ha especificado en el cuadro de texto TextFecha se pasa como la propiedad Value del objeto args. Después de haber comprobado que la entrada del usuario es válida, establezca la propiedad IsValid del objeto args en true o false. Si la establece en false, el validador mostrará su mensaje de error. 5. En este ejemplo, el código 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 válido (que no se ajusta a una fecha de formato dd/mm/aaaa), el método ParseExact del objeto DateTime produce una excepción y se ejecuta el bloque Catch. 6. En el controlador Button_Clik, agregue el código resaltado que se muestra a continuación: Protected Sub ButtonMandar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonMandar.Click If Page.IsValid Then LabelMensaje.Text = "Su reserva ha sido Procesada" Else LabelMensaje.Text = "La Página no es válida" End If 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 validación. La propiedad IsValid devuelve el estado acumulado de todos los controles validadores en la página. Esta propiedad se utiliza para asegurarse de que todas las comprobaciones de validación han pasado el procesamiento de servidor. 54 Cátedra: Programación II Ahora ha agregado el código de servidor para el control CustomValidator para comprobar la validez de una fecha. Como ya se ha visto anteriormente, los controles validadores también comprueban la entrada de un usuario mediante script de cliente. También puede agregar script de cliente al control CustomValidator. En realidad, escribirá script de cliente que duplica la lógica que aplica la validación de servidor. No siempre es viable escribir código de validación personalizado de cliente (por ejemplo, si el código personalizado valida una entrada del usuario mediante consulta en una base de datos de servidor). Sin embargo, en este caso puede crear código de cliente que realice esencialmente la misma comprobación que está realizando su código de servidor. Para agregar script de cliente al control CustomValidator 1. Abra o cambie a Default.aspx. 2. En el elemento <head> de la página, agregue el siguiente bloque de script de cliente: <script language="javascript"> function validaFecha(oSrc, args) { var iDay, iMonth, iYear; var arrValues; arrValues = args.Value.split("/"); iMonth = arrValues[1]; iDay = arrValues[0]; iYear = arrValues[2]; var testDate = new Date(iYear, iMonth - 1, iDay); if ((testDate.getDate() != iDay) || (testDate.getMonth() != iMonth - 1) || (testDate.getFullYear() != iYear)) { args.IsValid = false; return; } return true; }</script> 3. Este código es similar al de comprobación de validación de servidor, pero no tan estricto. La entrada del usuario se pasa a la función como la propiedad Value del objeto args, y se puede establecer la propiedad IsValid del objeto para indicar si el valor pasa la validación. En este ejemplo, el código comprueba que se han escrito fechas con un formato numérico válido. 4. Observe que el código para la validación personalizada es ligeramente diferente en el script de cliente que en el código de servidor. ECMAScript no proporciona exactamente la misma funcionalidad que en .NET Framework. Por 55 Cátedra: Programación II consiguiente, ECMAScript analiza el texto escrito en lugar del código ParseExact que se utiliza en el servidor para comprobar la fecha. Sin embargo, las dos comprobaciones de validación (cliente y servidor) son bastante parecidas para proporcionarle la funcionalidad que necesita. 5. Coloque el punto de inserción 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 función ECMAScript que ha creado. Ahora ha agregado una comprobación de validación personalizada que funciona primero en el script de cliente para comprobar la entrada del usuario inmediatamente y, después, cuando la página se envía al servidor. Ahora puede probar correctamente. que su validación personalizada está funcionando Agregar controles opcionales con validación condicional Agregaremos información opcional al formulario de reservas. Los usuarios pueden activar una casilla para indicar que desean confirmación telefónica de sus reservas. Si lo hacen, deben escribir su número de teléfono. Por consiguiente, la página contendrá dos controles adicionales: una casilla y un cuadro de texto. Como en el caso anterior, utilizará la validación para comprobar las entradas del usuario. Utilizará un control RequiredFieldValidator para asegurarse de que los usuarios escriben un número de teléfono, y un control RegularExpressionValidator para comprobar el formato. El número de teléfono es opcional; sólo tiene que comprobar el número de teléfono si el usuario ha activado la casilla Confirmo reserva por teléfono. Por lo tanto, escribirá código sencillo con el que se active o desactive la validación del número de teléfono en función del estado de la casilla. Para agregar una validación condicional 1. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control CheckBox a la página y establezca las propiedades siguientes: a. ID: chequeoTe b. AutoPostBack: True. Cuando el usuario haga clic en la casilla, la página realizará una acción de ida y vuelta y habilitará o no el cuadro de texto y la validación de éste. c. CausesValidation: False. No se producirá automáticamente la validación al hacer clic en CheckBox. d. Text: Confirme la reserva por teléfono. e. TextAlign: Left. Alinea el texto (Text) a la izquierda de la casilla. 2. Arrastre un control TextBox a la página, bajo el control CheckBox y establezca las propiedades siguientes: a. ID: númeroTe b. Enabled: False. No se habilitará el cuadro de texto hasta que el usuario haga clic en la casilla. 3. Escriba un texto como Número de teléfono: como un título junto al cuadro de texto correspondiente al número de teléfono. 4. Desde el grupo Validación del Cuadro de herramientas, arrastre un control RequiredFieldValidator a la página 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 código, por lo que resulta útil proporcionarle un ID. b. ControlToValidate: númeroTe. c. Display: Dinámico. 56 Cátedra: Programación II d. ErrorMessage: Debe proporcionar un número de teléfono. 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 página. Como consecuencia de ello, esta validador no se comprueba de forma predeterminada cuando se hace clic sobre el botón 5. Arrastre un control RegularExpressionValidator a la página y establezca las propiedades siguientes: a. ID: validadorExpresiónNuTe. b. ControlToValidate: númeroTe. c. Display: Dinámico. d. ErrorMessage: El formato del número de teléfono no es válido. e. Text: Formato no válido. f. ValidationExpresion: (usar el cuadro de diálogo Editor de Expresiones regulares para seleccionar Número de Teléfono en … u otra expresión para el número de teléfono. 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 continuación, agregue el código resaltado que se muestra a continuación: Protected Sub ChequeoTe_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ChequeoTe.CheckedChanged If ChequeoTe.Checked = True Then númeroTe.Enabled = True validadorRequiereNuTe.ValidationGroup = "GrupoValidar1" validadorExpresiónNuTe.ValidationGroup = "GrupoValidar1" Else númeroTe.Enabled = False validadorRequiereNuTe.ValidationGroup = "" validadorExpresiónNuTe.ValidationGroup = "" End If End Sub 57 Cátedra: Programación II 7. Cuando el usuario hace clic en la casilla, habilita el cuadro de texto para ingresar el número de teléfono control númeroTe y los dos controles validadores asociados al cuadro de texto se agregan al grupo de validación al que pertenecen los otros controles validadores. El efecto es que todos los validadores de la página, incluidos los del número de teléfono, se comprobarán cuando el usuario envíe la página. 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 botón Enviar solicitud. 8. Podemos probar la página. 58
