Introducción al Kit de inicio del sitio web club

 

Bill Evjen
Reuters

Junio de 2005

Se aplica a:
   Microsoft ASP.NET 2.0
   Visual Studio 2005
   Visual Web Developer 2005 Express Edition

Resumen: Obtenga información sobre el nuevo Kit de inicio de sitio web de Club, que es un tipo de proyecto disponible en Visual Studio 2005. (30 páginas impresas)

Contenido

Introducción
Configuración inicial del Kit de inicio del sitio web club
Creación de un rol de administrador
Agregar usuarios al rol Administradores
Página maestra: Default.master
Trabajar con el control SiteMapDataSource en la página maestra
Descripción de las restricciones de acceso al sitio
Enumeración de eventos del club: Events_Calendar.aspx
Artículos de noticias: News_List.aspx
Página Álbumes de fotos: PhotoAlbum_List.aspx
Ver los miembros registrados de la aplicación: Member_List.aspx
Páginas estáticas: Links.aspx y Contact.aspx
Resumen

Introducción

El Kit de inicio del sitio web club le permite crear fácilmente una aplicación que ayuda a presentar y administrar cualquier club u organización. La idea de Club Web Site Starter Kit es proporcionarle un marco que puede usar para organizar rápidamente un sitio web que merece la pena centrarse en un club de cualquier tipo. Este kit de inicio te proporciona una serie de páginas que te permiten presentar fácilmente los detalles de tu club. Las páginas iniciales de este kit de inicio incluyen una página principal que muestra un resumen de las noticias y eventos de su club, las noticias y las páginas de eventos asociadas, un lugar para publicar fotos, formularios de registro, listas de miembros, una página para vínculos, así como una página de contacto.

A partir de esta breve descripción, puede ver que hay una gran cantidad de funcionalidades proporcionadas en esta aplicación de marco. Al compilar y ejecutar el Kit de inicio del sitio web club por primera vez, verá la página principal que se muestra en la figura 1.

Figura 1. Página principal del kit de inicio

Cada una de las páginas del Kit de inicio del sitio web club está lista para reemplazar el texto ipsum del lorem predeterminado por sus propias palabras. Esto le iniciará en el proceso de personalización del sitio web del club. Como podrá saber desde la aplicación, aunque se crea como un sitio web para un equipo de fútbol ficticio (también conocido como equipo de fútbol en la mayoría de las partes del mundo), puede usar fácilmente este marco para una variedad de clubes u organizaciones.

El Kit de inicio del sitio web club también es una excelente herramienta de aprendizaje. Puede ver el código que genera cada página de la aplicación y verá que usa algunas de las características más seguras de la versión más reciente de ASP.NET. Incluso si no está interesado en usar este kit de inicio para un sitio web de producción real, sigue siendo un recurso valioso para aprender a crear una aplicación mediante ASP.NET 2.0.

Antes de examinar el trabajo con esta aplicación, empecemos por echar un vistazo a la instalación y el inicio de este kit de inicio.

Configuración inicial del Kit de inicio del sitio web club

Después de instalar el Kit de inicio del sitio web club en el servidor de desarrollo, verá que la instalación se ha puesto a su disposición como plantilla de proyecto en la sección Mis plantillas del cuadro de diálogo Nuevo sitio web . Para que aparezca este cuadro de diálogo, haga clic en Archivo y seleccione Nuevo sitio web en el menú de Visual Studio. Este cuadro de diálogo se muestra en la figura 2.

Ilustración 2. Creación de un nuevo sitio de club

Después de crear una instancia de este tipo de proyecto, Visual Studio creará una solución para usted que incluirá una serie de carpetas y archivos. Puede ver todos estos elementos creados en la Explorador de soluciones de Visual Studio, como se muestra aquí en la figura 3.

Figura 3. La solución de sitio del club

Como puede ver en la figura 3, hay mucho para este kit de inicio. Cuando Visual Studio crea una instancia de este kit de inicio, encontrará que no hay una copia necesaria de la ASPNETDB.mdf base de datos en la carpeta App_Data. Este archivo SQL Express es necesario para la pertenencia, la administración de roles y otros sistemas ASP.NET 2.0 que encontrará que va a usar esta aplicación. Veremos cómo se crea automáticamente este archivo.

Creación de un rol de administrador

Puesto que vamos a necesitar crear un rol administradores para la aplicación y colocar al menos un usuario en este rol, haga clic en el botón Configuración de ASP.NET de la Explorador de soluciones de Visual Studio para abrir la herramienta de administración de sitios web de ASP.NET. También puede abrir esta herramienta de administración seleccionando Sitio web ASP.NET Administración en el menú de Visual Studio. Una de las ASP.NET herramienta de administración de sitios web que se ha iniciado, haga clic en la pestaña Seguridad que proporciona la herramienta. A continuación, se le proporcionará lo siguiente:

Figura 4. Página Administration

Al iniciar esta herramienta en el explorador también se creará el archivo necesario ASPNETDB.mdf si no se encuentra en la carpeta App_Data. Una vez que inicie la herramienta de administración de sitios web de ASP.NET, puede verlo usted mismo haciendo clic en el botón Actualizar de la Explorador de soluciones de Visual Studio y expandiendo la carpeta App_Data. Aquí encontrará ahora la base de datos ASP.NET usada por los sistemas de administración de roles y pertenencia, entre otros.

Desde el inicio inicial, puede ver que no hay usuarios ni roles configurados para la aplicación. Esta aplicación se basa en un usuario para formar parte de un rol denominado Administradores para administrar la edición de información contenida en el sitio. Puede tener tantos usuarios en el rol Administradores como considere necesario. Para establecer el rol y los usuarios, el primer paso es crear el rol Administradores.

Puede crear el rol Administradores a través de la herramienta de administración de sitios web de ASP.NET haciendo clic en el vínculo Crear o administrar roles que se encuentra en la página Seguridad. En la página de creación de roles proporcionada, simplemente puede proporcionar el nombre del rol. En este caso, asigne el nombre Administradores al rol como se muestra en la figura 5.

Figura 5. Creación del rol Administradores

Haga clic en el botón Agregar rol para agregar el rol a la aplicación. En la página siguiente se mostrará el rol. En esta vista (figura 6), puede administrar el rol agregando y quitando usuarios. También puede eliminar un rol del sistema mediante esta página.

Figura 6. Adición de un rol

Agregar usuarios al rol Administradores

Ahora que tiene el rol Administradores implementado, el siguiente paso consiste en agregar uno o varios usuarios al rol. Para ello, haga clic en el vínculo Crear usuario desde la página Seguridad de la herramienta de administración de sitios web de ASP.NET. El formulario Crear usuario se muestra en la figura 7.

Ilustración 7. Adición de administradores

Al crear el usuario aquí, asegúrese de que tiene activada la casilla Administradores para agregar este usuario al rol Administradores. Desde este mismo cuadro de diálogo, también puede agregar tantos usuarios normales (no administradores) como desee. La otra opción es permitir que estos otros usuarios simplemente realicen sus propios registros en el propio sitio web. Esto se mostrará más adelante en este artículo. Es importante tener en cuenta que, de forma predeterminada, ASP.NET 2.0 requiere una contraseña segura que contenga al menos ocho caracteres, incluida una combinación de caracteres en mayúsculas y minúsculas, números y caracteres especiales (por ejemplo, !, #, $, %).

Al hacer clic en el botón Crear usuario como se muestra en la figura 7, se creará un administrador de aplicaciones automáticamente. Ahora que tiene este usuario en su lugar, echemos un vistazo al kit de inicio y a través de algunos de los elementos que componen esta aplicación.

Página maestra: Default.master

La primera página a la que echaremos un vistazo en esta aplicación es la página maestra de la aplicación. ASP.NET 2.0 presenta una manera de crear páginas con plantilla. Esto significa que puede crear una plantilla maestra o una página maestra que se pueda aplicar a cada página y cada página que designe. El Kit de inicio del sitio web del club hace uso de páginas maestras.

Aunque no necesariamente aparente con la Default.master página, el Kit de inicio del sitio web del club usa el modelo de codificación insertado disponible en lugar de usar el modelo de código subyacente. Esto significa que la lógica de negocios de la página (todos los métodos de página) se encapsula en la propia página entre <script> etiquetas.

La Default.master página de este kit de inicio es simplemente una plantilla de presentación que, a continuación, se puede usar en cualquier página de contenido contenida en la aplicación (las páginas de contenido se describen en breve). Lo bueno de trabajar con páginas maestras en ASP.NET 2.0 es cómo se presentan en Visual Studio. Haga clic en la pestaña Diseño de la ventana Documento de Visual Studio para ver una representación visual de la página maestra. Esto se muestra aquí en la figura 8.

Figura 8. Página principal

En esta ilustración puede ver que esta página contiene el marco básico que usará cada página de contenido y cada página de contenido que use esta página maestra. En la página maestra, encontrará una combinación de controles html y de servidor web, algunos de los cuales son nuevos en ASP.NET 2.0. Aunque la imagen de la figura 8 parece ser principalmente una página amarilla, también hay muchos estilos e imágenes que se colocan en la página maestra a través del archivo de hoja de estilos en cascada de la aplicación, clubsite.css. Esta hoja de estilos se agrega a la página maestra mediante la inclusión del siguiente bit de código:

<link type="text/css" rel="Stylesheet" href="clubsite.css" />

Probablemente el control de servidor más interesante de la página maestra que es nuevo en ASP.NET 2.0 es el control ContentPlaceHolder . El control ContentPlaceHolder es un área definida que permite que cualquier página de contenido que use esta página maestra en particular interjete contenido. Básicamente, al construir las páginas maestras, permite que las páginas de contenido usen secciones especificadas de la página. Una página de contenido no podrá trabajar fuera de los límites de este área de contenido. Aunque es posible incluir varias áreas de contenido mediante el uso de varios controles ContentPlaceHolder colocados en la página maestra, en este ejemplo (nuestra Default.master página) solo se usa uno de estos controles.

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

Otro nuevo ASP.NET control de servidor que se usa en la página maestra es el control SiteMapDataSource . Este control de origen de datos permite trabajar fácilmente con una estructura de navegación definida para la página. De forma predeterminada, define la estructura de navegación del sitio en el archivo XML, web.sitemap. Encontrará este archivo en el proyecto Sitio web club. Se muestra aquí en la lista 1.

Listado 1: El archivo web.sitemap usado por la página Default.master

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="/" title=""  description=""  roles="*">
    <siteMapNode url="default.aspx" title="Home"  
     description="Welcome page"  />
    <siteMapNode url="events_calendar.aspx" title="Events"  
     description="Calendar of events"  />
    <siteMapNode url="news_list.aspx" title="News"  
     description="Recent News"  />
    <siteMapNode url="photoalbum_list.aspx" title="Photos"  
     description="Photo album"  />
    <siteMapNode url="member_list.aspx" title="Members" 
     description="Membership list and contact informaation" />
    <siteMapNode url="member_redirect.aspx" title="Membership"  
     description="Member registration"  />
    <siteMapNode url="links.aspx" title="Links"  
     description="Useful links"  />
    <siteMapNode url="contact.aspx" title="Contact"  
     description="How to contact the club leaders"  />
  </siteMapNode>
</siteMap>

Si observa esta estructura, puede ver que la aplicación se presenta en un formato bastante plano. Realmente no hay una jerarquía de páginas para que el usuario final funcione. Por este motivo, los hipervínculos a cada una de las páginas se presentan en una barra de herramientas horizontal que aparece en la parte superior e inferior de la página maestra.

Desde el diseño o la vista de código de la página maestra, ahora puede personalizar la página cambiando el texto de la página maestra para que refleje su club u organización.

A continuación, echemos un vistazo más de cerca al sistema de navegación integrado en la página maestra.

Trabajar con el control SiteMapDataSource en la página maestra

La página maestra presenta una barra de herramientas de navegación en la parte superior e inferior de cada página. Cuando una página de contenido usa esta página maestra, verá la barra de herramientas ilustrada en la figura 9.

Figura 9. Barra de herramientas

Esta barra de herramientas de navegación se define mediante el contenido del web.sitemap archivo que hemos revisado anteriormente en este artículo. ¿Cómo se hace esta información desde el web.sitemap archivo que se va a presentar en la página? Si examina el código de la Default.master página, verá que usa un control SiteMapDataSource para presentar el contenido del archivo XML.

Tener la estructura de páginas de la aplicación definida en un web.sitemap archivo le permite interactuar con la estructura de navegación definida a través de la nueva Sitemap clase o mediante el nuevo control SiteMapDataSource . Con el control SiteMapDataSource , puede enlazar después al contenido de la estructura de navegación del web.sitemap archivo mediante expresiones de enlace de datos o controles de servidor que se han creado para trabajar con el control SiteMapDataSource (como los controles de servidor TreeView o Menu ).

En el caso del Kit de inicio del sitio web club, la Default.master página utiliza expresiones de entrada de datos simples que obtienen su información de lo que proporciona el control SiteMapDataSource , en lugar de cualquiera de los controles de servidor mencionados anteriormente. La lista 2 muestra el control SiteMapDataSource de la página maestra.

Lista 2: El control SiteMapDataSource de la página maestra

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
 ShowStartingNode="false" />

Como puede ver, no hay mucho que trabajar con la estructura de aplicación definida que procede del web.sitemap archivo. Todo lo que se necesita es un control SiteMapDataSource como el que se muestra en la lista 2. El único cambio en el comportamiento definido en este control de origen de datos es mediante el uso del ShowStartingNode atributo , que se establece falseen . Si se establece false en, el control SiteMapDataSource omitirá el primer <siteMapNode> elemento que aparece en el web.sitemap archivo y, en su lugar, funcionará desde los <siteMapNode> elementos anidados directamente debajo del primero.

Ahora que el control SiteMapDataSource está en su lugar, las barras de herramientas de navegación se crean mediante el uso de las expresiones de enlace de datos. Esto se muestra en la lista 3.

Lista 3: Uso del control SiteMapDataSource para crear la barra de herramientas de navegación

<asp:Repeater ID="TopNavRepeat" runat="server" 
 DataSourceID="SiteMapDataSource1">
   <HeaderTemplate>
      <ul>
   </HeaderTemplate>
   <ItemTemplate>
      <li>
      <asp:HyperLink ID="HyperLink1" runat="server" 
       Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Url") %>'
       ToolTip='<%# Eval("Description") %>' />
      </li>
   </ItemTemplate>
   <FooterTemplate>
      </ul>
   </FooterTemplate>
</asp:Repeater>

La Default.master página se enlaza al conjunto de resultados procedente del control SiteMapDataSource en dos puntos: una para la navegación de encabezado y una vez para la navegación del pie de página.

En la lista 3 puede ver que se usa un control de servidor Repeater para crear una lista desordenada de hipervínculos. Los hipervínculos se construyen mediante un control de servidor HyperLink . Obtener los datos del control SiteMapDataSource es tan sencillo como especificar el DataSourceID atributo para que sea igual al ID del control SiteMapDataSource en la misma página. Una vez que esto está en su lugar, puede obtener en elementos específicos procedentes del control SiteMapDataSource simplemente mediante la Eval expresión de enlace. Este es un ejemplo:

<%# Eval("Title") %>

Esta expresión está vinculada al atributo title que se usó en el web.sitemap archivo.

<siteMapNode url="default.aspx" title="Home"  
 description="Welcome page"  />

Aquí puede ver que cada página (definida con el <siteMapNode> elemento) tiene tres atributos: url, titley description. Los tres atributos se usan en el control de servidor Repeater .

Es interesante tener en cuenta que no es necesario crear el sistema de navegación completamente usando Eval expresiones como se muestra en el Kit de inicio del sitio web club. Incluidos en ASP.NET 2.0 son algunos controles de servidor nuevos diseñados específicamente para trabajar con un control SiteMapDataSource y los datos subyacentes que se presentan en el web.sitemap archivo para presentar la navegación de la aplicación al usuario final. Por ejemplo, debe examinar el uso de los controles de servidor SiteMapPath, TreeView o Menu para crear un sistema de navegación sólido que también funciona desde el web.sitemap archivo.

Descripción de las restricciones de acceso al sitio

Al examinar el contenido del web.sitemap archivo y la barra de herramientas de navegación, observará que hay una página definida en el web.sitemap archivo que no aparece en la barra de herramientas de navegación. Falta la página Miembros cuando se extrae por primera vez el Kit de inicio del sitio web del club en un explorador.

Sin embargo, si inicia sesión en la aplicación como administrador de sitio, observará que la página Miembros ahora está presente en la lista de páginas presentadas en la barra de herramientas de navegación (que se muestra aquí en la figura 10).

Figura 10. Miembros agregados a la barra de herramientas

¿Por qué ocurre esto? Aunque todas las páginas de la aplicación se definen en el web.sitemap archivo y el control SiteMapDataSource funciona con los datos subyacentes de este archivo XML, todavía hay definiciones de comportamiento adicionales que se producen en el web.config archivo que afectarán al sistema de navegación de la aplicación. Esto se presenta aquí en la lista 4.

Lista 4: Proporcionar requisitos de autorización de página en el web.config

<location path="member_list.aspx" >
   <system.web>
      <authorization >
         <deny users="?" />
      </authorization>
   </system.web>
</location>

En esta vista parcial del web.config archivo, puede ver que la Member_List.aspx página está bloqueada para que todos los usuarios no autenticados no puedan acceder a la página. Esto significa que cualquier persona que haya iniciado sesión en la aplicación en el rol de Administradores o cualquier otro rol que cree en la aplicación podrá navegar a la página.

Sin embargo, lo interesante es que no solo es cuestión de definir que los usuarios autenticados pueden navegar a la Member_List.aspx página, sino que también indica que solo los usuarios autenticados de la aplicación podrán ver un vínculo a esa página en el sistema de navegación de la aplicación que se recupera mediante el control SiteMapDataSource .

La primera página de contenido: Default.aspx

Si echa un vistazo a la Default.aspx página, observará que no es la página estándar .aspx a la que podría usarse. Esta Default.aspx página es lo que se conoce como página de contenido. Una página de contenido usa el nuevo sistema de plantillas de página que ahora proporciona ASP.NET 2.0. Como vimos anteriormente en este artículo, se definió una plantilla con la creación de la Default.master página. Esta página de plantilla (la página maestra) se puede usar con cualquier número de páginas de contenido. De hecho, si observa la directiva @Page en la parte superior de la Default.aspx página, observará que realmente hace uso de la página maestra.

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    Title="Untitled Page" %>

Mediante el uso del MasterPageFile atributo en la @Page directiva , esta .aspx página declara que es una página de contenido y que la plantilla que se va a usar es la Default.master página. Dado que se trata de una página de contenido que usa una página maestra como plantilla, esto significa que no se debe incluir ninguna de las etiquetas HTML que se usan como marco para la página (como las <html>etiquetas , <body>y <form> ). El motivo de esto se debe al hecho de que estos elementos ya están incluidos en la Default.master página.

Si vuelve a buscar en la página maestra, recordará que había una sola ubicación en la página que se aplicó para colocar elementos en una página de contenido. Esto se realizó mediante el uso del control de servidor ContentPlaceHolder . Al trabajar con una página de contenido, se crea una asociación a esta instancia del control ContentPlaceHolder en la página maestra mediante el uso de un control de servidor de contenido . Si examina la Default.aspx página, observará que hay un único control Content .

<asp:Content ID="Content1" 
 ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
   <!-- Content removed for clarity -->
</asp:Content>

Al examinar el control Contenido , podrá observar que la asociación al control ContentPlaceHolder se realiza mediante el uso del ContentPlaceHolderID atributo que usa como valor del ID ContentPlaceHolder que se usa como valor del ContentPlaceHolder que se usa en la página maestra. Cualquier contenido colocado dentro del control Contenido aparecerá en la página combinada.

Una de las cosas más interesantes sobre cómo trabajar con una página de contenido es la forma en que estas páginas se representan en Visual Studio. Hasta ahora, hemos estado trabajando con el código de las páginas. Si hace clic en la pestaña Diseño de la Default.aspx página, podrá ver una representación visual de esta página en particular. Esto se muestra en la figura 11.

Figura 11. Página de contenido dentro de la página maestra

A partir de esta ilustración, puede ver que no solo el contenido que se usa en la propia página de contenido aparece en la vista de diseño de la página, sino también el contenido especificado en la página maestra también aparece en la vista de la página. Se trata de la herencia de páginas en su mejor momento.

Mirando hacia atrás el código de la Default.aspx página, hay algunas cosas interesantes que suceden aquí que son dignos de señalar. Esta página incluye dos columnas de controles. Si observa la columna izquierda, encontrará algún texto de bienvenida que debe reemplazar por algún texto personalizado para su propio club. Debajo del texto de bienvenida encontrará un nuevo control de ASP.NET 2.0, el control LoginView .

Dado que estamos trabajando con una aplicación que permitirá a los usuarios iniciar sesión en la aplicación, esta página tendrá visores que se consideran usuarios autenticados y autorizados (lo que significa que han iniciado sesión en la aplicación y que posiblemente estén autorizados para un rol específico). Esta página también tendrá visores que no hayan pasado por el proceso de autenticación y autorización. Debido a esta dinámica, a veces querrá mostrar datos específicos para los usuarios autenticados mientras muestra otro contenido a los usuarios que no están autenticados. El control LoginView permite este tipo de comportamiento.

El control LoginView tiene dos plantillas y <AnonymousTemplate><LoggedInTemplate>. Al examinar el código de Default.aspx, puede ver que la sección AnonymousTemplate incluye un formulario que permite al usuario final intentar iniciar sesión en la aplicación. Si el usuario se autentica después de iniciar sesión en la aplicación, se le presentará el contenido proporcionado en la LoggedInTemplate sección . Esta sección contiene solo texto y un control LoginName . El control LoginName se usa simplemente para presentar el nombre del usuario autenticado. En la figura 12 se presenta un ejemplo de ambas vistas.

Ilustración 12. Control de inicio de sesión

El formulario que se presenta a través de AnonymousTemplate también incluye un control personalizado. Este control se define en la página de la siguiente manera:

<Club:RolloverButton runat="server" ValidationGroup="Login1" 
Text="Login" ID="LoginButton" CommandName="Login" />

Al buscar dentro de la carpeta App_Code de la solución, encontrará un RolloverButtons.vb archivo o .cs que incluye el código de este control personalizado.

Además de un formulario de inicio de sesión y el uso de controles personalizados, la columna derecha de la Default.aspx página usa dos controles SqlDataSource para extraer los cinco principales anuncios y eventos para la presentación. Empecemos examinando el primero de estos controles SqlDataSource .

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ProviderName="System.Data.SqlClient" 
 ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
 SelectCommand="SELECT top 5 [id], [itemdate], [title], [description], 
    [photo] FROM [Announcements] order by itemdate desc">
</asp:SqlDataSource>

El control SqlDataSource funciona en su nombre para extraer información de cualquier base de datos SQL. En este caso, debido a lo que se especifica con la cadena de conexión, esta instancia del control SqlDataSource extraerá información de SQL Express. Puede encontrar el archivo SQL Express que se usa en la carpeta App_Data del proyecto. Dentro de esta carpeta, verá el archivo clubsite.mdf. Aquí es donde se almacenan los anuncios, eventos y fotos del sitio.

Como valor para el ConnectionString atributo del control SqlDataSource , puede ver que apunta a un valor de ClubSiteDB. Esta referencia apunta realmente a una declaración que se realizó en el archivo de web.config la aplicación. Al buscar en la <connectionStrings> sección del web.config archivo, verá la siguiente definición:

<add name="ClubSiteDB" 
 connectionString="Data Source=.\SQLExpress;Integrated 
    Security=true;AttachDBFileName=|DataDirectory|clubsite.mdf;
    User Instance=True" providerName="System.Data.SqlClient"/>

Con esta cadena de conexión, SqlDataSource usa lo que se especifica en el SelectCommand atributo para extraer valores del archivo SQL Express.

Ahora que los valores comenzarán a provener del control SqlDataSource , puede enlazarlos a esos valores mediante la sintaxis de enlace simple, como <%# Eval("photo") %>.

El código que se encuentra en la Default.aspx página usa el control Repeater que se espolvorea con Eval instrucciones para rellenar una lista de anuncios y eventos recientes que, a continuación, se muestran en la página. Al examinar este ejemplo, puede ver lo sencillo que es empezar a extraer información de un almacén de datos y, a continuación, mostrar esa información. Realmente no hay muchos pasos implicados.

Ahora echemos un vistazo a algunas de las funciones proporcionadas en las otras páginas de la aplicación.

Enumerar eventos del club: Events_Calendar.aspx

Haga clic en el vínculo Eventos de la barra de herramientas de navegación para abrir la Events_Calendar.aspx página. En esta página se proporciona una lista de eventos y ubicaciones donde se producen estos eventos. Los eventos se pueden ver en un calendario mensual, como se muestra aquí en la figura 13.

Ilustración 13. Vista calendario de eventos de club

Los eventos también se pueden ver en una lista (figura 14). En esta lista se muestran algunos eventos que se han producido, así como los eventos que están a punto de ocurrir. Observará que al cambiar a esta vista se cambia la página a Events_List.aspx.

Figura 14. Vista lista de eventos de club

La página final es la página de lista de ubicaciones, que es bastante similar a la página de lista de eventos. Haga clic en el vínculo Lista de ubicaciones para abrir una nueva página denominada Locations_List.aspx. Esto se muestra en la figura 15.

Figura 15. Ubicaciones

Si ha iniciado sesión en la aplicación como un usuario registrado que se encuentra en el rol Administradores, verá los botones Agregar nuevo evento o Agregar nueva ubicación en la página. Al hacer clic en estos botones, se le llevará a las páginas donde puede agregar eventos y ubicaciones que luego aparecen en la aplicación para todos los usuarios. Esto se muestra en la figura 16.

Figura 16. Detalles del evento

Es interesante tener en cuenta cómo aparecen los distintos botones de administración en las páginas si ha iniciado sesión en la aplicación y se encuentra en el rol Administradores. Al examinar el código de Events_Calendar.aspx, verá código simple en el Page_Load evento . Esto se muestra aquí en la lista 5.

Lista 5: evento Page_Load de events_calendar.aspx

[VB]

Protected Sub Page_Load(ByVal sender As Object, _
   ByVal e As System.EventArgs)
        Dim isAdmin As Boolean
        isAdmin = User.IsInRole("Administrators")
        panel1.Visible = isAdmin
        panel2.Visible = isAdmin
End Sub

[C#]

protected void Page_Load(object sender, System.EventArgs e)
{
   bool isAdmin = User.IsInRole("Administrators");
   panel1.Visible = isAdmin;
   panel2.Visible = isAdmin;
}

En este ejemplo de la lista 5, puede ver que no hay mucho que pasar aquí. En primer lugar, se crea un Boolean valor denominado isAdmin . Con el nuevo User objeto disponible en ASP.NET 2.0, puede comprobar si el usuario está en un rol específico. En este caso, estamos comprobando si el usuario que alcanza la página está en el rol Administradores . Si se encuentran en este rol en particular, se asigna un True valor a la isAdmin variable . A continuación, este valor se usa para activar o desactivar dos controles de servidor panel que se usan en la página.

<asp:Panel ID="panel1" runat="server" CssClass="fullwidth">
   <div class="actionbuttons">
      <Club:RolloverLink ID="Addbtn" runat="server" Text="Add New Event" 
         NavigateURL="Events_edit.aspx?Action=New" />
   </div>
</asp:Panel>

Echemos un vistazo a la página que se abre cuando el usuario hace clic en el vínculo Noticias de la barra de herramientas de navegación.

Artículos de noticias: News_List.aspx

Haga clic en el vínculo Noticias en el panel de navegación para abrir la News_List.aspx página. Esta página proporciona a cualquier usuario una lista de artículos de noticias que un administrador de aplicaciones publica en la aplicación. Los artículos se paginarán y mostrarán solo 10 artículos por página. En la figura 17 se presenta un ejemplo de una página de noticias de ejemplo.

Figura 17. Página noticias

Si inicia sesión en la aplicación como administrador, tendrá la capacidad de agregar noticias. Esto será posible presionando el botón Agregar nuevo artículo que aparece en la página de noticias solo para los usuarios que están en el rol Administradores. Al presionar este botón, se extraerá una nueva página (News_Edit.aspx) que le permite escribir los detalles completos de un nuevo artículo. Esto se presenta en la figura 18.

Figura 18. Agregar un elemento de noticias

Como puede ver en esta imagen, tiene la capacidad de agregar un título de artículo, un vínculo a otro recurso, una descripción del artículo, la fecha en la que aparecerá el artículo, así como las imágenes que desea asociar a un artículo de noticias. Si decide no asociar una imagen al artículo de noticias que está colocando en el sistema, aparecerá una imagen predeterminada, en lugar de no mostrar ninguna imagen en absoluto.

Una vez que los artículos de noticias se colocan en el sistema, no solo aparecerán en la página Noticias, sino que los cinco últimos artículos también aparecerán en la página Inicio de la aplicación.

Para ver un artículo de noticias individual, haga clic en el read more >> vínculo. Esto presentará un artículo de noticias completo en una sola página (News_View.aspx). También puede acceder a esta página haciendo clic en el título del artículo de noticias.

Como administrador, tiene la opción de editar el contenido del artículo. Si ha iniciado sesión en la aplicación como administrador al ver un solo artículo, puede hacer clic en el botón Editar artículo para hacerlo.

Al examinar el código de la News_List.aspx página, puede ver que todos los artículos se recuperan del clubsite.mdf archivo mediante un control SqlDataSource . Este control se presenta en la lista 6.

Lista 6: el control SqlDataSource usado para mostrar artículos de noticias

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>"
 SelectCommand="PagedAnnouncementList" SelectCommandType="StoredProcedure" 
 OnSelected="SqlDataSource1_Selected">
   <SelectParameters>
      <asp:ControlParameter Name="pageNum" ControlID="pn1" 
       PropertyName="SelectedPage" />
      <asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />
      <asp:Parameter Name="pageCount" Direction="ReturnValue" 
       Type="Int32" />
   </SelectParameters>
</asp:SqlDataSource>

En esta lista, puede ver que este control SqlDataSource está recuperando la cadena de conexión tal como era el caso de los controles SqlDataSource anteriores que presentamos. Obtiene la cadena de conexión de la <connectionStrings> sección del web.config archivo. Es interesante que este control SqlDataSource use un procedimiento almacenado en lugar de usar una instrucción insertada Select . Para usar un procedimiento almacenado, el control SqlDataSource usa el SelectCommandType atributo y le proporciona un valor de StoredProcedure. Una vez que se ha declarado un procedimiento almacenado como el tipo de operación de selección que se usará, se asigna el nombre al procedimiento almacenado como valor del SelectCommand atributo, como se hace en el ejemplo anterior. En este caso, este control SqlDataSource indica que para un Select comando, el control debe buscar el PagedAnnouncementList procedimiento almacenado en el archivo SQL Express.

Si ve la clubsite.mdf carpeta en Visual Studio, podrá abrir sus subcarpetas e identificar la carpeta Procedimientos almacenados. Puede hacerlo desde la pestaña Explorador de bases de datos de Visual Studio. Esto se muestra en la figura 19.

Figura 19. Visualización de la carpeta de procedimientos almacenados

Haga doble clic en el PagedAnnouncementList procedimiento almacenado para abrirlo directamente en la ventana del documento de Visual Studio. Esto se muestra en la figura 20.

Figura 20. Procedimiento almacenado PagedAnnouncementList

Desde el código del control SqlDataSource que se presenta en la lista 6, puede ver que hay varios parámetros que se presentan al procedimiento almacenado. Un parámetro al que prestar atención es el pageSize parámetro :

<asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />

Este parámetro se usa para definir el número de historias que aparecen en la página de noticias de forma predeterminada. Si desea tener una selección más pequeña o mayor de artículos de noticias en una página, no dude en cambiar este número.

Una vez que el control SqlDataSource extrae los artículos de noticias del archivo SQL Express que necesita, la News_List.aspx página usa un control Repeater junto con la Eval sintaxis de enlace para insertar los artículos en la página.

Ahora vamos a pasar a la página siguiente: la página del álbum de fotos.

Página Álbumes de fotos: PhotoAlbum_List.aspx

Puede extraer la página Álbumes de fotos al hacer clic en el vínculo Fotos de la barra de herramientas de navegación de la aplicación. En esta página se enumeran los álbumes de fotos de la misma manera en que se enumeraron los artículos de noticias. En la figura 21 se muestra un ejemplo de la página.

Figura 21. Página Álbumes de fotos

Los álbumes de fotos mostrarán una pequeña miniatura de la primera imagen que se colocó en el álbum y proporcionarán al usuario final un vínculo para ver todo el álbum de fotos. Al hacer clic en el título del álbum, los usuarios se reenviarán a otra página donde se presenta todo el álbum (PhotoAlbum_Contents.aspx).

Mirando el código de la PhotoAlbum_List.aspx página, observará que realmente está integrado de la misma manera que la News_List.aspx página. De hecho, mirando el control SqlDataSource en la página que realiza el trabajo de extraer la información del álbum de fotos, observará que no hay mucha diferencia en este control SqlDataSource del que revisamos anteriormente en este artículo. El control SqlDataSource que se usa en PhotoAlbum_List.aspx se presenta en la lista 7.

Lista 7: el control SqlDataSource usado en PhotoAlbum_List.aspx

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:ClubsiteDB %>"
 SelectCommand="PagedAlbumList" SelectCommandType="StoredProcedure" 
 OnSelected="SqlDataSource1_Selected"
 OnSelecting="SqlDataSource1_Selecting">
   <SelectParameters>
      <asp:ControlParameter Name="pageNum" ControlID="pn1" 
       PropertyName="SelectedPage" />
      <asp:Parameter DefaultValue="16" Name="pageSize" Type="Int32" />
      <asp:Parameter Name="pageCount" Direction="ReturnValue" 
       Type="Int32" />
      <asp:Parameter Name="ownerid" />
   </SelectParameters>
</asp:SqlDataSource>

En esta lista, puede ver que la PhotoAlbum_List.aspx página mostrará 16 álbumes de fotos por página. Para editarlo, cambie el parámetro de entrada que se usa en este control de origen de datos.

Cuando los usuarios finales seleccionan un álbum para ver, se les presentará una página que muestre miniaturas de todas las imágenes contenidas en el álbum, así como una vista mayor de la primera imagen del álbum. Esto se muestra aquí en la figura 22.

Figura 22. Álbum

Desde esta página, los usuarios pueden desplazarse por las imágenes del álbum o incluso descargar las imágenes de su elección. Para descargar la imagen, el Kit de inicio del sitio web club usa un controlador http (ImageFetch.ashx) para extraer la imagen de la base de datos y transmitirla de nuevo para su descarga.

Ver los miembros registrados de la aplicación: Member_List.aspx

Esta página siguiente solo se puede ver si es un usuario registrado en la aplicación. No tiene que registrarse como administrador de la aplicación, pero debe registrarse de alguna manera. Cualquier usuario puede registrarse realmente para la aplicación haciendo clic en el vínculo Pertenencia en la barra de herramientas de navegación y rellenando el formulario proporcionado. Al hacerlo, se convertirán automáticamente en un miembro registrado de la aplicación.

Una vez registrado un usuario para la aplicación, su información personal aparecerá en la página Miembros. Esta página se muestra aquí en la figura 23.

Figura 23. Lista de miembros

La lista de miembros permite que los miembros enumerados se vean en una vista Mostrar todo o por apellido.

Hay varias cosas interesantes que se deben tener en cuenta al examinar el código de esta página. En primer lugar, los vínculos alfabéticos situados encima de la lista de miembros se controlan desde un control SqlDataSource . Este control y el código usado para mostrar esta lista vinculada se presentan aquí en la lista 8.

Lista 8: Recuperar los miembros disponibles en una lista de alfabetos

<asp:LinkButton ID="showall" runat="server" Text="Show All" 
 OnClick="showall_Click" />
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
 ID="SqlDataSource1" runat="server" SelectCommand="MemberCountByLetter" 
 SelectCommandType="StoredProcedure" />
<asp:Repeater DataSourceID="SqlDataSource1" ID="Repeater1" runat="server">
   <ItemTemplate>
      <asp:LinkButton ID="hp1" runat="server" Text='<%#Eval("letter")%>' 
       Visible='<%# CInt(Eval("num"))>0 %>' OnClick="hp1_Click" 
       CssClass='<%# LinkClass(CSTR(EVAL("letter")))%>' />
      <asp:Label ID="LinkButton1" runat="server" 
       Text='<%#Eval("letter")%>' Visible='<%# CInt(Eval("num"))=0 %>' />
   </ItemTemplate>
</asp:Repeater>

En este caso, el control SqlDataSource usa un procedimiento almacenado para obtener una lista de miembros mediante una letra en el alfabeto. Una vez recuperado, esta información se presenta en la página mediante Eval instrucciones de sintaxis de enlace de datos dentro de un control Repeater . Aunque hay dos controles en la sección real <ItemTemplate> del control Repeater , solo uno estará visible a la vez. Si hay un miembro con un apellido que comienza con una letra específica, la visibilidad del control LinkButton se volverá a True; aunque si no hay un miembro con un apellido que comience con una letra determinada, la letra solo se presentará con un control Label simple.

La lista real de miembros se recupera de una manera diferente a otros elementos que se recuperan en esta aplicación. En el caso de esta página, los miembros se recuperan mediante un control ObjectDataSource en lugar de un control SqlDataSource que hemos visto anteriormente.

El control ObjectDataSource está diseñado para recuperar datos de un componente de nivel intermedio. En este caso, el ObjectDataSource1 control aquí usa el TypeName atributo para apuntar a una clase llamada MemberDetails y un método contenido en esta clase denominada Getmembers. Puede encontrar esta clase en la carpeta App_Code de la aplicación. Cuando se solicita la News_List.aspx página, el control ObjectDataSource invoca la MemberDetails clase que, a continuación, enlaza la información proporcionada mediante la sintaxis de enlace simple, como <% Eval("PhotoURL") %>. Esto se presenta en la lista 9.

Lista 9: Uso de un control ObjectDataSource para obtener información de miembro

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
 SelectMethod="Getmembers" TypeName="MemberDetails">
   <SelectParameters>
      <asp:Parameter DefaultValue="" Name="Filter" Type="String" />
   </SelectParameters>
</asp:ObjectDataSource>

Vamos a revisar la página Pertenencia.

Página pertenencia: Member_Register.aspx

Hay dos vistas posibles en esta página. Si el usuario final no está registrado en el sitio, se le presentará un formulario de registro (Figura 24).

Figura 24. Nuevo registro de usuario

En realidad, este formulario tiene algunos pasos y cada uno de estos pasos se controla a través de un nuevo control ASP.NET 2.0, el control CreateUserWizard . Este control permite varios pasos, cada uno de los cuales se define mediante varios tipos de controles WizardStep .

Si el usuario ha iniciado sesión en la aplicación, se le presentará un formulario que contenga su información personal y le permita realizar cambios en los datos subyacentes. Esto se presenta en la figura 25.

Figura 25. Modificación de los detalles del contacto

A partir de esta figura, puede ver que esta página ofrece la oportunidad de que el usuario final cambie su información personal, agregue una foto de sí mismo o incluso cambie su contraseña.

La página concreta a la que se dirige el usuario final (ya sea a Member_Register.aspx o a la Member_Details.aspx página) viene determinada por una página denominada Member_Redirect.aspx. Se trata de una página sencilla que dirige al usuario a una nueva página en función de si se autentican en la aplicación o no. Al examinar esta página, encontrará toda la lógica de la página contenida en el Page_Load evento. Esto se presenta aquí en lista 10.

Lista 10: Redireccionamiento del usuario según el estado de inicio de sesión

[VB]

Protected Sub Page_Load(ByVal sender As Object, 
  ByVal e As System.EventArgs)
        If Page.User.Identity.IsAuthenticated Then
            Response.Redirect("member_details.aspx")
        Else
            Response.Redirect("member_register.aspx")
        End If
End Sub

[C#]

protected void Page_Load(object sender, System.EventArgs e)
{
   if (Page.User.Identity.IsAuthenticated)
   {
      Response.Redirect("member_details.aspx");
   }
   else
   {
      Response.Redirect("member_register.aspx");
   }
}

Para redirigir al usuario final, es simplemente cuestión de usar el Page.User.Identity.IsAuthenticated objeto . Esto proporciona un True valor o False que luego se puede aplicar a una If Then instrucción .

Páginas estáticas: Links.aspx y Contact.aspx

Las dos últimas páginas que veremos son Links.aspx y Contact.aspx. Se trata de páginas de contenido sencillas que usan la Default.master página como plantilla (igual que todas las páginas). Estas dos páginas se presentan aquí en la figura 26.

Figura 26. Vínculos y páginas de información de contacto

Ambas páginas se componen simplemente de texto codificado de forma rígida que simplemente debe cambiarse por usted para poder personalizarse.

Resumen

El Kit de inicio del sitio web club es útil y valioso por varias razones. En primer lugar, le permite lanzar rápidamente y fácilmente un sitio web para su club u organización. En segundo lugar, y lo más importante, este kit de inicio muestra algunas de las nuevas funcionalidades que se encuentran en ASP.NET 2.0, así como algunas de las nuevas características proporcionadas por .NET Framework 2.0 subyacente.

Desde páginas maestras hasta nuevos controles, hay mucho que aprender de esta aplicación. Algunos de los elementos más importantes a los que prestar atención son los nuevos sistemas de administración de roles y pertenencia que proporciona ASP.NET 2.0. Estos nuevos sistemas de seguridad permiten administrar fácilmente el acceso a la aplicación y no solo autenticar a los usuarios de forma general, sino también colocar al usuario autenticado en un rol determinado que tendrá derechos de acceso diferentes.

El kit de inicio se creó con la esperanza de que lo personalice a fondo. La personalización no debe limitarse solo a cambiar el texto ipsum del lorem , sino que debe ver cómo agregar roles adicionales, privilegios, páginas nuevas y nuevas funcionalidades. Para obtener más información sobre cómo personalizar el Kit de inicio del sitio web de Club, lea mi artículo de seguimiento, Extend the Club Web Site Starter Kit. ¡Diviértete y feliz codificación!

© Microsoft Corporation. Todos los derechos reservados.