Unidad 3: Creando una plantilla comn utilizando Master Pages

Introduccin........................................................................................................................................................78 CreandounaMasterPage...................................................................................................................................79 AgregandounaPginausandoMasterPages................................................................................................. 81 ModificandoelcontenidodeunaMasterPage,enlaspginasaspx.............................................................83 Pginasprincipalesynavegacindesitios.............................................................................................................. 86 Introduccin........................................................................................................................................................86 Paso1:Creacindelapginaprincipal............................................................................................................... 87 Paso2:Adicindeunapginadeinicioalsitioweb........................................................................................... 90 AdicindepginasASP.NETadicionalesalsitioweb.......................................................................................... 94 Paso2:Creacindeunmapadelsitio ............................................................................................................. 95 Paso3:Visualizacindeunmensegnelmapadelsitio............................................................................. 98 Paso4:Adicindeelementosdenavegacintipobreadcrumb................................................................... 103 Paso5:Adicindelapginapredeterminadadecadaseccin.................................................................... 104 Resumen............................................................................................................................................................107 Bibliografa: ............................................................................................................................................................108

Introduccin
Los denominados sitios Web corporativos tienen un mismo men y cabecera y con el mismo diseo y formato. Cuando empezamos a desarrollador un Sitio Web, lo que mas tiempo nos demora es la plantilla base ya que despus de tener nuestra base solo es cosa de copiar y cambiar nuestro HTML especifico de cada pgina, a travs de todas las pginas de nuestro Sitio Web. Con el ASP.NET 2.0 podemos crear paginas que nos servirn 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 cdigo del lado de servidor para esos controles. Y lo mejor es que tendremos disponible todo esto en el resto de pginas aspx, tambin 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 fcil el mantenimiento, ya que solo iremos a nuestro Master Page editamos, y automticamente los cambios se vern reflejados en todas las pginas que usen el Master Page que se edito. Otra ventaja muy importante es que tendremos soporte en diseo WYSIWYG (lo que ves, es lo que obtienes), en las pginas aspx, y podremos ver como ser la presentacin final.

78

Como se puede apreciar en las imgenes tenemos soporte en diseo, lo que vemos en edicin ser lo que veamos en el navegador (WYSIWYG).

CreandounaMasterPage
Antes de crear un Master Page, debemos crear un nuevo Sitio Web, revisar la Leccin 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 extensin master. Podemos escoger el lenguaje y si queremos colocar el cdigo en un archivo separado. Tiene igual manejo que las pginas aspx, estas pueden combinar HTML, controles de Servidor Web, y cdigo. 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 diseo 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 diseo es lo que este fuera del ContentPlaceHolder. 80

Si utilizamos un poco el HTML, agregamos tablas, una cabecera, un men de navegacin, e informacin a nuestro Master Page, obtendremos algo as, ustedes pueden hacer mejor el diseo :D:

Ahora ta tenemos nuestro Master Page, listo para poder usar en nuestras pginas aspx.

AgregandounaPginausandoMasterPages
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 pgina que hace uso de esa master page.

81

2. La manera mas comn 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 continuacin 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 opcin 1 es que con esta opcin nosotros le damos el nombre a la pagina aspx agregada. 3. La otra opcin es hacer que una pgina 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 diseo y agregamos un poco de cdigo HTML podemos obtener lo siguiente:

82

Hasta el momento ya tenemos lo bsico de Master Pages, sabemos como agregar una Master Page y como usar nuestra Master Page en una pgina aspx. Ahora que pasara si deseamos modificar algo de nuestra MasterPage, para una pgina en particular, pues bien tenemos algunas opciones.

ModificandoelcontenidodeunaMasterPage,enlaspginasaspx
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 cdigo de Main.master.cs:

83

Bien ahora ya hicimos todo lo que teniamos que hacer en nuestro Master Page, ahora nos vamos al cdigo 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 Diseo, pero si desde cdigo 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 pgina index.aspx :P, con un footer personalizado. Adicionalmente nosotros de usar propiedades, estas tambien las podemos usar para modificar otras variables. Nosotros tambin 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 ms, 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 pgina 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 pgina. Y por ltimo queda un tema de tarea: Cargar dinmicamente Master Pages, es decir que en tiempo de ejecucin nosotros podamos selecionar que Master Page deseamos, esto por ejemplo podriamos usarlo para personalizar nuestro sitio de acuerdo al usuario que inicio sesin, esto lo lograriarimos fcilmente haciendo uso de profiles,... este es tema de otra entrega no me adelanto, ahi lo tocaremos a detalle. Fichero con el cdigo de ejemplo: Leccion02.zip Tamao 57KB

85

Pginasprincipalesynavegacindesitios
Introduccin
El sistema de navegacin de sitios ofrece a los desarrolladores de pginas un mecanismo para definir un mapa del sitio y una API para dicho mapa que se debe consultar mediante programacin. Los nuevos controles web de navegacin (Menu, TreeView y SiteMapPath) facilitan la transformacin total o parcial del mapa del sitio en un elemento de navegacin de la interfaz de usuario comn. Vamos a usar el proveedor de navegacin 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 ms, durante esta leccin vamos a definir un diseo de pgina para todo el sitio, implementar un mapa del sitio y agregar la interfaz de usuario de navegacin. Cuando terminemos este tutorial habremos aprendido un diseo de sitio web perfeccionado para construir las pginas web del tutorial.

Figura 1. Resultado final del tutorial

86

Paso1:Creacindelapginaprincipal
El primer paso consiste en la creacin de la pgina 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 configuracin (Web.config) y el archivo de la hoja de estilo CSS (Styles.css). Vaci las pginas y archivos que mostraban el uso de DAL y BLL en los dos primeros tutoriales porque analizaremos esos ejemplos con ms detalle en prximos tutoriales.

Figura 2. Archivos del proyecto Para crear una pgina principal, haga clic con el botn secundario en el nombre del proyecto en el Explorador de soluciones y seleccione Agregar nuevo elemento. A continuacin, seleccione el tipo de pgina principal de la lista de plantillas y denomnela Site.master.

87

Figura 3. Adicin de una pgina principal nueva al sitio web Aqu se define el diseo de pgina para todo el sitio, en la pgina principal. Puede usar la vista Diseo y agregar todos los controles web o de diseo que necesite, o bien puede agregar las marcas manualmente en la vista Cdigo fuente. En mi pgina principal uso hojas de estilo en cascada para definir las posiciones y estilos con configuracin CSS definidos en el archivo externo Style.css. Mientras que no es posible deducirlo del marcado mostrado a continuacin, las reglas CSS se definen de tal forma que el contenido de navegacin de <div> se presente en posicionamiento absoluto para que aparezca a la izquierda y tenga una profundidad fija de 200 pxeles. 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 pgina principal define el diseo de pgina esttica y las regiones que se pueden editar mediante las pginas ASP.NET que usan la pgina principal. El control ContentPlaceHolder, que se puede ver dentro del contenido de <div>, marca estas regiones con contenido que se puede editar. Esta pgina principal tiene slo un ContentPlaceHolder (MainContent), pero las pginas principales pueden tener varios ContentPlaceHolders. Al cambiar a la vista Diseo con el marcado anterior, se visualiza el diseo de la pgina principal. Todas las pginas ASP.NET que usan esta pgina principal tendrn este diseo uniforme y la posibilidad de especificar el marcado para la regin MainContent

89

Figura 4. Pgina principal en la vista Diseo

Paso2:Adicindeunapginadeinicioalsitioweb
Una vez que hemos definido la pgina principal, estamos listos para agregar pginas ASP.NET al sitio web. Empecemos por agregar Default.aspx a la pgina de inicio del sitio web. Haga clic con el botn secundario en el nombre del proyecto en el Explorador de soluciones y seleccione Agregar nuevo elemento. Elija la opcin Formulario web de la lista de plantillas y denomine el archivo Default.aspx. Tambin debe activar la casilla de verificacin "Seleccionar la pgina principal".

90

Figura 5. Adicin de formulario web nuevo, activacin de la casilla de verificacin "Seleccionar la pgina principal" Despus de hacer clic en el botn Aceptar, se nos pide que seleccionemos la pgina principal que debe usar esta pgina ASP.NET nueva. Es posible tener varias pginas principales en un proyecto, aunque ahora tengamos slo una.

Figura 6. Seleccin de la pgina principal que debe usar la pgina ASP.NET Despus de elegir la pgina principal, las pginas ASP.NET nuevas presentarn 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 pgina principal usado (MasterPageFile="~/Site.master") y el marcado de las pginas ASP.NET contiene un control Content para todos los controles ContentPlaceHolder definidos en la pgina principal, con los ContentPlaceHolderID del control asignados al control Content para un ContentPlaceHolder especfico. 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 algn 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 ttulo de la pgina desde la pgina ASP.NET, aunque el elemento <title> no est definido en la pgina principal. Tambin podemos definir el ttulo mediante programacin utilizando Page.Title. Observe tambin que las referencias de pginas principales a hojas de estilo (como Style.css) se actualizan automticamente para que funcionen en todas las pginas ASP.NET, independientemente del directorio de la pgina principal donde se ubica la pgina ASP.NET. Si cambiamos a la vista Diseo, podemos visualizar cmo se vera nuestra pgina en un explorador. Tenga en cuenta que en la vista Diseo de la pgina ASP.NET slo se puede editar el contenido de las regiones configuradas para ello; la marca nonContentPlaceHolder definida en la pgina principal aparece en gris.

Figura 7. La vista Diseo de la pgina ASP.NET muestra las regiones que se pueden y no se pueden editar Cuando un explorador visita una pgina Default.aspx, el motor ASP.NET combina automticamente el contenido de pgina de la pgina principal y el contenido de 93

ASP.NET y representa el contenido combinado en el formato HTML final que se enva al explorador solicitante. Cuando se actualiza el contenido de la pgina principal, todas las pginas ASP.NET que usan esta pgina principal vuelven a combinar su contenido con el contenido nuevo de la pgina principal la prxima vez que se produzca una solicitud. En resumen, el modelo de pgina principal permite definir una nica plantilla de diseo de pgina (pgina principal) cuyos cambios se reflejarn de forma inmediata en todo el sitio.

AdicindepginasASP.NETadicionalesalsitioweb
Vamos a dedicar unos segundos a agregar cdigos auxiliares de pginas ASP.NET al sitio que contendr finalmente las diferentes demostraciones de informes. Existirn ms de 35 demostraciones en total, de modo que es preferible crear slo las primeras pginas con cdigos auxiliares y no todas. Puesto que tambin habr muchas categoras de demostraciones, agregue una carpeta para las categoras 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. Acurdese de activar la casilla de verificacin "Seleccionar la pgina principal" despus de agregar cada archivo.

94

Figura 8. Adicin de los archivos siguientes

Paso2:Creacindeunmapadelsitio
Una de las mayores dificultades de administrar un sitio web formado por ms de unas cuantas pginas es poder ofrecer a los visitantes una forma directa de navegar por el sitio. Debemos empezar por comprobar que la estructura de navegacin del sitio est definida. A continuacin, dicha estructura debe estar traducida a elementos de navegacin de la interfaz de usuario, como mens o elementos tipo breadcrumb. Por ltimo, todo este proceso se debe mantener y actualizar mediante la adicin de pgina nuevas al sitio y la eliminacin de otras existentes. Antes de la creacin de ASP.NET 2.0, los desarrolladores se encontraban solos ante la creacin de la estructura de navegacin de un sitio, su mantenimiento y la traduccin de la misma a elementos de navegacin de la interfaz de usuario. Sin embargo, gracias a ASP.NET 2.0 los desarrolladores pueden utilizar el sistema de navegacin de sitios integrado, que ofrece una gran flexibilidad. El sistema de navegacin 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 informacin a travs de una API de programacin. ASP.NET incluye un proveedor de mapas del sitio que asume que los datos del mapa se almacenarn en un archivo XML formateado de una forma concreta. Sin embargo, puesto que el sistema de navegacin de sitios viene integrado en el modelo de proveedor, se puede ampliar para que sea compatible con otras formas de serializacin de la informacin del mapa del sitio. El artculo de Jeff Prosise, The SQL Site Map Provider You've Been Waiting For (puede estar en ingls) explica como crear un proveedor del mapa del sitio que almacene el mapa en una base de datos de SQL Server; otra opcin 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 botn 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 botn Agregar

95

Figura 9. Adicin 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 raz, que debe contener exactamente un elemento secundario <siteMapNode>. Ese primer elemento <siteMapNode> puede, a su vez, contener un nmero indeterminado de elementos <siteMapNode> descendientes. Defina el mapa del sitio en funcin 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 pginas ASP.NET contenidas en dichas carpetas, como se muestra a continuacin: 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&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" customized view." /> <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx" title="Summary Data in Footer" description="Display summary data in the grid's footer." /> </siteMapNode> </siteMapNode> </siteMap> description="Illustrates using a FormView for a highly

El mapa del sitio define la estructura de navegacin del sitio web; se trata de una jerarqua que describe las secciones que forman el sitio. Cada elemento <siteMapNode> de Web.sitemap representa una seccin de la estructura de navegacin del sitio.

97

Figura 10. El mapa del sitio representa una estructura de navegacin jerrquica ASP.NET expone la estructura del mapa del sitio a travs 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 informacin de la seccin que el usuario est visitando; la propiedad RootNode devuelve la raz 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 jerarqua del mapa del sitio.

Paso3:Visualizacindeunmensegnelmapadelsitio
Se puede tener acceso a los datos en ASP.NET 2.0 mediante lenguaje de programacin, como en ASP.NET 1.x, o bien mediante declaracin a travs 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 desempean la funcin de proxy entre su pgina 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 pgina 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 administracin de los datos del mapa del sitio. Se usan normalmente dos controles web (TreeView y Menu) para presentar una interfaz de usuario de navegacin. Para enlazar los datos del mapa del sitio a uno de estos controles, agregue un SiteMapDataSource a la pgina y un control TreeView o Menu que 98

tenga la propiedad DataSourceID configurada correspondientemente. Por ejemplo, podramos agregar un control Menu a la pgina 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 pgina 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 jerarqua del mapa del sitio cada vez; en primer lugar del nodo raz del mapa (Inicio en nuestro mapa del sitio), a continuacin 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 razn es que la propiedad ShowStartingNode de SiteMapDataSource est establecida en False, lo que provoca que el SiteMapDataSource omita el nodo raz del mapa y, en vez del primer nivel, devuelve el segundo nivel de la jerarqua 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 ingls), 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 pgina 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 pginas que usen la pgina principal Site.master. Deshabilitacin 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 pgina HTML representada. Los controles se valen del estado de vista para tener presente su estado cambiado mediante programacin en las devoluciones, como los datos enlazados a un control web de datos. El estado de vista permite recordar la informacin durante las devoluciones; sin embargo, aumenta el tamao del marcado que se debe enviar al cliente y puede producir una recarga importante de la pgina 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 pgina. 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 pgina en un explorador y vea despus el cdigo fuente emitido por la pgina (en Internet Explorer, vaya al men Ver y seleccione la opcin Cdigo fuente). Tambin puede activar el seguimiento de pgina para ver la asignacin del estado de vista utilizado por los controles de la pgina. La informacin del estado de vista se serializa en un campo de formulario oculto denominado __VIEWSTATE, que se ubica en un elemento <div> justo despus de la etiqueta de apertura <form>. El estado de vista slo se mantiene cuando se utiliza un formulario web; si la pgina ASP.NET no incluye un <form runat="server"> en la sintaxis de declaracin, no existir un campo de formulario oculto __VIEWSTATE en las marcas representadas. El campo de formulario VIEWSTATE generado por la pgina principal suma alrededor de 1.800 bytes al marcado de la pgina. 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 fcilmente por 10 o ms. El estado de vista se puede deshabilitar en la misma pgina o mediante los controles estableciendo la propiedad EnableViewState en false, lo que reduce el tamao 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 pgina en la versin 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 devolucin, si es necesario.

102

Si desea reducir el estado de vista de la pgina, establezca la propiedad EnableViewState del control Repeater en false. Esto se puede realizar mediante la ventana Propiedades del Diseador o mediante declaracin en la vista Cdigo fuente. Una vez que se ha realizado el cambio de Repeater mediante declaracin, 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>

Despus de este cambio, el tamao del estado de vista de la pgina representada se habr reducido a tan slo 52 bytes, lo que supone un ahorro del 97% en el tamao 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 tamao del marcado representado. En la mayora de los ejemplos, estableceremos la propiedad EnableViewState en false sin necesidad de explicitarlo. Slo hablaremos del estado de vista cuando se deba habilitar para que el control web de datos cumpla su funcin.

Paso4:Adicindeelementosdenavegacintipobreadcrumb
Para completar la pgina principal vamos a agregar un elemento de navegacin de la interfaz de usuario tipo breadcrumb a cada pgina. El elemento breadcrumb muestra rpidamente a los usuarios su ubicacin actual en la jerarqua del sitio. Agregar elementos breadcrumb en ASP.NET 2.0 es sencillo; slo hay que aadir un control SiteMapPath a la pgina, sin necesidad de cdigos. 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 pgina actual de la jerarqua del mapa del sitio en la que est el visitante y las pginas anteriores del nodo del mapa hasta llegar a la raz (Inicio en nuestro mapa del sitio).

Figura 12. El elemento breadcrumb muestra la pgina actual y las anteriores de la jerarqua del mapa del sitio

103

Paso5:Adicindelapginapredeterminadadecadaseccin
Los tutoriales de nuestro sitio estn divididos en varias categoras, a saber, Basic Reporting, Filtering, Custom Formatting, etc., con una carpeta en cada una y los tutoriales correspondientes en forma de pginas ASP.NET dentro de dicha carpeta. Asimismo, cada carpeta contiene una pgina Default.aspx. Vamos a visualizar todos los tutoriales de esta seccin correspondientes a esta pgina predeterminada. Es decir, tendramos vnculos a SimpleDisplay.aspx, DeclarativeParams.aspx y ProgrammaticParams.aspx para la pgina Default.aspx predeterminada de la carpeta BasicReporting. Ahora podemos volver a usar la clase SiteMap y un control web de datos para ver esta informacin, 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 ttulo y la descripcin de los tutoriales. Puesto que las marcas y los cdigos necesarios para ello se deben repetir para cada pgina Default.aspx, podemos concretar esta lgica de la interfaz de usuario en un control de usuario. Cree una carpeta denominada UserControls en el sitio web y agrguele un elemento nuevo del tipo Control de usuario web denominado SectionLevelTutorialListing.ascx; agregue tambin el marcado que se incluye a continuacin:

Figura 13. Adicin 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 declaracin; sin embargo, el control de usuario SectionLevelTutorialListing lo hace mediante programacin. En el controlador de eventos Page_Load, se hace una comprobacin para asegurarse de que esta es la primera visita a la pgina (no una 105

devolucin) y de que la URL de esta pgina est asignada a un nodo del mapa del sitio. Si dicho control de usuario se usa en una pgina que no se corresponde a una entrada <siteMapNode>, SiteMap.CurrentNode devolver null y no se enlazarn datos al Repeater. Si damos por hecho que tenemos un CurrentNode, debemos enlazar la coleccin ChildNodes a Repeater. Puesto que nuestro mapa del sitio est configurado de tal forma que la pgina Default.aspx de cada seccin es el nodo primario de todos los tutoriales de dicha seccin, este cdigo mostrar vnculos a todos los tutoriales de la seccin junto con las descripciones correspondientes, como se muestra en la captura de pantalla siguiente. Una vez que se ha creado este Repeater, abra las pginas Default.aspx de cada carpeta, vaya a la vista Diseo y arrastre el control de usuario en la superficie de diseo 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. Enumeracin de los tutoriales contenidos en Basic Reporting

Resumen
Con el mapa del sitio definido y la pgina principal completa, hemos conseguido una pgina con un diseo y un esquema de navegacin lgicos para los tutoriales relacionados con datos. Independientemente del nmero de pginas que agreguemos al sitio, el proceso de actualizacin del diseo de pgina de todo el sitio o de la informacin de navegacin es rpido y sencillo gracias a la centralizacin de la informacin. En concreto, la informacin de diseo de pgina se define en la pgina principal Site.master y el mapa del sitio en Web.sitemap. No necesitamos escribir ningn cdigo para obtener este diseo de pgina para todo el sitio y este mecanismo de navegacin y, adems, hemos conseguido en Visual Studio un diseo intuitivo donde vemos lo que hay. Despus de haber terminado las capas de acceso a datos y de lgica de negocios y de haber definido un diseo de pgina coherente y un mecanismo de navegacin del sitio, estamos preparados para empezar con los modelos de informe ms comunes. En los tres tutoriales siguientes analizaremos las tareas de elaboracin de informes bsicas, es decir, la visualizacin de datos recuperados de BLL en los controles GridView, DetailsView y FormView. Descargar el cdigo de ejemplo ASPNET_Data_Tutorial_3_CS.exe.

107

Bibliografa:
Curso: TECNOLOGIAS DE APLICACIONES WEB CON MICROSOFT VISUAL STUDIO 2005

108