Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Una característica común de los sitios web fáciles de usar es que tienen un diseño de página coherente y de todo el sitio y un esquema de navegación. En este tutorial se examina cómo puede crear una apariencia coherente en todas las páginas que se pueden actualizar fácilmente.
Introducción
Una característica común de los sitios web fáciles de usar es que tienen un diseño de página coherente y de todo el sitio y un esquema de navegación. 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 de todo el sitio con regiones editables designadas. A continuación, esta plantilla se puede aplicar a ASP.NET páginas del sitio. Estas ASP.NET páginas solo necesitan proporcionar contenido para las regiones editables especificadas de la página maestra, todo 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 de 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 del 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. El nuevo control web de navegación Menu, TreeView y SiteMapPath facilita la representación de todo o parte del mapa del sitio en un elemento común de interfaz de usuario de navegació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 de 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 (haga clic para ver la imagen de tamaño completo)
Paso 1: Crear la página maestra
El primer paso es crear la página maestra para el sitio. En este momento, nuestro sitio web consta de solo el Conjunto de datos 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). Limpié esas páginas y archivos que muestran el uso de DAL y BLL de los dos primeros tutoriales, ya que volveremos a examinar esos ejemplos con más detalle en los tutoriales futuros.
Figura 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ígnele el nombre a Site.master.
Figura 3: Agregar una nueva página maestra al sitio web (haga clic para ver la imagen de tamaño completo)
Defina el diseño de página de todo el sitio aquí en la página maestra. Puede usar la vista de diseño y agregar cualquier diseño o controles web que necesite, o bien puede añadir el marcado manualmente en la vista Origen. En mi página maestra utilizo hojas de estilos en cascada para posicionamiento y estilos, con la configuración de CSS definida en el archivo Style.cssexterno. Aunque no se puede ver 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é posicionado de manera absoluta para que aparezca a la izquierda y tenga un ancho fijo de 200 píxeles.
Sitio.maestro
<%@ 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 tanto el diseño de página estático como 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 en el 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. Cualesquiera páginas ASP.NET que usen esta página maestra tendrán este diseño uniforme, con la capacidad de especificar el etiquetado de la MainContent región.
Figura 4: Página maestra, cuando se ve a través de la vista diseño (haga clic para ver la imagen de tamaño completo)
Paso 2: Agregar una página principal al sitio web
Con la página maestra definida, estamos listos para agregar las páginas de ASP.NET para el 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 (haga clic para ver la imagen de tamaño completo)
Después de hacer clic en el botón Aceptar, se le pide que elija la página maestra que 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 (haga clic para ver la imagen de tamaño completo).
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 directiva @Page hay una referencia al archivo de la página maestra utilizado (MasterPageFile="~/Site.master"), y el marcado de la página de ASP.NET contiene un control Content para cada uno de los controles ContentPlaceHolder definidos en la página maestra, con la asignación del control ContentPlaceHolderID Content a un ContentPlaceHolder específico. El control de contenido es donde insertar el marcado que desea que aparezca en el ContentPlaceHolder correspondiente. Establezca el atributo de la directiva @Page en Inicio y agregue contenido acogedor al control de 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 las regiones de contenido editables son modificables, y el marcado definido fuera de ContentPlaceHolder en la página maestra está atenuado.
Figura 7: La vista diseño de la página de ASP.NET muestra las regiones editables y no editables (haga clic para ver la imagen de tamaño completo).
Cuando un navegador visita la Default.aspx página, el motor de ASP.NET combina automáticamente el contenido de la página principal y el contenido de ASP.NET, y renderiza el contenido combinado en el código HTML final que se envía al navegador solicitante. Cuando se actualiza el contenido de la página maestra, todas las páginas ASP.NET que usan esta página maestra tendrán su contenido combinado 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 para agregar adicionalmente esquemas de página de ASP.NET al sitio que finalmente contendrán distintas pruebas de informes. Habrá más de 35 demostraciones en total, por lo que en lugar de crear todas las páginas auxiliares vamos a crear las primeras. Dado 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:
BasicReportingFilteringCustomFormatting
Por último, agregue nuevos archivos como se muestra en el Explorador de soluciones en 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 de 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 de interfaz de usuario navegables, 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 de interfaz de usuario navegables. 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 viene con un proveedor de mapa de sitio que espera que los datos del mapa del sitio se almacenen en un archivo XML de una manera específica. Sin embargo, 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, El proveedor de mapas del sitio de SQL que ha estado esperando, muestra cómo crear un proveedor de mapa del sitio que almacena el mapa del sitio en una base de datos de SQL Server; otra opción es crear un proveedor de mapa del 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 de sitio, simplemente haga clic con el botón derecho en el nombre del proyecto en el 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 (haga clic para ver la imagen de tamaño completo)
El archivo de mapa del sitio es un archivo XML. Tenga en cuenta que Visual Studio proporciona IntelliSense para la estructura del mapa de sitio. El archivo de mapa de sitio debe tener el <siteMap> nodo como nodo raíz, que debe contener precisamente un <siteMapNode> elemento secundario. 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="http://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 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 grids footer." />
</siteMapNode>
</siteMapNode>
</siteMap>
El mapa del 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 para ver la imagen de tamaño completo)
ASP.NET expone la estructura del mapa de sitio a través de la clase SiteMap de .NET Framework. Esta clase tiene una CurrentNode propiedad , que devuelve información sobre la sección que el usuario está visitando actualmente; la RootNode propiedad devuelve la raíz del mapa del sitio (Inicio, en nuestro mapa de sitio). Las propiedades CurrentNode y RootNode devuelven instancias de SiteMapNode, que tienen propiedades como ParentNode, ChildNodes, NextSibling, PreviousSibling, y así sucesivamente, que permiten recorrer la jerarquía del mapa del sitio.
Paso 3: Mostrar un menú basado en el 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 vincular un control web a un control de origen de datos, simplemente establezca la propiedad DataSourceID del control web al valor de la propiedad ID del control de 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. Normalmente se usan dos controles web TreeView y Menu 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 un nivel a la vez, empezando por el nodo de mapa de sitio raíz (Inicio, en nuestro mapa de sitio), luego el siguiente nivel (Informes básicos, Informes de filtrado y Formato personalizado), etc. Al enlazar SiteMapDataSource a un Repeater, enumera el primer nivel devuelto y crea una instancia de ItemTemplate para cada instancia de SiteMapNode en ese primer nivel. Para acceder a una propiedad determinada de SiteMapNode, podemos usar Eval(propertyName), que es cómo obtenemos las propiedades de SiteMapNode y de Url de cada Title para el control HyperLink.
El ejemplo de Repeater anterior generará el siguiente marcado:
<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 de mapa de sitio.
Para mostrar los niños para los informes básicos, los informes de filtrado y los formateos personalizados SiteMapNode, podemos agregar otro repetidor al repetidor ItemTemplate inicial. Este segundo repetidor se enlazará a la propiedad SiteMapNode de la instancia ChildNodes, 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 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>
El uso de estilos CSS elegidos del libro
Figura 11: Un menú compuesto por dos repetidores y algunos CSS
Este menú se encuentra 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.
Deshabilitación de 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 utilizan el estado de visualización para recordar su estado modificado a través de las devoluciones de datos, como los datos asociados 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 un sobredimensionamiento de página grave si no se supervisa estrechamente. 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 la 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 visualización 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"> elemento 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 de la página. Este sobredimensionamiento 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 escalar fácilmente por un factor de 10 o más.
El estado de vista se puede deshabilitar en el nivel de página o control estableciendo la propiedad EnableViewState en false, lo que reduce el tamaño de la marca renderizada. Dado que el estado de vista de un control web de datos conserva los datos enlazados al control web de datos entre los postbacks, al deshabilitar el estado de vista de un control web de datos, los datos deben enlazarse en cada uno de ellos. En ASP.NET versión 1.x, esta responsabilidad recaía sobre los hombros del desarrollador de páginas; sin embargo, con ASP.NET 2.0, los controles web para datos se volverán a enlazar a su control de origen de datos en cada reenvío de la página si es necesario.
Para reducir el estado de vista de la página, establezcamos la propiedad del control Repeater EnableViewState en false. Esto se puede hacer a través de la ventana Propiedades del Diseñador o mediante declaración en la vista Origen. Después de realizar este cambio, el marcado declarativo del repetidor debe ser similar al siguiente:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
EnableViewState="False">
<ItemTemplate>
... <i>ItemTemplate contents omitted for brevity</i> ...
</ItemTemplate>
</asp:Repeater>
Después de este cambio, el tamaño de estado de vista representado de la página se ha reducido a un mínimo de 52 bytes, un ahorro de 97% en el tamaño de estado de la 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 propiedad EnableViewState se establecerá en false y se hará sin mencionar. El único estado de vista de hora se analizará en escenarios en los que se debe habilitar para que el control web de datos proporcione su funcionalidad esperada.
Paso 4: Agregar navegación de migas de pan
Para completar la página maestra, vamos a agregar un elemento de interfaz de usuario de navegación por migas de pan 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 sencillo; basta con añadir 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 está visitando en la jerarquía del mapa del sitio, así como los "antecesores" de ese nodo del mapa del sitio, hasta llegar a la raíz (Inicio, en el mapa de sitio).
Figura 12: Las migas de pan muestran la página actual y sus antecesores en la jerarquía del sitio web.
Paso 5: Agregar la página predeterminada para cada sección
Los tutoriales de nuestro sitio web se dividen en diferentes categorías: Informes básicos, Filtrado, Formato personalizado, entre otras, con una carpeta para cada categoría y los tutoriales correspondientes como páginas 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, en la carpeta Default.aspx tendríamos vínculos a BasicReporting, SimpleDisplay.aspx y DeclarativeParams.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 de 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:
Figura 13: Agregar un nuevo control de usuario web a la carpeta (UserControls la imagen de tamaño completo)
SectionLevelTutorialListing.ascx
<%@ Control Language="CS" 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 : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
// If SiteMap.CurrentNode is not null,
// bind CurrentNode 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 declarativamente; 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 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, vinculamos su colección ChildNodes al Repetidor. Puesto 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 a 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 el Explorador de soluciones a la superficie Diseño donde desea que aparezca la lista de tutoriales.
Figura 14: El control de usuario se ha agregado a Default.aspx (haga clic para ver la imagen de tamaño completo)
Figura 15: Los tutoriales de informes básicos aparecen en la lista (haga clic para ver la imagen de tamaño completo)
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 de 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 para todo el sitio, y conservamos la compatibilidad completa del diseñador WYSIWYG en Visual Studio.
Después de completar la capa de acceso a datos y la capa 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 que muestran los datos recuperados de la BLL en los controles GridView, DetailsView y FormView.
¡Feliz programación!
Lecturas adicionales
Para obtener más información sobre los temas tratados 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 la vista de ASP.NET
- Cómo: Habilitar el seguimiento para una página de ASP.NET
- Controles de usuario de ASP.NET
Acerca del autor
Scott Mitchell, autor de siete 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. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se puede contactar con él en mitchell@4GuysFromRolla.com.
Agradecimientos especiales a
Esta serie de tutoriales contó con la revisión de muchos revisores que fueron de gran ayuda. Los principales revisores de este tutorial fueron Liz Shulok, Dennis Patterson y Hilton Giesenow. ¿Le interesa revisar mis próximos artículos de MSDN? Si es así, mándame un mensaje a mitchell@4GuysFromRolla.com.