Extensión del Kit de inicio del sitio web club

 

Bill Evjen
Reuters

Junio de 2005

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

Resumen: Obtenga información sobre cómo ampliar el nuevo Kit de inicio de sitio web club, que es un tipo de proyecto instalable disponible para Visual Studio 2005 o Visual Web Developer 2005 Express Edition. (28 páginas impresas)

Contenido

Introducción
Realización de mejoras estándar
Agregar un sistema de archivos
   Configuración de la página administración de archivos
   Crear la sección de administración del sistema de administración de archivos
   Creación de la página Administración.aspx
   Creación de la página Docs.aspx
Compilación y ejecución
Resumen

Introducción

Integrado en Visual Studio 2005 y Visual Web Developer 2005 Express Edition, encontrará un proyecto integrado denominado Kit de inicio de sitio web personal. Aunque este es el único kit de inicio de ASP.NET que se proporciona con la instalación predeterminada de estos IDE, todavía puede usar cualquiera de los IDE para buscar kits de inicio adicionales para usar y personalizar. (Para ello, seleccione Comunidad, haga clic en Búsqueda de la comunidad y, a continuación, haga clic en Starter Kits en el menú IDE).

Uno de estos kit de inicio que podrá encontrar es el Kit de inicio del sitio web club (que se muestra a continuación en la figura 1). Este kit de inicio le permite configurar rápidamente un sitio web para un club u organización. Aunque este kit de inicio se centra en un club de fútbol (también conocido como fútbol fuera de Norteamérica), puede modificar fácilmente la aplicación para que pueda atender cualquier tipo de grupo. Para obtener un vistazo detallado a los conceptos básicos de este kit de inicio, asegúrese de leer sobre él en mi artículo anterior, Introducción al Kit de inicio del sitio web club. Si primero necesita una introducción a este kit de inicio, le recomiendo que lea primero mi revisión introductoria.

Figura 1. Página principal del sitio del club

El kit de inicio del sitio web club usa algunas de las mejores características proporcionadas por la versión más reciente de ASP.NET 2.0, como páginas maestras, los sistemas de administración de roles y pertenencia, sistemas de navegación, etc.

Este kit de inicio de sitio web le proporciona una página principal, una página de eventos, un lugar para noticias, un álbum de fotos, una página que enumera todos sus miembros, una página de vínculos y una página de contacto. Aunque el álbum de fotos es un enfoque central en la aplicación, los eventos y las secciones de noticias del sitio también se resaltan en la aplicación. Los eventos y los elementos de noticias colocados en el sistema no solo se muestran en sus páginas respectivas, sino que también se muestran en la página principal (Default.aspx).

En este artículo se explica cómo ampliar y personalizar la aplicación, ya que este es el propósito de los kits de inicio. Recuerde que se denomina kit de inicio por un motivo. Debe considerar este kit de inicio como punto de partida para usar y crear una aplicación verdaderamente única para usted mismo. Al final, es posible que ni siquiera termine con lo que se conoce como sitio web de club; puede crear otra cosa por completo.

Realización de mejoras estándar

Va casi sin decir, pero sus primeros pasos incluirán la personalización del Kit de inicio del sitio web club para personalizar completamente las páginas que elija mantener en la aplicación. Esto incluye la personalización de la página maestra y cualquiera de las páginas de contenido contenidas en la aplicación.

Además, es importante tener en cuenta que esta aplicación no aprovecha ninguna clase de funcionalidades de almacenamiento en caché de .NET. Esto significa que cada página no se almacena en la memoria caché del sistema para reutilizarla, lo que le permitiría ahorrar en el costo de regenerar la página.

En la mayoría de los casos, es más probable que presente datos en el sitio web del grupo que no va a cambiar con frecuencia. Por lo tanto, para obtener un mejor rendimiento de la aplicación, puede especificar que las páginas de ASP.NET deben almacenarse en caché durante un período de tiempo específico.

Sin embargo, dado que esta aplicación usa la nueva funcionalidad de usar páginas maestras y páginas de contenido, ahora hay dos páginas que se combinan cuando se invocan para crear una sola página de ASP.NET. Como este es el caso, ¿dónde aplicaría exactamente el almacenamiento en caché?

Al usar páginas maestras, aplique el almacenamiento en caché a la página de contenido. No aplique el almacenamiento en caché a la página maestra. Al usar la OutputCache directiva de página, realmente debe colocarlo en la página de contenido para invocar el almacenamiento en caché. Esto se muestra a continuación:

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

Al colocar esta directiva de página en cualquiera de las páginas de contenido de la aplicación, el sistema almacenará en caché tanto el contenido de la página de contenido como la página maestra asociada (recuerde que es una sola página en este momento) durante 60 segundos.

Agregar un sistema de archivos

Por lo tanto, para obtener un ejemplo de extensión de un kit de inicio, vamos a ampliar el Kit de inicio del sitio web club para hacer algo que beneficiaría a los miembros de su club u organización. Aunque hay un millón o más de extensiones posibles que podría producir, vamos a elegir una y ver cómo agregar un sistema de administración de archivos simple a la aplicación.

Este sistema de administración de archivos permitirá a los usuarios que están incluidos en el rol Administradores 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.

En este ejemplo se requerirá el uso de una base de datos. Para ello, usaremos los nuevos archivos Microsoft SQL Server Express Edition, aunque también puede usar otra base de datos si lo desea.

El primer paso para crear este sistema básico de administración de archivos es cambiar el sistema de navegación de la aplicación para incluir una página para los miembros en el rol Administradores que les permitirá trabajar con los archivos y las categorías de archivos.

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

El primer paso será configurar la aplicación para controlar una página de administración de archivos que solo está pensada para los usuarios registrados que están en el rol Administradores. Esta página les permitirá cargar y administrar archivos, así como administrar las categorías en las que se colocan estos archivos.

Por este motivo, vamos a querer tener un vínculo de Administración en el sistema de navegación. Puesto que solo queremos que los usuarios que están incluidos en el rol de Administradores vean este vínculo, usaremos una característica de ASP.NET 2.0 denominada recorte de seguridad.

El recorte de seguridad es la capacidad de "recortar" los elementos del sistema de navegación en función del rol del usuario. Esto se realizará a través de algunas configuraciones que aplicaremos en el Web.config archivo, así como otros cambios que realizaremos en el Web.sitemap archivo.

Aunque el recorte de seguridad ya está habilitado para el Kit de inicio del sitio web club, debe echar un vistazo al Web.config archivo para que comprenda cómo se implementa. La parte de que Web.config controla esto se encuentra en la <siteMap> sección del archivo y se presenta aquí en el Listado 1.

Listado 1: Un fragmento del archivo Web.sitemap que se ocupa 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 habilitada, las páginas bloqueadas especificadas no aparecerán en el sistema de navegación de la aplicación. El Kit de inicio del sitio web club realiza esto bloqueando páginas específicas para los usuarios registrados únicamente mediante la <location> sección del Web.config archivo tal y como se muestra aquí en la lista 2.

Lista 2: Bloquear solo páginas específicas para 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 Web.config archivo, puede filtrar a los usuarios de ver páginas (incluido el vínculo de la página en la barra de navegación) mediante la realización de la configuración adecuada en el Web.sitemap archivo, así como el uso del roles atributo en el <siteMapNode> elemento .

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

En nuestro ejemplo, vamos a crear la página Admin.aspx, que solo estará disponible para los usuarios registrados que están incluidos en el rol Administradores. Para ello, editamos el Web.sitemap archivo, como se muestra en la lista 3.

Listado 3: Cambiar el archivo Web.sitemap para bloquear la página Administración.aspx

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

El primer cambio que realizamos en el archivo de Web.config la aplicación es agregar una sección adicional <location> que apunte a la Admin.aspx página que crearemos en breve. Como puede ver en la lista 3, esta página estará disponible solo para los usuarios contenidos en el rol Administradores.

Ahora que las reglas de acceso de la página que queremos crear están implementadas, vamos a crear la base de datos que usará la Admin.aspx página.

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

El propósito de la Admin.aspx página es permitir que los usuarios del rol Administradores carguen archivos en el sistema de administración de archivos. Sin embargo, para facilitar el uso del sistema de archivos a los miembros, en lugar de proporcionar una enorme lista de documentos, presentaremos los documentos a través de un sistema de categorías.

Por lo tanto, crearemos un sistema de categorías y permitiremos que los usuarios del rol Administradores creen, editen y eliminen categorías en las que se colocan los documentos. Después, cuando los administradores carguen documentos en la aplicación, también podrán asignar el documento a una categoría.

En este sistema de administración de archivos también agregaremos la capacidad de que el administrador decida si una categoría aparece o no en el sistema de administración final. También trabajaremos para almacenar algunos metadatos de archivo, incluido el almacenamiento de comentarios relacionados con el archivo cargado y la fecha y hora en que el archivo se cargó realmente en el sistema.

Creación de los archivos de base de datos necesarios

La Admin.aspx página funcionará estrechamente con una base de datos subyacente. Por este motivo, debemos crear algunas tablas nuevas en el clubsite.mdf archivo . Se trata de un archivo SQL Server 2005 Express Edition y ya se usa para ejecutar gran parte del kit de inicio de sitio web de Club predeterminado.

Para crear las tablas que necesitamos, haga clic en la pestaña Explorador de bases de datos en Visual Web Developer. En esta ventana del IDE, encontrará un nodo raíz denominado Conexiones de datos. Haga doble clic en esto y verá una referencia al archivo de clubsite.mdf base de datos. Al expandir el archivo de base de datos, se le mostrará una lista de tablas, vistas, procedimientos almacenados, etc. A continuación, se le mostrará algo similar a lo que se muestra aquí en la figura 2.

Ilustración 2. Base de datos del sitio club

Haga clic con el botón derecho en la carpeta Tablas y seleccione Agregar nueva tabla. Se iniciará el Designer de tabla directamente en Visual Web Developer. En esta nueva ventana de Visual Web Developer, cree una tabla con la información presentada en la figura 3.

Figura 3. Creación de una tabla DocumentCategories

La tabla incluye las columnas CategoryID (int), CategoryName (nvarchar(50)) y IsPublic (bit). Tenga en cuenta en la figura 3 que CategoryID tiene una clave amarilla al principio de la fila. Esto significa que CategoryID es una clave principal que se usa con fines de identificación. Para asignar CategoryID a una clave principal, haga clic con el botón derecho en la fila (en realidad, haga clic con el botón derecho en el cuadro gris al principio de la fila) y seleccione Establecer clave principal en el menú proporcionado. También deberá realizar algunos cambios en las propiedades de la CategoryID fila. Resalte la fila (seleccionando de nuevo el cuadro gris al principio de la fila) y verá que las propiedades de esta fila aparecen en la ventana Propiedades de columna. Cambie las propiedades para que CategoryID sea un valor de identidad e incremente por 1 para cada fila. Estos valores de propiedad se presentan en la figura 4.

Figura 4. Adición de una clave principal

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

Figura 5. Asignar un nombre a la tabla

A continuación, crearemos una tabla en la que almacenaremos metadatos para los archivos que se guardan en el disco. Cree una tabla de la misma manera que antes, pero las columnas deben configurarse 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 que se ha introducido el archivo en el sistema, un lugar para almacenar los comentarios de documento relacionados, la categoría asociada del documento y si el documento tiene una marca "documento superior", que analizaré al final de este artículo.

Guarde esta tabla y asígnele el Documentsnombre . Después de esto, debe tener un Explorador de bases de datos similar al siguiente:

Ilustración 7. Después de agregar la tabla

Ahora que la base de datos del sistema de administración de archivos está en su lugar, vamos a crear la Admin.aspx página. Esta página funcionará con la base de datos subyacente que acabamos de compilar y nos permitirá agregar, editar o eliminar ambas categorías y archivos.

Creación de la página Administración.aspx

Cree una nueva página de contenido (mediante la Default.master página) denominada Admin.aspx. Esta página contendrá dos secciones distintas: una para administrar categorías y otra para administrar archivos. Cada sección se define en la página mediante <div> secciones. Esto se muestra en la lista 4.

Lista 4: Marco de trabajo de la página Administración.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>

A partir de este bit de código, puede ver que el marco de la página para Admin.aspx permite dos secciones. Cada sección se encapsulará visualmente en un cuadro gris debido a la class="fullwidth" declaración de las <div> etiquetas.

Volvamos nuestra atención a la primera sección de la página que se ocupa de la administración de categorías.

Reunir el sistema de administración de categorías

La sección de administración de categorías de la Admin.aspx página es sencilla de compilar. Esta sección incluirá un control GridView que permitirá al administrador administrar categorías que ya están en el sistema. Directamente debajo, habrá una forma pequeña que permitirá la creación de nuevas categorías. Al final, la vista de diseño de esta sección debe aparecer como se muestra en la figura 8.

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

El control SqlDataSource de la página se usa para comunicarse con la tabla de SQL Express que creamos anteriormente. Después de colocar el control SqlDataSource en la página, resalte el control e inicie la etiqueta inteligente del control (seleccionando la flecha verde en la esquina superior derecha del control). Seleccione el vínculo Configurar origen de datos en la etiqueta inteligente. Se iniciará un cuadro de diálogo que le permite configurar el control SqlDataSource . La primera opción es seleccionar la conexión de datos que se va a usar para conectarse al clubsite.mdf archivo. Puesto que esta conexión ya está definida en la instalación predeterminada del Kit de inicio del sitio web club, seleccione ClubSiteDB en la lista desplegable. Esto se muestra en la figura 9.

Figura 9. Conexión con la base de datos

La página siguiente del cuadro de diálogo nos permite seleccionar la tabla que se va a usar (que es DocumentCategories) y las columnas que nos interesan usar. Puesto que estamos interesados en usar cada columna, active la casilla de verificación de todo (el carácter "*"). A continuación, antes de continuar con la página siguiente del cuadro de diálogo, haga clic en el botón Avanzadas y active la casilla que también dirigirá a Visual Web Developer para generar las INSERTinstrucciones , UPDATEy DELETE junto con la instrucción estándar SELECT . Esta configuración se ilustra 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, extraiga la vista Diseño de la página y abra la etiqueta inteligente para el control GridView . En la etiqueta inteligente, puede seleccionar el SqlDataSource1 control de la lista disponible de orígenes de datos. Esto cambiará automáticamente el control GridView para que se representen las columnas de la DocumentCategories tabla.

A continuación, active las casillas Habilitar paginación, Habilitar ordenación, Habilitar edición y Habilitar eliminación en la etiqueta inteligente del control GridView . Después, finalice la configuración del control GridView eligiendo un mejor estilo mediante el vínculo Formato automático o simplemente cambiando el ancho del control (he cambiado la mía a 75%). Después de todos estos pasos, terminé con un control GridView como se muestra anteriormente en la figura 8.

El código de la sección de categoría se muestra aquí en el Listado 5.

Lista 5: La construcción visual de la sección de categoría

<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>

Es necesario realizar una edición más en este bit de código para poder continuar. En su estado actual, el Insert método no funcionará para nosotros. Por lo tanto, vamos a tener que cambiar parte del código generado por el desarrollador web visual.

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

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

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

En su lugar, vamos a cambiar nuestra <InsertParameters> sección a lo 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 forma declarativa. Las opciones disponibles incluyen:

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

En nuestro caso, usamos el <asp:ControlParameter> control , ya que esto nos permite quitar mediante declaración nuestros valores necesarios directamente de algunos de los controles de servidor ASP.NET contenidos en nuestro formato simple. Los dos <asp:ControlParameter> controles que usamos en la <InsertParameters> sección apuntan al TextBox1 control para el valor del nombre de la categoría y el CheckBox1 control para el valor necesario Boolean que indica si la categoría es para los ojos del público.

Ahora que el aspecto visual de esta sección y el control SqlDataSource están en su lugar, el siguiente paso es invocar algunas acciones para cuando el usuario final hace clic en el botón Agregar categoría . Esto se realizará a través del Button1_Click evento .

Figura 11. Sitio club con categorías

El Button1_Click evento agregará una nueva categoría al sistema de categorías general. Este método se detalla en la lista 6.

Lista 6: Agregar una categoría a través del 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 Button1_Click evento realiza algunas operaciones básicas. Lo primero que hace es invocar el método del Insert() control SqlDataSource. Esto hará que el control SqlDataSource tome los valores de los dos controles de servidor especificados (TextBox1 y CheckBox1) e inserte estos valores en el archivo de base de datos. Una vez realizado el Insert() método, se vacía el formulario mediante la asignación de valores en blanco a los TextBox1 controles y CheckBox1 . Esto se hace para evitar que el administrador haga clic en el botón Agregar categoría dos veces, con lo que se escribe la información de categoría en el sistema dos veces.

Ahora la Admin.aspx página tiene la capacidad de insertar, editar y eliminar categorías en las que se colocarán los archivos. A continuación, vamos a dirigir nuestra atención a la parte de administración de archivos de la Admin.aspx página.

Reunir el sistema de administración de archivos

Una vez implementado el sistema de administración de categorías, el siguiente paso consiste en unir el 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 están en el sistema, además de un formulario que se usará para introducir nuevos archivos en el sistema.

En la figura 12 se muestra cómo se verá la sección completada en el diseñador visual de desarrolladores web.

Ilustración 12. Sistema de administración de archivos

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

El control DropDownList que se usa en la parte superior del formulario para mostrar la lista de categorías disponibles a las que puede asignar un archivo se controla realmente desde el control de SqlDataSource1 la página que se usó en la parte superior de la página para el sistema de administración de categorías.

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

Ilustración 13. Configuración de DataSource para una lista desplegable

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

El siguiente paso consiste en configurar el control DataSource que se usará para rellenar el control GridView con una lista de archivos contenidos en el sistema. Para ello, arrastre y coloque un nuevo control SqlDataSource en la superficie de diseño de la página y, a continuación, siga los mismos pasos del asistente de configuración que hizo con el ejemplo de control SqlDataSource de la categoría mostrado anteriormente en este artículo.

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

Figura 14. Configuración de la tabla Documents

Aunque este asistente configura el control SqlDataSource automáticamente, todavía hay algunos cambios que se deben realizar en el código que se generó a partir de este asistente. En primer lugar, examine las distintas definiciones de parámetros que están en su lugar dentro del control SqlDataSource , encontrará la <InsertParameters> sección , como se muestra aquí:

<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 esto muestra todos los parámetros que se van a requerir para realizar una inserción en la Documents tabla, es necesario cambiar esta estructura porque algunos de los parámetros se van a alimentar desde los controles de servidor que se encuentran en la página, mientras que otros parámetros crearemos y agregaremos dinámicamente. Por este motivo, cambie la <InsertParameters> sección por lo 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>

A partir de este cambio de código, puede ver que hemos extraído algunos de los parámetros de la lista (como los DocumentName parámetros y DateInput ). Estos son los parámetros que generaremos dinámicamente en el Button2_Click evento (se muestra en breve).

El resto de los parámetros se cambiaron a ControlParameter tipos porque estos valores de parámetro se proporcionarán a partir de controles de servidor específicos en el formulario. Con la ControlID propiedad podemos apuntar a un control específico desde el que recuperar el valor necesario. En algunas de las propiedades, también será necesario especificar el nombre de la propiedad que se usará para obtener este valor necesario. Por ejemplo, el valor procedente del control DropDownList que se va a usar es la SelectedValue propiedad y esta es la propiedad especificada a través del PropertyName atributo . Estos son todos los cambios que realizaremos en el SqlDataSource2 control.

Ahora que el control SqlDataSource del segundo control GridView está en su lugar, el siguiente paso consiste en enlazar el GridView2 control al SqlDataSource2 control. Para ello, abra la etiqueta inteligente para el GridView2 control y seleccione el SqlDataSource2 control en la lista desplegable proporcionada. Después, puede habilitar la paginación, la ordenación, la edición y la eliminación activando las casillas adecuadas. Esto se muestra en la figura 15.

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

Dado que más adelante vamos a usar la DocumentName propiedad en la construcción de hipervínculos que los usuarios finales usarán para buscar el archivo para descargar o ver, no vamos a querer que se realicen cambios en el DocumentName valor. Por lo tanto, para desactivar la capacidad de edición de esta columna en el GridView2 control, haga clic en el vínculo Editar columnas de la etiqueta inteligente del control GridView . A continuación, se le mostrará el cuadro de diálogo Campos como se muestra en la figura 16.

Figura 16. Edición de columnas para GridView

En el cuadro de diálogo Campos , resalte el DocumentName campo de la sección Campos seleccionados del cuadro de diálogo. A continuación, se le mostrarán las DocumentName propiedades del campo en la parte derecha del cuadro de diálogo. Para desactivar la capacidad de editar este campo en particular, establezca la ReadOnly propiedad True en desde su valor predeterminado de False.

En este momento, todas las opciones de configuración de la sección del sistema de administración de archivos de la página están en vigor. Ahora puede ejecutar la aplicación, iniciar sesión como administrador y, a continuación, crear categorías, cargar archivos, etc. A continuación, vamos a dirigir nuestra atención a la página que mostrará la información de categoría y archivo al usuario final.

Creación de la página Docs.aspx

Ahora es necesario crear una página que permita al usuario final navegar por categorías y seleccionar los archivos que están presentes en estas categorías. Como primer paso, vamos a cambiar el nombre de la Links.aspx página como Docs.aspx. Para ello, haga clic con el botón derecho en la Links.aspx página del Explorador de soluciones Visual Web Developer y cambie el nombre de la Links.aspx página a Docs.aspx. A continuación, el siguiente paso es editar el Web.sitemap archivo que se va a usar Docs.aspx en lugar de Links.aspx.

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

La Docs.aspx página va a ser bastante sencilla, ya que está pensada para ser una página que se ocupa solo del 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. Solo podrán abrir archivos desde el sistema.

Al final, nuestra página va a terminar con el aspecto siguiente en el diseñador visual de desarrolladores web, como se muestra en la figura 17.

Figura 17. Página Documentos útiles

Como puede ver en esta página en la vista de diseño, la página se divide en dos secciones distintas. La primera es la sección de categorías. Esta sección impulsará la sección del documento que se encuentra directamente debajo de la sección de categorías.

Permitir que los usuarios finales seleccionen categorías

La sección categories se compone de un único control DataList y un control SqlDataSource . En primer lugar, arrastre y coloque un control DataList en la superficie de diseño de la página. Abra la etiqueta inteligente del control DataList y seleccione <Nuevo origen de datos...> en la lista desplegable de orígenes de datos disponibles. Se iniciará el cuadro de diálogo Elegir origen de datos . En este cuadro de diálogo, seleccione Base de datos y haga clic en el botón Siguiente . Al trabajar con la Admin.aspx página, a continuación, elija la ClubSiteDB conexión. En la página siguiente del cuadro de diálogo, seleccione la DocumentCategories tabla y seleccione para * obtener todos los campos disponibles de la tabla. Desde aquí, haga clic en el botón WHERE... del cuadro de diálogo y, a continuación, se le presentará el cuadro de diálogo Agregar cláusula WHERE como se muestra en la figura 18.

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

Dado que vamos a querer mostrar solo las categorías en las que el IsPublic valor se establece Trueen , es necesario especificar este requisito con una cláusula WHERE en la instrucción SQL. Para ello, seleccione IsPublic en la lista desplegable Columna con el signo igual como operador. En Source (Origen), seleccione None en la lista desplegable y coloque un valor de en el cuadro de texto Parameter properties Value (Valor de propiedades de True parámetro). Cuando haya terminado, deberá hacer clic en el botón Agregar en el cuadro de diálogo y, a continuación, hacer clic en el botón Aceptar para cerrar el diálogo y completar el proceso.

A continuación, dado que vamos a querer que las categorías aparezcan en orden alfabético, seleccione el botón ORDER BY... en el cuadro de diálogo Configurar origen de datos . Se abrirá el cuadro de diálogo Agregar cláusula ORDER BY como se muestra en la figura 19.

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

En este cuadro de diálogo, seleccione el CategoryName campo de la lista desplegable Ordenar por y mantenga la configuración del botón de radio en Ascendente (esto significa que el orden se establecerá de A a Z).

Una vez completado, cambiará el control DataList para que tenga el siguiente aspecto:

Figura 20. DataList después de la configuración

Es necesario cambiar esta lista predeterminada en el control DataList para que sea hipervínculos que el usuario final pueda seleccionar. Cuando el usuario final hace clic en un vínculo de categoría, los archivos adecuados se mostrarán en el control GridView contenido en la página. Para configurar correctamente el control DataList , abra la etiqueta inteligente del control y haga clic en el vínculo Editar plantillas . Se abrirá la sección ItemTemplate del control, como se muestra en la figura 21.

Figura 21. Edición de ItemTemplate

Puesto que no vamos a querer que cada elemento aparezca como se muestra aquí en esta plantilla, borre todo y agregue un control HyperLink en su lugar. Una vez que el control HyperLink se agrega a la sección ItemTemplate, abra la etiqueta inteligente del control y seleccione el único vínculo: Editar DataBindings. Se abrirá el cuadro de diálogo HyperLink1 DataBindings .

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

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

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

Mostrar los archivos

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

Para ello, seleccione todas las columnas del Asistente para configuración del control SqlDataSource . A continuación, haga clic en el botón WHERE para especificar lo que se necesita para obtener en el valor de la categoryid cadena de consulta. Para ello, en el cuadro de diálogo Agregar cláusula WHERE, seleccione DocumentCategory en la lista desplegable Columnas y establézcalo en igual que el 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, para finalizar la configuración del control SqlDataSource , presione el botón ORDER y opte por ordenar la lista de documentos por la DateInput columna en orden descendente. Al final, el valor de en SelectCommand el SqlDataSource2 control debe ser el siguiente:

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

Ahora que el SqlDataSource2 control está en su lugar, el siguiente paso es configurar el control GridView en la página para que funcione con él. Para ello, primero enlaza el control GridView al control a SqlDataSource2 través de la etiqueta inteligente del control GridView . Habilite también la paginación y la ordenación y establezca el ancho del control en 100 %.

Al hacer clic en el vínculo Editar columnas de la etiqueta inteligente del control, se abrirá el cuadro de diálogo Campos . Aquí es donde puede configurar cómo se presenta cada columna y cómo se comporta. Dado que esta lista de documentos es para el usuario final, hay algunos valores que probablemente no estén interesados en la visualización. Por este motivo, quite las DocumentIDcolumnas , DocumentCategoryy TopDoc de la lista contenida en el cuadro de diálogo.

Aunque las tres columnas restantes son columnas típicas BoundField , en realidad queremos modificar la DocumentName columna para que sea una columna con plantilla. En lugar de mostrar un valor recto String de la DocumentName columna, vamos a querer tener el nombre del documento que se muestra como un vínculo al documento. La única manera de lograrlo es tomar la representación de la columna en nuestras propias manos.

En el cuadro de diálogo Campos , resalte la DocumentName columna y, a continuación, verá un vínculo en la parte inferior del cuadro de diálogo que nos permitirá convertir la columna en un campo con plantilla. Esto se muestra en la figura 23.

Figura 23. Convertir la columna DocumentName en TemplateField

Después de hacer clic en el vínculo Convertir este campo en un Campo de plantilla, basta con hacer clic en el botón Aceptar para pasar al último paso.

A continuación, vuelva a abrir la etiqueta inteligente del control GridView y haga clic en el vínculo Editar plantillas que se encuentra en la parte inferior de la etiqueta inteligente. A continuación, se le presentará itemTemplate para la DocumentName columna. 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. Editar lista de plantillas

Sin embargo, estamos interesados en este momento solo en cambiar la sección ItemTemplate . Por lo tanto, seleccione este elemento en la lista desplegable y elimine la instancia de control Etiqueta única que se encontrará en esta vista de la columna. En lugar de un control Label , agregue un control HyperLink . A continuación, edite los enlaces de datos del control HyperLink y establezca la Text propiedad del control en la DocumentName columna, al establecer la NavigateUrl propiedad en lo siguiente:

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

Compilación y ejecución

Es decir, en lo que respecta al marco básico del sistema de administración de archivos. Ya puede compilar y ejecutar la aplicación. Al final, tendrá una página donde los usuarios finales pueden navegar por un sistema de categorías y seleccionar archivos para ver o descargar. Si es administrador, tendrá la capacidad de agregar, editar o eliminar categorías y archivos del sistema.

Una columna observará que no usamos en esta demostración era la TopDoc columna . Esta columna se puede usar para un control GridView especial que se puede colocar en cualquier lugar de la aplicación (como la página principal del sitio) que muestra solo los documentos en los que el TopDoc valor está establecido Trueen . Esta será una buena manera de centrarse en los documentos más importantes de su lista de archivos. Esto será especialmente útil si tiene muchos archivos en su sistema de archivos.

Resumen

En este artículo se muestra cómo trabajar con los conceptos básicos del Kit de inicio del sitio web del club y ampliarlo para su propio uso personal. Como puede ver, es bastante fácil empezar a incorporar sus propias características en este kit de inicio sencillo de usar.

¡Diviértete y feliz codificación!

© Microsoft Corporation. Todos los derechos reservados.