unidadno3 aspnet master page
TRANSCRIPT
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
78
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.
79
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:
80
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.
81
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.
82
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:
83
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:
84
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:
85
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
86
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
87
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.
88
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">
89
<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
90
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".
91
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:
92
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>
93
<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 non-ContentPlaceHolder 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
94
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.
95
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
96
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
97
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 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.
98
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/en-us/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
99
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:
100
<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>
101
</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
102
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.
103
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
104
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
105
<%@ 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
106
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
107
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.
108
Bibliografía: Curso: TECNOLOGIAS DE APLICACIONES WEB CON MICROSOFT VISUAL STUDIO 2005