Tutorial 3: Páginas maestras y navegación del sitio

Artículo
01/15/2008

Scott Mitchell

Junio de 2006

Descargue el código de ejemplo deASPNET_Data_Tutorial_3_CS.exe .

Descargue el código de ejemplo de ASPNET_Data_Tutorial_3_CS.exe.

Contenido del tutorial 3 (Visual C#)

Introducción
Paso 1: Crear la página maestra
Paso 2: Agregar una página principal al sitio web
Paso 2: Crear un mapa del sitio
Paso 3: Mostrar un menú basado en el mapa del sitio
Paso 4: Agregar navegación de ruta de navegación
Paso 5: Agregar la página predeterminada para cada sección
Resumen

Introducción

Una característica común de los sitios web fáciles de usar es que tienen un esquema de navegación y diseño de página coherente para todo el sitio. ASP.NET 2.0 presenta dos características nuevas que simplifican considerablemente la implementación de un diseño de página de todo el sitio y un esquema de navegación: páginas maestras y navegación del sitio. Las páginas maestras permiten a los desarrolladores crear una plantilla para todo el sitio con regiones editables designadas. A continuación, esta plantilla se puede aplicar a ASP.NET páginas del sitio. Estas páginas ASP.NET solo necesitan proporcionar contenido para las regiones editables especificadas de la página maestra; el resto del marcado de la página maestra es idéntico en todas las páginas ASP.NET que usan la página maestra. Este modelo permite a los desarrolladores definir y centralizar un diseño de página para todo el sitio, lo que facilita la creación de una apariencia coherente en todas las páginas que se pueden actualizar fácilmente.

El sistema de navegación de sitio proporciona un mecanismo para que los desarrolladores de páginas definan un mapa de sitio y una API para que ese mapa de sitio se consulte mediante programación. Los nuevos controles web de navegación ( Menu, TreeView y SiteMapPath) facilitan la representación de todo o parte del mapa del sitio en un elemento de interfaz de usuario de navegación común. Usaremos el proveedor de navegación de sitio predeterminado, lo que significa que nuestro mapa de sitio se definirá en un archivo con formato XML.

Para ilustrar estos conceptos y hacer que nuestro sitio web de tutoriales sea más utilizable, vamos a dedicar esta lección a definir un diseño de página para todo el sitio, implementar un mapa de sitio y agregar la interfaz de usuario de navegación. Al final de este tutorial, tendremos un diseño de sitio web pulido para crear nuestras páginas web del tutorial.

Figura 1. Resultado final de este tutorial

Paso 1: Crear la página maestra

El primer paso es crear la página maestra del sitio. En este momento, nuestro sitio web consta de solo el DataSet con tipo (Northwind.xsd, en la App_Code carpeta), las clases BLL (ProductsBLL.cs, CategoriesBLL.cs, etc., todas en la App_Code carpeta), la base de datos (NORTHWND.MDF, en la App_Data carpeta), el archivo de configuración (Web.config) y un archivo de hoja de estilos CSS (Styles.css). He limpiado esas páginas y archivos que muestran el uso de DAL y BLL de los dos primeros tutoriales, ya que volveremos a analizar esos ejemplos con más detalle en los tutoriales futuros.

Ilustración 2. Los archivos de nuestro proyecto

Para crear una página maestra, haga clic con el botón derecho en el nombre del proyecto en el Explorador de soluciones y elija Agregar nuevo elemento. A continuación, seleccione el tipo de página maestra de la lista de plantillas y asígnelo Site.masterel nombre .

Figura 3. Agregar una nueva página maestra al sitio web

Defina el diseño de página para todo el sitio aquí en la página maestra. Puede usar la vista Diseño y agregar cualquier diseño o controles web que necesite, o bien puede agregar manualmente el marcado manualmente en la vista Origen. En mi página maestra utilizo hojas de estilos en cascada para colocar y estilos con la configuración css definida en el archivo Style.cssexterno . Aunque no se puede indicar desde el marcado que se muestra a continuación, las reglas CSS se definen de forma que el contenido de la navegación <div>esté absolutamente colocado para que aparezca a la izquierda y tenga un ancho fijo de 200 píxeles.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">
        
            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">TODO: Breadcrumb will go here...</span>
            </div>
        
            <div id="content">
                <asp:contentplaceholder id="MainContent" runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>
            
            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Una página maestra define el diseño de página estático y las regiones que pueden editar las páginas ASP.NET que usan la página maestra. Estas regiones editables de contenido se indican mediante el control ContentPlaceHolder, que se puede ver dentro del contenido <div>. Nuestra página maestra tiene un solo ContentPlaceHolder (MainContent), pero las páginas maestras pueden tener varios ContentPlaceHolders.

Con el marcado especificado anteriormente, al cambiar a la vista Diseño se muestra el diseño de la página maestra. Cualquier ASP.NET páginas que usen esta página maestra tendrá este diseño uniforme, con la capacidad de especificar el marcado de la MainContent región.

Figura 4. Página maestra, cuando se ve a través de la vista Diseño

Paso 2: Agregar una página principal al sitio web

Con la página maestra definida, estamos listos para agregar las páginas ASP.NET del sitio web. Comencemos agregando Default.aspx, la página principal de nuestro sitio web. Haga clic con el botón derecho en el nombre del proyecto en el Explorador de soluciones y elija Agregar nuevo elemento. Elija la opción Formulario web de la lista de plantillas y asigne al archivo Default.aspxel nombre . Además, active la casilla "Seleccionar página maestra".

Figura 5. Agregar un nuevo formulario web, comprobar la casilla "Seleccionar página maestra"

Después de hacer clic en el botón Aceptar, se nos pide que elija qué página maestra debe usar esta nueva página ASP.NET. Aunque puede tener varias páginas maestras en el proyecto, solo tenemos una.

Figura 6. Elija la página maestra que debe usar esta página ASP.NET

Después de seleccionar la página maestra, las nuevas páginas de ASP.NET contendrán el marcado siguiente:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

En la @Page directiva hay una referencia al archivo de página maestra usado (MasterPageFile="~/Site.master") y el marcado de la página ASP.NET contiene un control Content para cada uno de los controles ContentPlaceHolder definidos en la página maestra, con el control de asignación del control ContentPlaceHolderID Content a un ContentPlaceHolder específico. El control Content es donde se coloca el marcado que desea que aparezca en el ContentPlaceHolder correspondiente. Establezca el atributo de Title la @Page directiva en Inicio y agregue contenido acogedor al control Contenido:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials that illustrate some of the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that demonstrate:</p>
    
    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

El Title atributo de la @Page directiva nos permite establecer el título de la página desde la página ASP.NET, aunque el <title> elemento esté definido en la página maestra. También podemos establecer el título mediante programación mediante Page.Title. Tenga en cuenta también que las referencias de la página maestra a hojas de estilos (como Style.css) se actualizan automáticamente para que funcionen en cualquier página de ASP.NET, independientemente del directorio en el que se encuentra la página ASP.NET en relación con la página maestra.

Al cambiar a la vista Diseño podemos ver cómo se verá nuestra página en un explorador. Tenga en cuenta que, en la vista Diseño de la página de ASP.NET, solo se pueden editar las regiones editables del contenido; el marcado no ContentPlaceHolder definido en la página maestra aparece atenuado.

Ilustración 7. La vista Diseño de la página ASP.NET muestra las regiones editables y no editables

Cuando un explorador visita la Default.aspx página, el motor de ASP.NET combina automáticamente el contenido de la página maestra y asp. El contenido de NET y representa el contenido combinado en el HTML final que se envía al explorador solicitante. Cuando se actualiza el contenido de la página maestra, todas las páginas ASP.NET que usan esta página maestra se combinarán con el nuevo contenido de la página maestra la próxima vez que se soliciten. En resumen, el modelo de página maestra permite definir una plantilla de diseño de página única (la página maestra) cuyos cambios se reflejan inmediatamente en todo el sitio.

Agregar páginas de ASP.NET adicionales al sitio web

Dediquemos un momento a agregar códigos auxiliares de ASP.NET página adicionales al sitio que finalmente contendrán las distintas demostraciones de informes. Habrá más de 35 demostraciones en total, por lo que en lugar de crear todas las páginas de código auxiliar, vamos a crear solo las primeras. Puesto que también habrá muchas categorías de demostraciones, para administrar mejor las demostraciones, agregue una carpeta para las categorías. Agregue las tres carpetas siguientes por ahora:

BasicReporting
Filtering
CustomFormatting

Por último, agregue nuevos archivos como se muestra en el Explorador de soluciones de la figura 8. Al agregar cada archivo, no olvide activar la casilla "Seleccionar página maestra".

Figura 8. Agregar los siguientes archivos

Paso 2: Crear un mapa del sitio

Uno de los desafíos de administrar un sitio web compuesto por más de una serie de páginas es proporcionar una manera sencilla para que los visitantes naveguen por el sitio. Para empezar, se debe definir la estructura de navegación del sitio. A continuación, esta estructura debe traducirse en elementos navegables de la interfaz de usuario, como menús o rutas de navegación. Por último, todo este proceso debe mantenerse y actualizarse a medida que se agregan nuevas páginas al sitio y se quitan las existentes. Antes de ASP.NET 2.0, los desarrolladores estaban por su cuenta para crear la estructura de navegación del sitio, mantenerla y traducirla en elementos navegables de la interfaz de usuario. Sin embargo, con ASP.NET 2.0, los desarrolladores pueden usar el sistema de navegación de sitio integrado muy flexible.

El sistema de navegación de sitio de ASP.NET 2.0 proporciona un medio para que un desarrollador defina un mapa de sitio y, a continuación, acceda a esta información a través de una API de programación. ASP.NET incluye un proveedor de mapas de sitio que espera que los datos del mapa del sitio se almacenen en un archivo XML con formato de forma determinada. Pero, dado que el sistema de navegación del sitio se basa en el modelo de proveedor , se puede ampliar para admitir formas alternativas de serializar la información del mapa del sitio. El artículo de Jeff Prosise, The SQL Site Map Provider You've Been Waiting For (Proveedor de mapa del sitio que ha estado esperando) muestra cómo crear un proveedor de mapa de sitio que almacene el mapa de sitio en una base de datos de SQL Server; otra opción es crear un proveedor de mapas de sitio basado en la estructura del sistema de archivos.

En este tutorial, sin embargo, vamos a usar el proveedor de mapa de sitio predeterminado que se incluye con ASP.NET 2.0. Para crear el mapa del sitio, simplemente haga clic con el botón derecho en el nombre del proyecto en la Explorador de soluciones, elija Agregar nuevo elemento y elija la opción Mapa del sitio. Deje el nombre como Web.sitemap y haga clic en el botón Agregar.

Figura 9. Agregar un mapa de sitio al proyecto

El archivo de mapa del sitio es un archivo XML. Tenga en cuenta que Visual Studio proporciona IntelliSense para la estructura del mapa del sitio. El archivo de mapa del sitio debe tener el <siteMap> nodo como su nodo raíz, que debe contener exactamente un <siteMapNode> elemento secundario. Después, ese primer <siteMapNode> elemento puede contener un número arbitrario de elementos descendientes <siteMapNode> .

Defina el mapa del sitio para imitar la estructura del sistema de archivos. Es decir, agregue un <siteMapNode> elemento para cada una de las tres carpetas y elementos secundarios <siteMapNode> para cada una de las páginas ASP.NET de esas carpetas, de la siguiente manera:

Web.sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting" url="~/BasicReporting/Default.aspx" description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx" title="Simple Display" description="Displays the complete contents of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx" title="Declarative Parameters"  description="Displays a subset of the contents of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx" title="Setting Parameter Values" description="Shows how to set parameter values programmatically." />
      </siteMapNode>
        
      <siteMapNode title="Filtering Reports" url="~/Filtering/Default.aspx" description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx" title="Filter by Drop-Down List" description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx" title="Master-Details-Details" description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx" title="Details of Selected Row" description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting" url="~/CustomFormatting/Default.aspx" description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx" title="Format Colors" description="Format the grid&apos;s colors based on the underlying data." />
        <siteMapNode url="~/CustomFormatting/GridViewTemplateField.aspx" title="Custom Content in a GridView" description="Shows using the TemplateField to customize the contents of a field in a GridView." />
        <siteMapNode url="~/CustomFormatting/DetailsViewTemplateField.aspx" title="Custom Content in a DetailsView"  description="Shows using the TemplateField to customize the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx" title="Custom Content in a FormView"  description="Illustrates using a FormView for a highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx" title="Summary Data in Footer" description="Display summary data in the grid's footer." />        
      </siteMapNode>

  </siteMapNode>

</siteMap>

El mapa de sitio define la estructura de navegación del sitio web, que es una jerarquía que describe las distintas secciones del sitio. Cada <siteMapNode> elemento de Web.sitemap representa una sección de la estructura de navegación del sitio.

Figura 10. El mapa del sitio representa una estructura de navegación jerárquica (haga clic en la imagen para ampliarla)

ASP.NET expone la estructura del mapa del sitio a través de la clase SiteMap de .NET Framework!href(https://msdn2.microsoft.com/en-us/library/system.web.sitemap.aspx). Esta clase tiene una propiedad CurrentNode, que devuelve información sobre la sección que el usuario está visitando actualmente; La propiedad RootNode devuelve la raíz del mapa del sitio (Inicio, en nuestro mapa del sitio). Las propiedades CurrentNode y RootNode devuelven instancias SiteMapNode!href(https://msdn2.microsoft.com/en-us/library/system.web.sitemapnode.aspx), que tienen propiedades como ParentNode, ChildNodes, NextSibling, PreviousSibling, etc., que permiten recorrer la jerarquía del mapa del sitio.

El acceso a los datos de ASP.NET 2.0 se puede realizar mediante programación, como en ASP.NET 1.x o mediante declaración, a través de los nuevos controles de origen de datos. Hay varios controles de origen de datos integrados, como el control SqlDataSource, para acceder a datos de base de datos relacionales, el control ObjectDataSource, para acceder a datos de clases y otros. Incluso puede crear sus propios controles de origen de datos personalizados.

Los controles de origen de datos sirven como proxy entre la página de ASP.NET y los datos subyacentes. Para mostrar los datos recuperados de un control de origen de datos, normalmente agregaremos otro control web a la página y lo enlazaremos al control de origen de datos. Para enlazar un control web a un control de origen de datos, simplemente establezca la propiedad del DataSourceID control web en el valor de la propiedad del control de ID origen de datos.

Para ayudar a trabajar con los datos del mapa del sitio, ASP.NET incluye el control SiteMapDataSource, que nos permite enlazar un control web con el mapa del sitio web. Dos controles web ( TreeView y Menu) se usan normalmente para proporcionar una interfaz de usuario de navegación. Para enlazar los datos del mapa del sitio a uno de estos dos controles, basta con agregar un SiteMapDataSource a la página junto con un control TreeView o Menu cuya DataSourceID propiedad se establece en consecuencia. Por ejemplo, podríamos agregar un control Menu a la página maestra mediante el marcado siguiente:

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
    </asp:Menu>
    
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

Para un mayor grado de control sobre el HTML emitido, podemos enlazar el control SiteMapDataSource al control Repeater, de la siguiente manera:

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>
        
        <asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</div>

El control SiteMapDataSource devuelve la jerarquía de mapa de sitio de un nivel a la vez, empezando por el nodo de mapa del sitio raíz (Inicio, en nuestro mapa de sitio), el siguiente nivel (Informes básicos, Filtrado de informes y Formato personalizado), etc. Al enlazar SiteMapDataSource a un Repeater, enumera el primer nivel devuelto y crea una instancia de ItemTemplate para cada SiteMapNode instancia de ese primer nivel. Para tener acceso a una propiedad determinada de SiteMapNode, podemos usar Eval(propertyName), que es cómo obtenemos las propiedades y Title de cada SiteMapNodeUrl una para el control HyperLink.

En el ejemplo del repetidor anterior se representará el marcado siguiente:

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>
</li>

Estos nodos de mapa de sitio (informes básicos, informes de filtrado y formato personalizado) componen el segundo nivel del mapa de sitio que se representa, no el primero. Esto se debe a que la propiedad SiteMapDataSource ShowStartingNode está establecida en False, lo que hace que SiteMapDataSource omita el nodo de mapa del sitio raíz y, en su lugar, comience devolviendo el segundo nivel en la jerarquía del mapa del sitio.

Para mostrar los elementos secundarios para los informes básicos, los informes de filtrado y los formatos SiteMapNodepersonalizados, podemos agregar otro repetidor a la inicial del ItemTemplaterepetidor. Este segundo repetidor se enlazará a la propiedad de ChildNodes la SiteMapNode instancia, de la siguiente manera:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                
                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>
                
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

Estos dos repetidores dan como resultado el marcado siguiente (se ha quitado algún marcado por motivos de brevedad):

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>
    ...
</li>

Usando estilos CSS elegidos del libro de Rachel Andrew The CSS Anthology: 101 Essential Tips, Tricks, and Hacks, the <ul> and <li> elements are styled such that the markup produce la siguiente salida visual:

Figura 11. Un menú compuesto de dos repetidores y algunos CSS

Este menú está en la página maestra y está enlazado al mapa de sitio definido en Web.sitemap, lo que significa que cualquier cambio en el mapa del sitio se reflejará inmediatamente en todas las páginas que usan la Site.master página maestra.

Deshabilitar ViewState

Todos los controles ASP.NET pueden conservar opcionalmente su estado en el estado de vista, que se serializa como un campo de formulario oculto en el HTML representado. Los controles usan el estado de vista para recordar su estado modificado mediante programación entre postbacks, como los datos enlazados a un control web de datos. Aunque el estado de vista permite recordar la información entre postbacks, aumenta el tamaño del marcado que se debe enviar al cliente y puede provocar una saturación grave de página si no se supervisa detenidamente. Los controles web de datos , especialmente GridView, son especialmente conocidos por agregar docenas de kilobytes adicionales de marcado a una página. Aunque este aumento puede ser insignificante para los usuarios de banda ancha o intranet, el estado de vista puede agregar varios segundos al recorrido de ida y vuelta para los usuarios de acceso telefónico.

Para ver el impacto del estado de vista, visite una página en un explorador y, a continuación, vea el origen enviado por la página web (en Internet Explorer, vaya al menú Ver y elija la opción Origen). También puede activar el seguimiento de páginas para ver la asignación de estado de vista utilizada por cada uno de los controles de la página. La información de estado de vista se serializa en un campo de formulario oculto denominado __VIEWSTATE, ubicado en un <div> elemento inmediatamente después de la etiqueta de apertura <form> . El estado de vista solo se conserva cuando se usa un formulario web; Si la página de ASP.NET no incluye un <form runat="server"> objeto en su sintaxis declarativa, no habrá ningún __VIEWSTATE campo de formulario oculto en el marcado representado.

El VIEWSTATE campo de formulario generado por la página maestra agrega aproximadamente 1800 bytes al marcado generado por la página. Esta hinchazón adicional se debe principalmente al control Repeater, ya que el contenido del control SiteMapDataSource se conserva para ver el estado. Aunque es posible que un extra de 1800 bytes no parezca mucho para excitarse, cuando se usa gridView con muchos campos y registros, el estado de vista se puede hinchar fácilmente por un factor de 10 o más.

El estado de vista se puede deshabilitar en el nivel de página o de control estableciendo la EnableViewState propiedad falseen , lo que reduce el tamaño del marcado representado. Dado que el estado de vista de un control web de datos conserva los datos enlazados al control web de datos entre postbacks, al deshabilitar el estado de vista de un control web de datos, los datos deben enlazarse en cada y cada postback. En ASP.NET versión 1.x esta responsabilidad cayó en los hombros del desarrollador de páginas; sin embargo, con ASP.NET 2.0, los controles web de datos se volverán a enlazar a su control de origen de datos en cada postback si es necesario.

Para reducir el estado de vista de la página, vamos a establecer la propiedad del EnableViewState control Repeater en false. Esto se puede hacer a través del ventana Propiedades en el Designer o mediante declaración en la vista Origen. Después de realizar este cambio, el marcado declarativo del repetidor debe ser similar al siguiente:

Después de este cambio, el tamaño del estado de vista representado de la página se ha reducido a tan solo 52 bytes, un ahorro del 97 % en el tamaño del estado de vista. En los tutoriales de esta serie, deshabilitaremos el estado de vista de los controles web de datos de forma predeterminada para reducir el tamaño del marcado representado. En la mayoría de los ejemplos, la EnableViewState propiedad se establecerá false en y se hará sin mencionarlo. El único estado de vista de la hora que se analizará es en escenarios en los que se debe habilitar para que el control web de datos proporcione su funcionalidad esperada.

Para completar la página maestra, vamos a agregar un elemento de la interfaz de usuario de navegación de ruta de navegación a cada página. La ruta de navegación muestra rápidamente a los usuarios su posición actual dentro de la jerarquía del sitio. Agregar una ruta de navegación en ASP.NET 2.0 es fácil– simplemente agregar un control SiteMapPath a la página; no se necesita código.

Para nuestro sitio, agregue este control al encabezado <div>:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

La ruta de navegación muestra la página actual que el usuario visita en la jerarquía del mapa del sitio, así como los "antecesores" del nodo del mapa del sitio, hasta la raíz (Inicio, en nuestro mapa de sitio).

Ilustración 12. La ruta de navegación muestra la página actual y sus antecesores en la jerarquía del mapa de sitio

Paso 5: Agregar la página predeterminada para cada sección

Los tutoriales de nuestro sitio se dividen en diferentes categorías : informes básicos, filtrado, formato personalizado, etc., con una carpeta para cada categoría y los tutoriales correspondientes como páginas de ASP.NET dentro de esa carpeta. Además, cada carpeta contiene una Default.aspx página. Para esta página predeterminada, se mostrarán todos los tutoriales de la sección actual. Es decir, para en la Default.aspxBasicReporting carpeta tendríamos vínculos a SimpleDisplay.aspx, DeclarativeParams.aspxy ProgrammaticParams.aspx. Aquí, de nuevo, podemos usar la SiteMap clase y un control web de datos para mostrar esta información en función del mapa del sitio definido en Web.sitemap.

Vamos a mostrar una lista desordenada con un repetidor de nuevo, pero esta vez mostraremos el título y la descripción de los tutoriales. Dado que el marcado y el código para lograr esto deberán repetirse para cada Default.aspx página, podemos encapsular esta lógica de interfaz de usuario en un control de usuario. Cree una carpeta en el sitio web llamado UserControls y agregue a ese nuevo elemento de tipo Control de usuario web denominado SectionLevelTutorialListing.ascxy agregue el marcado siguiente:

Ilustración 13. Agregar un nuevo control de usuario web a la UserControls carpeta

SectionLevelTutorialListing.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SectionLevelTutorialListing.ascx.cs" Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null, 
        // bind CurrentNode's ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

En el ejemplo de Repeater anterior enlazamos los SiteMap datos al repetidor mediante declaración; el SectionLevelTutorialListing control de usuario, sin embargo, lo hace mediante programación. En el Page_Load controlador de eventos, se realiza una comprobación para asegurarse de que esta es la primera visita a la página (no un postback) y que la dirección URL de esta página se asigna a un nodo del mapa del sitio. Si este Control de usuario se usa en una página que no tiene una entrada correspondiente <siteMapNode> , SiteMap.CurrentNode devolverá null y no se enlazará ningún dato al repetidor. Suponiendo que tenemos un CurrentNode, enlazamos su ChildNodes colección al Repetidor. Dado que nuestro mapa de sitio está configurado de forma que la Default.aspx página de cada sección sea el nodo primario de todos los tutoriales de esa sección, este código mostrará vínculos y descripciones de todos los tutoriales de la sección, como se muestra en la captura de pantalla siguiente.

Una vez creado este Repetidor, abra las Default.aspx páginas de cada una de las carpetas, vaya a la vista Diseño y simplemente arrastre el Control de usuario desde la Explorador de soluciones a la superficie Diseño donde desea que aparezca la lista de tutoriales.

Figura 14. Se ha agregado el control de usuario a Default.aspx

Figura 15. Se enumeran los tutoriales de informes básicos

Resumen

Con el mapa de sitio definido y la página maestra completada, ahora tenemos un diseño de página coherente y un esquema de navegación para nuestros tutoriales relacionados con los datos. Independientemente del número de páginas que agregamos a nuestro sitio, actualizar el diseño de página para todo el sitio o la información de navegación del sitio es un proceso rápido y sencillo debido a que esta información está centralizada. En concreto, la información de diseño de página se define en la página Site.master maestra y el mapa del sitio en Web.sitemap. No era necesario escribir ningún código para lograr este mecanismo de navegación y diseño de página en todo el sitio, y conservamos la compatibilidad completa con el diseñador WYSIWYG en Visual Studio.

Después de completar la capa de acceso a datos y la capa de lógica de negocios y tener definido un diseño de página coherente y la navegación del sitio, estamos listos para empezar a explorar patrones de informes comunes. En los tres tutoriales siguientes veremos las tareas básicas de informes: mostrar los datos recuperados de BLL en los controles GridView, DetailsView y FormView.

¡Feliz programación!

Lecturas adicionales

Para obtener más información sobre los temas descritos en este tutorial, consulte los siguientes recursos:

Introducción a las páginas maestras de ASP.NET
Páginas maestras en ASP.NET 2.0
plantillas de diseño de ASP.NET 2.0
Información general sobre la navegación del sitio de ASP.NET
Examinar la navegación del sitio de ASP.NET 2.0
Características de navegación del sitio de ASP.NET 2.0
Descripción del estado de vista de ASP.NET
Cómo: habilitar el seguimiento de una página de ASP.NET
controles de usuario de ASP.NET

Acerca del autor

Scott Mitchell, autor de seis libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor, que acaba de completar su último libro, Sams Teach Yourself ASP.NET 2.0 en 24 Horas. Se puede acceder a él en mitchell@4guysfromrolla.com o a través de su blog, que se puede encontrar en http://ScottOnWriting.NET.

Gracias especial a...

Muchos revisores útiles revisaron esta serie de tutoriales. Entre los clientes principales de este tutorial se incluyen Liz Shulok, Dennis Patterson y Hilton Giesenow. ¿Te interesa revisar mis próximos artículos de MSDN? Si es así, colóqueme una línea en mitchell@4GuysFromRolla.com.