Manual de Introducci%F3n a Visual Web Developer 2005 Express.updated

Microsoft®

Visual Web Developer

™ 2005Express

Generar un sitio Web con

X1166132BDY.indb iX1166132BDY.indb i 16/12/05 16:00:4716/12/05 16:00:47

PUBLICADO PORMicrosoft PressUna división de Microsoft CorporationOne Microsoft WayRedmond, Washington 98052-6399

Copyright © 2006 por Microsoft Corporation

La información contenida en este documento, incluidas las direcciones URL y cualquier otra referencia a sitios Web de Internet, está sujeta a modifi caciones sin previo aviso. A menos que se indique lo contrario, los nombres de las compañías, organizaciones, productos, dominios, direcciones de correo electrónico, logotipos, personas, lugares y hechos mencionados son fi cticios. No se pretende indicar, ni debe deducirse ninguna asociación con ninguna compañía, organización, producto, dominio, dirección de correo electrónico, logotipo, persona, lugar o hecho reales. Es responsabilidad del usuario el cumplimiento de todas las leyes de derechos de autor aplicables. Sin limitación de los derechos protegidos por copyright, ninguna parte del presente documento podrá ser reproducida, almacenada o introducida en un sistema de recuperación, o bien transmitida en ninguna forma o medio (electrónico, mecánico, mediante fotocopia o grabación, etc.), ni con ningún propósito, sin la autorización expresa y por escrito de Microsoft Corporation.

Microsoft, Active Directory, FrontPage, Intellisense, Microsoft Press, MSDN, SharePoint, Visual Basic, Visual C#, Visual J#, Visual Studio, Visual Web Developer, Windows y Windows Server son marcas comerciales o registradas de Microsoft Corporation en Estados Unidos y/o en otros países.

Este libro expresa los puntos de vista y las opiniones del autor. La información contenida en este libro se proporciona sin ninguna garantía expresa, implícita o prevista por ley. Ni los autores ni Microsoft Corporation, sus revendedores o distribuidores serán responsables de ningún daño causado o que se alegue está causado directa o indirectamente por este libro.

Pieza nº X11-66132

X1166132BDY.indb iiX1166132BDY.indb ii 16/12/05 16:01:0516/12/05 16:01:05

Capítulo 1Introducción a Microsoft Visual Web Developer2005 Express 1

Qué cabe esperar de este libro 2Decidir si Visual Web Developer es el producto

adecuado para usted 3Lo que necesitará para probar 4Elegir un proveedor para su sitio Web público 5Tratar con archivos de imagen ISO 7Crear la interfaz de usuario 8

Capítulo 2Presentación del modelo de programaciónde ASP.NET 2.0 13

Seguir una página Web mediante ASP.NET 2.0 14Una jerarquía de controles 16Tratar con eventos 18Examinar el ciclo de vida de una página 19

Categorías de los controles de servidor ASP.NET 20

Contenido

iii

Capítulo 3Crear un nuevo sitio Web 23

Elegir dónde poner la copia de trabajo del sitio 24

Crear un sitio Web vacío 25Crear un sitio Web de sistema de archivos 25Crear un sitio Web de IIS local 27Crear un sitio Web de IIS remoto 29Crear un sitio Web accesible mediante FTP 31

Capítulo 4Abrir un sitio Web existente 35

Abrir un sitio Web utilizado recientemente 36Abrir un sitio Web arbitrario 37

Abrir un sitio Web de sistema de archivos 37Abrir un sitio Web de IIS local 38Abrir un sitio Web accesible mediante FTP 39Abrir un sitio Web remoto 40

Capítulo 5Copiar su sitio Web 45

Especificar los sitios Web de origen y remoto 46Seleccionar y copiar archivos 47

X1166132BDY.indb iiiX1166132BDY.indb iii 16/12/05 16:01:0616/12/05 16:01:06

iv Generar un sitio Web con Microsoft Visual Web Developer 2005 Express

Capítulo 6Crear y modificar páginas Web 51

Trabajar con vistas de páginas Web 53Agregar controles 54

Agregar controles desde el Cuadro de herramientas 54Agregar tablas y capas de la barra de menús 57Agregar controles desde el Explorador de soluciones 57

Establecer propiedades de controles 58Establecer propiedades con la ventana Propiedades 58Establecer propiedades con el mouse 61Establecer propiedades con etiquetas inteligentes 63Establecer propiedades con el menú Formato 63Establecer propiedades con barras de herramientas 64

Agregar o modificar hipervínculos 65

Capítulo 7Trabajar con código fuente 67

Utilizar el editor de texto 68Utilizar la esquematización 69Utilizar la vista dividida 71Utilizar Ir a, marcadores y la Lista de tareas 72Aprovechar IntelliSense 73Detectar errores sintácticos 76Buscar y reemplazar texto 77Dar formato al código fuente 80Buscar más comandos de edición 82

Almacenar, compilar y publicar código de programa 82

Capítulo 8Crear y utilizar controles de usuario Web 85

Crear y diseñar controles de usuario Web 86Agregar controles de usuario Web a una página 88Utilizar controles de usuario Web de manera eficaz 90

Descripción de las etiquetas de los controlesde usuario Web 90

Utilizar estilos CSS en controles de usuario Web 91Ajustar direcciones URL relativas 91Codificar atributos para controles de usuario Web 92

Capítulo 9Utilizar páginas principales para centralizar el diseño de página 95

Crear una página principal 96Aplicar páginas principales a páginas de contenido 100Utilizar páginas principales de manera eficaz 103

Examinar el interior de las páginas principales 104Modificar páginas existentes para utilizar

páginas principales 104Ajustar direcciones URL relativas 106Modificar información de encabezado 106

Capítulo 10Utilizar hojas de estilos en cascada 107

Dar formato a elementos de página individualmente 108Utilizar estilos con nombre en varias páginas 109

Crear un nuevo archivo de hoja de estilos 109Crear reglas de hoja de estilos 109Agregar propiedades a reglas de hoja de estilos 112Utilizar estilos compartidos en las páginas Web 113

X1166132BDY.indb ivX1166132BDY.indb iv 16/12/05 16:01:0716/12/05 16:01:07

Capítulo 11Controlar la apariencia con temas ASP.NET 115

Crear temas ASP.NET 116Agregar máscaras a un tema ASP.NET 116Agregar hojas de estilos CSS a un tema ASP.NET 119Aplicar temas a páginas y sitios 120

Capítulo 12Vincular las páginas de un sitio automáticamente 125

Crear un mapa para su sitio Web 126Crear menús desplegables y emergentes 131Crear menús de vista de árbol 133Proporcionar rastros 134

Capítulo 13Crear y conectarse a bases de datos 137

Administrar el acceso a datos 138Conectar con una base de datos existente 138Crear una nueva base de datos 142Agregar y modificar tablas de base de datos 143Ver y actualizar contenido de tablas de base de datos 146

Capítulo 14Mostrar información de base de datos 149

Utilizar orígenes de datos 150Configurar orígenes de datos 151Mostrar información de base de datos 155Configurar un control GridView 157

Tabla de contenido v

Capítulo 15Mantener información de base de datos 165

Utilizar un control GridView para actualizar y eliminar registros 166

Utilizar un control DetailsView para agregar registros 169

Capítulo 16Publicar su base de datos 173

Copiar una base de datos de SQL Server 174Entender y conectar con SQL Server 175

Utilizar cadenas de conexión 177Compartir una única copia de SQL Server 182Administrar servidores compartidos de SQL Server 182Instancias de servidor 182Instancias de usuario 183Asociar archivos de base de datos 184Descripción de los inicios de sesión 184Cómo Visual Web Developer utiliza SQL Server 185

Capítulo 17Controlar el acceso a su sitio 173

Configurar la seguridad de un sitio Web 188Agregar controles de inicio de sesión a su sitio 197Ocultar opciones de menú para páginas protegidas 201Publicar configuraciones de seguridad 203

Capítulo 18Mostrar elementos Web 205

Introducción a los controles y términos de elementos Web 206Crear su propia página de elementos Web 211

X1166132BDY.indb vX1166132BDY.indb v 16/12/05 16:01:0816/12/05 16:01:08

X1166132BDY.indb viX1166132BDY.indb vi 16/12/05 16:01:0916/12/05 16:01:09

Introducción vii

IntroducciónEnhorabuena por su interés en Microsoft Visual Web Developer 2005 Express. Este nuevo y apasionante software pone dos de las tecnologías más eficaces de Microsoft,ASP.NET 2.0 y Visual Studio 2005, al alcance de cualquiera que cree sitios Web.

Visual Web Developer es un subconjunto de Visual Studio 2005 totalmente funcional idóneo para crear y mantener una amplia gama de sitios Web a lo largo del tiempo. No es una versión de demostración recortada o de duración limitada. Se trata de una iniciativa clave de Microsoft para llevar la eficacia de Visual Studio y ASP.NET no sólo a los programadores profesionales, sino también a los aficionados y emprendedores.

A quién va dirigido este libroEste libro va dirigido principalmente a aquellas personas que ya han diseñado e implementado uno o dos sitios Web, pero creen que el proceso o las herramientas les supone una limitación. Por ejemplo, puede que hayan descubierto características como éstas difíciles de implementar:

■ Plantillas de página y segmentos de página confiables, reutilizables y activos.

■ Menús dinámicos, vistas de árbol expandibles o rastros fáciles de utilizar.

■ Formas rápidas, flexibles y sencillas de trabajar con bases de datos.

■ Acceso controlado a determinadas partes de un sitio, con o sin registro automático.

ASP.NET 2.0 integra controles que proporcionan estas características e incluso, en muchos casos, no requieren programación de código.

Además, puede agregar y configurar estos controles totalmente desde la interfaz gráfica de Visual Web Developer. Visual Web Developer, al igual que Visual Studio, tiene editores excelentes para el diseño gráfico y para trabajar con código de todo tipo. Sus características para trabajar con HTML, CSS y XML no son menos eficaces para sus características para trabajar con código de programa sofisticado.

Si éste es el tipo de eficacia que estaba anhelando, o si ya está preparado para pasar del antiguo ASP a ASP.NET y necesita empezar por algún sitio, éste es el libro que estaba buscando.

Cómo está organizado este libroEl libro consta de dieciocho capítulos. Aunque en cada capítulo se describe una tecnología o característica concreta, los ejercicios se basan en los conocimientos y los resultados obtenidos anteriormente en el libro. Por tanto, debe leer el material secuencialmente.

X1166132BDY.indb viiX1166132BDY.indb vii 16/12/05 16:01:1016/12/05 16:01:10

viii Generar un sitio Web con Microsoft Visual Web Developer 2005 Express

Convenciones y características de este libro

Este libro presenta la información utilizando unas convenciones diseñadas para conseguir que la información sea legible y fácil de seguir. Antes de comenzar el libro, lea la lista siguiente, donde se explican las convenciones que verá a lo largo del libro y se destacan las características útiles del libro que quizás desee utilizar.

Convenciones■ Cada ejercicio es una serie de tareas. Cada tarea se presenta como una serie de pasos

numerados (1, 2, etc.). Cada ejercicio va precedido por un título de procedimiento que le permite saber lo que hará en el ejercicio.

■ Las notas que tienen la etiqueta “Sugerencia” proporcionan información adicional o métodos alternativos para realizar un paso correctamente.

■ Las notas que tienen la etiqueta “Precaución” le alertan de cierta información que debe conocer antes de continuar.

■ El texto que escribe o los elementos que selecciona o en los que hace clic aparecen en negrita.

■ Los comandos de menú, los títulos de cuadros de diálogo y otros elementos de la interfaz de usuario aparecen con la primera letra en mayúsculas.

■ Un signo más (+) entre dos nombres de tecla significa que debe presionar esas teclas al mismo tiempo. Por ejemplo, “Presione Alt+Tab” significa que debe mantener presionada la tecla Alt mientras presiona la tecla Tab.

Otras características■ Las barras laterales sombreadas que aparecen en el libro ofrecen información más

detallada acerca del contenido. Las barras laterales pueden contener información general, sugerencias de diseño o características relacionadas con la información que se trata.

■ Cada capítulo termina con una sección En resumen… que repasa brevemente lo que ha aprendido en el capítulo actual y ofrece una descripción general del contenido del siguiente capítulo.

X1166132BDY.indb viiiX1166132BDY.indb viii 16/12/05 16:01:1216/12/05 16:01:12

Requisitos del sistemaNecesitará el hardware y el software siguiente para realizar los ejercicios del libro:

■ Microsoft Windows XP con el Service Pack 2, Microsoft Windows Server 2003 con el Service Pack 1 o Microsoft Windows 2000 con el Service Pack 4

■ Microsoft Visual Web Developer 2005 Express

■ PC con un procesador de tipo Pentium III a 600 MHz; se recomienda 1 GHz

■ 128 MB de RAM (se recomiendan 256 MB o más)

■ 16,4 MB de espacio en disco duro para los archivos de ejemplo

■ Monitor de vídeo (800 x 600 o mayor resolución) con 256 colores como mínimo (se recomienda 1024 x 768, color de alta densidad de 16 bits)

■ Unidad de CD-ROM o DVD-ROM

■ Microsoft Mouse o dispositivo señalador compatible

También necesitará acceso de administrador a su equipo para configurar SQL Server 2005 Express.

Obtener el sitio Web de ejemplo

Para obtener un sitio Web de ejemplo que incorpore los ejemplos, examine la página de contenido complementario del libro en la siguiente dirección:

http://www.microsoft.com/mspress/companion/0-7356-2212-4/

Para descargar e instalar este sitio, siga el procedimiento “Para obtener e instalar los archivos de ejemplo de este libro” del capítulo 1.

Ejecutar los ejercicios y el sitio Web de ejemplo

ASP.NET es una tecnología que se ejecuta principalmente en un servidor Web. Necesitará un servidor Web para probar y ejecutar los ejemplos de cada capítulo y, por supuesto, el sitio Web de ejemplo terminado.

Afortunadamente, Visual Web Developer incluye su propio Servidor Web de desarrollo integrado. Tanto en los ejercicios como en el sitio Web de ejemplo terminado se da por supuesto que utilizará este servidor. Por tanto, no es necesario instalar ni tener acceso a una copia completa de Internet Information Server (IIS).

El servidor Web integrado de Visual Web Developer sólo es accesible desde el equipo local. Cualquier servidor que entregue el sitio Web terminado necesitará una copia completa de IIS.

N O TA

Introducción ix

X1166132BDY.indb ixX1166132BDY.indb ix 16/12/05 16:01:1316/12/05 16:01:13

Los ejercicios de los capítulos 13 a 16 (y de los capítulos 17 y 18 del sitio complementario) requieren que SQL Server 2005 Express Edition (o SQL Server 2005) esté instalado en el mismo equipo que Visual Web Developer. Si instala el software desde el CD complementario, éste será el valor predeterminado. Como los ejercicios y el sitio Web de ejemplo utilizan una nueva característica de SQL Server 2005 denominada creación de instancias de usuario, no se requiere ninguna configuración especial de seguridad.

El código de ejemplo se desarrolló en un entorno en inglés y puede que no funcione en entornos localizados.

Quitar el sitio Web de ejemplo

Para quitar el sitio Web de ejemplo de su equipo, siga estos pasos:

1 En el Panel de control, abra Agregar o quitar programas.

2 En la lista Programas actualmente instalados, seleccione Generar un sitio Web con Microsoft Visual Web Developer 2005 Express!

3 Haga clic en Quitar.

4 Siga todas las demás instrucciones que aparecerán.

Software de versión preliminar

Este libro se ha revisado y probado con la versión Community Technical Preview (CTP) de agosto de 2005 de Visual Studio 2005. La versión CTP de agosto fue la última versión preliminar antes del lanzamiento final de Visual Studio 2005. Se espera que este libro sea totalmente compatible con la versión final de Visual Studio 2005. Si hay que realizar cambios o correcciones a este libro, se recopilarán y agregarán a un artículo de Microsoft Knowledge Base. Consulte la sección “Soporte técnico de este libro” de esta Introducción para obtener más información al respecto.

Aunque puede desarrollar sitios Web mediante SQL Server 2005 Express Edition, usted, su departamento de TI o su host necesitará una copia completa de SQL Server para ofrecer el sitio a los visitantes.

N O TA

x Generar un sitio Web con Microsoft Visual Web Developer 2005 Express

X1166132BDY.indb xX1166132BDY.indb x 16/12/05 16:01:1416/12/05 16:01:14

Actualizaciones de tecnología

A medida que se actualicen las tecnologías relacionadas con este libro, se agregarán vínculos a información adicional a la página Web Microsoft Press Technology Updates. Visite periódicamente esta página para ver si hay actualizaciones a Visual Studio 2005 y otras tecnologías.

http://www.microsoft.com/mspress/updates/

Soporte técnico para este libro

Se han hecho todos los esfuerzos posibles para garantizar la exactitud de este libro y del contenido complementario. A medida que se recopilen correcciones o cambios, se agregarán a un artículo de Microsoft Knowledge Base. Para ver la lista de correcciones conocidas para este libro, visite el artículo siguiente:

http://support.microsoft.com/kb/905041

Microsoft Press ofrece soporte técnico para los libros y el contenido complementario en el siguiente sitio Web:

http://www.microsoft.com/learning/support/books/

Preguntas y comentarios

Si tiene comentarios, preguntas o ideas sobre el libro o el contenido complementario, o preguntas para las que no hay respuesta visitando los sitios anteriores, envíelas por correo electrónico a Microsoft Press a

[email protected]

O por correo postal a

Microsoft PressAttn: Visual Web Developer 2005 Express Edition Build a Web Site Now EditorOne Microsoft WayRedmond, WA 98052-6399

Tenga en cuenta que Microsoft no ofrece soporte técnico de productos de software a través de estas direcciones.

Introducción xi

X1166132BDY.indb xiX1166132BDY.indb xi 16/12/05 16:01:1516/12/05 16:01:15

Acerca del autorJim Buyens

Jim Buyens lleva implicado profesionalmente con el World Wide Web desde su concepción y ha desempeñado funciones de administrador de servidor, administrador Web, desarrollador de contenido, desarrollador de sistemas y arquitecto de sistemas. Tiene muchos años de experiencia en el sector de las telecomunicaciones y también es un aclamado Microsoft Most Valuable Professional (MVP) que contribuye notablemente a las comunidades en línea de FrontPage de Microsoft.

Jim se licenció en Informática por la Purdue University en 1971 y realizó un Master of Business Administration (MBA) en la Arizona State University en 1992. Cuando no está mejorando el Web o escribiendo libros, le gusta viajar y asistir a eventos deportivos profesionales, especialmente de hockey. Reside con su familia en Phoenix.

Otros libros escritos por Jim Buyens:

■ Microsoft Windows SharePoint Services Inside Out, March, 2005, Microsoft Press

■ Microsoft Office FrontPage Version 2003 Inside Out, August, 2003, Microsoft Press

■ Faster Smarter Beginning Programming, November, 2002, Microsoft Press

■ Web Database Development Step by Step .NET Edition, June, 2002, Microsoft Press

■ Troubleshooting Microsoft FrontPage 2002, May, 2002, Microsoft Press

■ Microsoft FrontPage Version 2002 Inside Out, May, 2001, Microsoft Press

■ Web Database Development Step by Step, June, 2000, Microsoft Press

■ Running Microsoft FrontPage 2000, June, 1999, Microsoft Press

■ Stupid Web Tricks, July, 1998, Microsoft Press

■ Running Microsoft FrontPage 98, October, 1997, Microsoft Press

■ Building Net Sites with Windows NT—An Internet Services Handbook, July 1996, Addison-Wesley Developers Press

Dedicatoria

Este libro está dedicado a los sin techo con enfermedades mentales de América. ¿Por qué prodigamos tantos dólares a las víctimas de otras enfermedades menos debilitantes y condenamos a estos desgraciados a las calles y los cloacas?

xii Generar un sitio Web con Microsoft Visual Web Developer 2005 Express

X1166132BDY.indb xiiX1166132BDY.indb xii 16/12/05 16:01:1616/12/05 16:01:16

1

Capítulo 1Introducción a Microsoft® Visual Web Developer™ 2005 Express

Enhorabuena por su interés en Microsoft Visual Web Developer Express. Este software increíble hace que los desarrolladores Web aficionados, los entusiastas y los no profesionales empiecen fácilmente a utilizar Microsoft ASP.NET 2.0, la mejor tecnología del mundo para crear y ejecutar sitios Web.

¿Le asusta la idea de utilizar ASP.NET? Bueno, con la llegada de ASP.NET 2.0 ya no tiene por qué ser así. Si bien la versión 2.0 incorpora muchas mejoras destinadas principalmente a los programadores profesionales, también ofrece formas sencillas y elegantes de implementar algunas de las características más exigentes y populares del Web; todo ello sin una línea de código de programa. Por ejemplo, puede:

■ Crear menús dinámicos despegables o emergentes.

■ Rodear el contenido variable de cada página con contenido dinámico procedente de lo que se denomina una página principal.

■ Programar un mapa del sitio una vez, y utilizarlo para crear menús y rastros en cada página.

■ Consultar, crear, actualizar y eliminar registros de base de datos.

■ Bloquear partes del sitio, excepto a los visitantes registrados.

■ Permitir que los visitantes individuales personalicen la forma en que ven su sitio. Esto incluye no sólo la apariencia visual del sitio sino también, en la medida en que desee, el diseño y el contenido de determinadas páginas. 1

Qué cabe esperarde este libro, 2

Decidir si Visual Web Developer es el producto adecuado para usted, 3

Lo que necesitará para probar, 4

Elegir un proveedor para su sitio Web público, 5

Tratar con archivos de imagen ISO, 7

Crear la interfaz de usuario, 8

X1166132BDY.indb 1X1166132BDY.indb 1 16/12/05 16:01:1816/12/05 16:01:18

2 Generar un sitio Web con Microsoft Visual Web Developer 2005 Express

Aunque nada de esto requiere código de programa, sí que requiere agregar algunas etiquetas XML especiales a sus páginas Web. Pero incluso en esto, Microsoft pone las cosas fáciles. Con Visual Web Developer puede implementar muchas características de ASP.NET (normalmente las más difundidas) en una vista de diseño gráfico. Esto significa no ver código HTML, no ver extrañas etiquetas XML y no ver código de programa.

Por supuesto, si desea ver (o incluso escribir) código HTML, código XML o código de programa, Visual Web Developer ofrece formas excelentes de hacerlo. Como está basado en Microsoft Visual Studio® 2005, el mejor entorno para los programadores profesionales, Visual Web Developer Express incluye la mayor selección de editores de código, la más eficaz y la más fácil de utilizar que encontrará en ningún otro lugar. Y efectivamente; si inicia un proyecto en Visual Web Developer, puede seguir con él en productos como Microsoft Visual Basic® .NET Standard, Microsoft C# Standard o cualquiera de los productos completos de Visual Studio.

Qué cabe esperar de este libro En este libro se da por supuesto que ya está familiarizado con los fundamentos del World Wide Web y con algunas aplicaciones típicas para Windows como Microsoft Office. Por ejemplo, se supone que sabe crear páginas HTML normales (“planas”) y vincularlas a un sitio Web.

Incluso aunque Visual Web Developer es un subconjunto de Visual Studio 2005 (una herramienta de programación sofisticada), en el libro también se supone que no desea escribir su propio código HTML, XML o de programa. En su lugar, el libro explica cómo conseguir resultados profesionales de ASP.NET utilizando únicamente el editor gráfico de páginas Web.

Si desea escribir su propio código, puede tener la seguridad de que el libro le explicará cómo ver y modificar el código creado por la interfaz gráfica. No obstante, los detalles relativos al código que usted escriba correrán por su cuenta. Si desea aprender más acerca de los lenguajes de programación Visual Basic .NET, C# o J#, acerca de ASP.NET o acerca de .NET en general, tendrá que buscar otro libro diferente sobre el tema que desee o buscar la información en línea en http://msdn.microsoft.com.


Capítulo 1: Introducción a Microsoft Visual Web Developer 2005 Express 3

Por último, el libro se centrará en el uso de características nuevas de ASP.NET 2.0. Probablemente, éstas serán las características que más le atrajeron hacia Visual Web Developer. En cuanto a las características más antiguas, los procedimientos para utilizarlas serán más o menos los mismos que para las nuevas. Una vez que entienda cómo utilizar las nuevas características, el uso de las antiguas debe ser bastante intuitivo.

Decidir si Visual Web Developer es el producto adecuado para usted Microsoft ha diseñado Visual Web Developer específicamente para los programadores no profesionales que desean desarrollar sitios Web que utilicen las características de ASP.NET 2.0. Si se encuentra en esta situación, Visual Web Developer es el producto adecuado para usted.

Por supuesto, ningún producto puede ser el mejor para todas las personas y en todas las circustancias. He aquí algunas situaciones en las que otros productos podrían ser más adecuados:

■ En teoría, podría utilizar Visual Web Developer para crear sitios Web que no utilizaran ninguna característica de ASP.NET. Es decir, podría utilizarlo estrictamente como editor HTML. Sin embargo, esto supone renunciar a los puntos fuertes del producto. Si todolo que desea es un editor HTML, quizás prefiera un producto más sencillo dedicado a esa tarea.

■ En teoría, también podría utilizar Visual Web Developer para crear sitios Web ASP.NET 1.1. Sin embargo, sería difícil porque Visual Web Developer no le impedirá utilizar las nuevas características de ASP.NET 2.0. Si necesita generar sitios Web que utilicen ASP.NET 1.1, probablemente le resulte más sencillo utilizar Microsoft Visual Studio 2003 o Microsoft ASP.NET Web Matrix.

■ Visual Web Developer no puede crear aplicaciones de escritorio para Windows. Si necesita crear aplicaciones para Windows, obtenga la edición 2005 Express de Visual Basic, C#, C++ o J#, utilice la versión Standard de esos lenguajes o invierta en una versión completa de Visual Studio.

Información adicional Para aprender más acerca de ASP.NET 2.0, C#, Visual Basic .NET o SQL Server™ Express, consulte estos libros de Microsoft Press®:

■ Microsoft Visual C#® 2005 Express Edition: Build a Program Now!, de Patrice Pelland

■ Microsoft ASP.NET 2.0 Programming Step By Step, de George Shepherd

■ Microsoft Visual Basic 2005 Step by Step, de Michael Halvorson

■ Microsoft Visual C# 2005 Step by Step, de John Sharp

■ Developing Database Applications with Microsoft SQL Server 2005 Express Step by Step, de Jackie Goldstein



■ Es probable que los programadores profesionales y expertos necesiten las herramientas y las características avanzadas que proporcionan las versiones completas de Visual Studio. Por ejemplo, Microsoft Visual Studio 2005 Professional puede crear muchos más tipos de software, y Microsoft Visual Studio 2005 Team System dispone de características especiales que permiten que varios equipos de desarrolladores de software trabajen en el mismo proyecto.

Lo que necesitará para probar Si bien crea código HTML, CSS y JavaScript que se ejecuta en el explorador, ASP.NET es principalmente una tecnología de servidor. Hace lo siguiente:

1. Lee páginas Web y otros archivos del sistema de archivos del servidor Web.

2. Ejecuta código de programa para tener acceso a recursos del servidor y modificar la página Web actual.

3. Envía la página Web modificada al visitante.

Por tanto, para probar una página ASP.NET necesita realmente un servidor Web. Si tiene Microsoft Internet Information Server (IIS, el principal servidor Web de Microsoft) y ASP.NET 2.0 instalados en su PC, puede utilizar esos recursos para hacer pruebas. Pero si no los tiene, Visual Web Developer utilizará su propio miniservidor Web integrado. Visual Web Developer inicia este servidor Web la primera vez que explora o depura una página, y lo detiene cuando sale de Visual Web Developer.

Visual Web Developer es totalmente compatible con un único tipo de base de datos: Microsoft SQL Server. Si la perspectiva de utilizar SQL Server le da miedo, tenga en cuenta lo siguiente:

■ Visual Web Developer ofrece compatibilidad gráfica integrada para crear, ver, modificar y eliminar bases de datos, tablas y campos de SQL Server. Por tanto, puede realizar estas tareas sin utilizar programas externos como el Administrador corporativo de Microsoft SQL Server o Microsoft Access.

■ No necesita adquirir un ejemplar de SQL Server para su propio equipo. SQL Server 2005 Express es suficiente para desarrollar su sitio Web y es una descarga gratuita.



■ Microsoft ha hecho que las bases de datos de SQL Server sean tan fáciles de cargar como las bases de datos de Access. Toda la base de datos de SQL Server reside en un archivo (con una extensión .dbf) que puede cargar en el proveedor de alojamiento. En muchos casos, con sólo explorar su sitio Web se asociará la base de datos (es decir, quedará disponible) a la copia de SQL Server que atiende a su sitio. Los proveedores que no admiten esta característica pueden asociar inicialmente la base de datos por usted.

Elegir un proveedor para su sitio Web público Aunque Visual Web Developer incluye su propio servidor Web, y aunque SQL Server 2005 Express es perfectamente adecuado para el desarrollo y las pruebas, su sitio Web de producción necesitará copias completas de:

■ Microsoft Windows® 2000 Server o Microsoft Windows Server™ 2003.

■ IIS.

■ ASP.NET 2.0.

■ Microsoft SQL Server 2000 o Microsoft SQL Server 2005.

Si el proveedor de alojamiento actual no puede proporcionar todas estas capacidades, probablemente deberá buscar otro proveedor diferente. Para buscar un nuevo proveedor, consulte la página Hosters Providing ASP.NET en:

http://msdn.microsoft.com/asp.net/info/hosters/default.aspx

Los sitios siguientes también pueden resultar útiles a la hora de buscar un proveedor de alojamiento de ASP.NET 2.0:

■ Locate a Web Presence Provider (Microsoft FrontPage®)http://www.microsoft.com/office/frontpage/prodinfo/partner/wpp.asp

■ Windows Host List (Automation Tools, LLC)http://www.windowshostlist.com/hostlist.aspx

■ Web Hosting Resource and Directory (Affinity Internet Inc.)http://www.tophosts.com/

Qué es ASP.NET Web Matrix ASP.NET Web Matrix es una herramienta sin soporte técnico que Microsoft publicó para ayudar a los evaluadores, a los aficionados y a los entusiastas a empezar a generar aplicaciones ASP.NET 1.0 y 1.1. No tiene ninguna relación directa con ningún producto de Visual Studio.

Visual Web Developer, por el contrario, es miembro directo de la familia Visual Studio 2005. Por tanto, gran parte del soporte técnico, la atención y los consejos que encontrará para Visual Studio será también aplicable a Visual Web Developer.

Durante el desarrollo, Microsoft ha integrado muchas de las lecciones aprendidas, los comentarios y las principales características de ASP.NET Web Matrix en Visual Web Developer.



■ WHT Host Quote (WebHostingTalk.Com)http://www.webhostingtalk.com/request.php

Por supuesto, puede buscar un proveedor de alojamiento de la forma que desee. Microsoft va a trabajar con los proveedores de alojamiento de manera que todo desarrollador o empresa Web pueda permitirse un sitio Web ASP.NET 2.0 mejorado con SQL Server.

OBTENER E INSTALAR VISUAL WEB DEVELOPER

1 Si tiene un CD que contiene los archivos de instalación de Visual Web Developer, introdúzcalo en la unidad de CD y espere a que aparezca la pantalla de bienvenida. De lo contrario, vaya a http://msdn.

microsoft.com/downloads/, busque Visual Web Developer Express, descargue el programa de instalación y ejecútelo.

2 Recorra las pantallas habituales de información y de licencia del asistente para la instalación. Finalmente aparecerá una página Opciones de instalación como la que se muestra en la figura 1-1.

3 Las opciones de instalación pueden variar dependiendo de la versión

de Visual Web Developer que tenga y de otro software que haya instalado en su equipo. Teniendo esto en cuenta, utilice las instrucciones de la página siguiente para seleccionar las opciones que necesite:

4 Haga clic en el botón Siguiente para completar la instalación.

Figura 1-1 La página de inicio aparece al abrir Visual Web Developer.

Puede ejecutar cualquier combinación de aplicaciones HTML convencionales, ASP, ASP.NET 1.0, ASP.NET 1.1 y ASP.NET 2.0 en el mismo servidor Web virtual. Si una aplicación determinada no se está ejecutando en la versión de ASP.NET que desea, un administrador puede marcar la aplicación para que se ejecute en la versión correcta.

I M P O R TA N T E



Microsoft Visual J#® 2.0 Redistribuible instala el compilador y los archivos de compatibilidad para utilizar J#, la versión de Microsoft del lenguaje de programación Java.Si no piensa utilizar J#, puede desactivar esta opción.

Microsoft MSDN Express Library 2005 contiene gran cantidad de ayuda y otra información acerca de ASP.NET 2.0 y todos los productos Express. Casi seguro que debe instalar esta opción.

Microsoft SQL Server 2005 Express ofrece una versión limitada de SQL Server 2005 que puede utilizar para desarrollar su sitio Web. A menos que tenga (o que piense tener) una versión completa de SQL Server 2005 en ejecución en su PC, debe instalar esta opción.

Tratar con archivos de imagen ISO Si descarga cualquiera de los productos Visual Studio 2005 Express y recibe un archivo con una extensión .iso o .img, se trata de un archivo de imagen ISO. Esos archivos contienen la representación exacta de un CD o un DVD.

■ Para copiar un archivo de imagen ISO a un CD grabable, emplee una utilidad como ISORecorder, Nero o Roxio.

■ Para extraer una imagen ISO a una carpeta del disco, emplee una utilidad como ISObuster o DaemonTools.

■ Para asignar la imagen ISO a una letra de unidad no utilizada, utilice Virtual CD-ROM Control Panel for Windows XP. Para obtener una descarga gratuita de este software, consulte la página de P+F que se cita a continuación.

Para obtener más información acerca del uso de estos productos:

■ Vaya a la página MSDN® Subscriptions Frequently Asked Questions en http://msdn.microsoft.com/subscriptions/faq/default.aspx

■ Haga clic en MSDN Subscriber Downloads.

■ Haga clic en la pregunta “What are ISO image files and how do I use them?”



PARA OBTENER E INSTALAR LOS ARCHIVOS DE EJEMPLO DE ESTE LIBRO

En los ejemplos y ejercicios de este libro se emplea un sitio Web imaginario para Contoso Magic, una tienda de productos ilusorios para actuaciones de magos. Para instalar el sitio Web terminado y las bases de datos en su equipo:

1 Instale Visual Web Developer y una versión compatible de SQL Server como se indicaba

en la sección anterior.

2 Descargue el programa de instalación desde http://www.microsoft.com/mspress/

companion/0-7356-2212-4/.

3 Ejecute el programa de instalación descargado para instalar los archivos de ejemplo en Mis

documentos\Microsoft Press\Visual Web Developer. La carpeta Mis documentos suele residir en C:\Documents and Settings\<nombredeusuario>\Mis documentos.

4 Para abrir el sitio Web terminado para los capítulos 1-16, inicie Visual Web Developer, elija

Abrir sitio Web en el menú Archivo y especifique la ubicación del sitio como Mis documentos\Microsoft Press\Visual Web Developer\ContosoMagic.

Para abrir el sitio Web terminado para todo el libro (incluyendo los capítulos 17 y 18), especifique la ubicación del sitio como:Mis documentos\Microsoft Press\Visual Web Developer\ContosoMagic17

Crear la interfaz de usuario La primera vez que inicie Visual Web Developer, aparecerá una pantalla como la mostrada en la figura 1-2.

Como no hay ningún proyecto (es decir, ningún sitio Web) abierto, muchos de los marcos y controles están atenuados. No importa; he aquí un breve resumen de los que aparecen de manera predeterminada:

■ La barra de menús y las barras de herramientas funcionan exactamente como las de Microsoft Office y otros programas de Microsoft. Por supuesto, los comandos están adaptados al desarrollo de sitios Web, y no al procesamiento de textos o a las hojas de cálculo.

■ El marco Cuadro de herramientas de la izquierda contendrá objetos que puede arrastrar a una página Web abierta. Por supuesto, esto requiere que haya un proyecto y una página Web abiertos.

■ La Página de inicio del centro muestra una lista de proyectos abiertos recientemente, una lista de plantillas que puede utilizar para iniciar proyectos nuevos y algunos vínculos a páginas Web útiles del sitio Web de Microsoft.



■ El Explorador de soluciones de la derecha mostrará una lista de los archivos y las carpetas de un proyecto abierto.

■ Hay un marco Explorador de base de datos con fichas detrás del marco del Explorador de soluciones. Aquí es donde creará, modificará y eliminará bases de datos, tablas y campos.

■ El marco Propiedades mostrará una lista editable de propiedades disponibles y la configuración actual de cualquier objeto que seleccione mientras, por ejemplo, edita una página Web. La barra de menús, las barras de herramientas y todos los marcos se pueden acoplar.

Eso significa que puede arrastrarlos desde sus posiciones actuales a lo largo del borde de la ventana, aparcarlos en otro borde o dejarlos flotantes. De nuevo, es igual que los marcos acoplables de Microsoft Office.

En la figura 1-3 se muestra la apariencia de Visual Web Developer cuando hay un proyecto abierto. El cuadro de herramientas muestra ahora una selección de controles, el centro de la ventana muestra una página Web abierta preparada para su edición, el Explorador de soluciones muestra los archivos y las carpetas del proyecto, y el marco Propiedades muestra las propiedades y los valores del elemento actual (que resulta ser todo el documento).

Figura 1-2Al abrir un proyecto se revela todoel poder de Visual Web Developer.



La página de la figura utiliza estas características de ASP.NET 2.0:

■ Los bordes superior, izquierdo e inferior de la página Web están atenuados porque proceden de una página principal: es decir, de un archivo de plantilla que otras muchas páginas pueden incorporar para garantizar la uniformidad. En el capítulo 9 se explican las páginas principales. La página principal de la figura incluye estos elementos ASP.NET:

■ El área que muestra [Literal “litBannerTitle”] es un control Literal ASP.NET. Una línea de código de programa recupera el título de la página actual y lo copia al área donde reside este control. En el capítulo 9 se explica esta técnica.

■ Los elementos de menú Home, Products y Services

Figura 1-3Al abrir un proyecto se revela todo el poder de Visual Web Developer.

son las opciones de nivel superior de un menú emergente generado automáticamente a partir de un archivo de mapa del sitio. En el capítulo 12 se explican los menús y los archivos de mapa del sitio.

■ El control SiteMapDataSource brinda acceso al archivo de mapa del sitio como si fuera una base de datos. En el capítulo 12 también se explica esto.

■ El control [UserName] muestra el nombre del usuario que tiene iniciada sesión actualmente. El capítulo 17 contiene más información acerca de este control.

■ El control Login genera un vínculo a una página en la que los visitantes pueden iniciar sesión o registrarse automáticamente. En el capítulo 17 se explica cómo funciona.

■ El área que muestra Nodo raíz > Nodo primario > Nodo actual es un control SiteMapPath. Este control examina el archivo de mapa del sitio, busca la dirección URL de la página actual y muestra una serie de vínculos para volver a la página principal. Para obtener más información al respecto, consulte el capítulo 12.

■ El control titulado Content - Content1 (Custom) marca un área que la Página principal deja libre para el contenido de las páginas individuales. En el capítulo 12 se explica cómo funciona.



■ La frase “This is the Contoso Magic home page” es contenido variable único de la página Default.aspx.

Si este ejemplo parece demasiado controlado, con tanto contenido procedente de una página principal, tenga en cuenta que el diseñador elige que esto sea así. No es necesario utilizar páginas principales y tampoco es necesario utilizar ninguno de los demás controles que se muestran en la figura. Sin embargo, esta página ilustra las posibilidades que ASP.NET 2.0 ofrece a las personas que no son programadores. Tenga en cuenta lo siguiente: ■ El archivo de mapa del sitio consta de instrucciones XML sencillas, muy repetitivas, como

esta: <siteMapNode url=”default.aspx” title=”Home page” />

■ La página principal contiene una línea de código de programa, la que copia el título de la página al titular de página.

■ Aparte de estos dos elementos, puede crear toda esta página (o todo este sitio) sin salir de la interfaz gráfica de Visual Web Developer en ningún momento.

En resumen… Visual Web Developer es una herramienta eficaz con una interfaz gráfica sencilla que las personas que no son programadores y no tienen experiencia previa pueden utilizar para crear sitios Web ASP.NET 2.0.

En el capítulo 2 se explicarán los fundamentos de ASP.NET.


13

Capítulo 2Presentación del modelo de programación de ASP.NET 2.0

ASP.NET es un componente importante de la iniciativa global .NET de Microsoft. En comparación con otras tecnologías anteriores como páginas Active Server (ASP) de Microsoft® y PHP Hypertext Processor (PHP, Procesador de hipertexto PHP), ASP.NET es mucho más amplia, mucho más eficaz y mucho más robusta. Debido a estas mejoras presentes en ASP.NET, Microsoft ha designado páginas Active Server como una tecnología antigua que algún día desaparecerá.

En comparación con las versiones anteriores, ASP.NET 2.0 ofrece muchas mejoras tanto en cuanto a eficacia como a facilidad de uso. Sin embargo, todas las versiones de ASP.NET producen páginas Web de la misma forma aproximadamente. En la próxima sección se explica cómo funciona. En otra sección posterior se describirán los tipos básicos de componentes de software ASP.NET que puede agregar a una página Web.

Tenga en cuenta que este capítulo sólo es una breve introducción a estos temas. Se han escrito libros enteros sobre ellos. El material contenido en este capítulo sólo es suficiente para empezar a trabajar con Microsoft Visual Web Developer™.

Si hasta esta introducción le parece un poco abstracta o difícil, pase directamente al capítulo 3. Siempre puede volver atrás para consultar algo.2

Seguir una página Web mediante ASP.NET 2.0, 14

Categorías de los controles de servidor ASP.NET, 20



Seguir una página Web mediante ASP.NET 2.0 Generalmente, ASP.NET se ejecuta en un servidor Web. Cada vez que un visitante del Web solicita una página que tiene una extensión de archivo de ASP.NET, como .aspx, ASP.NET hace lo siguiente:

1. Carga la página solicitada en la memoria del servidor Web. 2. Ejecuta los componentes de software ASP.NET que contiene la página Web.

3. Envía la página resultante al visitante del Web.

Cuando carga una página Web en memoria, ASP.NET distingue entre dos tipos de contenido muy diferentes.

■ Las etiquetas HTML normales son sólo eso: código HTML normal. ASP.NET no hace nada con ellas, excepto almacenarlas y transmitirlas después “tal cual”. Por ejemplo, si su página contuviera esta etiqueta:

<img src=”images/mylogo.gif”>

ASP.NET enviaría <img src=”images/mylogo.gif”>

a los visitantes del Web. El servidor Web no cambia el código HTML normal.

■ Los controles de servidor ASP.NET son componentes de software que ASP.NET carga en memoria. Por ejemplo, la etiqueta siguiente indica a ASP.NET que debe cargar un control de servidor HtmlImage en memoria.

<img src=”images/mylogo.gif” id=”imgMyLogo” runat=”server” />

La diferencia más importante entre esta etiqueta y la anterior es el atributo runat=”server”, que indica a ASP.NET que debe crear un control de servidor en el servidor Web. Además: ■ El nombre de etiqueta (img en este caso) indica a ASP.NET qué tipo de control de

servidor debe crear.

■ El atributo id= proporciona un nombre al que otros controles de servidor de la misma página pueden hacer referencia.


Capítulo 2: Presentación del modelo de programación de ASP.NET 2.0 15

■ ASP.NET pasa el atributo src= (y cualquier otro que pueda estar presente) al control de servidor como datos de entrada.

■ La barra diagonal final satisface el requisito XML de una etiqueta de cierre. Una vez que ASP.NET termina de cargar un control de servidor, descarta el código XML

que lo creó. Cuando llega el momento de enviar la página al visitante, ASP.NET no envía la etiqueta XML original del control de servidor. En su lugar, llama a una función (o, hablando más correctamente, a un método) denominada Render que forma parte del control de servidor y, después, envía el resultado de ese método al visitante del Web.

Aunque todos los controles de servidor suministrados con ASP.NET 2.0 representan su resultado como código HTML, ASP.NET no impone ninguna restricción en cuanto al resultado del método Render de un control de servidor. El resultado no tiene por qué asemejarse a la etiqueta XML original y no tiene por qué ser código HTML. Por ejemplo, podría ser un archivo de imagen o un documento de Microsoft Word.

Para resumir el ciclo de vida de una página ASP.NET: 1. Un visitante solicita un archivo que tiene una extensión .aspx. 2. ASP.NET lee el archivo del sistema de archivos del servidor. 3. ASP.NET inspecciona todas las etiquetas del archivo y las carga en memoria.

■ Si la etiqueta contiene un atributo runat=”server”, ASP.NET carga un componente de software denominado control de servidor. El nombre de la etiqueta determina el tipo de control de servidor.

■ Las etiquetas que no tienen ningún atributo runat=”server” son etiquetas HTML normales. ASP.NET las carga en un componente de software que, en el momento apropiado, enviará la etiqueta original al visitante del Web de forma literal.

4. Después de cargar todas las etiquetas en memoria, ASP.NET ejecuta el código de programa designado dentro de cada control de servidor. Este código puede tener acceso a recursos del servidor Web, puede cambiar el contenido o las propiedades de cualquier control de servidor de la página e incluso puede agregar o quitar otros controles de servidor.

ASP.NET trata todas las etiquetas de los controles de servidor como XML y, por tanto, requiere que tengan etiquetas de cierre. Si no desea codificar una etiqueta de cierre explícita, como en <img src=”myphoto.jpg” runat=”server”></img>

incluya una barra diagonal delante del > de cierre, de la manera siguiente: <img src=”myphoto.jpg” runat=”server” />

S U G E R E N C I A

Cada control de servidor ASP.NET tiene un método Render.

N O TA



5. Cuando se termina de ejecutar todo el código de todos los controles de servidor (es decir, cuando toda la pila de controles de servidor finaliza) ASP.NET indica secuencialmente a cada control que se represente a sí mismo (es decir, que suministre el código HTML que el visitante debe recibir).

■ Si la etiqueta original era una etiqueta HTML normal, ASP.NET la envía sin realizar ninguna modificación.

■ Si la etiqueta original creaba un control de servidor, ASP.NET llama al método Render del control para generar el código HTML que el visitante del Web debe recibir.

6. Una vez que la página ha abandonado el servidor, ASP.NET libera sus controles de servidor y todos los demás recursos que pueda haber creado.

Una jerarquía de controles

Cuando ASP.NET carga controles de servidor en memoria, no los almacena como una lista “plana”. En su lugar, los almacena en un árbol jerárquico. Este método es bastante ingenioso e ilustra la eficacia de ASP.NET.

Cada control de servidor tiene una colección Controls capaz de almacenar otros controles de servidor adicionales. De hecho, la propia página ASP.NET es un control de servidor: un control de servidor Page. El control Page utiliza su colección Controls para almacenar una lista de controles de servidor adicionales. Cada uno de esos controles tiene su propia colección Controls que puede almacenar más controles de servidor y así sucesivamente.

Esta jerarquía de controles resulta útil en situaciones como la que se muestra en el código siguiente. Una etiqueta <table> contiene dos etiquetas <tr> y cada etiqueta <tr> contiene etiquetas <td>.

<table id=”tblPlenty” runat=”server”>

<tr id=”rowPlentyHeading” runat=”server”>

<td colspan=”3” id=”celPlentyTitle” runat=”server”></td>

</tr>

<tr id=”rowPlentyDetail” runat=”server”>

<td id=”celPlentyAmount” runat=”server”></td>

<td id=”celPlentyUnit” runat=”server”></td>

<td id=”celPlentyDescription” runat=”server”></td>

</tr>

</table>



Probablemente, todo este código estaría presente dentro de una página Web. La parte superior de la jerarquía sería por tanto un control Page. A partir de ese punto:

■ La colección Controls del control de servidor Page contendría el control de servidor HtmlTable denominado tblPlenty.

■ La colección Controls del control de servidor HtmlTable contendría dos controles de servidor HtmlTableRow: rowPlentyHeading y rowPlentyDetail.

■ El control de servidor HtmlTableRow denominado rowPlentyHeading tendría un elemento en su colección Controls: el control de servidor HtmlTableCell denominado celPlentyTitle.

■ El control de servidor HtmlTableRow denominado rowPlentyDetail tendría tres elementos en su colección Controls: los controles de servidor HtmlTableCell denominados celPlentyAmount, celPlentyUnit y celPlentyDescription.

Cuando ASP.NET pide a la página que se represente a sí misma:

■ El control Page indica a cada miembro de su colección Controls que se represente a sí mismo en el momento apropiado. En este ejemplo, el control Page diría al control de servidor tblPlenty que se representara a sí mismo.

■ Cada control (como tblPlenty) que tiene controles subordinados indica a esos subordinados que se representen a sí mismos. Por ejemplo, el control tblPlenty diría a los controles rowPlentyHeading y rowPlentyDetail que se representaran a sí mismos.

■ Del mismo modo, rowPlentyHeading diría al control celPlentyTitle que se representara a sí mismo y, finalmente, el control rowPlentyDetail indicaría a los controles celPlentyAmount, celPlentyUnit y celPlentyDescription que se representaran a sí mismos.

El código de programa puede manipular controles de servidor, crear otros nuevos y eliminar los que no sean apropiados para una solicitud determinada. Por ejemplo, después de recuperar una fila de una consulta de base de datos, el código de programa podría crear un objeto HtmlTableRow, anexar un objeto HtmlTableCell para mostrar cada campo de resultados y, después, anexar el objeto HtmlTableRow a la tabla existente.



Tratar con eventos

Los controles de servidor ASP.NET tienen una existencia efímera. Todo el ciclo de vida de leer, ejecutar y transmitir una página ASP.NET tan sólo consume unas fracciones de segundo: milisegundos o incluso menos.

No obstante, durante esa fracción de segundo, ASP.NET bombardea cada control de servidor con una serie de mensajes denominados eventos. Para cada evento, un control de servidor dado puede tener o no un controlador de eventos (que es una especie de función o subrutina) correspondiente. Si hay un controlador presente, ASP.NET lo ejecutará siempre que se produzca el evento correspondiente.

ASP.NET provoca hasta 30 eventos para cada control de servidor de una página. Afortunadamente, la mayoría de los programadores (incluso los avanzados) raramente tienen que preocuparse de todos estos eventos. En la tabla 2-1 se enumeran los eventos más utilizados por los desarrolladores Web.

Entre estos eventos, el evento OnLoad del objeto Page es probablemente el más útil. Este evento se produce cuando ASP.NET ha terminado de cargar en memoria todos los controles de servidor de la página, pero antes de que ASP.NET haya empezado a enviar la página Web al visitante. Éste suele ser el momento perfecto para realizar el procesamiento que requiera la página.

Algunos controles de servidor ASP.NET generan eventos de servidor como respuesta a acciones que tienen lugar en el explorador. Por ejemplo, haciendo clic en un botón o cambiando la selección de una lista desplegable puede: ■ Iniciar una solicitud al servidor Web. ■ Volver a ejecutar la misma página.

Tabla 2-1Eventos frecuentes de los controles de servidor

Evento Se produce cuando

OnInit ASP.NET inicializa el control de servidor.

OnLoad ASP.NET termina de cargar el control de servidor.

OnPreRender ASP.NET está preparado para empezar a pedir a los controles de servidor que se representen a sí mismos.

OnUnload ASP.NET está a punto de quitar el control de servidor de la memoria.



■ Provocar un evento especial que refleje el clic en el botón o el cambio de selección.

■ Ejecutar un controlador de eventos personalizado que realice el procesamiento que requiera el evento.

El hecho de que ASP.NET conecte cada evento importante del explorador con un controlador de eventos del servidor diferente es una función excelente. Realmente simplifica la tarea de asegurarse de que se ejecuta el código adecuado como respuesta a cada evento.

Examinar el ciclo de vida de una página

En esta sección se ha presentado el ciclo de vida de una página ASP.NET mientras pasa por el servidor Web. Reuniendo todos los detalles, así es como funciona:

■ ASP.NET recupera primero la página del sistema de archivos del servidor y la carga en memoria. Si una etiqueta contiene un atributo runat=”server”, ASP.NET carga un control de servidor correspondiente. De lo contrario, guarda la etiqueta como una etiqueta HTML normal y la pasa sin modificar nada.

■ El código de programa de los controles de servidor se ejecuta como respuesta a varios eventos, como Page Load y eventos de campos de formulario. Este código de programa puede tener acceso a recursos del servidor y cambiar las propiedades de los controles de servidor según sea necesario.

■ Cuando todos los controladores de eventos de los controles de servidor han terminado, ASP.NET pide a cada control que se represente a sí mismo y envía los resultados, por orden, al visitante del Web.

■ Las etiquetas HTML convencionales van al visitante sin que se realice ninguna modificación.

■ En el caso de los controles de servidor, ASP.NET no envía el código XML que cargó el control. En su lugar, el método Render del control genera el código HTML u otros datos que el visitante recibirá.

■ Una vez que ASP.NET ha enviado toda la página al visitante, abandona todos los objetos que representaron la página.



Categorías de los controles de servidor ASP.NET Como casi todo en esta vida, hay varias formas de organizar en categorías los controles de servidor ASP.NET. Tecnológicamente, las categorías son:

■ Controles Web personalizados: residen totalmente dentro de un archivo DLL. Por tanto, varios proyectos o sitios Web pueden utilizar una única copia del control. De esta forma se sabe casi con toda seguridad que se ejecuta el mismo código en todos esos proyectos. Sin embargo, para cambiar el control tiene que encontrar el código de programa original, cambiarlo, volver a compilarlo y reemplazar todas las copias del archivo DLL resultante.

■ Controles de usuario Web: constan de un archivo .ascx (que contiene un fragmento de código HTML) y archivos de código fuente o un archivo DLL. Cada proyecto o sitio Web que utiliza un control de usuario debe tener su propia copia de estos archivos. Esto hace que los controles de usuario sean más fáciles de desarrollar y modificar, pero más difícil de mantener sincronizados entre varios proyectos.

A efectos prácticos, si va a desarrollar un control de servidor ASP.NET para su uso en un proyecto o en un sitio Web, probablemente sea mejor desarrollar un control de usuario. Si va a desarrollar un control para su uso continuado en varios proyectos o para venderlo como un producto, probablemente la mejor elección sea un control personalizado.

ASP.NET proporciona una amplia selección de controles de servidor. Todos ellos son controles Web personalizados y pueden estar en dos categorías diferentes:

■ Controles de servidor HTML: duplican la sintaxis y la función de las etiquetas HTML tradicionales. Siempre que empiece con una etiqueta HTML tradicional y agregue runat=”server” estará creando un control de servidor HTML.

Los desarrolladores sin experiencia en ASP.NET suelen apreciar estos controles por su sintaxis conocida y porque los programas de diseño Web de propósito general, como Microsoft FrontPage®, pueden mostrarlos de forma precisa en modo de edición gráfica.

■ Controles de servidor Web: son más eficaces que los controles de servidor HTML, pero utilizan una sintaxis totalmente diferente.

¿Personaliza un control de usuario o utiliza un control personalizado?

Muchos desarrolladores sin experiencia tienen problemas para recordar los términos control Web personalizado y control de usuario Web. Para clarificar la distinción, recuerde lo siguiente:

■ Los controles Web personalizados resuelven las necesidades de muchos usuarios y residen en un único archivo DLL.

■ Los controles de usuario Web son más fáciles de crear y modificar para los desarrolladores (usuarios) Web individuales.

En el capítulo 8 se explicará cómo crear y utilizar sus propios controles de usuario Web.

V E A TA M B I É N



Por ejemplo, el código siguiente crea un control HtmlSelect que muestra una lista desplegable de continentes.

<select id=”selContinent” runat=”server”>

<option value=”AF”>Africa</option>

<option value=”AS”>Asia</option>

<option value=”AU”>Australia</option>

<option value=”EU”>Europe</option>

<option value=”NA”>North America</option>

<option value=”SA”>South America</option>

</select>

El bloque de código siguiente crea un control de servidor Web DropDownList que representa una lista desplegable idéntica.

<asp:DropDownList id=”ddlContinent” runat=”server”>

<asp:ListItem Value=”AF”>Africa</asp:ListItem>

<asp:ListItem Value=”AS”>Asia</asp:ListItem>

<asp:ListItem Value=”AU”>Australia</asp:ListItem>

<asp:ListItem Value=”EU”>Europe</asp:ListItem>

<asp:ListItem Value=”NA”>North America</asp:ListItem>

<asp:ListItem Value=”SA”>South America</asp:ListItem>

</asp:DropDownList>

¿Por qué utilizar entonces el control de servidor Web más complejo y que resulta menos familiar? Una razón frecuente es que sólo el control de servidor Web DropDownList puede generar eventos en el servidor. Por ejemplo, si agrega a la etiqueta anterior los atributos que se muestran debajo en color verde:

<asp:DropDownList id=”ddlContinent” AutoPostBack=”True”

OnSelectedIndexChanged=”ddlContinent_SelectedIndexChanged”

runat=”server”>



■ El atributo AutoPostBack=”True” indica al control que debe generar código de JavaScript que envíe inmediatamente la página al servidor Web siempre que el visitante seleccione un continente diferente.

■ El atributo OnSelectedIndexChanged indica al control que debe ejecutar un controlador de eventos denominado ddlContinent_SelectedIndexChanged siempre que la página salga del explorador y vuelva con un continente diferente seleccionado.

Ese controlador de eventos podría, por ejemplo, volver a cargar un segundo control de servidor DropDownList con los nombres de países del continente dado.

Los controles de servidor Web más eficaces no se parecen en nada a las etiquetas HTML convencionales. Crean calendarios en los que se puede hacer clic, menús desplegables o emergentes, mapas de sitios, rastros, botones de inicio de sesión, formularios de auto registro, y una amplia variedad de objetos adicionales ya escritos y muy útiles. No obstante, todos ellos se representan a sí mismos como código HTML normal y, por tanto, funcionan con cualquier explorador.

En el capítulo 8 se explicará cómo agregar y configurar controles de servidor HTML y controles de servidor Web en cualquier página ASP.NET.

S U G E R E N C I A

En resumen… ASP.NET ejecuta páginas Web cargándolas en memoria como una colección de segmentos HTML normales y controles de servidor. Después desencadena eventos en cada control de servidor, provocando la ejecución de las funciones o subrutinas (controladores de eventos) designadas. Por último, ASP.NET obtiene el código HTML del visitante llamando al método Render de cada control.

Hay dos tipos principales de control de servidor. Los controles de usuario Web son más fáciles de desarrollar, pero los controles Web personalizados son mejores para una amplia implementación.

ASP.NET incluye dos tipos de controles de servidor integrados. Los controles de servidor HTML se asemejan a las etiquetas HTML convencionales en cuanto a formato y función. Los controles de servidor Web requieren etiquetas que se parecen poco a las etiquetas HTML normales, pero ofrecen muchas funciones especializadas y envían código HTML normal al explorador. Tecnológicamente, tanto los controles de servidor HTML como los controles de servidor Web son controles Web personalizados.

En el próximo capítulo se explica cómo trabajar con el código de programa que su página ASP.NET requiere.


23

Elegir dónde poner la copia de trabajo del sitio, 24

Crear un sitio Web vacío, 25

Capítulo 3Crear un nuevo sitio Web

En Microsoft® Visual Web Developer™, como norma general, un sitio Web es un conjunto de páginas Web y los archivos asociados que piensa crear, implementar y administrar como una unidad.

Si lo desea, puede tratar un servidor Web virtual entero o un nombre de dominio como un sitio Web. No obstante, con frecuencia tendrá secciones de contenido que deseará crear en distintos momentos, implementar en distintos momentos, controlar con distinto nivel de seguridad o administrar por separado. Afortunadamente, con ASP.NET 2.0 puede comenzar un nuevo sitio en cualquier carpeta del árbol de contenido del servidor (es decir, en su espacio de direcciones URL). 3 No hay ninguna regla que rija el tamaño de un sitio Web

ASP.NET 2.0. No obstante, la mayoría de los sitios tienen entre varias docenas y varios cientos de páginas Web.

S U G E R E N C I A



Elegir dónde poner la copia de trabajo del sitio La mayoría de los desarrolladores de ASP.NET conservan al menos dos copias de cada

sitio que desarrollan: una copia de trabajo y una copia de producción.

■ La copia de trabajo suele residir en alguna instalación externa o en un área privada, aislada de la audiencia prevista del sitio. Después de todo, la copia de trabajo es trabajo en curso. Probablemente sea incompleta y no sea totalmente funcional. Hay una razón para seguir trabajando en ella.

■ La copia de producción, o sitio “activo”, reside en un servidor Web al que tiene acceso la audiencia del sitio. Cuando la copia de trabajo por fin funciona y está aprobada, el desarrollador o un administrador la copia al sitio activo.

Como ASP.NET es una tecnología ejecutada en un servidor Web, necesita un servidor Web para probar un sitio Web ASP.NET. Además, el servidor Web tiene que ejecutar ASP.NET 2.0. En general, esto plantea dos opciones:

■ Puede utilizar Internet Information Server (IIS), el principal servidor Web de Microsoft, instalado en su propio equipo o en un servidor remoto.

■ Puede utilizar el Servidor de desarrollo de ASP.NET integrado en Visual Web Developer. Se trata de un subconjunto de IIS que Visual Web Developer inicia a petición y que se ejecuta hasta que sale de Visual Web Developer.

Visual Web Developer permite la depuración interactiva de todo el código de programa que escribe. Eso significa que puede designar lugares en los que el código debe detenerse y hacer una pausa, de forma que pueda inspeccionar los objetos y las variables, ejecutar el programa de instrucción en instrucción, etc. Sin embargo, cuando el depurador inmoviliza el código, también debe inmovilizar todo el servidor Web y, por supuesto, esto resulta molesto para todas las demás personas que utilizan ese mismo servidor. Para evitar esos problemas, la mayoría de los desarrolladores de ASP.NET realizan la depuración en sus propios equipos, no en un servidor que comparten con otras personas.

Alinear los sitios de Visual Web Developer y las aplicaciones de IIS

Aunque desarrolle y pruebe su sitio Web en el Servidor de desarrollo integrado en Visual Web Developer, finalmente necesitará ejecutarlo en una copia completa de IIS. Existen dos motivos para ello:

■ El servidor de desarrollo sólo es accesible desde su propio equipo.

■ IIS es el único servidor Web con acceso total compatible con ASP.NET 2.0. Desgraciadamente, IIS no

divide un servidor Web en sitios como hace Visual Web Developer. En su lugar, IIS divide los servidores Web en aplicaciones. En resumen:

■ Un sitio es un árbol de carpetas que Visual Web Developer administra como una unidad.

■ Una aplicación es un árbol de carpetas que IIS administra como una unidad.

Continúa en la página siguiente El Servidor de desarrollo de ASP.NET sólo funciona localmente. No puede servir páginas a otro equipo. Sólo es idóneo para probar páginas en su propio equipo.

I M P O R TA N T E


Capítulo 3: Crear un nuevo sitio Web 25

Crear un sitio Web vacío Puede colocar la copia de trabajo de un sitio Web ASP.NET en cuatro tipos de lugares:

■ Una ubicación del sistema de archivos, como una carpeta del disco duro de su equipo o una carpeta compartida de la red.

■ Un servidor de IIS que se ejecute localmente en su equipo.

■ Un servidor de IIS que se ejecute de manera remota (es decir, en otro equipo de la red).

■ Un servidor de IIS con un sistema de archivos al que se pueda tener acceso mediante FTP.

En las próximas secciones se describirán estas opciones con más detalle y se explicará cómo crear un nuevo sitio Web en cada caso.

Crear un sitio Web de sistema de archivos

En un sitio Web de sistema de archivos, puede almacenar los archivos del sitio Web en cualquier carpeta del sistema de archivos que desee. Puede ser en su equipo local o en un recurso compartido de archivos de la red. En la tabla 3-1 se resumen las ventajas y los inconvenientes de este método.

Es importante que estos dos árbo-les de carpetas empiecen en la misma carpeta. De lo contrario, el sitio de Visual Web Developer no se ejecutará correctamente en IIS. Hay tres formas de marcar la carpeta raíz de su sitio como una aplicación de IIS:

■ Si publica el sitio mediante las Extensiones de servidor de Microsoft FrontPage®, estas exten-siones marcarán la carpeta raíz del sitio como una aplicación de IIS.

■ En la herramienta administrativa Administrador de IIS de Microsoft, haga clic con el botón secundario del mouse (ratón) en la carpeta inicial del sitio, elija Propiedades y después, en la ficha Directorio, bajo Configuración de la aplicación, haga clic en el botón Crear. Si no tiene permiso para hacerlo personalmen-te, póngase en contacto con el per-sonal de soporte técnico del servidor.

■ Más adelante en este capítulo, en una sección titulada Crear un sitio Web de IIS local, se explica cómo marcar carpetas como aplicacio-nes de IIS sin salir de Visual Web Developer. No obstante, esto requiere los mismos permisos que cuando se utiliza el Administrador de IIS.

Continúa de la página 24

Tabla 3-1Ventajas e inconvenientes de un sitio Web de sistema de archivos

Ventajas

No necesita tener una copia completa de IIS en ejecución en su equipo. En su lugar, puede probar páginas utilizando el Servidor de desarrollo de ASP.NET.

No necesita derechos administrativos para crear o depurar sitios Web locales.

El servidor de desarrollo de ASP.NET sólo es accesible desde el equipo local. Esto puede reducir las vulnerabilidades de seguridad.

Inconvenientes

En el Servidor de desarrollo de ASP.NET no puede probar algunas características avanzadas de IIS como autenticación basada en HTTP, agrupación de aplicaciones y filtros ISAPI.

Los colaboradores no pueden obtener una vista previa del sitio directamente desde su equipo. Para que puedan obtener una vista previa, tendría que publicar el sitio en un servidor que ejecutara IIS.



En el cuadro de lista desplegable Lenguaje, seleccione el lenguaje de programación predeterminado del sitio Web.

Haga clic en Aceptar. Visual Web Developer crea el sitio, abre una página predeterminada en el diseñador de páginas y muestra la carpeta en el Explorador de soluciones.

Si la ruta de acceso especificada ya contiene archivos, Visual Web Developer le pedirá que especifique un nombre de carpeta diferente, abra el sitio Web existente o lo cree. En el último caso, los archivos de la plantilla que seleccione sobrescribirán los archivos que ya existan con ese mismo nombre.

PARA CREAR UN SITIO WEB DE SISTEMA DE ARCHIVOS EN VISUAL WEB DEVELOPER

Figura 3-1 Este cuadro de diálogo es el punto de partida para crear un nuevo sitio Web en Visual Web Developer.

Elija Nuevo sitio Web en el menú Archivo.

Cuando aparezca el cuadro de diálogo Nuevo sitio Web que se muestra en la figura 3-1,

seleccione una plantilla en el cuadro Plantillas. Por ejemplo, elija Sitio Web ASP.NET.

En el campo Ubicación:

■ Seleccione Sistema de archivos en el cuadro de lista desplegable.

■ Escriba, seleccione o vaya hasta la ubicación del sistema de archivos que desee.

1

2

3

5

4



Tabla 3-2Ventajas e inconvenientes de un sitio Web de IIS local

Ventaja

Puede probar todas las características de IIS, incluyendo autenticación basada en HTTP, agrupación de aplicaciones y filtros ISAPI.

El sitio es accesible desde otros equipos. (Sin embargo, su responsabilidad es asegurarse de que sólo tengan acceso al mismo las personas que desee.)

Inconvenientes

Debe tener derechos administrativos para crear o depurar sitios Web de IIS.

Sólo un usuario del equipo puede realizar la depuración en IIS cada vez.

Los sitios Web de IIS locales tienen habilitado el acceso remoto de manera predeterminada. Quizás esto no sea adecuado en algunas situaciones.

Crear un sitio Web de IIS local

Los sitios Web de IIS locales se ejecutan utilizando una copia de IIS instalada en su PC. Cada sitio Web se ejecuta como su propia aplicación de IIS. Visual Web Developer actualiza los archivos mediante las extensiones de servidor de FrontPage o teniendo acceso al sistema de archivos directamente. En la tabla 3-2 se resumen las ventajas y los inconvenientes de este método.

Para crear un sitio Web de IIS local, debe satisfacer primero estos requisitos: ■ Debe haber iniciado sesión en el equipo con privilegios de administrador. Sólo un

administrador puede modificar la configuración necesaria de IIS.

■ IIS debe estar instalado en el equipo y debe estar en ejecución.

■ ASP.NET 2.0 debe estar instalado en el equipo y habilitado en IIS.

Los archivos de un sitio Web de IIS local pueden residir donde desee. A continuación se describen algunos ejemplos:

■ Puede crear un nuevo sitio bajo la raíz de IIS (normalmente, C:\InetPub\wwwroot) y marcarlo como una aplicación de IIS.

■ Puede crear un nuevo sitio en cualquier carpeta del equipo, y decir a Visual Web Developer que lo marque como un directorio virtual de IIS y como una aplicación de IIS.

■ Puede crear un sitio Web que señale a una aplicación de IIS existente y, a continuación, editar los archivos en esa aplicación.



PARA CREAR UN SITIO WEB DE IIS LOCAL


Cuando aparezca el cuadro de diálogo Nuevo sitio Web, seleccione una de las plantillas que se muestran en el cuadro Plantillas.

3 Seleccione HTTP en el cuadro de lista desplegable Ubicación.

Si desea escribir a mano la dirección URL del nuevo sitio, poner sus archivos en el espacio de contenido habitual del servidor

Web (por ejemplo, dentro de C:\InetPub\wwwroot) y convertir el sitio en una aplicación de IIS, haga lo siguiente:

■ Escriba la nueva dirección URL en el cuadro de texto Ubicación. Por ejemplo, escriba http://localhost/ContosoMagic.

■ Vaya al paso 9.

De lo contrario, siga estos pasos:

■ Haga clic en el botón Examinar. Aparecerá el cuadro de diálogo Seleccionar ubicación que se muestra en la figura 3-2.

■ Haga clic en el icono IIS local para ver la lista de servidores Web locales.

Si desea que el nuevo sitio Web utilice archivos de una aplicación de IIS existente, seleccionela carpeta donde empieza la aplicación existente, haga clic en el botón Abrir y vaya al paso 9.

En el cuadro Seleccione el sitio Web que desee abrir, seleccione el servidor Web y, si es necesario,la carpeta primaria del sitio que desea crear. Por ejemplo, si desea crear un sitio en /doves/white, seleccione /doves.

Si desea que los archivos del nuevo sitio Web residan dentro del espacio de contenido habitual del servidor Web, utilice el cuadro de diálogo Seleccionar ubicación de la manera siguiente:

■ Haga clic en el botón Crear nueva aplicación Web. Éste es el primero de tres botones que aparecen cerca de la esquina superior derecha del cuadro de diálogo.

Figura 3-2 Este cuadro de diálogo muestra una lista de servidores Web locales y sus espacios de direcciones URL. Utilícelo para seleccionar la carpeta primaria del nuevo sitio Web que desee crear.

1

2

4

5

6

7



■ Aparecerá una nueva carpeta denominada WebSite en el cuadro Seleccione el sitio Web que desee abrir. Cambie el nombre de esta carpeta por el nombre que desee.

Si desea que los archivos del nuevo sitio Web residan en otro lugar, siga estos pasos:

■ Haga clic en el botón Crear nuevo directorio virtual. Es el botón central que aparece cerca de la esquina superior derecha del cuadro de diálogo Seleccionar ubicación. Al hacer clic en este botón aparece el cuadro de diálogo Nuevo directorio virtual que se muestra en la figura 3-3.

■ En el cuadro Nombre de alias, escriba la ruta de acceso de la dirección URL donde desea que resida el nuevo sitio.

■ En el cuadro Carpeta, escriba la ubicación física donde residirán los archivos del sitio Web o vaya hasta ella.

■ Haga clic en Aceptar para crear el directorio virtual.

Haga clic en el botón Abrir para crear el sitio en IIS.

Seleccione el lenguaje de programación predeterminado del sitio Web.

Haga clic en Aceptar para crear el sitio y abrirlo en Visual Web Developer.

Si la ruta de acceso especificada ya contiene archivos, Visual Web Developer mostrará una advertencia.

Crear un sitio Web de IIS remoto

Un sitio Web remoto utiliza una copia de IIS instalada en otro equipo al que puede tener acceso a través de una red. Los archivos del sitio Web residen en el equipo remoto y Visual Web Developer se comunica con el sitio Web mediante Extensiones de servidor de FrontPage. En la tabla 3-3 se presentan las ventajas y los inconvenientes de este método.

Para crear un sitio Web de IIS remoto se requiere lo siguiente:

■ En el equipo remoto se debe ejecutar la versión 2.0 de .NET Framework. ■ El equipo remoto debe tener IIS instalado y en ejecución.

Figura 3-3 Este cuadro de diálogo define una carpeta en el espacio de direcciones URL del servidor Web y la asocia con una ubicación de archivo física.

8

9

10



■ ASP.NET debe estar habilitado en IIS en el equipo remoto.

■ Las Extensiones de servidor de FrontPage deben estar instaladas y habilitadas en el nivel raíz donde vaya a crear el sitio.

■ Debe tener permisos de administración o de creación en FrontPage para crear carpetas y archivos nuevos en el equipo remoto.

PARA CREAR UN SITIO WEB DE IIS REMOTO



En el campo Ubicación, seleccione HTTP en el cuadro de lista desplegable.

A su discreción, siga uno de estos procedimientos.

■ Escriba la dirección URL del nuevo sitio en el cuadro Ubicación. Por ejemplo, escriba http://www.example.com/ContosoMagic

■ Haga clic en el botón Examinar, seleccione Sitio remoto y escriba la dirección URL que desee en el cuadro Ubicación del sitio Web.

Tabla 3–3Ventajas e inconvenientes de un sitio Web de IIS remoto

Ventajas

Puede probar el sitio Web en el mismo entorno que el servidor de producción (o bien, si tiene suerte, directamente en el servidor de producción).

Varios desarrolladores pueden trabajar en el mismo sitio a la vez.

Inconvenientes

La configuración del servidor compartido para la depuración puede ser compleja.

Sólo un desarrollador puede depurar la aplicación cada vez. Además, el servidor suspende todas las demás solicitudes mientras el desarrollador está recorriendo paso a paso el código.

1

2

3

4



■ Haga clic en el botón Examinar, seleccione Sitio remoto, haga clic en el botón Nuevo sitio Web y escriba la dirección URL que desee en el cuadro Dirección URL del Web.



Visual Web Developer crea el sitio, abre una página predeterminada en el diseñador de páginas y muestra la carpeta en el Explorador de soluciones. Si la ruta de acceso especificada ya contiene archivos, Visual Web Developer le pedirá que especifique otra ubicación diferente.

Crear un sitio Web accesible mediante FTP En algunos servidores Web, la única forma de actualizar archivos es utilizar el Protocolo

de transferencia de archivos (FTP). Éste suele ser el caso de los servidores proporcionados por los servicios de alojamiento comercial. Visual Web Developer admite este entorno. De manera específica:

■ Siempre que Visual Web Developer necesita leer un archivo o escribir en él, lo hace mediante FTP.

■ Si la ubicación FTP también está dentro del árbol de contenido de un servidor Web de IIS que ejecuta ASP.NET 2.0, puede ejecutar y probar el sitio desde el mismo servidor.

En la tabla 3-4 se resumen las ventajas y los inconvenientes de un sitio Web accesible mediante FTP.

5

6

Ventajas

Puede abrir, probar y modificar directamente el sitio en el servidor Web de producción

Inconvenientes

No puede crear una aplicación de IIS con FTP.

Si sólo trabaja en el servidor FTP, no tendrá ninguna copia de seguridad del sitio. A menos que tome otras precauciones, la copia de FTP es la única que hay.

La recomendación es probar el sitio antes de ponerlo en producción y publicar después el sitio probado mediante FTP.

Tabla 3-4Ventajas e inconvenientes de un sitio Web accesible mediante FTP



Para utilizar este método, el sitio que desee abrir debe estar disponible en un servidor FTP y debe obtener la información siguiente del administrador del servidor FTP.

■ El nombre del servidor FTP en el que desee abrir el sitio Web.

■ El nombre de la carpeta FTP en la que tenga permiso para crear y escribir archivos.

Puede que también necesite: ■ Un nombre de usuario y una contraseña para el servidor.

■ El número de puerto que utiliza el servidor FTP. Normalmente es el puerto 21.

PARA CREAR UN SITIO WEB ACCESIBLE MEDIANTE FTP



En el campo Ubicación, seleccione FTP en el cuadro de lista desplegable.

Si lo desea, escriba o seleccione la ubicación FTP del sitio (como http://ftp.example.com/public_html/ContosoMagic). De lo contrario, haga clic en el botón Examinar y asegúrese de que está

seleccionado el icono Sitio FTP. El cuadro de diálogo Seleccionar ubicación será similar al mostrado en la figura 3-4.

Rellene los campos siguientes y haga clic en Abrir.

■ Servidor Escriba el nombre del servidor, como ftp://ftp.ejemplo.com.

■ Puerto Si el servidor FTP funciona en otro puerto distinto del 21, cambie este valor.

■ Directorio Escriba el nombre de la carpeta FTP en la que desea que residan los archivos del sitio Web. (Suele ser distinto de la carpeta HTTP y de la carpeta física del sistema de archivos.) Por ejemplo, todo lo siguiente podría señalar a la misma ubicación de archivo física:

Nombre de carpeta FTP: public_html/ContosoMagic/

Nombre de carpeta HTTP ContosoMagic/

Nombre de carpeta del sistema de archivos C:\InetPub\wwwroot\ContosoMagic\

Cuando Visual Web Developer crea un sitio Web mediante FTP, no puede realizar el paso necesario de configurar el sitio Web como una aplicación de IIS. En su lugar, usted o un administrador del servidor debe utilizar la herramienta administrativa Administrador de IIS para configurar la aplicación.

I M P O R TA N T E1

2

3

4

5



■ Modo pasivo Active esta casilla de verificación si tiene problemas para comunicarse con el servidor FTP debido a un servidor de seguridad.

■ Inicio de sesión anónimo Active esta casilla de verificación si el servidor FTP permite leer y escribir archivos sin iniciar sesión. Desactívela si necesita especificar un nombre de usuario y una contraseña.

■ Nombre de usuario y Contraseña Escriba los credenciales que brindan el acceso necesario al área de archivos FTP. Pueden ser distintos de las credenciales de inicio de sesión habituales de Microsoft Windows®.



Visual Web Developer se conecta al servidor FTP y copia los archivos de plantilla a esa ubicación. No olvide que para los nuevos sitios, usted o un administrador delservidor tiene que ejecutar la herramienta administrativa Administrador de IIS y marcar el sitio como una aplicación.

En resumen… Es conveniente tener al menos dos copias de todos los sitios Web que mantenga: una copia de desarrollo o “de trabajo” y una versión de producción o “activa”. Visual Web Developer puede mantener las copias de trabajo en cuatro tipos de lugares: en una ubicación del sistema de archivos, en un servidor local de IIS, en un servidor remoto de IIS o en un servidor accesible mediante FTP. El sitio activo normalmente residirá en un servidor remoto de IIS.

En el próximo capítulo se explicará cómo abrir sitios existentes.

6

7

Figura 3-4 Cuando se conecta a un sitio FTP, el cuadro de diálogo Seleccionar ubicación ofrece estas opciones


35

Abrir un sitio Web utilizado recientemente, 36

Abrir un sitio Web arbitrario, 37

Abrir un sitio Web de IIS local, 38

Capítulo 4Abrir un sitioWeb existente

No cabe duda de que los sitios Web tienen un mantenimiento elevado. Los crea una vez y tiene que mantenerlos siempre. Por tanto, probablemente abrirá sitios existentes con mucha más frecuencia con la que creará sitios nuevos. Afortunadamente, Microsoft® Visual Web Developer™ hace que sea muy sencillo abrir sitios de cualquier tipo. En este capítulo se explicanlos procedimientos que debe seguir.

4X1166132BDY.indb 35X1166132BDY.indb 35 16/12/05 16:02:2616/12/05 16:02:26


Abrir un sitio Web utilizado recientemente Cuando Visual Web Developer se inicia, muestra la página de inicio presentada anterior-mente en la figura 1-2. En la página de inicio, el cuadro Proyectos recientes contiene una lista de sitios Web que ha abierto recientemente en los que puede hacer clic. Para volver a abrir uno de estos sitios, basta con hacer clic en él. Cuando la ventana Explorador de solucio-nes muestra una lista expandible de los archivos y las carpetas del sitio, éste está abierto.

Esa misma lista de sitios recientes aparece en el menú Archivo. Para abrir un sitio de esa forma, elija Proyectos recientes en el menú Archivo y haga clic en el sitio deseado en el submenú que aparecerá.

De manera predeterminada, Visual Web Developer recuerda los 10 últimos sitios que ha abierto. Si desea recordar más o menos sitios, haga lo siguiente.

PARA RECORDAR MÁS SITIOS O MENOS SITIOS

Elija Opciones en el menú Herramientas.

2 Cuando aparezca el cuadro de diálogo Opciones, busque la casilla de verificación Mostrar todas las

configuraciones situada en la esquina inferior izquierda y asegúrese de que está activada.

3 En la vista de árbol que hay en la parte izquierda del cuadro de diálogo, abra el nodo Entorno y

seleccione General. El cuadro de diálogo será similar al mostrado en la figura 4-1.

4 En el área Archivos recientes, busque el cuadro de texto titulado elementos mostrados en las listas de

los usados recientemente y escriba el número de sitios que desea que Visual Web Developer recuerde.

Haga clic en Aceptar. Figura 4-1 Visual Web Developer ofrece muchas opciones de configuración. El segundo cuadro de texto controla la longitud de las listas de usados recientemente.

En la figura 4-1, el cuadro de texto titulado Elementos mostrados en el menú Ventana especifica el número máximo de nombres de ventana que Visual Web Developer mostrará después de hacer clic en Ventana en el menú principal.

N O TA

1

5


Capítulo 4: Abrir un sitio Web existente 37

Abrir un sitio Web arbitrario Para abrir cualquier sitio Web existente, independientemente de que lo haya abiertorecientemente o no, haga lo siguiente.

PARA ABRIR UN SITIO WEB ARBITRARIO

Elija Abrir sitio Web en el menú Archivo.

2 Cuando aparezca el cuadro de diálogo Abrir sitio Web que se muestra en la figura 4-2,

haga clic en el icono de la barra Sitios (a la izquierda) que mejor describa la ubicación del sitio.

3 Continúe como se indica en las cuatro próximas secciones. Hay una sección para

cada opción de la barra Sitios.

Figura 4-2 Esta versión del cuadro de diálogo Abrir sitio Web le permite seleccionar un sitio accesible mediante el sistema de archivos de Microsoft Windows®.

Abrir un sitio Web de sistema de archivos

Después de hacer clic en el icono Sistema de archivos del cuadro de diálogo Abrir sitio Web, la pantalla debe ser similar a la mostrada en la figura 4-2.

1



PARA ABRIR UN SITIO WEB DE SISTEMA DE ARCHIVOS

1 En el cuadro de diálogo Abrir sitio Web, abra o cierre los nodos de árbol necesarios, y busque y seleccione la carpeta que contenga la raíz del sitio Web.

Haga clic en el botón Abrir.

Sólo hay que tener una precaución: No utilice el comando Abrir sitio Web para abrir una carpeta que no esté en la raíz de un sitio Web. Esto suele ocurrir cuando tiene un árbol de carpetas complejo y:

■ Algunas carpetas de ese árbol son carpetas raíz del sitio Web.

■ Algunas carpetas son simplemente subcarpetas de un sitio.

Cuando utiliza el comando Abrir sitio Web para abrir una carpeta, Visual Web Developer supone que esa carpeta será la raíz de un sitio Web, que será una aplicación de IIS, y que se pueden almacenar ahí archivos de configuración y subcarpetas de ASP.NET con nombres especiales. Si esas suposiciones no son ciertas, el sitio no funcionará como esperaba. De nuevo, siempre que utilice el comando Abrir sitio Web, asegúrese de que está abriendo la carpeta raíz de un sitio Web.

Abrir un sitio Web de IIS local

Si hace clic en el icono IIS local del cuadro de diálogo Abrir sitio Web, la pantalla cambiará a la mostrada en la figura 4-3.

Básicamente es la misma vista del espacio de direcciones URL del servidor Web que muestra la herramienta administrativa Administrador de IIS.

Dos de los archivos que deben residir en la raíz de un sitio Web ASP.NET son web.config y web.sitemap. Las subcarpetas especiales bin, App_Code, App_Data, App_GlobalResources, App_LocalResources, App_WebReferences, App_Browsers y App_Themes deben residir también en la carpeta raíz del sitio.

N O TA

2



PARA ABRIR UN SITIO WEB DE IIS LOCAL

1 Busque la carpeta que contiene la raíz de su sitio Web. Para ello, abra o cierre los nodos de árbol que sea necesario.

Seleccione la carpeta y haga clic en el botón Abrir.

Observe que en la figura 4-3 dos de los iconos de carpeta (IISHelp y magic) representan una caja de cartón abierta con un globo terráqueo y un documento en su interior. Si una carpeta tiene este icono, se trata de la raíz de una aplicación de IIS. Estas carpetas raíz son las que debe abrir en Visual Web Developer.

Si intenta abrir una carpeta que no es la carpeta raíz de una aplicación de IIS, Visual Web Developer mostrará un mensaje de advertencia y le preguntará si desea continuar. Casi en todos los casos, la respuesta correcta es No. En ese caso, para retomar la situación:

■ Si la carpeta que intentaba abrir forma parte de otra aplicación, abra dicha aplicación.

■ Si la carpeta que intentaba abrir debe ser la raíz de una aplicación de IIS, selecciónela y haga clic en el botón Crear nueva aplicación Web (el situado más a la izquierda de los tres botones que hay en la esquina superior derecha del cuadro de diálogo).

Abrir un sitio Web accesible mediante FTP

Si hace clic en el icono Sitio FTP del cuadro de diálogo Abrir sitio Web, la pantalla cambiará a la mostrada anteriormente en la figura 3-4.

PARA ABRIR UN SITIO WEB ACCESIBLE ÚNICAMENTE MEDIANTE FTP

Figura 4-3 Cuando abre un sitio Web de IIS local, el cuadro de diálogo Abrir sitio Web muestra esta vista del espacio de direcciones URL del servidor Web.

1 Rellene los campos como se indicaba en la sección “Crear un sitio Web accesible mediante FTP” del capítulo 3. 2 Haga clic en el botón Abrir.

2



Como ocurre al crear un sitio Web accesible mediante FTP, debe asegurarse de que la ubicación FTP que especifique se corresponda con la raíz de una aplicación de IIS en el servidor Web.

Abrir un sitio Web remoto

Si hace clic en el icono Sitio remoto del cuadro de diálogo Abrir sitio Web, la pantalla cambiará a la mostrada en la figura 4-4.

Figura 4-4 Cuando abre un sitio Web remoto, no hay ninguna lista para examinar que le ayude a encontrar el servidor Web y la ruta de acceso correctos.

PARA ABRIR EL SITIO WEB REMOTO

Escriba la dirección URL completa del sitio Web en el cuadro Ubicación del sitio Web. Como alternati-va, haga clic en el botón Nuevo sitio Web y cree un sitio como se explica en la sección “Crear un sitio Web de IIS remoto” del capítulo 3.

Haga clic en el botón Abrir.

1

2



Cuando se abre un sitio Web remoto en Visual Web Developer, debe tomar las precauciones siguientes:

■ El sitio sólo será accesible si están instaladas las Extensiones de servidor de Microsoft FrontPage® en el servidor Web. Visual Web Developer utiliza las Extensiones de servidor de FrontPage para leer y escribir archivos en el servidor, modificar la configuración del servidor Web e interactuar con el servidor Web.

■ La carpeta que especifique debe ser la raíz de un sitio Web de FrontPage y la raíz de una aplicación de IIS. Normalmente será así para cualquier sitio Web que cree en Visual Web Developer o en una versión completa de Microsoft Visual Studio®.

Si por alguna razón la ubicación no es la raíz de un sitio Web de FrontPage y especificó la carpeta correcta, convierta la carpeta en un sitio Web basado en un servidor de FrontPage utilizando las páginas Web de Administración de las Extensiones de servidor de Microsoft FrontPage en el servidor Web o Microsoft FrontPage. Si especifica la ubicación correcta y descubre que no es la raíz de una aplicación de IIS, utilice la herramienta administrativa Administrador IIS de Microsoft para marcar la carpeta como una aplicación e intente abrirla de nuevo.

■ La aplicación de IIS debe estar configurada para utilizar ASP.NET 2.0. Si no lo está, Visual Web Developer mostrará un mensaje de advertencia y le preguntará si desea continuar. Casi en todos los casos debe hacer lo siguiente:

1. Responder No a la pregunta.

2. Asegurarse de que la versión 2.0 de .NET Framework está instalada en el equipo remoto.

3. Asegurarse de que la aplicación de IIS está configurada para utilizar ASP.NET 2.0.

4. Probar a abrir de nuevo la aplicación en Visual Web Developer.

IIS puede ejecutar cualquier combinación de aplicaciones ASP.NET 1.0, 1.1 y 2.0 en el mismo servidor Web virtual.



PARA COMPROBAR O CONFIGURAR LA VERSIÓN DE ASP.NET PARA UNA APLICACIÓN

Inicie la herramienta administrativa Administrador IIS.

En el panel izquierdo de la aplicación Administrador IIS, abra:

■ El nodo correspondiente a Servicios de Internet Information Server.

■ El nodo del equipo en cuestión.

■ El nodo Sitios Web.

■ El nodo del servidor virtual en cuestión (por ejemplo, Sitio Web predeterminado).

■ El nodo de cualquier carpeta primaria que necesite abrir para que la carpeta raíz de su aplicación de IIS sea visible.

Haga clic con el botón secundario del mouse (ratón) en la carpeta raíz de su aplicación y elija Propiedades en el menú contextual que aparecerá.

Cuando aparezca el cuadro de diálogo Propiedades de la aplicación, haga clic en la ficha ASP.NET. El cuadro de diálogo debe ser similar al mostrado en la figura 4-5.

Especifique en la lista desplegable de la versión de ASP.NET la versión más reciente de ASP.NET 2.0 instalada en el servidor y haga clic en el botón Aceptar.

1

2

3

4

5



En resumen… Visual Web Developer ofrece varias formas diferentes de abrir un sitio Web existente.

Dos de estas formas son la lista Proyectos recientes y el comando Abrir sitio Web del menú Archivo. Utilizando estos comandos, Visual Web Developer puede abrir sitios Web que residen en una ruta de acceso del sistema de archivos, en un servidor de IIS local, en un servidor remoto accesible mediante FTP o en un servidor remoto que ejecute las Extensiones de servidor de FrontPage.

En el próximo capítulo explicaremos cómo copiar un sitio de un lugar a otro (por ejemplo, de un sitio de producción activo a un área de trabajo o viceversa).

Figura 4-5 Este cuadro de diálogo del Administrador IIS configura la versión de ASP.NET que utilizará una aplicación de IIS.


45

Especificar los sitios Web de origen y remoto, 46

Seleccionar y copiar archivos, 47

Capítulo 5Copiar susitio Web

Siempre que tiene varias copias de un sitio Web (por ejemplo, una copia de trabajo y una copia de producción activa), de vez en cuando necesitará copiar uno o más archivos de una ubicación a otra, o incluso copiar todo el sitio. Por ejemplo, quizás desee empezar una nueva copia de trabajo basada en el sitio activo o quizás tenga que copiar los cambios realizados de la copia de trabajo al sitio de producción.

Microsoft® Visual Web Developer™ integra características que simplifican esta tarea y en este capítulo se explica cómo funcionan esas características.

5X1166132BDY.indb 45X1166132BDY.indb 45 16/12/05 16:02:4316/12/05 16:02:43


PARA COPIAR UN SITIO DE UNA UBICACIÓN A OTRA

Inicie Visual Web Developer.

Abra un sitio como se explica en el capítulo 4.

Elija Copiar sitio Web en el menú Sitio Web. Aparecerá la ventana Copiar Web que se muestra en la figura 5-1.

■ Sitio Web de origen Este área ocupa la parte izquierda de la ventana. Muestra el contenido del sitio que abrió en el paso 1. ■ Sitio Web remoto Este área ocupa la parte derecha de la ventana. Al principio, puede estar en blanco. Sin embargo, en general muestra el contenido del otro sitio implicado en la operación de copia. De manera predeterminada, es el sitio Web remoto que abrió más recientemente. A pesar de que estas áreas se denominan “de origen” y “remoto”, ni la distancia ni la dirección establecen ninguna diferencia. Por ejemplo: ■ El sitio de origen podría estar en la otra parte del mundo y el sitio remoto podría estar en su propio equipo. ■ Puede copiar archivos de un sitio remoto a uno local con la misma facilidad que de un sitio local a uno remoto. Si las áreas “de origen” y “remoto” muestran el par correcto de sitios Web, vaya a la próxima sección de este capítulo. De lo contrario, continúe en el paso 4.

Especificar los sitios Web de origen y remoto

Figura 5-1 La característica Copiar Web muestra el contenido de dos sitios Web y copia entre ellos todos los archivos que desee.

1

2

3


Capítulo 5: Copiar su sitio Web 47

4 Abra la lista desplegable Conexiones situada en la esquina superior izquierda de la ventana Copiar Web. Si el sitio Web remoto que desea aparece en esta lista, selecciónelo y Visual Web Developer

mostrará ese sitio en la parte Sitio Web remoto de la ventana. Cuando esto ocurra, vaya a la próxima sección de este capítulo.

5 Haga clic en el botón Conectar situado cerca de la parte central superior de la ventana Copiar Web.Aparecerá el cuadro de diálogo Abrir sitio Web mostrado previamente en las figuras 4-2, 4-3 y 4-4.

6 Utilice el cuadro de diálogo Abrir sitio Web como se indicaba en el capítulo 4. No obstante, tenga en cuenta que va a abrir el sitio Web remoto para una operación Copiar Web. El sitio Web de origen que

abrió en el paso 1 seguirá apareciendo a la izquierda.

Cada una de las partes Sitio Web de origen y Sitio Web remoto del cuadro de diálogo Copiar Web muestra el contenido de una carpeta de sus sitios respectivos.

■ Para ver el contenido de una subcarpeta, haga doble clic en ella.

■ Para ver el contenido de una carpeta primaria, haga clic en el botón Subir un nivel en el directorio situado justo encima de la esquina superior derecha de la lista.

Si hace clic con el botón secundario del mouse (ratón) en una lista de carpetas, aparecerá un menú contextual que ofrecerá los comandos siguientes:

■ Actualizar Vuelve a cargar la lista de archivos y carpetas. Utilice este comando si sospecha que unas actualizaciones de otro origen han modificado la información de la pantalla. Los botones Actualizar situados encima de la esquina superior derecha de cada lista de carpetas realizan la misma función.

■ Seleccionar todo Selecciona todos los archivos y carpetas de la lista de carpetas donde hizo clic con el botón secundario del mouse.

■ Copiar archivos seleccionados Copia a la otra ubicación todas las carpetas y los archivos seleccionados actualmente desde la lista en la que hizo clic con el botón secundario del mouse.

Seleccionar y copiar archivos

Para seleccionar varios archivos del sitio Web de origen o del sitio Web remoto, utilice Mayús+clic o Ctrl+clic como haría en el Explorador de Microsoft Windows®. Al seleccionar una carpeta se seleccionan todos sus archivos y subcarpetas.

S U G E R E N C I A



■ Sincronizar archivos seleccionados Copia los archivos seleccionados que faltan o están anticuados entre los dos sitios. Cuando termine el proceso, en ambos sitios existirán los mismos archivos y carpetas, todos ellos con las marcas de tiempo más recientes.

■ Copiar sitio en ubicación remota (o Copiar sitio en el origen) Copia todo el sitio Web de origen al sitio Web remoto o viceversa. Los botones con una flecha que hay entre las dos listas de carpetas también realizan estas funciones.

■ Sincronizar sitio Funciona como Sincronizar archivos seleccionados, excepto que pertenece a todo el sitio Web. El botón con dos flechas que hay entre las dos listas de carpetas también realiza esta función.

■ Eliminar Elimina los archivos seleccionados. Los botones Eliminar situados encima de la esquina superior derecha de cada lista de carpetas realizan la misma función.

El botón cuadrado que hay entre las dos listas de carpetas ofrece una función Cancelar. Si parece que una operación de copia va demasiado despacio, o si cree que no funciona, haga clic en este botón para terminar el proceso.

Tenga en cuenta que al copiar archivos entre dos sitios existentes, algunos archivos deben ser diferentes. Por ejemplo:

■ Cuando copie una copia de trabajo de un sitio a la versión de producción activa, probablemente no desee sobrescribir las bases de datos de producción. Con frecuencia, estas bases de datos residen en la carpeta App_Data de su sitio.

■ El archivo web.config contiene multitud de configuraciones que afectan a su sitio. Muchas de estas configuraciones pueden ser iguales para el desarrollo y para las pruebas, pero otras muchas pueden ser también diferentes. Por ejemplo, aquí es donde Visual Web Developer almacena el nombre, la ubicación, el Id. de usuario y la contraseñas de acceso a la base de datos. Estas configuraciones suelen ser diferentes para las pruebas que para el entorno de producción.

Piénselo detenidamente antes de copiar la carpeta App_Data de un sitio a otro. No sobrescriba las bases de datos de producción.

I M P O R TA N T E

Piénselo detenidamente antes de copiar el archivo web.config de un sitio a otro. No sobrescriba las configuraciones en tiempo de ejecución del sitio de producción.

I M P O R TA N T E


Capítulo 5: Copiar su sitio Web 49

Por último, tenga en cuenta que Visual Web Developer acepta varias formas diferentes de compilar el código de programa que contiene su sitio.

■ En algunos casos, el servidor Web compila el código de cada página en tiempo de ejecución; es decir, la primera vez que un visitante solicita esa página. En estos casos, tiene que copiar todo el código fuente al sitio de producción.

■ En otros casos, compilará el código antes de copiar el sitio. En este entorno tiene que copiar el resultado de la compilación (un archivo DLL) pero no el código fuente.

En el capítulo 7 se explican estas opciones con más detalle.

En resumen… Visual Web Developer ofrece un comando Copiar Web que puede copiar todo un sitio

Web, o una parte, a otro sitio. Esto es muy útil para crear una nueva copia de trabajo de un sitio de producción y para copiar los cambios realizados desde la copia de trabajo al sitio de producción.

En el próximo capítulo explicaremos cómo crear y modificar las páginas Web de su sitio.

Para obtener más información acerca de cómo compilar código de programa y decidir qué archivos deben estar en el sitio de producción activo, consulte “Almacenar, compilar y publicar código de programa” en el capítulo 7.

M Á S I N F O R M A C I Ó N


51

6Trabajar con vistas de páginas Web, 53

Agregar controles, 54

Establecer propiedadesde controles, 58

Agregar o modificarhipervínculos, 65

Capítulo 6Crear y modificar páginas Web

Una vez que tenga un sitio Web, o al menos una copia de trabajo de un sitio Web, seguramente deseará crear y modificar las páginas Web que contiene. La creación de páginas implica mucho más trabajo, aunque es mucho más interesante, que la creación de un sitio en blanco. En este capítulo se explica cómo crear páginas en Microsoft® Visual Web Developer™, cómo abrir páginas existentes, y cómo agregar y modificar el contenido de las páginas.

Cuando lea este material, tenga en cuenta que un control significa cualquier etiqueta HTML normal o cualquier control de servidor ASP.NET. En este sentido, son controles etiquetas como <br>, <img src=”logo.gif”>, <form runat=”server”>, controles de servidor complejos e incluso la propia página Web.



PARA CREAR O ABRIR UNA PÁGINA WEB

Es fácil crear una nueva página Web en Visual Web Developer. Basta con seguir este procedimiento:

Abra el sitio que contendrá la página.

Elija Nuevo archivo en el menú Archivo. Aparecerá la página Agregar nuevo elemento que se muestra en la figura 6-1.

He aquí cómo completar las entradas dela página Agregar nuevo elemento:

■ Plantilla Si la página va a utilizar características de ASP.NET, seleccione Web Form. Casi siempre es la elección correcta.

Si elige Página HTML, Visual Web Developer asignará una extensión de archivo .htm. Esto, a su vez, elude todo el procesamiento ASP.NET cuando el servidor Web entrega la página a los visitantes.

Para ver una breve descripción de las demás plantillas, seleccione temporalmente cada una de ellas o lea la descripción que aparece en el cuadro gris sin título bajo el área de selección. En otros capítulos posteriores se explicará qué hacer con muchas de estas plantillas.

■ Nombre Especifique un nombre de archivo para la nueva página. En el caso de los formularios Web Forms, la extensión predeterminada y obligatoria es .aspx.

■ Lenguaje Especifique el lenguaje de programación que desea utilizar para el código de programa ASP.NET (es decir, para el código de programa que se ejecuta en el servidor Web). En Visual Web Developer Express, las opciones son Microsoft Visual Basic®, C# y J#.

■ Colocar el código en un archivo independiente Active esta casilla de verificación si desea que el código HTML de la página Web y su código de programa ASP.NET residan en archivos independientes. Desactívela para que ambos tipos de código estén en el mismo archivo.

Figura 6-1 Cuando crea un nuevo archivo para su sitio, este cuadro de diálogo le pide que especifique el tipo de archivo que desea.

Para obtener más información acerca de cómo organizar el código de programa ASP.NET, consulte la sección “Almacenar, compilar y publicar código de programa” en el capítulo 7.


1

2


Capítulo 6: Crear y modificar páginas Web 53

■ Seleccionar la página principal Active esta casilla de verificación si desea que la nueva página herede la apariencia de una plantilla especial que ha creado para el sitio. Después de hacer clic en el botón Agregar, Visual Web Developer mostrará un cuadro de diálogo Seleccionar una página principal donde debe especificar la página principal que desea.

Hay muchas formas de abrir una página existente en Visual Web Developer. Aquí se muestran las tres más frecuentes:

■ Hacer doble clic en un nombre de archivo en la ventana Explorador de soluciones.

■ Elegir Abrir archivo en el menú Archivo. Aparecerá un cuadro de diálogo Abrir archivo estándar donde puede elegir el archivo que desea.

■ Elegir Archivos recientes en el menú Archivo y seleccionar un archivo en el submenú que aparecerá.

Para obtener más información acerca de las páginas principales de ASP.NET, consulte el capítulo 9, “Utilizar páginas principales para centralizar el diseño de página”.


Trabajar con vistas de páginas Web Para cada página Web que abre, Visual Web Developer ofrece dos modos de edición distintos. Son:

■ Vista Diseño Ofrece una vista previa visual editable de la página Web. No obstante, tenga en cuenta estas excepciones:

■ La vista Diseño no ejecuta realmente ningún código de programa ni controles de servidor que pueda contener la página. En su lugar, muestra resultados simulados, campos de formulario en blanco y otros marcadores de posición.

■ La vista Diseño puede mostrar controles que se ejecutan en el servidor Web y no mostrar nada en el explorador. Normalmente, esos controles proporcionan funciones de fondo como la conexión con bases de datos. Es para que sepa que los controles existen y para que pueda seleccionarlos para la edición.

■ La vista Diseño no reacciona a los clics con el mouse (ratón), pulsaciones de teclas y otros eventos, como haría un explorador. En su lugar, estos eventos (y otros) invocan características que forman parte de Visual Web Developer. Por ejemplo, al hacer clic en un hipervínculo no se muestra la página de destino en la vista Diseño. En su lugar, se selecciona el hipervínculo para su edición.


Agregar controles


■ Vista Código Muestra el código fuente de la página. Además de código HTML, esto incluye tipos como:

■ Código CSS (Hoja de estilos en cascada) único de su página.

■ Etiquetas XML que cargan controles de servidor ASP.NET.

■ Código JavaScript que se ejecuta en el explorador.

■ Código de Visual Basic, C# o J# que se ejecuta en el servidor Web.

Para cambiar entre la vista Diseño y la vista Código fuente, haga clic en la ficha Diseñoo Código fuente situada en la parte inferior de la ventana de edición.

El resto de este capítulo se refiere exclusivamente a la edición en la vista Diseño. En el próximo capítulo, “Trabajar con código fuente”, se explicará la edición en la vista Código fuente.

Una vez que tenga una página en blanco, la próxima tarea consistirá en agregar texto, imágenes, campos de formulario u otros controles que requiera la página. En esta sección se explica, de manera general, cómo realizar estas tareas.

Agregar controles desde el Cuadro de herramientas

Cuando su página tenga que utilizar uno de los controles de servidor incluidos con Visual Web Developer, debe pensar inmediatamente en utilizar la ventana Cuadro de herramientas. Esta ventana también es útil para agregar controles HTML estándar a la página. Aparece en la parte izquierda de la figura 6-2.



Visual Web Developer organiza los controles del Cuadro de herramientas en grupos funcionales y después muestra u oculta cada grupo dependiendo del tipo de archivo que esté editando. Por ejemplo, en la tabla 6-1 se muestran los grupos del Cuadro de herramientas que aparecen para una página Web ASP.NET (.aspx). En el caso de las páginas Web normales (.htm), sólo aparecen los grupos HTML y General.

Figura 6-2 El Cuadro de herramientas que aparece a la izquierda de esta pantalla contiene una amplia variedad de controles que puede agregar a sus páginas Web. Para ver los controles individuales de un grupo, haga clic en el signo más (+) de ese grupo.



Visual Web Developer ofrece tres formas diferentes de agregar elementos del Cuadro de herramientas a una página. Todas ellas producen los mismos resultados. Puede elegir la que más le guste:

■ Establecer el punto de inserción donde desee que aparezca el control y hacer doble clic en su entrada correspondiente del Cuadro de herramientas.

■ Arrastrar el control deseado desde la ventana Cuadro de herramientas y colocarlo en una página Web abierta.

■ En la ventana Cuadro de herramientas, copiar el control deseado al Portapapeles, y establecer el punto de inserción y pegar el control en la página Web.

Grupo Descripción

Estándar Controles de servidor Web de propósito general. Muchos de ellos son similares a los controles HTML, pero son más funcionales.

Datos Controles de servidor diseñados para tener acceso, mostrar y actualizar información de base de datos.

Validación Controles de servidor que comprueban la sintaxis de los datos que los visitantes introducen en los campos de formulario.

Exploración Controles de servidor que muestran rastros y menús desplegables, emergentes y de vista de árbol.

Inicio de sesión Controles de servidor para desarrollar características de registro automático y control de acceso.

Elementos Web Controles de servidor que tratan partes de la página Web como áreas dinámicas que los visitantes con autorización pueden personalizar de acuerdo con sus preferencias personales. En el capítulo 18, “Mostrar y personalizar elementos Web”, se explica todo esto con mucho más detalle.

HTML Controles HTML normales. Después de agregar un control HTML normal a una página ASP.NET (.aspx), puede convertirlo en un control de servidor HTML.

General Está vacío al principio. Normalmente contiene otros controles adicionales que compra o desarrolla personalmente.

Tabla 6-1Grupos del Cuadro de herramientas para formularios Web Forms



Cuando se trabaja con el Cuadro de herramientas o con controles ya existentes en una página, es válido cualquier procedimiento estándar de Cortar, Copiar o Pegar. Por ejemplo, para copiar algo al Portapapeles, selecciónelo primero y presione Ctrl+C, haga clic con el botón secundario del mouse y elija Copiar o elija Copiar en el menú Edición.

Agregar tablas y capas de la barra de menús Si bien puede crear una tabla HTML utilizando la entrada Tabla del grupo HTML del Cuadro de herramientas, este método ofrece poca flexibilidad. Siempre obtiene las mismas propiedades iniciales de tabla. Para obtener más flexibilidad, pruebe el procedimiento siguiente.

PARA AGREGAR TABLAS Y CAPAS DE LA BARRA DE MENÚS

Establezca el punto de inserción donde desee que aparezca la tabla.

Elija Insertar tabla en el menú Diseño.

Rellene el cuadro de diálogo Insertar tabla y haga clic en Aceptar.

Si lo desea, también puede agregar capas a la página de esta forma. Basta con establecer el punto de inserción y elegir Insertar capa en el menú Diseño. No obstante, Visual Web Developer no mostrará ningún cuadro de diálogo Insertar capa. Verá una capa genérica, como si hubiera utilizado la entrada Div del grupo HTML del Cuadro de herramientas.

Agregar controles desde el Explorador de soluciones Si un archivo aparece en el Explorador de soluciones, normalmente puede agregarlo a

una página abierta arrastrando y colocando. Es decir, puede arrastrar el nombre de archivo desde el Explorador de soluciones y colocarlo en una página Web abierta. Los resultados que obtenga de este método dependerán del tipo de archivo. A continuación se describen algunos ejemplos:

■ Si arrastra un archivo de imagen (por ejemplo, un archivo que tiene una extensión.gif o .jpg), Visual Web Developer creará una etiqueta <img> que muestra esa imagen.

■ Si arrastra un archivo de Hoja de estilos en cascada (.css), Visual Web Developer vinculará esa hoja de estilos a su página.

1

2

3



■ Si arrastra un control de usuario (es decir, un archivo con la extensión .ascx), Visual Web Developer agregará:

■ Una etiqueta <% @Control . . . %> que señala al archivo .ascx y le asigna un nombre de etiqueta (a menos que ya exista una etiqueta de ese tipo).

■ Una etiqueta XML con el nombre de etiqueta dado. Esto cargará el control en la ubicación donde lo colocó.

■ Si arrastra una página Web (por ejemplo, una página con la extensión .htm o .aspx), Visual Web Developer creará un vínculo a esa página. El nombre de archivo será el texto del hipervínculo.

Si al arrastrar un archivo desde el Explorador de soluciones no obtiene los resultados deseados, basta con presionar Ctrl+Z (deshacer) y utilizar el Cuadro de herramientas para crear el tipo de control que desee.

Después de haber agregado a la página un control HTML o de servidor, casi seguro que deseará modificar una o varias de sus propiedades. En esta sección se describen las diversas formas de modificar esas propiedades sin salir de la vista Diseño.

Establecer propiedades con la ventana Propiedades

Visual Web Developer ofrece una ventana Propiedades que muestra y edita las propiedades de cualquier control que elija. En la esquina inferior derecha de la figura 6-3 se muestra una versión de esta ventana.

La ventana Propiedades siempre muestra las propiedades del control seleccionado actualmente. Para seleccionar un control y mostrar sus propiedades, haga clic en él con el botón secundario del mouse y elija Propiedades. No obstante, con sólo seleccionar el control se suele conseguir el mismo efecto.

Hay pocas diferencias en el funcionamiento de la ventana Propiedades para los diversos controles.

S U G E R E N C I A

Para obtener más información acerca de los controles de usuario ASP.NET, consulte el capítulo 8, “Crear y utilizar controles de usuario Web”.


Establecer propiedades de controles



Si tiene dificultades para seleccionar el control exacto que desea, consulte la barra de herramientas Etiqueta rápida situada en la parte inferior de la ventana de edición. Es la barra de herramientas que muestra <html> <div> en la figura 6-2 y <asp:dropdownlist#dropdow . . . > en la figura 6-3.

La barra de herramientas Etiqueta rápida siempre muestra un nombre de etiqueta para el control actual y todos sus contenedores, hasta la etiqueta <body> incluida. Por ejemplo, para una celda de una tabla HTML la barra de herramientas Etiqueta rápida muestra <body> <table> <tr> <td>. (Si es necesario, utilice los botones de flecha para desplazar la lista de etiquetas a la izquierda o a la derecha.) Al hacer clic en cualquiera de estos nombres de etiqueta se selecciona el control correspondiente.

La ventana Esquema del documento que aparece en la parte izquierda de la figura 6-3 ofrece otra forma de buscar y seleccionar el control que desea.

Figura 6-3 Cuando el cuadro de valor de una propiedad contiene un botón con tres puntos, al hacer clic en ese botón aparece un cuadro de diálogo para configurar esa propiedad. La ventana Esquema del documento que aparece a la izquierda de esta pantalla ilustra la estructura de su página Web.

Botón de puntos suspensivos



■ Para ver esta ventana, elija Esquema del documento en el menú Ver.

■ Para seleccionar un control, selecciónelo en la ventana Esquema del documento. Esto selecciona el mismo control en la vista Diseño y muestra sus propiedades en la ventana Propiedades.

Una vez que ha seleccionado el control que desea modificar, ya puede empezar a utilizar la ventana Propiedades. El primer control de esta ventana es una lista desplegable que muestra dos tipos de elementos:

■ Todos los primarios del control actual.

■ Todos los controles de servidor de la página actual.

Para seleccionar y modificar las propiedades de cualquiera de estos controles, seleccione ese control en la lista desplegable.

El segundo control de la ventana Propiedades es una barra de herramientas que muestra hasta cinco botones. Algunos botones pueden estar ausentes o atenuados, dependiendo del control. Estos botones son los siguientes, en orden:

■ Por categorías Agrupa la lista de propiedades por categoría. La figura 6-3 muestra esta opción activada para un control DropDownList. Este control tiene seis categorías: Accesibilidad, Apariencia, Comportamiento, Datos, Diseño y Varios. Las categorías de otros controles serán probablemente diferentes.

■ Alfabético Muestra todas las propiedades en orden alfabético, sin títulos de categoría.

■ Propiedades Especifica que desea que la ventana Propiedades muestre las propiedades del control, como en la figura 6-3.

■ Eventos Especifica que desea que la ventana Propiedades muestre los eventos del control.

La ventana Propiedades sólo muestra los eventos que hacen que ASP.NET ejecute código en el servidor Web. No muestra los eventos que controlará el código del explorador.

■ Páginas de propiedades Muestra un cuadro de diálogo especializado, si existe, que configura las propiedades del control. Sólo algunos controles tienen estos cuadros de diálogo.



Para modificar una propiedad, haga clic en el cuadro de valor situado a la derecha del título de la propiedad. Después, haga lo siguiente:

■ Si el valor aparece como texto, escríbalo o edítelo.

■ Si aparece una flecha desplegable a la derecha del cuadro de valor, haga clic en ella y seleccione un valor en la lista resultante.

■ Si aparece un botón de puntos suspensivos (. . .) como se muestra en la figura 6-3, haga clic en él y utilice el cuadro de diálogo que aparecerá para configurar la propiedad.

Si desea escribir código que se ejecute en el servidor Web siempre que se produzca un evento determinado, siga estos pasos.

PARA ESCRIBIR CÓDIGO DE SERVIDOR QUE RESPONDA A UN EVENTO DE PÁGINA WEB

Seleccione el control que provocó el evento.

Cuando las propiedades del control aparezcan en la ventana Propiedades, haga clic en el botón Eventos.

Haga doble clic en el evento sobre el que desea actuar (es decir, que desea controlar). Visual Web Developer cambiará a la vista Código fuente y creará un controlador de eventos ficticio (es decir,

vacío). Agregue el código de programa que desee dentro de este controlador de eventos.

Después de volver a la vista Diseño, la ventana Propiedades mostrará el nuevo nombre del controlador de eventos después del nombre del evento.

Para que la ventana Propiedades vuelva a mostrar las propiedades del control, haga clic en el botón Propiedades.

Establecer propiedades con el mouse

En la vista Diseño puede mover y cambiar el tamaño de muchos controles de la página Web utilizando los movimientos estándar del mouse de Windows. Por ejemplo:

■ Para cambiar el tamaño de un control, selecciónelo y arrastre un borde o un controlador de tamaño.

1

2

3

4

5



■ Para cambiar la posición de un control, selecciónelo primero y mueva el mouse a su interior. Cuando el puntero del mouse adopte esta apariencia:

arrastre el control hasta la nueva ubicación que desee.

Algunos controles, como el control LoginView que se muestra debajo, muestran una decoración de movimiento siempre que es posible cambiar la ubicación del control arrastrándolo. En esos casos, puede mover el control arrastrando la decoración de movimiento.

■ También puede mover controles cortando y pegando.

■ Para duplicar un control, cópielo y péguelo.

No pase por alto los comandos que aparecen en los menús contextuales cuando se hace clic con el botón secundario del mouse en un control. La mayoría de ellos deben resultarle muy familiares: Cortar, Copiar, Pegar, Eliminar, etc. Sin embargo, los comandos siguientes merecen una mención especial:

■ Estilo Muestra un cuadro de diálogo Generador de estilos donde puede configurar las propiedades CSS del control.

■ Ejecutar como control del servidor Convierte un control HTML normal en un control de servidor HTML. Debe hacerlo si desea que el código del servidor manipule el control o su contenido.

■ Editar imagen Carga una imagen en el editor que su equipo asocia al tipo de archivo de la imagen.

■ Mostrar etiqueta inteligente Muestra un menú de tareas especial que contiene comandos y configuraciones únicos de un tipo específico de control. En la próxima sección se explican las etiquetas inteligentes y los menús de tareas.

Decoración de movimiento



■ Formato automático Muestra un cuadro de diálogo Formato automático en el que puede elegir aplicar al control esquemas de formato ya creados.

■ Editar plantilla Muestra un submenú que contiene todas las plantillas aplicables al control dado. Al seleccionar una plantilla aparece un menú de tareas con comandos para modificar esa plantilla. Uno de estos comandos es Terminar edición de plantilla, que guarda los cambios y cierra el menú de tareas.

■ Actualizar Muestra la página Web actual desde el principio. Corrige todos los defectos de la presentación actual.

■ Propiedades Selecciona el control y muestra sus propiedades en la ventana Propiedades. Sin embargo, para algunos controles este comando también muestra un cuadro de diálogo especializado para configurar el control.

Establecer propiedades con etiquetas inteligentes

Algunos tipos de controles tienen una decoración especial denominada etiqueta inteligente. Al hacer clic en esta decoración se muestra un menú de tareas único de ese control. La figura 6-4 muestra la etiqueta inteligente y el menú de tareas resultante para un control GridView. Este tipo de control muestra información de un origen de datos (es decir, de una base de datos).

En este ejemplo, los comandos Formato automático y Editar plantillas funcionan como se describía en la sección anterior para los comandos normales de método abreviado. Los comandos Elegir origen de datos, Editar columnas y Agregar nueva columna son específicos del control GridView.

Si no encuentra la configuración de propiedad especializada para un control determinado, pruebe a buscar una etiqueta inteligente y su menú de tareas resultante.

Establecer propiedades con el menú Formato

Visual Web Developer tiene un menú Formato que automatiza muchas tareas de formato habituales. En su mayoría, los comandos de este menú funcionan como los del menú Formato de cualquier otro programa de Microsoft Windows®.

Figura 6-4 Algunos controles tienen etiquetas inteligentes que muestran menús de tareas especializadas para dicho control.

Etiqueta inteligente



Visual Web Developer también tiene un menú Diseño que contiene comandos para agregar y modificar tablas HTML, agregar capas (etiquetas <div>) y especificar propiedades de colocación CSS para cualquier control. El menú Diseño aparece en la figura 6-5.

En su mayoría, estos comandos funcionan en gran medida de la manera esperada. Los comandos Insertar tabla e Insertar, Eliminar, Seleccionar, Cambiar tamaño y Combinar celdas sólo se aplican a tablas HTML.

El comando Posición establece el modo de colocación CSS del control actual en Absoluta, Relativa, Estática o No establecida. Se trata de propiedades de CSS estándar.

Establecer propiedades con barras de herramientas

Visual Web Developer incluye dos barras de herramientas que modifican la apariencia y la posición de los controles. Son:

■ La barra de herramientas Formato es similar a la de las aplicaciones de Microsoft Office. Seleccione primero el texto o el control que desea modificar y haga clic en la lista desplegable o en el botón correspondiente a la propiedad que desea establecer. Muchos comandos de la barra de herramientas Formato son los mismos que los del menú Formato.

■ La barra de herramientas Diseño sólo se aplica a los controles que utilizan colocación absoluta. Se trata de una técnica de CSS que obliga a que los controles aparezcan en determinadas coordenadas x-y en la página Web.

Si desea utilizar la colocación absoluta para todos los controles de la página, siga este procedimiento.

Figura 6-5 El menú Diseño contiene distintos comandos útiles para trabajar con tablas HTML y capas.

Para establecer las propiedades superior, izquierda, alto y ancho de un control, elija Estilo en el menú Formato y haga clic en Posición.

S U G E R E N C I A



PARA UTILIZAR COLOCACIÓN ABSOLUTA PARA TODOS LOS CONTROLES DE UNA PÁGINA

Elija Posición en el menú Diseño y, después, elija Opciones de autoposición.

Cuando aparezca el cuadro de diálogo Opciones que se muestra en la figura 6-6, asegúrese de que el nodo del

árbol Diseñador HTML está abierto y que está seleccionado Posición CSS.

Para utilizar colocación absoluta para todos los controles que agregue posteriormente a una página:

■ Active la casilla de verificación Cambiar a la siguiente posición los controles agregados mediante el cuadro de herramientas y las operaciones de pegar, o arrastrar y colocar.

■ Elija En posición absoluta en la lista desplegable.

Si desea que Visual Web Developer “ajuste” las medidas de colocación absoluta a múltiplos exactos de un píxel:

■ Active la casilla de verificación Ajustar tamaños y posiciones basados en píxeles a los valores de configuración siguiente.

■ Utilice los cuadros de texto Espaciado horizontal y Espaciado vertical para especificar el tamaño de cuadrícula que desee.

Agregar o modificar hipervínculos

Visual Web Developer puede convertir en un hipervínculo cualquier imagen o texto de una página. A continuación se muestra el procedimiento.

1

2

Figura 6-6 Estas configuraciones del cuadro de diálogo Opciones controlan el uso de la colocación absoluta para los controles que agregue posteriormente a una página.

3

4



PARA AGREGAR O MODIFICAR UN HIPERVÍNCULO

Seleccione el texto o la imagen que desea convertir en un hipervínculo.

Realice una de estas acciones:

■ Elija Convertir en hipervínculo en el menú Formato.

■ Haga clic en el botón Convertir en hipervínculo de la barra de herramientas Formato.

■ Presione CTRL+L.

Cuando aparezca el cuadro de diálogo Hipervínculo, seleccione el protocolo (como http:) y entonces realice una de las acciones siguientes:

■ Haga clic en el botón Examinar para seleccionar un destino del hipervínculo del sitio Web actual

■ Escriba la dirección URL.

Haga clic en el botón Aceptar.

Para especificar otras propiedades del hipervínculo, seleccione el hipervínculo y utilice la ventana Propiedades como haría para cualquier otro control.

En resumen… En Visual Web Developer es muy sencillo agregar controles a una página Web. Dependiendo del tipo de control, puede arrastrarlo desde el Cuadro de herramientas, arrastrarlo desde el Explorador de soluciones o insertarlo utilizando un menú.

Una vez que el control forma parte de su página, puede modificarlo seleccionándolo y utilizando la ventana Propiedades, arrastrándolo o estirándolo con el mouse, haciendo clic en él con el botón secundario del mouse y utilizando un menú contextual, haciendo clic en su etiqueta inteligente y utilizando un menú de tareas, utilizando comandos de los menús principales, y utilizando la barra de herramientas Formato o Posición.

En el capítulo 7 se explican las distintas formas en que Visual Web Developer puede trabajar con código fuente.

1

2

3

4


67

Utilizar el editor de texto, 68

Almacenar, compilar y publicar código de programa, 82

Capítulo 7Trabajar concódigo fuente

Si nunca ha utilizado un editor de programación avanzado para crear páginas Web, se llevará una sorpresa y un regalo a la vez, ya que Microsoft® Visual Web Developer™ incluye el mismo editor de código fuente que las versiones avanzadas de Microsoft Visual Studio®.

El código fuente, en este sentido, no significa necesariamente código de programa ASP.NET. En Visual Web Developer, el código fuente incluye código HTML, CSS, XML y JavaScript que se ejecuta en el explorador. Esto significa que casi con toda seguridad se encontrará con el editor de código fuente y seguramente será antes de lo que cree.

Afortunadamente, a pesar de su eficacia, el editor de texto de Visual Studio es muy fácil de utilizar. Una vez que entienda sus principales características, empezará a crear rápidamente más código con menos pulsaciones de teclas y cometerá menos errores que nunca. Para ayudarle, este capítulo comienza con una introducción al editor de texto de Visual Studio (y por tanto de Visual Web Developer).

En la última sección del capítulo se explican las opciones para almacenar el código de programa ASP.NET que escriba y para compilar un sitio antes o después de copiarlo a otro servidor. No obstante, ni este capítulo ni este libro ofrecen una introducción a la programación. Si eso es lo que necesita, consulte un libro más detallado como Microsoft ASP.NET 2.0 Programming Step By Step de Microsoft Press®. 7

A veces, incluso los más partidarios de la edición WYSIWYG trabajan directamente con el código.

N O TA



Utilizar el editor de texto Visual Web Developer puede abrir cualquier archivo de un sitio en modo de texto (siempre y cuando, por supuesto, el archivo sea textual).

PARA ABRIR UN ARCHIVO EN MODO DE TEXTO

Si Visual Web Developer sólo acepta un modo de edición para un tipo de archivo determinado, no mostrará las fichas de modos de edición en la parte inferior de la ventana de edición.

N O TA

Figura 7-1 El editor de texto de Visual Web Developer tiene abundantes funciones útiles. Para los principiantes, observe la codificación en colores, la numeración de líneas y los corchetes contraíbles.

1 Abra o cree el archivo como se ha explicado en el capítulo 6.

2 Si la ficha Código fuente de la parte inferior de la ventana de

edición está presente pero no está seleccionada, selecciónela.

La figura 7-1 ilustra cómo muestra Visual Web Developer una página Web ASP.NET en la vista Código fuente.

Aunque la vista Código fuente está activa, el Cuadro de herramientas, la barra de herramientas Etiqueta rápida y la ventana Propiedades están habilitados y funcionando. Por ejemplo, puede: ■ Agregar controles

arrastrándolos desde la barra de herramientas y colocándolos en el código fuente.

■ Seleccionar etiquetas haciendo clic en sus iconos en la barra de herramientas Etiqueta rápida.

■ Ver y modificar propiedades de controles mediante la ventana Propiedades.


Capítulo 7: Trabajar con código fuente 69

El editor muestra automáticamente números de línea y también muestra los distintos tipos de código en colores diferentes. En la figura, por ejemplo, los nombres de etiquetas HTML tienen color rojo oscuro, los nombres de atributos tienen color rojo brillante, los valores de atributos aparecen en azul y el texto normal es de color negro. Hay otras convenciones similares que se aplican al código CSS, de programa y de otros tipos.

Utilizar la esquematización

Para muchos tipos de código fuente, Visual Web Developer puede contraer y expandir bloques de código. Esto reduce la acumulación en la pantalla y la necesidad de desplazamiento, y facilita el trabajo sólo con el código que le interese en cada momento. La figura 7-2 muestra el uso de la esquematización.

Para configurar la forma en que el editor de texto muestra el código, elija Opciones en el menú Herramientas. Después, cuando aparezca el cuadro de diálogo Opciones, abra el nodo Editor de texto en el cuadro de la vista de árbol que hay a la izquierda.


Figura 7-2 Los bloques de código contraídos empiezan en las líneas 5, 14 y 22. Esto tiene en cuenta los saltos en la numeración de líneas y los iconos para expandir de signo más (+).



En esta figura:

■ Las líneas 5-11 contienen un bloque <script> . . . </script>, pero el desarrollador hizo clic anteriormente en el icono Contraer, un signo menos (-), que aparece en la línea 5 de la figura 7-1. Esto indica al editor que no debe mostrar el contenido del bloque.

Si el desarrollador desea ver o modificar el bloque, puede hacer clic en el icono Expandir (+) que aparece ahora en la línea 5.

■ Las líneas 14-19 contienen la sección <head> . . . </head> de la página Web. El desarrollador también la ha contraído.

■ Las líneas 22-47 contienen el código para una tabla HTML, pero el desarrollador también ha contraído este bloque.

■ El desarrollador también podría contraer lo siguiente:

■ El bloque <asp:DropDownList> . . . </asp:DropDownList> de las líneas 53-58.

■ El bloque <p> . . . </p> de las líneas 52-59.

■ El bloque <form> . . . </form> de las líneas 21-60.

■ El bloque <body> . . . </body> de las líneas 20-61.

■ El bloque <html> . . . </html> de las líneas 13-62.

En cada caso, el desarrollador tiene que hacer clic en el icono de signo menos (-) que aparece justo a la derecha del número de línea inicial.

Si ejecuta un comando Buscar o Reemplazar en un archivo que contiene bloques contraídos, puede elegir si desea buscar o no en el texto oculto. Si busca en el texto oculto y se encuentra una coincidencia, el editor expandirá los bloques contraídos que contiene.



Utilizar la vista dividida

Al igual que los programas de Microsoft Office, Visual Web Developer puede dividir la ventana de edición en dos paneles que puede desplazar de manera independiente. Esto hace que sea más sencillo trabajar en dos bloques de código a la vez o ver un bloque mientras trabaja en otro. Para utilizar esta función, realice una de las acciones siguientes:

■ Utilice el mouse (ratón) para tomar el controlador de división que aparece justo encima de la barra de desplazamiento vertical de la ventana de edición y arrástrelo hasta la ubicación que desee. (El controlador de división es un botón diminuto sin etiqueta.)

■ Seleccione texto o establezca el punto de inserción dentro de la ventana de edición. Después, elija Dividir en el menú Ventana.

Para volver a la vista de un solo panel, realice una de las acciones siguientes:

■ Vuelva a arrastrar la barra de división a su posición original en la parte superior de la ventana.

■ Elija Quitar división en el menú Ventana.

La figura 7-3 muestra la vista dividida.

Figura 7-3 En el modo de división, el editor muestra dos secciones diferentes del mismo archivo.



Utilizar Ir a, marcadores y la Lista de tareas

El editor de texto puede situar su presentación en cualquier número de línea que desee. Para utilizar esta función, elija Ir a en el menú Edición o presione Ctrl+G. Después, escriba el número de línea que desee y haga clic en Aceptar.

Los marcadores son otra forma de ir rápidamente al código que desea. Para utilizar esta función, debe establecer un marcador al principio de cada bloque de código que vaya a editar y, después, utilizar teclas de método abreviado, botones de barra de herramientas o comandos de menú para avanzar o retroceder por los marcadores. La barra de herramientas Editor de texto y el menú Edición (en Marcadores) ofrecen diversos comandos para establecer, colocar y borrar marcadores.

La lista de tareas almacena recordatorios de tareas que debe realizar. Para agregar un recordatorio para una línea específica de código, seleccione la línea de código, elija Marcadores en el menú Editar y haga clic en Agregar acceso directo de la Lista de tareas. Para volver a esa línea de código, utilice el procedimiento siguiente.

PARA UTILIZAR UN ACCESO DIRECTO DE LA LISTA DE TAREAS

1 Elija Lista de tareas en el menú Ver.

2 Cuando aparezca la ventana Lista de tareas, elija Accesos directos en la lista desplegable que hay cerca de la parte superior.

3 La parte inferior de la ventana mostrará una lista de los accesos directos que ha guardado.

■ Para situar el editor en la línea de una tarea, haga doble clic en esa tarea.

■ Para marcar una tarea como completada, active la casilla de verificación correspondiente de la segunda columna.

■ Para eliminar una tarea, selecciónela y presione la tecla Supr.

Los marcadores de Visual Web Developer no tienen ninguna relación directa con los marcadores de HTML que define con las etiquetas <a name=”bookmark”>.

S U G E R E N C I A

Visual Web Developer recuerda los marcadores y los accesos directos de la lista de tareas de una sesión de edición a la siguiente.

N O TA



La figura 7-4 ilustra Visual Web Developer que muestra una página con dos marcadores y un acceso directo de la lista de tareas.

Aprovechar IntelliSense

¿No sería estupendo que su editor de texto escribiera automáticamente la mayoría de los nombres de etiquetas y de atributos, los valores de atributos, los apóstrofos y las etiquetas de cierre? Y ya de paso, ¿qué tal si le enseñara constantemente listas de opciones posibles? Esto es lo que hace IntelliSense®.

Los términos finalización de código y finalización de instrucciones también se refieren a IntelliSense. Sin embargo, la palabra IntelliSense es una marca comercial de Microsoft.

N O TA

Figura 7-4 La flecha azul de las líneas 21 y 25 indica marcadores. La ventana Lista de tareas muestra una tarea abierta para la línea 15.



Por ejemplo, suponga que está escribiendo código HTML. Cuando escribe el signo "menor que" (<) para una etiqueta, IntelliSense muestra una lista de selección de nombres válidos de etiquetas, como se ilustra en la figura 7-5.

Figura 7-5 Cuando se trabaja con código HTML, al escribir el signo "menor que" de una etiqueta IntelliSense muestra una lista de selección de nombres válidos de etiquetas.

Si sigue escribiendo, IntelliSense sitúa la lista de selección en la primera entrada coincidente. En la figura, por ejemplo:

■ El desarrollador ha escrito p. Por tanto, IntelliSense ha situado la lista en la primera entrada que empieza por p.

■ Si el desarrollador escribiera después r, IntelliSense iría a la primera entrada que empezara por pr y así sucesivamente.



También puede seleccionar un elemento en la lista de IntelliSense utilizando el mouse para desplazarse por la lista y haciendo clic en la entrada deseada.

Una vez que haya escrito o seleccionado el nombre de etiqueta que desee, agréguelo a la página realizando una de estas tres acciones:

■ Haga doble clic en el nombre de etiqueta correcto de la lista de selección.

■ Presione la tecla Tab.

■ Escriba cualquier carácter que, de acuerdo con las reglas de HTML, marque el final del nombre de etiqueta. Por ejemplo, escriba un espacio en blanco o un "menor que" (>).

La separación para un atributo HTML es un espacio en blanco. Si escribe un espacio en blanco inmediatamente después de cualquier nombre de etiqueta o atributo, aparecerá una lista de selección de los nombres de atributos admitidos como se muestra en el centro de la figura 7-5.

Para seleccionar un nombre de atributo, repita el procedimiento que empleó para el nombre de etiqueta. Después, escriba el signo igual (=) que conduce al valor del atributo. Si el atributo dado tiene un conjunto limitado de valores correctos, IntelliSense los mostrará en otra lista de selección como el ejemplo situado más a la derecha en la figura 7-5.

Cuando escriba el signo "menor que" (>) de la etiqueta, IntelliSense escribirá automáticamente una etiqueta de cierre. Por ejemplo, si escribe el signo "menor que" (>) al final de <p align=left>, IntelliSense escribirá automáticamente una etiqueta </p> y establecerá el punto de inserción entre las etiquetas de apertura y de cierre.

Las listas de IntelliSense aparecen porque escribe un carácter separador (o desencadenador), como un signo "mayor que" (<) en HTML. Si por alguna razón la lista de selección desaparece, al situar el cursor inmediatamente detrás del carácter separador no volverá a aparecer la lista desplegable. En su lugar, debe realizar una de las acciones siguientes:

■ Eliminar y volver a escribir el carácter de separación (en este caso, el signo "menor que").

■ Elegir IntelliSense en el menú Edición y, después, elegir Lista de miembros.

■ Presionar CTRL+J.

Para configurar el procesamiento de IntelliSense, elija Opciones en el menú Herramientas. Cuando aparezca el cuadro de diálogo Opciones, abra el nodo Editor de texto, seleccione un tipo de archivo y elija las opciones que desee bajo el título Finalización de instrucciones de la derecha.

S U G E R E N C I A

El uso de IntelliSense es siempre opcional. Si pasa por alto la lista de IntelliSense y escribe una etiqueta HTML (o cualquier otra cosa) totalmente a mano, IntelliSense no interferirá con los caracteres que escriba.

S U G E R E N C I A



Visual Web Developer es compatible con IntelliSense no sólo para HTML, sino también para XML, JavaScript, CSS y todos los lenguajes de programación .NET.

Detectar errores sintácticos

A medida que introduce código, Visual Web Developer comprueba constantemente si hay errores de sintaxis. Después, para cada error:

Al principio, IntelliSense puede parecer más un generador de elementos emergentes de Internet que una herramienta de productividad. Sin embargo, después de un poco de práctica, la mayoría de los desarrolladores no pueden vivir sin él. IntelliSense ahorra escritura, mejora la precisión y ahorra horas de consultar valores y comprobar la ortografía.

S U G E R E N C I A

Figura 7-6 Visual Web Developer detecta y resalta los errores de sintaxis en el código fuente.

■ Muestra una línea ondulada de color rojo bajo el código erróneo.

■ Muestra el mensaje de error, el número de línea y el nombre de archivo en una ventana Lista de errores. Si hace doble clic en este mensaje, el editor mostrará la línea donde está el problema.

■ Muestra el mensaje de error como una información sobre herramientas si deja el mouse sobre el código erróneo. En la figura 7-6 se muestra cómo funciona esto en la práctica.

. Para elegir la versión del explorador o la especificación HTML (es decir, el esquema) que desea utilizar para crear y validar páginas Web, siga el procedimiento que se describe a continuación.

Visual Web Developer informará frecuentemente de los errores de sintaxis mientras está escribiendo una etiqueta HTML o una instrucción de unprograma. Pero esto no debe preocuparle. El mensaje de error desaparecerá cuando termine de escribir la etiqueta o la instrucción.

S U G E R E N C I A



PARA ELEGIR UN ESQUEMA HTML

1 Elija Opciones en el menú Herramientas.

2 Cuando aparezca el cuadro de diálogo Opciones, abra Editor de texto, HTML y Validación en el cuadro de la vista de árbol que hay a la izquierda.

3 Seleccione el explorador o la especificación HTML que desee en la lista desplegable Destino de la derecha.

También puede elegir una versión del explorador o una especificación HTML con la lista desplegable de la barra de herramientas Edición de código fuente HTML.

Buscar y reemplazar texto

Visual Web Developer ofrece comandos extraordinariamente eficaces para buscar y reemplazar texto.

PARA UTILIZAR LOS COMANDOS BUSCAR Y REEMPLAZAR

1 Elija Buscar y reemplazar en el menú Edición.

2 Elija uno de los subcomandos disponibles. Aparecerá un cuadro de diálogo Buscar y reemplazar como el que se muestra en la figura 7-7.

3 Visual Web Developer ofrece cinco comandos Buscar y reemplazar. Si descubre que ha elegido el comando erróneo, utilice las listas desplegables de la parte superior del cuadro de diálogo para

seleccionar el que desee.

Para mostrar la barra de herramientas Edición de código fuente HTML, elija Barras de herramientas en el menú Ver y, después, elija Edición de código fuente HTML.

S U G E R E N C I A



Los cinco comandos Buscar y reemplazar son:

■ Búsqueda rápida Busca todas las apariciones de una cadena dada en el documento actual, en la selección actual, en todos los documentos abiertos o en el proyecto actual. Hay dos modos de búsqueda.

■ Buscar siguiente Avanza secuencialmente hasta la siguiente aparición del texto dado cada vez que hace clic en un botón Buscar siguiente o (si ha cerrado el cuadro de diálogo Buscar y reemplazar) cada vez que presiona F3.

■ Marcador en todo En una operación, establece un marcador de Visual Web Developer en cada línea que contiene el texto dado. No obstante, este modo no está disponible cuando se utiliza Búsqueda rápida para buscar en todo un sitio Web.

Para obtener más información acerca de los marcadores de Visual Web Developer, consulte la sección “Utilizar Ir a, marcadores y la Lista de tareas” anteriormente en este capítulo.


Figura 7-7 Hay dos formatos del cuadro de diálogo Buscar y reemplazar. El de la izquierda realiza una Búsqueda rápida y el de la derecha realiza una operación Buscar y reemplazar en archivos.



■ Reemplazo rápido Funciona como Búsqueda rápida, pero reemplaza opcionalmente cada aparición del texto de búsqueda con el texto de reemplazo especificado. Utilice estos comandos para desplazarse por los resultados de la búsqueda:

■ Buscar siguiente Va a la siguiente aparición del texto de búsqueda. No se reemplaza nada.

■ Reemplazar Reemplaza la instancia actual del texto de búsqueda y va a la siguiente aparición.

■ Reemplazar todo Busca en todo el ámbito el texto de búsqueda y reemplaza cada instancia con el texto de reemplazo. Cuando termine este proceso, el editor mostrará una versión sin guardar de cada archivo modificado. De esta forma puede deshacer el comando Reemplazar todo o guardar únicamente los archivos deseados.

■ Buscar en archivos Busca todas las apariciones de una cadena dada en el documento actual, en todos los documentos abiertos o en el sitio Web actual. También puede restringir la búsqueda por extensión del nombre de archivo. Hay dos diferencias principales entre este comando y Búsqueda rápida:

■ A diferencia de Búsqueda rápida, este comando no puede buscar apariciones de una en una. Siempre realiza una búsqueda de todo.

■ El comando Buscar en archivos no abre los archivos que contienen el texto especificado. En su lugar, enumera el nombre de archivo y el número de línea de cada instancia en una de dos ventanas posibles: Resultados de la búsqueda 1 o Resultados de la búsqueda 2.

■ Reemplazar en archivos Busca texto como el comando Buscar en archivos, pero abre cada archivo que contiene el texto de búsqueda y lo reemplaza con el texto que especifique.

Al igual que el comando Buscar en archivos, Reemplazar en archivos informa de cada instancia del texto de búsqueda en la ventana Resultados de la búsqueda 1 o Resultados de la búsqueda 2 (la que usted desee). Al igual que el comando Reemplazo rápido, Reemplazar en archivos deja abiertos estos archivos y no los guarda. De esta forma puede deshacer los cambios o guardar únicamente los archivos deseados.

■ Buscar símbolo Busca texto contenido en nombres de símbolo que asigna a variables, nombres de procedimientos y otros elementos de programación. No busca instancias del texto de búsqueda que aparezcan en comentarios o en literales.

Para ver cualquier línea incluida en la ventana Resultados de la búsqueda 1 o Resultados de la búsqueda 2, haga doble clic en esa línea del informe.

S U G E R E N C I A



Dar formato al código fuente

Cuando agrega, cambia la ubicación, configura o elimina controles de página Web en la vista Diseño, Visual Web Developer actualiza de forma natural el código HTML. Al hacerlo, sigue unas reglas predefinidas para sangrar ciertas etiquetas, agregar saltos de línea y aplicar otro formato al código.

La mayoría de los desarrolladores desean que Visual Web Developer utilice las mismas reglas que ellos siguen cuando editan código HTML a mano. Si Visual Web Developer no está aplicando formato al código HTML de la manera deseada, siga estos pasos.

PARA ESTABLECER REGLAS PARA APLICAR FORMATO AL CÓDIGO HTML

1 Elija Opciones en el menú Herramientas.

2 Cuando aparezca el cuadro de diálogo Opciones que se muestra en la figura 7-8, abra los nodos Editor de texto y HTML en la vista de árbol que hay a la izquierda.

Figura 7-8 Este panel del cuadro de diálogo Opciones configura el formato de todas las etiquetas HTML y los controles de servidor.



3 Seleccione todos los nodos que hay bajo HTML y examine las configuraciones que aparecen a la derecha. Estos nodos son:

■ General Controla opciones para mostrar código HTML en la vista Código fuente. Se refiere a opciones (como finalización de instrucciones (IntelliSense), ajuste de palabras y números de línea) que no tienen ningún efecto sobre el código HTML guardado.

■ Tabulaciones Controla la unidad estándar de sangría. Por ejemplo, puede elegir si desea aplicar sangría o no, cuánto desea sangrar y si utilizará espacios en blanco o caracteres de tabulación para la sangría.

■ Formato Controla el modelo de mayúsculas de los nombres de etiquetas y atributos, la inserción automática de comillas, la inserción automática de etiquetas de cierre y la inserción de saltos de línea para las etiquetas que superan una longitud especificada. Estos controles son visibles en la figura 7-8.

■ Varios Controla si Visual Web Developer asignará un atributo id= único a cada control que pegue y si cambiará el formato del código HTML que pegue.

■ Validación Controla qué especificación HTML utilizará Visual Web Developer cuando compruebe la sintaxis del código y qué tipo de errores desea que se incluyan en los informes.

Figura 7-9 Este cuadro de diálogo configura el formato de las etiquetas HTML y los controles de servidor individuales.

4 Para configurar las opciones de formato y presentación para una etiqueta determinada, haga clic en el nodo

Formato bajo HTML y, después, haga clic en el botón Opciones específicas de etiqueta. Aparecerá el cuadro de diálogo Opciones específicas de etiqueta que se muestra en la figura 7-9.

5 En el cuadro de la vista de árbol de la izquierda, seleccione el nombre de etiqueta que desea configurar y

utilice los controles de la derecha para especificar las configuraciones que desee. Por ejemplo, especifique si la etiqueta suele tener una etiqueta de cierre diferente (como <p> . . . </p>), si desea insertar saltos de línea antes y después de la etiqueta, si desea sangrar el contenido de la etiqueta, si desea habilitar la esquematización y qué color desea utilizar cuando se muestre la etiqueta.

6 Haga clic en el botón Aceptar para guardar los cambios.

Si desea cambiar el formato de algún código HTML existente, selecciónelo en la vista Código fuente, haga clic con el botón secundario del mouse en la selección y elija Dar formato a la selección en el menú contextual. Para seleccionar toda la página, presione Ctrl+A.

S U G E R E N C I A



Buscar más comandos de edición

El menú Edición ofrece una serie de comandos útiles en su submenú Avanzados. Para utilizar cualquiera de estos comandos, seleccione el código que desee modificar, elija Avanzados en el menú Edición y seleccione el comando que desee.

La barra de herramientas Edición de código fuente HTML proporciona acceso rápido a seis comandos que ya se han descrito en las secciones anteriores. Para mostrar u ocultar esta barra de herramientas, elija Barras de herramientas en el menú Ver y, después, elija Edición de código fuente HTML.

La barra de herramientas Editor de texto contiene botones para cuatro comandos de IntelliSense, cuatro comandos de edición de texto y ocho comandos de marcadores. A diferencia de la barra de herramientas Edición de código fuente HTML, esta barra de herramientas funciona con cualquier tipo de código. Para mostrarla, elija Barras de herramientas en el menú Ver y, después, elija Editor de texto.

Almacenar, compilar y publicar código de programa Tarde o temprano, la mayoría de los desarrolladores de sitios Web escriben código de programa de Microsoft Visual Basic® .NET, C# o J# que se ejecuta en el servidor Web. Si lo hace, puede elegir entre dos lugares para almacenar el código de programa.

■ En la línea Con este método, el código de programa de una página Web reside en el mismo archivo que el código HTML. En concreto, reside entre las etiquetas <script runat=”server”> y </script>.

Para utilizar este método, asegúrese de que la casilla de verificación Colocar el código en un archivo independiente está desactivada cuando cree una nueva página Web y que aparece el cuadro de diálogo Agregar nuevo elemento.

■ Código subyacente En este caso, el código HTML y el código de programa se almacenan en archivos diferentes. Por ejemplo, el código HTML podría estar en un archivo .aspx y el código de C# podría estar en un archivo .cs.

Para utilizar este método, active la casilla de verificación Colocar el código en un archivo independiente.

En esta sección se da por supuesto que tiene conocimientos prácticos de la programación en ASP.NET. Si no los tiene, probablemente deba pasar al capítulo siguiente. No necesita este material para entender el resto del libro.

N O TA



Si elige el método Código subyacente, la directiva @ Page de la parte superior de la nueva página contendrá los atributos CodeFile e Inherits como se muestra a continuación:

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

CodeFile=”mypage.aspx.cs” Inherits=”mypage” %>

El atributo CodeFile especifica el nombre del archivo que contiene el código fuente de programa. El atributo Inherits especifica el nombre de clase codificado de la manera siguiente en C#:

public partial class mypage : System.Web.UI.Page{}

o de esta forma en Visual Basic .NET: Partial Class mypage Inherits System.Web.UI.Page

Si todo el código fuente del programa reside en la línea, o en una carpeta denominada app_code dentro de la raíz del sitio, no tiene que generar (o compilar) el sitio antes de ejecutarlo localmente o de copiarlo a otro servidor. ASP.NET compilará cada archivo la primera vez que un visitante del Web solicite una página que lo necesite. Esto le ahorra un paso, pero significa que el código fuente del programa debe estar presente en cualquier servidor Web que ejecute su sitio.

Si el código fuente del programa reside en otro lugar, tendrá que elegir Generar sitio Web en el menú Generar y asegurarse de cargar la carpeta /bin resultante junto con el resto del sitio. Sin embargo, no necesitará cargar los archivos de código fuente del programa; esto puede reducir el riesgo de robos o manipulaciones.

Si mueve el archivo de código subyacente a otra carpeta, debe corregir el atributo CodeFile de la directiva @ Page.

Si cambia el nombre del archivo .aspx, debe cambiar también el nombre del archivo de código subyacente y el nombre de clase de código subyacente.

S U G E R E N C I A



En resumen… Cuando se edita código fuente como código HTML, XML, CSS y de programa, Visual Web Developer utiliza el mismo editor profesional que las versiones completas de Visual Studio. Esto le brinda acceso a características de edición profesionales como codificación por colores, esquematización, vista dividida, ir a un número de línea, marcadores, una lista de tareas, IntelliSense, comprobación de sintaxis y formato de código.

En el próximo capítulo se explica cuándo podría ser interesante crear sus propios controles de servidor y cómo hacerlo.


85

Capítulo 8Crear y utilizar controles de usuario Web

Las páginas Web del mismo sitio suelen utilizar componentes visuales estándar como encabezados, barras de menús y pies de página. Normalmente, estos componentes son idénticos, o casi idénticos, de una página a otra. Esto unifica el sitio y mejora la continuidad general.

Los desarrolladores más experimentados desarrollan esos componentes una vez y utilizan los resultados en varias páginas. Esto garantiza la uniformidad y simplifica el mantenimiento. Cuando más adelante cambie el sitio, el desarrollador actualiza una copia central y los resultados aparecen en cada página.

Microsoft® ASP.NET 2.0, y por tanto Microsoft Visual Web Developer™, tienen dos características que resultan especialmente útiles para implementar contenido estándar.

■ Controles de usuario Web Muestran áreas de contenido estándar o programado dentro de una página.

■ Páginas principales Llenan toda una página con contenido estándar o programado, excepto una o más áreas libres donde puede aparecer contenido variable.

En el resto de este capítulo se explica cómo crear y utilizar controles de usuario Web. En el próximo capítulo se explicará cuándo y cómo utilizar páginas principales. 8

Crear y diseñar controles de usuario Web, 86

Agregar controles de usuario Web a una página, 88

Utilizar controles deusuario Web de manera eficaz, 90



Crear y diseñar controles de usuario Web Siempre que desee que aparezca el mismo contenido (o casi el mismo contenido) en varias páginas, considere la posibilidad de utilizar un control de usuario Web. La creación de uno de estos controles es casi como la creación de una página Web.

CREAR UN CONTROL DE USUARIO WEB

1 En Visual Web Developer, abra el sitio donde se mostrará el control de usuario.

2 Elija Nuevo archivo en el menú Archivo.

3 Cuando aparezca el cuadro de diálogo Agregar nuevo elemento, rellene estos campos de formulario:

■ Plantillas Seleccione Control de usuario Web.

■ Nombre Especifique un nombre de archivo para el control. La extensión predeterminada y necesaria del nombre de archivo es .ascx.

■ Lenguaje Elija el lenguaje para el código de programa que piense escribir: Microsoft Visual Basic®, Visual C#® o Visual J#®. En caso de duda, elija el mismo lenguaje que utilizó para el resto del sitio.

■ Colocar el código en un archivo independiente Active esta casilla de verificación si desea conservar el código HTML y el código de programa para este control en archivos independientes. Desactívela para que ambos tipos de código estén en el archivo .ascx.

4 Haga clic en el botón Agregar para crear el control.


Capítulo 8: Crear y utilizar controles de usuario Web 87

La forma de agregar controles a un control de usuario Web es la misma que para agregarlos a una página Web: puede arrastrarlos desde el Cuadro de herramientas, puede insertarlos desde el menú Diseño o puede utilizar cualquier otro método de los que se describen en el capítulo 6. El procedimiento siguiente, por ejemplo, crea un control de usuario Web que muestra la fecha actual.

PARA CREAR UN CONTROL DE USUARIO WEB QUE MUESTRE LA FECHA ACTUAL

1 Utilizando el procedimiento de cuatro pasos descrito anteriormente, cree un nuevo control de usuario Web denominado TodayIs.ascx.

Muestre el control TodayIs.ascx en la vista Diseño.

3 Establezca el punto de inserción en la esquina superior izquierda de la ventana de edición y escriba Today is:

4Examine el grupo Estándar del Cuadro de herramientas y busque el icono correspondiente a un control Literal. Arrastre este icono fuera del Cuadro de herramientas y colóquelo detrás del texto del

paso 3 (Today is:).

5Asegúrese de que en la ventana Propiedades se muestran las propiedades para el nuevo control Literal: Literal1 System.Web.UI.WebControls.Literal.

6 En la ventana Propiedades, cambie el valor de la propiedad ID de Literal1 a litTodayIs.

Haga clic en la ventana de edición principal y presione F7. Se mostrará el código de programa del control de usuario Web en la vista Código fuente.

Ahora deben aparecer dos listas desplegables en la parte superior de la ventana de edición.

2

7

8



■ En el caso de Visual Basic .NET, seleccione Page en la lista desplegable de la izquierda y Load en la lista desplegable de la derecha. Después, escriba la instrucción que se muestra debajo en negrita (Visual Web Developer muestra en texto normal el código).

Protected Sub Page_Load(ByVal sender As Object, _

ByVal e As System.EventArgs)

litTodayIs.Text = DateTime.Today.ToLongDateString

End Sub

■ Si se trata de C#, seleccione TodayIs en la lista desplegable de la izquierda y Page_Load(object sender, EventArgs e) en la lista desplegable de la derecha. Después, escriba la instrucción que se muestra debajo en negrita (Visual Web Developer muestra en texto normal el código).

protected void Page_Load(object sender, EventArgs e)

{

litTodayIs.Text = DateTime.Today.ToLongDateString();

}

La instrucción que escriba obtendrá la fecha actual del sistema operativo, le aplicará formato para su presentación y almacenará el resultado en el control Literal que agregó en los pasos 4, 5 y 6.

9 Elija Guardar TodayIs.ascx en el menú Archivo para guardar el control. En la próxima sección se explica cómo probarlo.

Agregar controles de usuario Web a una página Puede agregar un control de usuario Web a cualquier página Web ASP.NET del mismo sitio. El procedimiento es muy sencillo.



PARA AGREGAR UN CONTROL DE USUARIO WEB A UNA PÁGINA WEB ASP.NET

1 Abra la página ASP.NET donde desee que se muestre el control de usuario Web.

2 Arrastre el control de usuario Web desde la ventana Explorador de soluciones y colóquelo donde desee que aparezca en la página Web abierta.

Para probar el control de usuario Web, haga clic con el botón secundario del mouse (ratón) en cualquier página que contenga el control y elija Ver en el explorador en el menú contextual. Debe obtener unos resultados como los que se muestran en la figura 8-1.

También puede agregar un control de usuario Web a otro control de usuario Web.

S U G E R E N C I A

Figura 8-1 Para probar un control de usuario Web, muestre una página que lo contenga.



Utilizar controles de usuario Web de manera eficaz Los controles de usuario Web suelen ser fáciles de utilizar. No obstante, pueden surgir problemas. Los temas de esta sección responden a algunas preguntas frecuentes y ofrecen sugerencias para tratar de resolver algunos problemas típicos.

Descripción de las etiquetas de los controles de usuario Web

La primera vez que agrega un control de usuario Web a una página, Visual Web Developer agrega dos etiquetas:

■ Una etiqueta @ Register Esta etiqueta aparece delante del código fuente HTML de la página. Asocia el nombre de archivo de un control de usuario Web a un prefijo y un nombre de etiqueta. He aquí un ejemplo:

<%@ Register Src=”TodayIs.ascx” TagName=”TodayIs” TagPrefix=”uc1” %>

Un control de usuario Web sólo necesita una declaración de este tipo por página, aunque el control aparezca varias veces.

■ Una etiqueta de control de usuario Web Esta etiqueta aparece en el lugar de la página donde desea que aparezca el control de usuario Web. El prefijo y el nombre de etiqueta de la declaración @ Register identifican el tipo de control. He aquí un ejemplo:

<uc1:TodayIs ID=”TodayIs1” runat=”server” />

Una página requiere una etiqueta como esta para cada instancia del control de usuario Web que muestra.

Por supuesto, el usuario no recibe la directiva @ Register ni la etiqueta de control de usuario Web. Estas etiquetas simplemente indican a ASP.NET que debe cargar en memoria un objeto de control de usuario Web en el servidor Web.

Cuando ASP.NET envía la página al visitante del Web, indica al objeto de control de usuario de Web que debe representarse a sí mismo como código HTML. Este código HTML, no la etiqueta original, es lo que ASP.NET envía al visitante del Web.



Utilizar estilos CSS en controles de usuario Web

Cuando diseñe un control de usuario Web, tenga en cuenta que ASP.NET combinará el resultado del control en la sección <body> de cualquier página Web que utilice el control. Por tanto, el control de usuario Web no tiene ninguna sección <head> propia, ni tampoco tiene etiquetas <body> y </body>.

Esto resulta especialmente evidente si, al igual que los desarrolladores Web más experimentados, utiliza estilos CSS para dar formato a sus páginas. Puesto que los estilos específicos de la página y los vínculos a archivos compartidos de hojas de estilo suelen residir en la sección <head>, sus reglas de estilo no estarán disponibles normalmente cuando diseñe un control de usuario Web. Esto conduce a una experiencia menor que WYSIWYG. Hay dos alternativas para tratar este problema:

■ Aplicar estilos CSS de la forma habitual, ignorando el hecho de que no parecen surtir efecto. Para comprobar la apariencia final del control, vaya a una página que lo contenga.

■ Agregar un bloque <style></style>, vínculos a hojas de estilos compartidas o ambos al control de usuario Web. Esto simplificará la edición, pero puede agregar estilos redundantes o no deseados en las páginas que utilizan el control.

Tenga en cuenta que cuando varias páginas utilizan el mismo control de usuario, cada página puede tener sus propios estilos. En esos casos, un control de usuario Web que utiliza estilos CSS adopta la apariencia de cada página. Esta es una razón por la que Visual Web Developer no intenta aplicar estilos CSS predeterminados a los controles de usuario Web.

Ajustar direcciones URL relativas Cuando varias páginas utilizan el mismo control de usuario Web y esas páginas residen en carpetas diferentes, las direcciones URL relativas que funcionan para una página quizás no funcionen en otra página distinta. Por ejemplo:

■ En el caso de una página que reside en la raíz de la aplicación, para mostrar el logotipo de la empresa puede ser necesaria esta etiqueta: <img src=”images/logo.gif”>

■ En el caso de una página que reside en una subcarpeta de la aplicación, para mostrar el mismo logotipo se necesitará esta etiqueta:

<img src=”../images/logo.gif”>



Esto supone un problema si integra en el código ubicaciones relativas en etiquetas <img src=”…”> y <a href=”…”> dentro de un control de usuario Web. Cualquier ruta de acceso relativa que codifique será errónea si la página Web que utiliza el control reside en una carpeta distinta de la que espera.

Para evitarlo, codifique las etiquetas <img> y <a> que utilicen rutas de acceso relativas con atributos runat=”server”, y comience la ubicación relativa con una tilde (~) y una barra diagonal (/). A continuación se describen algunos ejemplos:

<a href=”~/companyinfo.aspx” runat=”server”>

<img src=”~/images/logo.gif” runat=”server”></a>

Cuando ASP.NET representa estos controles, reemplaza las tildes (~) con la ruta de acceso a la raíz de la aplicación. Si por ejemplo la raíz es /myapplication, las etiquetas serán como ésta cuando las reciba el explorador:

<a href=”/myapplication/companyinfo.aspx”>

<img src=”/myapplciation/images/logo.gif”></a>

Como las ubicaciones de href= y src= son ahora relativas a la raíz de la aplicación, funcionarán correctamente independientemente de dónde resida la página.

Codificar atributos para controles de usuario Web El código de programa de un control de usuario Web puede utilizar atributos codificados en la etiqueta que carga el control. Por ejemplo, podría escribir el código de programa para el control TodayIs en Visual Basic .NET de la manera siguiente:

Public DateFormat As String

Protected Sub Page_Load(ByVal sender As Object,


If LCase(DateFormat) = “short” Then

litTodayIs.Text = DateTime.Today.ToShortDateString()

Else

litTodayIs.Text = DateTime.Today.ToLongDateString()

End If

End Sub

Al declarar una variable o una función como Public (o, en C#, como public) hace que sea accesible fuera de la clase que la declara. Las variables y funciones Private (o private) sólo son accesibles dentro de la clase que las declara.

N O TA



Como es Public, la variable DateFormat recibirá el valor de cualquier atributo DateFormat= que codifique en la etiqueta que carga el control. En el ejemplo siguiente, la primera etiqueta <uc2:TodayIsVb> muestra una fecha larga (el valor predeterminado) y la segunda muestra una fecha corta.

<%@ Register Src=”TodayIs.ascx” TagName=”TodayIs” TagPrefix=”uc2” %>

<uc2:TodayIsVb ID=”TodayIsVb1” runat=”server” />

<uc2:TodayIsVb ID=”TodayIsVb2”runat=”server” DateFormat=”short” />

Si sabe cómo escribir el código de programa necesario de Visual Basic o C#, también puede utilizar propiedades públicas de esta forma.

En resumen… Los controles de usuario Web ofrecen una forma rápida y sencilla de crear contenido una vez y utilizarlo en varias páginas Web. Para crear un control de usuario Web, empiece con una plantilla Control de usuario Web y agregue contenido como haría para una página Web completa. Para incluir el contenido del control en una página ASP.NET, abra primero la página en la vista Diseño, arrastre el control desde el Explorador de soluciones y colóquelo en su sitio. Los controles de usuario Web tienen una extensión de archivo .ascx.

En el próximo capítulo se explica cómo utilizar páginas principales, otra forma de replicar contenido en varias páginas.


95

Capítulo 9Utilizar páginas principales para centralizar el diseño de página

Los controles de usuario Web son muy útiles para realizar diseños repetitivos una vez y utilizarlos en varias páginas. Esta utilidad radica en la replicación de partes de páginas; no son tan útiles para replicar el diseño de toda una página. Para entender por qué es así, considere la estructura del diseño general de un sitio:

■ Los elementos de diseño predominantes suelen ocupar los bordes de cada página. Los controles de usuario Web suelen residir en el centro de la página o a lo largo de una pequeña parte de un borde.

■ Un diseño de sitio suele incluir archivos de hojas de estilos, secuencias de comandos y otros elementos que deben aparecer en la sección <head> de cada página. Los controles de usuario Web no tienen ninguna sección <head> y, a menos que realice una programación compleja, no afectan a la sección <head> de las páginas que sí las contienen.

Las páginas principales, una nueva característica de ASP.NET 2.0, son mucho mejores que los controles de usuario Web para controlar la apariencia general de un sitio. Las páginas principales controlan todos los aspectos de una página, excepto aquellas áreas que designe que deben presentar contenido variable. Las páginas principales son auténticas plantillas de página, no solamente segmentos de página. 9

Crear una página principal, 96

Aplicar páginas principales a páginas de contenido, 100

Utilizar páginas principales de manera eficaz, 103



Una página de contenido es cualquier página que utiliza una página principal. Cada vez que un visitante solicita una página de contenido, ASP.NET carga la página principal, la combina con lo que proporciona la página de contenido y envía el resultado combinado al visitante del Web. La combinación de la página principal y la página de contenido sobre la marcha (es decir, cada vez que un visitante solicita la página) tiene dos consecuencias importantes.

■ El visitante siempre recibe versiones actuales del contenido tanto de la página principal como de la página de contenido.

■ La página combinada tiene todas las capacidades de cualquier página ASP.NET convencional. Por ejemplo, las páginas principales, las páginas de contenido o ambas pueden contener los controles de servidor o la programación personalizada que desee. Esto significa que puede personalizar cualquier parte de la página sobre la marcha cada vez que un visitante solicite la página.

1 Siga las instrucciones del capítulo 3 para crear un nuevo sitio en una carpeta denominada

ContosoMagic.

Si desea seguir los ejemplos con precisión, cree un sitio Web de sistema de archivos. No obstante, un sitio Web de IIS local o remoto funcionará perfectamente.

2 Elimine las páginas Web que contenga el sitio. Por ejemplo, elimine la página default.aspx

que Microsoft Visual Web Developer™ crea de manera predeterminada.

3 En la ventana Explorador de servidores, haga clic con el botón secundario del mouse en la

carpeta raíz del sitio (\ContosoMagic\) y elija Agregar nuevo elemento en el menú contextual.

Crear una página principal El mejor momento para diseñar las páginas principales es cuando empieza a diseñar un sitio nuevo. En este libro, el sitio corresponderá a una empresa ficticia denominada Contoso Magic. En teoría, esta empresa proporciona equipo y servicios para actuaciones de magos. Para crear este sitio utilizando páginas principales, siga estos pasos.

PARA CREAR UN SITIO UTILIZANDO PÁGINAS PRINCIPALES


Capítulo 9: Utilizar páginas principales para centralizar el diseño de página 97

4 Cuando aparezca el cuadro de diálogo Agregar nuevo elemento, rellénelo de la manera siguiente:

■ Plantillas Seleccionar la página principal

■ Nombre Acepte el nombre predeterminado MasterPage.master.

■ Lenguaje Elija su lenguaje de programación favorito: Microsoft® Visual Basic®, Visual C#® o Visual J#®. El código de ejemplo utiliza Visual C#.

■ Colocar el código en un archivo independiente Para reproducir el sitio de ejemplo, desactive esta casilla de verificación.

5 Haga clic en el botón Agregar para crear la página principal.

De manera predeterminada, Visual Web Developer crea una página principal que está en blanco, excepto un control ContentPlaceHolder. Este tipo de control reserva espacio para contenido variable. La figura 9-1 ilustra la página principal predeterminada.

Figura 9-1Una nueva página principal sólo contiene un elemento: un control ContentPlaceHolder que recibe contenido variable.

Si lo desea, puede eliminar el control ContentPlaceHolder predeterminado, agregar otros controles ContentPlaceHolder o hacer ambas cosas. No obstante, cada página principal debe tener al menos un control ContentPlaceHolder. El icono del Cuadro de herramientas para un control ContentPlaceHolder aparece en el grupo Estándar, cerca de la parte inferior.

S U G E R E N C I A



La figura 9-2 muestra la página principal terminada para el sitio de Contoso Magic. Para un sitio real, probablemente desee desarrollar algo más atractivo, pero este sencillo diseño es suficiente para mostrar las capacidades de Visual Web Developer.

El diseño de una página principal es muy parecido al diseño de una página ASP.NET normal. Se aplican todas las técnicas explicadas en los capítulos 6 y 7. El diseño de ejemplo utiliza tres tablas HTML, cada una de las cuales tiene los valores border y cellspacing establecidos en cero (0) y width establecido en el 100 por cien.

La primera tabla muestra el titular de página. Tiene tres filas y tres columnas, que se utilizan de la manera siguiente:

Figura 9-2Puede diseñar páginas principales como diseñaría páginas de contenido individuales. No obstante, debe incluir al menos un control ContentPlaceHolder en cada página principal.

Al establecer los anchos de la tabla exterior en el 100 por cien garantiza que la página Web siempre llenará la ventana del explorador. Si lo establece en un tamaño fijo, como 750 píxeles, las proporciones entre el alto y el ancho serán constantes. La elección depende de usted.

S U G E R E N C I A

■ Las tres celdas de la primera fila están combinadas. La celda combinada muestra un archivo GIF transparente de 5x5 píxeles. Esto reduce el alto de la fila a menos de un carácter predeterminado. Una regla CSS denominada bordertxt controla el color de fondo y el color de fuente.

■ En la fila central: ■ La celda izquierda muestra un archivo de logotipo de 80x80 píxeles denominado

magichat.gif. ■ La celda central muestra el texto constante Contoso Magic, un salto de línea y un

control de servidor Literal denominado litBannerTitle. ■ La celda derecha muestra un archivo GIF transparente estirado hasta 80x80 píxeles.

Esto garantiza que las celdas izquierda y derecha tengan el mismo tamaño y, por tanto, que la celda central esté siempre centrada en la ventana del explorador.



Para las tres celdas, una regla CSS denominada bannertxt establece el tipo de letra, el tamaño de fuente y el color de fondo.

■ La tercera fila es igual que la primera.

El control litBannerTitle muestra el nombre textual de cada página. Este nombre proviene de una propiedad denominada Page.Title que asigna para cada página de contenido. (En la próxima sección se explica con más detalle.)

En Visual C#, para copiar el nombre de página textual de la propiedad Page.Title a la propiedad litBannerTitle.Text se requiere el código siguiente:

<script runat=”server”>

protected void Page_Load(object sender, EventArgs e)

{

litBannerTitle.Text = Page.Title;

}

</script>

En Visual Basic .NET, para realizar la misma tarea se requiere este código: <script runat=”server”>

Protected Sub Page_Load(ByVal sender As Object, _


litBannerTitle.Text = Page.Title

End Sub

</script>

En cada caso: ■ Las etiquetas <script runat=”server”>…</script> definen un bloque de código en la línea

(es decir, un bloque de código que reside dentro de la página Web pero que se ejecuta en el servidor Web).

■ La siguiente instrucción define un controlador de eventos Page_Load. Este evento se produce (y desencadena el código del controlador de eventos) en cuanto la página se carga completamente en memoria y está preparada para funcionar.

■ La tercera instrucción copia el texto de Page.Title a la propiedad Text del control litBannerTitle para su eventual transmisión al explorador.

Para obtener información acerca de cómo crear reglas CSS, consulte el capítulo 10, “Utilizar hojas de estilos en cascada”.




La segunda tabla contiene también tres columnas, pero sólo una fila. He aquí cómo se utiliza cada columna. ■ La primera columna tiene un ancho del 1 por ciento. Muestra el mismo archivo GIF

transparente que la primera tabla, estirándolo a 1 píxel de ancho y 325 píxeles de alto. Esto deja un pequeño margen izquierdo e impide que las páginas relativamente vacías parezcan desangeladas. La regla CSS bordertext proporciona los colores de fondo y de fuente.

■ La segunda columna contendrá eventualmente un menú DHTML, pero por ahora está vacía. Un atributo HTML establece su ancho en el 1 por ciento, pero el mismo archivo GIF transparente, estirado ahora hasta 100 píxeles de ancho y 1 píxel de alto, controla realmente su ancho. La regla CSS bordertext proporciona los colores de fondo y de fuente.

■ La tercera columna, que contiene el control ContentPlaceHolder, tiene un ancho del 98 por ciento. Aquí es donde aparecerá el contenido de cada página.

La tercera tabla contiene una única celda que muestra el pie de página. Una regla CSS denominada footertxt controla los colores de fondo y de fuente, así como el tamaño de fuente.

Por supuesto, diseñará sus páginas principales de acuerdo con sus propias necesidades. El único requisito es que cada página principal debe contener al menos un control ContentPlaceHolder.

Para ver instrucciones acerca de cómo agregar tablas, imágenesy otros objetos a una página, consulte el capítulo 6, “Crear y modificar páginas Web”.

V E A TA M B I É N

Aplicar páginas principales a páginas de contenido La forma más sencilla y mejor de utilizar páginas principales consiste en especificarlas al crear una página nueva.

PARA ESPECIFICAR UNA PÁGINA PRINCIPAL

1 Abra el sitio que contiene la página principal. (La nueva página de contenido también residirá en este sitio.)

2 En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta donde desee que resida la nueva página de contenido y elija Agregar nuevo elemento en el menú

contextual.



3 Cuando aparezca el cuadro de diálogo Agregar nuevo elemento, rellénelo como se indica en el capítulo 6. No obstante, no olvide especificar lo siguiente:

■ Plantilla: Web Form.

■ Seleccionar la página principal: Activada.

4Haga clic en el botón Agregar. Después, cuando aparezca el cuadro de diálogo Seleccionar una página principal que se muestra en la figura 9-3, seleccione la página principal que desee.

5 Para crear la página, haga clic en el botón Aceptar.

Figura 9-3 Utilice este cuadro de diálogo para especificar la página principal que debe utilizar una nueva página de contenido.

Cuando vea la nueva página en la vista Diseño, las partes que proceden de la página principal estarán atenuadas, como se muestra en la figura 9-4. Para modificar algo en la parte atenuada de la página, debe abrir y cambiar la página principal.



La figura 9-4 muestra también un control de servidor Content que no está atenuado. Aquí es donde debe incluir el contenido único de la página. No se preocupe si este área parece pequeña al principio; se expandirá para dar cabida al contenido que agregue.

Observe la propiedad Title que aparece en la ventana Propiedades. Aquí es donde debe poner el título de página que la página principal copiará al control Literal denominado litBannerTitle

Figura 9-4Cuando diseña una página de contenido, todas las partes procedentes de la página principal aparecen atenuadas.



Utilizar páginas principales de manera eficaz La figura 9-5 muestra una página de contenido que utiliza la página principal que en las secciones anteriores se ha explicado cómo desarrollar. Además, la página muestra cierto contenido preliminar. Para crear una página de ese tipo:

PARA CREAR UNA PÁGINA QUE MUESTRE CONTENIDO PRELIMINAR

1 Cree una página denominada products.aspx y configúrela para que

utilice la página principal denominada MasterPage.master. Si es necesario, consulte los procedimientos indicados anteriormente en este capítulo.

2 Escriba el contenido variable y guarde la página.

3 Haga clic con el botón secundario del mouse en el Explorador de soluciones

y elija Ver en el explorador en el menú contextual.

Figura 9-5 En el explorador, las páginas de contenido y las páginas principales aparecen perfectamente integradas.



Examinar el interior de las páginas principales Las páginas de contenido que utilizan una página principal contienen al principio muy poco código fuente. He aquí un ejemplo típico:

<%@ Page Language=”C#”

MasterPageFile=”~/MasterPage.master”

Title=”Products” %>

<asp:Content

ID=”Content1”

ContentPlaceHolderID=”ContentPlaceHolder1”

Runat=”Server”>

</asp:Content>

La directiva @ Page especifica el lenguaje de programación para cualquier código de programa ASP.NET que agrega a la página, el nombre del archivo de página principal y el título de página.

La etiqueta <asp:Content> especifica su propio Id., el Id. de un control ContentPlaceHolder de la página principal y el atributo runat=”server” necesario. Esto ofrece una pista sobre el funcionamiento de las páginas principales:

■ La página principal contiene uno o más controles ContentPlaceHolder, cada uno de los cuales tiene su propio Id.

■ Cuando una página de contenido utiliza una página principal, debe contener un control Content por cada control ContentPlaceHolder de la página principal.

■ Cuando un visitante solicita la página de contenido, ASP.NET combina el contenido de cada control Content en el control ContentPlaceHolder correspondiente de la página principal y entrega el resultado.

Tenga en cuenta que al igual que un control de usuario Web, una página de contenido que utiliza una página principal no contiene ninguna etiqueta <html></html>, ninguna sección <head>, ninguna etiqueta <body></body> ni ninguna etiqueta <form></form>. La página principal proporciona todos estos elementos.

Modificar páginas existentes para utilizar páginas principales Visual Web Developer no dispone de ningún comando ni asistente que aplique una página principal a una página Web existente. En su lugar, debe seguir este procedimiento manual.



PARA APLICAR UNA PÁGINA PRINCIPAL A UNA PÁGINA WEB EXISTENTE

1 Cree una nueva página de contenido que utilice la página principal que desee.

2 Copie el contenido que desee de la página anterior al Portapapeles.

3 Pegue el contenido del Portapapeles en la nueva página.

4 Elimine o cambie el nombre de la página de contenido anterior y cambie el nombre de la nueva página.

Si cree que este método omite algo necesario de la página, o si desea trabajar en la vista Código fuente, pruebe este procedimiento.

PARA APLICAR UNA PÁGINA PRINCIPAL A UNA PÁGINA WEB EXISTENTE EN LA VISTA CÓDIGO FUENTE

1 En la vista Código fuente, elimine todo lo que haya desde la etiqueta <html> de apertura hasta el principio del contenido que desee conservar. Debe eliminar al menos la etiqueta <html>, la sección

<head>, la etiqueta <body> y las etiquetas <form>.

2 Elimine todo lo que haya detrás del contenido que desea conservar. Esto debe incluir al menos las etiquetas </form>, la etiqueta </body> y la etiqueta </html>.

3 Encierre el contenido conservado dentro de etiquetas <asp:Content> y </asp:Content>, sin olvidar los atributos ID=, ContentPlaceHolderID= y runat=”server”. El atributo ContentPlaceHolderID= debe

especificar el nombre de un control ContentPlaceHolder de la página principal.

4 Agregue un atributo MasterPageFile= a la directiva @ Page, asegurándose de que señala a la página principal que desea.

5 Pruebe y refine.



Ajustar direcciones URL relativas Como ocurre con los controles de usuario Web, tendrá que tomar ciertas precauciones si

hay páginas Web de varias carpetas que utilizarán la misma página principal. En concreto, codifique los atributos <img src=””> y <a href=””> con respecto a la raíz del sitio e incluya una tilde (~) delante de la ruta de acceso. He aquí un ejemplo:

<img src=”~/images/magichat.gif”>

Modificar información de encabezado Algunas veces, quizás desee que las páginas de contenido reemplacen configuraciones que aparecen en la sección <head> de una página principal. Para ello, agregue runat=”server” a la etiqueta <head> de la página principal y agregue código de programa a cada página Web para reemplazar la información que desea cambiar. Por ejemplo, en la página principal, codifique lo siguiente:

<head runat=”server”>

y en la página de contenido, codifique lo siguiente en el controlador de eventos Page_Load. (En la sección anterior titulada “Crear una página principal” se mostraba cómo agregar un controlador de eventos Page_Load a una página principal. El procedimiento para una página de contenido es el mismo.)

Master.Page.Header.Metadata.Add(“keywords”, “elephants”)

Esto agrega una etiqueta como la siguiente a la sección <head> de la página de salida. <meta name=”keywords” content=”elephants”>

En resumen… Las páginas principales ASP.NET son básicamente plantillas de páginas Web. Suelen proporcionar elementos de formato como hojas de estilo, encabezados y pies de página.

Los visitantes no exploran las páginas principales directamente. En su lugar, exploran páginas de contenido que tienen adjunta una página principal. ASP.NET combina en la página principal el contenido único proporcionado por la página de contenido y entrega el resultado combinado al visitante. Esto hace que el sitio sea más uniforme y más fácil de mantener.

En el próximo capítulo se explicará cómo crear archivos de Hoja de estilos en cascada (CSS) en Visual Web Developer.

El objeto Master señala a la página principal, si hay alguna, utilizada por una página de contenido.

N O TA


107

Dar formato a elementos de página individualmente, 108

Utilizar estilos con nombre en varias páginas, 109

Capítulo 10Utilizar hojas de estilos en cascada

10Los desarrolladores Web más experimentados utilizan ahora Hojas de estilos en cascada (CSS) para controlar la tipografía, los colores y otros muchos tipos de formato dentro de un sitio. Las razones son claras: cuando se utiliza correctamente, CSS ofrece mucha más flexibilidad y uniformidad que los métodos más antiguos de dar formato a las páginas.

Visual Web Developer™ proporciona un entorno rico y fácil de utilizar para asignar reglas de estilo CSS a los elementos individuales de las páginas y para crear archivos compartidos de hojas de estilos. En este capítulo se presentan esas características.



Dar formato a elementos de página individualmente

Figura 10-1 Este cuadro de diálogo aplica propiedades CSS a elementos de página o a reglas de hoja de estilos. Al hacer clic en cualquier icono de la izquierda aparecen las opciones correspondientes.

Después de realizar una de estas acciones, Visual Web Developer muestra el cuadro de diálogo Generador de estilos que se ilustra en la figura 10-1.

Las ocho categorías que aparecen en el borde izquierdo del cuadro de diálogo agrupan las diversas propiedades CSS por tipo. El resto del cuadro de diálogo cambia dependiendo de la categoría que seleccione. La mayoría de estas opciones son bastante intuitivas. Si ve alguna que no lo es, vea la Ayuda integrada o examine las especificaciones oficiales de CSS en http://www.w3.org/Style/CSS

En la vista Código fuente, Visual Web Developer proporciona control IntelliSense® para los estilos que hay dentro de atributos style=. Así, por ejemplo:

■ Cuando escribe style=”, IntelliSense muestra una lista de nombres de propiedades CSS.

■ Después de seleccionar o escribir un nombre de propiedad, escriba un signo de dos puntos (:). Esto hará que IntelliSense muestre los valores válidos de la propiedad.

■ Cuando termine de seleccionar o escribir el valor de la propiedad, escriba la comilla de cierre (“) o un signo de punto y coma y un espacio en blanco (; ). Si escribe un signo de punto y coma y un espacio, IntelliSense volverá a mostrar una lista de los nombres de propiedades CSS.

Si desea especificar estilos CSS para un elemento determinado de una página, selecciónelo primero en la vista Diseño y realice después una de las acciones siguientes:

■ Elija Estilo en el menú Formato o

■ Seleccione el atributo Estilo en la ventana Propiedades y haga clic en el botón de puntos suspensivos (. . .) .


Capítulo 10: Utilizar hojas de estilos en cascada 109

Utilizar estilos con nombre en varias páginas La aplicación de propiedades CSS a elementos individuales de una página ofrece muchaflexibilidad pero no mucha uniformidad. Cuantas más páginas contenga el sitio, más difícil será lograr que las fuentes y los colores sean uniformes. Afortunadamente, CSS ayuda a resolver el problema con los archivos compartidos de hoja de estilos.

Crear un nuevo archivo de hoja de estilos

El procedimiento para crear un nuevo archivo de hoja de estilos es muy parecido al empleado para crear cualquier otro tipo de archivo.

PARA CREAR UN NUEVO ARCHIVO DE HOJA DE ESTILOS

1 Elija Nuevo archivo en el menú Archivo o haga clic con el botón secundario del mouse (ratón) en una carpeta dentro del Explorador de soluciones y seleccione Agregar

nuevo elemento.

2 Cuando aparezca el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla Hoja de estilos, reemplace el nombre de archivo predeterminado si lo desea y haga clic en el botón Agregar.

Crear reglas de hoja de estilos

En un archivo de hoja de estilos, cada regla de estilo debe tener un nombre (o dicho más correctamente, un selector). Ésta es la forma en que las páginas Web se refieren a las reglas de estilo contenidas en el archivo.

Una regla de estilo consta de un nombre seguido de una lista de propiedades y valores CSS. En la tabla 10-1 se enumeran los tres tipos de nombres de estilo.

Es habitual que los archivos de hoja de estilos residan en la carpeta raíz del sitio Web.

S U G E R E N C I A



Hay dos formas de agregar una regla de estilo con nombre a un archivo de hoja de estilos. Son:

■ Escriba el nombre del estilo, un espacio en blanco y un par de llaves ({}) en una línea nueva al final del archivo o entre dos estilos existentes.

■ Elija Agregar regla de estilo en el menú Estilos. Aparecerá el cuadro de diálogo Agregar regla de estilo que se muestra en la figura 10-2.

Si decide utilizar el cuadro de diálogo Agregar regla de estilo, continúe de la manera siguiente.

Cuando define una regla de estilo, un punto (.) al principio identifica un selector de clase y un signo de número (#) al principio identifica un selector de Id. Sin embargo, no debe codificar estos caracteres al principio cuando utilice una regla de estilo.

S U G E R E N C I A

Figura 10-2 Este cuadro de diálogo crea nuevas reglas de estilo. Si especifica más de un nombre, la regla sólo se aplicará cuando coincidan todos los nombres.

Tabla 10-1Tipos de nombres de estilos CSS World Wide Visual Web Se aplica a Web Consortium

Developer

Type Selector Nombre del Todos los elementos HTML del tipo correspondiente. elemento Por ejemplo, una regla de estilo denominada td se aplica al contenido de todas las etiquetas <td>.

Class Selector Nombre de clase Todas las etiquetas codificadas con un atributo class= correspondiente. Por ejemplo, una regla de estilo denominada .error se aplicaría a todas las etiquetas que codifique con un atributo class=”error”.

ID Selector Id. de elemento Todas las etiquetas codificadas con un atributo ID= correspondiente. Por ejemplo, una regla de estilo denominada #btnSubmit se aplicaría a todas las etiquetas codificadas como ID=”btnSubmit”.



PARA UTILIZAR EL CUADRO DE DIÁLOGO AGREGAR REGLA DE ESTILO

1 Seleccione el tipo de nombre de estilo que desee: un Elemento, un Nombre de clase o un Id. de elemento.

2 Elija o escriba el nombre que desee.

3 Si va a crear una regla de clase, puede restringir su ámbito a un nombre de etiqueta determinado. Por ejemplo, una regla de estilo denominada LI.presto sólo se aplicaría a las etiquetas

<li class=”presto”>. Para utilizar esta característica:

■ Especifique el nombre de la clase.

■ Active la casilla de verificación Elemento opcional.

■ Seleccione el nombre de etiqueta que desee en la lista desplegable Elemento opcional.

4 Haga clic en el botón de flecha a la derecha (>). Se agregará el nuevo nombre de etiqueta al cuadro Jerarquía de la regla de estilo.

5 Haga clic en el botón Aceptar para crear la nueva regla de estilo.

Si agrega varios nombres de estilos al cuadro Jerarquía de la regla de estilo sin hacer clic en el botón Aceptar, Visual Web Developer creará una regla que sólo se aplicará si todos los nombres de estilo indicados están en vigor. Por ejemplo, si el cuadro de diálogo Jerarquía de la regla de estilo contiene:

TABLE.links

TD.external

A.menu

La regla de estilo resultante sólo se aplicará a las etiquetas que satisfagan todas estas condiciones:

■ La etiqueta es un delimitador (hipervínculo) codificado como class=”menu”.

■ El delimitador reside en una celda de datos de una tabla codificada como class=”external”.

■ La celda de datos de la tabla reside dentro de una tabla codificada como class=”links”.



El siguiente fragmento de código HTML ilustra esta estructura:

<TABLE class=”links” ...>

<TR ...>

<TD class=”external” ...>

<A class=”menu” ...>

Aunque las reglas del código HTML requieren la etiqueta de fila de tabla (<TR>) mostrada anteriormente, esa etiqueta es irrelevante para la regla de estilo TABLE.links TD.external A.menu. Esa regla no contiene ningún requisito ni restricción basado en etiquetas <TR>.

No obstante, un nombre de regla como TABLE TR.shaded TD sería sensible a las etiquetas <TR>. Sólo se aplicaría a las celdas de datos de tabla ubicadas dentro de filas de tabla codificadas como class=”shaded”, todo ello dentro de una tabla HTML.

Agregar propiedades a reglas de hoja de estilos

Una vez que existe una regla de estilo, puede agregarle propiedades de las tres formas siguientes:

■ Escribiendo (con la ayuda de IntelliSense).

■ Seleccionando la regla de estilo y eligiendo Generar estilo en el menú Estilos.

■ Haciendo clic con el botón secundario del mouse en la regla de estilo y eligiendo Generar estilo en el menú contextual.

Al elegir Generar estilo aparece el cuadro de diálogo Generador de estilos que se describió en la sección anterior, “Dar formato a elementos de página individualmente”. Rellene el cuadro de diálogo como se indica en esa sección y haga clic en el botón Aceptar.

La figura 10-3 ilustra cómo muestra Visual Web Developer el archivo de hoja de estilos para la página principal de Contoso Magic que aparecía en el capítulo anterior. Observe la ventana Esquema CSS de la izquierda. Esta ventana permite buscar y seleccionar fácilmente estilos ubicados en cualquier lugar del archivo.

Aunque las reglas de hoja de estilos cambian la apariencia de otros objetos, no tienen nin-guna apariencia por sí mismas. Se trata de especificaciones abstractas de texto sin formato. Esa es la razón por la que no hay ninguna vista Diseño para los archivos de hoja de estilos.

N O TA



Utilizar estilos compartidos en las páginas Web Para utilizar las reglas de estilo de un archivo de hoja de estilo, debe vincular el archivo de hoja de estilos y la página Web.

PARA VINCULAR EL ARCHIVO DE HOJA DE ESTILOS Y LA PÁGINA WEB

Figura 10-3 Así es como Visual Web Developer muestra un archivo típico de hoja de estilos. Si la ventana Esquema CSS no aparece, elija Esquema del documento en el menú Ver.

1 Abra la página Web o la página principal que utilizará el archivo compartido de hoja de estilos.

2 Realice una de estas acciones:

■ Muestre la página en la vista Diseño, arrastre el archivo de hoja de estilos desde el Explorador de soluciones y colóquelo en la página abierta.

■ Seleccione DOCUMENTO en la ventana Propiedades, seleccione la propiedad StyleSheet, haga clic en el botón de puntos suspensivos (. . .), utilice el cuadro de diálogo que aparecerá para seleccionar el archivo de hoja de estilos que desee y haga clic en Aceptar.



Una vez que vincule el archivo de hoja de estilos y la página, todas las reglas de estilo que tengan selectores de tipo o de Id. (es decir, las reglas cuyos nombres coincidan con etiquetas HTML o atributos ID=) surtirán efecto inmediatamente. Para aplicar una regla de clase a un elemento, haga lo siguiente.

PARA APLICAR UNA REGLA DE CLASE A UN ELEMENTO

1 Abra la página Web o la página principal y seleccione el elemento en la vista Diseño.

2 En la ventana Propiedades, busque una propiedad denominada Class o CssClass.

3Escriba el nombre del estilo como el valor de la propiedad Class o CssClass. No escriba un punto

al principio.

Muchos desarrolladores Web experimentados nunca asignan atributos de estilo, especialmente colores y atributos de fuente, directamente a un elemento de una página. En su lugar, siempre utilizan reglas procedentes de archivos compartidos de hoja de estilos.

Aunque este método puede parecer al principio abstracto e indirecto, produces sitios mucho más uniformes y mucho más fáciles de mantener a lo largo del tiempo.

S U G E R E N C I A

En resumen…

Las reglas de Hoja de estilos en cascada (CSS) modifican las propiedades de los elementos de las páginas Web. Visual Web Developer puede ayudarle a formular estas reglas gráficamente (mediante cuadros de diálogo) o como texto (utilizando IntelliSense).

Si bien puede especificar propiedades CSS para elementos individuales de las páginas, al almacenar reglas CSS en archivos de hoja de estilos y vincular esos archivos a varias páginas (como todas las páginas de su sitio) se conseguirá una apariencia más uniforme y profesional. No obstante, Visual Web Developer acepta ambos métodos para almacenar y aplicar estilos.

En el próximo capítulo se explicará cómo crear y utilizar temas y máscaras ASP.NET, dos formas más de controlar centralmente la apariencia de un sitio.


115

Capítulo 11Controlar laapariencia con temas ASP.NET

11En el capítulo anterior se ha explicado cómo las Hojas de estilos en cascada (CSS) controlan la apariencia de los elementos HTML. CSS puede controlar prácticamente cualquier aspecto visual de un elemento HTML y, en el caso de los selectores de tipo, puede hacerlo sin necesidad de que haya código adicional en el propio elemento. Por ejemplo, una regla CSS denominada td afectará automáticamente a todas las etiquetas <td> de la misma página.

Desgraciadamente, ese mismo enfoque no es válido con los controles de servidor Web ASP.NET. CSS puede afectar a cualquier código HTML creado por un control de servidor Web, pero no puede afectar al propio control de servidor. Para controlar centralmente la apariencia de los controles de servidor Web en una página o en un sitio, necesita utilizar temas de ASP.NET 2.0.

Los temas son una nueva característica eficaz de Microsoft® ASP.NET 2.0. En este capítulo se explica cómo utilizarlos.

Crear temas ASP.NET, 116

Agregar máscaras aun tema ASP.NET, 116

Agregar hojas de estilos CSS a un tema ASP.NET, 119

Aplicar temas a páginas y sitios, 120

La característica de temas de ASP.NET 2.0 es una tecnología nueva. Por ejemplo, no tiene nada que ver con la característica Temas de Microsoft FrontPage® 2003, Microsoft Office XP o Microsoft Windows® SharePoint® Services 1.0.

N O TA



Crear temas ASP.NET

Un sitio Web puede contenertantos temas como desee; basta con crear subcarpetas dentro dela carpeta App_Themes.

S U G E R E N C I A

Al igual que las hojas de estilos CSS, un tema no tiene ninguna apariencia visual por sí mismo. Por tanto, tiene que crear un tema en el editor de texto de Microsoft Visual Web Developer™.

PARA CREAR UN TEMA EN EL EDITOR DE TEXTO

1 Abra el sitio Web que desee controlar con un tema.

2 Haga clic con el botón secundario del mouse (ratón) en la carpeta raíz del sitio (como \ContosoMagic\), elija Agregar carpeta en el menú contextual y seleccione Carpeta de temas en el submenú que

aparecerá. En este momento:

■ Si el sitio no contiene ya una carpeta App_Themes, Visual Web Developer creará una.

■ Visual Web Developer siempre creará una subcarpeta con un nombre como Theme1, pero puede cambiarlo si lo desea.

3 Cambie el nombre de la nueva subcarpeta de temas. El nombre que asigne se convertirá en el nombre de tema.

Por supuesto, una carpeta de temas vacía no tendrá ningún efecto sobre el sitio. Para controlar la apariencia de un sitio, debe agregar primero archivos .skin o .css. En las dos próximas secciones se explica cómo hacerlo.

Agregar máscaras a un tema ASP.NET En ASP.NET 2.0, un archivo de máscara especifica propiedades visuales para uno o más tipos de controles de servidor Web. Una única subcarpeta de temas puede contener tantos archivos de máscara como desee. Si hay más de un archivo, ASP.NET los leerá como si fueran un único archivo.

Los archivos de máscara contienen etiquetas de máscara, que son código XML. La etiqueta de máscara para cada tipo de control debe resultarle familiar: es igual que la etiqueta que aparece en una página Web.


Capítulo 11: Controlar la apariencia con temas ASP.NET 117

La codificación de un archivo de máscara es bastante tedioso porque tiene que hacerla en la vista Código fuente y no hay compatibilidad con IntelliSense®.

PARA CREAR UN ARCHIVO DE MÁSCARA

1 Haga clic con el botón secundario del mouse en la subcarpeta de temas donde desee que resida el archivo de máscara y elija Agregar nuevo elemento en el menú contextual.

2 Cuando aparezca el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla Archivo de máscara, reemplace el nombre de archivo predeterminado si lo desea y haga clic en el botón Agregar.

3 Visual Web Developer mostrará el nuevo archivo de máscara en la vista Código fuente.

4 Cree una etiqueta para cada tipo de control al que desee que afecte la máscara. A continuación se describen algunos ejemplos:

<asp:RadioButtonList runat=”server” />

<asp:DropDownList runat=”server” />

<asp:TextBox runat=”server” />

Son los mismos nombres de etiqueta que aparecen cuando agrega el control de servidor Web correspondiente a una página Web. Si no sabe con seguridad qué debe escribir, abra o cree una página Web que contenga el tipo de control que desee y observe el nombre de etiqueta del control en la vista Código fuente.

No olvide el atributo runat=”server” y la barra diagonal (/) de cierre dentro del corchete angular de cierre.

5 Dentro de cada etiqueta, agregue los atributos de control de servidor que desee.

De nuevo, son los mismos atributos que el control dado reconoce en una página Web. Si no sabe con seguridad qué debe escribir, abra o cree una página Web que contenga el tipo de control que desee, configure el atributo que desee, cambie a la vista Código fuente y examine el código resultante.

6 Cuando haya terminado, elija Guardar en el menú Archivo.



En general, un archivo de máscara sólo puede afectar a la apariencia de los controles de servidor Web. No puede controlar ninguno de los aspectos siguientes:

■ Controles de usuario ASP.NET.

■ Propiedades no visuales de los controles de servidor Web. Por ejemplo, no puede controlar propiedades como Click, SelectedIndexChanged y EnableViewState.

■ Controles de servidor Web como <asp:Literal> que no tienen propiedades visuales.

■ Controles de servidor HTML.

■ Elementos HTML normales.

Si es necesario, puede definir más de una etiqueta de máscara para el mismo control de servidor Web. He aquí un ejemplo:

<asp:DropDownList BackColor=”#rcr9d8” ForeColor=”#0000cc”

runat=”server” />

<asp:DropDownList BackColor=”#d0f0ff” ForeColor=”#000000”

runat=”server” SkinId=”skinDdlMirror” />

La primera etiqueta anterior es una máscara predeterminada porque no tiene ningún atributo SkinId=. La segunda es una máscara con nombre porque tiene un atributo SkinId=.

Imagine que estas máscaras forman parte de un tema denominado Smoke y que tiene una página Web que utiliza ese tema. En esa página, la siguiente etiqueta <asp:DropDownList>, que no tiene ningún atributo SkinId=, obtendría la primera máscara que se muestra arriba.

<asp:DropDownList ID=”ddlItem” runat=”server”>

<asp:ListItem Value=”a”>Assistant</asp:ListItem>

<asp:ListItem Value=”b”>Bird</asp:ListItem>

<asp:ListItem Value=”c”>Coin</asp:ListItem>

<asp:ListItem Value=”e”>Elephant</asp:ListItem>

<asp:ListItem Value=”w”>Watch</asp:ListItem>

</asp:DropDownList>

Los temas ASP.NET 2.0 pueden contener archivos de máscara y archivos CSS. Si un archivo de máscara no puede controlar el atributo o el elemento que desea, un archivo CSS puede ofrecer una alternativa. En la próxima sección se explica cómo utilizar archivos CSS con temas ASP.NET 2.0

S U G E R E N C I A



Por el contrario, una etiqueta <asp:DropDownList> codificada como SkinId=”skinDdlMirror” obtendría la máscara con ese SkinId. Por ejemplo: .

<asp:DropDownList ID=”ddlItem” runat=”server”

SkinId=”skinDdlMirror”>

<asp:ListItem Value=”a”>Assistant</asp:ListItem>

<asp:ListItem Value=”b”>Bird</asp:ListItem>

<asp:ListItem Value=”c”>Coin</asp:ListItem>

<asp:ListItem Value=”e”>Elephant</asp:ListItem>

<asp:ListItem Value=”w”>Watch</asp:ListItem>

</asp:DropDownList>

Para ver cualquier tema ASP.NET 2.0, debe aplicar el tema a una página Web y ver después la página en un explorador. En la sección “Aplicar temas a páginas y sitios”, más adelante en este capítulo, se explica este procedimiento en detalle.

Agregar hojas de estilos CSS a un tema ASP.NET Si lo desea, también puede almacenar los archivos compartidos de hoja de estilos CSS en las subcarpetas de temas. ASP.NET vinculará estas hojas de estilos a cualquier página que utilice el tema dado y tenga un atributo runat=”server” en su etiqueta <head>.

Cuando aplica un tema como Smoke o Mirrors a una página o a un sitio, ASP.NET incluye todos los archivos CSS que forman parte del tema. Para ello, agrega etiquetas <link> a la sección <head> de la página, detrás de las etiquetas <link> existentes. Imagine por ejemplo que tiene lo siguiente:

■ Una carpeta App_Themes/Smoke que contiene un archivo CSS denominado Smoke.css.

■ Una carpeta App_Themes/Mirrors que contiene dos archivos CSS denominados Mirrors.css y srorriM.css.

■ Un atributo runat=”server” en cada etiqueta <head>, como en:

<head runat=”server”>

</head>



Entonces, ASP.NET agregará el siguiente vínculo de hoja de estilos a cualquier página que utilice el tema Smoke:

<link href=”App_Themes/Smoke/Smoke.css” text=”text/css”

rel=”stylesheet” />

y estos vínculos a cualquier página que utilice el tema Mirrors: <link href=”App_Themes/Mirrors/Mirrors.css” text=”text/css”


<link href=”App_Themes/Mirrors/srorriM.css” text=”text/css”


Como ASP.NET agrega los vínculos CSS de temas detrás de los vínculos CSS existentes: ■ Las reglas de estilo o las propiedades CSS que codifique en un archivo CSS de tema

reemplazarán las reglas o propiedades que tengan esos nombres en los archivos CSS que haya vinculado manualmente a la página.

■ Si su sitio contiene varios temas, no es necesario que los archivos CSS los dupliquen. Puede poner las reglas y los atributos comunes en un archivo CSS vinculado de manera convencional e incluir únicamente los reemplazos en los archivos CSS de temas.

El gráfico de la izquierda muestra la disposición de los archivos de máscara y CSS para tres temas en el sitio de ContosoMagic. Aunque aquí se ha hecho para mayor claridad, no es necesario que los archivos de máscara, los archivos CSS y las subcarpetas de temas tengan nombres similares.

No olvide que los temas ASP.NET 2.0 sólo controlan controles de servidor Web. Para controlar centralmente la apariencia de otra cosa tiene que utilizar CSS.


Aplicar temas a páginas y sitios Puede aplicar temas a páginas Web individuales o a todo un sitio.

PARA APLICAR UN TEMA A UNA ÚNICA PÁGINA WEB

1 Abra la página en Visual Web Developer.

Muestre DOCUMENT en la ventana Propiedades.

Seleccione la propiedad Tema y elija el tema deseado en la lista desplegable. Los temas que aplica a páginas

individuales reemplazan los temas que aplica a todo el sitio.

S U G E R E N C I A 3

2



Para especificar un tema que se aplicará a todo un sitio Web, tiene que modificar un archivo XML denominado web.config. Visual Web Developer crea este archivo siempre que crea un sitio nuevo.

PARA ESPECIFICAR UN TEMA PREDETERMINADO PARA TODAS LASPÁGINAS DE UN SITIO

1 Abra el archivo web.config del sitio en Visual Web Developer.

2 Busque un par de etiquetas <system.web> y </system.web>. Si están presentes, estas etiquetas suelen rodear a otro contenido y aparecen justo detrás de la etiqueta <configuration>. Si su archivo web.

config no tiene etiquetas <system.web> de apertura y de cierre, créelas.

3 Agregue la etiqueta que se muestra debajo en color verde detrás de la etiqueta <system.web>. Reemplace Smoke con el nombre de su tema.

<?xml version=”1.0” encoding=”utf-8”?>

<configuration xmlns=”... “>

<system.web>

<pages theme=”Smoke” />

</system.web>

</configuration>

Las figuras 11-1 y 11-2 muestran una página del sitio de Contoso Magic utilizando dos temas diferentes. Los archivos de máscara modifican la apariencia de los campos de formulario y los archivos CSS modifican todos los demás elementos. Para ver el contenido de estos archivos, ábralos en el sitio de ejemplo que acompaña a este libro.

Si necesita ayuda sobre cómo obtener e instalar los archivos de ejemplo de este libro, consulte la sección “Obtener e instalar los archivos de ejemplo de este libro” del capítulo 1.




Figura 11-1 Esta página Web, que es principalmente de color gris, utiliza un tema personalizado denominado Smoke. Si no hay ningún tema en vigor, la combinación de colores sería similar a la de la figura 9-5 (del capítulo 9). Observe también los cambios en la tipografía.



Los temas de ASP.NET 2.0 pueden controlar centralmente la apariencia de cualquier sitio ASP.NET 2.0. Dentro de un tema, los archivos de máscara controlan los controles de servidor Web y los archivos CSS controlan los elementos HTML normales.

Los archivos de máscara contienen código XML que tiene que editar manualmente. Para modificar el valor de un atributo de un control de servidor tiene que especificar los mismos nombres de etiqueta y de atributo que aparecen en la página Web.

Para aplicar un tema a una página determinada, modifique el atributo Theme de la página. Para aplicar un tema a todo un sitio Web, agregue una etiqueta <pages theme=”nombreDeTema” /> al archivo web.config.

En el próximo capítulo se explica cómo codificar un mapa del sitio, y cómo utilizarlo para crear menús dinámicos, menús de vista de árbol y rastros.

Figura 11-2 Es la misma página a la que se ha aplicado el tema Mirrors. Los colores reflejados brillantes son la inspiración.

En resumen…


125

Capítulo 12Vincular las páginas de un sitio automáticamente

12Todo sitio Web necesita una colección ordenada de hipervínculos que ayude a los visitantes a encontrar la información que están buscando. En un sitio grande, mantener estos vínculos de forma clara, sencilla y bien organizada puede ser una tarea dantesca, especialmente a medida que los desarrolladores hacen cambios y aplican actualizaciones con el tiempo. Para ayudar en esta tarea, ASP.NET 2.0 proporciona cuatro componentes nuevos:

■ Un archivo de mapa del sitio que documenta la estructura lógica del sitio.

■ Un control Menu que lee el archivo de mapa del sitio y muestra menús dinámicos desplegables o emergentes.

■ Un control TreeView que lee el archivo de mapa del sitio y muestra una lista sangrada expandible y contraíble de vínculos.

■ Un control SiteMapPath que busca la dirección URL de la página actual en el archivo de mapa del sitio y muestra una serie de vínculos (rastros) que vuelven a la página principal.

Estos cuatro componentes, que funcionan conjuntamente, hacen que sea muy sencillo organizar un sitio y mostrar los hipervínculos de la forma más actualizada, visualmente atractiva y compacta. En el resto de este capítulo se explica cómo lograrlo en cualquier sitio que cree.

Crear un mapa para su sitio Web, 126

Crear menús desplegables y emergentes, 131

Crear menús de vista de árbol, 133

Proporcionar rastros, 134

El uso de controles de exploración de ASP.NET 2.0 es totalmente opcional. Si lo prefiere, puede crear la estructura, los hipervínculos y los menús del sitio manualmente o con una herramienta compatible de terceros.

I M P O R TA N T E



Crear un mapa para su sitio Web Los tres controles de exploración de ASP.NET 2.0 tienen tantas opciones y ofrecen tanta flexibilidad que los desarrolladores sin experiencia a veces tienen problemas para encontrar un punto de partida. En la mayoría de los casos, la solución consiste en crear primero un archivo de mapa del sitio. El procedimiento para hacerlo debe resultarle bastante familiar.

PARA CREAR UN ARCHIVO DE MAPA DEL SITIO

1 Abra el sitio del que desee crear un mapa y elija Nuevo archivo en el menú Archivo.

2 Cuando aparezca el cuadro de diálogo Nuevo elemento, seleccione la plantilla Mapa del sitio.

3 Si es el primer mapa de su sitio, acepte el nombre de archivo predeterminado. De lo contrario, reemplace el nombre de archivo sugerido.

4 Haga clic en el botón Agregar.

De manera predeterminada, este procedimiento crea un archivo denominado Web.sitemap en la carpeta raíz del sitio. Tanto la ubicación como el nombre predeterminados son buenas elecciones. De hecho, no debe cambiar el nombre de archivo.

Internamente, los mapas de sitio de ASP.NET 2.0 son archivos XML. Por tanto, Microsoft Visual Web Developer™ los muestra en modo de texto. Omitiendo los comentarios y abreviando el atributo xmlns (que es constante), un nuevo archivo de mapa del sitio es similar al siguiente:

1 <?xml version=”1.0” encoding=”utf-8” ?>

2 <siteMap xmlns=”... “ >

3 <siteMapNode url=”” title=”” description=””>

4 <siteMapNode url=”” title=”” description=”” />

5 <siteMapNode url=”” title=”” description=”” />

6 </siteMapNode>

7 </siteMap>


Capítulo 12: Vincular las páginas de un sitio automáticamente 127

El formato de este archivo es relativamente sencillo.

■ La etiqueta <?xml> de la línea 1 identifica la versión de XML utilizada. No modifique esta etiqueta.

■ La etiqueta <siteMap> de la línea 2 y su etiqueta </siteMap> de cierre de la línea 7 marcan el principio y el final del documento XML. No modifique tampoco estas etiquetas.

■ Cada etiqueta <siteMap> debe contener una y sólo una etiqueta <siteMapNode> de nivel superior. Define la página de inicio del mapa del sitio; normalmente es la página principal del sitio. En el ejemplo, es la etiqueta de la línea 3. Su etiqueta de cierre está en la línea 6.

■ Entre la etiqueta <siteMapNode> de nivel superior y su etiqueta de cierre puede agregar tantas etiquetas <siteMapNode> adicionales como desee. Cada una de estas etiquetas se convertirá en nodos de “nivel dos” en el menú desplegable o en la vista de árbol expandible. Las líneas 4 y 5 muestran ejemplos.

■ Dentro de cada etiqueta <siteMapNode> de nivel dos puede agregar tantas etiquetas <siteMapNode> de nivel tres como desee, y así sucesivamente.

Realmente es un proceso sencillo. Imagine cómo desea que se desplacen los visitantes por el sitio y sangre (o anide) un conjunto de etiquetas <siteMapNode> de esa forma. Por ejemplo, si desea esta estructura lógica:

Home Page Products Cloaks Rubber Daggers Services Dry Cleaning Vulcanizing

codifique las etiquetas <siteMapNode> de la manera siguiente:

Recuerde que los formatos <siteMapNode /> y <siteMap-Node></siteMapNode> son equivalentes, excepto que el segundo formato puede contener etiquetas adicionales.

S U G E R E N C I A



<siteMapNode url=”default.aspx” title=”Home Page”>

<siteMapNode url=”products.aspx” title=”Products”>

<siteMapNode url=”cloaks.aspx” title=”Cloaks” />

<siteMapNode url=”daggers.aspx” title=”Rubber Daggers” />

</siteMapNode>

<siteMapNode url=”services.aspx” title=”Services”>

<siteMapNode url=”dryclean.aspx” title=”Dry Cleaning” />

<siteMapNode url=”vulcaniz.aspx” title=”Vulcanizing” />

</siteMapNode>

</siteMapNode>

Sólo hay que tener en cuenta tres atributos <siteMapNode> por el momento. Son los siguientes:

■ URL La ubicación absoluta o relativa de la página. Es el lugar al que el vínculo del menú o la vista de árbol dirigirá a un visitante, o donde comenzará el camino inverso de los rastros.

No especifique dos veces el mismo valor URL en el mismo archivo de mapa del sitio. De lo contrario, se producirá un error siempre que vaya a una página que contenga un control Menu, TreeView o SiteMapPath (rastro).

En el caso de las ubicaciones relativas, es mejor codificar una tilde y una barra diagonal (~/) seguido de la ruta de acceso desde la raíz de la aplicación. He aquí dos ejemplos:

url=”~/default.aspx” url=”~/products/wands.aspx”

Para crear una etiqueta <siteMapNode> que no se vincule a otra página, debe dejar en blanco su valor URL. Esto es útil para los elementos de menú que agrupan páginas de destino más profundas, pero no tienen páginas de destino.

■ title El nombre de la página en lenguaje natural, como Página principal o Póngase en contacto con nosotros. Aparecerá como el texto visible del menú, la vista de árbol o el rastro.

■ description Una descripción más larga. Aparecerá como texto de información sobre herramientas cuando el mouse (ratón) esté sobre el vínculo. Este campo es opcional.

En el capítulo 17 se describirá un atributo role= que puede agregar a cualquier etiqueta <siteMap-Node>. Este atributo, cuando se combina con otras técnicas, oculta elementos de menú para los que el visitante actual no tiene permiso de acceso.

V E A TA M B I É N



Figura 12-1 Así es como Visual Web Developer muestra el archivo de mapa del sitio Web de Contoso Magic.

La figura 12-1 ilustra cómo muestra Visual Web Developer el archivo de mapa del sitio de Contoso Magic. La figura 12-2 muestra un menú emergente basado en este mapa del sitio. En la próxima sección se explica cómo crear ese tipo de menú.



Figura 12-2 El control Menu de esta página obtiene su estructura del mapa del sitio que se muestra en la figura 12-1.



Crear menús desplegables y emergentes Es posible agregar menús desplegables o emergentes a páginas principales, controles de usuario Web o páginas individuales.

PARA CREAR UN MENÚ DESPLEGABLE O EMERGENTE

1 Abra la página principal, el control de usuario Web o la página que mostrará el menú.

2 En el Cuadro de herramientas, abra el grupo Datos y arrastre un control SiteMapDataSource hasta la página abierta. Puede poner este control donde desee, pero que no esté en medio. No mostrará

nada cuando un visitante del Web vaya hasta la página.

Visual Web Developer asignará un nombre como SiteMapDS o SiteMapDS1 a este control. Como se muestra debajo, este nombre aparece en la superficie del control. Necesitará este nombre de control en el paso 4.

3 En el Cuadro de herramientas, abra el grupo Exploración y arrastre un control Menu hasta la página abierta. Colóquelo donde desee que aparezca el menú.

4 Visual Web Developer mostrará un menú de tareas como el que se ilustra en la figura 12-3. Abra la lista desplegable Elegir origen de datos y especifique el nombre del control

SiteMapDataSource que agregó en el paso 2.

5 Guarde la página, haga clic en ella con el botón secundario del mouse y elija Vista previa en explorador.

Para configurar aún más el menú, selecciónelo y especifique los valores que desee en la ventana Propiedades. Por ejemplo, la opción Orientación elige entre lo siguiente:

■ Horizontal Los elementos de menú de nivel superior aparecerán de izquierda a derecha. El resultado es un sistema de menús desplegables.

■ Vertical Los elementos de menú de nivel superior aparecerán de arriba abajo. Esto crea un sistema de menús emergentes.

Figura 12-3 El menú de tareas de un control Menu especifica, entre otras cosas, de dónde debe obtener el menú su lista de vínculos.



En la tabla 12-1 se muestran las opciones no predeterminadas que hay en vigor para el menú mostrado anteriormente en la figura 12-2. Un elemento de menú estático es

aquel que es siempre visible. Los elementos de menú dinámicos sólo aparecen cuando selecciona su elemento primario en el árbol de menús.

N O TA

Tabla 12-1Propiedades de Menu vigentes parala figura 12-2

No hay nada de especial acerca de estas siete propiedades y sus valores; los suyos serán diferentes, dependiendo de los requisitos de su sitio. Sin embargo, estas siete propiedades ilustran algunas opciones típicas.

Configuración Valor Descripción

DataSourceID SiteMapDS Indica al menú que obtenga sus vínculos del archivo de mapa del sitio especificado por el control SiteMapDataSource denominado SiteMapDS.

StaticDisplayLevels 2 Indica al menú que muestre siempre los dos primeros niveles del menú. Los niveles restantes aparecerán de forma dinámica (es decir, sólo cuando se seleccionen).

StaticSubMenuIndent (vacío) Indica al menú que no sangre los elementos de menú de nivel dos más de lo que sangra los elementos de nivel uno (es decir, la página principal).

StaticMenuItemStyle- MenuStaItm Especifica una regla CSS que controla la CssClass apariencia predeterminada de los elementos de menú estáticos.

StaticHoverStyle-CssClass MenuStaHov Especifica una regla CSS que controla la apariencia de los elementos de menú estáticos cuando el mouse está situado sobre ellos.

DynamicMenuItemStyle- MenuDynItm Especifica una regla CSS que controla la CssClass apariencia predeterminada de los elementos de menú dinámicos.

DynamicHoverStyle- MenuDynHov Especifica una regla CSS que controla la CssClass apariencia de los elementos de menú dinámicos cuando el mouse está situado sobre ellos.



Al especificar reglas CSS para los diversos tipos de elementos de menú se sigue la norma de centralizar todas las decisiones sobre fuentes y colores en hojas de estilos CSS. Para finalizar esta tarea debe definir las reglas de estilo coincidentes.

Si su estructura de menús es demasiado grande o compleja, puede utilizar varios archivos de mapa del sitio en lugar de uno solo. Por ejemplo, puede crear tres archivos de mapa del sitio diferentes: para los productos, para los servicios, y para la página principal y todas las demás páginas. Dentro de cada una de estas áreas, asignaría los controles SiteMapDataSource (y, por tanto, los controles Menu) al archivo de mapa del sitio apropiado.

El control <asp:menu> es increíblemente flexible. Por ejemplo:

■ Si elige Origen de datos: Ninguno en el menú de tareas del control, puede hacer clic en el vínculo Editar elementos de menú cercano y configurar una serie de vínculos de menú manualmente.

■ Si elige un origen de datos distinto de SiteMapDataSource, puede generar menús sobre la marcha basándose en registros de una base de datos. Para asignar campos de base de datos a elementos de menú, configure la propiedad DataBindings del control Menu.

■ Puede configurar fácilmente los colores, las fuentes, los archivos de iconos y otras propiedades visuales para cada tipo de elemento de menú.

■ Si cambia el tema de un sitio, los controles Menu que contenga el sitio cambiarán su apariencia basándose en los archivos de máscara y en los archivos CSS de ese tema.

■ Mediante el uso de páginas principales y controles de usuario Web puede definir un menú una vez y utilizarlo en tantas páginas como desee.

Crear menús de vista de árbol ASP.NET 2.0 también puede mostrar el contenido de un mapa del sitio como una lista sangrada expandible y contraíble. La figura 12-4 muestra un ejemplo. Los visitantes del Web pueden utilizar los iconos Más (+) y Menos (-) para expandir y contraer los nodos que deseen.

Para ver el mapa del sitio, las propiedades CSS, las propiedades de SiteMapDataSource y las propiedades del control Menu para los menús de este libro, abra los archivos de ejemplo correspondientes.


Si está utilizando temas, puede utilizar también máscaras para controlar la apariencia de los controles Menu. El nombre de etiqueta es <asp:Menu>.

S U G E R E N C I A



El componente que crea este tipo de presentaciones es el control TreeView de ASP.NET 2.0. El procedimiento para agregar un control TreeView a una página es casi el mismo que para agregar un control Menu. La diferencia es que tiene que arrastrar un control TreeView fuera del Cuadro de herramientas en lugar de arrastrar un control Menu.

Proporcionar rastros Los controles Menu y TreeView son una forma excelente de profundizar en el contenido de un sitio pero ¿qué ocurre con el retroceso o la salida de un sitio? Para permitir el retroceso, muchos sitios proporcionan rastros, una lista de vínculos que conduce paso a paso hacia atrás desde la página actual hasta la página principal.

La codificación manual y la actualización de rastros en cada página son tareas tan tediosas y propensas a errores que pocos desarrolladores Web las intentan. Afortunadamente, un nuevo control SiteMapPath incluido en ASP.NET 2.0 facilita esta tarea. Este control busca la página actual en el mapa del sitio y lee hacia atrás hasta llegar a la página principal, creando vínculos en cada nivel.

Figura 12-4 Un control TreeView muestra la lista gráfica de vínculos que aparece en el centro de esta página Web. El mismo archivo de mapa del sitio controla la vista de árbol y el menú de la izquierda.



En la figura 12-5, por ejemplo, aparece un control SiteMapPath en la esquina superior izquierda del área principal de contenido. El control SiteMapPath muestra Home > Online Tricks > Disappearing Trick basándose en los datos del archivo Web.sitemap del sitio. El menú de la izquierda utiliza el mismo archivo de mapa del sitio y, por tanto, muestra los mismos vínculos.

Figura 12-5. Un único control SiteMapPath muestra los rastros que aparecen justo debajo del título de esta página Web. Tanto el control SiteMapPath como el menú de la izquierda utilizan el mismo archivo de mapa del sitio. El control TodayIs del capítulo 8 muestra la fecha actual.

Puede agregar un control SiteMapPath a cualquier página Web .aspx, cualquier página principal o cualquier control de usuario Web. En el Cuadro de herramientas, abra el grupo Exploración y arrastre un control SiteMapPath a la vista Diseño.



A diferencia de los controles Menu y TreeView, un control SiteMapPath no obtiene sus datos de un SiteMapDataSource. A menos que el administrador del servidor haya hecho alguna disposición especial, un control SiteMapPath utiliza siempre el archivo de mapa del sitio predeterminado, Web.sitemap. Ésta es una buena razón para no reemplazar el nombre de archivo predeterminado cuando cree el archivo principal (o el único) de mapa de su sitio.

En resumen… ASP.NET 2.0 proporciona cuatro controles de servidor que le ayudan a organizar e implementar hipervínculos dentro de su sitio. El primero, un control SiteMapDataSource, brinda acceso a una lista jerárquica de vínculos codificada en un archivo XML denominado web.sitemap de manera predeterminada. Este control no muestra nada al visitante del Web, pero proporciona datos a los controles Menu y TreeView.

El control Menu muestra un sistema de menús desplegables o emergentes basándose en los datos proporcionados por el control SiteMapDataSource. El control TreeView muestra los mismos datos como una lista jerárquica expandible y contraíble de vínculos. Para agregar cualquiera de estos controles a una página Web, una página principal o un control de usuario, agregue primero un control SiteMapDataSource, agregue después el control Menu o TreeView y configúrelo para que utilice el control SiteMapDataSource.

El cuarto control, SiteMapPath, busca la página actual en el archivo web.sitemap del sitio, y muestra cada vínculo entre la página actual y la página principal del sitio. Esto proporciona una función de rastro o retroceso.

En el próximo capítulo se explica cómo utilizar Visual Web Developer para crear bases de datos y conectarlas a sitios Web.


137

Capítulo 13Crear y conectarse a bases de datos

13Administrar el accesoa datos, 138

Conectar con una base de datos existente, 138

Crear una nueva base de datos, 142

Agregar y modificar tablas de base de datos, 143

Ver y actualizar contenido de tablasde base de datos, 146

Cuando se utilizan conjuntamente, las bases de datos y el World Wide Web superan a la suma de sus partes. Sin esta combinación, ninguno de los sitios Web más conocidos y útiles de la actualidad sería posible. No habría portales, motores de búsqueda, comercio electrónico, subastas, banca en línea ni reservas de viaje en línea. El Web sería poco más que un montón de folletos electrónicos.

Microsoft® Visual Web Developer™ hace que sea muy sencillo crear sitios Web que aprovechen toda la eficacia de las bases de datos. El trabajo con bases de datos es un proceso tan sencillo que en muchas ocasiones no necesitará escribir ni una línea de código de programa.

Visual Web Developer incluye características eficaces, integradas y fáciles de utilizar para trabajar con Microsoft SQL Server™, el sistema de administración de bases de datos más importante de Microsoft. La combinación de Visual Web Developer 2005 Express y SQL Server 2005 Express es tan eficaz, sencilla y económica que Microsoft recomienda SQL Server como la mejor solución no sólo para los desarrolladores profesionales, sino también para los aficionados y para las pequeñas tiendas del Web.

Éste es el primero de cuatro capítulos donde se explican las características de la base de datos de Visual Web Developer. En los cuatro capítulos se da por supuesto que ha instalado SQL Server Express en el mismo equipo que Visual Web Developer. Si no lo ha hecho todavía, ahora es el momento de instalar SQL Server Express.

A menos que se indique lo contrario, a lo largo de este capítulo y en los tres capítulos siguientes el término SQL Server se refiere a Microsoft SQL Server 2000, SQL Server 2005 o SQL Server 2005 Express Edition.

N O TA



Administrar el acceso a datos

1 Inicie Visual Web Developer y muestre la ventana Explorador de base de datos. No se

moleste en abrir ni cerrar un sitio Web determinado. 2 En el Explorador de base de datos, haga clic

con el botón secundario del mouse (ratón) en el nodo de nivel superior (titulado Conexiones de datos) y elija Agregar conexión en el menú contextual.

Para utilizar una base de datos con Visual Web Developer, debe configurar primero una conexión de datos que señale a la base de datos específica que desea.

Cada conexión de datos señala a una, y sólo una, base de datos. No se trata de una limitación, ya que:

■ Puede configurar tantas conexiones de datos como necesite.

■ Cada sitio Web puede utilizar tantas conexiones de datos como necesite.

El punto focal para crear, ver, modificar y eliminar conexiones de base de datos es el Explorador de base de datos. Se trata de una ventana de Visual Web Developer que normalmente comparte espacio en la pantalla con el Explorador de soluciones, que se muestra a la izquierda.

Para cambiar entre el Explorador de soluciones y el Explorador de base de datos, haga clic en una de las fichas que aparecen en la parte inferior de la ventana. Si no es visible la ventana ni la ficha Explorador de base de datos, elija Explorador de base de datos en el menú Ver.

En la próxima sección se explica cómo crear una conexión de datos para una base de datos existente. En la sección posterior se explica cómo crear una nueva base de datos y una nueva conexión de datos que señale a la base de datos.

Conectar con una base de datos existente A continuación se muestra el procedimiento para conectar con cualquier tipo de base de datos compatible con su versión de Microsoft Visual Studio®.

PARA CONECTAR CON UNA BASE DE DATOS


Capítulo 13: Crear y conectarse a bases de datos 139

3 Si aparece un cuadro de diálogo Elegir origen de datos o Cambiar origen de datos como el que se muestra en la figura 13-1, examine las entradas del cuadro

de lista Origen de datos y seleccione la que describa su base de datos.

Si hay disponibles varios proveedores (o controladores) para el tipo de base de datos elegido, aparecerán en la lista desplegable Proveedor de datos. En general, los proveedores de datos .NET son los más confiables, los más seguros y los que ofrecen mejor rendimiento.

Para cambiar el proveedor de datos predeterminado para un tipo de base de datos dada, seleccione primero un origen de datos, seleccione después un proveedor de datos y, por último, active la casilla de verificación Utilizar siempre esta selección.

Para guardar los cambios y cerrar el cuadro de diálogo Cambiar origen de datos, haga clic en el botón Aceptar.

4 Cuando aparezca el cuadro de diálogo Agregar conexión, examine el cuadro Origen de datos.

■ Si el cuadro Origen de datos se refiere al tipo de base de datos que desea, continúe en el paso siguiente.

■ De lo contrario, haga clic en el botón Cambiar y vuelva al paso 3.

La apariencia del cuadro de diálogo Agregar conexión varía dependiendo del tipo de base de datos. Sin embargo, en todos los casos el campo Origen de datos aparece en el mismo lugar, en la parte superior del cuadro de diálogo. La figura 13-2 muestra cómo el cuadro de diálogo Agregar conexión busca un servidor existente de Microsoft SQL Server.

5 Configure el cuadro de diálogo Agregar conexión como sea necesario para el tipo de base de datos y haga clic en el botón Aceptar.

Figura 13-1 Visual Web Developer puede conectar con varios tipos de bases de datos. No obstante, ofrece las máximas funciones con bases de datos de SQL Server.

Figura 13-2 Este cuadro de diálogo configura una conexión de datos de Visual Web Developer con SQL Server.



PARA CONFIGURAR EL CUADRO DE DIÁLOGO AGREGAR CONEXIÓNPARA UNA BASE DE DATOS DE SQL SERVER

1 En el cuadro Nombre del servidor, escriba el nombre del equipo y, si es necesario, el nombre de la instancia donde SQL Server está ejecutando la base de datos deseada.

Tenga en cuenta que al hacer clic en la flecha desplegable de Nombre del servidor se muestran nombres de equipo, no nombres de instancia. Para tener acceso a una copia de SQL Server Express que se ejecuta en un equipo denominado SPOOKY, podría seleccionar el nombre SPOOKY en la lista desplegable, pero tendría que escribir \SqlExpress. El nombre completo del servidor sería SPOOKY\SqlExpress.

2 Seleccione el tipo de autenticación que SQL Server reconocerá. Las opciones son:

■ Utilizar autenticación de Windows Utiliza la cuenta de inicio de sesión actual de Microsoft Windows® para conectarse a SQL Server. Suele ser la opción correcta para las copias locales de SQL Server Express y para las copias completas de SQL Server que utilizan autenticación de Windows.

■ Utilizar autenticación de SQL Server Utiliza un nombre de usuario y una contraseña de SQL Server para conectarse al servidor SQL. Si selecciona esta opción, debe especificar también el nombre de usuario y la contraseña de SQL Server que tienen los privilegios que necesite. Normalmente, un administrador de base de datos controla estos nombres de usuario y contraseñas.

3 Especifique qué base de datos utilizará la conexión.

Si la base de datos ya está conectada a SQL Server, selecciónela en la lista desplegable Seleccionar o escribir nombre de base de datos.

4 Si la base de datos se encuentra en un archivo .mdf que todavía no se ha asociado a SQL Server:

Hacer coincidir capacidades de base de datos y versiones de software

Todas las versiones de Visual Studio, incluyendo Visual Web Developer, pueden conectar con bases de datos existentes de SQL Server y manipularlas. Además, Visual Studio puede conectar con y manipular lo siguiente:

■ Bases de datos de Microsoft Access.

■ Bases de datos que se ejecutan en Microsoft SQL Server 7.0 y en ediciones anteriores.

■ Bases de datos de Oracle (si hay instalados controladores de base de datos tanto de Oracle como de Microsoft).

■ Cualquier base de datos para la que haya disponibles controladores ODBC u OLE-DB.

Sin embargo, hay una pega: las distintas versiones de Visual Studio ofrecen distintos niveles de compatibilidad con estos otros tipos de base de datos. Si descubre que su versión de Visual Studio no acepta las características que desea para una base de datos dada, las opciones son las siguientes:

■ Actualizarse a una versión de Visual Studio con más capacidades.

■ Convertir la base de datos a SQL Server 2000 ó 2005.

Un nombre de instancia identifica una copia específica de SQL Server que se ejecuta en un equipo. Si hay dos copias de SQL Server en ejecución en el mismo equipo, deben tener nombres de instancia diferentes como clowns y acrobats, test y prod o visible y “” (ninguno). SQL Server Express siempre se ejecuta con el nombre de instancia SqlExpress.

N O TA



■ Especifique el nombre de archivo .mdf en el cuadro de texto Asociar con un archivo de base de datos. Puede escribir la ruta de acceso y el nombre de archivo o puede hacer clic en el botón Examinar, buscar el archivo y hacer clic en el botón Abrir.

■ En el cuadro Nombre lógico, escriba un nombre breve que describa la base de datos que va a asociar. Este nombre aparecerá en otras listas desplegables posteriores, y es el nombre que utilizará en las instrucciones SQL y en el código de programa que escriba.

5 Para comprobar su trabajo, haga clic en el botón Probar conexión de la esquina inferior izquierda del cuadro de diálogo. Si la configuración es correcta, Visual Web Developer mostrará “La conexión de

prueba se realizó correctamente”. Si obtiene una respuesta diferente, vuelva a comprobar su trabajo.

6 Haga clic en el botón Aceptar para crear la conexión.

La nueva conexión debe aparecer inmediatamente en el Explorador de base de datos. He aquí algunas formas de ver el contenido de la base de datos:

■ Al hacer clic en el icono del signo más (+) que precede al nombre de la nueva conexión de datos debe aparecer una lista de tipos de objetos que contiene la base de datos: tablas, vistas, procedimientos almacenados y otros tipos de objetos.

■ Al hacer clic en el icono del signo más (+) que precede a un tipo de objeto debe aparecer una lista de los objetos de ese tipo. Por ejemplo, al hacer clic en el icono del signo más (+) que precede a Tablas se muestra una lista de tablas.

■ Al hacer clic en el icono del signo más (+) que precede a una tabla debe aparecer una lista de campos y así sucesivamente.

Si no obtiene estos resultados, puede que la base de datos o que la conexión con la base de datos sea incorrecta.



Crear una nueva base de datos Físicamente, las bases de datos de SQL Server residen en dos archivos: un archivo principal con una extensión .mdf y un archivo de registro con la extensión .ldf. Estos archivos pueden residir en cualquier lugar del equipo donde se ejecute SQL Server, pero suelen utilizarse las ubicaciones siguientes.

■ En el caso de las bases de datos que sólo utilizarán un sitio Web ASP.NET 2.0, la ubicación más cómoda es la carpeta App_Data de ese sitio Web. Esto simplifica considerablemente la publicación de la base de datos y el trabajo en el sitio remoto.

■ Si se trata de bases de datos que utilizarán varias aplicaciones o sitios Web, la mejor ubicación suele ser la carpeta Data predeterminada de SQL Server. Suele ser C:\Archivos de programa\Microsoft SQL Server\MSSQL.1\MSSQL\Data

Cualquiera que sea la ubicación, puede crear nuevas bases de datos de SQL Server directamente en Visual Web Developer. En el resto de este libro, por ejemplo, se utilizará una base de datos de SQL Server denominada ContosoMagic.mdf que reside en la carpeta App_Data del sitio Web de ejemplo.

PARA CREAR UNA BASE DE DATOS DE SQL SERVER PARA EL SITIO DE EJEMPLO

1 Abra el sitio Web en Visual Web Developer.

2 Elija Nuevo archivo en el menú Archivo.

3 Cuando aparezca el cuadro de diálogo Agregar nuevo elemento, seleccione Base

de datos SQL en el cuadro Plantillas.

4 En el cuadro Nombre, escriba ContosoMagic.mdf.

5 Haga clic en el botón Agregar. Si aparece un mensaje como el siguiente, haga clic en el

botón Sí. Visual Web Developer creará la base de datos y la conexión de datos.



PARA CREAR UNA BASE DE DATOS QUE RESIDA EN LA CARPETA DE DATOS PREDETERMINADA DE SQL SERVER

1 En el Explorador de base de datos, haga clic con el botón secundario del mouse en el nodo de nivel superior (titulado Conexiones de datos) y elija Crear nueva base de datos de SQL

Server en el menú contextual.

2 Cuando aparezca el cuadro de diálogo Crear nueva base de datos de SQL Server que se muestra en la figura 13-3, especifique el nombre del servidor de base de datos como hizo al

conectar con una base de datos existente en la sección anterior. Por ejemplo, si está ejecutando SQL Server Express en un equipo denominado NIOBIUM, especifique NIOBIUM\SqlExpress.

3 En el marco Conexión con el servidor, especifique sus credenciales para crear la base de datos. En el caso de SQL Server Express, suele ser autenticación de Windows.

4 En el cuadro Nombre de la base de datos nueva, escriba un nombre breve que describa la base de datos que va a crear.

5 Haga clic en el botón Aceptar para crear la base de datos. Para su comodidad, Visual Web Developer también creará inmediatamente una conexión de datos.

Agregar y modificar tablas de base de datos Visual Web Developer puede crear, modificar y eliminar directamente tablas de bases de datos de SQL Server. Por ejemplo, para crear una tabla Products en la base de datos de ContosoMagic, haga lo siguiente.

PARA CREAR UNA TABLA PRODUCTS EN LA BASE DE DATOS DE CONTOSOMAGIC

1 En la ventana Explorador de base de datos, haga clic en el icono Más (+) situado junto a la conexión de datos ContosoMagic que creó en la sección anterior. Después, haga clic con el botón secundario

del mouse en la entrada Tablas y seleccione Agregar nueva tabla en el menú contextual.

Figura 13-3 Este cuadro de diálogo crea una nueva base de datos de SQL Server y una nueva conexión de datos coincidente. Sin embargo, no crea ninguna tabla.



2 Visual Web Developer mostrará un Diseñador de tablas para asignar nombre a los campos de la nueva tabla y describirlos. Para crear el primer campo, haga lo siguiente:

a. Establezca el punto de inserción en la primera fila del Diseñador de tablas, bajo el campo Nombre de columna.

b. Escriba el nombre ProductId y presione la tecla Tab.

c. En la columna Tipo de datos, seleccione Int en la lista desplegable y presione la tecla Tab.

d. Desactive la casilla de verificación de la columna Permitir valores nulos.

e. En la ficha Propiedades de columna situada cerca de la parte inferior de la ventana, desplácese hacia abajo hasta Especificación de identidad, haga clic en el icono Más (+) para expandirlo y establezca la propiedad (Identidad) en Sí. La figura 13-4 muestra este paso.

f. Haga clic con el botón secundario del mouse en cualquier lugar de la nueva fila ProductId y seleccione Establecer clave principal en el menú contextual.

Figura 13-4 Visual Web Developer incluye un Diseñador de tablas que puede agregar, modificar y eliminar campos de una tabla de base de datos.



Al establecer la propiedad (Identidad) en Sí se indica a SQL Server que cada vez que agregue un registro a la tabla se debe establecer el campo dado en un valor único. Al seleccionar uno o más campos, hacer clic con el botón secundario del mouse en la selección y elegir Establecer clave principal en el menú contextual se indica a SQL Server que trate esos campos como la auténtica identidad de cada registro.

3 Cada vez que cree un campo rellenando la fila en blanco que hay en la parte inferior de la cuadrícula, Visual Web Developer crea una nueva fila en blanco para que pueda anexar otro campo. Siguiendo

este modelo, establezca el punto de inserción en la segunda, tercera y cuarta filas de la cuadrícula, y asigne las propiedades de campo correspondientes de la tabla 13-1.

4 Elija Guardar tablan en el menú Archivo, donde n es un número secuencial que Visual Web Developer asignará. Cuando aparezca el cuadro de diálogo Elegir nombre que se muestra debajo,

escriba Products y haga clic en el botón Aceptar.

Para agregar, modificar o eliminar campos de una tabla existente, haga clic con el botón secundario del mouse en la tabla en el Explorador de base de datos y elija Abrir definición de tabla. Aparecerá la cuadrícula que se muestra en la figura 13-4.

Para eliminar una tabla, haga clic en ella con el botón secundario del mouse en el Explorador de base de datos y elija Eliminar. Se eliminará tanto la definición de la tabla como los datos que pueda contener la tabla.

Tabla 13-1Campos de la tabla Products de ContosoMagic

Nombre Tipo de datos Permitir valores Identidad Clave principalde columna nulos

ProductId int Desactivada Sí Sí

CategoryId int Desactivada (valor predet.) (valor predet.)

ProductName varchar(255) Desactivada (valor predet.) (valor predet.)

ProductPrice money Desactivada (valor predet.) (valor predet.)



Ver y actualizar contenido de tablas de base de datos Para ver los datos de cualquier tabla, haga clic con el botón secundario del mouse en el nombre de la tabla en el Explorador de base de datos y elija Mostrar datos de tabla. Se iniciará una parte de Visual Web Developer denominada el Diseñador de consultas que consulta y muestra los datos de esa tabla. Como se muestra en la figura 13-5, la ventana Diseñador de consultas contiene hasta cuatro paneles.

Inicialmente, el Diseñador de consultas ejecuta una consulta muy sencilla y muestra los resultados en el panel Resultados. Se trata de una vista muy sencilla parecida a una hoja de cálculo. Puede utilizar esta vista para cambiar, agregar o eliminar registros:

Figura 13-5 Inicialmente, el Diseñador de consultas sólo muestra el panel Resultados que aparece aquí en la parte inferior. Los tres paneles superiores configuran gráficamente consultas más avanzadas.

Panel Diagrama

Panel de criterios

Panel SQL

Panel Resultados



■ Para cambiar el valor de cualquier campo, selecciónelo y escriba el nuevo valor.

■ Para agregar un registro, escriba sus valores de datos en la fila en blanco que hay al final de la tabla.

■ Para eliminar un registro, selecciónelo y presione la tecla Supr.

Visual Web Developer inserta, actualiza o elimina inmediatamente el registro actual siempre que presiona Entrar o Supr, o que cambia a otro registro. No es necesario guardar nada antes de cerrar la vista.

Si simplemente desea examinar rápidamente los datos, y quizás hacer algunas correcciones, puede que sólo necesite el panel Resultados. Sin embargo, si desea realizar consultas más complejas o simplemente desea tener más control, los otros tres paneles pueden ser muy útiles. Para mostrar cualquiera de estos paneles:

1. Haga clic con el botón secundario del mouse en la ventana Diseñador de consultas.

2. Elija Panel en el menú contextual.

3. Seleccione el panel que desee mostrar u ocultar.

He aquí una breve descripción de cada panel y algunas razones para utilizarlo:

■ Diagrama Muestra una pequeña ventana para cada tabla que participa en la consulta. Las casillas de verificación indican campos destinados a resultados y los iconos AZ indican la ordenación en sentido ascendente o descendente.

■ Para agregar una tabla al diagrama (y por tanto a la consulta), arrástrela desde el Explorador de base de datos y colóquela en el panel Diagrama.

■ Para combinar cualquier par de tablas (es decir, para buscar registros coincidentes basándose en valores de datos), arrastre el campo que desea que coincida de una tabla y colóquelo en el campo que desea que coincida en la otra tabla.

■ Para modificar las propiedades de combinación, haga clic con el botón secundario del mouse en la línea que conecta las dos tablas y elija el tipo de combinación que desee.

■ Criterios Muestra una vista tabular editable de los campos y las tablas que participan en la consulta.



■ SQL Muestra la instrucción de SQL que genera la consulta.

Siempre que actualice el panel Diagrama, Criterios o SQL, Visual Web Developer actualizará los otros dos paneles. Por ejemplo, si modifica el panel SQL, Visual Web Developer actualizará los paneles Diagrama y Criterios en consecuencia.

■ Resultados Muestra el resultado de ejecutar la consulta. La consulta predeterminada que aparece la primera vez que elige el comando Mostrar datos de tabla es:

SELECT * FROM <nombreDeTabla>

donde <nombreDeTabla> es el nombre de la tabla.

Si utiliza el panel Diagrama, Criterios o SQL para cambiar esta consulta, el panel Resultados no mostrará los efectos hasta que no:

■ Elija Ejecutar SQL en el menú Diseñador de consultas, o bien

■ Haga clic con el botón secundario del mouse en la ventana Diseñador de consultas y elija Ejecutar SQL en el menú contextual.

En resumen… Visual Web Developer puede conectar su sitio Web con tantas bases de datos existentes como desee. También puede crear bases de datos y conectar con ellas en una misma operación. Estas bases de datos suelen residir en la carpeta App_Data del sitio Web o en la carpeta Data predeterminada de SQL Server.

Visual Web Developer también puede crear, modificar y actualizar tablas y registros de base de datos, todo ello sin obligarle a salir del programa.

En el próximo capítulo se explica cómo crear una página Web sencilla que actualiza la tabla Products que creó en este capítulo.


149

Capítulo 14Mostrar información de base de datos

14Utilizar orígenesde datos, 150

Configurar orígenes de datos, 151

Mostrar informaciónde base de datos, 155

Configurar un control GridView, 157

La programación de base de datos tiene fama de ser una tarea difícil, y lo es con justicia. Las bases de datos son complejas y fundamentales para la empresa. No obstante, las bases de datos son tan importantes y tan útiles que los creadores de software se afanan continuamente en ofrecer herramientas de base de datos intuitivas y fáciles de utilizar. Microsoft® ASP.NET 2.0 y Microsoft Visual Web Developer™ proporcionan algunas de las herramientas mejores y más fáciles de utilizar.

Con Visual Web Developer puede crear aplicaciones de base de datos Web sencillas o moderadamente complejas utilizando únicamente la interfaz gráfica de diseño. Esto implica tres tipos de componentes:

■ Conexiones de datos Proporcionan recorridos a las bases de datos. En el capítulo 13 se ha explicado cómo crear y modificar estos recorridos.

■ Orígenes de datos Utilizan conexiones de datos para recuperar, insertar, actualizar y eliminar registros de base de datos, pero no muestran nada al visitante del Web.

■ Controles enlazados a datos Recuperan y muestran información de un origen de datos. En el caso de las operaciones de inserción, actualización y eliminación, los controles enlazados a datos también suministran al origen de datos información para el procesamiento.

En este capítulo se explica cómo utilizar y crear orígenes de datos, y cómo utilizar controles enlazados a datos para mostrar datos. En el capítulo 15 se explicará cómo utilizar estos controles para hacer cambios en una base de datos.


150 Generar una página Web con Microsoft Visual Web Developer 2005 Express

Utilizar orígenes de datos

Figura 14-1 Al arrastrar una tabla o una consulta desde el Explorador de base de datos hasta una página Web abierta se crean dos controles: un control de origen de datos y un control GridView. También se muestra el menú de tareas del control GridView.

Para apreciar la eficacia de los orígenes de datos y los controles enlazados a datos, pruebe este procedimiento sencillo: 1. En el Explorador de base de datos, expanda cualquier conexión de datos existente y

busque una tabla o una consulta que desee mostrar en una página Web. 2. Abra la página Web en la vista Diseño. 3. Arrastre la tabla o la consulta desde el Explorador de base de datos y colóquela en la

página abierta. Como se muestra en la figura 14-1, esto agrega dos controles a la página Web: un control de origen

de datos (en este caso, un control SqlDataSource denominado SqlDataSource1) y un control GridView (que muestra la cuadrícula tabular con los campos de la base de datos como encabezados de columna).

GridView es uno de los controles enlazados a datos más conocidos y útiles. Visual Web Developer enlaza (es decir, conecta) automáticamente el nuevo control GridView al nuevo origen de datos.

También puede crear un origen de datos si arrastra un icono fuera del grupo Datos del Cuadro herramientas y lo coloca en la página. En la tabla 14-1 se describen algunos de los controles de origen de datos más conocidos. El Cuadro de herramientas de su copia de Visual Web Developer puede ofrecer más o menos controles de origen de datos, dependiendo de su versión y de otro software que tenga instalado.


Capítulo 14: Mostrar información de base de datos 151

Configurar orígenes de datos

Cuando crea un origen de datos arrastrando una tabla o una consulta desde el Explorador de base de datos, ofrece todos los registros y todos los campos de esa tabla o consulta, sin ordenar. Para cambiar estos valores predeterminados o para configurar un origen de datos creado desde el Cuadro de herramientas, haga lo siguiente.

PARA CONFIGURAR UN ORIGEN DE DATOS

Tabla 14-1Controles de origen de datos frecuentes de ASP.NET 2.0

1 Seleccione el control de origen de datos, haga clic en su icono de etiqueta inteligente y

seleccione Configurar origen de datos en el menú de tareas que aparecerá.

2 Cuando aparezca el cuadro de diálogo Elegir la conexión de datos que se muestra en la

figura 14-2, realice una de las acciones siguientes:

■ Utilice el cuadro desplegable para seleccionar la conexión de datos que desee, o bien

■ Haga clic en el botón Nueva conexión para crear una nueva conexión de datos. Aparecerá el cuadro de diálogo Agregar conexión que se explica en el capítulo 13.

Control Descripción

SqlDataSource Recupera y actualiza información de bases de datos de Microsoft SQL Server™.

AccessDataSource Recupera y actualiza información de bases de datos de Microsoft Access.

ObjectDataSource Recupera y actualiza información mediante un objeto personalizado. En una aplicación con tres niveles (presentación, lógica de negocios y acceso a datos), el control enlazado estaría normalmente en el nivel de presentación y el objeto personalizado estaría en el nivel de lógica de negocios.

XmlDataSource Recupera y transforma opcionalmente información de archivos XML.

SiteMapDataSource Recupera información de un archivo XML de mapa del sitio. En el capítulo 12 se ha explicado cómo utilizar un archivo de mapa del sitio y un control SiteMapDataSource para mostrar hipervínculos en controles Menu, TreeView y SiteMapPath.



Para mostrar la cadena de conexión que utilizará el origen de datos, haga clic en el icono Más (+) que precede a la opción Cadena de conexión

Figura 14-2 El primer paso para configurar un origen de datos consiste en especificar la conexión de datos que debe utilizar.

3 Haga clic en el botón Siguiente para ver el cuadro de diálogo Configurar la instrucción Select que se muestra en la figura 14-3. En el caso de consultas sencillas, seleccione Especificar columnas de una

tabla o vista y configure estas opciones:

■ Nombre Seleccione la tabla o la consulta que desee. Todas las opciones desplegables procederán de la conexión de datos que especificó en la primera página del asistente.

■ Columnas Active la casilla de verificación que precede a cada campo que desea que el origen de datos recupere o actualice. Para especificar todos los campos, active la casilla de verificación de asterisco (*).

■ Devolver sólo filas únicas Active esta casilla de verificación si cuando dos o más registros tengan valores idénticos sólo desee recuperar uno de ellos.



■ WHERE Haga clic en este botón para mostrar un cuadro de diálogo Agregar cláusula WHERE. Esto ofrece un medio para devolver únicamente aquellos registros que tengan ciertos valores de datos. Por ejemplo, puede especificar que el valor de un campo dado debe coincidir con el valor de una constante, otro control de la página Web, una cookie, un campo de formulario HTML convencional, un campo de perfil ASP.NET, una variable de cadena de consulta o una variable de sesión.

■ ORDER BY Haga clic en este botón para mostrar un cuadro de diálogo Agregar cláusula ORDER BY donde puede especificar uno, dos o tres campos que se utilizarán para ordenar los datos.

■ Avanzadas Haga clic en este botón para mostrar un cuadro de diálogo Opciones de generación SQL avanzadas. Si piensa utilizar el origen de datos para la actualización, active la casilla de verificación Generar instrucciones Insert, Update y Delete. La otra opción de este cuadro de diálogo, Usar concurrencia optimista, es un factor de ajuste que quizás tenga que ajustar en entornos con mucha ocupación.

Si estas opciones no ofrecen la flexibilidad que necesita, páselas por alto y seleccione Especificar una instrucción SQL o un procedimiento almacenado personalizado cerca de la parte superior del cuadro de diálogo.

Figura 14-3 Esta página del asistente especifica qué campos y registros debe proporcionar el origen de datos, y en qué orden.



Para especificar una instrucción SELECT, UPDATE, INSERT o DELETE personalizada, seleccione la ficha correspondiente y haga clic en el botón Generador de consultas. Esto muestra el mismo diseñador de consultas que se describe en la sección Ver y actualizar contenido de tablas de base de datos del capítulo 13. Escriba su instrucción SQL, pruébela haciendo clic en el botón Ejecutar consulta y haga clic en el botón Aceptar.

5 Al hacer clic en el botón Siguiente se muestra la última página del asistente, el cuadro de diálogo Consulta de prueba que se muestra en la figura 14-5. Haga clic en el botón Consulta de prueba y

compruebe que en el cuadro central se muestran los datos que desea. Si son correctos, haga clic en el botón Finalizar. De lo contrario, haga clic en el botón Anterior y modifique las entradas.

Figura 14-4 Si elige utilizar una instrucción SQL o un procedimiento almacenado personalizados, el asistente mostrará esta página para que pueda proporcionar esas instrucciones.

4 Si seleccionó Especificar una instrucción SQL o un procedimiento almacenado personalizado en el paso anterior, al hacer clic en el botón Siguiente aparecerá el cuadro de diálogo Definir instrucciones

o procedimientos almacenados personalizados que se muestra en la figura 14-4.



Tenga en cuenta que cada control de origen de datos sólo almacena una configuración: es decir, una tabla o consulta, una selección de campos, un sentido de ordenación, etc. Si su página necesita tener acceso a dos o más tablas, o a la misma tabla o consulta con criterios diferentes, tendrá que agregar y configurar un control de origen de datos distinto para cada una.

Mostrar información de base de datos Muchos controles de servidor Web ASP.NET 2.0 pueden enlazarse a un origen de datos. Por ejemplo, para rellenar una lista desplegable con opciones de una tabla de base de datos, establezca estas tres propiedades en cualquier control DropDownList:

■ DataSourceID El nombre de un control de origen de datos que señala a la tabla o la consulta que proporciona los datos.

Figura 14-5 Cuando hace clic en el botón Consulta de prueba de este cuadro de diálogo, el asistente mues-tra una vista previa de lo que entregará el origen de datos.



■ DataTextField El nombre del campo que proporciona los valores que verá el visitante del Web. Suele ser un campo de texto como NombreProducto o NombreCategoría.

■ DataValueField El nombre del campo que proporciona los valores que enviará la página Web. Suele ser un campo de código como IdProducto o IdCategoría.

Sin embargo, en muchas ocasiones los desarrolladores desean mostrar varios campos o incluso varios registros en un único control, y quizás permitir también la actualización de bases de datos. Para controlar esos requisitos, ASP.NET 2.0 proporciona los controles que se enumeran en la tabla 14-2.

Tabla 14-2Controles de presentación enlazados a datos

De estos cinco controles, GridView, DetailsView y FormView son los más recientes, los más fáciles de utilizar y, por tanto, los más interesantes. El proceso de configuración es básicamente el mismo para cada uno de ellos.

En el resto de este capítulo se explica cómo configurar un control GridView para mostrar productos para el sitio de Contoso Magic. El próximo capítulo, que explica la actualización, tiene un ejemplo en el que se utiliza el control DetailsView.

Control Descripción Permite Presentado en actualizaciones en ASP.NET

GridView Muestra varios registros en un formato de Update, Delete 2.0 filas y columnas.

DetailsView Muestra un registro cada vez utilizando Insert, Update, 2.0 HTML sencillo. Delete

FormView Muestra un registro cada vez en un formulario Insert, Update, 2.0 con mucho formato. Delete

DataList Repite una plantilla personalizada una vez por Programación 1.0 por cada registro de un origen de datos, combinando valores del registro actual.

Repeater Similar a DataList, pero no suministra su propio Programación 1.0 código HTML. Esto mejora la flexibilidad personalizada pero requiere plantillas más complejas.



Configurar un control GridView En esta sección se explica cómo crear la página Contoso Magic Costumes que se muestra en la figura 14-6. Las áreas de título, menús, pie de página y rastros ya deben resultarle familiares, así como el tema; todas ellas se han visto en capítulos anteriores de este libro.

Figura 14-6 Un control GridView ha creado la presentación de datos en el centro de esta página Web.

Observe la cuadrícula que muestra los 10 primeros productos de la categoría Costumes. Se trata de un control GridView que muestra información de la tabla Products creada en el capítulo 13.



PARA CREAR UNA PÁGINA WEB GRIDVIEW

1 Abra una nueva página en blanco, aplicando las páginas principales u otro formato que desee.

2 Agregue un control GridView y un control SqlDataSource a la página. Realice una de las acciones siguientes:

■ Arrastre la tabla Products desde el Explorador de base de datos y colóquela en la página.

■ Arrastre un control GridView y un control SqlDataSource desde el grupo Datos del Cuadro de herramientas, colocando ambos controles en la página Web abierta.

3 Muestre el menú de tareas del control SqlDataSource y haga clic en Configurar origen de datos.

4 Cuando aparezca el cuadro de diálogo Elegir la conexión de datos, seleccione o cree una conexión con la base de datos ContosoMagic y haga clic en el botón Siguiente.

5 Cuando aparezca el cuadro de diálogo Configurar la instrucción Select, seleccione la tabla Products y sólo los campos ProductId, ProductName y ProductPrice.

6 Haga clic en el botón WHERE y, cuando aparezca el cuadro de diálogo Agregar cláusula WHERE, especifique estos valores:

■ Columna CategoryId

■ Operador = (igual)

■ Origen None

■ Valor 1 (Nota: esta opción está en el marco Propiedades del parámetro.)

y haga clic en el botón Agregar. Esto limita la consulta de forma que sólo devuelva aquellos registros que tengan el número CategoryId igual a 1. La figura 14-7 ilustra esta configuración.



7 Haga clic en el botón Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE y, después, haga clic en el botón Ordenar por del cuadro de diálogo Configurar la instrucción Select.

8 Cuando aparezca el cuadro de diálogo Agregar cláusula ORDER BY, establezca Ordenar por en

ProductName y haga clic en el botón Aceptar. Esto establece el orden predeterminado para la presentación.

9 Haga clic en el botón Siguiente, en el botón Consulta de prueba y en el botón Finalizar para completar el asistente.

La configuración del control GridView es una operación independiente. Para realizar esta tarea, haga lo siguiente.

PARA CONFIGURAR EL CONTROL GRIDVIEW

1 Muestre el menú de tareas del control GridView y asegúrese de que la lista desplegable Elegir origen de datos señala al origen de datos recién configurado.

Figura 14-7 Este cuadro de diálogo configura las opciones de filtro para un origen de datos. No olvide hacer clic en el botón Agregar antes de hacer clic en el botón Aceptar.



2 Active las casillas de verificación siguientes:

■ Habilitar paginación Sólo muestra un número establecido de registros a la vez. Para cambiar entre los conjuntos de registros, el visitante del Web hace clic en un número que aparece en la parte inferior de la pantalla. La pantalla de la figura 14-6 tiene dos conjuntos de registros, numerados como 1 y 2.

■ Habilitar ordenación Permite que los visitantes del sitio ordenen la pantalla por cualquier columna haciendo clic en su encabezado. En la figura 14-6, el visitante está a punto de ordenar la pantalla por Product Price.

3 Haga clic en Editar columnas en el menú de tareas y cuando aparezca el cuadro de diálogo Campos que se muestra en la figura 14-8, utilice el cuadro Campos seleccionados y sus botones de flecha

arriba y flecha abajo para organizar los campos en este orden: ProductName, ProductId, ProductPrice.

Figura 14-8 Con este cuadro de diálogo configura qué campos mostrará un control GridView, DetailsView o FormView y también cómo aparecerán los campos.

4 Seleccione ProductName en el cuadro Campos seleccionados y utilice el cuadro Propiedades de BoundField para aplicar las propiedades enumeradas en la tabla 14-3. Repita este procedimiento para

los campos ProductId y ProductPrice.



5 Haga clic en el botón Aceptar para cerrar el cuadro de diálogo Campos, seleccione el control GridView y utilice la ventana normal Propiedades de Visual Web Developer para configurar las

opciones siguientes. Ambas opciones son totalmente estéticas.

■ CssClass formbox (Es el nombre de una regla de estilo CSS.)

■ HorizontalAlign Center

6 Guarde la página y muéstrela en el explorador. Pruebe y refine la página si lo desea.

El sitio de ejemplo Contoso Magic tiene una página diferente para cada una de las 10 categorías. Una de ellas es la página Costumes; las otras nueve son copias directas donde sólo cambian el título de la página y los criterios de selección. De esta forma hay suficientes páginas para que el ejemplo de menú sea algo realista.

En un sitio real, quizás prefiera tener una única página de productos con una lista desplegable para seleccionar la categoría. La página ConjureCats.aspx de los archivos de ejemplo ofrece un ejemplo de esta técnica. Esta página difiere de la página Costumes en lo siguiente:

■ Contiene dos controles SqlDataSource: uno para la tabla Products y una para una tabla Categories.

■ Contiene un control DropDownList configurado como se explica en la anterior sección “Mostrar información de base de datos”.

Además, la propiedad AutoPostBack de este control está establecida en True de forma que al cambiar la selección se envía automáticamente el formulario y se recupera una lista de productos de la categoría recién seleccionada.

Tabla 14-3Propiedades de BoundField parala página Costumes.aspx

Propiedad Campo de datos

DataField ProductName ProductId ProductPrice

DataFormatString {0:$#,##0.00}

HeaderText Product Name Product Id Product Price

HtmlEncode True True False

Item Style: HorizontalAlign Right Right

Item:Style VerticalAlign Top Top TopCadenas de formato de datos ASP.NET

La página Contoso Magic Costumes de esta sección utiliza la cadena de formato de datos {0:$#,##0.00} para mostrar los precios. Se trata de una cadena de formato típica de ASP.NET. ■ Un par de llaves ({ }) son

delimitadores obligatorios. ■ El signo de dos puntos (:)

separa el número de campo de la especificación de formato.

■ El número de campo siempre será 0, lo que indica el campo número uno.

■ $#,##0.00 es el formato real. Especifica un signo de dólar inicial; comas cada tres dígitos; supresión de ceros excepto para las posiciones de unidades, decenas y centenas; y un punto como signo decimal.

Continúa en la página siguiente



■ En el control SqlDataSource para la tabla Products, el cuadro de diálogo Agregar cláusula WHERE especifica Control en la lista desplegable Origen y DropDownList1 en la lista desplegable Id. del control. (La lista desplegable Id. del control está en el marco Propiedades del parámetro.)

Los archivos de ejemplo también incluyen una página SeekProducts.aspx en la que los visitantes pueden escribir una descripción parcial del producto en un cuadro de texto, hacer clic en un botón Summon y recibir una lista de los productos coincidentes. Esta página también es parecida a la página Costumes.aspx, pero incluye:

■ Un control TextBox denominado txtRune.

■ Un control Button denominado btnSummon que envía el formulario.

■ La siguiente condición en el cuadro de diálogo Agregar cláusula WHERE de su control SqlDataSource:

■ Columna ProductName

■ Operador LIKE

■ Origen Control

■ Id. del control txtRune

■ Una propiedad DataTextField que especifica qué campo suministra el texto visible.

■ Una propiedad NavigateURL que especifica qué campo suministra la dirección URL de destino.


ASP.NET también puede dar formato a fechas y horas. Por ejemplo, {0:dd-MMM-yyyy} mostraría el cumpleaños de Harry Houdini como 24-Mar-1874.

Para obtener más información, busque Especificadores de formato en el índice de la Ayuda de Visual Web Developer.

Mostrar elementos de página complejos

De manera predetermi-nada, los controles GridView, DetailsView y FormView muestran toda la información como texto sin formato. Para mostrar infor-mación como una casilla de verificación, un hipervínculo, una imagen u otro elemento HTML:

1. Configure el control de la manera habitual hasta llegar al cuadro de diálogo Campos que se muestra en la figura 14-8.




En resumen… Visual Web Developer puede crear páginas atractivas que muestren información de base de datos de diversas formas. Para hacerlo sin escribir código de programa se requieren tres componentes: una conexión de datos que proporcione un recorrido a la base de datos, un origen de datos que recupere registros de la conexión de datos y un control enlazado a datos (con frecuencia un control GridView, DetailsView o FormView) que convierta los datos a código HTML para su presentación.

En el próximo capítulo se explicará cómo esta misma colección de controles puede actualizar información de bases de datos.


2. En el cuadro Campos disponibles, seleccione el tipo de control de salida que desee y haga clic en el botón Agregar. Esto agregará una entrada al cuadro Campos seleccionados.

3. Con esta nueva entrada seleccionada, configure al menos las propiedades DataField y HeaderText (o sus equivalentes) en el cuadro Propiedades de BoundField de la derecha.

Mientras lo hace, debe estar preparado para alguna variación entre los controles de salida. Un campo con hipervínculo, por ejemplo, no tiene ninguna propiedad DataField. En su lugar, tiene:

Una propiedad dataTextField que especifica qué campo proporciona el texto visible.

Una propiedad navigateURL que especifica qué campo suministra la dirección URL de destino.


165

Capítulo 15Mantener información de base de datos

15Utilizar un control GridView para actualizar y eliminar registros, 166

Utilizar un control DetailsView para agregar registros, 169

La recuperación, organización y presentación de información valiosa suele ser una experiencia reconfortante. Introduce unos pocos datos y obtiene gran cantidad de información. Sin embargo, el paso preliminar de agregar registros a una base de datos no es tan divertido. Introduce muchos datos y recibe pocas recompensas a corto plazo. No obstante, alguien tiene que introducir los datos que necesita su sitio. En este capítulo se explica cómo puede utilizar el control GridView del capítulo anterior para actualizar o eliminar registros y cómo puede utilizar el control DetailsView para agregar registros. En este capítulo también se mencionan algunas funciones adicionales que ofrecen estos controles. Lo mejor de todo es que ninguna de estas técnicas requiere la escritura de código.



Utilizar un control GridView para actualizar y eliminar registros La figura 15-1 ilustra el uso de GridView para actualizar registros. Para cada registro, la cuadrícula muestra cualquier combinación que desee de estos vínculos especiales.

■ Edit Utiliza un campo de formulario HTML para mostrar todos los campos actualizables que contiene un registro. El visitante del Web modifica estos valores según sea necesario y hace clic en un vínculo Update para guardar los cambios o en un vínculo Cancel para abandonarlos.En la figura se ilustra eso.

■ Delete Elimina inmediatamente el registro correspondiente. No hay ninguna pregunta del tipo “¿Realmente desea?”.

■ Select Marca como actual el registro correspondiente. En la página de la figura no se utiliza esta opción. Para obtener más información acerca del funcionamiento de esta opción, consulte la barra lateral titulada “Doble enlace: no es un truco de escapismo”.

Figura 15-1 Cuando se utiliza un control GridView para actualizar una base de datos, el visitante hace clic primero en Edit, sobrescribe los campos de formulario y hace clic en el vínculo Update.


Capítulo 15: Mantener información de base de datos 167

PARA CONFIGURAR UN CONTROL GRIDVIEW QUE REALICE ACTUALIZACIONES

Asegúrese de que la tabla de base de datos tenga una clave principal. Por ejemplo, haga clic con el botón secundario del mouse (ratón) en la tabla en el Explorador de base de datos, elija Abrir definición de tabla

y asegúrese de que el campo (o cada uno de los campos, si hay más de uno) que identifica cada registro de manera única tenga un icono de llave como se muestra a continuación.

Doble enlace: no es un truco de escapismo

En ASP.NET 2.0, dos controles diferentes pueden estar enlazados al mismo origen de datos. Ambos controles muestran los mismos datos.

Por ejemplo, si enlaza un control DetailsView (que muestra un registro cada vez) y un control GridView (que muestra varios registros pero selecciona un registro cada vez) al mismo origen de datos, los dos controles mostrarán siempre el mismo registro actual.

Si no lo tiene, seleccione el campo (o los campos) que deben actuar como clave principal, haga clic con el botón secundario del mouse en la selección y elija Establecer clave principal en el menú contextual.

2 Configure el origen de datos y el control GridView de manera que muestren los registros y los campos que desea. Examine la página para asegurarse de que la función de presentación funciona

correctamente.

3 Asegúrese de que el origen de datos esté configurado con instrucciones INSERT, UPDATE y DELETE. Para comprobarlo:

■ Seleccione Configurar origen de datos en el menú de tareas del control.

■ Haga clic en el botón Siguiente para ver el cuadro de diálogo Configurar la instrucción Select.

■ Si el botón Opciones avanzadas está habilitado, haga clic en él. Cuando aparezca el cuadro de diálogo Opciones de generación SQL avanzadas, asegúrese de que la casilla de verificación Generar instrucciones Insert, Update y Delete está activada, como se muestra en la figura 15-2.

Si el botón Opciones avanzadas o la casilla de verificación Generar instrucciones Insert, Update y Delete están atenuados, y la casilla de verificación no está activada, cierre el cuadro de diálogo Opciones de generación SQL avanzadas (si está abierto) para realizar una de estas acciones en el cuadro de diálogo Configurar la instrucción Select:

Figura 15-2 Si piensa utilizar un origen de datos para la actualización, debe activar la primera casilla de verificación de este cuadro de diálogo.

Un icono de llaveindica campos dela clave principal.



■ Con la opción Especificar una instrucción SQL o un procedimiento almacenado personalizado seleccionada, haga clic en el botón Siguiente para mostrar el cuadro de diálogo Definir instrucciones o procedimientos almacenados personalizados. Después, asegúrese de que todas las fichas UPDATE, INSERT y DELETE muestran instrucciones SQL válidas.

■ Seleccione la opción Especificar columnas de una tabla o vista, reconfigure la instrucción SELECT desde el principio, haga clic en el botón Opciones avanzadas y active la casilla de verificación Generar instrucciones Insert, Update y Delete. (Si desea ayuda para reconfigurar la instrucción SELECT, consulte el capítulo 14.)

4 Si va a volver a crear el sitio de ejemplo, cree una nueva página Web ASP.NET en una carpeta denominada secure/, asígnele el nombre UpdateProducts.aspx, y agregue controles SqlDataSource y

GridView como hizo en el capítulo anterior.

5 Muestre el menú de tareas del control GridView y active cualquier combinación de estas casillas de verificación:

■ Habilitar edición Active esta casilla de verificación si desea que el control GridView modifique registros existentes de la base de datos.

■ Habilitar eliminación Active esta casilla de verificación si desea que el control GridView elimine registros existentes de la base de datos.

■ Habilitar selección Active esta casilla de verificación si desea que el control GridView designe registros como actuales. Los valores de campo de ese registro aparecerán entonces en todos los controles enlazados al mismo origen de datos.

6 Guarde la página, véala en un explorador y pruébela.

Los archivos de ejemplo para el sitio de ContosoMagic incluyen una página ProductUpdate.aspx que ilustra estas técnicas. Esta página reside en una subcarpeta denominada /secure/. En el capítulo 17 se explicará como impedir que los visitantes no autorizados utilicen páginas de esa carpeta.



Utilizar un control DetailsView para agregar registros El uso de un control GridView para actualizar o eliminar registros es sencillo e intuitivo. No obstante, el uso de un control GridView para agregar registros requiere escribir código de programa bastante complicado. Para agregar registros sin escribir código de programa puede utilizar un control DetailsView.

Para crear una página que utiliza un control DetailsView para agregar registros a la tabla Products de la base de datos de Contoso Magic, haga lo siguiente.

PARA CREAR UNA PÁGINA QUE UTILIZA UN CONTROL DETAILSVIEW

1 Cree una nueva página en blanco denominada ProductAdd.aspx y colóquela en la misma carpeta /secure/ que la página ProductUpdate.aspx de la sección anterior. Aplique las páginas principales o

cualquier otro formato que desee.

2 Agregue un control SqlDataSource a la página arrastrándolo desde el grupo Datos del Cuadro de herramientas. Configure este origen de datos para que tenga acceso a la tabla Products de la base de

datos de ContosoMagic.

Cuando llegue a la segunda página del asistente, haga clic en el botón Opciones avanzadas y asegúrese de que la casilla de verificación Generar instrucciones Insert, Update y Delete está activada.

3 Agregue un control DetailsView a la página arrastrándolo desde el Cuadro de herramientas.

4 Configure los campos siguientes en el menú de tareas para el nuevo control DetailsView.

■ Elegir origen de datos Seleccione el origen de datos que creó en el paso 2.

■ Habilitar inserción Active esta casilla de verificación.

5 Cambie a la ventana Propiedades y asegúrese de que el nuevo control DetailsView está seleccionado. Después, compruebe que las configuraciones de propiedades mostradas en la tabla 15-1 están

vigentes.

6 Guarde la página, véala en un explorador y pruébela. Todos los registros que cree deben aparecer la próxima vez que actualice cualquiera de las páginas de productos.

Igual que el control DetailsView, un control FormView puede mostrar, insertar, actualizar y eliminar registros. El control FormView es más flexible, pero también es más difícil de utilizar. Tiene que proporcionar una plan-tilla HTML para cada característica que desee utilizar. Si desea ver un ejemplo donde se utiliza el control FormView para agregar registros, inspeccione la página secure/ProductAddFormView.aspx de los archivos de ejemplo.

N O TA



La figura 15-3 muestra la apariencia de la página ProductAdd.aspx en un explorador. Para agregar un registro Product, el visitante especificaría un valor para los campos Category Id, Product Name y Product Price, y haría clic en el vínculo Insert.

Tabla 15-1Propiedades de DetailsViewpara la página ProductAdd.aspx

Propiedad Configuración Descripción

AutoGenerateInsertButton True Especifica que el control DetailsView debe mostrar los controles para insertar registros de base de datos.

AutoGenerateRows False Especifica que el control DetailsView no debe mostrar automáticamente campos enlazados a datos.

CssClass formbox Especifica una clase CSS que aplica formato a la presentación.

DataKeyNames ProductId Especifica la lista de campos que actúan como clave principal de la tabla de base de datos.

DataSourceId SqlDataSource1 Especifica el nombre del origen de datos que actualiza la base de datos.

DefaultMode Insert Especifica que el control DetailsView debe permanecer en modo de inserción después de haberse producido una inserción.

HorizontalAlign center Centra el control DetailsView dentro del espacio de presentación disponible.



Si lo desea, puede poner en la misma página Web el control GridView de la sección anterior y el control DetailsView de esta sección, y enlazarlos al mismo origen de datos.

En la práctica, probablemente deba agregar las dos páginas de este capítulo al archivo Web.sitemap, de forma que el sistema de menús del sitio pueda encontrarlas fácilmente. En el capítulo 17 se explicará cómo ocultar estos elementos de menú a los visitantes que no tengan autorización para ejecutar las páginas.

Figura 15-3 Para agregar un registro de base de datos mediante un control DetailsView, el visitante escribe los nuevos valores de los registros en los campos de formulario y hace clic en el vínculo Insert.



En resumen… Con un poco de configuración adicional, un control GridView no sólo puede mostrar registros de base de datos, sino también actualizarlos y eliminarlos. Un control DetailsView también puede insertar registros, pero sólo muestra un registro cada vez.

En el próximo capítulo se explica cómo publicar una base de datos de Microsoft® SQL Server™ desde el sitio de desarrollo en un sitio de producción activo.


173

Copiar una base de datos de SQL Server, 174

Entender y conectar con SQL Server, 175

Capítulo 16Publicar su basede datos

16 Cuando su sitio Web utiliza una base de datos y copia el sitio a otro servidor Web, es bastante frecuente copiar también la base de datos. En algunos casos, los dos servidores Web y los dos servidores de base de datos son tan similares que la misma configuración de base de datos y las mismas ubicaciones de archivo funcionan en ambos sitios sin necesidad de realizar ninguna modificación. Si se encuentra en esta situación, probablemente no necesitará leer este capítulo.

En una situación más común, el servidor de base de datos de desarrollo y el servidor de base de datos de producción necesitarán configuraciones de conexión diferentes o ubicaciones de archivos distintas, y tendrá que corregir estas configuraciones en el sitio de producción. Para ello, deberá saber un poco sobre Microsoft® SQL Server™, la configuración de conexión y las cadenas de conexión (que almacenan esas configuraciones). En este capítulo se explican los fundamentos.



Copiar una base de datos de SQL Server Microsoft ha simplificado la tarea de copiar bases de datos de SQL Server de un equipo a otro. En muchos casos, la publicación de una base de datos de SQL Server es tan sencilla como la publicación de una base de datos orientada a archivos como Microsoft Access. No obstante, en ningún caso es terriblemente difícil.

Si todas las condiciones siguientes son verdaderas, la publicación conjunta de un sitio Web y una base de datos es un proceso muy sencillo.

■ La base de datos de origen se ejecuta en el mismo equipo que el sitio Web de origen. ■ La base de datos de destino se ejecuta en el mismo equipo que el sitio Web de destino. ■ Los servidores de base de datos de origen y de destino son compatibles con una

característica nueva de SQL Server 2005 denominada instancias de usuario, y es el método que piensa utilizar.

Basta con publicar los archivos de base de datos de la carpeta App_Data del sitio de origen en la carpeta App_Data del sitio de destino. En cualquier otro caso, el procedimiento es un poco más complicado. En concreto, tendrá que hacer lo siguiente:

1. Averiguar dónde residen los archivos de base de datos. Para hacerlo en Microsoft Visual Web Developer™:

a. Abra el Explorador de base de datos. b. Haga doble clic en cualquier conexión de datos que señale a la base de datos. c. En la ventana Propiedades, obtenga el valor de la propiedad Ruta de acceso al

archivo principal. 2. Detenga su copia local de SQL Server. Esto garantiza que SQL Server no tiene el control

exclusivo de los archivos de base de datos y que se completan todos los cambios realizados a los archivos. Para hacerlo:

a. Haga clic sucesivamente en Inicio, Programas, Microsoft SQL Server 2005, Herramientas de configuración y Administrador de configuración de SQL Server.

b. Cuando aparezca la ventana Administrador de configuración de SQL Server, seleccione Servicios de SQL Server 2005 en el panel de la izquierda.

c. En el panel de la derecha, haga clic con el botón secundario del mouse (ratón) en SQL Server (SQLEXPRESS) y elija Detener en el menú contextual.


Capítulo 16: Publicar su base de datos 175

Si se detiene el servicio SQL Server (SQLEXPRESS) de Windows de cualquier otro modo también se logra el mismo efecto. Puede reiniciar SQL Server después de haber copiado los archivos.

3. Copie el archivo .mdf de la base de datos (y el archivo .ldf, si existe) al servidor de base de datos de producción. Para conocer la ubicación exacta y el procedimiento de carga necesario, pregunte al administrador de TI o de Web.

4. Pida al administrador que asocie los archivos de base de datos a una copia de SQL Server.

5. Pida al administrador que le proporcione una cadena de conexión (o al menos la configuración de conexión).

6. Instale la nueva configuración de conexión en el archivo web.config del sitio de destino. En una sección posterior titulada “Utilizar cadenas de conexión” se explica cómo hacerlo.

Entre estos pasos, probablemente lo más difícil sea obtener e instalar la nueva cadena de conexión. Para hacerlo correctamente debe saber algo sobre la configuración de conexión de base de datos. Para entenderlo, debe saber un poco de SQL Server. En el resto de este capítulo se explica lo que necesita saber.

Entender y conectar con SQL Server Microsoft SQL Server es un sistema de base de datos empresarial. Como tal, tiene fama de ser complejo. Cuanto más profundo indague en SQL Server, más detalles puede descubrir.

Sin embargo, Microsoft está dedicada a la facilidad de uso y esto incluye SQL Server: cada versión nueva de SQL Server es más eficaz, más confiable, más segura y más fácil de utilizar que la anterior. SQL Server 2005 sigue esta tendencia y SQL Server 2005 Express Edition también. Piense qué sencillo y natural ha sido realizar los ejemplos de los capítulos 13, 14 y 15, y en todos ellos se utilizaba SQL Server Express.



SQL Server es una base de datos de red. Esto significa que los sitios Web y otras aplicaciones interactúan con SQL Server a través de conexiones de red, no a través del sistema de archivos del equipo. En la figura 16-1 se representa esto de forma esquemática.

SQL Server

Archivo de base

de datos

SQL Server

(Segunda instancia)

Archivo de base

de datos

Servidor de BD

Base de datos orientada a archivos

(p. ej. Microsoft Access)

Base de datos de red

(p. ej. Microsoft SQL Server)

Página ASP.NET

Controlador(es)

de base de datos

Servidor Web

Página ASP.NET

Controlador(es)

de base de datos

Servidor Web

Página ASP.NET

Controlador(es) de

base de datos

Archivo de base

de datos

Servidor Web

Página ASP.NET

Controlador(es)

de base de datos

Servidor Web

Figura 16-1 Con las bases de datos orientadas a archivos, el controlador de base de datos actualiza directamente los archivos físicos de base de datos. Con una base de datos de red, el controlador conecta con software que se ejecuta en segundo plano en el mismo equipo o en otro equipo diferente. El software en segundo plano arbitra las solicitudes de varias aplicaciones y actualiza físicamente los archivos de base de datos.

La configuración de la izquierda es típica de las bases de datos orientadas a archivos, como Microsoft Access. La aplicación (o cliente) llama a un controlador de base de datos(o, más exactamente, a una pila de controladores de base de datos) y esos controladores leen físicamente el archivo de base de datos y escriben en él.

La configuración de la derecha ilustra una base de datos de red como SQL Server. Como antes, las aplicaciones llaman al controlador de base de datos. Sin embargo, ese controlador abre una conexión de red a una copia de SQL Server que se ejecuta como una tarea en segundo plano en el mismo equipo o en otro equipo diferente. SQL Server analiza las solicitudes que llegan, realiza el trabajo necesario (incluyendo la E/S física) y devuelve el resultado al equipo cliente.

En la tabla 16-1 se enumeran algunos de los controladores de base de datos de nivel superior más frecuentes compatibles con SQL Server. Nivel superior significa que las aplicaciones interactúan directamente con estos controladores.

Visual Web Developer siempre utiliza System.Data.SqlClient para comunicarse con SQL Server. Es la mejor opción para cualquier aplicación ASP.NET que utilice SQL Server.

N O TA



Utilizar cadenas de conexión

El primer paso para utilizar una base de datos consiste en abrir una conexión de base de datos. Una serie de parámetros de una cadena de conexión indica al controlador de base de datos qué base de datos debe abrir, qué tipo de seguridad tiene que utilizar y qué opciones debe haber vigentes.

Visual Web Developer almacena las cadenas de conexión en un archivo XML denominado web.config. A continuación se muestra un ejemplo de este archivo breve pero típico. La cadena de conexión es la parte de la línea 5 que se muestra en color verde. Los saltos de línea se han incluido para mejorar la legibilidad.

01 <?xml version=”1.0” encoding=”utf-8”?>

02 <configuration

03 xmlns=”http://schemas.microsoft.com/.NetConfiguration/v2.0”>

04 <connectionStrings>

05 <add name=”ContosoMagicConnectionString”

connectionString=”Data Source=.\SQLEXPRESS;

AttachDbFilename=|DataDirectory|\ContosoMagic.mdf;

Integrated Security=True;

User Instance=True”

06 providerName=”System.Data.SqlClient” />

07 </connectionStrings>

08 <system.Web>

09 <pages theme=”” />

10 </system.Web>

11 </configuration>

Tabla 16-1Tecnologías de controladores de base de datos de Microsoft

Controlador de base de datos Año de Descripción presentación

ODBC 1992 Conectividad abierta de bases de datos (Open Database Connectivity, ODBC)

OLE DB 1996 Vinculación e incrustación de objetos - Base de datos

System.Data.SqlClient 2002 Proveedor de datos de .NET Framework para SQL Server



En esta cadena de conexión:

■ Data Source Especifica el nombre del equipo donde se ejecuta SQL Server y, si es necesario, un nombre de instancia. En el ejemplo, un punto indica el equipo local y SQLEXPRESS es un nombre de instancia. (Un nombre de instancia identifica una instalación específica de SQL Server.)

■ AttachDbFilename Especifica un archivo de base de datos que desea que utilice SQL Server. La expresión |DataDirectory| representa la carpeta App_Data del sitio Web y ContosoMagic.mdf es el archivo que contiene la base de datos de SQL Server.

■ Integrated Security=True Especifica que cuando el sitio Web conecte con SQL Server, iniciará sesión utilizando la cuenta de Microsoft Windows® que ejecuta procesos ASP.NET para su sitio Web. En el caso del servidor Web de desarrollo incluido con Visual Web Developer, es la cuenta que utilizó cuando inició sesión en Windows.

■ User Instance=True Especifica que desea que SQL Server inicie una nueva instancia de sí mismo (es decir, una nueva copia en ejecución) sólo para su sitio Web. Esta instancia se ejecutará bajo la cuenta Windows del proceso que lo solicitó: es decir, bajo la cuenta que ejecuta procesos ASP.NET para su sitio Web.

Tenga en cuenta que Integrated Security es una configuración de cliente y User Instance es una configuración de servidor. Si ambas configuraciones son True:

■ El cliente SQL y la instancia de usuario de SQL Server se ejecutarán bajo la misma cuenta de Windows (que, en el servidor Web de desarrollo, es la suya).

■ La instancia de usuario de SQL Server no tendrá más privilegios (ni menos) que la cuenta que ejecuta procesos ASP.NET para su sitio Web.

■ Su sitio Web tendrá privilegios de administrador de SQL Server dentro de la instancia de usuario de SQL Server.

Las cadenas de conexión de este tipo son muy frecuentes en los equipos de desarrollo que ejecutan tanto Visual Web Developer como SQL Server Express. La cadena de conexión que se muestra a continuación es uno de los diversos formatos que se utilizan frecuentemente en los servidores Web de producción. Esta cadena reemplazaría la parte del archivo Web.config que se mostraba anteriormente en color verde.



Data Source=sawbox; Initial Catalog=ContosoMagic; User Id=presto; Password=chango;

En cuanto a los parámetros:

■ Data Source Especifica el nombre del equipo donde se ejecuta SQL Server; si se hubiera necesitado un nombre de instancia, el valor del parámetro habría sido sawbox\instancia.

■ Initial Catalog Especifica el nombre de una base de datos existente. Es un nombre lógico, no un nombre de archivo físico. SQL Server “recuerda” qué archivos físicos contiene cada base de datos lógica.

■ User Id Proporciona un nombre de usuario para abrir la base de datos.

■ Password Proporciona una contraseña para abrir la base de datos.

Esta cadena de conexión no especifica AttachDbFilename y un nombre de archivo, ya que un administrador creó previamente la base de datos o le asoció de manera permanente un archivo .mdf. No especifica Integrated Security=True porque el administrador configuró SQL Server para que utilice su propio sistema de Id. de usuario y contraseña. Los parámetros User Id y Password especifican esos valores.

Si el administrador deseara que las aplicaciones cliente de SQL Server presentaran cuentas de Windows como credenciales, la cadena de conexión sería así:

Data Source=sawbox; Initial Catalog=ContosoMagic; Integrated Security=True;

El administrador también configuraría SQL Server de manera que la cuenta que ejecuta procesos ASP.NET para su sitio Web tuviera acceso a las bases de datos necesarias.

En la tabla 16-2 se resumen los parámetros más frecuentes que aparecen en las cadenas de conexión de SQL Server. No es necesario que los memorice todos, pero debe tener esta lista a mano y recordar que las cadenas de conexión proporcionan opciones para abrir una base de datos. Parámetro Descripción

Cuando la tabla 16-2 agrupa dos o más nombres de parámetros en una fila, esos nombres de parámetros son equivalentes.

N O TA



Tabla 16-2Parámetros de las cadenas de conexión de SQL Server

Parámetro Descripción

Data Source, El nombre de equipo o la dirección de red del equipo con Server, SQL Server que administra su base de datos. Si los valores se Address, establecen en (local) o un punto (.) indican el equipo local.Addr,Network Address

Network Library, La biblioteca de red que utilizará el equipo cliente cuando Net se comunique con SQL Server. Es decir, determina el modo de comunicación. En la tabla 16-3 se enumeran los valores aceptados. Tenga en cuenta que la biblioteca que elija debe estar presente tanto en el equipo cliente como en el servidor y que la red que los conecta debe ser compatible con el protocolo indicado.

Si especifica un servidor local, por ejemplo indicando (local) o un punto (.), y no especifica ninguna biblioteca de red, el valor predeterminado será la memoria compartida. De lo contrario, el valor predeterminado es dbmssocn (TCP/IP).

Database, El nombre lógico de la base de datos.Initial Catalog

AttachDbFilename, El nombre del archivo .mdf principal, incluyendo la ruta de Extended Properties, acceso completa, de una base de datos que se pueda asociar.Initial File Name Si también especifica el parámetro Database, ese valor se convertirá en el nombre lógico de la base de datos que asocie. De lo contrario, SQL Server utilizará la base y la extensión del nombre de archivo como nombre de la base de datos.




Parámetro Descripción

Integrated Security, Cuando es false, debe especificar los parámetros User ID y Password Trusted_Connection con la identidad de una cuenta de SQL Server que tenga permiso para abrir la base de datos. Éste es el valor predeterminado. Los valores false y no son equivalentes.

Cuando es true, SQL Server basará los permisos en la cuenta de Windows que ejecuta procesos ASP.NET para su sitio Web. Los valores true, yes y sspi son equivalentes.

User Id La cuenta de inicio de sesión de SQL Server. Especifique este parámetro sólo si Integrated Security es false.

Password, La contraseña de la cuenta de inicio de sesión de SQL Server. Pwd Incluya este parámetro sólo si Integrated Security es false.

User Instance Si es true, SQL Server creará una nueva instancia de sí mismo para atender la conexión. Esa instancia se ejecutará bajo la cuenta de inicio de sesión de Windows del equipo cliente, pero se considerará esa cuenta como un administrador de SQL Server. El valor predeterminado es false.

Tabla 16-3Bibliotecas de red de SQL Server Biblioteca Nombre Descripción

Idbnmpntw Canalizaciones con nombre Funciones de red de Windows

dbmsrpcn Multiprotocolo RPC de Windows

dbmsadsn Apple Talk Apple Datastream Protocol (ADSP)

dbmslpcn Memoria compartida Proceso a proceso dentro de un equipo

dbmsspxn IPX/SPX Novell Netware

dbmssocn TCP/IP Sockets de Internet




Compartir una única copia de SQL Server

Varias aplicaciones que se ejecuten en cualquier combinación de equipos pueden conectar con SQL Server y utilizar sus capacidades simultáneamente. Ésta es una de las razones por las que SQL Server admite cargas mucho mayores que los sistemas de base de datos orientados a archivos. Si dos o más aplicaciones envían solicitudes que entran en conflicto (por ejemplo, intentan actualizar el mismo registro), SQL Server arbitra estos conflictos con mucha más eficacia que una base de datos orientada a archivos como Access.

Administrar servidores compartidos de SQL Server

Cuando varias aplicaciones o grupos de desarrollo utilizan la misma copia de SQL Server, es bastante normal que ninguno de ellos tenga privilegios de Administrador. Esto protege las aplicaciones (o los grupos de desarrollo) unas de otras.

En los entornos compartidos, un administrador de base de datos (DBA) suele recibir de los desarrolladores solicitudes de nuevas bases de datos, cambios en la seguridad, copias de seguridad, restauraciones y otras tareas, comprueba su autenticidad y realiza el trabajo. Esto significa, por supuesto, que los desarrolladores deben enviar solicitudes de servicio y esperar que el DBA las finalice. El DBA suele trabajar en el departamento de TI o en una empresa de alojamiento.

Instancias de servidor

Un único equipo puede ejecutar varias instancias (es decir, copias) de SQL Server. Una instancia de servidor es una copia de SQL Server independiente de cualquier otra instancia que pueda haber en el mismo equipo. Por ejemplo, cada instancia podría ser de una versión diferente. Cada instancia se ejecuta como su propio servicio de Windows. Un administrador crea instancias de servidor ejecutando el programa de instalación de SQL Server para cada una de ellas. Cada instancia de servidor del mismo equipo tiene un nombre de instancia diferente.

En la figura 16-1 dos aplicaciones tienen acceso a la primera instancia de SQL Server y una aplicación tiene acceso a la segunda instancia. Sin embargo, cada copia de SQL Server es una instancia de servidor completa. Si fuera necesario, cualquiera de ellas podría atender a docenas o a cientos de aplicaciones a la vez.



Instancias de usuario

Tanto SQL Server 2005 como SQL Server Express aceptan un nuevo tipo de instancia de SQL Server: las instancias de usuario. Cuando una aplicación solicita una instancia de usuario, SQL Server:

■ Carga una nueva copia de sí mismo en memoria. ■ Ejecuta la nueva instancia con la cuenta de inicio de sesión de Windows de esa

aplicación. (En el caso de un sitio Web ASP.NET, es la cuenta que ejecuta los procesos ASP.NET del sitio.)

■ Concede permisos de Administrador a la cuenta de inicio de sesión de la aplicación, pero sólo dentro de esa instancia.

■ Termina la instancia tras un período de inactividad. Si crea una base de datos en Visual Web Developer, hay un sitio Web abierto y SQL

Server 2005 o SQL Server Express está en ejecución en el mismo equipo, Visual Web Developer hará lo siguiente:

■ Pedir a SQL Server que inicie una instancia de usuario. ■ Utilizar esa instancia para crear esa base de datos, poniendo sus archivos en la carpeta

App_Data del sitio. ■ Configurar el sitio para que se solicite una instancia de usuario siempre que abra la base

de datos. Se trata de un método muy útil, ya que le ofrece (como programador Web) permiso para

crear bases de datos y realizar otras tareas administrativas sin restricciones de seguridad. No obstante, como la instancia de usuario se ejecuta bajo la misma cuenta de inicio de sesión de Windows que su sitio Web, no puede tener acceso a bases de datos pertenecientes a otros sitios, ni tampoco modificarlas ni administrarlas.

Cuando SQL Server se ejecuta como una instancia de usuario, existen las limitaciones siguientes: ■ La replicación automática no está disponible.

■ Los nombres de usuario y las contraseñas de SQL Server no están disponibles. Debe utilizar autenticación de Windows.

■ El protocolo de red debe ser canalizado con nombres locales (es decir, memoria compartida). Esto es automático, pero significa que el cliente y el servidor deben ejecutarse en el mismo equipo.



■ Una instancia de usuario comparte las entradas del Registro de la instancia de servidor que la creó.

■ Debe tener acceso a la base de datos mediante ADO.NET. El código creado por Visual Web Developer mediante su interfaz gráfica siempre satisface este requisito. Los programas más antiguos que utilizan ODBC u OLE DB producirán un error. nces.

Asociar archivos de base de datos Cuando pide a SQL Server que cree una base de datos, debe obtener espacio en disco para almacenar los datos. Para ello, crea un archivo con una extensión .mdf y asocia ese archivo a la nueva base de datos. Cuando empieza a utilizar la base de datos, SQL Server crea también un archivo de registro con la extensión .ldf.

Si copia un archivo .mdf (y su archivo .ldf correspondiente, si existe), puede asociar los archivos copiados a cualquier otra instancia de SQL Server. El servidor de SQL Server que asocia los archivos .mdf y .ldf puede entregar una versión copiada de la base de datos a cualquier aplicación que la necesite. Hay dos formas de asociar bases de datos:

■ Mediante herramientas administrativas como el Administrador corporativo de SQL Server o Microsoft Visual Studio®. Es el método habitual para las copias compartidas de SQL Server.

■ Utilizando el parámetro AttachDBFileName de la cadena de conexión. Es el método normal para las instancias de usuario.

Descripción de los inicios de sesión Cada copia de SQL Server comprueba la identidad de todos los clientes que intentan establecer una conexión y tener acceso a sus recursos. SQL Server utiliza esta identidad para averiguar qué privilegios tiene el cliente en el servidor en general y también para cada base de datos del servidor. Hay dos tipos de cuentas muy diferentes que son válidos para este fin: ■ Cuentas de Windows Cada proceso de cada equipo con Windows se ejecuta bajo una

cuenta de inicio de sesión de Windows. En Internet Information Server (IIS), por ejemplo, muchos sitios Web utilizan una cuenta local denominada IUSR_nombreDeEquipo para los procesos que no son ASP.NET. Además:

■ En IIS 5.0, los procesos ASP.NET se ejecutan de manera predeterminada bajo una cuenta local denominada ASPNET.

■ En IIS 6.0, los procesos ASP.NET se ejecutan de manera predeterminada bajo una cuenta local denominada Servicios de red.



A pesar de estos valores predeterminados, un administrador puede configurar cualquier sitio Web para que se ejecute bajo cualquier cuenta de Windows (local o de dominio) que esté configurada correctamente.

Si su cadena de conexión especifica Integrated Security=true o Trusted_Connection=true, SQL Server averiguará los privilegios de base de datos del sitio basándose en la cuenta de Windows que el sitio utiliza para ejecutar los procesos ASP.NET.

Tenga en cuenta que si IIS y SQL Server se ejecutan en equipos diferentes, esta cuenta de Windows debe ser una cuenta de dominio y que los dos servidores deben estar en el mismo dominio o en dominios de confianza. Una cuenta local del equipo con IIS no sería válida en el equipo con SQL Server y viceversa.

■ Cuentas de SQL Server Si un administrador decide que no es práctico configurar cuentas de Windows para cada sitio Web (o quizás para cada servidor virtual), puede utilizar en su lugar cuentas de SQL Server.

Estas cuentas sólo existen dentro de una única copia de SQL Server. No tienen nada que ver con las cuentas de inicio de sesión de Windows ni con el servicio de directorios Active Directory®. Precaución: como utilizan menos cifrado, no son tan seguras como las cuentas de Windows.

Si su cadena de conexión especifica (o utiliza de manera predeterminada) Integrated Security=false o su equivalente, Trusted_Connection=false, debe contener también los parámetros User Id= y Password= para especificar el nombre de usuario y la contraseña de SQL Server.

Cómo Visual Web Developer utiliza SQL Server

Microsoft ha hecho un gran esfuerzo para asegurarse de que nunca tenga problemas de seguridad mientras desarrolla sitios Web en su propio equipo. Por tanto, en un equipo con Windows donde se ejecute Visual Web Developer y SQL Server Express:

■ El servidor Web de desarrollo se ejecuta bajo la cuenta de Windows con la que inició sesión.

■ La cuenta de Windows que instaló SQL Server Express (probablemente la suya) será un administrador de esa copia de SQL Server Express.



■ Todas las cadenas de conexión tendrán de forma predeterminada Integrated Security=true.

■ Aunque no instalara la copia de SQL Server Express del equipo, puede obtener derechos administrativos de SQL Server si solicita una instancia de usuario en la cadena de conexión. En la anterior sección “Instancias de usuario” de este capítulo se explicaba cómo hacerlo.

Sin embargo, si está utilizando SQL Server compartido y administrado de forma centralizada para el desarrollo (o más probablemente, en su sitio de producción), quizás tenga que ajustar las cadenas de conexión para adaptarlas a su entorno. En una sección anterior de este capítulo, titulada “Utilizar cadenas de conexión”, se explica cómo hacerlo.

En resumen…

Con la presentación de Visual Web Developer y SQL Server Express, Microsoft ha logrado que el uso de SQL Server sea tan sencillo como el uso de bases de datos orientadas a archivos, como Microsoft Access.

Si los servidores de base de datos de origen y de destino aceptan instancias de usuario, puede publicar simplemente los archivos de base de datos de SQL Server con el resto del sitio Web.

De lo contrario, basta con copiar los archivos de base de datos donde le indique el administrador de la base de datos de destino y configurar los parámetros de conexión del sitio Web de destino en consecuencia.

En el próximo capítulo se explicará cómo identificar a los visitantes del Web, cómo proteger determinadas partes de su sitio frente a visitantes no autorizados, y cómo recordar las configuraciones y las preferencias para cada visitante identificado.


187

Capítulo 17Controlar el accesoa su sitio

17 El sitio de ejemplo de este capítulo reside en una carpeta denominada ContosoMagic17.

N O TA

Configurar la seguridad de un sitio Web, 188

Agregar controles de inicio de sesión a su sitio, 197

Ocultar opciones de menú para páginas protegidas, 201

Publicar configuraciones de seguridad, 203

Para la mayoría de las páginas Web, la popularidad es el mejor indicador de éxito. Cuantas más personas tengan acceso a su página, más grandioso será el logro.

Sin embargo, en ciertas páginas es fundamental bloquear visitantes en lugar de atraerlos. Por ejemplo, quizás desee que los visitantes se identifiquen a sí mismos antes de tener acceso a ciertas páginas. En otros casos, como en las páginas Add Products y Update Products del capítulo 15, deberá controlar estrictamente qué visitantes tienen acceso. ASP.NET 2.0 integra funciones que satisfacen esos requisitos. Además, Microsoft Visual Web Developer™ hace que esas funciones sean muy sencillas de utilizar. Puede realizar todo el trabajo utilizando únicamente la interfaz gráfica, sin escribir código de programa.



Configurar la seguridad de un sitio Web El control de la seguridad de un sitio Web ASP.NET implica dos tareas bastante diferentes. En esta sección se describe la primera tarea, que es configurar el sitio Web con las características y las reglas de seguridad que desee. En la sección “Agregar controles de inicio de sesión a su sitio” se describirá la segunda tarea, que es crear páginas Web que controlen los inicios de sesión, los cambios de contraseña, los registros automáticos y otras características de seguridad que utilizarán los visitantes.

Para configurar las opciones de seguridad de su sitio, abra el sitio en Visual Web Developer y elija Configuración de ASP.NET en el menú Sitio Web. Aparecerá la página Herramienta Administración de sitios Web que se muestra en la figura 17-1.

Figura 17-1 Ésta es la página principal para configurar la seguridad del sitio Web en el servidor Web integrado de Visual Web Developer.


Capítulo 17: Controlar el acceso a su sitio 189

ASP.NET proporciona un Asistente para la configuración de seguridad que simplifica la tarea de configurar un sitio por vez primera. No obstante, antes de ejecutar el asistente debe configurar las opciones de correo electrónico SMTP del sitio y su proveedor de autenticación.

Configurar opciones de correo electrónico SMTP La configuración de correo electrónico SMTP de un sitio especifica el servidor, la

dirección Desde y las opciones de seguridad para cualquier mensaje de correo electrónico relacionado con la seguridad que ASP.NET envíe.

PARA CONFIGURAR OPCIONES DE CORREO ELECTRÓNICO SMTP:

1 Haga clic en la ficha Aplicación o en el vínculo Configuración de la aplicación de la página principal de la Herramienta Administración de sitios Web.

2 Cuando vuelva a aparecer la página con la ficha Aplicación seleccionada, haga clic en el vínculo Definir configuración de correo electrónico SMTP que aparece en el centro de la página.

3 Cuando aparezca una página con el cuadro Configurar valores SMTP que se muestra en la figura 17-2, configure estos valores:

■ Nombre del servidor Escriba el nombre DNS o la dirección IP del servidor de correo electrónico SMTP que retransmitirá el correo electrónico relacionado con la seguridad a los visitantes del Web.

■ Puerto del servidor Especifique el número de puerto donde escucha el servidor SMTP. Normalmente es el 25, pero algunos administradores eligen otro número.

■ Desde Especifique la dirección de correo electrónico que aparecerá en la línea Desde: de los mensajes relacionados con la seguridad procedentes de su sitio. No tiene por qué ser una dirección real, pero tiene que satisfacer las reglas que exija el servidor de correo electrónico.

■ Autenticación: Ninguno Haga clic en este botón si el servidor SMTP acepta correo electrónico sin conocer la identidad del remitente.

■ Autenticación: Básico Haga clic en este botón si el servidor SMTP acepta correo electrónico sólo de los remitentes que proporcionen un nombre de usuario y una contraseña válidos. Después, especifique el nombre de usuario y la contraseña en los cuadros apropiados.

■ Autenticación: NTLM Haga clic en este botón si el servidor SMPT sólo acepta correo electrónico de los procesos que se ejecutan bajo una cuenta conocida de inicio de sesión en Microsoft Windows®. Será la cuenta que ejecute los procesos ASP.NET para su sitio Web.



4 Haga clic en el botón Guardar y después, cuando aparezca el mensaje de confirmación, haga clic en el botón Aceptar. Los servidores de correo

electrónico SMTP utilizan diversos métodos para bloquear los envíos de correo masivo no solicitado (spam). Por ejemplo, pueden aceptar únicamente correo electrónico con direcciones conocidas (o al menos de dominios conocidos) que figuren en el campo Desde, o procedente de direcciones IP de su empresa o de la red del proveedor de conectividad.

N O TA

Figura 17-2 Esta página especifica el servidor de correo electrónico SMTP y las opciones relacionadas que ASP.NET debe utilizar cuando envíe correo electrónico relacionado con la seguridad.

Configurar un proveedor de autenticación

Esta opción controla el tipo de base de datos que almacena las cuentas de inicio de sesión, las funciones, las pertenencias a las funciones y otros datos administrativos de su sitio. Es bastante sencillo porque Visual Web Developer no acepta muchas opciones.



PARA CONFIGURAR UN PROVEEDOR DE AUTENTICACIÓN

1 En la página principal de la herramienta Administración de sitios Web, haga clic en la ficha Proveedor o en el vínculo Configuración del proveedor.

2 Para utilizar el mismo tipo de base de datos para todos los datos de seguridad:

■ Haga clic en el vínculo Seleccionar un solo proveedor para todos los datos de administración del sitio.

■ Cuando aparezca una página con un cuadro Proveedor, seleccione el proveedor que desee. Con toda probabilidad, la única opción será AspNetSqlProvider.

■ Haga clic en el vínculo Probar para comprobar que el proveedor está instalado y funciona. Debe aparecer un cuadro de Administración de proveedores con el texto “La conexión con la base de datos se estableció correctamente”. Haga clic en el botón Aceptar para cerrar este cuadro.

■ Para guardar la configuración, haga clic en el botón Atrás de la parte inferior de la página Web.

3 Para utilizar distintos tipos de bases de datos para algunos datos de seguridad:

■ Haga clic en el vínculo Seleccionar un proveedor distinto para cada característica (avanzado). Aparecerá una página con dos cuadros titulados Proveedor de suscripciones y Proveedor de funciones.

■ El cuadro Proveedor de suscripciones especifica el tipo de base de datos que se va a utilizar para almacenar cuentas de inicio de sesión. La única opción será AspNetSqlMembershipProvider, que corresponde a Microsoft® SQL Server™.

■ El cuadro Proveedor de funciones especifica el tipo de base de datos que se va a utilizar para almacenar grupos de seguridad. Seleccione AspNetSqlRoleProvider (que utiliza SQL Server) o AspNetWindowsTokenRoleProvider (que utiliza grupos de Windows).

■ Haga clic en Atrás para guardar la configuración.

En la práctica, probablemente deba seleccionar un único proveedor (SQL Server) para todos los datos de administración del sitio a menos que el sitio resida en una intranet y piense utilizar tanto cuentas de Windows como grupos de seguridad de Windows para controlar el acceso.

Ejecutar el Asistente para la configuración de seguridad

Este asistente configura la mayoría de las opciones de seguridad del sitio, incluyendo un conjunto inicial de cuentas de inicio de sesión y reglas de acceso.



Figura 17-3 Esta página especifica si se autenticará a los visitantes utilizando cuentas de Windows o cuentas personalizadas almacenadas en una base de datos de SQL Server.

PARA EJECUTAR EL ASISTENTE PARA LA CONFIGURACIÓN DE SEGURIDAD1 En la página principal de la herramienta Administración de

sitios Web, haga clic en la ficha Seguridad o en el vínculo Seguridad.

2 Cuando aparezca una página con la ficha Seguridad resaltada, haga clic en el vínculo Utilice el Asistente para la

configuración de seguridad para configurar la seguridad paso a paso.

3 Cuando aparezca la página de bienvenida del asistente, lea la información introductoria y haga clic en el botón Siguiente.

4 En la página Seleccionar método de acceso que se muestra en la figura 17-3, seleccione una de las opciones siguientes:

■ Desde Internet si desea que su sitio tenga su propia base de datos de cuentas de inicio de sesión. Suele ser la opción utilizada para sitios ubicados en Internet.

■ Desde una red de área local si desea utilizar cuentas de inicio de sesión de Windows existentes para controlar el acceso a su sitio. Suele ser la opción utilizada para sitios ubicados en la intranet de la empresa.

Después de seleccionar una opción, haga clic en el botón Siguiente.



5 Si eligió Desde una red de área local en el paso 4, vaya al paso 6.

Si eligió Desde Internet, aparecerá una página del asistente Almacén de datos. Lea la información que se muestra y haga clic en el botón Siguiente. (Para cambiar cualquier opción mencionada en esta página, consulte la anterior sección titulada “Configurar un proveedor de autenticación”.)

6 Cuando aparezca inicialmente la página Definir funciones, contendrá una única casilla

de verificación Habilite las funciones para este sitio Web. Si desea que algunos visitantes registrados tengan unos privilegios distintos que otros, active

esta casilla de verificación. Si todos los visitantes registrados tendrán los mismos privilegios, desactívela. Haga clic en el botón Siguiente para continuar.

7 Si habilitó las funciones en el paso 6, la página Definir funciones cambiará a la

mostrada en la figura 17-4. Para cada función que piense utilizar, escriba su nombre en el cuadro Nombre nuevo de función y haga clic en el botón Agregar función. Cada función que cree aparecerá en el cuadro Funciones existentes. Cuando haya terminado, haga clic en el botón Siguiente.

Figura 17-4 Utilice esta página del asistente para crear los grupos de seguridad (funciones) que necesite su sitio.



8 Cuando aparezca la página Agregar nuevos usuarios del asistente que se muestra en la

figura 17-5, rellene el formulario Crear usuario y haga clic en el botón Crear usuario una vez por cada cuenta de inicio de sesión que desee que tenga el sitio. Tenga en cuenta lo siguiente:

■ El campo Nombre de usuario es un nombre de inicio de sesión, no un nombre legal. Especifique un valor como bramos o barram, en lugar de Bárbara Ramos.

■ Las contraseñas deben tener una longitud de ocho caracteres como mínimo y deben contener al menos una letra, un dígito numérico y un carácter especial.

■ Si un visitante olvida su contraseña pero puede responder correctamente a la pregunta de seguridad, ASP.NET restablecerá la contraseña y enviará la nueva contraseña a la dirección de correo electrónico especificada.

■ La casilla de verificación Usuario activo de la esquina inferior izquierda determina si el visitante puede iniciar sesión. Para impedir el inicio de sesión de una cuenta, desactive esta casilla.

■ Si lo desea, puede crear otras cuentas adicionales de inicio de sesión más adelante o permitir que los visitantes creen sus propias cuentas.

Cuando haya creado todas las cuentas de inicio de sesión que necesite, haga clic en el botón Siguiente.

Figura 17-5 Esta página puede crear tantas cuentas nuevas de inicio de sesión como desee. Escriba los datos de cada cuenta y haga clic en el botón Crear usuario.



9 En la página Agregar nuevas reglas de acceso que se muestra en la figura 17-6, realice los pasos siguientes para cada carpeta que desee proteger:

■ Bajo el título Seleccione un directorio para esta regla, expanda el árbol de carpetas todo lo necesario y seleccione la carpeta que desee configurar.

■ Bajo La regla se aplica a, especifique a quién debe afectar la regla. En la tabla 17-1 se explican las opciones disponibles.

■ En Permiso, seleccione la opción Permitir si desea que la regla conceda acceso a todos los visitantes que cumplan la regla. Si desea que la regla impida el acceso a los visitantes que la cumplan, seleccione la opción Denegar.

■ Para guardar la regla, haga clic en el botón Agregar esta regla.

Puede crear tantas reglas como desee, ya sea para la misma carpeta o para carpetas diferentes. En la figura 17-6 se muestran tres reglas asignadas a la carpeta secure.

Figura 17-6 Esta página Web crea y modifica reglas de acceso para cualquier carpeta que seleccione.

No cree reglas de acceso que bloqueen a los visitantes anónimos desde la carpeta raíz del sitio. Esto haría que la página de inicio de sesión fuera inaccesible.

S U G E R E N C I A



10 Haga clic en el botón Siguiente para ver la última página del asistente y haga clic en el botón Finalizar para volver a ver la ficha Seguridad de la herramienta Administración de sitios Web.

Puede volver a ejecutar el asistente en cualquier momento, pero los vínculos que hay en la parte inferior de la página de seguridad ofrecen un acceso más directo a determinadas funciones. Además, el vínculo Crear o administrar funciones asigna cuentas de inicio de sesión a funciones, una función que el asistente no incluye.

PARA ASIGNAR CUENTAS DE INICIO DE SESIÓN A FUNCIONES

1 En la ficha Seguridad de la herramienta Administración de sitios Web, haga clic en el vínculo Crear o administrar funciones.

2 En la página que aparecerá, haga clic en el vínculo Administrar situado a la derecha de la función que desea configurar.

3 Cuando aparezca la página Web que se muestra en la figura 17-7, realice una de las acciones siguientes para ver una lista de nombres de usuario:

■ Utilizar la lista desplegable Buscar por, el cuadro de texto Buscar y el botón Buscar usuario o

■ Hacer clic en uno de los primeros vínculos iniciales (A-Z y Todos)

4 Active o desactive la casilla de verificación Función del usuario para cada cuenta según sea necesario.

5 Haga clic en el botón Atrás para seleccionar otra función o volver a la página Seguridad.

Tabla 17-1Opciones para aplicar reglas de acceso

Opción Descripción

Función Todos los usuarios de una función determinada. Utilice la lista desplegable para seleccionar una función.

Usuario Un usuario específico. Escriba el nombre de usuario en el cuadro de texto.

Todos los usuarios Todos los usuarios que tengan cuentas.

Usuarios anónimos Usuarios que no tengan cuentas o que no hayan iniciado sesión.



Agregar controles de inicio de sesión a su sitio Una vez que haya configurado las opciones de seguridad y las reglas de acceso del sitio, tendrá que crear páginas Web que los visitantes puedan utilizar para iniciar sesión, cambiar su contraseña de vez en cuando, recuperar una contraseña olvidada o incluso (si decide permitirlo) registrarse automáticamente.

ASP.NET 2.0 incluye un conjunto de controles de servidor Web que simplifica considerablemente la creación de estas páginas. Para utilizar estos controles en Visual Web Developer, basta con arrastrar el que desee desde el grupo Inicio de sesión del Cuadro de herramientas y colocarlo en una página Web ASP.NET abierta. En la tabla 17-2 se enumeran estos controles.

Figura 17-7 Esta página Web controla qué cuentas de inicio de sesión pertenecen a una función determinada.



Nombre del Cuadro de herramientas Un sitio que requiera inicio de sesión debe contener siempre estas dos páginas:

■ login.aspx Cuando un visitante anónimo solicite una página segura, ASP.NET redirigirá automáticamente la petición a una página denominada login.aspx que se encuentra en la carpeta raíz del sitio. El vínculo Inicio de sesión que muestra un control LoginStatus también señala a login.aspx. Si su sitio no contiene una página login.aspx, los visitantes recibirán un error 404 No encontrado en lugar de un mensaje de inicio de sesión.

Tabla 17-2Controles de inicio de sesión de ASP.NET 2.0

Nombre del Cuadro Nombre de etiqueta Descripciónde herramientas

Login <asp:login> Muestra un formulario estándar de inicio de sesión.

LoginView <asp:loginview> Muestra uno de varios formularios personalizados de inicio de sesión según el estado de inicio de sesión actual del visitante: anónimo, sesión iniciada, sesión iniciada y miembro de una función determinada, etc. El desarrollador Web tiene que diseñar y configurar estas plantillas.

CreateUserWizard <asp:CreateUserWizard> Muestra un formulario que crea nuevas cuentas de inicio de sesión.

ChangePassword <asp:ChangePassword> Muestra un formulario que cambia la contraseña de una cuenta de inicio de sesión.

PasswordRecovery <asp:passwordrecovery> Muestra un formulario que restablece la contraseña de un visitante y la envía al visitante por correo electrónico.

LoginName <asp:loginname> Si el visitante actual tiene iniciada sesión, muestra el nombre de inicio de sesión. De lo contrario, no muestra nada.

LoginStatus <asp:loginstatus> Muestra un vínculo Iniciar sesión si el visitante actual es anónimo. Muestra un vínculo Cerrar sesión si el visitante tiene iniciada una sesión.



■ default.aspx Si un visitante solicita una página pero carece de permisos para mostrarla, ASP.NET redirigirá al visitante a la página login.aspx del sitio. Después, si el inicio de sesión se realiza correctamente, ASP.NET redirigirá al visitante a la página segura que solicitó originalmente. No obstante, si el visitante sigue un hipervínculo o una entrada de Favoritos a la página login.aspx y el inicio de sesión se realiza correctamente, ASP.NET redirigirá al visitante a la página principal del sitio: default.aspx en la carpeta raíz del sitio. Esta es una de las muchas buenas razones que hay para asignar el nombre default.aspx a la página principal de su sitio. La figura 17-8 muestra una página de inicio de sesión para el sitio Web de Contoso

Magic. Esta página utiliza tres controles del grupo Inicio de sesión:

■ Un formulario Login en el centro de la página. Después de arrastrar este control desde el Cuadro de herramientas y colocarlo en la página, el único cambio es un atributo CssClass que proporciona el fondo en color y el borde con puntos. La etiqueta para este control es: <asp:Login ID=”Login1” runat=”server” CssClass=”formbox” />

En el capítulo 10 se ha explicado cómo crear clases CSS como formbox.

■ Un control LoginStatus justo debajo del rastro. Al agregar este control a la página principal del sitio, el desarrollador agregó un vínculo Iniciar sesión/Cerrar sesión a cada página. Todas las opciones utilizan los valores predeterminados. La etiqueta es:

<asp:LoginStatus ID=”LoginStatus1” runat=”server” />

■ Un control LoginName a la derecha, bajo el mensaje de fecha, muestra el texto You Are Logged In As: y el nombre de inicio de sesión actual (si hay alguno). La etiqueta es: <asp:LoginName ID=”LoginName1” runat=”server”

FormatString=”You are logged in as: {0}.” />

El control LoginName muestra el contenido del atributo FormatString sólo cuando el visitante actual ha iniciado sesión. ASP.NET reemplaza {0} con el primer parámetro disponible (y sólo en este caso): el nombre de usuario actual. Si no hay nadie que haya iniciado sesión, el control no muestra nada. Al igual que el control LoginStatus, este control LoginStatus aparece en la página principal del sitio de ejemplo. Sin embargo, esto no es un requisito. Puede agregar cualquiera de estos controles a cualquier página, control de usuario, control personalizado o página principal que desee.



Control LoginStatus

Control Login

Control LoginName

La figura 17-9 muestra los formularios que muestran los controles CreateUserWizard, ChangePassword y PasswordRecovery de manera predeterminada. Una clase CSS proporciona el color de fondo y el borde con puntos. Para utilizar estos controles, arrástrelos a una página Web, guarde la página y agréguela al sistema de menús. En el sitio de ejemplo, estas páginas y la página de inicio de sesión están bajo un elemento de menú principal denominado Security.

Figura 17-8 Es el formulario de inicio de sesión para el sitio de Contoso Magic. Un control de servidor Web Login con la configuración predeterminada (excepto una clase CSS) proporciona el formulario de inicio de sesión. Todo lo demás procede de una página principal.



Por simplificar, en esta sección se ha explicado cómo utilizar los diversos controles de Inicio de sesión con la mayoría o con todos los valores predeterminados en vigor. Sin embargo, estos controles se pueden configurar en gran medida. Ofrecen docenas de propiedades, métodos y eventos. Independientemente de lo que desee cambiar (como colores, fuentes, títulos en pantalla, mensajes de error, edición de campos o visibilidad en diversas condiciones) probablemente encuentre una propiedad que hace lo que desea. Si no encuentra la propiedad que necesita en la ventana Propiedades, muestre la página de Ayuda del control.

Ocultar opciones de menú para páginas protegidas En muchos sitios, tiene sentido que si un visitante puede tener acceso a una página determinada, esa página deba aparecer en el sistema de menús del sitio. Por el contrario, si un visitante no puede tener acceso a una página concreta, esa página no debe aparecer en el sistema de menús del sitio.

Aunque puede parecer lógico, no es el comportamiento predeterminado de ASP.NET. Si desea que las opciones de menú aparezcan y desaparezcan según los permisos del visitante actual, tiene que realizar dos tareas.

■ Agregar atributos roles al archivo web.sitemap.

■ Establecer la propiedad securityTrimmingEnabled de XmlSiteMapProviderObject en true. Esto requiere copiar 10 líneas de código XML bastante complicado de los archivos de ejemplo y pegarlas en el archivo web.config.

El procedimiento para agregar atributos roles al archivo web.sitemap es bastante sencillo.

Figura 17-9 Estos formularios proceden de los controles de servidor Web CreateUserWizard, ChangePassword y PasswordRecovery.



PARA AGREGAR ATRIBUTOS ROLES AL ARCHIVO WEB.SITEMAP

1 Abra su sitio en Visual Web Developer y, después, abra el archivo web.sitemap.

2 Para cada opción de menú (es decir, para cada etiqueta siteMapNode) que deba aparecer sólo para los visitantes de una función determinada, agregue un atributo roles como el que se

muestra en verde a continuación.

<siteMapNode url=”” title=”Product Updates”

description=”Update the Products Database”

roles=”Administrator” >

</siteMapNode>

Si el elemento de menú debe aparecer para los visitantes que tienen más de una función, especifique una lista de funciones separadas por comas, como

roles=”friends,romans,countrymen”

3 Agregue el siguiente atributo roles a cada opción de menú restante del mismo nivel. La función asterisco (*) significa todos.

roles=”*”

4 Guarde el archivo web.sitemap y pruebe el sitio.

En este momento debe ver que los elementos de menú bloqueados siguen siendo visibles, pero están deshabilitados.

PARA HACER QUE DESAPAREZCAN LOS ELEMENTOS DE MENÚ BLOQUEADOS

1 Abra su sitio en Visual Web Developer y abra después el archivo web.config.

2 Agregue las siguientes líneas de código XML justo después de la etiqueta <system.web> o justo delante de la etiqueta </system.web>. (Los saltos de línea de la línea 6 son para mejorar la

legibilidad.)



01 <siteMap defaultProvider=”XmlSiteMapProvider” enabled=”true”>

02 <providers>

03 <clear />

04 <add name=”XmlSiteMapProvider”

05 description=”SiteMap provider which reads in .sitemap XML files.”

06 type=”System.Web.XmlSiteMapProvider, System.Web,

Version=2.0.0.0, Culture=neutral,

PublicKeyToken=b03f5f7f11d50a3a”

07 siteMapFile=”web.sitemap”

08 securityTrimmingEnabled=”true” />

09 </providers>

10 </siteMap>

Este bloque de código aparece en el archivo web.config del sitio de ejemplo ContosoMagic17. Para no tener que escribir, quizás desee abrir ese archivo, copiar el bloque de código y pegarlo en su propio archivo web.config.

3 Guarde el archivo web.sitemap y pruebe el sitio.

La parte importante de este código aparece en la línea 8, que activa una característica denominada securityTrimmingEnabled. Desgraciadamente, el objeto XmlSiteMapProvider sólo puede habilitar o deshabilitar esta característica cuando se carga inicialmente. Por tanto, la etiqueta <clear /> de la línea 3 descarga cualquier proveedor de mapa del sitio existente y la etiqueta <add> que empieza en la línea 4 vuelve a cargar el objeto XmlSiteMapProvider con securityTrimmingEnabled en vigor.

Publicar la configuración de seguridad Físicamente la configuración de seguridad que se explica en este capítulo reside en dos lugares: el archivo web.config del sitio y su base de datos AspNetSqlProvider. Esta base de datos reside en la carpeta App_Data del sitio y su nombre de archivo es ASPNETDB.MDF.



Cuando publica un sitio por primera vez, puede publicar estos archivos junto con todo lo demás. Después, si su sitio es totalmente compatible con ASP.NET 2.0, la configuración de seguridad debe surtir efecto inmediatamente. Por supuesto, siguen vigentes las precauciones habituales sobre la publicación de archivos web.config y bases de datos. Como se ha explicado en el capítulo anterior, pueden requerir ciertos ajustes dependiendo de la configuración de su proveedor.

De manera continuada, la configuración de seguridad (y con toda seguridad las bases de datos de usuarios) de los dos sitios casi seguro divergirán. Por tanto, probablemente tendrá que administrar la configuración de seguridad del sitio de producción de manera independiente que en las copias de trabajo.

En resumen… ASP.NET 2.0 proporciona características eficaces y fáciles de utilizar para controlar el acceso

a un sitio Web. Puede utilizar cuentas de inicio de sesión de Windows o cuentas personalizadas almacenadas en una base de datos de SQL Server para autenticar a los visitantes de su sitio. Del mismo modo, si elige utilizar funciones, pueden ser grupos de seguridad de Windows o funciones personalizadas almacenadas en SQL Server.

ASP.NET 2.0 también ofrece controles de servidor Web que permiten iniciar sesión, cambiar la contraseña, recuperar la contraseña y crear formularios de usuario. Mediante estos controles puede crear páginas Web que proporcionen las funciones correspondientes con muy poco esfuerzo.

El control del acceso a páginas y el control de la visibilidad de los elementos de menú son dos tareas independientes. Para controlar la visibilidad de los elementos de menú tiene que agregar atributos roles al archivo web.sitemap y agregar unas líneas de código XML al archivo web.config.

Aunque inicialmente puede publicar la configuración de seguridad de una copia de trabajo del sitio a una copia de producción, no suele resultar práctico con el tiempo. Por ejemplo, al copiar la base de datos de seguridad del sitio sobrescribiría la lista de cuentas de inicio de sesión y contraseñas del sitio de destino. En su lugar, debe administrar la configuración de seguridad para cada sitio por separado.

En el próximo capítulo se explica cómo utilizar elementos Web en un sitio ASP.NET 2.0. Los elementos Web son controles de servidor especiales que los administradores y los visitantes, sujetos a la seguridad vigente, pueden agregar, reorganizar, quitar y configurar utilizando únicamente un explorador.


205

Introducción a los controles y términosde elementos Web, 206

Crear su propia página de elementos Web, 211

Capítulo 18Mostrar elementos Web

18 Los controles de servidor ASP.NET proporcionan una enorme flexibilidad, productividad y facilidad de uso a los desarrolladores Web, pero no ofrecen ninguna flexibilidad especial para los visitantes del Web, a menos que los controles de servidor sean elementos Web.

Al igual que otros tipos de controles de servidor, los elementos Web son componentes de software independientes que se ejecutan en el servidor Web como parte de una página Web completa. Como ocurre con los controles de usuario Web y los controles Web personalizados, puede desarrollar elementos Web una vez y utilizarlos en varias páginas diferentes y en distintos contextos. La ventaja principal de los elementos Web es que los visitantes del Web, sujetos a las limitaciones que establezca, pueden mostrar, ocultar, configurar y reorganizar los elementos Web como deseen.

Antes de ASP.NET 2.0, los elementos Web necesitaban una programación especial y sólo funcionaban en Microsoft® Windows® SharePoint® Services. Sin embargo, ahora cualquier control de servidor puede ser un elemento Web y cualquier página Web ASP.NET puede mostrar uno. En este capítulo se explica cómo puede utilizar fácilmente elementos Web en su propio sitio.

Una advertencia: para sacar el máximo partido de los elementos Web hay que escribir una pequeña cantidad de código de programa.



Introducción a los controles y términos de elementos Web Cualquier página que muestra un elemento Web debe ser una página ASP.NET 2.0 (con una extensión de archivo .aspx) y debe contener un control WebPartManager. Este control no muestra ningún resultado por sí mismo, pero coordina muchas características de elementos Web. Físicamente, debe aparecer antes de cualquier otro control de elemento Web de la misma página.

Un control WebPartZone encierra un área donde pueden aparecer elementos Web. Cualquier página que contiene un control WebPartManager puede contener cualquier número de zonas.

Los elementos Web son controles de servidor especiales que residen dentro de zonas de elementos Web. Los elementos Web requieren una programación especial pero ASP.NET 2.0 proporciona un control GenericWebPart que puede mostrar cualquier control de servidor como un elemento Web.

La página mostrada en la figura 18-1 ilustra estos conceptos. Son importantes los puntos siguientes:

■ Puesto que las características de elementos Web están funcionando, debe haber presente un control WebPartManager, incluso aunque no muestre nada por sí mismo.

■ Hay dos zonas de elementos Web: una titulada Left Sleeve y otra titulada Right Sleeve.

■ La zona Left Sleeve contiene tres elementos Web denominados Cards, Cell Phone y Dove.

■ La zona Right Sleeve contiene tres elementos Web denominados Watch, Rabbit y Keys.

■ El visitante ya ha hecho clic en la flecha desplegable del elemento Web Dove y ha seleccionado Minimize. Por tanto, sólo aparece la barra de título del elemento Web.

■ El visitante ha hecho clic en la flecha desplegable del elemento Web Rabbit. Esto hace que aparezca un menú emergente con estas opciones:

■ Minimize hace que el elemento Web muestre sólo su barra de título.

■ Close hace desaparecer completamente el elemento Web.

Cualquier página que contiene elementos Web es una página de elementos Web.

N O TA

Las páginas de ejemplo de este capítulo residen en el sitio Web de ContosoMagic17. Para crear su propia cuenta para el inicio de sesión, abra el sitio en Microsoft Visual Web Developer™, elija Configuración de ASP.NET en el menú Sitio Web, y haga clic en Seguridad y en Crear usuarios. Para utilizar una cuenta que incluya los archivos de ejemplo, especifique Nombre de usuario: visitor y Contraseña: vwd$2005.

S U G E R E N C I A


Capítulo 18: Mostrar elementos Web 207

Si un visitante no ha iniciado sesión, sólo puede ver los elementos Web en su estado predeterminado. Es decir, los elementos Web aparecen con la visibilidad, la posición y el estado de maximizado o minimizado que especificara el desarrollador Web al diseñar la página.

Para minimizar, restaurar, cerrar o modificar de otra manera los elementos Web, los visitantes deben iniciar sesión primero como se describe en el capítulo 17. Esto se debe a que ASP.NET almacena la configuración de elementos Web de cada visitante en el perfil de ese visitante. (Un perfil de ASP.NET 2.0 es un bloque de datos dentro de cada cuenta de inicio de sesión que almacena las preferencias del visitante.) Esto presenta dos ventajas:

■ Las preferencias de elementos Web se conservan entre distintos inicios de sesión, independientemente del tiempo que transcurra entre ellos. Mientras exista la cuenta de inicio de sesión se conservarán las preferencias de elementos Web guardadas.

■ Cada visitante tiene su propio conjunto de preferencias de elementos Web. Cuando un visitante reconfigura un elemento Web, eso no afecta a la visión que tiene cualquier otro visitante del elemento Web o de la página de elementos Web que lo contiene.

Figura 18-1 Los seis objetos que aparecen horizontalmente en esta página son elementos Web que los visitantes pueden configurar de acuerdo con sus necesidades e intereses. No aparece ninguna imagen de paloma porque el visitante minimizó ese elemento Web.



En un momento dado, un control WebPartManager (y por tanto, todos los elementos Web de la misma página) puede estar en uno de cuatro modos posibles. Son:

■ Exploración Los visitantes pueden minimizar, restaurar o cerrar cualquier elemento Web de la página. Para ello deben hacer clic en la flecha hacia abajo que aparece en la esquina superior derecha de cualquier elemento Web y elegir el comando que deseen. La figura 18-1 muestra este modo en vigor.

■ Diseño Los visitantes disponen de todas las capacidades del modo de exploración, así como la posibilidad de reorganizar elementos Web dentro o entre zonas de la misma página. Para ello tienen que arrastrar la barra de título del elemento Web y colocarla donde deseen. La figura 18-2 muestra un visitante que arrastra el elemento Web Watch fuera de la zona Right Sleeve y lo coloca en la zona Left Sleeve.

Figura 18-2 Los visitantes que invocan el modo de Diseño pueden reorganizar cualquier elemento Web contenido en la página. ASP.NET almacena esos cambios en el perfil del visitante y los guarda de una sesión a otra.

Al cerrar un elemento Web éste se quita de la memoria y deja de ser visible. Para restaurar un elemento Web cerrado, el visitante debe entrar en modo de Catálogo.

N O TA



■ Edición Los visitantes disponen de todas las capacidades de los modos de exploración y de diseño, así como un comando adicional denominado Editar en el menú desplegable de cada elemento Web. Al elegir esta opción aparece una Zona del editor como la que se muestra en la parte derecha de la figura 18-3. Los visitantes pueden hacer los cambios que deseen y, después, hacer clic en el botón OK o en el botón Apply para guardarlos.

Para salir sin guardar, el visitante tiene que hacer clic en el botón Cancel de la parte inferior de la zona o en el vínculo Close de la esquina superior derecha.

Figura 18-3 Los visitantes que invocan el modo de Diseño pueden reorganizar cualquier elemento Web contenido en la página. ASP.NET almacena esos cambios en el perfil del visitante y los guarda de una sesión a otra.

El tipo de cromo de un elemento Web se refiere al estilo de su barra de título y su borde (es decir, a su reducción). La dirección de un elemento Web se refiere a su dirección lingüística. Por ejemplo, en inglés y en español las palabras y las letras aparecen de izquierda a derecha. En hebreo y en árabe, las palabras y las letras aparecen de derecha a izquierda.

S U G E R E N C I A



■ Catálogo Los visitantes disponen de todas las capacidades de los modos de exploración y de diseño. Además, la página muestra una Zona de catálogo como la que hay en la parte derecha de la figura 18-4. Esta zona muestra casillas de verificación para todos los elementos Web que el desarrollador incluya en la página, pero que el visitante cierre después (abriendo el menú emergente y eligiendo Cerrar).

Para restaurar un elemento Web cerrado, el visitante tiene que activar su casilla de verificación en la Zona de catálogo, seleccionar una zona en la lista desplegable Add to y hacer clic en el botón Add. Si es necesario, el visitante cambia entonces al modo Diseño y coloca el elemento Web que acaba de hacerse visible.

Figura 18-4 En el modo de Catálogo, una página de elementos Web muestra una zona de catálogo que contiene los elementos Web que ya no se muestran y ofrece un medio de restaurarlos.



Por supuesto, los elementos Web pueden hacer mucho más que mostrar imágenes con propiedades mágicas. En una situación habitual, la zona de catálogo para una página principal corporativa ofrece docenas o cientos de elementos Web, cada uno de ellos con su propia especialidad: canal de noticias de la empresa, canal de noticias del sector, cotizaciones bursátiles, métricas de la empresa y otras muchas opciones. Cada empleado configura entonces la página principal para que muestre la información que más le interese o le preocupe.

Crear su propia página de elementos Web La preparación de la página Sleeve Trick (tricks/sleeves.aspx en los archivos de ejemplo ContosoMagic17) no es difícil, pero implica cierto trabajo repetitivo y un poco de código de programa que enlace los diversos componentes. En las próximas secciones se explica de forma generar cómo crear esta página de elementos Web.

Recopilar elementos Web

La construcción de una página de elementos Web no tiene sentido a menos que tenga algunos elementos Web que desee mostrar. Puede adquirir elementos Web comercialmente o puede pedir al departamento de TI que programe elementos Web, pero en la mayoría de los casos la forma más rápida y más sencilla de obtener elementos Web es escribirlos personalmente como controles de usuario Web. Todos los elementos Web de la página Sleeve Trick son controles de usuario Web muy sencillos. Por ejemplo, aquí está el código fuente completo para el control cards.ascx (utilizando sintaxis de C#):

01 <%@ Control Language=”C#” ClassName=”cards” %>

02 <script runat=”server”>

03 protected void Page_Init(control sender, EventArgs e)

04 {

05 GenericWebPart gwp = Parent as GenericWebPart;

06 if (gwp != null)

07 {

08 gwp.Title = “Cards”;

09 gwp.TitleIconImageUrl = “../images/haticon.gif”;

Si ha olvidado cómo crear controles de usuario Web, consulte el capítulo 8, “Crear y utilizar controles de usuario Web”.




10 gwp.CatalogIconImageUrl = “../images/haticon.gif”;

11 }

12 }

13 </script>

14 <img border=0 src=”../images/cards.gif” />

He aquí las características importantes de este código:

■ La directiva @ Control de la línea 1 especifica opciones para el control de usuario. El lenguaje de programación será C# y al compilar el control se creará una clase (un tipo de objeto) denominada cards.

■ La etiqueta <img> que aparece en la línea 14 muestra la imagen de una baraja de cartas.

Las instrucciones de las líneas 1 y 14 son todas las instrucciones que necesita realmente. Sin embargo, el elemento Web resultante mostraría la palabra Untitled en su barra de título y no contendría ningún icono en su barra de título ni en el modo Catálogo. El código de las líneas 2 a 13 corrige estas imperfecciones visuales. A continuación se ofrece una breve explicación de este código:

■ Las etiquetas de las líneas 2 y 13 marcan el principio y el final de cierto código de programa que se ejecutará en el servidor Web.

■ La línea 3 define una función denominada Page_Init. Como tiene este nombre, ASP.NET la ejecutará automáticamente cuando inicialice el resto de la página Web. Los parámetros sender y e de la función satisfacen los requisitos de ASP.NET.

■ Las llaves ({ }) de las líneas 4 y 12 marcan el principio y el final del código fuente de la función Page_Init.

■ La línea 5 es más compleja. Cuando utiliza un control de usuario Web como un elemento Web, ASP.NET carga un control GenericWebPart e indica a ese control que cargue el control de usuario Web que desea. En esa situación, la instrucción de la línea 5:

GenericWebPart gwp = Parent as GenericWebPart;

establece la variable gwp como un puntero al control GenericWebPart primario.



Sin embargo, si está utilizando el mismo control de usuario Web en una página Web ASP.NET normal, el primario del control no será un control GenericWebPart; lo más probable es que sea un control Page u otro control de usuario Web. Como no puede hacer que la variable gwp señale a un control GenericWebPart, ASP.NET establecerá la variable en null.

■ La línea 6 determina si la variable gwp contiene algo distinto de null. En tal caso:

■ La línea 8 establece la propiedad Title del control GenericWebPart.

■ La línea 9 establece la propiedad TitleIconImageUrl del control GenericWebPart, de forma que señale al icono que debe aparecer en la barra de título del elemento Web.

■ La línea 10 establece la propiedad CatalogIconImageUrl del control GenericWebPart, de forma que señale al icono que debe identificar al elemento Web en el modo Catálogo.

Los seis controles utilizados como elementos Web en el ejemplo Sleeve Trick siguen el mismo patrón. Para evitar confusiones con las rutas de acceso URL de imagen, los seis controles de usuario y la propia página Web Sleeve Tricks residirán en la misma carpeta: tricks.

Crear una página de elementos Web en blanco

El proceso para crear una página de elementos Web es el mismo que para crear cualquier otra página ASP.NET.

PARA CREAR UNA PÁGINA DE ELEMENTOS WEB

1 Haga clic con el botón secundario del mouse (ratón) en la carpeta tricks y seleccione Agregar nuevo elemento.

2 Seleccione la plantilla Formulario Web Forms y especifique las otras opciones como desee. En el ejemplo se utiliza Nombre: sleeves.aspx, Lenguaje: C#, Colocar el código en un archivo

independiente: desactivada y Seleccionar la página principal: activada. La página también utiliza la misma página principal que el resto del sitio.

3 Arrastre un control WebPartManager desde el grupo Elementos Web del Cuadro de herramientas y colóquelo en el cuerpo de la página Web. Después, establezca su Id. en wpmSleeves.



Agregar zonas de elementos Web

Cuando llegan al explorador, las zonas de elementos Web son elementos DIV. Como tales, normalmente provocan un salto de línea y aparecen alineados a la izquierda. La forma habitual de reemplazar este comportamiento es colocar las zonas de elementos Web en celdas de tabla.

PARA AGREGAR ZONAS DE ELEMENTOS WEB

1 Agregue una tabla HTML de una fila y tres columnas debajo del control WebPartManager. Asegúrese de que esta tabla aparece físicamente después del control WebPartManager que agregó en la sección

anterior.

2 Agregue una tabla HTML de dos filas y tres columnas dentro de la celda izquierda de la tabla que creó en el paso 1.

3 Escriba Left Sleeve en la celda superior izquierda de la tabla que creó en el paso 2. Después, escriba Right Sleeve en la celda superior derecha de la misma tabla. Dé formato a estas celdas como títulos.

(La columna central sólo se utiliza para espaciado.)

4 Arrastre un control WebPartZone fuera del grupo Elementos Web del Cuadro de herramientas y colóquelo en la celda inferior izquierda de la tabla del paso 2. Asigne a este control WebPartZone un

Id. de Left y establezca su propiedad LayoutOrientation en Horizontal.

5 Repita el paso 4, esta vez arrastrando el control WebPartZone a la celda inferior <SoftReturn>derecha y asignándole un Id. de Right. De nuevo, establezca la propiedad LayoutOrientation en Horizontal.

6 Arrastre tres de los elementos Web o los controles de usuario Web fuera del Explorador de servidores y colóquelos en el elemento Web Left. Después, arrastre el resto de los elementos Web o de los

controles de usuario Web al elemento Web Right.

7 Guarde la página y examínela. Los elementos Web deben aparecer, pero a menos que inicie sesión en el sitio, no podrá modificarlos desde el explorador.

8 Inicie sesión en el sitio e intente utilizar las flechas desplegables de cada elemento Web. Inicialmente, las opciones del menú emergente deben ser Minimizar y Cerrar.



■ Al elegir Minimizar se debe ocultar todo el elemento Web, excepto su barra de título, y los comandos del menú emergente deben cambiar a Restaurar y Cerrar.

■ Al elegir Cerrar se debe ocultar todo el elemento Web y no debe haber ninguna forma (por ahora) de mostrarlo de nuevo. En la próxima sección se explica cómo modificar la página de forma que los visitantes pueden restaurar elementos Web cerrados.

Agregar zonas de editor y de catálogo

Para que el modo de Edición funcione, la página debe contener una zona de editor que contenga un elemento Web Editor. Del mismo modo, para que el modo de Catálogo funcione, la página debe contener una zona de catálogo que contenga un elemento Web Catálogo.

PARA AGREGAR ZONAS DE EDITOR Y DE CATÁLOGO, Y ELEMENTOS WEB

1 Arrastre un control EditorZone desde el grupo Elementos Web del Cuadro de herramientas y colóquelo en la celda situada más a la derecha de la tabla que creó en el paso 1 de la sección

anterior.

2 Arrastre un control AppearanceEditorPart desde el grupo Elementos Web del Cuadro de herramientas y colóquelo en el control EditorZone del paso 1.

3 Arrastre un control CatalogZone desde el grupo Elementos Web del Cuadro de herramientas y colóquelo en la misma celda que el control EditorZone del paso 1. (El orden no importa. Estos dos

controles nunca serán visibles al mismo tiempo.)

4 Arrastre un control PageCatalogPart desde el grupo Elementos Web del Cuadro de herramientas y colóquelo en el control CatalogZone del paso 3.

Si descubre que los menús emergentes de elementos Web no aparecen con la fuente, el borde, los colores y otras propiedades que desea, seleccione la zona del elemento Web, abra el grupo MenuPopupStyle en la ventana Propiedades y especifique el formato que desee.

S U G E R E N C I A



Cambiar de modos de presentación

Para alternar la página de elementos Web entre los modos Exploración, Diseño, Edición y Catálogo, tiene que cambiar mediante programación la propiedad DisplayMode del control WebPartManager a uno de cuatro valores posibles:

WebPartManager.BrowseDisplayMode

WebPartManager.DesignDisplayMode

WebPartManager.EditDisplayMode

WebPartManager.CatalogDisplayMode

La página de ejemplo utiliza una lista desplegable para desencadenar estos cambios de propiedades. Para crear este control, haga lo siguiente.

PARA CREAR UNA LISTA DESPLEGABLE

1 Arrastre un control DropDownList desde el grupo Estándar del Cuadro de herramientas y colóquelo en cualquier lugar adecuado de la página Web. Asigne a este control un Id. de ddlMode.

2 Arrastre un control Literal desde el grupo Estándar del Cuadro de herramientas y colóquelo cerca del control DropDownList del paso 1. Este control mostrará los mensajes de error derivados de intentar

cambiar los modos de los elementos Web. Asigne a este control un Id. de litMode y establezca su propiedad EnableViewState en false. (Al deshabilitar el estado de vista se borra automáticamente el mensaje anterior durante cada envío del formulario.)

3 Seleccione el control DropDownList del paso 1 y busque su propiedad Items en la ventana Propiedades.

4 Haga clic en la palabra Collection que hay a la derecha de Items y, después, haga clic en el botón de puntos suspensivos (…).

5 Cuando aparezca el cuadro de diálogo Editor de la colección ListItem:

■ Haga clic en el botón Agregar, y escriba Browse en el cuadro Texto y 0 en el cuadro Valor.

■ Haga clic en el botón Agregar, y escriba Design en el cuadro Texto y 1 en el cuadro Valor.

■ Haga clic en el botón Agregar, y escriba Edit en el cuadro Texto y 2 en el cuadro Valor.

■ Haga clic en el botón Agregar, y escriba Catalog en el cuadro Texto y 3 en el cuadro Valor.



6 Haga clic en el botón Aceptar; después, cambie a la vista Código fuente y examine su trabajo. El código debe tener esta apariencia:

<asp:DropDownList ID=”ddlMode” runat=”server”>

<asp:ListItem Value=”0”>Browse</asp:ListItem>

<asp:ListItem Value=”1”>Design</asp:ListItem>

<asp:ListItem Value=”2”>Edit</asp:ListItem>

<asp:ListItem Value=”3”>Catalog</asp:ListItem>

</asp:DropDownList>

Realice las correcciones que sean necesarias y vuelva a la vista Diseño.

7 Con la lista desplegable todavía seleccionada, busque su propiedad AutoPostBack en la ventana Propiedades. Para provocar un envío del formulario cada vez que el visitante seleccione un elemento

diferente, establezca la propiedad AutoPostBack en True.

8 Haga doble clic en la lista desplegable. Se cambiará la presentación a la vista Código fuente y se mostrará una función vacía como la siguiente:

protected void ddlMode_SelectedIndexChanged(control sender, EventArgs e)

{

}

9 Introduzca el código de programa siguiente dentro de la función que creó en el paso 8:

01 try

02 {

03 switch (ddlMode.SelectedValue)

04 {

05 case “1”:

06 wpmSleeves.DisplayMode = WebPartManager.DesignDisplayMode;

07 break;

08 case “2”:



09 wpmSleeves.DisplayMode = WebPartManager.EditDisplayMode;

10 break;

11 case “3”:

12 wpmSleeves.DisplayMode = WebPartManager.CatalogDisplayMode;

13 break;

14 default:

15 wpmSleeves.DisplayMode = WebPartManager.BrowseDisplayMode;

16 break;

17 }

18 }

19 catch (Exception ex)

20 {

21 litMode.Text = ex.Message;

22 }

23 CheckDisplayMode();

En este código:

■ En las líneas 1 y 2 empieza un bloque try, que termina en la línea 18. Esto captura cualquier excepción (es decir, errores graves) que el control WebPartManager pueda producir. Esto ocurre, por ejemplo, cuando un visitante que no ha iniciado sesión intenta entrar en modo Diseño, Edición o Catálogo.

■ Hay un bloque switch que empieza en las líneas 3 y 4 y termina en la línea 17. Este bloque compruebala selección actual del cuadro de lista desplegable ddlMode y establece la propiedad DisplayMode del control WebPartManager denominado wpmSleves.

■ El bloque catch de las líneas 19 a 22 sigue inmediatamente al bloque try y sólo se ejecuta si el bloque try detecta una excepción. Este bloque recibe un objeto Exception denominado ex y muestra la propiedad Message de ese objeto en el control Literal denominado litMode. Creó este control en el paso 2.

■ La instrucción CheckDisplayMode() de la línea 23 ejecuta una función que consulta la propiedad DisplayMode del control WebPartManager y restablece la lista desplegable ddlMode. Esto es necesario porque cuando fracasa el cambio de modo, el control WebPartManager y la lista desplegable no están sincronizados. En el próximo paso se explica cómo escribir esta función.



10 Agregue la siguiente función después del código de los pasos 8 y 9, y justo antes de la etiqueta </script> que hay a continuación.

01 private void CheckDisplayMode()

02 {

03 if (wpmSleeves.DisplayMode == WebPartManager.BrowseDisplayMode)

04 {

05 ddlMode.SelectedIndex = 0;

06 return;

07 }

08 if (wpmSleeves.DisplayMode == WebPartManager.DesignDisplayMode)

09 {


10 return;

11 }

12 if (wpmSleeves.DisplayMode == WebPartManager.EditDisplayMode)

13 {


15 return;

16 }

17 if (wpmSleeves.DisplayMode == WebPartManager.CatalogDisplayMode)

18 {


20 };

21 }

Ésta es la función a la que llama la línea 23 del paso 9. Las líneas 3 a 7 determinan si el control WebPartManager wpmSleeves está en modo de Presentación y, en tal caso, se asegura de que esté seleccionado el primer elemento (índice 0) de la lista desplegable, ddlMode. Las líneas 8 a 11 determinan si el control WebPartManager está en modo de Diseño y así sucesivamente.



11 Tenga en cuenta que el control WebPartManager puede cambiar de modo por otras razones que no sea que el visitante del Web cambie el cuadro de lista desplegable. Por ejemplo, imagine que la

página está en modo de Edición o de Catálogo. Si el visitante hace clic en el botón Cerrar del control AppearanceEditorPart o PageCatalogPart (el que sea visible), el control WebPartManager revertirá al modo de Exploración y la lista desplegable ddlMode debe revertir también a Exploración. Para que esto ocurra, haga lo siguiente:

■ Vuelva al modo de Diseño en Visual Web Developer.

■ Seleccione el control WebPartManager.

■ En la ventana Propiedades, haga clic en el botón Eventos (el icono de rayo).

■ En la lista de eventos resultantes, haga doble clic en DisplayModeChanged.

Esto hará que Visual Web Developer cambie al modo Código fuente y que se agreguen las líneas que se muestran debajo con una letra normal. Agregue la línea que se muestra en negrita.

protected void wpmSleeves_DisplayModeChanged(control sender,

WebPartDisplayModeEventArgs e)

{

CheckDisplayMode();

}

Ahora, siempre que cambie la propiedad DisplayMode del control WebPartManager, esta función ejecutará la función CheckDisplayMode del paso 10. Esa función, por supuesto, sincroniza la lista desplegable en el DisplayMode actual.

Con esto termina el código de la página Sleeve Trick. Cuando esta página funcione, puede agregarla al archivo web.sitemap como hizo para otras páginas del sitio.

Ya debe saber cómo impedir que los visitantes agreguen elementos Web no autorizados a una página: no agregue esos elementos Web cuando desarrolle la página. Los únicos elementos Web que los visitantes pueden agregar son los que usted incluya al desarrollar una página.

Del mismo modo, es fácil impedir que los visitantes utilicen modos de presentación a los que no desea que tengan acceso: evite escribir código de programa que cambie a esos modos.



En resumen… Los elementos Web son unidades independientes de contenido que, al igual que cualquier otro control de servidor, puede incluir en varias páginas Web diferentes. Sin embargo, los elementos Web tienen capacidades especiales de forma que cada visitante puede agregar, configurar, reorganizar u ocultar cualquier elemento Web que el desarrollador proporcione. De esta forma, los visitantes pueden personalizar el sitio de acuerdo con sus propias necesidades y preferencias.

Cualquier página ASP.NET que contiene elementos Web es una página de elementos Web. Cada página de elementos Web debe contener un control WebPartManager y al menos un control WebPartZone. Los controles WebPartZone contienen los elementos Web.

Los controles WebPartManager (y por tanto las páginas de elementos Web) aceptan cuatro modos de presentación: Exploración (que puede minimizar, restaurar y cerrar elementos Web); Diseño (que también puede reorganizar elementos Web); Edición (que también puede modificar propiedades de elementos Web) y Catálogo (que puede volver a crear una instancia de elementos Web cerrados). Para que los visitantes puedan cambiar entre estos modos hay que escribir una pequeña cantidad de código de programa.

Visual Web Developer 2005 Express es un entorno de desarrollo de páginas Web eficaz, sofisticado y fácil de utilizar. Es compatible con una amplia gama de las mejores y más recientes tecnologías Web de la actualidad, incluyendo edición WYSIWYG, administración de sitios, hojas de estilos en cascada, menús desplegables o emergentes, mapas del sitio, rastros, integración con bases de datos, seguridad de inicio de sesión y personalización de los visitantes. Saca el máximo partido de ASP.NET 2.0 y Microsoft SQL Server™, los cuales están ampliamente disponibles a un costo razonable.

Por supuesto, ningún fragmento de software puede crear sitios Web por su cuenta. Usted tiene que contribuir con el concepto, el diseño, la estructura y su duro trabajo. Afortunadamente, Visual Web Developer proporcionará el mejor canal posible entre sus ideas, sus esfuerzos y unos resultados extraordinarios. Buena suerte con su sitio y espero que nos encontremos de nuevo.


Índice

223

Aabrir

páginas Web, 53sitios Web, 35–43

Abrir archivo, comando (menú Archivo), 37, 53Abrir sitio Web, cuadro de diálogo, 37–38,47acceso. Véase también seguridad

bases de datos, 138confi gurar la seguridad, 184–193, 185–193,

191–192, 193–200AccessDataSource, control de origen de datos,

151actualizar

registros, 166–168tablas, 146–148

Actualizar, comando (cuadro de diálogo Copiar Web, menús contextuales de carpetas), 47

Actualizar, comando (menús contextuales de controles), 63

administraciónacceso a bases de datos, 138servidores SQL Server compartidos, 182

Administrador IIS de Microsoft, herramienta administrativa, etiquetar aplicaciones de IIS, 25

Agregar cláusula Where, cuadro de diálogo, 159, 160

Agregar conexión, cuadro de diálogo, 139, 140–141

Agregar nuevo elemento, Cuadro de diálogo, 86, 117

Agregar nuevo elemento, página 52–53Agregar nuevos usuarios, página de asistente,

188–190Agregar regla de estilo, comando (menú Estilos),

110Agregar regla de estilo, cuadro de diálogo, 110ajustar medidas de colocación absoluta, 65almacenar, código de programa, 82–83

aplicacionescontroles de usuario, 90–93controles de usuario Web, estilos CSS, 91IIS, 24Microsoft Visual Web Developer 2005 Express,

3–4páginas principales, 103–106Visual Web Developer 2005 Express, 3–4

App_Data, carpeta, 142copiar bases de datos de SQL Server, 174–175copiar, 48

AppearanceEditorPart, control, 211arbitrarios, abrir sitios Web, 37–43Archivo de máscara, plantilla, cuadro de diálogo

Agregar nuevo elemento, 117Archivo, comandos del menú

Abrir archivo, 53Abrir sitio Web, 37Archivos recientes, 53Nuevo archivo, 52Proyectos recientes, 36

archivos de ejemplo, instalación, 8archivos de imagen, archivos de imagen ISO, 6–7archivos de mapa del sitio, crear, 126–130archivos de máscara, 116Archivos recientes, comando (menú Archivo), 53Asistente para la confi guración de seguridad,

187–193asistentes, confi guración de la seguridad, 187–

193asociar archivos de base de datos, 184ASP.NET 2.0

cadenas de formato de datos, 161–162características, 1–2controles de servidor, 14–16, 20controles Literal, 10entrega de páginas Web, 14–19hipervínculos de sitios Web, 126–136

modelo de programación, 13perfi les, 203recursos, 3temas, 116–123

ASP.NET, matriz Web, 5ASP.NET, servidor de desarrollo, 24atributos, codifi car, controles de usuario Web,

92–93AttachDbFileName, cadena de conexión, 184AttachDbFilename, Propiedades extendidas,

parámetro Initial File Name, 180Autenticación

confi guración Básica, 185confi guración Ninguna, 185NTML, 185

AutoGenerateRows, propiedad (control DetailsView), 170

AutoPostBack=”True”, atributo (controles de servidor), 22

Avanzados, comando (menú Edición), 82

Bbannertxt, regla CSS, 99barras de herramientas

Edición de código fuente HTML, 77, 82Editor de texto, 82establecer propiedades de controles, 64–65

Base de datos, parámetro Catálogo original, 180bases de datos

administración, acceso, 138asociar archivos, 184compatibilidad con Visual Studio, 140–141conectar con, 138–139ContosoMagic, agregar al sitio de ejemplo,

141–142ContosoMagic, base de datos, tabla Products,

145crear, 142–143, 149–151, 155–156, 162



publicar, 174–176registros, 1, 166SQL Server, 140–143, 174–175tablas, 143–148

bordertext, regla CSS, 98BoundField, propiedades, 161Buscar en archivos, comando (comando Buscar y

reemplazar), 79Buscar siguiente, comando (comando Buscar y

reemplazar), 78–79Buscar símbolo, comando (comando Buscar y

reemplazar), 79buscar texto, editor de texto de código fuente,

77–79Buscar y reemplazar, comando (menú Edición), 77Buscar y reemplazar, cuadro de diálogo, 77Buscar y reemplazar, cuadro de diálogo, 78Búsqueda rápida, comando (comando Buscar y

reemplazar), 78

CC#, recursos, 3cadenas de conexión, 177

AttachDbFilename, 184parámetros, 179–181

cadenas de formato de datos, ASP.NET, 161–162cadenas

cadenas de formato de datos ASP.NET, 161–162

conexión, 177, 179–181, 184parámetros, 181

Cambiar origen de datos, cuadro de diálogo, 139Cambiar tamaño, comando (menú Diseño), 64campos, tabla Products (base de datos

ContosoMagic), 145capas, agregar a páginas Web, 57características, ASP.NET 2.0, 1–2cards.ascx, control (página Sleeve Trick), 207–209carpetas

App_Data, 142, 174–175Data, 142–143

carpetas raíz, sitios Web, 38Catálogo original, parámetro (cadenas de

conexión), 179Catálogo, modo, 206

CatalogZone, control, 211categorización, controles de servidor, 20

controles de usuario Web, 20controles Web personalizados, 20

CategoryId, campo (tabla Products), 145CD-ROM virtual, Panel de control para Windows

XP, 7Cerrar, opción, 202ChangePassword, control, 194, 196–197ciclo de vida de páginas, entrega de páginas Web,

19ciclo de vida, páginas ASP.NET, 19CodeFile, atributo (directiva @ Page), 83codifi car, atributos, controles de usuario Web,

92–93código de programa

almacenar, 82–83compilar, 83publicar, 82–83

código fuente, editor de texto, 82buscar y reemplazar texto, 77–79comandos de edición, 82comando Ir a (menú Edición), 72dar formato al código fuente, 80–81detección de errores de sintaxis, 76–77esquematización, 69–70IntelliSense, 73–76lista de tareas, 72–73marcadores, 72vista dividida, 71

Código subyacente, almacenamiento de código de programa, 82

colocación absoluta 64–65Colocar el código en un archivo independiente,

casilla de verifi cación 82Colocar el código en un archivo independiente,

entrada (página Agregar nuevo elemento), 52, 86, 97

Columna, valor (cuadro de diálogo Agregar cláusula Where), 158

Columnas, confi guración (cuadro de diálogo Instrucción Select), 152

comandoseditar, editor de texto de código fuente, 82menú Archivo, 36–37, 52–53, 86menú Diseño, 57, 64

menú Edición, 72, 75, 77, 82menú Estilos, Agregar regla de estilo, 110menú Formato, 64, 66, 108menú Generar, Generar sitio Web, 83menú Herramientas, Opciones, 69menú Sitio Web, Copiar sitio Web, 46–47menú Ventana, 71menú Ver, 60, 77

comandos del menú Estilos, Agregar regla de estilo, 110

comandos del menú Herramientas, Opciones, 69comandos del menú Sitio Web, Copiar sitio Web,

46–47comandos del menú Ventana

Dividir, 71Quitar división, 71

Combinar celdas, comando (menú Diseño), 64compartir copias de SQL Server, 182

administración, 182compilar código de programa, 83conexiones de datos, 149

conectar con bases de datos existentes, 138–139

confi guración, 138confi guración

acceso a bases de datos, 138confi guración de correo electrónico SMTP,

185–186control GridView, 157–161control GridView, actualizaciones, 167–168orígenes de datos, 151–155seguridad, 184–200

Confi guración avanzada (cuadro de diálogo Instrucción Select), 153

Consulta de prueba, cuadro de diálogo, 155contenido

controles de servidor ASP.NET, 14–16etiquetas HTML, 14

Content, control de servidor, 102ContentPlaceHolder, control, 97–98ContentPlaceHolderID=, atributo, 105Contoso Magic Costumes, página, crear, 157–161Contoso Magic, formulario de inicio de sesión,

196ContosoMagic, base de datos

agregar al sitio de ejemplo, 142


Índice 225

tablas, Products, 143–145Contraseña, parámetro (cadenas de conexión),

179Contraseña, parámetro Pwd, 181Control de usuario Web, etiqueta (controles de

usuario Web), 90controladores de base de datos de nivel superior,

176–177controladores de base de datos, 176–177controladores de eventos, 18controles

agregar a páginas Web, 54–58, 54–57, 57–58cards.ascx, (página Sleeve Trick), 207–209ChangePassword, 196–197ContentPlaceHolder, 97–98controles de usuario Web, crear para

elementos Web, 207–209controles Literal ASP.NET, 10CreateUserWizard, 196–197enlazados a datos, 155–157–161DetailsView, 169–171doble enlace, 167–168elementos Web, 202–212entrega de páginas Web, 16–17establecer propiedades, 58–65FormView, 169GridView, 150, 158–159, 166–168litBannerTitle, 99Login, 10LoginName, 195LoginStatus, 195orígenes de datos, 151PasswordRecovery, 196–197SiteMapDataSource, 10SiteMapPath, 10, 134–136TreeView, 134UserName, 10

controles de inicio de sesión, agregar a sitios, 193–197

Controles de menúpropiedades, 132vincular páginas de sitios Web, menús

desplegables/emergentes, 131–133controles de servidor Literal, litBannerTitle, 98–98controles de servidor Web, 20–22

controles de servidor, 14–16categorización, 20–22Contenido, 102controles de servidor Literal, litBannerTitle, 98eventos, 18–19HtmlTable, 17HtmlTableRow, 17Page, 16Render, método, 15–16rowPlentyDetail, 17rowPlentyHeading, 17tblPlenty, 17

controles de usuario Web, 20–20, 93agregar a páginas Web, 88–89aplicaciones, 90–93crear, 86–88, 207–209

controles de usuario, 20agregar a páginas Web, 88–89aplicaciones, 90–93crear, 86–88personalizar, frente a controles personalizados,

20Web, crear para elementos Web, 207–209

controles enlazados a datos, 149, 155–156DataList, 156DetailsView, 156DropDownList, propiedades, 155–156FormView, 156GridView, 156, 157–161Repeater, 156

controles Literal (ASP.NET), 10controles personalizados, 20

frente a controles de usuario personalizados, 20

controles Web personalizados, 20controles de servidor HTML, 20controles de servidor Web, 20–22

Controls, colección (controles de servidor), 16Convertir en hipervínculo, botón (barra de

herramientas Formato), 66Convertir en hipervínculo, comando (menú

Formato), 66copia de producción, sitios Web, 24copia de trabajo, sitios Web, 24

copiarbases de datos de SQL Server, 174–175sitios Web, 45–49

Copiar archivos seleccionados, comando (cuadro de diálogo Copiar Web, menús contextuales de carpetas), 47

Copiar sitio en ubicación remota (o de origen), comando (cuadro de diálogo Copiar Web, menús contextuales de carpetas), 48

Copiar sitio Web, comando (menú Sitio Web), 46–47

Copiar Web, ventana, 46Crear nueva base de datos de SQL Server, cuadro

de diálogo, 143Crear o administrar funciones, vínculo, 192CreateUserWizard, control, 194, 196–197Criterios, panel, 147CSS (Hojas de estilos en cascada), 114

archivos compartidos de hoja de estilos, 109–114

controles de usuario Web, 91dar formato a elementos de página

individualmente, 108hojas de estilos compartidas, agregar temas,

119–120CssClass, propiedad (control DetailsView), 170Cuadro de herramientas, marco, 8Cuadro de herramientas, ventana

agregar controles a páginas Web, 54–57grupos de controles funcionales, 56

cuadros de diálogoAbrir sitio Web, 37–38, 47Agregar cláusula Where, 159, 158–160Agregar conexión, 139, 140–141Agregar nuevo elemento, 86, Agregar regla de estilo, 110Buscar y reemplazar, 77, 78Cambiar origen de datos, 139Consulta de prueba, 155Crear nueva base de datos de SQL Server, 143Defi nir instrucciones o procedimientos

almacenados personalizados, 154Editor de la colección ListItem, 213Elegir la conexión de datos, 151–152Elegir nombre, 145Elegir origen de datos, 139



Generador de estilos, 108Hipervínculo, 66Insertar tabla, 57Instrucción Select, 152–153, 167–168Jerarquía de la regla de estilo, 111Nuevo sitio Web, 26Opciones específi cas de etiqueta, 81Opciones, 36Propiedades, 42Seleccionar ubicación, 29

cuentasCuentas de Windows, 184–185SQL Server, 185

Cuentas de Windows, 184–185

DDaemonTools, 7dar formato

código fuente, editor de texto, 80–81elementos de página, CSS, 108

Data, carpeta, 142crear bases de datos en, 143

DataFormatString, propiedad, 161DataKeyNames, propiedad (control DetailsView),

170DataList, control, 156DataSource, Server, Address, Addr, Network

Address, parámetro, 181DataSourceId, propiedad (control DetailsView), 170DataSourceID, propiedad (control DropDownList),

155DataTextField, propiedad (control DropDownList),

156DataValueField, propiedad (control

DropDownList), 156Datos, grupo de controles (Cuadro de

herramientas), 56dbmsads, biblioteca, 181dbmslpc, biblioteca, 181dbmsrpc, biblioteca, 181dbmssoc, biblioteca, 181dbmsspx, biblioteca, 181dbnmpnt, biblioteca, 181De, confi guración, 185default.aspx, 195

DefaultMode, propiedad (control DetailsView), 170

Defi nir instrucciones o procedimientos almacenados personalizados, cuadro de diálogo, 154

depuradores, 24DetailsView, control, 156

agregar registros, 169–171propiedades, 170

detección, errores de sintaxis, editor de texto de código fuente, 76–77

Devolver sólo fi las únicas, confi guración (cuadro de diálogo Instrucción Select), 152

Diagrama, panel, 147dinámicos, elementos de menú, 132direcciones URL relativas

controles de usuario, 91–92páginas principales, 106

Directorio, campo (cuadro de diálogo Seleccionar ubicación), 32

Diseñador de consultas, 146–148Diseñador de tablas, 144Diseño, barra de herramientas, modifi car

controles, 64–65Diseño, comandos del menú, 64

Insertar tabla, 57DisplayMode, propiedad, control

WebPartManager, 212–216Dividir, comando (menú Ventana), 71doble enlace, 167–168DropDownList, control de servidor Web, 21–22DropDownList, control, 212DropDownList, control, propiedades, 155–156

EEdición de código fuente HTML, barra de

herramientas, 77, 82Edición, comandos del menú

Avanzados, 82Buscar y reemplazar, 77IntelliSense, 75Ir a, 72Marcadores, 72

edición, comandos, editor de texto de código fuente, 82

Edición, modo, 205Editar imagen, comando (menús contextuales de

controles), 62Editar plantilla, comando (menús contextuales de

controles), 63Editar, opción, 166Editor de la colección ListItem, cuadro de diálogo,

213editor de texto, 82

buscar y reemplazar texto, 77–79comando Ir a (menú Edición), 72comandos de edición, 82–82dar formato al código fuente, 80–81detección de errores de sintaxis, 76–77esquematización, 69–70IntelliSense, 73–76lista de tareas, 72–73marcadores, 72vista dividida, 71

Editor de texto, barra de herramientas, 82EditorZone, control, 211Ejecutar como control del servidor, comando

(menús contextuales de controles), 62Elegir la conexión de datos, cuadro de diálogo,

151–152Elegir nombre, cuadro de diálogo, 145Elegir origen de datos, cuadro de diálogo, 139Elegir origen de datos, opción, 169elementos de página, dar formato, CSS, 108Elementos Web

controles, 202–210,crear páginas de elementos Web, 207–216,mostrar, 201mostrar, cambiar de modo de presentación,

212–216zonas, agregar, 210–211

Elementos Web, grupo de controles (Cuadro de herramientas), 56

Eliminar, comando (cuadro de diálogo Copiar Web, menús contextuales de carpetas), 48

Eliminar, comando (menú Diseño), 64Eliminar, opción, 166eliminar, registros, 166En la línea, almacenamiento de código de

programa, 82


Índice 227

errores de sintaxis, detección, editor de texto de código fuente, 76–77

Esquema del documento, comando (menú Ver), 60

esquematización, editor de texto de código fuente, 69–70

Estándar, grupo de controles (Cuadro de herramientas), 56

estáticos, elementos de menú, 132Estilo, comando (menú Formato), 64, 108Estilo, comando (menús contextuales de

controles), 62Etiqueta rápida, barra de herramientas, 59etiquetar aplicaciones de IIS

Extensiones de servidor de FrontPage, 25herramienta administrativa Administrador IIS

de Microsoft, 25etiquetas de máscara, 116etiquetas inteligentes, establecer propiedades de

controles, 63etiquetas, controles de usuario Web, 90

@ Register, 90Control de usuario Web, 90

eventos, entrega de páginas Web, 18–19Exploración, grupo de controles (Cuadro de

herramientas), 56Exploración, modo, 204Explorador de base de datos, 9Explorador de soluciones, 9

abrir páginas Web, 53agregar controles a páginas Web, 57–58

Extensiones de servidor de FrontPage, etiquetar aplicaciones de IIS, 25

Ffi nalización de código. Véase IntelliSensefi nalización de instrucciones. Véase IntelliSensefootertxt, regla CSS, 100Formato automático, comando (menús

contextuales de controles), 63Formato, barra de herramientas

botón Convertir en hipervínculo, 66modifi car controles, 64

Formato, comandos de menúConvertir en hipervínculo, 66Estilo, 64, 108

Formato, menú, establecer propiedades de controles, 63–64

Formato, nodo (cuadro de diálogo Opciones, fi cha HTML), 81

formularios, Inicio de sesión, 195FormView, control, 156, 169Función, opción, 192, 194funciones, declaración Public, 92

GGenerador de estilos, cuadro de diálogo, 108General, grupo de controles (Cuadro de

herramientas), 56General, nodo (cuadro de diálogo Opciones, fi cha

HTML), 81Generar sitio Web, comando (menú Generar), 83Generar, comandos de menú, Generar sitio Web,

83GenericWebPart, control, 202, 208–209GridView, control, 63, 156

actualizar registros, 166confi gurar, 157–161, 167–168crear página Web con GridView, 158–159eliminar registros, 166orígenes de datos, 150

HHabilitar edición, opción, 168Habilitar eliminación, opción 168Habilitar inserción, opción, 169Habilitar ordenación, confi guración, 160Habilitar paginación, confi guración, 160Habilitar selección, opción, 168HeaderText, propiedad 161Herramienta Administración de sitios Web,

página 184Hipervínculo, cuadro de diálogo, 66hipervínculos

agregar a páginas Web, 65–66sitios Web, 131–133, 133–136

hojas de estilos compartidas (CSS), 109–114agregar propiedades a reglas de hoja de

estilos, 112agregar temas, 119–120aplicar a páginas Web, 113–114crear nuevos archivos, 109crear reglas de hoja de estilos, 109–112

Hojas de estilos en cascada. Véase CSSHorizontalAlign, confi guración, 161HorizontalAlign, propiedad (control DetailsView),

170Hosters Providing ASP.NET, página, 5HTML (Lenguaje de marcado de hipertexto), 2

controles de servidor, 20etiquetas, 14

HTML, grupo de controles (Cuadro de herramientas), 56

HtmlTable, control de servidor, 17HtmlTableRow, control de servidor, 17

IICssClass, confi guración, 161Id. de usuario, parámetro (cadenas de conexión),

179Id. de usuario, parámetro 181id=, atributo (controles de servidor), 14IIS (Servicios de Internet Information Server), 24

alinear aplicaciones, 24aplicaciones, 24

información de encabezado, modifi cación, páginas principales, 106

Inherits, atributo (directiva @ Page), 83Inicio de sesión anónimo, campo (cuadro de

diálogo Seleccionar ubicación), 33inicio de sesión, formulario, 195Inicio de sesión, grupo de controles (Cuadro de

herramientas), 56inicios de sesión, 184–185

Cuentas de SQL Server, 185Cuentas de Windows, 184–185

Insertar tabla, comando (menú Diseño), 57, 64Insertar tabla, cuadro de diálogo, 57Insertar, comando (menú Diseño), 64



instalaciónarchivos de ejemplo, 8–8Microsoft Visual Web Developer 2005 Express,

6Instancia de usuario, parámetro, 181instancias

instancias de servidor, 182instancias de usuario, 183–184nombres, 140, 182

instancias de servidor, 182instancias de usuario, 183–184instancias secundarias. Véase instancias de usuarioInstrucción Select, cuadro de diálogo, 152–153,

167–168IntelliSense

confi gurar procesamiento, 75editor de texto de código fuente, 73–76

IntelliSense, comando (menú Edición), 75interfaz de usuario, 8–11Ir a, comando (menú Edición), editor de texto de

código fuente, 72ISO, archivos de imagen, 7–6ISObuster, 7ISORecorder, 7ItemStyle

HorizontalAlign, propiedad, 161VerticalAlign, propiedad, 161

Jjerarquía de controles, entrega de páginas

Web, 16

Lldf, archivos, 142Lenguaje de marcado de hipertexto. Véase HTML

(Lenguaje de marcado de hipertexto)Lenguaje de marcado extensible. Véase XML

(Lenguaje de marcado extensible)Lenguaje, entrada (página Agregar nuevo

elemento), 52, 86, 97lista de tareas, editor de texto de código fuente,

72–73Lista de tareas, ventana, 72

litBannerTitle, control de servidor Literal, 98–98litBannerTitle, control, 99Literal, control, 212locales, sitios Web de IIS, 25, 27–29

abrir, 38–39Login, control, 10login.aspx, 194LoginName, control, 194–195LoginStatus, control, 194–195LoginView, control, 194

Mmapas de sitios, 1Marcador en todo, comando (comando Buscar y

reemplazar), 78Marcadores, comando (menú Edición), 72marcadores, editor de texto de código fuente, 72máscaras con nombre, 118máscaras predeterminadas, 118máscaras, agregar a temas, 116–119MasterPageFile=, atributo, 105mdf, archivos, 142menús

desplegables, vincular páginas de sitios Web, 131–133

emergentes, vincular páginas de sitios Web, 131–133

vista de árbol, vincular páginas de sitios Web, 133–134

menús de vista de árbol, vincular páginas de sitios Web, 133–134

menús desplegables, vincular páginas de sitios Web, 131–133

menús emergentes, 1, 131–133Microsoft MSDN Express Library 2005, 7Microsoft SQL Server 2005 Express Edition 7Microsoft Visual J# Redistributable 2.0, 7Microsoft Visual Web Developer 2005 Express

aplicaciones, 3–4código fuente, editor de texto, 82frente a otros productos, 3–4instalación, 6reglas de estilo CSS, 114sitios Web accesibles mediante FTP, 32–33

sitios Web de IIS locales, 28sitios Web de IIS remotos, 30–31sitios Web de sistema de archivos, 26

Minimizar, opción, 202modelo de programación, ASP.NET 2.0, 13modifi caciones

información de encabezado, páginas principales, 106

páginas Web, 54–58, 58–65, 65–66modo Diseño, 204Modo pasivo, campo (cuadro de diálogo

Seleccionar ubicación), 33modos de edición, páginas Web

vista Código fuente, 54vista Diseño, 53

mostrarelementos Web, 201, 202–207, 212–216información de base de datos, 149, 150–151,

162Mostrar etiqueta inteligente, comando (menús

contextuales de controles), 62mostrar, información de base de datos, controles

enlazados a datos, 155–156mouse, establecer propiedades de controles,

61–63

NNero, 7Network Library, parámetro Net, 180Nombre de usuario y contraseña, campo (cuadro

de diálogo Seleccionar ubicación), 33Nombre del servidor, confi guración, 185Nombre, confi guración (cuadro de diálogo

Instrucción Select), 152Nombre, entrada (página Agregar nuevo

elemento), 52, 86, 97nombres

instancia, 140instancias, 182–182

Nuevo archivo, comando (menú Archivo), 52, 86Nuevo elemento, cuadro de diálogo, plantilla

Mapa del sitio, 26Nuevo sitio Web, cuadro de diálogo, 26


Índice 229

OObjectDataSource, control de origen de datos,

151ocultar, opciones de menú, 197–199ODBC, 177OLE DB, 177, 180OnInit, evento de control de servidor, 18OnLoad, evento de control de servidor, 18OnPreRender, evento de control de servidor, 18OnSelectedIndexChanged, atributo (controles de

servidor), 22OnUnload, evento de control de servidor, 18opciones de menú, ocultar, 197–199Opciones específi cas de etiqueta, cuadro de

diálogo 81Opciones, comando (menú Herramientas), 69Opciones, cuadro de diálogo, 36Operador, valor (cuadro de diálogo Agregar

cláusula Where), 158ORDER BY, confi guración (cuadro de diálogo

Instrucción Select), 153Origen de datos, parámetro (cadenas de

conexión), 179Origen, valor (cuadro de diálogo Agregar cláusula

Where), 158orígenes de datos, 149, 150–151

confi gurar, 151–155control GridView, 150controles, 151

PPage, control de servidor, 16PageCatalogPart, control, 211Página de inicio, 6páginas de contenido, 96

aplicar páginas principales a, 100–102páginas de elementos Web en blanco, crear, 209páginas principales, 1, 10

aplicaciones, 103–106aplicar a páginas de contenido, 100–102crear, 96–100

páginas Webabrir, 53agregar controles de usuario, 88–89

aplicar temas a, 120–123crear, 53entregar, 14–19establecer propiedades de controles, 58–65GridView, crear, 158–159modifi caciones, 54–58, 65–66modos de edición, 53–54

parámetros, cadenas de conexión, 179–181PasswordRecovery, control, 194, 196–197perfi les, 203personalización, sitios Web, 1plantillas (página Agregar nuevo elemento), 52,

97Posición, comando (menú Diseño), 64probar, requisitos, 4–5producción, sitio Web, requisitos, 5ProductAdd.aspx, página, crear con el control

DetailsView, 169ProductId, campo (tabla Products), 145ProductName, campo (tabla Products), 145ProductPrice, campo (tabla Products), 145Products, tabla (base de datos ContosoMagic)

campos, 145crear, 143–145

propiedadesagregar a reglas de hoja de estilos (CSS), 112BoundField, 161control DetailsView, 170control DropDownList, 155–156controles de menú, 132

Propiedades, comando (menús contextuales de controles), 63

Propiedades, cuadro de diálogo, 42Propiedades, marco, 9Propiedades, ventana, establecer propiedades de

controles, 58–61proveedor de autenticación, confi gurar, 186–187proveedores de alojamiento, 5–6proveedores, sitio Web público, 5–6Proyectos recientes, comando (menú Archivo), 36publicar

bases de datos, 174–175código de programa, 82–83confi guración de seguridad, 199–200

público, sitio Web, requisitos, 5

Puerto del servidor, confi guración, 185Puerto, campo (cuadro de diálogo Seleccionar

ubicación), 32

QQuitar división, comando (menú Ventana), 71

Rrastros, vincular páginas de sitios Web, 134–136recursos

ASP.NET 2.0, 3C#, 3–3SQL Server Express, 3Visual Basic .NET, 3

red, bases de datos, 176Reemplazar en archivos, comando (comando

Buscar y reemplazar), 79reemplazar texto, editor de texto de código

fuente, 77–79Reemplazar todo, comando (comando Buscar y

reemplazar), 79–79Reemplazar, comando (comando Buscar y

reemplazar), 79Reemplazo rápido, comando (comando Buscar y

reemplazar), 79registros, 1

actualizar, 166agregar, control DetailsView, 169–171eliminar, 166

reglas de hoja de estilos (CSS), agregar propiedades a, 112

reglas, acceso, 191–192Render, método, controles de servidor, 15–16Repeater, control, 156requisitos

probar, 4–5sitio Web de producción, 5

Resultados, panel, 148rowPlentyDetail, control de servidor, 17rowPlentyHeading, control de servidor, 17Roxio, 7runat=”server”, atributo (controles de servidor),

15



SSeguridad integrada, parámetro Trusted_

Connection, 181seguridad. Véase también acceso

confi gurar, 184–193, 199–200publicar confi guraciones, 199–200

selección de archivos, copiar sitios Web, 47–49Seleccionar la página principal, entrada (página

Agregar nuevo elemento), 53Seleccionar método de acceso, página

Desde Internet, opción, 188Desde una red de área local, opción, 188

Seleccionar todo, comando (cuadro de diálogo Copiar Web, menús contextuales de carpetas), 47

Seleccionar ubicación, cuadro de diálogo, 29Seleccionar, comando (menú Diseño), 64Seleccionar, opción, 166Selector de clases (nombres de estilos CSS), 110Selector de Id. (nombres de estilos CSS), 110Selector de tipo (nombres de estilos CSS), 110selectores, reglas de estilo (CSS), 109–110Servicios de Internet Information Server. Véase IISServidor de desarrollo (ASP.NET), 24–24Servidor, campo (cuadro de diálogo Seleccionar

ubicación), 32servidores, sitios Web, 24Sincronizar archivos seleccionados, comando

(cuadro de diálogo Copiar Web, menús contextuales de carpetas), 48

Sincronizar sitio, comando (cuadro de diálogo Copiar Web, menús contextuales de carpetas), 48

siteMap, etiqueta, 127SiteMapDataSource, control de origen de datos,

10, 151siteMapNode, etiqueta, 127SiteMapPath, control, 10, 134–136sitios Web

abrir, 37–43agregar controles de inicio de sesión, 193–197aplicar temas a, 120–123Contoso Magic, formulario de inicio de sesión,

196copia de producción, 24

copia de trabajo, 24copiar, 45–49crear, 23–33hipervínculos, 133–136personalización, 1requisitos de la carpeta raíz, 38seguridad, confi gurar, 184–193selección del proveedor, 5–6servidores, 24

sitios Web accesibles mediante FTP, 25, 31–33abrir, 39–40

sitios Web de origen, especifi car al copiar sitios Web, 46–47

sitios Web de sistema de archivos, 25–26abrir, 37–38ventajas e inconvenientes, 25

sitios Web existentes, abrir, 35sitios Web remotos, 29–31

abrir, 40–43especifi car al copiar sitios Web, 46–47

sitios Web usados recientemente, abrir, 36sitios Web, crear, sitios Web de IIS locales, 25Sleeve Trick, página, crear, 207–216

cards.ascx, control, 207–209SMTP

bloquear correo no deseado, 186confi gurar opciones de correo electrónico,

185–186SQL Server

bases de datos, 140–143, 174–175, 184. Véase ContosoMagic, base de datos

compartir copias, 182conectar con, 175cuentas, 185Visual Web Developer, 185–186

SQL Server Express, 185–186, 137recursos, 3

SQL, panel, 147–148src=, atributo (controles de servidor), 15System.Data.SqlClient 176–177

Ttablas

actualizar contenido, 146–148agregar a páginas Web, 57

bases de datos, modifi car, 143–145ContosoMagic, base de datos, Products,

143–145Diseñador de tablas, 144ver contenido, 146–148

Tabulaciones, nodo (cuadro de diálogo Opciones, fi cha HTML), 81

tblPlenty, control de servidor, 17temas, 119

agregar hojas de estilos CSS, 119–120agregar máscaras, 116–119aplicar a páginas y sitios Web, 120–123crear, 116

textobuscar, editor de texto de código fuente,

77–79reemplazar, editor de texto de código fuente,

77–79Todos los usuarios, opción, 192TreeView, control, 134

UUserName, control, 10Usuario, opción, 192Usuarios anónimos, opción, 192Utilizar autenticación de SQL Server, opción 140Utilizar autenticación de Windows, opción, 140

VValidación, grupo de controles (Cuadro de

herramientas), 56Validación, nodo (cuadro de diálogo Opciones, fi cha HTML), 81

Valor, valor (cuadro de diálogo Agregar cláusula Where), 158

variables, declaración Public, 92Varios, nodo (cuadro de diálogo Opciones, fi cha

HTML), 81Ver, comandos del menú

Barras de herramientas, Edición de código fuente HTML, 77

Esquema del documento, 60vincular páginas de sitios Web, 136

archivos de mapa del sitio, 126


Índice 231

menús de vista de árbol, 133–134menús desplegables, 131–133menús emergentes, 131–133rastros, 134–136

Vista Código fuente (páginas Web), 54Vista Diseño (páginas Web), 53vista dividida, editor de texto de código fuente,

71vistas, tablas, 146–148Visual Basic .NET, recursos, 3Visual Studio, compatibilidad con bases de datos,

140–141Visual Web Developer 2005 Express, 137–137

código fuente, editor de texto, 82frente a otros productos, 3–4instalación, 3–4, 6sitios Web accesibles mediante FTP, 32–33sitios Web de IIS locales, 28sitios Web de IIS remotos, 30–31sitios Web de sistema de archivos, 26

Visual Web Developer, SQL Server, 185–186

Wweb.confi g, archivo, copiar, 48WebPartManager, control, 202, 204, 210, 211–216

propiedad DisplayMode, 212–216WebPartZone, control, 202–210Where, confi guración (cuadro de diálogo

Instrucción Select), 153

XXML (Lenguaje de marcado extensible), 2XmlDataSource, control de origen de datos, 151

Zzonas de catálogo, agregar a páginas de

elementos Web, 211zonas de editor, agregar a páginas de elementos

Web, 211zonas, agregar a páginas de elementos Web,

210–211


Manual de Introducci%F3n a Visual Web Developer 2005 Express.updated

Documents

Transcript of Manual de Introducci%F3n a Visual Web Developer 2005 Express.updated