Ampliación del Club Web Site Starter Kit

Junio de 2005

Publicado: 19 de Octubre de 2005

Bill Evjen
Reuters

Este artículo se aplica a:
Microsoft ASP.NET 2.0
Visual Web Developer 2005 Express Edition

Resumen: en este artículo aprenderá a ampliar el nuevo Club Web Site Starter Kit, que es un tipo de proyecto instalable y disponible para Visual Studio 2005 o Visual Web Developer 2005 Express Edition. (28 páginas impresas.) (Este artículo contiene vínculos a páginas en inglés.)

En esta página

Introducción Introducción
Mejoras estándar Mejoras estándar
Adición de un sistema de archivos Adición de un sistema de archivos
Configuración de la página de administración de archivos Configuración de la página de administración de archivos
Creación de la sección de administración del sistema de administración de archivos Creación de la sección de administración del sistema de administración de archivos
Creación de la página Admin.aspx Creación de la página Admin.aspx
Creación de la página Docs.aspx Creación de la página Docs.aspx
Generación y ejecución Generación y ejecución
Resumen Resumen

Introducción

Con Visual Studio 2005 y Visual Web Developer 2005 Express Edition se incluye un proyecto llamado Personal Web Site Starter Kit. Aunque se trata del único ASP.NET Starter Kit que se incluye con la instalación predeterminada de estos IDE, también puede utilizar ambos IDE para buscar otros Starter Kits para utilizarlos y personalizados. (Para ello, seleccione Community, elija Community Search y haga clic en Starter Kits en el menú IDE.)

Uno de estos Starter Kits que puede encontrar es Club Web Site Starter Kit (que se muestra en la figura 1). Este Starter Kit le permite configurar rápidamente un sitio Web para un club o una organización. Aunque este Starter Kit se centra en un club de fútbol, puede modificar fácilmente la aplicación para que sirva para cualquier tipo de grupo. Para ver con detalle los conceptos básicos de este Starter Kit, asegúrese de leer acerca de él en mi artículo anterior, Presentación del Starter Kit Club Web Site. Si cree que necesita una introducción a este Starter Kit, le recomiendo que lea primero la revisión de la introducción.

Figura 1. Página principal del sitio del club

El Starter Kit Club Web Site utiliza algunas de las mejores características que ofrece la versión más reciente de ASP.NET 2.0, como páginas principales, sistemas de administración de funciones y pertenencia de miembros, sistemas de exploración y mucho más.

Este Starter Kit de sitio Web le proporciona una página principal, una página de eventos, un lugar para las noticias, un álbum de fotos, una página que enumera todos los miembros, una página de vínculos y una página de contacto. Aunque el álbum de fotos es uno de los puntos más importantes de la aplicación, las secciones de eventos y noticias del sitio también se pueden resaltar en la aplicación. Los elementos de eventos y noticias que se colocan en el sistema no sólo aparecen en sus respectivas páginas, sino que también aparecen en la página principal (Default.aspx).

Este artículo explicará cómo ampliar y personalizar la aplicación, ya que éste es el objetivo de los Starter Kits. Recuerde, se les llama Starter Kits por algo. Debe considerar este Starter Kit como un punto de partida a partir del cual puede crear una aplicación totalmente exclusiva. Al final, es posible que acabe creando algo que no se parezca en absoluto a un sitio Web de club, sino que sea algo completamente diferente.

Mejoras estándar

Aunque práticamente no sea necesario decirlo, los primeros pasos incluyen la personalización del Club Web Site Starter Kit para personalizar completamente las páginas que desea que la aplicación conserve, lo que incluye la personalización de la página principal y de todas las páginas de contenido dentro de la aplicación.

Además de esto, es importante señalar que esta aplicación no aprovecha ninguna de las posibilidades de almacenamiento en caché de .NET, por lo que ninguna página se almacena en la caché del sistema para su reutilización, lo que permitiría ahorrar el coste que supone regenerar la página.

En la mayoría de los casos, es bastante probable que los datos que vaya a presentar en el sitio Web del grupo no vayan a cambiar con frecuencia. Por tanto, para lograr un mayor rendimiento de la aplicación, puede especificar que las páginas ASP.NET se almacenen en caché durante un determinado período de tiempo.

No obstante, como esta aplicación utiliza la nueva posibilidad de utilizar páginas principales y páginas de contenido, ahora hay dos páginas que se combinan cuando se realiza la llamada necesaria para crear una única página ASP.NET. Al ser éste el caso, ¿dónde sería necesario exactamente aplicar el almacenamiento en caché?

Al utilizar páginas principales, se aplica el almacenamiento en caché a la página de contenido. No se debe aplicar el almacenamiento en caché a la página principal. Al utilizar la directiva de página OutputCache, lo que debe hacer en realidad es colocarla en la página de contenido para llamar al almacenamiento en caché. A continuación, podemos ver:

<%@ OutputCache Duration="60" VaryByParam="None" %>

Si se coloca esta directiva de página en cualquiera de las páginas de contenido de la aplicación, el sistema podrá almacenar en caché tanto el contenido de la página de contenido como la página principal asociada (recuerde que por ahora se trata de una única página) durante 60 segundos.

Adición de un sistema de archivos

Por tanto, como ejemplo de ampliación de un Starter Kit, vamos a ampliar el Club Web Site Starter Kit para que haga algo que beneficie a los miembros del club o la organización. Aunque puede haber un millón o más de posibles ampliaciones que puede realizar, elijamos tan sólo una y veamos cómo agregar un sencillo sistema de administración de archivos a la aplicación.

Este sistema de administración de archivos permitirá a los usuarios que estén incluidos en la función Administrators agregar, editar o eliminar archivos del sistema. Los administradores también podrán colocar los archivos cargados en categorías que también están bajo su control.

Este ejemplo requiere el uso de una base de datos. Para ello, utilizaremos los nuevos archivos de Microsoft SQL Server Express Edition, aunque también puede utilizar otra base de datos si lo desea.

El primer paso para crear este sistema básico de administración de archivos consiste en cambiar el sistema de exploración de la aplicación para que incluya una página para los miembros incluidos en la función Administrators que les permita trabajar con los archivos y las categorías de los archivos.

Configuración de la página de administración de archivos

El primer paso será configurar la aplicación para controlar una página de administración de archivos a la que sólo tendrán acceso los usuarios registrados que tengan la función Administrators. Esta página les permitirá cargar y administrar archivos, así como administrar las categorías en las que se colocarán estos archivos.

Por este motivo, vamos a tener un vínculo Admin en el sistema de exploración. Como sólo permitiremos que vean este vínculo los usuarios que estén incluidos en la función Administrators, utilizaremos una característica de ASP.NET 2.0 llamada recorte de seguridad.

El recorte de seguridad ofrece la posibilidad de "recortar" elementos del sistema de exploración según la función del usuario. Para ello, se aplica cierta configuración al archivo Web.config y se realizan otros cambios en el archivo Web.sitemap.

Aunque el recorte de seguridad ya está habilitado en Club Web Site Starter Kit, deberá examinar el archivo Web.config para entender cómo se ha implementado. La parte del Web.config que se encarga de ello se encuentra en la sección <siteMap> del archivo y se presenta en el listado 1.

Listado 1: Parte del archivo Web.sitemap que se encarga del recorte de seguridad

<siteMap defaultProvider="AspNetXmlSiteMapProvider" enabled="true">
   <providers>
      <remove name="AspNetXmlSiteMapProvider" />
      <add name="AspNetXmlSiteMapProvider"
        description="SiteMap provider that reads in .sitemap XML files."
        type="System.Web.XmlSiteMapProvider"
        securityTrimmingEnabled="true"
        siteMapFile="Web.sitemap" />
   </providers>
</siteMap>

Una vez habilitado, las páginas bloqueadas especificadas no aparecerán en el sistema de exploración de la aplicación. El Club Web Site Starter Kit bloqueará determinadas páginas de manera que sólo tengan acceso a ellas los usuarios registrados mediante la sección <location> del archivo Web.config que se muestra en el listado 2.

Listado 2: Bloqueo de determinadas páginas proporcionando acceso sólo a los administradores

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

Aunque se establece en el archivo Web.config, puede filtrar los usuarios que ven las páginas (incluido el vínculo de la página de la barra de exploración) estableciendo la configuración adecuada en el archivo Web.sitemap o utilizando el atributo roles del elemento <siteMapNode>.

<siteMapNode url="admin.aspx" title="Admin" 
 description="Administer File System" roles="Administrators" />

En nuestro ejemplo, vamos a crear la página Admin.aspx, que sólo estará disponible para usuarios registrados que estén incluidos en la función Administrators. Para ello, editaremos el archivo Web.sitemap, como se muestra en el listado 3.

Listado 3: Cambio del archivo Web.sitemap para bloquear la página Admin.aspx

<location path="Admin.aspx" >
    <system.web>
      <authorization >
        <allow roles="Administrators"/>
        <deny users="*"/>
      </authorization>
    </system.web>
 </location>

El primer cambio que se realizará al archivo Web.config de la aplicación es agregar una sección <location> adicional que apunte a la página Admin.aspx que crearemos en breve. Como puede ver en el listado 3, esta página estará disponible sólo para los usuarios que estén incluidos en la función Administrators.

Ahora que hemos colocado en su lugar las reglas de acceso de la página que queremos crear, vamos a crear la base de datos que utilizará la página Admin.aspx.

Creación de la sección de administración del sistema de administración de archivos

El objetivo de la página Admin.aspx es permitir a los usuarios de la función Administrators cargar archivos en el sistema de administración de archivos. Sin embargo, para conseguir que los miembros puedan utilizar el sistema de archivos con mayor facilidad, en vez de proporcionar una larga lista de documentos, presentaremos los documentos mediante un sistema de categorías.

Por tanto, crearemos un sistema de categorías y permitiremos que los usuarios de la función Administrators puedan crear, editar y eliminar categorías en las que se han colocado los documentos. A continuación, cuando los administradores carguen cualquier documento en la aplicación, podrán también asignarle una categoría al documento.

Además, agregaremos a este sistema de administración de archivos la posibilidad de que el administrador pueda decidir si desea o no que una categoría aparezca en el sistema de administración final. También haremos que pueda almacenar algunos metadatos sobre los archivos, entre los que se incluyen todos los comentarios relacionados con el archivo cargado y la fecha y hora en la que se cargó el archivo realmente al sistema.

Creación de los archivos de base de datos necesarios

La página Admin.aspx trabajará de manera bastante estrecha con una base de datos subyacente. Por este motivo, debemos crear algunas tablas nuevas en el archivo clubsite.mdf. Se trata de un archivo de SQL Server 2005 Express Edition y ya se utiliza para ejecutar la mayoría del Club Web Site Starter Kit predeterminado.

Para crear las nuevas tablas que necesitamos, haga clic en la ficha Database Explorer de Visual Web Developer. En esta ventana del IDE, encontrará un nodo raíz llamado Data Connections. Haga doble clic en él y verá una referencia al archivo de base de datos clubsite.mdf. Si expande el archivo de base de datos, verá una lista de tablas, vistas, procedimientos almacenados, etc. Aparecerá algo similar a lo que se muestra en la figura 2.

Figura 2. Base de datos del sitio del Club

Haga clic con el botón secundario en la carpeta Tables y seleccione Add New Table, con el que aparecerá directamente el diseñador de tablas de Visual Web Developer. En esta nueva ventana de Visual Web Developer, cree una tabla con la información que se muestra en la figura 3.

Figura 3. Creación de la tabla DocumentCategories

Esta tabla incluye las columnas CategoryID (int), CategoryName (nvarchar(50)) e IsPublic (bit). Observe en la figura 3 que CategoryID tiene una clave amarilla al comienzo de la fila, que indica que CategoryID es una clave principal que se utiliza para identificación. Puede establecer que CategoryID sea una clave principal si hace clic con el botón secundario en la fila (en realidad, hay que hacer clic con el botón secundario en el cuadro gris que aparece al principio de la fila) y seleccionar Set Primary Key en el menú que aparecerá. También deberá realizar ciertos cambios a las propiedades de la fila CategoryID. Resalte la fila (para ello, vuelva a seleccionar el cuadro gris que aparece al principio de la fila) y aparecerán las propiedades de esta fila en la ventana Column Properties. Cambie las propiedades de manera que CategoryID sea un valor de identidad y se incremente en 1 por cada fila. Esta configuración de las propiedades se muestra en la figura 4.

Figura 4. Adición de una clave principal

A continuación, guarde la tabla. Aparecerá un cuadro de diálogo que le preguntará el nombre de la tabla. En este caso, escriba como nombre de la tabla DocumentCategories (como se muestra en la figura 5).

Figura 5. Nombre de la tabla

A continuación, crearemos una tabla donde almacenaremos los metadatos de los archivos que se guardarán en el disco. Cree una tabla de la misma manera que antes, pero configurando las columnas como se muestra en la figura 6.

Figura 6. Propiedades de la tabla DocumentCategories

Esta tabla tiene columnas para el identificador y el nombre del archivo, la fecha en la que el documento entró en el sistema, un lugar para almacenar todos los comentarios relacionados con el documento, la categoría asociada del documento y si el documento cuenta con un indicador de "documento superior", que veremos al final de este artículo.

Guarde esta tabla con el nombre Documents. Una vez hecho esto, el Explorador de bases de datos debe presentar el siguiente aspecto:

Figura 7. Tras agregar la tabla

Ahora que ya hemos colocado la base de datos del sistema de administración de archivos, vamos a crear la página Admin.aspx. Esta página trabajará con la base de datos subyacente que acabamos de crear para permitirnos agregar, editar o eliminar tanto categorías como archivos.

Creación de la página Admin.aspx

Cree una nueva página de contenido (mediante la página Default.master) llamada Admin.aspx. Esta página contiene dos secciones distintas: una para administrar las categorías y la otra para administrar los archivos. Cada sección se define en la página mediante secciones <div>, como se muestra en el listado 4.

Listado 4: Marco de trabajo de la página Admin.aspx

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    Title="File Management System" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
 Runat="Server">
    <div id="body">
        <div class="fullwidth">
            <h2>Administer Categories</h2>          
        </div>

        <div class="fullwidth">
            <h2>Administer Files</h2>
        </div>          
    </div>
</asp:Content>

En este fragmento de código, podemos ver que el marco de trabajo de la página Admin.aspx admite dos secciones. Cada sección aparecerá visualmente encerrada en un cuadro gris debido a la declaración class="fullwidth" de las etiquetas <div>.

Ahora nos centraremos en la primera sección de la página, que se encarga de la administración de categorías.

Incorporación de todos los elementos del sistema de administración de categorías

Crear la sección de administración de categorías de la página Admin.aspx es muy sencillo. Esta sección incluirá una sección GridView que permitirá al administrador administrar las categorías que ya hay en el sistema. Directamente debajo de esto, aparecerá un pequeño formulario que permitirá crear nuevas categorías. Al final, la vista de diseño de esta sección debe tener el aspecto que se muestra en la figura 8.

Figura 8. Sistema de administración de categorías

El control SqlDataSource de la página se utiliza para comunicarse con la tabla de SQL Express que hemos creado anteriormente. Tras colocar el control SqlDataSource en la página, resáltelo e inicie la etiqueta inteligente del control (para ello, seleccione la flecha verde que aparece en la esquina superior derecha del control). Seleccione el vínculo Configure Data Source de la etiqueta inteligente. Aparecerá un cuadro de diálogo que permite configurar el control SqlDataSource. La primera opción consiste en seleccionar la conexión de datos que se utilizará para conectar con el archivo clubsite.mdf. Como esta conexión ya se ha definido en la instalación predeterminada de Club Web Site Starter Kit, seleccione ClubSiteDB en la lista desplegable, como se muestra en la figura 9.

Figura 9. Conexión con la base de datos

La siguiente página del cuadro de diálogo nos permite seleccionar la tabla (DocumentCategories) y las columnas que queremos utilizar. Como queremos utilizar todas las columnas, seleccione la casilla de verificación correspondiente a todo (el carácter "*"). A continuación, antes de continuar con la siguiente página del cuadro de diálogo, haga clic en el botón Advanced y seleccione la casilla de verificación que indicará a Visual Web Developer que debe generar las instrucciones INSERT, UPDATE y DELETE junto con la instrucción SELECT estándar. Esta configuración se muestra en la figura 10.

Figura 10. Generación de procedimientos almacenados

El siguiente paso consiste en configurar GridView para que funcione con el control SqlDataSource que acabamos de crear. Para ello, cambie a la vista de diseño de página y abra la etiqueta inteligente del control GridView. En la etiqueta inteligente, puede seleccionar el control SqlDataSource1 de la lista de orígenes de datos disponibles. Al hacerlo, cambiará automáticamente el control GridView y se representarán las columnas de la tabla DocumentCategories.

Seguidamente, seleccione las casillas de verificación Enable Paging, Enable Sorting, Enable Editing y Enable Deleting de la etiqueta inteligente del control GridView. Complete la configuración del control GridView eligiendo un mejor estilo mediante el vínculo Auto Format o sencillamente cambiando el ancho del control (cambié el mío al 75%). Tras realizar todos estos pasos, se obtiene un control GridView tal y como se muestra en la figura 8.

A continuación se muestra el código de la sección de categorías en el listado 5.

Listado 5: Construcción visual de la sección de categorías

<div class="fullwidth">
   <h2>File Category System</h2>
   <p>
   <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
    AllowSorting="True" AutoGenerateColumns="False" 
    DataKeyNames="CategoryID" DataSourceID="SqlDataSource1" 
    EmptyDataText="There are no categories present." Width="75%">
      <Columns>
         <asp:CommandField ShowDeleteButton="True" 
          ShowEditButton="True" />
         <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" 
          InsertVisible="False" ReadOnly="True" 
          SortExpression="CategoryID" />
         <asp:BoundField DataField="CategoryName" 
          HeaderText="CategoryName" SortExpression="CategoryName" />
          <asp:CheckBoxField DataField="IsPublic" HeaderText="IsPublic" 
           SortExpression="IsPublic" />
      </Columns>
   </asp:GridView>
   <p>
   <strong><span style="text-decoration: underline">Add a New 
   Category</span></strong></p>
   <p>Category Name:<br />
   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></p>
   <p>
   <asp:CheckBox ID="CheckBox1" runat="server" 
    Text="Check if category is public" /></p>
    <p>
    <asp:Button ID="Button1" runat="server" Text="Add Category" 
     OnClick="Button1_Click" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
     ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
     DeleteCommand="DELETE FROM [DocumentCategories] WHERE [CategoryID] = 
        @original_CategoryID" 
     InsertCommand="INSERT INTO [DocumentCategories] ([CategoryName], 
        [IsPublic]) VALUES (@CategoryName, @IsPublic)" 
     SelectCommand="SELECT * FROM [DocumentCategories]" 
     UpdateCommand="UPDATE [DocumentCategories] SET [CategoryName] = 
        @CategoryName, [IsPublic] = @IsPublic WHERE [CategoryID] = 
        @original_CategoryID">
      <DeleteParameters>
         <asp:Parameter Name="original_CategoryID" 
          Type="Int32" />
      </DeleteParameters>
      <UpdateParameters>
         <asp:Parameter Name="CategoryName" Type="String" />
         <asp:Parameter Name="IsPublic" Type="Boolean" />
         <asp:Parameter Name="original_CategoryID" Type="Int32" />
      </UpdateParameters>
      <InsertParameters>
         <asp:Parameter Name="CategoryName" Type="String" />
         <asp:Parameter Name="IsPublic" Type="Boolean" />
      </InsertParameters>
   </asp:SqlDataSource>
   </p>            
</div>

Necesitamos realizar un cambio más a este fragmento de código antes de continuar. En su estado actual, el método Insert no nos servirá. Por tanto, será necesario cambiar parte del código generado por Visual Web Developer.

Si observa el valor del atributo InsertCommand del nodo principal del control SqlDataSource, verá que nuestro comando Insert busca dos parámetros: uno para el nombre de la categoría (@CategoryName) y un valor Boolean que indica si se ha habilitado la visualización pública de la categoría (@IsPublic).

Como estos valores proceden de los controles de servidor de ASP.NET que se encuentran en la misma página, vamos a cambiar la sección <InsertParameters> del control SqlDataSource para reflejar mejor el origen de los valores. Por tanto, en vez de utilizar:

<InsertParameters>
   <asp:Parameter Name="CategoryName" Type="String" />
   <asp:Parameter Name="IsPublic" Type="Boolean" />
</InsertParameters>

Vamos a cambiar nuestra sección <InsertParameters> por la siguiente:

<InsertParameters>
   <asp:ControlParameter Name="CategoryName" Type="String" 
    ControlID="TextBox1" />
   <asp:ControlParameter Name="IsPublic" Type="Boolean" 
    ControlID="CheckBox1" />
</InsertParameters>

Las secciones de parámetros de los controles DataSource permiten especificar cómo se rellenan estos parámetros de manera declarativa. Entre las opciones disponibles se incluyen:

<asp:Parameter> 
<asp:ControlParameter> 
<asp:CookieParameter> 
<asp:FormParameter> 
<asp:ProfileParameter> 
<asp:QueryStringParameter> 
<asp:SessionParameter> 

En nuestro caso, utilizamos el control <asp:ControlParameter>, ya que nos permite, mediante declaración de los valores necesarios, desprendernos directamente de algunos de los controles de servidor ASP.NET que contiene nuestro sencillo formulario. Los dos controles <asp:ControlParameter> que utilizamos en la sección <InsertParameters> apuntan al control TextBox1 como valor del nombre de la categoría y el control CheckBox1 del valor Boolean necesario que indica si la categoría puede verla el público.

Ahora que hemos definido el aspecto visual de esta sección y el control SqlDataSource, el siguiente paso consiste en llamar a determinadas acciones cuando el usuario final haga clic en el botón Add Category. Para ello, utilizaremos el evento Button1_Click.

Figura 11. Sitio del club con categorías

El evento Button1_Click agregará una nueva categoría al sistema global de categorías. Este método se detalla en el listado 6.

Listado 6: Adición de una categoría mediante el evento Button1_Click

[Visual Basic]

Protected Sub Button1_Click(ByVal sender As Object, _
   ByVal e As System.EventArgs)
        SqlDataSource1.Insert()
        TextBox1.Text = "
        CheckBox1.Checked = False
End Sub

[C#]

protected void Button1_Click(object sender, EventArgs e)
{
   SqlDataSource1.Insert();
   TextBox1.Text = ";
   CheckBox1.Checked = false;
}

El evento Button1_Click realiza ciertas operaciones básicas. Lo primero que hace es llamar al método Insert() del control SqlDataSource, lo que hará que el control SqlDataSource tome los valores de los dos controles de servidor especificados (TextBox1 y CheckBox1) y los inserte en el archivo de base de datos. Tras realizar el método Insert(), vaciamos el formulario asignando valores en blanco a los controles TextBox1 y CheckBox1. Con ello se impide que el administrador haga clic dos veces en el botón Add Category y se introduzca al sistema dos veces la información de categoría.

Ahora la página Admin.aspx es capaz de insertar, editar y eliminar las categorías que se asignarán a los archivos. A continuación, centrémonos en la parte de administración de archivos de la página Admin.aspx.

Incorporación de todos los elementos del sistema de administración de archivos

Una vez terminado el sistema de administración de categorías, el siguiente paso es incorporar todos los elementos del sistema de administración de archivos. Al igual que el sistema de administración de categorías, el sistema de administración de archivos incluirá un control GridView que mostrará los archivos que hay en el sistema, además de un formulario que se utilizará para introducir nuevos archivos en el sistema.

La figura 12 muestra el aspecto que tendrá la sección finalizada en el diseñador de Visual Web Developer.

Figura 12. Sistema de administración de archivos

Los controles de servidor que hay en esta página no son muy difíciles de implementar. El formulario que permite introducir un nuevo archivo en el sistema de administración de archivos incluye una lista desplegable, un cuadro de texto, algunos botones de opción, un control de carga de archivos, un botón y un control de etiqueta sencillo.

El control DropDownList que se utiliza en la parte superior del formulario para mostrar la lista de categorías disponibles a las que se puede asignar un archivo en realidad está controlado por el control SqlDataSource1 de la página que se utilizó en la parte superior de la página para el sistema de administración de categorías.

Para realizar esta tarea, sólo tiene que resaltar el control DropDownList y abrir la etiqueta inteligente del control. En esta etiqueta inteligente, encontrará la opción para elegir un origen de datos para el control. Seleccione esta opción y aparecerá el cuadro de diálogo que se muestra en la figura 13.

Figura 13. Establecimiento de DataSource en DropDownList

En este cuadro de diálogo, puede seleccionar el origen de datos con el que desea enlazar el control, así como el campo de datos que desea enlazar con el texto que se muestra al usuario final y el valor que se utilizará para el elemento seleccionado. Una vez que haya terminado con estos elementos, seleccione el botón OK para continuar.

El siguiente paso es configurar el control DataSource que se utilizará para rellenar el control GridView con una lista de los archivos que contiene el sistema. Para ello, arrastre y suelte un nuevo control SqlDataSource a la superficie de diseño de la página y, a continuación, siga los mismos pasos del asistente para configuración que realizó para el ejemplo de control SqlDataSource de la categoría que se indicaron previamente en este artículo.

En el proceso de configuración del control SqlDataSource2, seleccione la tabla Documents y asegúrese de seleccionar todos los elementos disponibles en la tabla Documents. Además, al igual que la configuración del control SqlDataSource que utilizaba el sistema de administración de categorías, deberá seleccionar el botón Advanced de modo que pueda seleccionar la opción para que el asistente cree las instrucciones INSERT, UPDATE y DELETE, además de la instrucción SELECT. Esto se muestra en la figura 14.

Figura 14. Configuración de la tabla Documents

Aunque este asistente configura automáticamente el control SqlDataSource, deberá realizar algunos cambios al código generado por este asistente. En primer lugar, si observa las diferentes definiciones de parámetros que existen para el control SqlDataSource, verá la sección <InsertParameters>, que se muestra a continuación:

<InsertParameters>
   <asp:Parameter Name="DocumentName" Type="String" />
   <asp:Parameter Name="DateInput" Type="DateTime" />
   <asp:Parameter Name="Comments" Type="String" />
   <asp:Parameter Name="DocumentCategory" Type="Int32" />
   <asp:Parameter Name="TopDoc" Type="Boolean" />
</InsertParameters>

Aunque podemos ver todos los parámetros necesarios para realizar un Insert en la tabla Documents, debemos cambiar esta estructura ya que algunos de los parámetros los proporcionarán los controles de servidor que hay en la página, mientras que otros parámetros se crearán y agregarán dinámicamente. Por este motivo, cambie la sección <InsertParameters> por la siguiente:

<InsertParameters>
   <asp:ControlParameter Name="Comments" Type="String" 
    ControlID="TextBox2" />
   <asp:ControlParameter Name="DocumentCategory" Type="Int32" 
    ControlID="DropDownList1" PropertyName="SelectedValue" />
   <asp:ControlParameter Name="TopDoc" Type="Boolean" 
    ControlID="RadioButtonList1" PropertyName="SelectedValue" />
</InsertParameters>

En este cambio de código, puede ver que hemos quitado algunos parámetros de la lista (como ocurre con los parámetros DocumentName y DateInput). Estos parámetros se generarán dinámicamente mediante el evento Button2_Click (que veremos a continuación).

El resto de los parámetros se han cambiado a los tipos ControlParameter ya que los valores de estos parámetros los proporcionarán determinados controles de servidor del formulario. Mediante la propiedad ControlID podemos apuntar al control concreto desde el que se recuperará el valor necesario. En algunas de las propiedades, también será necesario especificar el nombre de la propiedad que se utilizará para obtener dicho valor. Por ejemplo, el valor procedente del control DropDownList que queremos utilizar es la propiedad SelectedValue y ésta es la propiedad especificada mediante el atributo PropertyName. Estos son todos los cambios que haremos al control SqlDataSource2.

Ahora que hemos terminado con el control SqlDataSource del segundo control GridView, el siguiente paso consiste en enlazar el control GridView2 al control SqlDataSource2. Para ello, abriremos la etiqueta inteligente del control GridView2 y seleccionaremos el control SqlDataSource2 de la lista desplegada que aparecerá. A continuación, puede habilitar la paginación, ordenación, edición y eliminación seleccionando las casillas de verificación adecuadas. Esto se muestra en la figura 15.

Figura 15. Activación de paginación, ordenación, edición y eliminación

Como posteriormente utilizaremos la propiedad DocumentName en la construcción del hipervínculo que los usuarios finales utilizarán para buscar el archivo que desean descargar o ver, no realizaremos ningún cambio que se pueda hacer al valor DocumentName. Por tanto, para desactivar la posibilidad de edición de esta columna del control GridView2, haga clic en el vínculo Edit Columns de la etiqueta inteligente del control GridView. Aparecerá el cuadro de diálogo Fields que se muestra en la figura 16.

Figura 16. Edición de columnas de GridView

En el cuadro de diálogo Fields, resalte el campo DocumentName de la sección Selected fields del cuadro de diálogo. Aparecerán las propiedades del campo DocumentName en la parte derecha del cuadro de diálogo. Para desactivar la posibilidad de editar este campo en concreto, establezca la propiedad ReadOnly en True en vez de su valor predeterminado False.

En este punto, ya hemos terminado con toda la configuración de la sección del sistema de administración de archivos de la página. Ahora puede ejecutar la aplicación, iniciar sesión como administrador y crear categorías, cargar archivos y mucho más. Ahora centrémonos en la página que mostrará la información sobre categorías y archivos al usuario final.

Creación de la página Docs.aspx

Ahora debemos crear la página que permitirá al usuario final explorar las categorías y seleccionar los archivos que estas categorías incluyen. Como primer paso, cambiaremos el nombre de la página Links.aspx por Docs.aspx. Para ello, haga clic con el botón secundario en la página Links.aspx del Explorador de soluciones de Visual Web Developer y cambie el nombre de la página Links.aspx por Docs.aspx. A continuación, el siguiente paso consiste en editar el archivo Web.sitemap para que utilice Docs.aspx en vez de Links.aspx.

<siteMapNode url="Docs.aspx" title="Docs"  
 description="Useful Documents" />

La página Docs.aspx será bastante sencilla, ya que sólo tiene que tratar con un enlace de datos unidireccional. No habrá ninguna funcionalidad en la página que permita al usuario final editar, eliminar o insertar nuevos archivos en el sistema. Sólo podrán abrir los archivos del sistema.

Al final, nuestra página tendrá un aspecto similar al del diseñador de Visual Web Developer que se muestra en la figura 17.

Figura 17. Página Useful Documents

Como puede ver en la vista de diseño de esta página, la página se divide en dos secciones distintas. La primera es la sección de categorías, que determinará el contenido de la sección de documentos que aparece debajo de la sección de categorías.

Para permitir que los usuarios finales seleccionen categorías

La sección de categorías incluye un único control DataList y un control SqlDataSource. En primer lugar, arrastre y suelte un control DataList a la superficie de diseño de la página. Abra la etiqueta inteligente del control DataList y seleccione <New data source...> en la lista desplegable de orígenes de datos disponibles. Al hacerlo, aparecerá el cuadro de diálogo Choose Data Source. En este cuadro de diálogo, seleccione Database y haga clic en el botón Next. Al igual que hicimos cuando trabajamos con la página Admin.aspx, seleccione la conexión ClubSiteDB. En la siguiente página del cuadro de diálogo, seleccione la tabla DocumentCategories y seleccione * para ver todos los campos disponibles en la tabla. Aquí, haga clic en el botón WHERE... del cuadro de diálogo y aparecerá el cuadro de diálogo Add WHERE Clause que se muestra en la figura 18.

Figura 18. Adición de la cláusula WHERE a la consulta

Como sólo queremos mostrar las categorías en las que el valor IsPublic está establecido en True, debemos especificar este requisito con una cláusula WHERE de la instrucción SQL. Para ello, seleccionamos IsPublic en la lista desplegable Column utilizando como operador el signo más. Como origen, seleccione None en la lista desplegable y elija el valor True en el cuadro de texto Value de las propiedades de Parameter. Una vez hecho esto, deberá hacer clic en el botón Add del cuadro de diálogo y en el botón OK para cerrar el cuadro de diálogo y terminar el proceso.

A continuación, como queremos que las categorías aparezcan en orden alfabético, seleccione el botón ORDER BY... del cuadro de diálogo Configure Data Source, que abre el cuadro de diálogo Add ORDER BY Clause que se muestra en la figura 19.

Figura 19. Adición de la cláusula Order By

En este cuadro de diálogo, seleccione el campo CategoryName de la lista desplegable Sort by y deje el botón de opción en Ascending (lo que indica que el orden se establecerá de la A a la Z).

Una vez terminado, el aspecto del control DataList cambiará y será similar al siguiente:

Figura 20. DataList tras la configuración

Necesitamos cambiar los elementos predeterminados de la lista del control DataList para que sean hipervínculos que el usuario final pueda seleccionar. Cuando el usuario final hace clic en un vínculo de categoría, aparecerán los archivos adecuados en el control GridView que esta página contiene. Para configurar correctamente el control DataList, abra la etiqueta inteligente del control y haga clic en el vínculo Edit Templates. Aparecerá la sección ItemTemplate del control que se muestra en la figura 21

Figura 21. Edición de ItemTemplate

Como no queremos que ningún elemento aparezca como se muestra en esta plantilla, bórrelo todo y agregue en su lugar un control HyperLink. Tras agregar el control HyperLink a la sección ItemTemplate, abra la etiqueta inteligente del control y seleccione el único vínculo Edit DataBindings. Aparecerá el cuadro de diálogo DataBindings de HyperLink1.

En el cuadro de diálogo DataBindings de HyperLink1, establezca la propiedad Text de manera que quede enlazada al campo CategoryName. A continuación, antes de hacer clic en el botón OK, establezca la propiedad NavigateUrl de manera que quede enlazada a la siguiente expresión personalizada:

<%# Eval("CategoryID", @"Docs.aspx?categoryid={0}") %>

Esta instrucción Eval que utiliza la propiedad NavigateUrl del control HyperLink convertirá la categoría de la lista en un vínculo que contiene una cadena de consulta. Un ejemplo sería Docs.aspx?categoryid=4. Ahora que hemos terminado con el control HyperLink, el siguiente paso es mostrar los archivos adecuados cuando un usuario final hace clic en uno de los vínculos de categoría.

Visualización de los archivos

La sección de visualización de archivos de la página se compone de tan sólo dos partes: un control GridView y un control SqlDataSource. Al configurar el control SqlDataSource2, deberá trabajar con la cadena de consulta categoryid que se envía con la dirección URL cuando el usuario final hace clic en uno de los vínculos de categoría generados dinámicamente.

Para ello, seleccione todas las columnas del asistente para configuración de controles de SqlDataSource. A continuación, haga clic en el botón WHERE para especificar lo que se necesita obtener en el valor de la cadena de consulta categoryid. Para ello, en el cuadro de diálogo Add WHERE Clause, seleccione DocumentCategory en la lista desplegable Columns y establezca que sea igual al campo de cadena de consulta de categoryid. Esta configuración se muestra en la figura 22.

Figura 22. Configuración de la categoría SqlDataSource

Una vez configurados estos elementos, termine la configuración del control SqlDataSource presionando el botón ORDER y optando por ordenar la lista de documentos por la columna DateInput en orden descendente. Al final, el valor del SelectCommand del control SqlDataSource2 debe ser el siguiente:

SelectCommand="SELECT * FROM [Documents] WHERE ([DocumentCategory] = 
   @DocumentCategory) ORDER BY [DateInput] DESC"

Ahora que el control SqlDataSource2 está terminado, el siguiente paso es configurar el control GridView de la página para trabajar con él. Para ello, en primer lugar enlazaremos el control GridView al control SqlDataSource2 mediante la etiqueta inteligente del control GridView. También habilitaremos la paginación y la ordenación, y estableceremos el ancho del control en el 100%.

Al hacer clic en el vínculo Edit Columns de la etiqueta inteligente del control, aparecerá el cuadro de diálogo Fields. Aquí es posible configurar la presentación y el comportamiento de cada columna. Al estar destinada esta lista de documentos al usuario final, hay algunos valores que probablemente a éste no le interese ver. Por este motivo, quite las columnas DocumentID, DocumentCategory y TopDoc de la lista que contiene el cuadro de diálogo.

Mientras que las tres columnas restantes son columnas BoundField habituales, alteraremos la columna DocumentName para que sea una columna con plantilla. En vez de mostrar únicamente un valor String directamente en la columna DocumentName, vamos a mostrar el nombre del documento como un vínculo al documento. La única manera de hacerlo consiste en ocuparnos del procesamiento de la columna.

En el cuadro de diálogo Fields, resalte la columna DocumentName y verá un vínculo en la parte inferior del cuadro de diálogo que nos permitirá convertir la columna en un campo con plantilla, como podemos ver en la figura 23.

Figura 23. Conversión de la columna DocumentName en TemplateField

Tras hacer clic en el vínculo Convert this field into a TemplateField, basta con hacer clic en el botón OK para pasar al último paso.

A continuación, vuelva a abrir la etiqueta inteligente del control GridView y haga clic en el vínculo Edit Templates que aparece en la parte inferior de la etiqueta inteligente. Aparecerá la ItemTemplate de la columna DocumentName. Si abre la lista desplegable de plantillas disponibles, observará que puede modificar mucho más, como se muestra aquí en una imagen del contenido de la lista desplegable.

Figura 24. Lista Edit Templates

Sin embargo, en este momento únicamente nos interesa cambiar la sección ItemTemplate. Por tanto, seleccione este elemento de la lista desplegable y elimine la única instancia del control Label que encontrará en esta vista de la columna. En vez de un control Label, agregue un control HyperLink. A continuación, edite los enlaces de datos del control HyperLink y establezca la propiedad Text del control en la columna DocumentName, a la vez que establece la propiedad NavigateUrl en lo siguiente:

<%# Eval("DocumentName", @"~\Files\{0}") %>

Generación y ejecución

Ya está todo, al menos en lo que se refiere al marco de trabajo básico del sistema de administración de archivos. Ahora puede generar y ejecutar la aplicación. Al final, verá una página en la que los usuarios finales podrán explorar un sistema de categorías y seleccionar los archivos que desean ver o descargar. Si el usuario es un administrador, podrá agregar, editar o eliminar categorías y archivos del sistema.

Una columna que observará que no hemos utilizado en esta demostración es la columna TopDoc. Esta columna se puede utilizar para un control especial GridView que puede colocar en cualquier parte de la aplicación (por ejemplo, en la página principal del sitio) que muestra únicamente los documentos para los que el valor TopDoc se ha establecido en True. Esto ofrece una manera atractiva de resaltar los documentos más importantes de la lista de archivos y es particularmente útil si su sistema de archivos incluye un gran número de archivos.

Resumen

Este artículo le ha mostrado cómo trabajar con los conceptos básicos del Club Web Site Starter Kit y ampliarlo para su propio uso personal. Como puede ver, resulta bastante sencillo comenzar a incorporar sus propias características en este Starter Kit de fácil uso.

Diviértase y felices programas.

Mostrar: