Para enviar correo electrónico desde una aplicación Web ASP.NET es necesario tener instalado y configurado en el servidor el servicio SMTP (Protocolo simple de transferencia de correo) de Servicios de Internet Information Server (IIS). El servicio SMTP de IIS es un componente simple para reenviar los mensajes de correo electrónico a un servidor SMTP para su entrega.
Instalar el servicio SMTP
El servicio SMTP no se instala con IIS de manera predeterminada. Debe instalarlo desde el Panel de control. Al instalar el servicio SMTP se crea una configuración de SMTP predeterminada que después se puede personalizar con el Administrador IIS.
Para instalar el servicio SMTP en IIS 6.0
1. En el menú Inicio, haga clic en Panel de control, haga doble clic en Agregar o quitar programas y, a continuación, haga clic en Agregar o quitar componentes de Windows.
2. En la lista Componentes, haga clic en Servidor de aplicaciones y, a continuación, haga clic en Detalles.
3. En la lista Subcomponentes de Servidor de aplicaciones, haga clic en Servicios de Internet Information Server (IIS) y, a continuación, haga clic en Detalles.
4. En la lista Subcomponentes de Servicios de Internet Information Server (IIS), active la casilla de verificación Servicio SMTP y haga clic en Aceptar.
5. Haga clic en Siguiente. Si se solicita el CD de Windows o la ruta de acceso de instalación de red, siga las instrucciones.
6. Haga clic en Finalizar.
Cuando se instala el servicio SMTP, se crea una configuración de servidor SMTP predeterminada con un almacén de mensajes en C:\Inetpub\Mailroot.
Al configurar el servicio SMTP se pueden definir las opciones globales del servicio y de cada uno de los componentes del servidor virtual. El servicio SMTP de IIS sólo es un agente de retransmisión. Los mensajes de correo electrónico se reenvían, para su entrega, a un servidor SMTP.
Configurar el servidor virtual de SMTP
Al instalar el servicio SMTP, se creará un nuevo nodo en el Administrador IIS. Para configurar el servidor virtual SMTP debe iniciar el Administrador IIS. Para obtener más información, vea el tema "SMTP Administration" de la IIS Operations Guide.
NoteImportante
Debe iniciar una sesión como miembro del grupo Administradores en el equipo local para realizar el procedimiento (o procedimientos) siguientes, o debe haber delegado en la autoridad adecuada.
Para iniciar el Administrador de IIS desde el cuadro de diálogo Ejecutar
1. En el menú Inicio, haga clic en Ejecutar.
2. En el cuadro Abrir, escriba inetmgr y haga clic en Aceptar.
Para iniciar el Administrador de IIS desde la consola Servicios administrativos
1. En el menú Inicio, haga clic en Ejecutar. En la ventana de texto Ejecutar, escriba panel de control y, a continuación, haga clic en Aceptar.
2. En la ventana Panel de control, haga clic en Herramientas administrativas.
3. En la ventana Herramientas administrativas, haga clic en Servicios de Internet Information Server.
Configuración predeterminada
El servidor virtual SMTP predeterminado tiene la configuración predeterminada siguiente. Si crea un nuevo servidor virtual, puede establecer la configuración predeterminada mediante el asistente para el nuevo servidor virtual.
* Nombre: nombre del servidor virtual que aparece en el Administrador IIS. Este nombre se puede cambiar en el Administrador IIS. Simplemente haga clic con el botón secundario en el servidor virtual y, a continuación, haga clic en Cambiar nombre.
* Dirección IP/puerto TCP: Ninguna asignada/25. Puede utilizar la ficha General del cuadro de diálogo Propiedades avanzadas de servidor SMTP para cambiar esta configuración. Si cambia esta configuración, deberá especificar una combinación de dirección IP y puerto TCP que no esté siendo utilizada por ningún otro servidor virtual SMTP. El puerto TCP 25 es el puerto TCP predeterminado y recomendado. Varios servidores virtuales pueden utilizar el mismo puerto TCP, pero deben estar configurados con direcciones IP diferentes. Si no establece una combinación de dirección IP y puerto TCP única, el servidor virtual SMTP no se iniciará.
Dominio predeterminado: nombre de dominio que aparece en la ficha Nombre del equipo de Propiedades del sistema. El dominio predeterminado se utiliza para marcar los mensajes procedentes de direcciones que no tienen un dominio. Un servidor virtual SMTP puede tener sólo un dominio predeterminado y no se puede eliminar. Para cambiar el nombre del dominio predeterminado en el Administrador IIS, haga doble clic en el servidor virtual y, después, haga doble clic en Dominios. Haga clic con el botón secundario en el dominio local (o predeterminado) y haga clic en Cambiar nombre.
* Directorio principal: C:\Inetpub\Mailroot. El directorio principal es la raíz de los directorios de contenido SMTP y debe ser local respecto al equipo en el que se ejecuta el servicio SMTP.
martes, 26 de enero de 2010
Crear un sitio Web con suscripción e inicio de sesión de usuarios (Visual Studio)
Un requisito común para los sitios Web es permitir que sólo algunos miembros u otros usuarios autenticados puedan ver ciertas páginas. En ese caso, la aplicación debe pedir al usuario un nombre y contraseña. La aplicación también debe incluir una manera de ocultar información a los usuarios anónimos (usuarios que no hayan iniciado sesión). Este tutorial muestra cómo utilizar los controles ASP.NET y los servicios de suscripción de ASP.NET para crear una aplicación que realiza todas esas tareas. Para obtener más información, vea Introducción a la suscripción.
Las tareas ilustradas en este tutorial incluyen:
Configurar una aplicación para incluir los servicios de suscripción de ASP.NET y cómo definir a los usuarios.
Utilizar controles de inicio de sesión para obtener las credenciales del usuario y mostrar información a los usuarios que hayan iniciado sesión.
Proteger una o más paginas de la aplicación para que sólo puedan verlas los usuarios que han iniciado sesión.
Permitir que nuevos usuarios se registren en el sitio.
Permitir que los miembros cambien y restablezcan sus contraseñas.
Requisitos previos
Para poder completar este tutorial, necesitará:
Microsoft Visual Web Developer.
Servicios de Microsoft Internet Information Server (IIS) instalado localmente en el equipo.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior. Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, es posible que tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.
Tener acceso a un servidor de correo electrónico que pueda reenviar mensajes de correo electrónico. (No es necesario que el servidor reciba mensajes.) IIS incluye el servidor virtual SMTP predeterminado, un servidor de correo que es conveniente utilizar para este tutorial. Para obtener más información sobre cómo configurar el servidor, vea Cómo: Instalar y configurar servidores virtuales SMTP en IIS. Si está trabajando en una red de área local, compruebe con el administrador de la red los datos sobre el acceso a un servidor de correo electrónico.
Crear el sitio Web
Si ya ha creado un sitio Web en Microsoft Visual Studio (por ejemplo, trabajando con el tema Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección "Configurar la suscripción" del tutorial. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web local de IIS
Abra Visual Studio.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, seleccione Sitio Web ASP.NET.
En la lista Ubicación, haga clic en HTTP. Haga clic en Examinar.
Aparecerá el cuadro de diálogo Seleccionar ubicación.
Seleccione IIS local.
Abra Servidores Web locales.
Seleccione Sitio Web predeterminado.
Haga clic en el icono Crear nueva aplicación Web () que se encuentra sobre la lista de sitios Web y, a continuación, asigne el nombre membership al nuevo sitio Web.
Haga clic en Abrir.
Se cerrará el cuadro de diálogo Seleccionar ubicación.
En el cuadro Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, sin embargo, también puede establecer el lenguaje de programación en cada página de forma individual.
Haga clic en Aceptar en el cuadro de diálogo Nuevo sitio Web.
Visual Web Developer crea el sitio Web y una nueva página denominada Default.aspx.
Configurar la suscripción
Más adelante en este tutorial colocará páginas en un subdirectorio protegido. Ahora debe crear el subdirectorio para que pueda configurar después su seguridad en el tutorial.
Para agregar una nueva carpeta al sitio Web
En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el nombre del sitio Web y haga clic en Nueva carpeta.
Asigne el nombre MemberPages a la carpeta.
Antes de trabajar con la suscripción de ASP.NET, debe configurar la aplicación para habilitar la suscripción y configurar los usuarios. Puede utilizar la herramienta Administración de sitios Web, que proporciona una interfaz parecida a un asistente para establecer opciones de configuración.
Para este tutorial, definirá un usuario único.
Para crear un usuario suscrito
En el menú Sitio Web, haga clic en Configuración de ASP.NET.
Seleccione la ficha Seguridad, haga clic en el vínculo a Usar el asistente de configuración de seguridad para definir la seguridad paso a paso y, a continuación, haga clic en Siguiente.
Continúe con el paso 2 del asistente y seleccione la opción Desde Internet.
El asistente muestra una página donde puede seleccionar el método de autenticación que el sitio Web utilizará. Esta opción especifica que la aplicación utilizará la autenticación de formularios, en la cual los usuarios inician sesión en la aplicación con una página de inicio de sesión que crearemos más adelante en el tutorial.
Haga clic en Siguiente.
El asistente muestra un mensaje que indica que la información del usuario se almacenará utilizando Configuración de proveedores avanzada. De forma predeterminada, la información de suscripción se almacena en un archivo de base de datos de Microsoft SQL Server Express en la carpeta App_Data del sitio Web.
Haga clic en Siguiente.
El asistente muestra una opción para crear funciones. Este paso se realizará de forma independiente más adelante en el tutorial. Por consiguiente, no active la casilla de verificación Habilitar funciones para este sitio Web.
Haga clic en Siguiente.
El asistente muestra una página donde puede crear nuevos usuarios.
Escriba información que defina a un usuario de la aplicación. Utilice los valores siguientes como directrices (puede utilizar los valores que desee, pero anote la información que introduzca para utilizarla posteriormente en el tutorial):
Nombre de usuario Su nombre (sin espacios) o un nombre de ejemplo.
Contraseña Una contraseña. Se requiere una contraseña segura (una que incluya mayúsculas y minúsculas, signos de puntuación y tenga al menos ocho caracteres).
Correo electrónico Su dirección de correo electrónico personal. Más adelante en el tutorial se enviará a sí mismo un mensaje de correo electrónico, por lo que necesita una dirección de correo electrónico válida.
Pregunta de seguridad y Respuesta de seguridad Escriba una pregunta y respuesta que pueda utilizar después si necesita recuperar su contraseña.
Haga clic en Create User.
El asistente muestra una página de confirmación.
Nota
Deje abierta la herramienta Administración de sitios Web.
Anteriormente en el tutorial creó una carpeta denominada MemberPages. En esta parte del tutorial, creará una regla que se asegura de que sólo usuarios que han iniciado sesión puedan tener acceso a las páginas de esa carpeta.
Para configurar reglas de acceso para el subdirectorio MemberPages
En el asistente, haga clic en Siguiente.
El asistente muestra una página que permite crear reglas de acceso.
En el cuadro Agregar nueva regla de acceso, expanda el nodo correspondiente a su sitio Web.
Seleccione la carpeta MemberPages que creó anteriormente.
En La regla se aplica a, seleccione Usuarios anónimos.
En Permisos, seleccione Denegar.
La regla que está creando deniega el acceso a los usuarios anónimos, es decir, a aquellos que no han iniciado sesión.
Haga clic en Agregar esta regla.
La nueva regla se muestra abajo en la cuadrícula. Cuando los usuarios solicitan una página del subdirectorio MemberPages, se comprueban las reglas para determinar si se permite el acceso del usuario a la página.
Haga clic en Finalizar.
Ya ha terminado de trabajar con el asistente. El asistente se cierra y vuelve a la ficha Seguridad de la herramienta Administración de sitios Web.
Configurar la aplicación para el correo electrónico
En una parte de este tutorial, la aplicación necesita poder enviar mensajes de correo electrónico. Para enviar mensajes, la aplicación debe tener acceso a un servidor de Protocolo simple de transferencia de correo (SMTP), que reenvía los mensajes de correo electrónico desde la aplicación a un destinatario de correo.
IIS incluye el servidor virtual SMTP predeterminado como un componente opcional, que es conveniente para este tutorial. Para obtener más información sobre cómo configurar el servidor, vea Cómo: Instalar y configurar servidores virtuales SMTP en IIS. Si está trabajando en una red de área local, compruebe con el administrador de la red los datos sobre el acceso a un servidor de correo electrónico.
Después de configurar el acceso a un servidor SMTP o averiguar cómo tener acceso a él, configure la aplicación para que enrute los mensajes de correo electrónico a ese servidor. Para hacerlo, escriba en el archivo Web.config del sitio Web una entrada que contenga una serie de opciones que determinan cómo se ejecuta la aplicación.
Para configurar la aplicación para utilizar un servidor SMTP concreto
En la herramienta Administración de sitios Web, haga clic en la ficha Aplicación.
En Configuración SMTP, haga clic en Definir configuración de correo electrónico SMTP.
La herramienta muestra una página donde puede configurar el correo electrónico.
Si el servidor SMTP que utiliza está en su equipo, escriba localhost como Nombre del servidor; de lo contrario, escriba el nombre de servidor apropiado.
Incluya información de número de puerto y autenticación según los requisitos de su servidor SMTP. Consulte al administrador para obtener más información sobre cómo definir esta configuración.
En el cuadro Desde, escriba una dirección de correo electrónico válida.
Haga clic en Guardar y, en la página de confirmación, haga clic en Aceptar.
La herramienta Administración de sitios Web crea un archivo Web.config (si aún no existiera) con la configuración que ha realizado.
Nota
El archivo Web.config no aparecerá en el Explorador de soluciones hasta que actualice la vista.
Cierre la herramienta Administración de sitios Web.
Registrar al usuario
Como parte de la aplicación, tiene que establecer la identidad del usuario para que la aplicación pueda realizar acciones, como mostrar u ocultar información, basándose en quién es el usuario. Para obtener la identidad del usuario, dispone de los datos de inicio de sesión del usuario.
En este tutorial, agregará a la página principal un vínculo que lleva a los usuarios a una página de inicio de sesión y, a continuación, creará la página de inicio de sesión.
Para crear una página principal con un botón de inicio de sesión
Cambie a la página Default.aspx del sitio o ábrala. (Si no tiene una página Default.aspx, puede agregar una o utilizar una página diferente.)
Cambie a la vista Diseño.
Escriba texto estático como Welcome to our site y, en la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control LoginStatus desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
De forma predeterminada, el control LoginStatus se representa como un vínculo. Cuando los usuarios hacen clic en él, la aplicación muestra una página de inicio de sesión. Ahora puede crear la página de inicio de sesión.
Para crear una página de inicio de sesión
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la aplicación Web y seleccione Agregar nuevo elemento. Agregue al sitio un formulario Web Forms denominado Login.aspx.
Nota
Para este tutorial, la página se debe denominar Login.aspx. De forma predeterminada, la autenticación de formularios se configura para funcionar con una página que tiene este nombre. Aunque no lo haga en este tutorial, puede cambiar la página de inicio de sesión predeterminada (la página a la que se redirige a los usuarios) en el archivo Web.config.
En la página Login.aspx, cambie a la vista Diseño.
Arrastre un control Login desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
El control Login es un control único que pedirá al usuario las credenciales y las validará.
Mostrar errores de inicio de sesión
El control Login incluye la validación para ayudar a los usuarios a escribir la información correcta. Por ejemplo, si un usuario omite la contraseña, un control de validación muestra un asterisco (*) junto al cuadro Contraseña. Puede proporcionar información más completa para los errores de inicio de sesión si agrega un control ValidationSummary a la página.
Para mostrar errores de inicio de sesión detallados
Arrastre un control ValidationSummary desde el grupo Validación del Cuadro de herramientas hasta la página.
En la ventana Propiedades del control ValidationSummary, establezca la propiedad ValidationGroup en Login1, que es el identificador predeterminado del control Login que agregó anteriormente.
Mostrar información para usuarios que han iniciado sesión
A continuación modificará la página principal para personalizar la presentación dependiendo de si el usuario está registrado. Los usuarios anónimos verán un mensaje genérico que les invita a iniciar sesión. Los usuarios registrados verán un mensaje que les da la bienvenida por su nombre registrado.
Para personalizar la presentación para los usuarios que inician sesión
Abra o cambie a la página Default.aspx.
Arrastre un control LoginView desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
El control LoginView se muestra con su plantilla AnonymousTemplate abierta. Esta plantilla permite definir el contenido que los usuarios verán antes de haber iniciado sesión.
Haga clic en el área de edición del control LoginView para activar la edición.
En el área de edición de la plantilla AnonymousTemplate del control LoginView, escriba You are not logged in. Click the Login link to sign in.
En el panel Tareas de LoginView, en la lista Vistas, haga clic en LoggedInTemplate. Si no se muestra el panel Tareas de LoginView, haga clic con el botón secundario del mouse en el encabezado del control LoginView y seleccione Mostrar etiqueta inteligente.
Ahora va a definir el contenido que se mostrará a los usuarios que ya han iniciado sesión.
Haga clic en el área de edición del control LoginView para activar la edición y, a continuación, escriba You are logged in. Welcome.
Arrastre un control LoginName desde el grupo Inicio de sesión del Cuadro de herramientas hasta la plantilla situada después del texto.
Probar el inicio de sesión
Ahora puede probar la función de inicio de sesión de la aplicación.
Para probar el inicio de sesión
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Default.aspx y seleccione Establecer como página de inicio.
Esto configura el sitio Web para que cuando se ejecute, la página Default.aspx aparezca primero.
Presione CTRL+F5 para ejecutar el sitio Web.
Aparece en el explorador la página principal (Default.aspx), que muestra el vínculo Inicio de sesión y el mensaje genérico.
Haga clic en el vínculo Inicio de sesión.
Se muestra la página de inicio de sesión que creó.
Escriba el nombre de inicio de sesión del usuario que creó anteriormente en el tutorial y, a continuación, haga clic en Iniciar sesión. (No escriba todavía una contraseña.)
Se muestra un asterisco (*) junto al cuadro Contraseña y un mensaje de error en el control ValidationSummary.
Escriba un nombre de usuario y contraseña y, a continuación, haga clic en Iniciar sesión.
Si ha escrito las credenciales correctas, volverá a la página principal. La página ahora muestra un vínculo Cerrar sesión para cerrar la sesión, su nombre de usuario y el mensaje de bienvenida que definió para el usuario registrado.
Cierre el explorador.
Limitar el acceso a páginas sólo a los miembros
Una tarea típica en muchos sitios Web es configurar las páginas para que sólo los usuarios que han iniciado sesión puedan ver las páginas. Anteriormente en el tutorial, creó el subdirectorio MemberPages y una regla que limita el acceso a las páginas del subdirectorio. En esta sección del tutorial, agregará una página al subdirectorio protegido y probará la regla de acceso.
Para crear la página sólo para miembros
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta MemberPages, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado Members.aspx.
Nota
Asegúrese de crear la página en la carpeta MemberPages.
En la vista Diseño, agregue texto a la página, por ejemplo Ésta es la página para usuarios suscritos. El texto exacto no importa, con tal de que pueda reconocer esta página cuando aparezca en el explorador.
Ahora puede agregar un vínculo a la página sólo para miembros desde la página principal. En una aplicación real, probablemente colocaría el vínculo de la página sólo para miembros en la plantilla de inicio de sesión del control LoginView. De esta forma, quienes visiten el sitio no podrán ver el vínculo hasta que hayan iniciado sesión. Sin embargo, en este tutorial el vínculo estará disponible para todos los usuarios a fin de que pueda observar el efecto de intentar ver una página sólo para miembros sin iniciar sesión antes.
Para agregar un vínculo a la página sólo para miembros
Cambie a la página Default.aspx o ábrala.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la página.
En la ventana Propiedades del control HyperLink, establezca la propiedad Text en Página de miembros y la propiedad NavigateUrl en ~/MemberPages/Members.aspx para señalar a la página que creó anteriormente.
Probar la página sólo para miembros
Puede probar la página sólo para miembros teniendo acceso a ella como un usuario anónimo y un usuario registrado.
Para probar la página sólo para miembros
Presione CTRL+F5 para ejecutar el sitio Web.
Cuando la página Default.aspx aparezca en el explorador, no inicie sesión. En su lugar, haga clic en el vínculo Página de miembros.
Se le redirige a la página Login.aspx porque el acceso a la página de miembros se deniega a los usuarios anónimos.
En la página de inicio de sesión, escriba el nombre de usuario y contraseña que utilizó anteriormente en el tutorial para iniciar sesión.
Se le redirige a la página Members.aspx porque el nombre de usuario con el que ha iniciado sesión tiene autorización de acceso a la página.
Cierre la ventana del explorador.
Crear nuevos usuarios
En la primera parte del tutorial, creó un usuario con la herramienta Administración de sitios Web. Esta estrategia es útil si se está trabajando con una lista de usuarios pequeña y definida; por ejemplo, si se crean usuarios para un pequeño grupo. Sin embargo, en muchos sitios Web los usuarios se pueden registrar por sí mismos. ASP.NET incluye el control CreateUserWizard, que realiza la misma tarea que realizamos anteriormente con la herramienta Administración de sitios Web.
En esta parte del tutorial, agregará una función que permite a los usuarios registrarse en su sitio Web. Para empezar, creará una página de registro.
Para crear una página de registro
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre de su sitio Web, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado Register.aspx.
Nota
Asegúrese de crear la página en la raíz del sitio Web, no en la carpeta MemberPages.
En la página Register.aspx, cambie a la vista Diseño y escriba texto estático como Registrar en la página. En la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control CreateUserWizard desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
En la ventana Propiedades correspondiente al control CreateUserWizard, establezca la propiedad ContinueDestinationPageUrl en ~/Default.aspx.
Esto configura el control de forma que vuelva a la página principal cuando los usuarios hacen clic en Continuar después de crear un usuario.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la página. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Home y la propiedad NavigateUrl en ~/Default.aspx.
Ahora puede agregar a la página principal un vínculo que muestra la página de registro. Para este tutorial, suponga que sólo desea mostrar el vínculo de registro a usuarios que no han iniciado sesión.
Para crear un vínculo de registro en la página principal
Abra o cambie a la página Default.aspx.
Haga clic con el botón secundario del mouse en el control LoginView que agregó anteriormente y seleccione Mostrar etiqueta inteligente. En el panel Tareas de LoginView, seleccione AnonymousTemplate en el cuadro de lista Vistas para activar la edición en la plantilla anónima.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la plantilla anónima. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Registrar y la propiedad NavigateUrl en Register.aspx. El vínculo Registrar sólo se mostrará a usuarios que no hayan iniciado sesión.
Ya puede probar el proceso de registro.
Para probar el registro
Presione CTRL+F5 para ejecutar el sitio Web y mostrar la página Default.aspx.
Dado que no ha iniciado sesión, se muestra la página que contiene el vínculo Registrar.
Haga clic en el vínculo Registrar.
Se muestra la página de registro.
En los cuadros de texto, escriba un nuevo nombre de usuario, una contraseña segura, una dirección de correo electrónico y una pregunta y respuesta de seguridad. (Se requieren los cinco datos.)
Haga clic en Create User.
Se muestra un mensaje de confirmación.
Haga clic en el botón Continuar.
Vuelve a la página principal como un usuario registrado. Observe que el vínculo Inicio de sesión ha cambiado a Cerrar sesión y que la información presentada en el control Login proviene de la propiedad LoggedInTemplate, no de la propiedad AnonymousTemplate.
Haga clic en el vínculo Cerrar sesión.
La página cambia para mostrar la información sobre usuarios anónimos.
Haga clic en el vínculo Inicio de sesión.
Escriba las credenciales para el usuario que acaba de crear.
Iniciará sesión como el nuevo usuario.
Cierre la ventana del explorador.
Cambiar las contraseñas
A veces, es posible que los usuarios deseen cambiar sus contraseñas y, a menudo, es imposible realizar manualmente esta tarea. En consecuencia, puede utilizar otro control ASP.NET para permitir a los usuarios cambiar las contraseñas por sí solos. Para cambiar una contraseña, los usuarios deben conocer su contraseña existente.
En este tutorial, agregará una página donde los usuarios registrados pueden cambiar su contraseña.
Para crear una página de cambio de la contraseña
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta MemberPages, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado ChangePassword.aspx.
Nota
Asegúrese de crear la página en la carpeta MemberPages.
Está colocando la página en la carpeta sólo para miembros porque únicamente los usuarios registrados pueden cambiar sus contraseñas.
En la página ChangePassword.aspx, cambie a la vista Diseño y escriba texto estático como Change Password. En la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control ChangePassword desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
En la ventana Propiedades correspondiente al control ChangePassword, establezca la propiedad ContinueDestinationPageUrl en ~/Default.aspx.
Esto configura el control de forma que vuelva a la página principal cuando los usuarios hacen clic en Continuar después de cambiar una contraseña.
Ahora puede agregar a la página principal un vínculo que muestra la página de cambio de contraseña. Hará que el vínculo esté disponible sólo para los usuarios que inicien sesión.
Para crear un vínculo de cambio de la contraseña en la página principal
Abra o cambie a la página Default.aspx.
Haga clic con el botón secundario del mouse en el control LoginView y, a continuación, haga clic en Mostrar etiqueta inteligente. En el menú Tareas de LoginView, en la lista Vistas, haga clic en LoggedInTemplate.
Esto cambia el control LoginView al modo de edición para el contenido que se mostrará a los usuarios que han iniciado sesión.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta el área de edición. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Cambiar contraseña y la propiedad NavigateUrl en ~/MemberPages/ChangePassword.aspx.
El vínculo Cambiar contraseña sólo se mostrará a los usuarios que hayan iniciado sesión. Este vínculo es lo opuesto al vínculo Registrar que creó anteriormente.
Ahora puede probar el proceso de cambio de la contraseña.
Para probar el cambio de la contraseña
Presione CTRL+F5 para ejecutar el sitio Web.
En la página Default.aspx, haga clic en el vínculo Inicio de sesión e inicie la sesión como uno de los usuarios que ha creado.
Cuando finalice, se le devuelve a la página principal como un usuario registrado.
Haga clic en el vínculo Cambiar contraseña.
En la página de cambio de la contraseña, escriba la contraseña anterior y una nueva contraseña y, a continuación, haga clic en Change Password.
Haga clic en Continuar.
En la página principal, haga clic en Cerrar sesión.
Haga clic en el vínculo Inicio de sesión.
Escriba la nueva contraseña.
Se inicia sesión con la nueva contraseña.
Cierre la ventana del explorador.
Recuperar una contraseña
A veces, los usuarios se olvidarán de sus contraseñas. Puede agregar una página de recuperación de contraseñas a su sitio Web para que puedan volver a iniciar sesión. La recuperación de contraseñas puede tener dos formas:
Puede enviar a los usuarios la contraseña que seleccionaron (o que creó para ellos cuando configuró el sitio). Esta opción requiere que el sitio almacene la contraseña utilizando cifrado reversible.
Puede enviar a los usuarios una nueva contraseña que pueden cambiar utilizando la página Change Password que creó anteriormente. Esta opción es útil si el sitio Web almacena contraseñas utilizando un esquema de cifrado no reversible como un algoritmo hash.
Nota
No se recomienda devolver una contraseña en texto no cifrado mediante correo electrónico para los sitios que requieren un nivel alto de seguridad. En el caso de sitios de alta seguridad, se recomienda devolver contraseñas utilizando cifrado, por ejemplo Capa de sockets seguros (SSL).
De forma predeterminada, el sistema de suscripciones de ASP.NET protege las contraseñas aplicándoles un algoritmo hash, lo cual significa que no se pueden recuperar. Por consiguiente, para esta parte del tutorial, su sitio Web enviará una nueva contraseña a los usuarios.
Nota
La recuperación de contraseñas requiere que el sitio Web pueda enviar mensajes de correo electrónico. Si no puede configurar el sitio Web para enviar correo electrónico (como se explicó en "Configurar la aplicación para el correo electrónico", anteriormente en este tutorial), no podrá agregar la recuperación de contraseñas a su sitio.
Para agregar la recuperación de contraseñas
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre de su sitio Web, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado RecoverPassword.aspx.
Nota
Asegúrese de crear la página en la raíz del sitio Web, no en la carpeta MemberPages.
En la página RecoverPassword.aspx, cambie a la vista Diseño y escriba texto estático como Reset my password to a new value. En la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control PasswordRecovery desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la página. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Home y la propiedad NavigateUrl en ~/Default.aspx.
Cambie a la página Default.aspx.
Haga clic con el botón secundario del mouse en el control LoginView y, a continuación, haga clic en Mostrar etiqueta inteligente. En el menú Tareas de LoginView, en la lista Vistas, haga clic en AnonymousTemplate.
Esto cambia el control LoginView al modo de edición para el contenido que se mostrará a los usuarios que no han iniciado sesión.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la plantilla. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Forgot your password? y la propiedad NavigateUrl en ~/RecoverPassword.aspx.
Ahora puede probar la recuperación de contraseñas.
Para probar la recuperación de contraseñas
Presione CTRL+F5 para ejecutar el sitio Web.
De forma predeterminada, no se inicia sesión, por lo que aparece la plantilla anónima del control LoginView.
Haga clic el vínculo Forgot your password?.
Aparece la página RecoverPassword.aspx.
Escriba su nombre de usuario y haga clic en Enviar.
Se muestra la pregunta de seguridad y se le solicita que escriba la respuesta de seguridad.
Escriba la respuesta y haga clic en Enviar.
Si escribe una respuesta correcta, el sitio Web restablece su contraseña y le envía un mensaje de correo electrónico con la nueva contraseña.
Pasos siguientes
Este tutorial ha mostrado un escenario sencillo pero completo para crear una aplicación que pide credenciales a los usuarios, muestra información a los usuarios que han iniciado sesión, permite a los usuarios recuperar una contraseña olvidada y limita el acceso a ciertas páginas. Puede crear páginas y aplicaciones más sofisticadas utilizando las técnicas y controles mostrados en el tutorial. Por ejemplo, podría:
Crear usuarios adicionales y definir funciones (grupos) como administradores, ventas o miembros, y asignar funciones diferentes a los usuarios. Para obtener información detallada, vea Tutorial: Administrar los usuarios de sitios Web con funciones.
Cambiar el proveedor de suscripciones del proveedor de Access predeterminado a un proveedor de SQL. El almacenamiento de información de suscripciones en una base de datos de Access es adecuado para sitios de tamaño pequeño o mediano, pero si el sitio va a tener mucho tráfico, es más conveniente utilizar Microsoft SQL Server como almacén de suscripciones. Para obtener más información, vea Herramienta Administración de sitios Web, Proveedor (Ficha) y Crear la base de datos de servicios de la aplicación para SQL Server.
Cambiar la apariencia de los controles de inicio de sesión. Los controles Login, PasswordRecovery y CreateUserWizard admiten plantillas que permiten configurar el texto y los botones que contienen o cambiar el color, la fuente y otras características de apariencia de los controles. Para obtener más información, vea los temas de la sección Controles ASP.NET de inicio de sesión.
Crear reglas que limitan el acceso a páginas o carpetas no sólo para los usuarios anónimos, sino para usuarios o funciones concretos.
Combinar la suscripción con propiedades de perfil que permiten almacenar la configuración específica de cada usuario. Para obtener información detallada, vea Tutorial: Mantener la información de usuarios de sitios Web con propiedades de perfil.
Combinar los controles de inicio de sesión con páginas principales. Las páginas principales permiten definir un diseño de página que se puede utilizar para todas las páginas de una aplicación. Para obtener información detallada, vea Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer.
Agregar la capacidad para recuperar una contraseña olvidada. Para obtener más información, vea Cómo: Habilitar la recuperación de contraseñas de usuario mediante el control PasswordRecovery de ASP.NET.
Las tareas ilustradas en este tutorial incluyen:
Configurar una aplicación para incluir los servicios de suscripción de ASP.NET y cómo definir a los usuarios.
Utilizar controles de inicio de sesión para obtener las credenciales del usuario y mostrar información a los usuarios que hayan iniciado sesión.
Proteger una o más paginas de la aplicación para que sólo puedan verlas los usuarios que han iniciado sesión.
Permitir que nuevos usuarios se registren en el sitio.
Permitir que los miembros cambien y restablezcan sus contraseñas.
Requisitos previos
Para poder completar este tutorial, necesitará:
Microsoft Visual Web Developer.
Servicios de Microsoft Internet Information Server (IIS) instalado localmente en el equipo.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior. Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, es posible que tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.
Tener acceso a un servidor de correo electrónico que pueda reenviar mensajes de correo electrónico. (No es necesario que el servidor reciba mensajes.) IIS incluye el servidor virtual SMTP predeterminado, un servidor de correo que es conveniente utilizar para este tutorial. Para obtener más información sobre cómo configurar el servidor, vea Cómo: Instalar y configurar servidores virtuales SMTP en IIS. Si está trabajando en una red de área local, compruebe con el administrador de la red los datos sobre el acceso a un servidor de correo electrónico.
Crear el sitio Web
Si ya ha creado un sitio Web en Microsoft Visual Studio (por ejemplo, trabajando con el tema Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección "Configurar la suscripción" del tutorial. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web local de IIS
Abra Visual Studio.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, seleccione Sitio Web ASP.NET.
En la lista Ubicación, haga clic en HTTP. Haga clic en Examinar.
Aparecerá el cuadro de diálogo Seleccionar ubicación.
Seleccione IIS local.
Abra Servidores Web locales.
Seleccione Sitio Web predeterminado.
Haga clic en el icono Crear nueva aplicación Web () que se encuentra sobre la lista de sitios Web y, a continuación, asigne el nombre membership al nuevo sitio Web.
Haga clic en Abrir.
Se cerrará el cuadro de diálogo Seleccionar ubicación.
En el cuadro Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, sin embargo, también puede establecer el lenguaje de programación en cada página de forma individual.
Haga clic en Aceptar en el cuadro de diálogo Nuevo sitio Web.
Visual Web Developer crea el sitio Web y una nueva página denominada Default.aspx.
Configurar la suscripción
Más adelante en este tutorial colocará páginas en un subdirectorio protegido. Ahora debe crear el subdirectorio para que pueda configurar después su seguridad en el tutorial.
Para agregar una nueva carpeta al sitio Web
En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el nombre del sitio Web y haga clic en Nueva carpeta.
Asigne el nombre MemberPages a la carpeta.
Antes de trabajar con la suscripción de ASP.NET, debe configurar la aplicación para habilitar la suscripción y configurar los usuarios. Puede utilizar la herramienta Administración de sitios Web, que proporciona una interfaz parecida a un asistente para establecer opciones de configuración.
Para este tutorial, definirá un usuario único.
Para crear un usuario suscrito
En el menú Sitio Web, haga clic en Configuración de ASP.NET.
Seleccione la ficha Seguridad, haga clic en el vínculo a Usar el asistente de configuración de seguridad para definir la seguridad paso a paso y, a continuación, haga clic en Siguiente.
Continúe con el paso 2 del asistente y seleccione la opción Desde Internet.
El asistente muestra una página donde puede seleccionar el método de autenticación que el sitio Web utilizará. Esta opción especifica que la aplicación utilizará la autenticación de formularios, en la cual los usuarios inician sesión en la aplicación con una página de inicio de sesión que crearemos más adelante en el tutorial.
Haga clic en Siguiente.
El asistente muestra un mensaje que indica que la información del usuario se almacenará utilizando Configuración de proveedores avanzada. De forma predeterminada, la información de suscripción se almacena en un archivo de base de datos de Microsoft SQL Server Express en la carpeta App_Data del sitio Web.
Haga clic en Siguiente.
El asistente muestra una opción para crear funciones. Este paso se realizará de forma independiente más adelante en el tutorial. Por consiguiente, no active la casilla de verificación Habilitar funciones para este sitio Web.
Haga clic en Siguiente.
El asistente muestra una página donde puede crear nuevos usuarios.
Escriba información que defina a un usuario de la aplicación. Utilice los valores siguientes como directrices (puede utilizar los valores que desee, pero anote la información que introduzca para utilizarla posteriormente en el tutorial):
Nombre de usuario Su nombre (sin espacios) o un nombre de ejemplo.
Contraseña Una contraseña. Se requiere una contraseña segura (una que incluya mayúsculas y minúsculas, signos de puntuación y tenga al menos ocho caracteres).
Correo electrónico Su dirección de correo electrónico personal. Más adelante en el tutorial se enviará a sí mismo un mensaje de correo electrónico, por lo que necesita una dirección de correo electrónico válida.
Pregunta de seguridad y Respuesta de seguridad Escriba una pregunta y respuesta que pueda utilizar después si necesita recuperar su contraseña.
Haga clic en Create User.
El asistente muestra una página de confirmación.
Nota
Deje abierta la herramienta Administración de sitios Web.
Anteriormente en el tutorial creó una carpeta denominada MemberPages. En esta parte del tutorial, creará una regla que se asegura de que sólo usuarios que han iniciado sesión puedan tener acceso a las páginas de esa carpeta.
Para configurar reglas de acceso para el subdirectorio MemberPages
En el asistente, haga clic en Siguiente.
El asistente muestra una página que permite crear reglas de acceso.
En el cuadro Agregar nueva regla de acceso, expanda el nodo correspondiente a su sitio Web.
Seleccione la carpeta MemberPages que creó anteriormente.
En La regla se aplica a, seleccione Usuarios anónimos.
En Permisos, seleccione Denegar.
La regla que está creando deniega el acceso a los usuarios anónimos, es decir, a aquellos que no han iniciado sesión.
Haga clic en Agregar esta regla.
La nueva regla se muestra abajo en la cuadrícula. Cuando los usuarios solicitan una página del subdirectorio MemberPages, se comprueban las reglas para determinar si se permite el acceso del usuario a la página.
Haga clic en Finalizar.
Ya ha terminado de trabajar con el asistente. El asistente se cierra y vuelve a la ficha Seguridad de la herramienta Administración de sitios Web.
Configurar la aplicación para el correo electrónico
En una parte de este tutorial, la aplicación necesita poder enviar mensajes de correo electrónico. Para enviar mensajes, la aplicación debe tener acceso a un servidor de Protocolo simple de transferencia de correo (SMTP), que reenvía los mensajes de correo electrónico desde la aplicación a un destinatario de correo.
IIS incluye el servidor virtual SMTP predeterminado como un componente opcional, que es conveniente para este tutorial. Para obtener más información sobre cómo configurar el servidor, vea Cómo: Instalar y configurar servidores virtuales SMTP en IIS. Si está trabajando en una red de área local, compruebe con el administrador de la red los datos sobre el acceso a un servidor de correo electrónico.
Después de configurar el acceso a un servidor SMTP o averiguar cómo tener acceso a él, configure la aplicación para que enrute los mensajes de correo electrónico a ese servidor. Para hacerlo, escriba en el archivo Web.config del sitio Web una entrada que contenga una serie de opciones que determinan cómo se ejecuta la aplicación.
Para configurar la aplicación para utilizar un servidor SMTP concreto
En la herramienta Administración de sitios Web, haga clic en la ficha Aplicación.
En Configuración SMTP, haga clic en Definir configuración de correo electrónico SMTP.
La herramienta muestra una página donde puede configurar el correo electrónico.
Si el servidor SMTP que utiliza está en su equipo, escriba localhost como Nombre del servidor; de lo contrario, escriba el nombre de servidor apropiado.
Incluya información de número de puerto y autenticación según los requisitos de su servidor SMTP. Consulte al administrador para obtener más información sobre cómo definir esta configuración.
En el cuadro Desde, escriba una dirección de correo electrónico válida.
Haga clic en Guardar y, en la página de confirmación, haga clic en Aceptar.
La herramienta Administración de sitios Web crea un archivo Web.config (si aún no existiera) con la configuración que ha realizado.
Nota
El archivo Web.config no aparecerá en el Explorador de soluciones hasta que actualice la vista.
Cierre la herramienta Administración de sitios Web.
Registrar al usuario
Como parte de la aplicación, tiene que establecer la identidad del usuario para que la aplicación pueda realizar acciones, como mostrar u ocultar información, basándose en quién es el usuario. Para obtener la identidad del usuario, dispone de los datos de inicio de sesión del usuario.
En este tutorial, agregará a la página principal un vínculo que lleva a los usuarios a una página de inicio de sesión y, a continuación, creará la página de inicio de sesión.
Para crear una página principal con un botón de inicio de sesión
Cambie a la página Default.aspx del sitio o ábrala. (Si no tiene una página Default.aspx, puede agregar una o utilizar una página diferente.)
Cambie a la vista Diseño.
Escriba texto estático como Welcome to our site y, en la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control LoginStatus desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
De forma predeterminada, el control LoginStatus se representa como un vínculo. Cuando los usuarios hacen clic en él, la aplicación muestra una página de inicio de sesión. Ahora puede crear la página de inicio de sesión.
Para crear una página de inicio de sesión
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la aplicación Web y seleccione Agregar nuevo elemento. Agregue al sitio un formulario Web Forms denominado Login.aspx.
Nota
Para este tutorial, la página se debe denominar Login.aspx. De forma predeterminada, la autenticación de formularios se configura para funcionar con una página que tiene este nombre. Aunque no lo haga en este tutorial, puede cambiar la página de inicio de sesión predeterminada (la página a la que se redirige a los usuarios) en el archivo Web.config.
En la página Login.aspx, cambie a la vista Diseño.
Arrastre un control Login desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
El control Login es un control único que pedirá al usuario las credenciales y las validará.
Mostrar errores de inicio de sesión
El control Login incluye la validación para ayudar a los usuarios a escribir la información correcta. Por ejemplo, si un usuario omite la contraseña, un control de validación muestra un asterisco (*) junto al cuadro Contraseña. Puede proporcionar información más completa para los errores de inicio de sesión si agrega un control ValidationSummary a la página.
Para mostrar errores de inicio de sesión detallados
Arrastre un control ValidationSummary desde el grupo Validación del Cuadro de herramientas hasta la página.
En la ventana Propiedades del control ValidationSummary, establezca la propiedad ValidationGroup en Login1, que es el identificador predeterminado del control Login que agregó anteriormente.
Mostrar información para usuarios que han iniciado sesión
A continuación modificará la página principal para personalizar la presentación dependiendo de si el usuario está registrado. Los usuarios anónimos verán un mensaje genérico que les invita a iniciar sesión. Los usuarios registrados verán un mensaje que les da la bienvenida por su nombre registrado.
Para personalizar la presentación para los usuarios que inician sesión
Abra o cambie a la página Default.aspx.
Arrastre un control LoginView desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
El control LoginView se muestra con su plantilla AnonymousTemplate abierta. Esta plantilla permite definir el contenido que los usuarios verán antes de haber iniciado sesión.
Haga clic en el área de edición del control LoginView para activar la edición.
En el área de edición de la plantilla AnonymousTemplate del control LoginView, escriba You are not logged in. Click the Login link to sign in.
En el panel Tareas de LoginView, en la lista Vistas, haga clic en LoggedInTemplate. Si no se muestra el panel Tareas de LoginView, haga clic con el botón secundario del mouse en el encabezado del control LoginView y seleccione Mostrar etiqueta inteligente.
Ahora va a definir el contenido que se mostrará a los usuarios que ya han iniciado sesión.
Haga clic en el área de edición del control LoginView para activar la edición y, a continuación, escriba You are logged in. Welcome.
Arrastre un control LoginName desde el grupo Inicio de sesión del Cuadro de herramientas hasta la plantilla situada después del texto.
Probar el inicio de sesión
Ahora puede probar la función de inicio de sesión de la aplicación.
Para probar el inicio de sesión
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Default.aspx y seleccione Establecer como página de inicio.
Esto configura el sitio Web para que cuando se ejecute, la página Default.aspx aparezca primero.
Presione CTRL+F5 para ejecutar el sitio Web.
Aparece en el explorador la página principal (Default.aspx), que muestra el vínculo Inicio de sesión y el mensaje genérico.
Haga clic en el vínculo Inicio de sesión.
Se muestra la página de inicio de sesión que creó.
Escriba el nombre de inicio de sesión del usuario que creó anteriormente en el tutorial y, a continuación, haga clic en Iniciar sesión. (No escriba todavía una contraseña.)
Se muestra un asterisco (*) junto al cuadro Contraseña y un mensaje de error en el control ValidationSummary.
Escriba un nombre de usuario y contraseña y, a continuación, haga clic en Iniciar sesión.
Si ha escrito las credenciales correctas, volverá a la página principal. La página ahora muestra un vínculo Cerrar sesión para cerrar la sesión, su nombre de usuario y el mensaje de bienvenida que definió para el usuario registrado.
Cierre el explorador.
Limitar el acceso a páginas sólo a los miembros
Una tarea típica en muchos sitios Web es configurar las páginas para que sólo los usuarios que han iniciado sesión puedan ver las páginas. Anteriormente en el tutorial, creó el subdirectorio MemberPages y una regla que limita el acceso a las páginas del subdirectorio. En esta sección del tutorial, agregará una página al subdirectorio protegido y probará la regla de acceso.
Para crear la página sólo para miembros
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta MemberPages, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado Members.aspx.
Nota
Asegúrese de crear la página en la carpeta MemberPages.
En la vista Diseño, agregue texto a la página, por ejemplo Ésta es la página para usuarios suscritos. El texto exacto no importa, con tal de que pueda reconocer esta página cuando aparezca en el explorador.
Ahora puede agregar un vínculo a la página sólo para miembros desde la página principal. En una aplicación real, probablemente colocaría el vínculo de la página sólo para miembros en la plantilla de inicio de sesión del control LoginView. De esta forma, quienes visiten el sitio no podrán ver el vínculo hasta que hayan iniciado sesión. Sin embargo, en este tutorial el vínculo estará disponible para todos los usuarios a fin de que pueda observar el efecto de intentar ver una página sólo para miembros sin iniciar sesión antes.
Para agregar un vínculo a la página sólo para miembros
Cambie a la página Default.aspx o ábrala.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la página.
En la ventana Propiedades del control HyperLink, establezca la propiedad Text en Página de miembros y la propiedad NavigateUrl en ~/MemberPages/Members.aspx para señalar a la página que creó anteriormente.
Probar la página sólo para miembros
Puede probar la página sólo para miembros teniendo acceso a ella como un usuario anónimo y un usuario registrado.
Para probar la página sólo para miembros
Presione CTRL+F5 para ejecutar el sitio Web.
Cuando la página Default.aspx aparezca en el explorador, no inicie sesión. En su lugar, haga clic en el vínculo Página de miembros.
Se le redirige a la página Login.aspx porque el acceso a la página de miembros se deniega a los usuarios anónimos.
En la página de inicio de sesión, escriba el nombre de usuario y contraseña que utilizó anteriormente en el tutorial para iniciar sesión.
Se le redirige a la página Members.aspx porque el nombre de usuario con el que ha iniciado sesión tiene autorización de acceso a la página.
Cierre la ventana del explorador.
Crear nuevos usuarios
En la primera parte del tutorial, creó un usuario con la herramienta Administración de sitios Web. Esta estrategia es útil si se está trabajando con una lista de usuarios pequeña y definida; por ejemplo, si se crean usuarios para un pequeño grupo. Sin embargo, en muchos sitios Web los usuarios se pueden registrar por sí mismos. ASP.NET incluye el control CreateUserWizard, que realiza la misma tarea que realizamos anteriormente con la herramienta Administración de sitios Web.
En esta parte del tutorial, agregará una función que permite a los usuarios registrarse en su sitio Web. Para empezar, creará una página de registro.
Para crear una página de registro
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre de su sitio Web, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado Register.aspx.
Nota
Asegúrese de crear la página en la raíz del sitio Web, no en la carpeta MemberPages.
En la página Register.aspx, cambie a la vista Diseño y escriba texto estático como Registrar en la página. En la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control CreateUserWizard desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
En la ventana Propiedades correspondiente al control CreateUserWizard, establezca la propiedad ContinueDestinationPageUrl en ~/Default.aspx.
Esto configura el control de forma que vuelva a la página principal cuando los usuarios hacen clic en Continuar después de crear un usuario.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la página. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Home y la propiedad NavigateUrl en ~/Default.aspx.
Ahora puede agregar a la página principal un vínculo que muestra la página de registro. Para este tutorial, suponga que sólo desea mostrar el vínculo de registro a usuarios que no han iniciado sesión.
Para crear un vínculo de registro en la página principal
Abra o cambie a la página Default.aspx.
Haga clic con el botón secundario del mouse en el control LoginView que agregó anteriormente y seleccione Mostrar etiqueta inteligente. En el panel Tareas de LoginView, seleccione AnonymousTemplate en el cuadro de lista Vistas para activar la edición en la plantilla anónima.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la plantilla anónima. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Registrar y la propiedad NavigateUrl en Register.aspx. El vínculo Registrar sólo se mostrará a usuarios que no hayan iniciado sesión.
Ya puede probar el proceso de registro.
Para probar el registro
Presione CTRL+F5 para ejecutar el sitio Web y mostrar la página Default.aspx.
Dado que no ha iniciado sesión, se muestra la página que contiene el vínculo Registrar.
Haga clic en el vínculo Registrar.
Se muestra la página de registro.
En los cuadros de texto, escriba un nuevo nombre de usuario, una contraseña segura, una dirección de correo electrónico y una pregunta y respuesta de seguridad. (Se requieren los cinco datos.)
Haga clic en Create User.
Se muestra un mensaje de confirmación.
Haga clic en el botón Continuar.
Vuelve a la página principal como un usuario registrado. Observe que el vínculo Inicio de sesión ha cambiado a Cerrar sesión y que la información presentada en el control Login proviene de la propiedad LoggedInTemplate, no de la propiedad AnonymousTemplate.
Haga clic en el vínculo Cerrar sesión.
La página cambia para mostrar la información sobre usuarios anónimos.
Haga clic en el vínculo Inicio de sesión.
Escriba las credenciales para el usuario que acaba de crear.
Iniciará sesión como el nuevo usuario.
Cierre la ventana del explorador.
Cambiar las contraseñas
A veces, es posible que los usuarios deseen cambiar sus contraseñas y, a menudo, es imposible realizar manualmente esta tarea. En consecuencia, puede utilizar otro control ASP.NET para permitir a los usuarios cambiar las contraseñas por sí solos. Para cambiar una contraseña, los usuarios deben conocer su contraseña existente.
En este tutorial, agregará una página donde los usuarios registrados pueden cambiar su contraseña.
Para crear una página de cambio de la contraseña
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta MemberPages, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado ChangePassword.aspx.
Nota
Asegúrese de crear la página en la carpeta MemberPages.
Está colocando la página en la carpeta sólo para miembros porque únicamente los usuarios registrados pueden cambiar sus contraseñas.
En la página ChangePassword.aspx, cambie a la vista Diseño y escriba texto estático como Change Password. En la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control ChangePassword desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
En la ventana Propiedades correspondiente al control ChangePassword, establezca la propiedad ContinueDestinationPageUrl en ~/Default.aspx.
Esto configura el control de forma que vuelva a la página principal cuando los usuarios hacen clic en Continuar después de cambiar una contraseña.
Ahora puede agregar a la página principal un vínculo que muestra la página de cambio de contraseña. Hará que el vínculo esté disponible sólo para los usuarios que inicien sesión.
Para crear un vínculo de cambio de la contraseña en la página principal
Abra o cambie a la página Default.aspx.
Haga clic con el botón secundario del mouse en el control LoginView y, a continuación, haga clic en Mostrar etiqueta inteligente. En el menú Tareas de LoginView, en la lista Vistas, haga clic en LoggedInTemplate.
Esto cambia el control LoginView al modo de edición para el contenido que se mostrará a los usuarios que han iniciado sesión.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta el área de edición. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Cambiar contraseña y la propiedad NavigateUrl en ~/MemberPages/ChangePassword.aspx.
El vínculo Cambiar contraseña sólo se mostrará a los usuarios que hayan iniciado sesión. Este vínculo es lo opuesto al vínculo Registrar que creó anteriormente.
Ahora puede probar el proceso de cambio de la contraseña.
Para probar el cambio de la contraseña
Presione CTRL+F5 para ejecutar el sitio Web.
En la página Default.aspx, haga clic en el vínculo Inicio de sesión e inicie la sesión como uno de los usuarios que ha creado.
Cuando finalice, se le devuelve a la página principal como un usuario registrado.
Haga clic en el vínculo Cambiar contraseña.
En la página de cambio de la contraseña, escriba la contraseña anterior y una nueva contraseña y, a continuación, haga clic en Change Password.
Haga clic en Continuar.
En la página principal, haga clic en Cerrar sesión.
Haga clic en el vínculo Inicio de sesión.
Escriba la nueva contraseña.
Se inicia sesión con la nueva contraseña.
Cierre la ventana del explorador.
Recuperar una contraseña
A veces, los usuarios se olvidarán de sus contraseñas. Puede agregar una página de recuperación de contraseñas a su sitio Web para que puedan volver a iniciar sesión. La recuperación de contraseñas puede tener dos formas:
Puede enviar a los usuarios la contraseña que seleccionaron (o que creó para ellos cuando configuró el sitio). Esta opción requiere que el sitio almacene la contraseña utilizando cifrado reversible.
Puede enviar a los usuarios una nueva contraseña que pueden cambiar utilizando la página Change Password que creó anteriormente. Esta opción es útil si el sitio Web almacena contraseñas utilizando un esquema de cifrado no reversible como un algoritmo hash.
Nota
No se recomienda devolver una contraseña en texto no cifrado mediante correo electrónico para los sitios que requieren un nivel alto de seguridad. En el caso de sitios de alta seguridad, se recomienda devolver contraseñas utilizando cifrado, por ejemplo Capa de sockets seguros (SSL).
De forma predeterminada, el sistema de suscripciones de ASP.NET protege las contraseñas aplicándoles un algoritmo hash, lo cual significa que no se pueden recuperar. Por consiguiente, para esta parte del tutorial, su sitio Web enviará una nueva contraseña a los usuarios.
Nota
La recuperación de contraseñas requiere que el sitio Web pueda enviar mensajes de correo electrónico. Si no puede configurar el sitio Web para enviar correo electrónico (como se explicó en "Configurar la aplicación para el correo electrónico", anteriormente en este tutorial), no podrá agregar la recuperación de contraseñas a su sitio.
Para agregar la recuperación de contraseñas
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre de su sitio Web, haga clic en Agregar nuevo elemento y agregue un nuevo formulario Web Forms denominado RecoverPassword.aspx.
Nota
Asegúrese de crear la página en la raíz del sitio Web, no en la carpeta MemberPages.
En la página RecoverPassword.aspx, cambie a la vista Diseño y escriba texto estático como Reset my password to a new value. En la barra de herramientas Formato, utilice la lista desplegable Formato del bloque para dar formato al texto como Encabezado 1.
Arrastre un control PasswordRecovery desde el grupo Inicio de sesión del Cuadro de herramientas hasta la página.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la página. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Home y la propiedad NavigateUrl en ~/Default.aspx.
Cambie a la página Default.aspx.
Haga clic con el botón secundario del mouse en el control LoginView y, a continuación, haga clic en Mostrar etiqueta inteligente. En el menú Tareas de LoginView, en la lista Vistas, haga clic en AnonymousTemplate.
Esto cambia el control LoginView al modo de edición para el contenido que se mostrará a los usuarios que no han iniciado sesión.
Arrastre un control HyperLink desde el grupo Estándar del Cuadro de herramientas hasta la plantilla. En la ventana Propiedades correspondiente al control HyperLink, establezca la propiedad Text en Forgot your password? y la propiedad NavigateUrl en ~/RecoverPassword.aspx.
Ahora puede probar la recuperación de contraseñas.
Para probar la recuperación de contraseñas
Presione CTRL+F5 para ejecutar el sitio Web.
De forma predeterminada, no se inicia sesión, por lo que aparece la plantilla anónima del control LoginView.
Haga clic el vínculo Forgot your password?.
Aparece la página RecoverPassword.aspx.
Escriba su nombre de usuario y haga clic en Enviar.
Se muestra la pregunta de seguridad y se le solicita que escriba la respuesta de seguridad.
Escriba la respuesta y haga clic en Enviar.
Si escribe una respuesta correcta, el sitio Web restablece su contraseña y le envía un mensaje de correo electrónico con la nueva contraseña.
Pasos siguientes
Este tutorial ha mostrado un escenario sencillo pero completo para crear una aplicación que pide credenciales a los usuarios, muestra información a los usuarios que han iniciado sesión, permite a los usuarios recuperar una contraseña olvidada y limita el acceso a ciertas páginas. Puede crear páginas y aplicaciones más sofisticadas utilizando las técnicas y controles mostrados en el tutorial. Por ejemplo, podría:
Crear usuarios adicionales y definir funciones (grupos) como administradores, ventas o miembros, y asignar funciones diferentes a los usuarios. Para obtener información detallada, vea Tutorial: Administrar los usuarios de sitios Web con funciones.
Cambiar el proveedor de suscripciones del proveedor de Access predeterminado a un proveedor de SQL. El almacenamiento de información de suscripciones en una base de datos de Access es adecuado para sitios de tamaño pequeño o mediano, pero si el sitio va a tener mucho tráfico, es más conveniente utilizar Microsoft SQL Server como almacén de suscripciones. Para obtener más información, vea Herramienta Administración de sitios Web, Proveedor (Ficha) y Crear la base de datos de servicios de la aplicación para SQL Server.
Cambiar la apariencia de los controles de inicio de sesión. Los controles Login, PasswordRecovery y CreateUserWizard admiten plantillas que permiten configurar el texto y los botones que contienen o cambiar el color, la fuente y otras características de apariencia de los controles. Para obtener más información, vea los temas de la sección Controles ASP.NET de inicio de sesión.
Crear reglas que limitan el acceso a páginas o carpetas no sólo para los usuarios anónimos, sino para usuarios o funciones concretos.
Combinar la suscripción con propiedades de perfil que permiten almacenar la configuración específica de cada usuario. Para obtener información detallada, vea Tutorial: Mantener la información de usuarios de sitios Web con propiedades de perfil.
Combinar los controles de inicio de sesión con páginas principales. Las páginas principales permiten definir un diseño de página que se puede utilizar para todas las páginas de una aplicación. Para obtener información detallada, vea Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer.
Agregar la capacidad para recuperar una contraseña olvidada. Para obtener más información, vea Cómo: Habilitar la recuperación de contraseñas de usuario mediante el control PasswordRecovery de ASP.NET.
lunes, 25 de enero de 2010
Crear páginas Web principal-detalle en Visual Studio
En muchas páginas Web los datos se muestran de más de una manera, mostrando a menudo los datos de las tablas relacionadas. En este tutorial se muestran las distintas maneras de trabajar con datos en varios controles y de varias tablas, incluidos los que tienen una relación principal-detalle. Las tareas ilustradas en este tutorial incluyen:
Rellenar una lista desplegable con datos de la base de datos.
Crear filtros: instrucciones SQL con una cláusula WHERE (consultas parametrizadas).
Mostrar datos filtrados en función de la selección del usuario en una lista desplegable.
Mostrar detalles sobre un registro seleccionado utilizando el control DetailsView.
Seleccionar un registro de una página y mostrar un registro relacionado de otra página.
Requisitos previos
Para poder completar este tutorial, necesitará:
Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.
Nota
Si necesita información sobre cómo iniciar sesión en el equipo en que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizás tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea el artículo "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.
Crear el sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer o en Tutorial: Acceso a datos básico en páginas Web), puede utilizar ese sitio Web y pasar a la siguiente sección referente a la conexión con SQL Server. En caso contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Conectar a SQL Server
Para trabajar con datos, necesita establecer una conexión a una base de datos. En este tutorial, creará una conexión, que es un proceso independiente del trabajo con páginas o controles Web.
Para crear una conexión con SQL Server
Presione CTRL+ALT+S para mostrar el Explorador de base de datos. En el Explorador de base de datos, haga clic con el botón secundario en Conexiones de datos y elija Agregar conexión.
Se muestra el cuadro de diálogo Cambiar origen de datos.
En el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server y haga clic en Aceptar.
En el cuadro de diálogo Agregar conexión, realice lo siguiente:
Especifique o seleccione el nombre del servidor SQL Server. Para un servidor ubicado en su equipo, escriba (local).
Seleccione Utilizar autenticación de SQL Server.
Escriba un nombre de usuario y una contraseña.
Seleccione Guardar mi contraseña.
Seleccione Northwind como la base de datos.
Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.
La conexión se agrega al Explorador de servidores.
Utilizar una lista desplegable como elemento principal
En esta parte del tutorial, agregará una lista desplegable a una página y la rellenará con una lista de categorías de la tabla Northwind. Cuando los usuarios seleccionen una categoría, la página mostrará los productos de esa categoría.
Para crear y rellenar una lista desplegable
Abra o cambie a la página Default.aspx. Si está trabajando con un sitio Web que ya había creado, agregue o abra una página con la que pueda trabajar en este tutorial.
Cambie a la vista Diseño.
Escriba Seleccionar productos por categoría en la página y dé al texto formato de encabezado, utilizando la lista desplegable Formato del bloque que está sobre el Cuadro de herramientas.
Desde el grupo Estándar del Cuadro de herramientas, arrastre un control DropDownList a la página.
En las Tareas de DropDownList, active la casilla de verificación Habilitar AutoPostBack.
Así se configura el control de forma que la página envíe los datos al servidor cada vez que se hace una selección en la lista, en lugar de esperar a que el usuario haga clic en un botón.
En las Tareas de DropDownList, seleccione Elegir origen de datos.
Se inicia el asistente Elegir origen de datos.
En la lista Seleccionar un origen de datos , haga clic.
Aparecerá el cuadro de diálogo Asistente para la configuración de orígenes de datos.
Seleccione Base de datos.
Así se especifica que desea obtener datos de una base de datos compatible con instrucciones SQL. (Incluye SQL Server y otras bases de datos compatibles con OLE-DB.)
En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar este nombre.
Haga clic en Aceptar.
El asistente muestra la página Configurar origen de datos - SqlDataSource1 en la que puede seleccionar una conexión de datos.
En la lista desplegable, seleccione la conexión Northwind que creó anteriormente en el tutorial.
Haga clic en Siguiente.
El asistente muestra una página donde se puede almacenar, si se desea, la cadena de conexión en el archivo de configuración.
No olvide activar la casilla de verificación Sí, guardar esta conexión como y haga clic en Siguiente. (Puede dejar el nombre predeterminado de la cadena de conexión.)
El asistente muestra una página donde se puede especificar los datos que se desea recuperar de la base de datos.
De la lista Nombre de Opciones de tabla o vista, seleccione Categories.
En el cuadro Columnas, seleccione CategoryID y CategoryName.
Haga clic en Siguiente.
Haga clic en Consulta de prueba para asegurarse de que obtiene los datos que desea.
Haga clic en Finalizar.
Se muestra el Asistente para la configuración de orígenes de datos, con el nombre del control de origen de datos ha configurado.
En la lista Seleccionar un campo de datos para mostrar en la lista desplegable, seleccione CategoryName.
Nota
Si no aparece ningún elemento en la lista, haga clic en el vínculo Actualizar esquema.
Esto especifica que el valor del campo CategoryName se mostrará como texto del elemento en la lista desplegable.
En la lista Seleccionar un campo de datos para el valor de la lista desplegable, seleccione CategoryID.
Esto especifica que cuando se selecciona un elemento, el campo CategoryID se devolverá como el valor del elemento.
Haga clic en Aceptar.
Antes de continuar, pruebe la lista desplegable.
Para probar la lista desplegable
Presione CTRL+F5 para ejecutar la página.
Cuando se muestre la página, examine la lista desplegable.
Seleccione una categoría para estar seguro de que la lista realiza una devolución de datos.
Ahora puede mostrar los productos de la categoría seleccionada en la lista desplegable.
Utilizar una cuadrícula para mostrar información de detalle
A continuación, puede ampliar la página para que incluya una cuadrícula. Cuando los usuarios realicen una selección en la lista desplegable de categorías, en la cuadrícula se mostrarán los productos de dicha categoría.
Para utilizar una cuadrícula para mostrar información de detalle
Cambie a la página Default.aspx o ábrala (o la página con la que ha estado trabajando) y cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView, seleccione en la lista Elegir origen de datos.
Se abrirá el Asistente para la configuración de orígenes de datos.
Seleccione Base de datos.
En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource2). Puede dejar este nombre.
Haga clic en Aceptar.
El asistente muestra una página donde puede seleccionar una conexión.
En la lista desplegable de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
El asistente muestra la página Configurar origen de datos - SqlDataSource2, en la que puede crear una instrucción SQL.
En la lista Nombre, seleccione Productos.
En el cuadro Columnas, seleccione ProductID, ProductName y CategoryID.
Haga clic en WHERE.
Aparecerá el cuadro de diálogo Agregar cláusula WHERE.
En la lista Columna, seleccione CategoryID.
En la lista Operador, seleccione =.
En la lista Origen, seleccione Control.
En Propiedades del parámetro, en la lista Id. de control, seleccione DropDownList1.
Con los últimos dos pasos se especifica que la consulta obtendrá el valor de búsqueda del Id. de categoría del control DropDownList que agregó anteriormente.
Haga clic en Agregar.
Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente.
En la Vista previa, haga clic en Consulta de prueba.
El asistente muestra un cuadro de diálogo en el que se le pide que especifique un valor que se utilizará en la cláusula WHERE.
Escriba 4 en el cuadro y haga clic en Aceptar.
Se muestran los registros de los productos de la categoría 4.
Haga clic en Finalizar para cerrar el asistente.
A continuación, puede probar la presentación de principal-detalle.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
Cuando aparezca la página, se mostrarán los productos del primer elemento en la lista desplegable.
Seleccione una categoría de la lista y compruebe que los productos correspondientes aparecen en la cuadrícula.
Mostrar datos de principal-detalle en la misma página
En esta parte del tutorial, los datos de tablas relacionadas se mostrarán en una página. Los datos de la tabla principal se muestran en una cuadrícula donde los usuarios pueden seleccionar cada una de las filas. Al hacerlo, se muestran uno o varios registros de detalle en un control de desplazamiento que está en otra parte de la página. Para que sirva de ejemplo, utilizará la tabla de categorías de Northwind como tabla principal y la tabla de productos como tabla de detalles.
Para mostrar los registros principales
Agregue una nueva página al sitio Web y denomínela MasterDetails2.aspxa.
Cambie a la vista Diseño.
Escriba Página de principal-detalle en la página y dé al texto formato de encabezado.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en y, a continuación, siga estos pasos para configurar un origen para el control GridView:
Seleccione Base de datos.
Haga clic en Aceptar.
En la lista desplegable de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
En la lista Nombre, seleccione Categorías.
En el cuadro Columnas, seleccione CategoryID y CategoryName.
Haga clic en Siguiente y, a continuación, en Finalizar.
Seleccione el control GridView y, en el menú Tareas de GridView, elija Editar columnas.
Se muestra el cuadro de diálogo Campos.
En Campos disponibles, abra el nodo Campo de comando, elija Seleccionar y, a continuación, haga clic en Agregar para agregarlo a la lista Campos seleccionados.
En la lista Campos seleccionados, elija Seleccionar y, a continuación, en la cuadrícula de la propiedad CommandField, establezca su propiedad SelectText en Detalles.
Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.
Se agrega a la cuadrícula una nueva columna con el hipervínculo Detalles.
Seleccione el control GridView y, en la ventana Propiedades, asegúrese de que la propiedad DataKeyNames está establecida en CategoryID.
Así se especifica que al seleccionar una fila de la cuadrícula, ASP.NET puede buscar en una ubicación conocida la clave del registro que se muestra actualmente en categorías .
La cuadrícula le permite seleccionar una sola categoría. El paso siguiente es agregar el control DetailsView que mostrará los registros de detalle, es decir, los productos asociados a la categoría seleccionada. El control DetailsView utilizará otra consulta SQL para obtener sus datos, por lo que requiere un segundo control de origen de datos.
Para configurar una consulta para mostrar los registros relacionados
Presione ENTRAR para tener espacio debajo del control SqlDataSource1 en la página MasterDetails2.aspx en la vista Detalles.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control DetailsView a la página.
Configúrelo para que utilice otro control de origen de datos, mediante los pasos siguientes:
En la lista Elegir origen de datos, seleccione.
Seleccione Base de datos.
Haga clic en Aceptar.
En la lista desplegable de conexiones, haga clic en la conexión que creó y almacenó anteriormente en el tutorial.
Haga clic en Siguiente.
En la lista Nombre de Opciones de tabla o vista, seleccione Products.
En el cuadro Columnas, seleccione ProductID, ProductName y CategoryID.
Haga clic en WHERE.
Aparecerá el cuadro de diálogo Agregar cláusula WHERE.
En la lista Columna, seleccione CategoryID.
En la lista Operador, seleccione =.
En la lista Origen, seleccione Control.
En Propiedades del parámetro, en la lista Id. de control, seleccione GridView1. La consulta para la segunda cuadrícula obtendrá su valor de parámetro de la selección realizada en la primera cuadrícula.
Haga clic en Agregar y, a continuación, haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente.
En la Vista previa, haga clic en Consulta de prueba.
El asistente muestra un cuadro de diálogo en el que se le pide que especifique un valor que se utilizará en la cláusula WHERE.
Escriba 4 en el cuadro y haga clic en Aceptar.
Se muestran los registros de los productos de la categoría 4.
Haga clic en Finalizar.
En el menú Tareas de DetailsView, active Habilitar paginación.
Esto le permitirá desplazarse por cada uno de los registros de producto.
Opcionalmente, en la ventana Propiedades, abra el nodo PagerSettings y seleccione otro valor de Modo.
De manera predeterminada, se pagina por los registros haciendo clic en un número de página, pero también puede seleccionar las opciones para utilizar los vínculos anterior y siguiente.
A continuación, puede probar la combinación de la cuadrícula principal y la vista de detalles.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
En la cuadrícula, seleccione una categoría.
El control DetailsView muestra un producto asociado a esa categoría.
Utilice los vínculos de paginación del control DetailsView para desplazarse a los otros productos de la misma categoría.
En la cuadrícula, seleccione otra categoría.
Revise los productos de esa categoría en el control DetailsView.
Mostrar datos de principal-detalle en páginas independientes
Para la parte final del tutorial, va a crear otra variante: mostrar registros principal-detalle en páginas independientes. Los registros principales se vuelven a mostrar en una cuadrícula que contiene un hipervínculo para cada registro. Cuando los usuarios hagan clic en el hipervínculo, se desplazarán a otra página donde pueden ver los registros de detalle en un control DetailsView que muestra el registro Products completo.
Para mostrar los registros principales
Agregue una nueva página al sitio Web y asígnele el nombre MasterCustomers.aspx.
Cambie a la vista Diseño.
Escriba Clientes en la página y dé al texto formato de encabezado.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
Desde el menú Tareas de GridView del control, seleccione en la lista Elegir origen de datos y, a continuación, use el asistente para hacer lo siguiente:
Haga clic en Base de datos.
Conecte a la base de datos Northwind (conexión NorthwindConnectionString).
Recupere las columnas CustomerID, CompanyNamey City de la tabla Customers.
Opcionalmente, en el menú Tareas de GridView, active la casilla de verificación Habilitar paginación.
En el menú Tareas de GridView, elija Editar columnas.
Se muestra el cuadro de diálogo Campos.
Desactive la casilla de verificación Generar campos automáticamente .
En Campos disponibles, elija Campo de hipervínculo, haga clic en Agregar y, a continuación, establezca las propiedades siguientes:
Propiedad Valor
Text
Detalles
DataNavigateUrlFields
CustomerID
Indica que el hipervínculo debe obtener su valor de la columna IdCliente
DataNavigateUrlFormatString
DetailsOrders.aspx?custid={0}
Crea un vínculo que está incluido en el código para desplazarse a la página DetailsOrders.aspx. El vínculo también pasa una variable de cadena de consulta denominada custid cuyo valor se rellenará utilizando la columna a la que se hace referencia en la propiedad DataNavigateUrlFields .
Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.
A continuación, puede crear la página de detalles que acepta un valor de la página principal.
Para crear la página de detalles
Agregue una nueva página al sitio Web y asígnele el nombre DetailsOrders.aspx.
Cambie a la vista Diseño.
Escriba Pedidos en la página y dé al texto formato de encabezado.
Desde la carpeta Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView en el control, seleccione Tareas de GridView de la lista Elegir origen de datos
En la lista Seleccionar un tipo de origen de datos, haga clic en Base de datos y, a continuación, haga clic en Aceptar.
En la lista de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
El asistente muestra una página donde puede crear una instrucción SQL.
En la lista Nombre, seleccione Pedidos.
En el cuadro Columnas, seleccione OrderID, CustomerID y OrderDate.
Haga clic en WHERE.
En la lista Columnas, seleccione CustomerID.
En la lista Operadores, seleccione =.
En la lista Origen, seleccione QueryString.
Así se especifica que la consulta seleccionará registros en función del valor que se pasa a la página con la cadena de consulta.
En Propiedades del parámetro, en el cuadro Campo de QueryString, escriba custid.
La consulta obtendrá el valor de Id. de cliente de la cadena de consulta, que se crea al hacer clic en el vínculo Detalles de la página MasterCustomers.aspx.
Haga clic en Agregar.
Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente y, a continuación, haga clic en Finalizar para cerrar el asistente.
Desde el nodo Estándar del Cuadro de herramientas, arrastre un control Hyperlink a la página. Establezca su propiedad Text en Volver a clientes y su propiedad NavigateUrl en MasterCustomers.aspx.
Ahora puede probar las páginas principal-detalle relacionadas.
Para probar las páginas
Cambie a la página MasterCustomers.aspx.
Presione CTRL+F5 para ejecutar la página.
Haga clic en el vínculo Detalles de un cliente.
En el explorador se muestra la página DetailsOrders.aspx con el pedido del cliente seleccionado. Observe que la dirección URL del cuadro Dirección del explorador es:
DetailsOrder.aspx?custid=x
donde x es el identificador del cliente que seleccionó.
Haga clic en el vínculo Volver a clientes, seleccione otro cliente, y vuelva a hacer clic en el vínculo Detalles para comprobar que puede ver los pedidos de cualquier cliente.
Pasos siguientes
En este tutorial se han descrito distintas maneras de mostrar los datos de las tablas relacionadas. Todos los escenarios tienen en común lo siguiente: dependen de una consulta con parámetros y los valores de los parámetros se pueden pasar a la consulta automáticamente en tiempo de ejecución. Si lo desea, puede experimentar con otras maneras de utilizar los datos relacionados. Por ejemplo, podría:
Experimentar con parámetros que reciben sus valores de otros orígenes, como una variable Session o una cookie. Para obtener más información, vea Utilizar parámetros con controles de origen de datos.
Ampliar lo que se puede hacer con el control DetailsView de la segunda parte del tutorial. Por ejemplo, puede configurar el control para permitir a los usuarios editar los registros de detalle. Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.
Rellenar una lista desplegable con datos de la base de datos.
Crear filtros: instrucciones SQL con una cláusula WHERE (consultas parametrizadas).
Mostrar datos filtrados en función de la selección del usuario en una lista desplegable.
Mostrar detalles sobre un registro seleccionado utilizando el control DetailsView.
Seleccionar un registro de una página y mostrar un registro relacionado de otra página.
Requisitos previos
Para poder completar este tutorial, necesitará:
Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.
Nota
Si necesita información sobre cómo iniciar sesión en el equipo en que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizás tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea el artículo "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.
Crear el sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer o en Tutorial: Acceso a datos básico en páginas Web), puede utilizar ese sitio Web y pasar a la siguiente sección referente a la conexión con SQL Server. En caso contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Conectar a SQL Server
Para trabajar con datos, necesita establecer una conexión a una base de datos. En este tutorial, creará una conexión, que es un proceso independiente del trabajo con páginas o controles Web.
Para crear una conexión con SQL Server
Presione CTRL+ALT+S para mostrar el Explorador de base de datos. En el Explorador de base de datos, haga clic con el botón secundario en Conexiones de datos y elija Agregar conexión.
Se muestra el cuadro de diálogo Cambiar origen de datos.
En el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server y haga clic en Aceptar.
En el cuadro de diálogo Agregar conexión, realice lo siguiente:
Especifique o seleccione el nombre del servidor SQL Server. Para un servidor ubicado en su equipo, escriba (local).
Seleccione Utilizar autenticación de SQL Server.
Escriba un nombre de usuario y una contraseña.
Seleccione Guardar mi contraseña.
Seleccione Northwind como la base de datos.
Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.
La conexión se agrega al Explorador de servidores.
Utilizar una lista desplegable como elemento principal
En esta parte del tutorial, agregará una lista desplegable a una página y la rellenará con una lista de categorías de la tabla Northwind. Cuando los usuarios seleccionen una categoría, la página mostrará los productos de esa categoría.
Para crear y rellenar una lista desplegable
Abra o cambie a la página Default.aspx. Si está trabajando con un sitio Web que ya había creado, agregue o abra una página con la que pueda trabajar en este tutorial.
Cambie a la vista Diseño.
Escriba Seleccionar productos por categoría en la página y dé al texto formato de encabezado, utilizando la lista desplegable Formato del bloque que está sobre el Cuadro de herramientas.
Desde el grupo Estándar del Cuadro de herramientas, arrastre un control DropDownList a la página.
En las Tareas de DropDownList, active la casilla de verificación Habilitar AutoPostBack.
Así se configura el control de forma que la página envíe los datos al servidor cada vez que se hace una selección en la lista, en lugar de esperar a que el usuario haga clic en un botón.
En las Tareas de DropDownList, seleccione Elegir origen de datos.
Se inicia el asistente Elegir origen de datos.
En la lista Seleccionar un origen de datos , haga clic
Aparecerá el cuadro de diálogo Asistente para la configuración de orígenes de datos.
Seleccione Base de datos.
Así se especifica que desea obtener datos de una base de datos compatible con instrucciones SQL. (Incluye SQL Server y otras bases de datos compatibles con OLE-DB.)
En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar este nombre.
Haga clic en Aceptar.
El asistente muestra la página Configurar origen de datos - SqlDataSource1 en la que puede seleccionar una conexión de datos.
En la lista desplegable, seleccione la conexión Northwind que creó anteriormente en el tutorial.
Haga clic en Siguiente.
El asistente muestra una página donde se puede almacenar, si se desea, la cadena de conexión en el archivo de configuración.
No olvide activar la casilla de verificación Sí, guardar esta conexión como y haga clic en Siguiente. (Puede dejar el nombre predeterminado de la cadena de conexión.)
El asistente muestra una página donde se puede especificar los datos que se desea recuperar de la base de datos.
De la lista Nombre de Opciones de tabla o vista, seleccione Categories.
En el cuadro Columnas, seleccione CategoryID y CategoryName.
Haga clic en Siguiente.
Haga clic en Consulta de prueba para asegurarse de que obtiene los datos que desea.
Haga clic en Finalizar.
Se muestra el Asistente para la configuración de orígenes de datos, con el nombre del control de origen de datos ha configurado.
En la lista Seleccionar un campo de datos para mostrar en la lista desplegable, seleccione CategoryName.
Nota
Si no aparece ningún elemento en la lista, haga clic en el vínculo Actualizar esquema.
Esto especifica que el valor del campo CategoryName se mostrará como texto del elemento en la lista desplegable.
En la lista Seleccionar un campo de datos para el valor de la lista desplegable, seleccione CategoryID.
Esto especifica que cuando se selecciona un elemento, el campo CategoryID se devolverá como el valor del elemento.
Haga clic en Aceptar.
Antes de continuar, pruebe la lista desplegable.
Para probar la lista desplegable
Presione CTRL+F5 para ejecutar la página.
Cuando se muestre la página, examine la lista desplegable.
Seleccione una categoría para estar seguro de que la lista realiza una devolución de datos.
Ahora puede mostrar los productos de la categoría seleccionada en la lista desplegable.
Utilizar una cuadrícula para mostrar información de detalle
A continuación, puede ampliar la página para que incluya una cuadrícula. Cuando los usuarios realicen una selección en la lista desplegable de categorías, en la cuadrícula se mostrarán los productos de dicha categoría.
Para utilizar una cuadrícula para mostrar información de detalle
Cambie a la página Default.aspx o ábrala (o la página con la que ha estado trabajando) y cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView, seleccione
Se abrirá el Asistente para la configuración de orígenes de datos.
Seleccione Base de datos.
En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource2). Puede dejar este nombre.
Haga clic en Aceptar.
El asistente muestra una página donde puede seleccionar una conexión.
En la lista desplegable de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
El asistente muestra la página Configurar origen de datos - SqlDataSource2, en la que puede crear una instrucción SQL.
En la lista Nombre, seleccione Productos.
En el cuadro Columnas, seleccione ProductID, ProductName y CategoryID.
Haga clic en WHERE.
Aparecerá el cuadro de diálogo Agregar cláusula WHERE.
En la lista Columna, seleccione CategoryID.
En la lista Operador, seleccione =.
En la lista Origen, seleccione Control.
En Propiedades del parámetro, en la lista Id. de control, seleccione DropDownList1.
Con los últimos dos pasos se especifica que la consulta obtendrá el valor de búsqueda del Id. de categoría del control DropDownList que agregó anteriormente.
Haga clic en Agregar.
Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente.
En la Vista previa, haga clic en Consulta de prueba.
El asistente muestra un cuadro de diálogo en el que se le pide que especifique un valor que se utilizará en la cláusula WHERE.
Escriba 4 en el cuadro y haga clic en Aceptar.
Se muestran los registros de los productos de la categoría 4.
Haga clic en Finalizar para cerrar el asistente.
A continuación, puede probar la presentación de principal-detalle.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
Cuando aparezca la página, se mostrarán los productos del primer elemento en la lista desplegable.
Seleccione una categoría de la lista y compruebe que los productos correspondientes aparecen en la cuadrícula.
Mostrar datos de principal-detalle en la misma página
En esta parte del tutorial, los datos de tablas relacionadas se mostrarán en una página. Los datos de la tabla principal se muestran en una cuadrícula donde los usuarios pueden seleccionar cada una de las filas. Al hacerlo, se muestran uno o varios registros de detalle en un control de desplazamiento que está en otra parte de la página. Para que sirva de ejemplo, utilizará la tabla de categorías de Northwind como tabla principal y la tabla de productos como tabla de detalles.
Para mostrar los registros principales
Agregue una nueva página al sitio Web y denomínela MasterDetails2.aspxa.
Cambie a la vista Diseño.
Escriba Página de principal-detalle en la página y dé al texto formato de encabezado.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en
Seleccione Base de datos.
Haga clic en Aceptar.
En la lista desplegable de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
En la lista Nombre, seleccione Categorías.
En el cuadro Columnas, seleccione CategoryID y CategoryName.
Haga clic en Siguiente y, a continuación, en Finalizar.
Seleccione el control GridView y, en el menú Tareas de GridView, elija Editar columnas.
Se muestra el cuadro de diálogo Campos.
En Campos disponibles, abra el nodo Campo de comando, elija Seleccionar y, a continuación, haga clic en Agregar para agregarlo a la lista Campos seleccionados.
En la lista Campos seleccionados, elija Seleccionar y, a continuación, en la cuadrícula de la propiedad CommandField, establezca su propiedad SelectText en Detalles.
Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.
Se agrega a la cuadrícula una nueva columna con el hipervínculo Detalles.
Seleccione el control GridView y, en la ventana Propiedades, asegúrese de que la propiedad DataKeyNames está establecida en CategoryID.
Así se especifica que al seleccionar una fila de la cuadrícula, ASP.NET puede buscar en una ubicación conocida la clave del registro que se muestra actualmente en categorías .
La cuadrícula le permite seleccionar una sola categoría. El paso siguiente es agregar el control DetailsView que mostrará los registros de detalle, es decir, los productos asociados a la categoría seleccionada. El control DetailsView utilizará otra consulta SQL para obtener sus datos, por lo que requiere un segundo control de origen de datos.
Para configurar una consulta para mostrar los registros relacionados
Presione ENTRAR para tener espacio debajo del control SqlDataSource1 en la página MasterDetails2.aspx en la vista Detalles.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control DetailsView a la página.
Configúrelo para que utilice otro control de origen de datos, mediante los pasos siguientes:
En la lista Elegir origen de datos, seleccione
Seleccione Base de datos.
Haga clic en Aceptar.
En la lista desplegable de conexiones, haga clic en la conexión que creó y almacenó anteriormente en el tutorial.
Haga clic en Siguiente.
En la lista Nombre de Opciones de tabla o vista, seleccione Products.
En el cuadro Columnas, seleccione ProductID, ProductName y CategoryID.
Haga clic en WHERE.
Aparecerá el cuadro de diálogo Agregar cláusula WHERE.
En la lista Columna, seleccione CategoryID.
En la lista Operador, seleccione =.
En la lista Origen, seleccione Control.
En Propiedades del parámetro, en la lista Id. de control, seleccione GridView1. La consulta para la segunda cuadrícula obtendrá su valor de parámetro de la selección realizada en la primera cuadrícula.
Haga clic en Agregar y, a continuación, haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente.
En la Vista previa, haga clic en Consulta de prueba.
El asistente muestra un cuadro de diálogo en el que se le pide que especifique un valor que se utilizará en la cláusula WHERE.
Escriba 4 en el cuadro y haga clic en Aceptar.
Se muestran los registros de los productos de la categoría 4.
Haga clic en Finalizar.
En el menú Tareas de DetailsView, active Habilitar paginación.
Esto le permitirá desplazarse por cada uno de los registros de producto.
Opcionalmente, en la ventana Propiedades, abra el nodo PagerSettings y seleccione otro valor de Modo.
De manera predeterminada, se pagina por los registros haciendo clic en un número de página, pero también puede seleccionar las opciones para utilizar los vínculos anterior y siguiente.
A continuación, puede probar la combinación de la cuadrícula principal y la vista de detalles.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
En la cuadrícula, seleccione una categoría.
El control DetailsView muestra un producto asociado a esa categoría.
Utilice los vínculos de paginación del control DetailsView para desplazarse a los otros productos de la misma categoría.
En la cuadrícula, seleccione otra categoría.
Revise los productos de esa categoría en el control DetailsView.
Mostrar datos de principal-detalle en páginas independientes
Para la parte final del tutorial, va a crear otra variante: mostrar registros principal-detalle en páginas independientes. Los registros principales se vuelven a mostrar en una cuadrícula que contiene un hipervínculo para cada registro. Cuando los usuarios hagan clic en el hipervínculo, se desplazarán a otra página donde pueden ver los registros de detalle en un control DetailsView que muestra el registro Products completo.
Para mostrar los registros principales
Agregue una nueva página al sitio Web y asígnele el nombre MasterCustomers.aspx.
Cambie a la vista Diseño.
Escriba Clientes en la página y dé al texto formato de encabezado.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
Desde el menú Tareas de GridView del control, seleccione
Haga clic en Base de datos.
Conecte a la base de datos Northwind (conexión NorthwindConnectionString).
Recupere las columnas CustomerID, CompanyNamey City de la tabla Customers.
Opcionalmente, en el menú Tareas de GridView, active la casilla de verificación Habilitar paginación.
En el menú Tareas de GridView, elija Editar columnas.
Se muestra el cuadro de diálogo Campos.
Desactive la casilla de verificación Generar campos automáticamente .
En Campos disponibles, elija Campo de hipervínculo, haga clic en Agregar y, a continuación, establezca las propiedades siguientes:
Propiedad Valor
Text
Detalles
DataNavigateUrlFields
CustomerID
Indica que el hipervínculo debe obtener su valor de la columna IdCliente
DataNavigateUrlFormatString
DetailsOrders.aspx?custid={0}
Crea un vínculo que está incluido en el código para desplazarse a la página DetailsOrders.aspx. El vínculo también pasa una variable de cadena de consulta denominada custid cuyo valor se rellenará utilizando la columna a la que se hace referencia en la propiedad DataNavigateUrlFields .
Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.
A continuación, puede crear la página de detalles que acepta un valor de la página principal.
Para crear la página de detalles
Agregue una nueva página al sitio Web y asígnele el nombre DetailsOrders.aspx.
Cambie a la vista Diseño.
Escriba Pedidos en la página y dé al texto formato de encabezado.
Desde la carpeta Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView en el control, seleccione Tareas de GridView de la lista Elegir origen de datos
En la lista Seleccionar un tipo de origen de datos, haga clic en Base de datos y, a continuación, haga clic en Aceptar.
En la lista de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
El asistente muestra una página donde puede crear una instrucción SQL.
En la lista Nombre, seleccione Pedidos.
En el cuadro Columnas, seleccione OrderID, CustomerID y OrderDate.
Haga clic en WHERE.
En la lista Columnas, seleccione CustomerID.
En la lista Operadores, seleccione =.
En la lista Origen, seleccione QueryString.
Así se especifica que la consulta seleccionará registros en función del valor que se pasa a la página con la cadena de consulta.
En Propiedades del parámetro, en el cuadro Campo de QueryString, escriba custid.
La consulta obtendrá el valor de Id. de cliente de la cadena de consulta, que se crea al hacer clic en el vínculo Detalles de la página MasterCustomers.aspx.
Haga clic en Agregar.
Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente y, a continuación, haga clic en Finalizar para cerrar el asistente.
Desde el nodo Estándar del Cuadro de herramientas, arrastre un control Hyperlink a la página. Establezca su propiedad Text en Volver a clientes y su propiedad NavigateUrl en MasterCustomers.aspx.
Ahora puede probar las páginas principal-detalle relacionadas.
Para probar las páginas
Cambie a la página MasterCustomers.aspx.
Presione CTRL+F5 para ejecutar la página.
Haga clic en el vínculo Detalles de un cliente.
En el explorador se muestra la página DetailsOrders.aspx con el pedido del cliente seleccionado. Observe que la dirección URL del cuadro Dirección del explorador es:
DetailsOrder.aspx?custid=x
donde x es el identificador del cliente que seleccionó.
Haga clic en el vínculo Volver a clientes, seleccione otro cliente, y vuelva a hacer clic en el vínculo Detalles para comprobar que puede ver los pedidos de cualquier cliente.
Pasos siguientes
En este tutorial se han descrito distintas maneras de mostrar los datos de las tablas relacionadas. Todos los escenarios tienen en común lo siguiente: dependen de una consulta con parámetros y los valores de los parámetros se pueden pasar a la consulta automáticamente en tiempo de ejecución. Si lo desea, puede experimentar con otras maneras de utilizar los datos relacionados. Por ejemplo, podría:
Experimentar con parámetros que reciben sus valores de otros orígenes, como una variable Session o una cookie. Para obtener más información, vea Utilizar parámetros con controles de origen de datos.
Ampliar lo que se puede hacer con el control DetailsView de la segunda parte del tutorial. Por ejemplo, puede configurar el control para permitir a los usuarios editar los registros de detalle. Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.
Tutorial: Crear una página Web para mostrar datos de una base de datos de Access
La herramienta de desarrollo Web Microsoft Visual Web Developer permite crear páginas Web que funcionan con datos de diversos orígenes, entre los que se incluyen bases de datos, archivos XML y objetos comerciales. Este tutorial muestra cómo trabajar con los datos de una base de datos de Microsoft Access (archivo .mdb).
Durante este tutorial aprenderá a hacer lo siguiente:
Configurar los permisos para los archivos .mdb.
Establecer conexión con la base de datos que tiene un control AccessDataSource.
Mostrar los datos de Access.
Las bases de datos de Access no tienen la misma capacidad ni el mismo potencial de ampliación que otros tipos de bases de datos, como Microsoft SQL Server. En general, si se crea un sitio Web que va a tener un tráfico ligero o un número limitado de usuarios, una base de datos de Access será suficiente. Sin embargo, si se espera que el sitio Web tenga un rendimiento mayor o un alto número de usuarios, se debe considerar la posibilidad de usar SQL Server u otra base de datos adecuada para los sitios Web de producción.
Requisitos previos
Para poder completar este tutorial, necesitará lo siguiente:
El archivo Northwind.mdb que contiene la versión para Access de la base de datos Northwind de ejemplo.
Si lo prefiere, puede usar otro archivo .mdb de Access y ajustar los pasos del tutorial para que coincidan con las tablas utilizadas.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizás tenga que actualizar la versión de MDAC que ya está instalada en el equipo. Para descargar la actual versión de MDAC, vea el Centro para desarrolladores de acceso a datos y almacenamientoCentro para desarrolladores de acceso a datos y almacenamiento.
Si lo desea, Servicios de Microsoft Internet Information Server (IIS) instalado localmente en el equipo.
Esto permite comprobar que el sitio Web tiene los derechos de usuario adecuados para utilizar una base de datos de Access en un entorno de producción.
Crear el sitio y la página Web
Si ya ha creado un sitio Web en Visual Web Developer completando Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio Web e ir a la sección siguiente. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.
Para crear un sitio Web de sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
En el cuadro Ubicación situado más a la izquierda, haga clic en HTTP.
Haga clic en Examinar.
Aparecerá la página Seleccionar ubicación.
Haga clic en IIS local y, a continuación, en Sitio Web predeterminado.
Haga clic en el icono Crear nueva aplicación Web () y, a continuación, asigne a la nueva aplicación Web el nombre AccessSample.
Haga clic en Abrir.
El cuadro de diálogo Nuevo sitio Web aparece con la ubicación de la nueva aplicación Web en el cuadro Ubicación situado más a la derecha.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, pero también puede establecer el lenguaje de programación de cada página de forma individual.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx. El sitio Web se muestra en el Explorador de soluciones.
Configurar permisos para una base de datos de Access
Un aspecto importante de trabajar con un archivo .mdb de Access es configurar correctamente los permisos. Cuando una aplicación Web utiliza una base de datos de Access, debe tener permiso de lectura en el archivo .mdb para que la aplicación pueda tener acceso a los datos. Además, la aplicación debe tener permiso de escritura en la carpeta que contiene el archivo .mdb. Se necesita permiso de escritura porque Access crea un archivo adicional con la extensión .ldb en el que conserva información relativa a los bloqueos de la base de datos para usuarios simultáneos. El archivo .ldb se crea en tiempo de ejecución.
De manera predeterminada, las aplicaciones Web ASP.NET se ejecutan en el contexto de una cuenta de equipo local denominada ASPNET (para Windows 2000 y Windows XP) o en el contexto de la cuenta NETWORK SERVICE (para Windows Server 2003). Por ejemplo, para Windows 2000 o Windows XP Professional, si el servidor Web se denomina ABCServer, las aplicaciones ASP.NET del equipo ABCServer se ejecutan en el contexto de la cuenta local ABCServer\ASPNET. Por tanto, para usar una base de datos de Access en una aplicación Web ASP.NET, debe configurar la carpeta que contiene la base de datos de Access de manera que tenga permisos de lectura y escritura en la cuenta de usuario ASPNET local.
Cuando se crea un sitio Web en Visual Web Developer, Visual Web Developer crea una carpeta denominada App_Data dentro de la carpeta raíz actual. La carpeta está diseñada para ser un almacén de datos de aplicación, incluidas las bases de datos de Access. ASP.NET utiliza también la carpeta App_Data para almacenar las bases de datos que el sistema mantiene, como la base de datos de suscripción y funciones. Cuando Visual Web Developer crea la carpeta App_Data, otorga permisos de lectura y escritura en la carpeta a la cuenta de usuario ASPNET o NETWORK SERVICE.
Nota
Como medida de seguridad, el servidor Web no suministra los archivos de la carpeta App_data. No almacene ninguna página Web en la carpeta App_Data, porque los usuarios verán un error si solicitan una página de esa carpeta.
En esta parte del tutorial, examinará los permisos de la carpeta App_Data para asegurarse de que funcionará correctamente cuando se ejecute la aplicación.
Para establecer los permisos de la carpeta App_Data
En el Explorador de Windows, desplácese a la carpeta raíz del sitio Web.
La ubicación predeterminada para el nuevo sitio Web es c:\inetpub\wwwroot\AccessSample.
Si la carpeta App_Data no existe aún, créela.
De forma predeterminada, Visual Web Developer crea la carpeta cuando se crea un nuevo sitio Web.
Haga clic con el botón secundario en la carpeta App_Data, haga clic en Propiedades y, a continuación, haga clic en la ficha Seguridad.
En Nombres de grupos o usuarios, busque cualquiera de estas cuentas de usuario:
Si el equipo está ejecutando Windows XP Professional o Windows 2000, busque computer\ASPNET.
Si el equipo está ejecutando Windows Server 2003, busque NETWORK SERVICE.
Compruebe que la cuenta tiene permisos de lectura y escritura en la carpeta App_Data.
Usar datos de Access en una página Web de ASP.NET
Ahora puede utilizar la base de datos de Access en una página Web. Usará un control AccessDataSource.
Para agregar un control AccessDataSource a la página
En Visual Web Developer, en el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y, a continuación, haga clic en Agregar elemento existente.
Busque el archivo Northwind.mdb (u otro archivo .mdb de Access) que desee utilizar en este tutorial.
En la carpeta App_Data, haga clic en el archivo .mdb y, a continuación, en Agregar.
Se agregará el archivo .mdb a la aplicación.
Abra la página Default.aspx y cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control AccessDataSource hasta la página.
Si el menú contextual Obtener acceso a tareas de origen de datos no aparece, haga clic con el botón secundario en el control AccessDataSource y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú contextual Obtener acceso a tareas de origen de datos, haga clic en Configurar origen de datos.
Aparecerá la ventana Configurar origen de datos -.
En la página Elija una base de datos, en el cuadro Archivo de Microsoft Access Data, escriba ~/App_Data/Northwind.mdb.
Si lo prefiere, haga clic en Examinar y, a continuación, en el cuadro de diálogo Seleccionar base de datos de Microsoft Access, vaya al archivo Northwind.mdb de la carpeta App_Data.
Haga clic en Siguiente.
Aparece la página Configurar instrucción Select.
Haga clic en Especificar columnas de una tabla o vista.
En la lista Nombre, haga clic en Categorías.
Active las casillas de verificación IdCategoría, NombreCategoría y Descripción.
Haga clic en Siguiente.
Aparece la página Consulta de prueba.
Si lo prefiere, haga clic en Consulta de prueba para probar la consulta.
Haga clic en Finalizar.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView hasta la página.
Si el menú contextual Tareas de GridView no aparece, haga clic con el botón secundario en el control GridView y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de GridView, en el cuadro Elegir origen de datos, haga clic en AccessDataSource1.
Probar la página
Ahora puede ejecutar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
El control GridView muestra todas las filas de datos de la tabla Categorías.
Pasos siguientes
Este tutorial describe los pasos básicos necesarios para trabajar con datos de Access en una página Web de ASP.NET. El modelo de enlace de datos de ASP.NET permite trabajar con datos de diferentes orígenes de la misma manera. Por ejemplo, puede hacer lo siguiente:
Usar controles para filtrar los datos que muestra la página.
Para obtener información detallada, vea Tutorial: Acceso a datos básico en páginas Web.
Actualizar, insertar o eliminar datos en una base de datos de Access.
Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.
Crear páginas para mostrar datos de Access de tablas que tienen una relación principal-detalle.
Para obtener información detallada, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.
Vea también
Durante este tutorial aprenderá a hacer lo siguiente:
Configurar los permisos para los archivos .mdb.
Establecer conexión con la base de datos que tiene un control AccessDataSource.
Mostrar los datos de Access.
Las bases de datos de Access no tienen la misma capacidad ni el mismo potencial de ampliación que otros tipos de bases de datos, como Microsoft SQL Server. En general, si se crea un sitio Web que va a tener un tráfico ligero o un número limitado de usuarios, una base de datos de Access será suficiente. Sin embargo, si se espera que el sitio Web tenga un rendimiento mayor o un alto número de usuarios, se debe considerar la posibilidad de usar SQL Server u otra base de datos adecuada para los sitios Web de producción.
Requisitos previos
Para poder completar este tutorial, necesitará lo siguiente:
El archivo Northwind.mdb que contiene la versión para Access de la base de datos Northwind de ejemplo.
Si lo prefiere, puede usar otro archivo .mdb de Access y ajustar los pasos del tutorial para que coincidan con las tablas utilizadas.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizás tenga que actualizar la versión de MDAC que ya está instalada en el equipo. Para descargar la actual versión de MDAC, vea el Centro para desarrolladores de acceso a datos y almacenamientoCentro para desarrolladores de acceso a datos y almacenamiento.
Si lo desea, Servicios de Microsoft Internet Information Server (IIS) instalado localmente en el equipo.
Esto permite comprobar que el sitio Web tiene los derechos de usuario adecuados para utilizar una base de datos de Access en un entorno de producción.
Crear el sitio y la página Web
Si ya ha creado un sitio Web en Visual Web Developer completando Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio Web e ir a la sección siguiente. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.
Para crear un sitio Web de sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
En el cuadro Ubicación situado más a la izquierda, haga clic en HTTP.
Haga clic en Examinar.
Aparecerá la página Seleccionar ubicación.
Haga clic en IIS local y, a continuación, en Sitio Web predeterminado.
Haga clic en el icono Crear nueva aplicación Web () y, a continuación, asigne a la nueva aplicación Web el nombre AccessSample.
Haga clic en Abrir.
El cuadro de diálogo Nuevo sitio Web aparece con la ubicación de la nueva aplicación Web en el cuadro Ubicación situado más a la derecha.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, pero también puede establecer el lenguaje de programación de cada página de forma individual.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx. El sitio Web se muestra en el Explorador de soluciones.
Configurar permisos para una base de datos de Access
Un aspecto importante de trabajar con un archivo .mdb de Access es configurar correctamente los permisos. Cuando una aplicación Web utiliza una base de datos de Access, debe tener permiso de lectura en el archivo .mdb para que la aplicación pueda tener acceso a los datos. Además, la aplicación debe tener permiso de escritura en la carpeta que contiene el archivo .mdb. Se necesita permiso de escritura porque Access crea un archivo adicional con la extensión .ldb en el que conserva información relativa a los bloqueos de la base de datos para usuarios simultáneos. El archivo .ldb se crea en tiempo de ejecución.
De manera predeterminada, las aplicaciones Web ASP.NET se ejecutan en el contexto de una cuenta de equipo local denominada ASPNET (para Windows 2000 y Windows XP) o en el contexto de la cuenta NETWORK SERVICE (para Windows Server 2003). Por ejemplo, para Windows 2000 o Windows XP Professional, si el servidor Web se denomina ABCServer, las aplicaciones ASP.NET del equipo ABCServer se ejecutan en el contexto de la cuenta local ABCServer\ASPNET. Por tanto, para usar una base de datos de Access en una aplicación Web ASP.NET, debe configurar la carpeta que contiene la base de datos de Access de manera que tenga permisos de lectura y escritura en la cuenta de usuario ASPNET local.
Cuando se crea un sitio Web en Visual Web Developer, Visual Web Developer crea una carpeta denominada App_Data dentro de la carpeta raíz actual. La carpeta está diseñada para ser un almacén de datos de aplicación, incluidas las bases de datos de Access. ASP.NET utiliza también la carpeta App_Data para almacenar las bases de datos que el sistema mantiene, como la base de datos de suscripción y funciones. Cuando Visual Web Developer crea la carpeta App_Data, otorga permisos de lectura y escritura en la carpeta a la cuenta de usuario ASPNET o NETWORK SERVICE.
Nota
Como medida de seguridad, el servidor Web no suministra los archivos de la carpeta App_data. No almacene ninguna página Web en la carpeta App_Data, porque los usuarios verán un error si solicitan una página de esa carpeta.
En esta parte del tutorial, examinará los permisos de la carpeta App_Data para asegurarse de que funcionará correctamente cuando se ejecute la aplicación.
Para establecer los permisos de la carpeta App_Data
En el Explorador de Windows, desplácese a la carpeta raíz del sitio Web.
La ubicación predeterminada para el nuevo sitio Web es c:\inetpub\wwwroot\AccessSample.
Si la carpeta App_Data no existe aún, créela.
De forma predeterminada, Visual Web Developer crea la carpeta cuando se crea un nuevo sitio Web.
Haga clic con el botón secundario en la carpeta App_Data, haga clic en Propiedades y, a continuación, haga clic en la ficha Seguridad.
En Nombres de grupos o usuarios, busque cualquiera de estas cuentas de usuario:
Si el equipo está ejecutando Windows XP Professional o Windows 2000, busque computer\ASPNET.
Si el equipo está ejecutando Windows Server 2003, busque NETWORK SERVICE.
Compruebe que la cuenta tiene permisos de lectura y escritura en la carpeta App_Data.
Usar datos de Access en una página Web de ASP.NET
Ahora puede utilizar la base de datos de Access en una página Web. Usará un control AccessDataSource.
Para agregar un control AccessDataSource a la página
En Visual Web Developer, en el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y, a continuación, haga clic en Agregar elemento existente.
Busque el archivo Northwind.mdb (u otro archivo .mdb de Access) que desee utilizar en este tutorial.
En la carpeta App_Data, haga clic en el archivo .mdb y, a continuación, en Agregar.
Se agregará el archivo .mdb a la aplicación.
Abra la página Default.aspx y cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control AccessDataSource hasta la página.
Si el menú contextual Obtener acceso a tareas de origen de datos no aparece, haga clic con el botón secundario en el control AccessDataSource y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú contextual Obtener acceso a tareas de origen de datos, haga clic en Configurar origen de datos.
Aparecerá la ventana Configurar origen de datos -
En la página Elija una base de datos, en el cuadro Archivo de Microsoft Access Data, escriba ~/App_Data/Northwind.mdb.
Si lo prefiere, haga clic en Examinar y, a continuación, en el cuadro de diálogo Seleccionar base de datos de Microsoft Access, vaya al archivo Northwind.mdb de la carpeta App_Data.
Haga clic en Siguiente.
Aparece la página Configurar instrucción Select.
Haga clic en Especificar columnas de una tabla o vista.
En la lista Nombre, haga clic en Categorías.
Active las casillas de verificación IdCategoría, NombreCategoría y Descripción.
Haga clic en Siguiente.
Aparece la página Consulta de prueba.
Si lo prefiere, haga clic en Consulta de prueba para probar la consulta.
Haga clic en Finalizar.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView hasta la página.
Si el menú contextual Tareas de GridView no aparece, haga clic con el botón secundario en el control GridView y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de GridView, en el cuadro Elegir origen de datos, haga clic en AccessDataSource1.
Probar la página
Ahora puede ejecutar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
El control GridView muestra todas las filas de datos de la tabla Categorías.
Pasos siguientes
Este tutorial describe los pasos básicos necesarios para trabajar con datos de Access en una página Web de ASP.NET. El modelo de enlace de datos de ASP.NET permite trabajar con datos de diferentes orígenes de la misma manera. Por ejemplo, puede hacer lo siguiente:
Usar controles para filtrar los datos que muestra la página.
Para obtener información detallada, vea Tutorial: Acceso a datos básico en páginas Web.
Actualizar, insertar o eliminar datos en una base de datos de Access.
Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.
Crear páginas para mostrar datos de Access de tablas que tienen una relación principal-detalle.
Para obtener información detallada, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.
Vea también
Tutorial: Acceso a datos básico en páginas Web
Este tutorial le muestra cómo crear una página simple enlazada a datos mediante controles diseñados especialmente para el acceso a datos.
Durante este tutorial aprenderá a hacer lo siguiente:
Conectarse a una base de datos de Microsoft SQL Server con la herramienta de desarrollo Web Microsoft Visual Web Developer.
Utilizar la característica de arrastrar y colocar para crear elementos de acceso a datos que se puedan utilizar en la página sin código.
Utilizar el control SqlDataSource para administrar el acceso a datos y los enlaces.
Hacer que se muestren datos con el control GridView.
Configurar el control GridView para permitir la ordenación y la paginación.
Crear una consulta filtrada con la que sólo se muestren los registros seleccionados.
Requisitos previos
Para poder completar este tutorial, necesitará lo siguiente:
Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.
Nota
Si necesita información sobre cómo iniciar sesión en el equipo en el que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizá tenga que actualizar la versión de MDAC que ya está instalada en el equipo. Para descargar la actual versión de MDAC, vea el Centro para desarrolladores de acceso a datos y almacenamiento.
Crear el sitio Web
Si ya ha creado un sitio Web en Visual Web Developer siguiendo los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio Web e ir a la sección siguiente. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo Sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación situado en el extremo derecho, escriba el nombre de la carpeta en la que desea conservar las páginas del sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Agregar un control GridView para mostrar datos
Para que se muestren datos en una página Web ASP.NET, necesita lo siguiente:
Una conexión con un origen de datos (como, por ejemplo, una base de datos).
En el procedimiento siguiente creará una conexión a la base de datos Northwind de SQL Server.
Un control de origen de datos en la página con el que se ejecuten las consultas y se administren los resultados de éstas.
Un control en la página para mostrar los datos.
En el procedimiento siguiente se mostrarán los datos en un control GridView. El control GridView obtendrá sus datos del control SqlDataSource.
Puede agregar estos elementos al sitio Web por separado. Sin embargo, para empezar resulta más fácil visualizar la presentación de datos con el control GridView y después utilizar asistentes para crear la conexión y el control del origen de datos. En el siguiente procedimiento se explica cómo crear los tres elementos que necesita para mostrar datos en la página.
Para agregar y configurar un control GridView que permita mostrar datos
En Visual Web Developer, cambie a la vista Diseño.
Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la página.
Si el menú contextual Tareas de GridView no aparece, haga clic con el botón secundario del mouse (ratón) en el control GridView y haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en.
Aparece el cuadro de diálogo Configuración de origen de datos.
Haga clic en Base de datos.
Así especifica que desea obtener datos de una base de datos que admite instrucciones SQL. Esto incluye a SQL Server y a otras bases de datos compatibles con OLE DB.
En el cuadro Especificar un id. para el origen de datos aparece un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar ese nombre.
Haga clic en Aceptar.
Aparece el asistente para orígenes de datos, que muestra una página en la que puede elegir una conexión.
Haga clic en Nueva conexión.
En el cuadro de diálogo Elegir origen de datos, en Origen de datos, haga clic en Microsoft SQL Server y, a continuación, haga clic en Continuar.
Aparecerá el cuadro de diálogo Agregar conexión.
En el cuadro Nombre de servidor, escriba el nombre del servidor SQL Server que desea utilizar.
Por lo que respecta a las credenciales de inicio de sesión, seleccione la opción que resulte apropiada para el acceso a la base de datos de SQL Server (seguridad integrada o id. y contraseña específicos) y, si es necesario, especifique un nombre de usuario y una contraseña.
Haga clic en Seleccionar o escribir nombre de base de datos y escriba Northwind.
Haga clic en Probar conexión y, cuando tenga la seguridad de que funciona, haga clic en Aceptar.
Aparece el asistente Configurar origen de datos - y se rellena la información de la conexión.
Haga clic en Siguiente.
Aparece el asistente, que muestra una página que le permite almacenar la cadena de conexión en el archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se tienen dos ventajas:
Es más seguro que el almacenamiento de la cadena de conexión en la página.
Puede reutilizar la misma cadena de conexión en varias páginas.
Asegúrese de que está activada la casilla de verificación Sí, guardar esta conexión como y haga clic en Siguiente. (Puede dejar el nombre predeterminado de la cadena de conexión, NorthwindConnectionString).
Aparece el asistente, que muestra una página en la que puede especificar los datos que desea obtener de la base de datos.
En Especificar columnas de una tabla o vista, en el cuadro Nombre, haga clic en Customers.
Bajo Columnas, active las casillas de verificación CustomerID, CompanyName y City.
Aparece el asistente, que en un cuadro situado en la parte inferior de la página muestra la instrucción SQL que se está creando.
Nota
El asistente le permite especificar criterios de selección (una cláusula WHERE) y otras opciones de la consulta SQL. Para esta parte del tutorial creará una instrucción simple sin opciones de selección ni ordenación.
Haga clic en Siguiente.
Haga clic en Consulta de prueba para asegurarse de que se obtienen los datos que desea.
Haga clic en Finalizar.
El asistente se cierra y vuelve a mostrarse la página. Al ejecutar el asistente, se han realizado dos tareas:
El asistente ha creado y configurado un control SqlDataSource (con el nombre (SqlDataSource1), que incorpora la información de conexión y consulta que especificó.
El asistente ha enlazado el control GridView al objeto SqlDataSource. Por consiguiente, el control GridView mostrará datos devueltos por el control SqlDataSource.
Si ve las propiedades para el control SqlDataSource, podrá observar que el asistente ha creado los valores para las propiedades ConnectionString y SelectQuery.
Nota
Puede cambiar con facilidad la apariencia del control GridView. En la vista Diseño, haga clic con el botón secundario del mouse (ratón) en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, haga clic en Formato automático y, a continuación, aplique un esquema.
Probar la página
Ahora puede ejecutar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
La página aparece en el explorador. El control GridView muestra todas las filas de datos de la tabla Customers.
Cierre el explorador.
Agregar ordenación y paginación
Puede agregar posibilidades de ordenación y paginación al control GridView sin escribir código.
Para agregar ordenación y paginación
En la vista Diseño, haga clic con el botón secundario del mouse (ratón) en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente.
En el menú contextual Tareas de GridView, active la casilla de verificación Habilitar ordenación.
Los encabezados de columna del control GridView cambian a vínculos.
En el menú contextual Tareas de GridView, active la casilla de verificación Habilitar paginación.
Se agrega un pie de página al control GridView con vínculos de número de página.
También puede utilizar Propiedades para cambiar el valor de la propiedad PageSize de 10 a un tamaño de página menor.
Presione CTRL+F5 para ejecutar la página.
Podrá hacer clic en un encabezado de columna para ordenar los datos por el contenido de esa columna. Si en el origen de datos hay más registros de los que permite el tamaño de página del control GridView, podrá utilizar los vínculos de exploración de páginas situados en la parte superior del control GridView para desplazarse entre las páginas.
Cierre el explorador.
Agregar filtrado
A menudo deseará que en la página sólo se muestren datos seleccionados. En esta parte del tutorial modificará la consulta para el control SqlDataSource de manera que los usuarios puedan seleccionar registros de clientes de una ciudad determinada.
En primer lugar, utilizará un control TextBox para crear un cuadro de texto en el que los usuarios puedan escribir el nombre de una ciudad. A continuación, cambiará la consulta para incluir un filtro parametrizado (cláusula WHERE). Como parte de ese proceso, creará un elemento de parámetro para el control SqlDataSource. El elemento de parámetro establece cómo obtendrá el control SqlDataSource el valor para su consulta parametrizada; concretamente, del cuadro de texto.
Cuando finalice esta parte del tutorial, la página podría tener una apariencia similar a la siguiente en la vista Diseño.
Para agregar el cuadro de texto que permite especificar una ciudad
Desde el grupo Estándar del Cuadro de herramientas, arrastre a la página un control TextBox y un control Button.
El control Button sólo se utiliza para devolver la página al servidor. En este caso no tendrá que escribir código.
En Propiedades, para el control TextBox, establezca ID como textCity.
Si lo desea, escriba Ciudad o un texto similar delante del cuadro de texto, como título.
En Propiedades para el control Button, establezca Text como Enviar.
Ahora puede modificar la consulta para que incluya un filtro.
Para modificar la consulta con un filtro parametrizado
Haga clic con el botón secundario del mouse (ratón) en el control SqlDataSource y, a continuación, seleccione Mostrar etiqueta inteligente.
En el menú Tareas de SqlDataSource, haga clic en Configurar origen de datos.
Aparecerá el asistente Configurar origen de datos -.
Haga clic en Siguiente.
El asistente muestra el comando SQL configurado actualmente para el control SqlDataSource.
Haga clic en WHERE.
Aparecerá la página Agregar cláusula WHERE.
En la lista Columna, haga clic en Ciudad.
En la lista Operador, haga clic en =.
En la lista Origen, haga clic en Control.
En Propiedades del parámetro, en la lista Id. de control, haga clic en textCity.
En los cinco pasos anteriores se especifica que con la consulta se obtendrá el valor de búsqueda de Ciudad del control TextBox que agregó en el procedimiento anterior.
Haga clic en Agregar.
La cláusula WHERE que ha creado aparece en un cuadro en la parte inferior de la página.
Haga clic en Aceptar para cerrar la página Agregar cláusula WHERE.
En el asistente Configurar origen de datos -, haga clic en Siguiente.
En la página Consulta de prueba, haga clic en Consulta de prueba.
Aparece el asistente, con la página Editor de valores del parámetro, en la que se solicita un valor para utilizarlo en la cláusula WHERE.
En el cuadro Valor, escriba Londres y, a continuación, haga clic en Aceptar.
Aparecen los registros de los clientes de Londres.
Haga clic en Finalizar para cerrar el asistente.
Ahora puede probar el filtrado.
Para probar el filtrado
Presione CTRL+F5 para ejecutar la página.
En el cuadro de texto, escriba Londres y, a continuación, haga clic en Enviar.
Aparece una lista de clientes de la ciudad de Londres en el control GridView.
Pruebe con otras ciudades, como Buenos Aires y Berlín.
Pasos siguientes
El acceso a datos constituye un aspecto importante en muchas aplicaciones Web, y en este tutorial sólo se da una ligera idea de lo que se puede hacer con los datos en las páginas Web. Quizás desee probar otras características relacionadas con el acceso a datos. Por ejemplo, puede hacer lo siguiente:
Trabajar con Microsoft Access en lugar de con SQL Server. (No se puede utilizar dependencia de caché de SQL con Access).
Para obtener información detallada, vea Tutorial: Crear una página Web para mostrar datos de una base de datos de Access.
Editar e insertar registros.
Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.
Trabajar con registros que tienen una relación de principal-detalle.
Para obtener información detallada, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.
Crear un componente de nivel medio (comercial) que se encargue del acceso a datos y, a continuación, utilizar ese recurso como origen de datos en una página.
Para obtener información detallada, vea Tutorial: Enlace de datos a un objeto comercial personalizado.
Durante este tutorial aprenderá a hacer lo siguiente:
Conectarse a una base de datos de Microsoft SQL Server con la herramienta de desarrollo Web Microsoft Visual Web Developer.
Utilizar la característica de arrastrar y colocar para crear elementos de acceso a datos que se puedan utilizar en la página sin código.
Utilizar el control SqlDataSource para administrar el acceso a datos y los enlaces.
Hacer que se muestren datos con el control GridView.
Configurar el control GridView para permitir la ordenación y la paginación.
Crear una consulta filtrada con la que sólo se muestren los registros seleccionados.
Requisitos previos
Para poder completar este tutorial, necesitará lo siguiente:
Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.
Nota
Si necesita información sobre cómo iniciar sesión en el equipo en el que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizá tenga que actualizar la versión de MDAC que ya está instalada en el equipo. Para descargar la actual versión de MDAC, vea el Centro para desarrolladores de acceso a datos y almacenamiento.
Crear el sitio Web
Si ya ha creado un sitio Web en Visual Web Developer siguiendo los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio Web e ir a la sección siguiente. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo Sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación situado en el extremo derecho, escriba el nombre de la carpeta en la que desea conservar las páginas del sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Agregar un control GridView para mostrar datos
Para que se muestren datos en una página Web ASP.NET, necesita lo siguiente:
Una conexión con un origen de datos (como, por ejemplo, una base de datos).
En el procedimiento siguiente creará una conexión a la base de datos Northwind de SQL Server.
Un control de origen de datos en la página con el que se ejecuten las consultas y se administren los resultados de éstas.
Un control en la página para mostrar los datos.
En el procedimiento siguiente se mostrarán los datos en un control GridView. El control GridView obtendrá sus datos del control SqlDataSource.
Puede agregar estos elementos al sitio Web por separado. Sin embargo, para empezar resulta más fácil visualizar la presentación de datos con el control GridView y después utilizar asistentes para crear la conexión y el control del origen de datos. En el siguiente procedimiento se explica cómo crear los tres elementos que necesita para mostrar datos en la página.
Para agregar y configurar un control GridView que permita mostrar datos
En Visual Web Developer, cambie a la vista Diseño.
Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la página.
Si el menú contextual Tareas de GridView no aparece, haga clic con el botón secundario del mouse (ratón) en el control GridView y haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en
Aparece el cuadro de diálogo Configuración de origen de datos.
Haga clic en Base de datos.
Así especifica que desea obtener datos de una base de datos que admite instrucciones SQL. Esto incluye a SQL Server y a otras bases de datos compatibles con OLE DB.
En el cuadro Especificar un id. para el origen de datos aparece un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar ese nombre.
Haga clic en Aceptar.
Aparece el asistente para orígenes de datos, que muestra una página en la que puede elegir una conexión.
Haga clic en Nueva conexión.
En el cuadro de diálogo Elegir origen de datos, en Origen de datos, haga clic en Microsoft SQL Server y, a continuación, haga clic en Continuar.
Aparecerá el cuadro de diálogo Agregar conexión.
En el cuadro Nombre de servidor, escriba el nombre del servidor SQL Server que desea utilizar.
Por lo que respecta a las credenciales de inicio de sesión, seleccione la opción que resulte apropiada para el acceso a la base de datos de SQL Server (seguridad integrada o id. y contraseña específicos) y, si es necesario, especifique un nombre de usuario y una contraseña.
Haga clic en Seleccionar o escribir nombre de base de datos y escriba Northwind.
Haga clic en Probar conexión y, cuando tenga la seguridad de que funciona, haga clic en Aceptar.
Aparece el asistente Configurar origen de datos -
Haga clic en Siguiente.
Aparece el asistente, que muestra una página que le permite almacenar la cadena de conexión en el archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se tienen dos ventajas:
Es más seguro que el almacenamiento de la cadena de conexión en la página.
Puede reutilizar la misma cadena de conexión en varias páginas.
Asegúrese de que está activada la casilla de verificación Sí, guardar esta conexión como y haga clic en Siguiente. (Puede dejar el nombre predeterminado de la cadena de conexión, NorthwindConnectionString).
Aparece el asistente, que muestra una página en la que puede especificar los datos que desea obtener de la base de datos.
En Especificar columnas de una tabla o vista, en el cuadro Nombre, haga clic en Customers.
Bajo Columnas, active las casillas de verificación CustomerID, CompanyName y City.
Aparece el asistente, que en un cuadro situado en la parte inferior de la página muestra la instrucción SQL que se está creando.
Nota
El asistente le permite especificar criterios de selección (una cláusula WHERE) y otras opciones de la consulta SQL. Para esta parte del tutorial creará una instrucción simple sin opciones de selección ni ordenación.
Haga clic en Siguiente.
Haga clic en Consulta de prueba para asegurarse de que se obtienen los datos que desea.
Haga clic en Finalizar.
El asistente se cierra y vuelve a mostrarse la página. Al ejecutar el asistente, se han realizado dos tareas:
El asistente ha creado y configurado un control SqlDataSource (con el nombre (SqlDataSource1), que incorpora la información de conexión y consulta que especificó.
El asistente ha enlazado el control GridView al objeto SqlDataSource. Por consiguiente, el control GridView mostrará datos devueltos por el control SqlDataSource.
Si ve las propiedades para el control SqlDataSource, podrá observar que el asistente ha creado los valores para las propiedades ConnectionString y SelectQuery.
Nota
Puede cambiar con facilidad la apariencia del control GridView. En la vista Diseño, haga clic con el botón secundario del mouse (ratón) en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, haga clic en Formato automático y, a continuación, aplique un esquema.
Probar la página
Ahora puede ejecutar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
La página aparece en el explorador. El control GridView muestra todas las filas de datos de la tabla Customers.
Cierre el explorador.
Agregar ordenación y paginación
Puede agregar posibilidades de ordenación y paginación al control GridView sin escribir código.
Para agregar ordenación y paginación
En la vista Diseño, haga clic con el botón secundario del mouse (ratón) en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente.
En el menú contextual Tareas de GridView, active la casilla de verificación Habilitar ordenación.
Los encabezados de columna del control GridView cambian a vínculos.
En el menú contextual Tareas de GridView, active la casilla de verificación Habilitar paginación.
Se agrega un pie de página al control GridView con vínculos de número de página.
También puede utilizar Propiedades para cambiar el valor de la propiedad PageSize de 10 a un tamaño de página menor.
Presione CTRL+F5 para ejecutar la página.
Podrá hacer clic en un encabezado de columna para ordenar los datos por el contenido de esa columna. Si en el origen de datos hay más registros de los que permite el tamaño de página del control GridView, podrá utilizar los vínculos de exploración de páginas situados en la parte superior del control GridView para desplazarse entre las páginas.
Cierre el explorador.
Agregar filtrado
A menudo deseará que en la página sólo se muestren datos seleccionados. En esta parte del tutorial modificará la consulta para el control SqlDataSource de manera que los usuarios puedan seleccionar registros de clientes de una ciudad determinada.
En primer lugar, utilizará un control TextBox para crear un cuadro de texto en el que los usuarios puedan escribir el nombre de una ciudad. A continuación, cambiará la consulta para incluir un filtro parametrizado (cláusula WHERE). Como parte de ese proceso, creará un elemento de parámetro para el control SqlDataSource. El elemento de parámetro establece cómo obtendrá el control SqlDataSource el valor para su consulta parametrizada; concretamente, del cuadro de texto.
Cuando finalice esta parte del tutorial, la página podría tener una apariencia similar a la siguiente en la vista Diseño.
Para agregar el cuadro de texto que permite especificar una ciudad
Desde el grupo Estándar del Cuadro de herramientas, arrastre a la página un control TextBox y un control Button.
El control Button sólo se utiliza para devolver la página al servidor. En este caso no tendrá que escribir código.
En Propiedades, para el control TextBox, establezca ID como textCity.
Si lo desea, escriba Ciudad o un texto similar delante del cuadro de texto, como título.
En Propiedades para el control Button, establezca Text como Enviar.
Ahora puede modificar la consulta para que incluya un filtro.
Para modificar la consulta con un filtro parametrizado
Haga clic con el botón secundario del mouse (ratón) en el control SqlDataSource y, a continuación, seleccione Mostrar etiqueta inteligente.
En el menú Tareas de SqlDataSource, haga clic en Configurar origen de datos.
Aparecerá el asistente Configurar origen de datos -
Haga clic en Siguiente.
El asistente muestra el comando SQL configurado actualmente para el control SqlDataSource.
Haga clic en WHERE.
Aparecerá la página Agregar cláusula WHERE.
En la lista Columna, haga clic en Ciudad.
En la lista Operador, haga clic en =.
En la lista Origen, haga clic en Control.
En Propiedades del parámetro, en la lista Id. de control, haga clic en textCity.
En los cinco pasos anteriores se especifica que con la consulta se obtendrá el valor de búsqueda de Ciudad del control TextBox que agregó en el procedimiento anterior.
Haga clic en Agregar.
La cláusula WHERE que ha creado aparece en un cuadro en la parte inferior de la página.
Haga clic en Aceptar para cerrar la página Agregar cláusula WHERE.
En el asistente Configurar origen de datos -
En la página Consulta de prueba, haga clic en Consulta de prueba.
Aparece el asistente, con la página Editor de valores del parámetro, en la que se solicita un valor para utilizarlo en la cláusula WHERE.
En el cuadro Valor, escriba Londres y, a continuación, haga clic en Aceptar.
Aparecen los registros de los clientes de Londres.
Haga clic en Finalizar para cerrar el asistente.
Ahora puede probar el filtrado.
Para probar el filtrado
Presione CTRL+F5 para ejecutar la página.
En el cuadro de texto, escriba Londres y, a continuación, haga clic en Enviar.
Aparece una lista de clientes de la ciudad de Londres en el control GridView.
Pruebe con otras ciudades, como Buenos Aires y Berlín.
Pasos siguientes
El acceso a datos constituye un aspecto importante en muchas aplicaciones Web, y en este tutorial sólo se da una ligera idea de lo que se puede hacer con los datos en las páginas Web. Quizás desee probar otras características relacionadas con el acceso a datos. Por ejemplo, puede hacer lo siguiente:
Trabajar con Microsoft Access en lugar de con SQL Server. (No se puede utilizar dependencia de caché de SQL con Access).
Para obtener información detallada, vea Tutorial: Crear una página Web para mostrar datos de una base de datos de Access.
Editar e insertar registros.
Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.
Trabajar con registros que tienen una relación de principal-detalle.
Para obtener información detallada, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.
Crear un componente de nivel medio (comercial) que se encargue del acceso a datos y, a continuación, utilizar ese recurso como origen de datos en una página.
Para obtener información detallada, vea Tutorial: Enlace de datos a un objeto comercial personalizado.
Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer
Este tutorial muestra cómo crear una página principal y varias páginas de contenido. Las páginas principales permiten crear un diseño de página (una plantilla) y, a continuación, crear páginas independientes con contenido que se combina con la página principal en tiempo de ejecución. Para obtener más información sobre las páginas principales, vea Información general sobre las páginas principales ASP.NET.
Las tareas ilustradas en este tutorial incluyen:
Crear una página principal en Microsoft Visual Web Developer.
Crear una página ASP.NET con contenido que desea mostrar en la página principal.
Ejecutar las páginas principales para mostrar contenido diferente.
Seleccionar una página principal en tiempo de ejecución.
Requisitos previos
Para poder completar este tutorial, necesitará:
Visual Web Developer (Visual Studio).
.NET Framework.
Opcionalmente, un archivo .jpg, .gif u otro archivo gráfico que pueda utilizar como logotipo en su página principal. Se recomienda que el logotipo no tenga más de 48 píxeles de ancho. Sin embargo, mostrar un logotipo es opcional y el tamaño exacto del gráfico no es importante para el tutorial.
Crear un sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos de Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web e ir a la sección siguiente, "Crear la página principal". De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Servicio Web ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea guardar las páginas de su sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Crear la página principal
La página principal es la plantilla que define la apariencia que tendrán las páginas. En esta sección, creará primero una página principal. A continuación, utilizará una tabla para diseñar la página principal con un menú, un logotipo y un pie que aparecerán en todas las páginas del sitio. También trabajará con un marcador de posición de contenido, que es un área de la página que se puede reemplazar por información en una página de contenido.
Para crear la página principal
En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Página principal.
En el cuadro Nombre, escriba Master1.
Active la casilla de verificación Colocar el código en un archivo independiente.
Nota
En este tutorial se supone que está utilizando archivos de código subyacente para todas las páginas. Si utiliza una página ASP.NET de un único archivo, el código que se muestra en el tutorial funcionará, pero aparecerá en la vista Código fuente, no en un archivo de código independiente.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar y, a continuación, haga clic en Agregar.
La nueva página principal se abre en la vista Código fuente.
En la parte superior de la página hay una declaración @ Master en lugar de la declaración @ Page que normalmente se encuentra en la parte superior de las páginas ASP.NET. El cuerpo de la página contiene un control, que es el área de la página principal donde se combinará el contenido reemplazable de las páginas en tiempo de ejecución. En el tutorial, trabajará después más con el marcador de posición de contenido.
Diseñar la página principal
La página principal define la apariencia de las páginas del sitio. Puede contener cualquier combinación de texto estático y controles. Una página principal también contiene uno o más marcadores de posición de contenido que indican dónde aparecerá el contenido dinámico cuando se muestren las páginas.
En este tutorial, utilizará una tabla como ayuda para colocar los elementos en la página. Empezará por crear una tabla de diseño para alojar los elementos de la página principal. Más adelante en esta sección colocará el control de marcador de posición de contenido que ya está en la página.
Para crear una tabla de diseño para la página principal
Con el archivo Master1.master seleccionado en la vista Código fuente, establezca el esquema de destino para la validación en Microsoft Internet Explorer 6.0. Para establece este valor, puede utilizar la lista desplegable de la barra de herramientas o seleccionar Opciones en el menú Herramientas y, a continuación, hacer clic en Validación.
Cambie a la vista Diseño.
En la lista desplegable de la parte superior de la ventana Propiedades, seleccione DOCUMENTO y, a continuación, establezca BgColor en un color distintivo, por ejemplo azul.
El color que selecciona no es importante. Más adelante en este tutorial creará una segunda página principal sin color, que contrastará con lo que seleccione aquí.
Haga clic en la página donde desea colocar la tabla de diseño.
Nota
No coloque la tabla de diseño en el control ContentPlaceHolder.
En el menú Diseño, haga clic en Insertar tabla.
En el cuadro de diálogo Insertar tabla, haga clic en Plantilla. En la lista haga clic en Encabezado, pie de página y lado y, a continuación, haga clic en Aceptar.
La plantilla define la organización de filas y celdas en la tabla. La plantilla que ha seleccionado crea tres filas y la fila central se divide en dos celdas.
Configure las opciones siguientes:
En la fila central, haga clic en la columna situada más a la izquierda y, a continuación, establezca su Ancho en 48 en la ventana Propiedades.
Haga clic en la fila superior y, a continuación, establezca su Alto en 48 en la ventana Propiedades.
Haga clic en la fila inferior y, a continuación, establezca su Alto en 48 en la ventana Propiedades.
Nota
Para establecer el alto y ancho, arrastre los bordes de la celda o seleccione la celda y establezca los valores en la ventana Propiedades.
Seleccione todas las celdas de la tabla y establezca BgColor en un color diferente del color de fondo y VAlign en superior.
Después de diseñar la tabla, puede agregar el contenido a la página principal que aparecerá en todas las páginas. Agregará un mensaje de copyright como pie de página y agregará un menú. Si tiene un gráfico de logotipo disponible, también puede agregarlo.
Para agregar contenido estático a la página principal
Haga clic en la celda inferior y, a continuación, escriba el texto del pie de página, por ejemplo Copyright 2005 Contoso Inc.
En el Cuadro de herramientas, arrastre un control Menu desde el grupo de controles Exploración hasta la celda superior.
Cree un menú siguiendo estos pasos:
Establezca la propiedad Menu del control Orientation en Horizontal.
Haga clic en la etiqueta inteligente en el control Menu y haga clic en Editar elementos de menú en el cuadro de diálogo Tareas de menú.
En Elementos, haga clic dos veces en el icono Agregar un nodo raíz para agregar dos elementos de menú:
Haga clic en el primer nodo y, a continuación, establezca la propiedad Text en Home y la propiedad NavigateUrl en Home.aspx.
Haga clic en el segundo nodo y, a continuación, establezca la propiedad Text en About y la propiedad NavigateUrl en About.aspx.
Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de elementos de menú.
Si tiene un archivo gráfico disponible para utilizarlo como logotipo, siga estos pasos para colocarlo en la página principal:
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar elemento existente.
Desplácese a su archivo gráfico, selecciónelo y, a continuación, haga clic en Agregar.
En el Cuadro de herramientas, arrastre un control Image desde el grupo Estándar hasta la columna central izquierda de la tabla.
Establezca la propiedad ImageUrl del control Image en el nombre del archivo gráfico.
Ahora puede colocar el marcador de posición de contenido para especificar dónde puede mostrar contenido la página principal en tiempo de ejecución.
Para agregar un marcador de posición de contenido
Arrastre el control ContentPlaceHolder a la celda central derecha.
La propiedad ID del control es ContentPlaceholder1. Puede dejar este nombre o cambiarlo. Si cambia el nombre, anótelo porque necesitará recordarlo más adelante.
Guarde la página.
Crear contenido para la página principal
La página principal proporciona la plantilla para el contenido. El contenido de la página principal se define creando una página ASP.NET que se asocia a la página principal. La página de contenido es un formulario especializado de una página ASP.NET que incluye sólo el contenido que se va a combinar con la página principal. En la página de contenido, agregará el texto y los controles que desee mostrar cuando los usuarios soliciten la página.
En este tutorial, agregará dos páginas con contenido para la página principal. La primera es una página de inicio y la segunda es una página Acerca de.
Para crear la página de inicio
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Home.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Active la casilla de verificación Seleccionar la página principal y, a continuación, haga clic en Agregar.
Aparece el cuadro de diálogo Seleccionar la página principal.
Haga clic en Master1.master y en Aceptar.
Se crea un nuevo archivo .aspx. La página contiene una directiva @ Page que asocia la página actual a la página principal seleccionada con el atributo MasterPageFile, tal como se muestra en el ejemplo de código siguiente.
Visual Basic
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %>
C#
<%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>
La página también contiene un elemento con el que trabajará luego.
Una página de contenido no tiene los elementos usuales que constituyen una página ASP.NET, como html, body o form. En su lugar, el contenido que se desea mostrar en la página principal se agrega reemplazando las áreas de marcador de posición creadas en dicha página.
Para agregar contenido a la página de inicio
Cambie a la vista Diseño.
El área que creó como un control ContentPlaceHolder en la página principal se muestra como un control Content en la nueva página de contenido. El resto del contenido de la página principal se muestra para que pueda ver el diseño, pero aparece atenuado porque no puede cambiarlo mientras está editando una página de contenido.
En la lista desplegable de la ventana Propiedades, haga clic en DOCUMENTO y, a continuación, establezca Título en Contoso Home Page.
Puede establecer el título de cada página de contenido de forma independiente a fin de que se muestre el título correcto en el explorador cuando el contenido se combine con la página principal. La información del título se almacena en la directiva @ Page de la página de contenido.
En el control Content, escriba Welcome to the Contoso Web Site, seleccione el texto y, a continuación, para darle el formato Encabezado 1, seleccione el texto y haga clic en Encabezado 1 en la lista desplegable Formato del bloque situada sobre el Cuadro de herramientas.
Presione ENTRAR para crear una nueva línea en blanco en el control Content y, a continuación, escriba Thank you for visiting our site.
El texto que agrega aquí no es importante; puede escribir cualquier texto que le ayude a reconocer que es la página de inicio.
Guarde la página.
Puede crear la página Acerca de tal como creó la página de inicio.
Para crear la página Acerca de
Utilice los mismos pasos que al crear la página de inicio para agregar una nueva página de contenido denominada About.aspx.
Asegúrese de asociar la nueva página a la página Master1.master como hizo con la página de inicio.
Cambie el título de la página a Contoso About Page.
En el área de contenido, escriba About Contoso y, a continuación, para dar formato al texto como Encabezado 1, seleccione el texto y haga clic en Encabezado 1 en la lista desplegable Formato del bloque situada sobre el Cuadro de herramientas.
Presione ENTRAR para crear una nueva línea y, a continuación, escriba Since 1982, Contoso has provided high-quality software services.
Guarde la página.
Probar las páginas
Puede probar las páginas ejecutándolas tal como haría con cualquier página ASP.NET.
Para probar las páginas
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5.
ASP.NET combina el contenido de la página Home.aspx con el diseño de la página Master1.master en una sola página y muestra el resultado en el explorador. Observe que la dirección URL de la página es Home.aspx; no hay ninguna referencia en el explorador a la página principal.
Haga clic en el vínculo About.
Se muestra la página About.aspx. También se combina con la página Master1.master.
Hacer referencia a miembros de la página principal
El código de las páginas de contenido puede hacer referencia a miembros de la página principal, como propiedades o métodos públicos y controles de la página principal. En esta parte del tutorial, creará una propiedad en la página principal y, a continuación, utilizará el valor de la propiedad en las páginas de contenido. La premisa es que el nombre de la compañía para el sitio Web está almacenado como una propiedad en la página principal y cualquier referencia a él en las páginas de contenido se basa en la propiedad de la página principal.
El primer paso es agregar una propiedad a la página principal.
Para agregar una propiedad a la página principal
Cambie a la página Master1.master o ábrala.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Master1.master y seleccione Ver código para abrir el editor de código.
Nota
De forma predeterminada, Visual Web Developer crea páginas que utilizan el modelo de código subyacente. Si lo prefiere, puede crear el código utilizando el modelo de un solo archivo. Para obtener más información, vea Modelo de código de las páginas Web ASP.NET.
En la definición de clase, escriba el código siguiente.
Visual Basic
Public Property CompanyName() As String
Get
Return CType(ViewState("companyName"), String)
End Get
Set(ByVal Value As String)
ViewState("companyName") = Value
End Set
End Property
C#
public String CompanyName
{
get { return (String) ViewState["companyName"]; }
set { ViewState["companyName"] = value; }
}
El código crea una propiedad denominada CompanyName para la página principal. El valor se almacena en estado de vista para que se conserve entre las devoluciones de datos.
En la definición de clase (pero no dentro del código de la propiedad), agregue el código siguiente.
Visual Basic
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Init
Me.CompanyName = "Contoso"
End Sub
C#
void Page_Init(Object sender, EventArgs e)
{
this.CompanyName = "Contoso";
}
En este ejemplo, integrará el valor de la propiedad CompanyName en la página.
Ahora puede modificar la página de contenido para utilizar la propiedad CompanyName de la página principal.
Para hacer referencia a la propiedad CompanyName en la página de contenido
Cambie a la página Home.aspx o ábrala.
Cambie a la vista Código fuente.
En la parte superior de la página, bajo la directiva @ Page, agregue la directiva @ MasterType siguiente:
<%@ MasterType virtualpath="~/Master1.master" %>
La directiva enlaza la propiedad Master de la página de contenido, que utilizará en breve, a la página Master1.master.
Cambie a la vista Diseño.
En el control Content, cambie el texto a Welcome to the Web site of.
En el Cuadro de herramientas, arrastre un control Label desde el grupo Estándar hasta el control Content y coloque después el texto estático siguiente:
Welcome to the Web site of [Etiqueta]
Establezca la propiedad ID del control Label en CompanyName.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Home.aspx y seleccione Ver código para abrir el editor de código.
En la definición de clase, agregue el código siguiente.
Visual Basic
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Load
CompanyName.Text = Master.CompanyName
End Sub
C#
void Page_Load(Object sender, EventArgs e)
{
CompanyName.Text = Master.CompanyName;
}
La propiedad Master de la página de contenido devuelve una referencia a la página principal tal como se define en la directiva @ MasterType que agregó en el paso 3.
Ahora puede probar la página de contenido para asegurarse de que hace referencia correctamente a la propiedad CompanyName de la página principal.
Para probar la referencia a la propiedad de la página principal
Cambie a la página Home.aspx o ábrala y, a continuación, presione CTRL+F5 para ejecutarla.
La página se muestra en el explorador con el texto Welcome to the Web site of Contoso
Cierre el explorador.
Cambie a la página de código subyacente Master1.master o ábrala.
Cambie el controlador Page_Init para asignar un nombre de compañía diferente a la propiedad, como en el ejemplo de código siguiente.
Visual Basic
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Init
Me.CompanyName = "New Company Name"
End Sub
C#
void Page_Init(Object sender, EventArgs e)
{
this.CompanyName = "New Company Name";
}
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5 para ejecutarla de nuevo.
Esta vez, el nombre de la compañía actualizado aparece en la página.
Notas
Hay otros aspectos que debe tener en cuenta al trabajar con una página principal:
En una aplicación real, probablemente almacenaría la información similar al nombre de la compañía en el archivo de configuración y la leería directamente en las páginas de contenido. Sin embargo, el escenario descrito aquí proporciona una ilustración simple de cómo hacer referencia a los miembros de página principal en páginas de contenido.
Incluso puede tener acceso a los miembros de la página principal sin utilizar una directiva @ MasterType. Sin embargo, para hacerlo debe convertir la propiedad System.Web.UI.Page.Master en el tipo de página principal apropiado (la propiedad Master es null si una página no tiene su correspondiente página principal). Para obtener más información, vea Trabajar con las páginas principales ASP.NET mediante programación.
Puede hacer referencia a los controles en la página principal utilizando el método Master.FindControls. Para obtener más información, vea Trabajar con las páginas principales ASP.NET mediante programación.
Cambiar las páginas principales dinámicamente
Bajo ciertas circunstancias, quizás desee poder cambiar las páginas principales dinámicamente; es decir, utilizar código que establezca la página principal para una página de contenido. Por ejemplo, es posible que desee permitir a los usuarios seleccionar entre varios diseños y establecer la página principal según sus preferencias.
En esta parte del tutorial, agregará una segunda página principal al sitio Web y creará botones que permitan al usuario cambiar entre dos páginas principales. Como ambas páginas principales serán muy similares, hará una copia de la primera y la modificará para que actúe como la segunda.
Para realizar una copia de la página principal
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Master1.master y, a continuación, haga clic en Copiar.
Haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Pegar.
Se agrega al sitio Web una página principal con el nombre Copia de master1.master.
Haga clic con el botón secundario del mouse en Copia de master1.master, haga clic en Cambiar nombre y, a continuación, asigne el nombre Master2.master a la nueva página principal.
Abra Master2.master y, en la directiva @ Master, cambie Master1 a Master2.
La directiva de página finalizada tendrá una apariencia similar al ejemplo de código siguiente.
Visual Basic
<%@ Master Language="VB" CodeFile="Master2.master.vb" Inherits="Master2" %>
C#
<%@ Master Language="C#" CodeFile="Master2.master.cs" Inherits="Master2" %>
Cambie a la vista Diseño.
En la ventana Propiedades, en la lista desplegable de la parte superior, haga clic en DOCUMENTO.
Borre la propiedad BgColor.
La nueva página principal tendrá la misma apariencia y funcionamiento que Master1.master, pero no tendrá ningún color de fondo.
Abra el archivo de código de Master2.master y cambie el nombre de la clase en el archivo de código subyacente de la página principal de Master1 a Master2 de manera que coincida con el valor del atributo Inherits de la directiva <%@ Master %> de la página.
El código debe tener la apariencia del ejemplo siguiente.
Visual Basic
Partial Class Master2
C#
public partial class Master2 : System.Web.UI.MasterPage
El paso siguiente es agregar a cada página principal un botón que permita al usuario seleccionar la página principal alternativa.
Para agregar los botones para seleccionar una página principal alternativa
Cambie a la página Master2.master o ábrala.
En el Cuadro de herramientas, arrastre un control LinkButton desde el nodo Estándar hasta la página y colóquelo bajo el menú de la celda superior de la tabla.
Establezca la propiedad Text del botón en Colorful.
Haga doble clic en el botón a fin de crear un controlador para su evento Click y, a continuación, agregue el código resaltado siguiente.
Visual Basic
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_
Handles LinkButton1.Click
Session("masterpage") = "Master1.master"
Response.Redirect(Request.Url.ToString())
End Sub
C#
void LinkButton1_Click(Object sender, EventArgs e)
{
Session["masterpage"] = "Master1.master";
Response.Redirect(Request.Url.ToString());
}
El código carga el nombre de archivo de la página principal alternativa en una variable de sesión persistente y, a continuación, vuelve a cargar la página actual. (La propiedad Url devuelve un objeto Uri que hace referencia a la página actual.) En un momento, creará el código de la página de contenido que utilizará el nombre de la página principal.
Cambie a la página Master1.master o ábrala en la vista Diseño.
Agregue un control LinkButton como hizo en los pasos 1 y 2, y establezca su propiedad Text en Plain.
Haga doble clic en el botón Plain a fin de crear un controlador para su evento Click y, a continuación, agregue el código resaltado siguiente.
Visual Basic
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_
Handles LinkButton1.Click
Session("masterpage") = "Master2.master"
Response.Redirect(Request.Url.ToString())
End Sub
C#
void LinkButton1_Click(Object sender, EventArgs e)
{
Session["masterpage"] = "Master2.master";
Response.Redirect(Request.Url.ToString());
}
Este código es igual que el del botón de la página Master2.master, excepto en que carga una página principal alternativa.
Ahora va a escribir el código de la página de contenido que cargará dinámicamente la página principal seleccionada por el usuario.
Para escribir el código para seleccionar dinámicamente la página principal
Cambie a la página About.aspx o ábrala.
Nota
La página de inicio que ya ha creado contiene una directiva @ MasterType que la enlaza efectivamente a una página principal única (Master1.master). Por tanto, no podrá asignar páginas principales dinámicamente a la página de inicio y, en cambio, trabajará con otras páginas que ha creado.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en About.aspx y seleccione Ver código para abrir el editor de código.
En la definición de clase, agregue el código siguiente.
Visual Basic
Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.PreInit
If Not Session("masterpage") Is Nothing Then
Me.MasterPageFile = CType(Session("masterpage"), String)
End If
End Sub
C#
void Page_PreInit(Object sender, EventArgs e)
{
if(Session["masterpage"] != null)
{
this.MasterPageFile = (String) Session["masterpage"];
}
}
El código establece el valor de la propiedad MasterPageFile de la página actual en el valor de la variable de sesión, si hay alguno. Este código se debe ejecutar en el controlador Page_PreInit; no se puede ejecutar en un controlador que se produzca después que Page_PreInit (por ejemplo, en el controlador Page_Init), porque la página principal debe configurarse para poder crear una instancia de ella antes de que tenga lugar cualquier inicialización posterior.
Ahora puede probar las páginas principales dinámicas.
Para probar las páginas principales dinámicas
En la página About.aspx, presione CTRL+F5 para ejecutar la página.
La página se muestra en el explorador combinada con su página principal predeterminada, Master1.master.
Haga clic en el vínculo Plain.
Se vuelve a mostrar la página, esta vez combinada con Master2.master, que no tiene ningún color de fondo.
Haga clic en el vínculo Colorful.
La página se muestra de nuevo utilizando Master1.master.
Notas
Hay otros aspectos que debe tener en cuenta al trabajar con páginas principales dinámicas:
El escenario de esta sección para cambiar las páginas principales se ha simplificado para mantener el tutorial centrado en las páginas principales. En una aplicación real, probablemente mostraría varios diseños y, a continuación, almacenaría las preferencias del usuario utilizando perfiles. Para obtener información detallada, vea Información general sobre las propiedades de perfil de ASP.NET.
Puede configurar el sitio Web para que todas las páginas utilicen la misma página principal. Quizás tenga unas cuantas páginas que deberían utilizar una página principal alternativa; puede configurarlas en el código de una forma similar a la mostrada en esta sección del tutorial. Para obtener más información, vea "Ámbito de las páginas principales" en Información general sobre las páginas principales ASP.NET.
Tiene que agregar el código de la página Home.aspx a cada página donde desee reemplazar la página principal predeterminada.
Pasos siguientes
Este tutorial muestra la funcionalidad básica de páginas principales. Quizás desee probar otras características de las páginas principales. Por ejemplo, podría:
Crear páginas principales que tienen varios marcadores de posición de contenido. Puede llenar a continuación uno o más marcadores de posición de contenido para cada página que muestre.
Definir marcadores de posición de contenido predeterminado. Si una página ASP.NET no proporciona el contenido para el marcador de posición, la página principal muestra el contenido predeterminado.
Tener acceso a los miembros de la página principal desde las páginas de contenido mediante programación. Esto permite cambiar dinámicamente la apariencia de la página principal en tiempo de ejecución. Para obtener información detallada, vea Cómo: Hacer referencia al contenido de la página principal ASP.NET.
Utilizar el filtrado de dispositivos con las páginas principales a fin de crear diferentes diseños para distintos dispositivos, por ejemplo un diseño para exploradores y otro para un tipo de teléfono concreto. Para obtener información detallada, vea Información general sobre el filtrado de dispositivos de ASP.NET.
Obtener información sobre cómo puede colocar unas páginas principales dentro de otras para crear partes divididas en componentes. Para obtener información detallada, vea Páginas principales ASP.NET anidadas.
Las tareas ilustradas en este tutorial incluyen:
Crear una página principal en Microsoft Visual Web Developer.
Crear una página ASP.NET con contenido que desea mostrar en la página principal.
Ejecutar las páginas principales para mostrar contenido diferente.
Seleccionar una página principal en tiempo de ejecución.
Requisitos previos
Para poder completar este tutorial, necesitará:
Visual Web Developer (Visual Studio).
.NET Framework.
Opcionalmente, un archivo .jpg, .gif u otro archivo gráfico que pueda utilizar como logotipo en su página principal. Se recomienda que el logotipo no tenga más de 48 píxeles de ancho. Sin embargo, mostrar un logotipo es opcional y el tamaño exacto del gráfico no es importante para el tutorial.
Crear un sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos de Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web e ir a la sección siguiente, "Crear la página principal". De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Servicio Web ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea guardar las páginas de su sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Crear la página principal
La página principal es la plantilla que define la apariencia que tendrán las páginas. En esta sección, creará primero una página principal. A continuación, utilizará una tabla para diseñar la página principal con un menú, un logotipo y un pie que aparecerán en todas las páginas del sitio. También trabajará con un marcador de posición de contenido, que es un área de la página que se puede reemplazar por información en una página de contenido.
Para crear la página principal
En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Página principal.
En el cuadro Nombre, escriba Master1.
Active la casilla de verificación Colocar el código en un archivo independiente.
Nota
En este tutorial se supone que está utilizando archivos de código subyacente para todas las páginas. Si utiliza una página ASP.NET de un único archivo, el código que se muestra en el tutorial funcionará, pero aparecerá en la vista Código fuente, no en un archivo de código independiente.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar y, a continuación, haga clic en Agregar.
La nueva página principal se abre en la vista Código fuente.
En la parte superior de la página hay una declaración @ Master en lugar de la declaración @ Page que normalmente se encuentra en la parte superior de las páginas ASP.NET. El cuerpo de la página contiene un control
Diseñar la página principal
La página principal define la apariencia de las páginas del sitio. Puede contener cualquier combinación de texto estático y controles. Una página principal también contiene uno o más marcadores de posición de contenido que indican dónde aparecerá el contenido dinámico cuando se muestren las páginas.
En este tutorial, utilizará una tabla como ayuda para colocar los elementos en la página. Empezará por crear una tabla de diseño para alojar los elementos de la página principal. Más adelante en esta sección colocará el control de marcador de posición de contenido que ya está en la página.
Para crear una tabla de diseño para la página principal
Con el archivo Master1.master seleccionado en la vista Código fuente, establezca el esquema de destino para la validación en Microsoft Internet Explorer 6.0. Para establece este valor, puede utilizar la lista desplegable de la barra de herramientas o seleccionar Opciones en el menú Herramientas y, a continuación, hacer clic en Validación.
Cambie a la vista Diseño.
En la lista desplegable de la parte superior de la ventana Propiedades, seleccione DOCUMENTO y, a continuación, establezca BgColor en un color distintivo, por ejemplo azul.
El color que selecciona no es importante. Más adelante en este tutorial creará una segunda página principal sin color, que contrastará con lo que seleccione aquí.
Haga clic en la página donde desea colocar la tabla de diseño.
Nota
No coloque la tabla de diseño en el control ContentPlaceHolder.
En el menú Diseño, haga clic en Insertar tabla.
En el cuadro de diálogo Insertar tabla, haga clic en Plantilla. En la lista haga clic en Encabezado, pie de página y lado y, a continuación, haga clic en Aceptar.
La plantilla define la organización de filas y celdas en la tabla. La plantilla que ha seleccionado crea tres filas y la fila central se divide en dos celdas.
Configure las opciones siguientes:
En la fila central, haga clic en la columna situada más a la izquierda y, a continuación, establezca su Ancho en 48 en la ventana Propiedades.
Haga clic en la fila superior y, a continuación, establezca su Alto en 48 en la ventana Propiedades.
Haga clic en la fila inferior y, a continuación, establezca su Alto en 48 en la ventana Propiedades.
Nota
Para establecer el alto y ancho, arrastre los bordes de la celda o seleccione la celda y establezca los valores en la ventana Propiedades.
Seleccione todas las celdas de la tabla y establezca BgColor en un color diferente del color de fondo y VAlign en superior.
Después de diseñar la tabla, puede agregar el contenido a la página principal que aparecerá en todas las páginas. Agregará un mensaje de copyright como pie de página y agregará un menú. Si tiene un gráfico de logotipo disponible, también puede agregarlo.
Para agregar contenido estático a la página principal
Haga clic en la celda inferior y, a continuación, escriba el texto del pie de página, por ejemplo Copyright 2005 Contoso Inc.
En el Cuadro de herramientas, arrastre un control Menu desde el grupo de controles Exploración hasta la celda superior.
Cree un menú siguiendo estos pasos:
Establezca la propiedad Menu del control Orientation en Horizontal.
Haga clic en la etiqueta inteligente en el control Menu y haga clic en Editar elementos de menú en el cuadro de diálogo Tareas de menú.
En Elementos, haga clic dos veces en el icono Agregar un nodo raíz para agregar dos elementos de menú:
Haga clic en el primer nodo y, a continuación, establezca la propiedad Text en Home y la propiedad NavigateUrl en Home.aspx.
Haga clic en el segundo nodo y, a continuación, establezca la propiedad Text en About y la propiedad NavigateUrl en About.aspx.
Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de elementos de menú.
Si tiene un archivo gráfico disponible para utilizarlo como logotipo, siga estos pasos para colocarlo en la página principal:
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar elemento existente.
Desplácese a su archivo gráfico, selecciónelo y, a continuación, haga clic en Agregar.
En el Cuadro de herramientas, arrastre un control Image desde el grupo Estándar hasta la columna central izquierda de la tabla.
Establezca la propiedad ImageUrl del control Image en el nombre del archivo gráfico.
Ahora puede colocar el marcador de posición de contenido para especificar dónde puede mostrar contenido la página principal en tiempo de ejecución.
Para agregar un marcador de posición de contenido
Arrastre el control ContentPlaceHolder a la celda central derecha.
La propiedad ID del control es ContentPlaceholder1. Puede dejar este nombre o cambiarlo. Si cambia el nombre, anótelo porque necesitará recordarlo más adelante.
Guarde la página.
Crear contenido para la página principal
La página principal proporciona la plantilla para el contenido. El contenido de la página principal se define creando una página ASP.NET que se asocia a la página principal. La página de contenido es un formulario especializado de una página ASP.NET que incluye sólo el contenido que se va a combinar con la página principal. En la página de contenido, agregará el texto y los controles que desee mostrar cuando los usuarios soliciten la página.
En este tutorial, agregará dos páginas con contenido para la página principal. La primera es una página de inicio y la segunda es una página Acerca de.
Para crear la página de inicio
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Home.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Active la casilla de verificación Seleccionar la página principal y, a continuación, haga clic en Agregar.
Aparece el cuadro de diálogo Seleccionar la página principal.
Haga clic en Master1.master y en Aceptar.
Se crea un nuevo archivo .aspx. La página contiene una directiva @ Page que asocia la página actual a la página principal seleccionada con el atributo MasterPageFile, tal como se muestra en el ejemplo de código siguiente.
Visual Basic
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %>
C#
<%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>
La página también contiene un elemento
Una página de contenido no tiene los elementos usuales que constituyen una página ASP.NET, como html, body o form. En su lugar, el contenido que se desea mostrar en la página principal se agrega reemplazando las áreas de marcador de posición creadas en dicha página.
Para agregar contenido a la página de inicio
Cambie a la vista Diseño.
El área que creó como un control ContentPlaceHolder en la página principal se muestra como un control Content en la nueva página de contenido. El resto del contenido de la página principal se muestra para que pueda ver el diseño, pero aparece atenuado porque no puede cambiarlo mientras está editando una página de contenido.
En la lista desplegable de la ventana Propiedades, haga clic en DOCUMENTO y, a continuación, establezca Título en Contoso Home Page.
Puede establecer el título de cada página de contenido de forma independiente a fin de que se muestre el título correcto en el explorador cuando el contenido se combine con la página principal. La información del título se almacena en la directiva @ Page de la página de contenido.
En el control Content, escriba Welcome to the Contoso Web Site, seleccione el texto y, a continuación, para darle el formato Encabezado 1, seleccione el texto y haga clic en Encabezado 1 en la lista desplegable Formato del bloque situada sobre el Cuadro de herramientas.
Presione ENTRAR para crear una nueva línea en blanco en el control Content y, a continuación, escriba Thank you for visiting our site.
El texto que agrega aquí no es importante; puede escribir cualquier texto que le ayude a reconocer que es la página de inicio.
Guarde la página.
Puede crear la página Acerca de tal como creó la página de inicio.
Para crear la página Acerca de
Utilice los mismos pasos que al crear la página de inicio para agregar una nueva página de contenido denominada About.aspx.
Asegúrese de asociar la nueva página a la página Master1.master como hizo con la página de inicio.
Cambie el título de la página a Contoso About Page.
En el área de contenido, escriba About Contoso y, a continuación, para dar formato al texto como Encabezado 1, seleccione el texto y haga clic en Encabezado 1 en la lista desplegable Formato del bloque situada sobre el Cuadro de herramientas.
Presione ENTRAR para crear una nueva línea y, a continuación, escriba Since 1982, Contoso has provided high-quality software services.
Guarde la página.
Probar las páginas
Puede probar las páginas ejecutándolas tal como haría con cualquier página ASP.NET.
Para probar las páginas
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5.
ASP.NET combina el contenido de la página Home.aspx con el diseño de la página Master1.master en una sola página y muestra el resultado en el explorador. Observe que la dirección URL de la página es Home.aspx; no hay ninguna referencia en el explorador a la página principal.
Haga clic en el vínculo About.
Se muestra la página About.aspx. También se combina con la página Master1.master.
Hacer referencia a miembros de la página principal
El código de las páginas de contenido puede hacer referencia a miembros de la página principal, como propiedades o métodos públicos y controles de la página principal. En esta parte del tutorial, creará una propiedad en la página principal y, a continuación, utilizará el valor de la propiedad en las páginas de contenido. La premisa es que el nombre de la compañía para el sitio Web está almacenado como una propiedad en la página principal y cualquier referencia a él en las páginas de contenido se basa en la propiedad de la página principal.
El primer paso es agregar una propiedad a la página principal.
Para agregar una propiedad a la página principal
Cambie a la página Master1.master o ábrala.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Master1.master y seleccione Ver código para abrir el editor de código.
Nota
De forma predeterminada, Visual Web Developer crea páginas que utilizan el modelo de código subyacente. Si lo prefiere, puede crear el código utilizando el modelo de un solo archivo. Para obtener más información, vea Modelo de código de las páginas Web ASP.NET.
En la definición de clase, escriba el código siguiente.
Visual Basic
Public Property CompanyName() As String
Get
Return CType(ViewState("companyName"), String)
End Get
Set(ByVal Value As String)
ViewState("companyName") = Value
End Set
End Property
C#
public String CompanyName
{
get { return (String) ViewState["companyName"]; }
set { ViewState["companyName"] = value; }
}
El código crea una propiedad denominada CompanyName para la página principal. El valor se almacena en estado de vista para que se conserve entre las devoluciones de datos.
En la definición de clase (pero no dentro del código de la propiedad), agregue el código siguiente.
Visual Basic
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Init
Me.CompanyName = "Contoso"
End Sub
C#
void Page_Init(Object sender, EventArgs e)
{
this.CompanyName = "Contoso";
}
En este ejemplo, integrará el valor de la propiedad CompanyName en la página.
Ahora puede modificar la página de contenido para utilizar la propiedad CompanyName de la página principal.
Para hacer referencia a la propiedad CompanyName en la página de contenido
Cambie a la página Home.aspx o ábrala.
Cambie a la vista Código fuente.
En la parte superior de la página, bajo la directiva @ Page, agregue la directiva @ MasterType siguiente:
<%@ MasterType virtualpath="~/Master1.master" %>
La directiva enlaza la propiedad Master de la página de contenido, que utilizará en breve, a la página Master1.master.
Cambie a la vista Diseño.
En el control Content, cambie el texto a Welcome to the Web site of.
En el Cuadro de herramientas, arrastre un control Label desde el grupo Estándar hasta el control Content y coloque después el texto estático siguiente:
Welcome to the Web site of [Etiqueta]
Establezca la propiedad ID del control Label en CompanyName.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Home.aspx y seleccione Ver código para abrir el editor de código.
En la definición de clase, agregue el código siguiente.
Visual Basic
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Load
CompanyName.Text = Master.CompanyName
End Sub
C#
void Page_Load(Object sender, EventArgs e)
{
CompanyName.Text = Master.CompanyName;
}
La propiedad Master de la página de contenido devuelve una referencia a la página principal tal como se define en la directiva @ MasterType que agregó en el paso 3.
Ahora puede probar la página de contenido para asegurarse de que hace referencia correctamente a la propiedad CompanyName de la página principal.
Para probar la referencia a la propiedad de la página principal
Cambie a la página Home.aspx o ábrala y, a continuación, presione CTRL+F5 para ejecutarla.
La página se muestra en el explorador con el texto Welcome to the Web site of Contoso
Cierre el explorador.
Cambie a la página de código subyacente Master1.master o ábrala.
Cambie el controlador Page_Init para asignar un nombre de compañía diferente a la propiedad, como en el ejemplo de código siguiente.
Visual Basic
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Init
Me.CompanyName = "New Company Name"
End Sub
C#
void Page_Init(Object sender, EventArgs e)
{
this.CompanyName = "New Company Name";
}
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5 para ejecutarla de nuevo.
Esta vez, el nombre de la compañía actualizado aparece en la página.
Notas
Hay otros aspectos que debe tener en cuenta al trabajar con una página principal:
En una aplicación real, probablemente almacenaría la información similar al nombre de la compañía en el archivo de configuración y la leería directamente en las páginas de contenido. Sin embargo, el escenario descrito aquí proporciona una ilustración simple de cómo hacer referencia a los miembros de página principal en páginas de contenido.
Incluso puede tener acceso a los miembros de la página principal sin utilizar una directiva @ MasterType. Sin embargo, para hacerlo debe convertir la propiedad System.Web.UI.Page.Master en el tipo de página principal apropiado (la propiedad Master es null si una página no tiene su correspondiente página principal). Para obtener más información, vea Trabajar con las páginas principales ASP.NET mediante programación.
Puede hacer referencia a los controles en la página principal utilizando el método Master.FindControls. Para obtener más información, vea Trabajar con las páginas principales ASP.NET mediante programación.
Cambiar las páginas principales dinámicamente
Bajo ciertas circunstancias, quizás desee poder cambiar las páginas principales dinámicamente; es decir, utilizar código que establezca la página principal para una página de contenido. Por ejemplo, es posible que desee permitir a los usuarios seleccionar entre varios diseños y establecer la página principal según sus preferencias.
En esta parte del tutorial, agregará una segunda página principal al sitio Web y creará botones que permitan al usuario cambiar entre dos páginas principales. Como ambas páginas principales serán muy similares, hará una copia de la primera y la modificará para que actúe como la segunda.
Para realizar una copia de la página principal
En el Explorador de soluciones, haga clic con el botón secundario del mouse en Master1.master y, a continuación, haga clic en Copiar.
Haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Pegar.
Se agrega al sitio Web una página principal con el nombre Copia de master1.master.
Haga clic con el botón secundario del mouse en Copia de master1.master, haga clic en Cambiar nombre y, a continuación, asigne el nombre Master2.master a la nueva página principal.
Abra Master2.master y, en la directiva @ Master, cambie Master1 a Master2.
La directiva de página finalizada tendrá una apariencia similar al ejemplo de código siguiente.
Visual Basic
<%@ Master Language="VB" CodeFile="Master2.master.vb" Inherits="Master2" %>
C#
<%@ Master Language="C#" CodeFile="Master2.master.cs" Inherits="Master2" %>
Cambie a la vista Diseño.
En la ventana Propiedades, en la lista desplegable de la parte superior, haga clic en DOCUMENTO.
Borre la propiedad BgColor.
La nueva página principal tendrá la misma apariencia y funcionamiento que Master1.master, pero no tendrá ningún color de fondo.
Abra el archivo de código de Master2.master y cambie el nombre de la clase en el archivo de código subyacente de la página principal de Master1 a Master2 de manera que coincida con el valor del atributo Inherits de la directiva <%@ Master %> de la página.
El código debe tener la apariencia del ejemplo siguiente.
Visual Basic
Partial Class Master2
C#
public partial class Master2 : System.Web.UI.MasterPage
El paso siguiente es agregar a cada página principal un botón que permita al usuario seleccionar la página principal alternativa.
Para agregar los botones para seleccionar una página principal alternativa
Cambie a la página Master2.master o ábrala.
En el Cuadro de herramientas, arrastre un control LinkButton desde el nodo Estándar hasta la página y colóquelo bajo el menú de la celda superior de la tabla.
Establezca la propiedad Text del botón en Colorful.
Haga doble clic en el botón a fin de crear un controlador para su evento Click y, a continuación, agregue el código resaltado siguiente.
Visual Basic
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_
Handles LinkButton1.Click
Session("masterpage") = "Master1.master"
Response.Redirect(Request.Url.ToString())
End Sub
C#
void LinkButton1_Click(Object sender, EventArgs e)
{
Session["masterpage"] = "Master1.master";
Response.Redirect(Request.Url.ToString());
}
El código carga el nombre de archivo de la página principal alternativa en una variable de sesión persistente y, a continuación, vuelve a cargar la página actual. (La propiedad Url devuelve un objeto Uri que hace referencia a la página actual.) En un momento, creará el código de la página de contenido que utilizará el nombre de la página principal.
Cambie a la página Master1.master o ábrala en la vista Diseño.
Agregue un control LinkButton como hizo en los pasos 1 y 2, y establezca su propiedad Text en Plain.
Haga doble clic en el botón Plain a fin de crear un controlador para su evento Click y, a continuación, agregue el código resaltado siguiente.
Visual Basic
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_
Handles LinkButton1.Click
Session("masterpage") = "Master2.master"
Response.Redirect(Request.Url.ToString())
End Sub
C#
void LinkButton1_Click(Object sender, EventArgs e)
{
Session["masterpage"] = "Master2.master";
Response.Redirect(Request.Url.ToString());
}
Este código es igual que el del botón de la página Master2.master, excepto en que carga una página principal alternativa.
Ahora va a escribir el código de la página de contenido que cargará dinámicamente la página principal seleccionada por el usuario.
Para escribir el código para seleccionar dinámicamente la página principal
Cambie a la página About.aspx o ábrala.
Nota
La página de inicio que ya ha creado contiene una directiva @ MasterType que la enlaza efectivamente a una página principal única (Master1.master). Por tanto, no podrá asignar páginas principales dinámicamente a la página de inicio y, en cambio, trabajará con otras páginas que ha creado.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en About.aspx y seleccione Ver código para abrir el editor de código.
En la definición de clase, agregue el código siguiente.
Visual Basic
Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.PreInit
If Not Session("masterpage") Is Nothing Then
Me.MasterPageFile = CType(Session("masterpage"), String)
End If
End Sub
C#
void Page_PreInit(Object sender, EventArgs e)
{
if(Session["masterpage"] != null)
{
this.MasterPageFile = (String) Session["masterpage"];
}
}
El código establece el valor de la propiedad MasterPageFile de la página actual en el valor de la variable de sesión, si hay alguno. Este código se debe ejecutar en el controlador Page_PreInit; no se puede ejecutar en un controlador que se produzca después que Page_PreInit (por ejemplo, en el controlador Page_Init), porque la página principal debe configurarse para poder crear una instancia de ella antes de que tenga lugar cualquier inicialización posterior.
Ahora puede probar las páginas principales dinámicas.
Para probar las páginas principales dinámicas
En la página About.aspx, presione CTRL+F5 para ejecutar la página.
La página se muestra en el explorador combinada con su página principal predeterminada, Master1.master.
Haga clic en el vínculo Plain.
Se vuelve a mostrar la página, esta vez combinada con Master2.master, que no tiene ningún color de fondo.
Haga clic en el vínculo Colorful.
La página se muestra de nuevo utilizando Master1.master.
Notas
Hay otros aspectos que debe tener en cuenta al trabajar con páginas principales dinámicas:
El escenario de esta sección para cambiar las páginas principales se ha simplificado para mantener el tutorial centrado en las páginas principales. En una aplicación real, probablemente mostraría varios diseños y, a continuación, almacenaría las preferencias del usuario utilizando perfiles. Para obtener información detallada, vea Información general sobre las propiedades de perfil de ASP.NET.
Puede configurar el sitio Web para que todas las páginas utilicen la misma página principal. Quizás tenga unas cuantas páginas que deberían utilizar una página principal alternativa; puede configurarlas en el código de una forma similar a la mostrada en esta sección del tutorial. Para obtener más información, vea "Ámbito de las páginas principales" en Información general sobre las páginas principales ASP.NET.
Tiene que agregar el código de la página Home.aspx a cada página donde desee reemplazar la página principal predeterminada.
Pasos siguientes
Este tutorial muestra la funcionalidad básica de páginas principales. Quizás desee probar otras características de las páginas principales. Por ejemplo, podría:
Crear páginas principales que tienen varios marcadores de posición de contenido. Puede llenar a continuación uno o más marcadores de posición de contenido para cada página que muestre.
Definir marcadores de posición de contenido predeterminado. Si una página ASP.NET no proporciona el contenido para el marcador de posición, la página principal muestra el contenido predeterminado.
Tener acceso a los miembros de la página principal desde las páginas de contenido mediante programación. Esto permite cambiar dinámicamente la apariencia de la página principal en tiempo de ejecución. Para obtener información detallada, vea Cómo: Hacer referencia al contenido de la página principal ASP.NET.
Utilizar el filtrado de dispositivos con las páginas principales a fin de crear diferentes diseños para distintos dispositivos, por ejemplo un diseño para exploradores y otro para un tipo de teléfono concreto. Para obtener información detallada, vea Información general sobre el filtrado de dispositivos de ASP.NET.
Obtener información sobre cómo puede colocar unas páginas principales dentro de otras para crear partes divididas en componentes. Para obtener información detallada, vea Páginas principales ASP.NET anidadas.
Suscribirse a:
Entradas (Atom)