Unidad 3: Creando una plantilla común utilizando Master Pages

Unidad 3: Creando una plantilla común utilizando Master Pages
Introducción ........................................................................................................................................................ 78 Creando una Master Page ................................................................................................................................... 79 Agregando una Página usando Master Pages ................................................................................................. 81 Modificando el contenido de una Master Page, en las páginas aspx ............................................................. 83 Páginas principales y navegación de sitios .............................................................................................................. 86 Introducción ........................................................................................................................................................ 86 Paso 1: Creación de la página principal ............................................................................................................... 87 Paso 2: Adición de una página de inicio al sitio web ........................................................................................... 90 Adición de páginas ASP.NET adicionales al sitio web .......................................................................................... 94 Paso 2: Creación de un mapa del sitio ............................................................................................................. 95 Paso 3: Visualización de un menú según el mapa del sitio ............................................................................. 98 Paso 4: Adición de elementos de navegación tipo breadcrumb ................................................................... 103 Paso 5: Adición de la página predeterminada de cada sección .................................................................... 104 Resumen ............................................................................................................................................................ 107 Bibliografía: ............................................................................................................................................................ 108 Introducción Los denominados sitios Web corporativos tienen un mismo menú y cabecera y con el
mismo diseño y formato.
Cuando empezamos a desarrollador un Sitio Web, lo que mas tiempo nos demora es la
plantilla base ya que después de tener nuestra base solo es cosa de copiar y cambiar
nuestro HTML especifico de cada página, a través de todas las páginas de nuestro Sitio
Web. Con el ASP.NET 2.0 podemos crear paginas que nos servirán como plantillas a
nuestro Sitio Web. En Master Pages, tenemos la misma funcionalidad que en las paginas
aspx, es decir, que podemos agregar controles asp, y agregar código del lado de servidor
para esos controles. Y lo mejor es que tendremos disponible todo esto en el resto de
páginas aspx, también podremos acceder a las propiedades de la Master Pages, mas
adelante veremos como hacer esto.
La ventaja que tenemos con Master Pages, es que vamos a crear una plantilla, o mas,
con una cabecera, menú, etc. para todo nuestro Sitio Web, esto hará mas fácil el
mantenimiento, ya que solo iremos a nuestro Master Page editamos, y automáticamente
los cambios se verán reflejados en todas las páginas que usen el Master Page que se edito.
Otra ventaja muy importante es que tendremos soporte en diseño WYSIWYG (lo que
ves, es lo que obtienes), en las páginas aspx, y podremos ver como será la presentación
final.
78
Como se puede apreciar en las imágenes tenemos soporte en diseño, lo que vemos en
edición será lo que veamos en el navegador (WYSIWYG).
Creando una Master Page Antes de crear un Master Page, debemos crear un nuevo Sitio Web, revisar la Lección
No.1. Una vez creado el Sitio Web, hacemos click derecho en nuestro Sitio Web, y
seleccionamos Add New Item..., nos aparecerá la siguiente ventana:
79
Seleccionamos el Item Master Page, como pueden apreciar este tiene extensión master.
Podemos escoger el lenguaje y si queremos colocar el código en un archivo separado.
Tiene igual manejo que las páginas aspx, estas pueden combinar HTML, controles de
Servidor Web, y código. Una Master Page, tiene dos vistas, al igual que las aspx: Vista
Source:
Como se puede apreciar la gran diferencia con una aspx, es la directiva Master, pero los
atributos Language, CodeFile, etc, son los mismos. Algo importantisimo que resaltar en
el HTML, es este control:
<asp:contentplaceholder id="ContentPlaceHolder1"
runat="server">
Este control marca que esta parte será la zona configurable en las paginas que usen el
Master Page, es decir todo lo que este fuera de este control, no se podra cambiar.
Nosotros podemos usar uno o varios ContentPlaceHolder, en nuestro Master Page, si nos
vamos a la vista diseño vermos algo como esto:
Todo lo que este fuera del ContentPlaceHolder, no podrá ser reemplazado. Nosotros
tambien podemos colocar contenido dentro del ContentPlaceHolder, pero este contenido
será como el contenido por defecto, es decir si el usuario desea lo deja o lo cambia, pero
lo que si no podra cambiar en diseño es lo que este fuera del ContentPlaceHolder.
80
Si utilizamos un poco el HTML, agregamos tablas, una cabecera, un menú de
navegación, e información a nuestro Master Page, obtendremos algo así, ustedes pueden
hacer mejor el diseño :D:
Ahora ta tenemos nuestro Master Page, listo para poder usar en nuestras páginas aspx.
Agregando una Página usando Master Pages Hay varios formas de crear una pagina aspx, para usar una Master Page:
1. La primera forma es sencilla, solo seleccionamos nuestra Master Page, y le damos
click derecho, seleccionamos Add Content Page, y listo, creara una página que
hace uso de esa master page.
81
2. La manera mas común es: Agregar un nuevo Item a nuestro Sitio Web. Cuando
nos salga la ventana para seleccionar el item, escogemos WebForm, pero antes de
hacer click en el boton Add, marcamos el check Select Master Page. A
continuación nos saldrá una ventana para escoger un Master Page de nuestro Sitio
Web, ya que puede haber mas de uno, y seleccionas el Master Page deseado. La
diferencia con la opción 1 es que con esta opción nosotros le damos el nombre a
la pagina aspx agregada.
3. La otra opción es hacer que una página existente use un Master Page, hay tres
pasos bien simples para hacer esto, miren la figura:
Lo primero que tenemos que hacer es agregar un nuevo atributo a la directiva Page,
MasterPageFile, e indicarle cual Master Page del sitio usaremos. El siguiente paso es
borrar todo el HTML, que este fuera del tag <body/> y agregar el siguiente control:
<asp:Content/>, a este control debemos asignarle un nombre y decirle que corra del lado
del servidor. Pero lo mas importante es indicarle a que ContentPlaceHolder reemplazara,
recuerden que una Master Page, pueden haber varios, por eso es necesario indicarle el
ContentPlaceHolderID. Si tuvimos codigo dentro de nuestra etiqueta <body/>, lo
copiamos dentro del control <asp:Content/>. Ahora si nos vamos a diseño y agregamos
un poco de código HTML podemos obtener lo siguiente:
82
Hasta el momento ya tenemos lo básico de Master Pages, sabemos como agregar una
Master Page y como usar nuestra Master Page en una página aspx. Ahora que pasaría si
deseamos modificar algo de nuestra MasterPage, para una página en particular, pues bien
tenemos algunas opciones.
Modificando el contenido de una Master Page, en las páginas aspx Una de las opciones que tenemos es haciendo uso de las propiedades de una MasterPage.
Vamos por pasos, primero agregaremos una celda al final de nuestra tabla, y dentro de
esta celda agregamos un label, que será nuestro footer:
Recuerden que todo lo que hagamos en la vista Source, se modificará automaticamente
en la vista Desing. Ahora ya tenemos nuestro control, vamos a crear una propiedad de
solo lectura y agregarla a la clase de nuestro Master Page, en el código de
Main.master.cs:
83
Bien ahora ya hicimos todo lo que teniamos que hacer en nuestro Master Page, ahora nos
vamos al código de la pagina desde donde queramos modificar la propiedad y la
modificamos, index.aspx.cs:
Chevere, ahora solo le damos F5, y vamos a poder ver como la pagina index ha cambiado
el footer de la Master Page, esa no la podemos cambiar en vista Diseño, pero si desde
código por ser una propiedad. Ahora llamar a la propiedad Footer, tenemos que agregar la
directiva MasterType, a nuestra pagina index.aspx:
Despues de agregar la Directiva MasterType, tenemos que asignarle el nombre del
Master Page al atributo VirtualPath, y ahora si todo listo no falta mas... ya podemos
hacer F5, y ver nuestra página index.aspx :P, con un footer personalizado.
Adicionalmente nosotros de usar propiedades, estas tambien las podemos usar para
modificar otras variables. Nosotros también podemos recuperar controles completos, para
esto lo único que hay que hacer es agregar dos sentencias al evento load en nuestro
codigo de index.aspx.cs:
Ahora ya podemos ver los resultados del Footer al ejecutar la pagina index.aspx, vemos
los dos efectos, el efecto de cambiar la propiedad, y el efecto de cambiar directamente
una propiedad de un control del Master Page:
Para ir terminando y no aburrirlos más, un último tema quiero tocar, y es el tema de
Master Pages aninadas, con esto podemos llamar a una master desde otra master page:
84
La desventja de esto es que solo hay soporte en la vista Source, solo aca podemos editar.
Si queremos ver la vista Design, no nos dejará. Pero con puro html si podemos hacerlo.
Por ejemplo despues de crear esta segunda Master Page a partir de otra Master Page, solo
tendriamos que agregar una nueva página aspx, que use esta última Master Page. En la
pagina aspx que usa la MasterPage aninada tampoco tendra soporte en Design, osea que
solo podremos ver los resultados al ejecutar la página. Y por último queda un tema de
tarea: Cargar dinámicamente Master Pages, es decir que en tiempo de ejecución nosotros
podamos selecionar que Master Page deseamos, esto por ejemplo podriamos usarlo para
personalizar nuestro sitio de acuerdo al usuario que inicio sesión, esto lo lograriarimos
fácilmente haciendo uso de profiles,... este es tema de otra entrega no me adelanto, ahi lo
tocaremos a detalle.
Fichero con el código de ejemplo: Leccion02.zip – Tamaño 57KB
85
Páginas principales y navegación de sitios Introducción El sistema de navegación de sitios ofrece a los desarrolladores de páginas un mecanismo
para definir un mapa del sitio y una API para dicho mapa que se debe consultar mediante
programación. Los nuevos controles web de navegación (Menu, TreeView y
SiteMapPath) facilitan la transformación total o parcial del mapa del sitio en un elemento
de navegación de la interfaz de usuario común. Vamos a usar el proveedor de navegación
de sitios predeterminado, lo que significa que nuestro mapa del sitio estará definido en un
archivo con formato XML.
Para ilustrar estos conceptos y conseguir que nuestros sitios web de tutoriales se utilicen
más, durante esta lección vamos a definir un diseño de página para todo el sitio,
implementar un mapa del sitio y agregar la interfaz de usuario de navegación. Cuando
terminemos este tutorial habremos aprendido un diseño de sitio web perfeccionado para
construir las páginas web del tutorial.
Figura 1. Resultado final del tutorial
86
Paso 1: Creación de la página principal El primer paso consiste en la creación de la página principal del sitio. En estos momentos
este sitio web está formado únicamente por DataSet con tipo (Northwind.xsd en la
carpeta App_Code), clases BLL (ProductsBLL.cs, CategoriesBLL.cs, etc. en la carpeta
App_Code), la base de datos (NORTHWND.MDF en la carpeta App_Data), el archivo de
configuración (Web.config) y el archivo de la hoja de estilo CSS (Styles.css). Vacié las
páginas y archivos que mostraban el uso de DAL y BLL en los dos primeros tutoriales
porque analizaremos esos ejemplos con más detalle en próximos tutoriales.
Figura 2. Archivos del proyecto
Para crear una página principal, haga clic con el botón secundario en el nombre del
proyecto en el Explorador de soluciones y seleccione Agregar nuevo elemento. A
continuación, seleccione el tipo de página principal de la lista de plantillas y denomínela
Site.master.
87
Figura 3. Adición de una página principal nueva al sitio web
Aquí se define el diseño de página para todo el sitio, en la página principal. Puede usar la
vista Diseño y agregar todos los controles web o de diseño que necesite, o bien puede
agregar las marcas manualmente en la vista Código fuente. En mi página principal uso
hojas de estilo en cascada para definir las posiciones y estilos con configuración CSS
definidos en el archivo externo Style.css. Mientras que no es posible deducirlo del
marcado mostrado a continuación, las reglas CSS se definen de tal forma que el
contenido de navegación de <div> se presente en posicionamiento absoluto para que
aparezca a la izquierda y tenga una profundidad fija 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">
88
<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 principal define el diseño de página estática y las regiones que se pueden
editar mediante las páginas ASP.NET que usan la página principal. El control
ContentPlaceHolder, que se puede ver dentro del contenido de <div>, marca estas
regiones con contenido que se puede editar. Esta página principal tiene sólo un
ContentPlaceHolder (MainContent), pero las páginas principales pueden tener varios
ContentPlaceHolders.
Al cambiar a la vista Diseño con el marcado anterior, se visualiza el diseño de la página
principal. Todas las páginas ASP.NET que usan esta página principal tendrán este diseño
uniforme y la posibilidad de especificar el marcado para la región MainContent
89
Figura 4. Página principal en la vista Diseño
Paso 2: Adición de una página de inicio al sitio web Una vez que hemos definido la página principal, estamos listos para agregar páginas
ASP.NET al sitio web. Empecemos por agregar Default.aspx a la página de inicio del
sitio web. Haga clic con el botón secundario en el nombre del proyecto en el Explorador
de soluciones y seleccione Agregar nuevo elemento. Elija la opción Formulario web de la
lista de plantillas y denomine el archivo Default.aspx. También debe activar la casilla de
verificación "Seleccionar la página principal".
90
Figura 5. Adición de formulario web nuevo, activación de la casilla de verificación
"Seleccionar la página principal"
Después de hacer clic en el botón Aceptar, se nos pide que seleccionemos la página
principal que debe usar esta página ASP.NET nueva. Es posible tener varias páginas
principales en un proyecto, aunque ahora tengamos sólo una.
Figura 6. Selección de la página principal que debe usar la página ASP.NET
Después de elegir la página principal, las páginas ASP.NET nuevas presentarán el
marcado siguiente:
91
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 se hace referencia al archivo de la página principal usado
(MasterPageFile="~/Site.master") y el marcado de las páginas ASP.NET contiene un
control Content para todos los controles ContentPlaceHolder definidos en la página
principal, con los ContentPlaceHolderID del control asignados al control Content para un
ContentPlaceHolder específico. El control Content es donde se coloca la marca que
quiere que aparezca en el ContentPlaceHolder correspondiente. Establezca el atributo
Title de la directiva @Page en Inicio y escriba algún contenido de bienvenida en el
control Content:
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>
92
<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 atributo Title de la directiva @Page nos permite indicar el título de la página desde la
página ASP.NET, aunque el elemento <title> no esté definido en la página principal.
También podemos definir el título mediante programación utilizando Page.Title. Observe
también que las referencias de páginas principales a hojas de estilo (como Style.css) se
actualizan automáticamente para que funcionen en todas las páginas ASP.NET,
independientemente del directorio de la página principal donde se ubica la página
ASP.NET.
Si cambiamos a la vista Diseño, podemos visualizar cómo se vería nuestra página en un
explorador. Tenga en cuenta que en la vista Diseño de la página ASP.NET sólo se puede
editar el contenido de las regiones configuradas para ello; la marca nonContentPlaceHolder definida en la página principal aparece en gris.
Figura 7. La vista Diseño de la página ASP.NET muestra las regiones que se pueden y
no se pueden editar
Cuando un explorador visita una página Default.aspx, el motor ASP.NET combina
automáticamente el contenido de página de la página principal y el contenido de
93
ASP.NET y representa el contenido combinado en el formato HTML final que se envía al
explorador solicitante. Cuando se actualiza el contenido de la página principal, todas las
páginas ASP.NET que usan esta página principal vuelven a combinar su contenido con el
contenido nuevo de la página principal la próxima vez que se produzca una solicitud. En
resumen, el modelo de página principal permite definir una única plantilla de diseño de
página (página principal) cuyos cambios se reflejarán de forma inmediata en todo el sitio.
Adición de páginas ASP.NET adicionales al sitio web Vamos a dedicar unos segundos a agregar códigos auxiliares de páginas ASP.NET al sitio
que contendrá finalmente las diferentes demostraciones de informes. Existirán más de 35
demostraciones en total, de modo que es preferible crear sólo las primeras páginas con
códigos auxiliares y no todas. Puesto que también habrá muchas categorías de
demostraciones, agregue una carpeta para las categorías con el fin de administrarlas
mejor. De momento, agregue las tres carpetas siguientes:
• BasicReporting
• Filtering
• CustomFormatting
Por último, agregue archivos nuevos como se muestra en el Explorador de soluciones de
la figura 8. Acuérdese de activar la casilla de verificación "Seleccionar la página
principal" después de agregar cada archivo.
94
Figura 8. Adición de los archivos siguientes
Paso 2: Creación de un mapa del sitio Una de las mayores dificultades de administrar un sitio web formado por más de unas
cuantas páginas es poder ofrecer a los visitantes una forma directa de navegar por el sitio.
Debemos empezar por comprobar que la estructura de navegación del sitio está definida.
A continuación, dicha estructura debe estar traducida a elementos de navegación de la
interfaz de usuario, como menús o elementos tipo breadcrumb. Por último, todo este
proceso se debe mantener y actualizar mediante la adición de página nuevas al sitio y la
eliminación de otras existentes. Antes de la creación de ASP.NET 2.0, los desarrolladores
se encontraban solos ante la creación de la estructura de navegación de un sitio, su
mantenimiento y la traducción de la misma a elementos de navegación de la interfaz de
usuario. Sin embargo, gracias a ASP.NET 2.0 los desarrolladores pueden utilizar el
sistema de navegación de sitios integrado, que ofrece una gran flexibilidad.
El sistema de navegación de sitios de ASP.NET 2.0 ofrece a los desarrolladores un medio
para definir un mapa del sitio y posteriormente tener acceso a esta información a través
de una API de programación. ASP.NET incluye un proveedor de mapas del sitio que
asume que los datos del mapa se almacenarán en un archivo XML formateado de una
forma concreta. Sin embargo, puesto que el sistema de navegación de sitios viene
integrado en el modelo de proveedor, se puede ampliar para que sea compatible con otras
formas de serialización de la información del mapa del sitio. El artículo de Jeff Prosise,
The SQL Site Map Provider You've Been Waiting For (puede estar en inglés) explica
como crear un proveedor del mapa del sitio que almacene el mapa en una base de datos
de SQL Server; otra opción es crear un proveedor del mapa del sitio a partir de la
estructura del sistema de archivos.
No obstante, en este tutorial vamos a usar el proveedor de mapas del sitio predeterminado
que se incluye con ASP.NET 2.0. Para crear el mapa del sitio, haga clic con el botón
secundario en el nombre del proyecto en el Explorador de soluciones y seleccione
Agregar nuevo elemento. Mantenga el nombre Web.sitemap y haga clic en el botón
Agregar
95
Figura 9. Adición de un mapa del sitio al proyecto
El archivo del mapa del sitio está en formato XML. Tenga en cuenta que Visual Studio
incluye IntelliSense para la estructura del mapa del sitio. El archivo del mapa del sitio
debe tener el nodo <siteMap> como nodo raíz, que debe contener exactamente un
elemento secundario <siteMapNode>. Ese primer elemento <siteMapNode> puede, a su
vez, contener un número indeterminado de elementos <siteMapNode> descendientes.
Defina el mapa del sitio en función de la estructura del sistema de archivos. Es decir,
agregue un elemento <siteMapNode> para cada una de las tres carpetas y elementos
secundarios <siteMapNode> para cada una de las páginas ASP.NET contenidas en dichas
carpetas, como se muestra a continuación:
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
96
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="MasterDetails-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 grid's
footer." />
</siteMapNode>
</siteMapNode>
</siteMap>
El mapa del sitio define la estructura de navegación del sitio web; se trata de una
jerarquía que describe las secciones que forman el sitio. Cada elemento <siteMapNode>
de Web.sitemap representa una sección de la estructura de navegación del sitio.
97
Figura 10. El mapa del sitio representa una estructura de navegación jerárquica
ASP.NET expone la estructura del mapa del sitio a través de la clase SiteMap
class!href(http://msdn2.microsoft.com/en-us/library/system.web.sitemap.aspx) de .NET
Framework. Esta clase presenta una propiedad CurrentNode, que devuelve información
de la sección que el usuario está visitando; la propiedad RootNode devuelve la raíz del
mapa del sitio (Inicio en nuestro mapa del sitio). Ambas propiedades, CurrentNode y
RootNode, devuelven instancias SiteMapNode!href(http://msdn2.microsoft.com/enus/library/system.web.sitemapnode.aspx), que tienen propiedades como ParentNode,
ChildNodes, NextSibling, PreviousSibling, etc., que permiten desplazarse por la jerarquía
del mapa del sitio.
Paso 3: Visualización de un menú según el mapa del sitio Se puede tener acceso a los datos en ASP.NET 2.0 mediante lenguaje de programación,
como en ASP.NET 1.x, o bien mediante declaración a través de los controles de origen de
datos nuevos. Existen varios controles de origen de datos integrados, como el control
SqlDataSource para tener acceso a los datos de la base de datos relacional o el control
ObjectDataSource para tener acceso a los datos de clases, entre otros. Incluso puede crear
controles de origen de datos personalizados.
Los controles de origen de datos desempeñan la función de proxy entre su página
ASP.NET y los datos subyacentes. Por lo general, para visualizar un conjunto de datos
recuperados del control de origen de datos, se agrega otro control web a la página y se
enlaza al control de origen de datos. Para enlazar un control web a un control de origen
de datos, configure la propiedad DataSourceID del control web con el mismo valor de la
propiedad ID del control de origen de datos.
ASP.NET incluye el control SiteMapDataSource, que nos permite enlazar un control web
al mapa de nuestro sitio web, para facilitar la administración de los datos del mapa del
sitio. Se usan normalmente dos controles web (TreeView y Menu) para presentar una
interfaz de usuario de navegación. Para enlazar los datos del mapa del sitio a uno de estos
controles, agregue un SiteMapDataSource a la página y un control TreeView o Menu que
98
tenga la propiedad DataSourceID configurada correspondientemente. Por ejemplo,
podríamos agregar un control Menu a la página principal mediante las marcas siguientes:
<div id="navigation">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
Para tener un mayor control sobre la página con formato HTML emitida, podemos
enlazar el control SiteMapDataSource al control Repeater como sigue:
<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 un nivel a la jerarquía del mapa del sitio cada
vez; en primer lugar del nodo raíz del mapa (Inicio en nuestro mapa del sitio), a
continuación de los niveles siguientes (Basic Reporting, Filtering Reports y Customized
Formatting) y así sucesivamente. Cuando se enlaza SiteMapDataSource a un Repeater
(repetidor), éste enumera el primer nivel devuelto y crea una instancia de ItemTemplate
para cada instancia SiteMapNode del primer nivel. Para tener acceso a una propiedad
concreta del SiteMapNode, podemos usar Eval(propertyName), que es la forma que
tenemos de obtener las propiedades Url y Title de SiteMapNode para el control
HyperLink.
El ejemplo de Repeater anterior representa el marcado siguiente:
99
<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 del mapa del sitio (Basic Reporting, Filtering Reports y Customized
Formatting) forman el segundo nivel representado del mapa del sitio, no el primero. La
razón es que la propiedad ShowStartingNode de SiteMapDataSource está establecida en
False, lo que provoca que el SiteMapDataSource omita el nodo raíz del mapa y, en vez
del primer nivel, devuelve el segundo nivel de la jerarquía del mapa.
Para visualizar los elementos secundarios de Basic Reporting, Filtering Reports y
Customized Formatting SiteMapNodes, podemos agregar otro Repeater al ItemTemplate
del Repeater inicial. Este segundo Repeater se enlaza a la propiedad ChildNodes de la
instancia SiteMapNode como sigue:
<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>
100
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
Estos dos Repeater generan el siguiente marcado (algunas marcas se han omitido por
razones 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>
Mediante los estilos CSS elegidos del libro de Rachel AndrewThe CSS Anthology: 101
Essential Tips, Tricks, and Hacks (puede estar en inglés), se ha dado un estilo a los
elementos <ul> y <li> cuyo marcado genera el aspecto siguiente:
Figura 11. Menú formado por dos Repeater y varios estilos CSS
101
Este menú se encuentra en la página principal y está enlazado al mapa del sitio definido
en Web.sitemap, lo que significa que cualquier cambio realizado en el mapa del sitio se
reflejará inmediatamente en todas las páginas que usen la página principal Site.master.
Deshabilitación de ViewState
Todos los controles ASP.NET pueden mantener opcionalmente su estado en el estado de
vista, que se serializa como un campo de formulario oculto de la página HTML
representada. Los controles se valen del estado de vista para tener presente su estado
cambiado mediante programación en las devoluciones, como los datos enlazados a un
control web de datos. El estado de vista permite recordar la información durante las
devoluciones; sin embargo, aumenta el tamaño del marcado que se debe enviar al cliente
y puede producir una recarga importante de la página si no se controla bien. Los controles
web de datos, en especial el control GridView, son particularmente adecuados para
agregar cantidades adicionales de kilobytes al marcado de una página. Mientras que
dicho incremento puede ser insignificante con respecto al ancho de banda o a los usuarios
de la intranet, el estado de vista puede sumar varios segundos al viaje de ida y vuelta de
los usuarios que llaman.
Para ver el efecto del estado de vista, visite una página en un explorador y vea después el
código fuente emitido por la página (en Internet Explorer, vaya al menú Ver y seleccione
la opción Código fuente). También puede activar el seguimiento de página para ver la
asignación del estado de vista utilizado por los controles de la página. La información del
estado de vista se serializa en un campo de formulario oculto denominado
__VIEWSTATE, que se ubica en un elemento <div> justo después de la etiqueta de
apertura <form>. El estado de vista sólo se mantiene cuando se utiliza un formulario web;
si la página ASP.NET no incluye un <form runat="server"> en la sintaxis de declaración,
no existirá un campo de formulario oculto __VIEWSTATE en las marcas representadas.
El campo de formulario VIEWSTATE generado por la página principal suma alrededor
de 1.800 bytes al marcado de la página. Esta recarga adicional se debe, en primer lugar, al
control Repeater, porque el contenido del control SiteMapDataSource se mantiene en el
estado de vista. Mientras que puede parecer que 1.800 bytes no es tanto, al usar un
GridView con muchos campos y registros, el estado de vista se puede multiplicar
fácilmente por 10 o más.
El estado de vista se puede deshabilitar en la misma página o mediante los controles
estableciendo la propiedad EnableViewState en false, lo que reduce el tamaño del
marcado representado. Puesto que el estado de vista para un control web de datos
mantiene los datos enlazados a dicho control durante las devoluciones, al deshabilitar este
estado para el control, se deben enlazar los datos para cada una de las devoluciones.
Mientras que de esto se encarga el desarrollador de la página en la versión 1.x de
ASP.NET; en ASP.NET 2.0, los controles web de datos se deben volver a enlazar al
control de origen de datos para cada devolución, si es necesario.
102
Si desea reducir el estado de vista de la página, establezca la propiedad EnableViewState
del control Repeater en false. Esto se puede realizar mediante la ventana Propiedades del
Diseñador o mediante declaración en la vista Código fuente. Una vez que se ha realizado
el cambio de Repeater mediante declaración, el marcado debe tener el siguiente aspecto:
<asp:Repeater runat="server" ID="menu"
DataSourceID="SiteMapDataSource1" EnableViewState="False">
<ItemTemplate>
... ItemTemplate contents omitted for brevity ...
</ItemTemplate>
</asp:Repeater>
Después de este cambio, el tamaño del estado de vista de la página representada se habrá
reducido a tan sólo 52 bytes, lo que supone un ahorro del 97% en el tamaño del estado de
vista. En los tutoriales de esta serie, deshabilitaremos de forma predeterminada el estado
de vista de los controles web de datos para reducir el tamaño del marcado representado.
En la mayoría de los ejemplos, estableceremos la propiedad EnableViewState en false sin
necesidad de explicitarlo. Sólo hablaremos del estado de vista cuando se deba habilitar
para que el control web de datos cumpla su función.
Paso 4: Adición de elementos de navegación tipo breadcrumb Para completar la página principal vamos a agregar un elemento de navegación de la
interfaz de usuario tipo breadcrumb a cada página. El elemento breadcrumb muestra
rápidamente a los usuarios su ubicación actual en la jerarquía del sitio. Agregar
elementos breadcrumb en ASP.NET 2.0 es sencillo; sólo hay que añadir un control
SiteMapPath a la página, sin necesidad de códigos.
En nuestro sitio vamos a agregar este control al <div> de encabezado:
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
El elemento breadcrumb muestra la página actual de la jerarquía del mapa del sitio en la
que está el visitante y las páginas anteriores del nodo del mapa hasta llegar a la raíz
(Inicio en nuestro mapa del sitio).
Figura 12. El elemento breadcrumb muestra la página actual y las anteriores de la
jerarquía del mapa del sitio
103
Paso 5: Adición de la página predeterminada de cada sección Los tutoriales de nuestro sitio están divididos en varias categorías, a saber, Basic
Reporting, Filtering, Custom Formatting, etc., con una carpeta en cada una y los
tutoriales correspondientes en forma de páginas ASP.NET dentro de dicha carpeta.
Asimismo, cada carpeta contiene una página Default.aspx. Vamos a visualizar todos los
tutoriales de esta sección correspondientes a esta página predeterminada. Es decir,
tendríamos
vínculos
a
SimpleDisplay.aspx,
DeclarativeParams.aspx
y
ProgrammaticParams.aspx para la página Default.aspx predeterminada de la carpeta
BasicReporting. Ahora podemos volver a usar la clase SiteMap y un control web de datos
para ver esta información, que se corresponde con el mapa del sitio definido en
Web.sitemap.
Vamos a ver una lista desordenada volviendo a usar un Repeater, pero esta vez veremos
el título y la descripción de los tutoriales. Puesto que las marcas y los códigos necesarios
para ello se deben repetir para cada página Default.aspx, podemos concretar esta lógica
de la interfaz de usuario en un control de usuario. Cree una carpeta denominada
UserControls en el sitio web y agréguele un elemento nuevo del tipo Control de usuario
web denominado SectionLevelTutorialListing.ascx; agregue también el marcado que se
incluye a continuación:
Figura 13. Adición de un control de usuario web a la carpeta UserControls
SectionLevelTutorialListing.ascx
104
<%@ 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 datos de SiteMap a Repeater mediante
declaración; sin embargo, el control de usuario SectionLevelTutorialListing lo hace
mediante programación. En el controlador de eventos Page_Load, se hace una
comprobación para asegurarse de que esta es la primera visita a la página (no una
105
devolución) y de que la URL de esta página está asignada a un nodo del mapa del sitio. Si
dicho control de usuario se usa en una página que no se corresponde a una entrada
<siteMapNode>, SiteMap.CurrentNode devolverá null y no se enlazarán datos al
Repeater. Si damos por hecho que tenemos un CurrentNode, debemos enlazar la
colección ChildNodes a Repeater. Puesto que nuestro mapa del sitio está configurado de
tal forma que la página Default.aspx de cada sección es el nodo primario de todos los
tutoriales de dicha sección, este código mostrará vínculos a todos los tutoriales de la
sección junto con las descripciones correspondientes, como se muestra en la captura de
pantalla siguiente.
Una vez que se ha creado este Repeater, abra las páginas Default.aspx de cada carpeta,
vaya a la vista Diseño y arrastre el control de usuario en la superficie de diseño desde el
Explorador de soluciones hasta el lugar donde desea que aparezca la lista de tutoriales.
Figura 14. Control de usuario agregado a Default.aspx
106
Figura 15. Enumeración de los tutoriales contenidos en Basic Reporting
Resumen Con el mapa del sitio definido y la página principal completa, hemos conseguido una
página con un diseño y un esquema de navegación lógicos para los tutoriales
relacionados con datos. Independientemente del número de páginas que agreguemos al
sitio, el proceso de actualización del diseño de página de todo el sitio o de la información
de navegación es rápido y sencillo gracias a la centralización de la información. En
concreto, la información de diseño de página se define en la página principal Site.master
y el mapa del sitio en Web.sitemap. No necesitamos escribir ningún código para obtener
este diseño de página para todo el sitio y este mecanismo de navegación y, además,
hemos conseguido en Visual Studio un diseño intuitivo donde vemos lo que hay.
Después de haber terminado las capas de acceso a datos y de lógica de negocios y de
haber definido un diseño de página coherente y un mecanismo de navegación del sitio,
estamos preparados para empezar con los modelos de informe más comunes. En los tres
tutoriales siguientes analizaremos las tareas de elaboración de informes básicas, es decir,
la visualización de datos recuperados de BLL en los controles GridView, DetailsView y
FormView.
Descargar el código de ejemplo ASPNET_Data_Tutorial_3_CS.exe.
107
Bibliografía: Curso: TECNOLOGIAS DE APLICACIONES WEB CON MICROSOFT VISUAL
STUDIO 2005
108