Páginas Mestras e Navegação de Site (VB)

2025-04-30

Uma característica comum de sites amigáveis é que eles têm um esquema de navegação e layout de página consistentes em todo o site. Este tutorial analisa como você pode criar uma aparência consistente em todas as páginas que podem ser facilmente atualizadas.

Introdução

Uma característica comum de sites amigáveis é que eles têm um esquema de navegação e layout de página consistentes em todo o site. ASP.NET 2.0 apresenta dois novos recursos que simplificam muito a implementação de um layout de página em todo o site e um esquema de navegação: páginas mestras e navegação no site. As páginas mestras permitem que os desenvolvedores criem um modelo em todo o site com regiões editáveis designadas. Esse modelo pode ser aplicado a ASP.NET páginas no site. Essas páginas ASP.NET só precisam fornecer conteúdo para as regiões editáveis especificadas da página mestra, todas as outras marcações na página mestra são idênticas em todas as páginas ASP.NET que usam a página mestra. Esse modelo permite que os desenvolvedores definam e centralizem um layout de página em todo o site, facilitando a criação de uma aparência consistente em todas as páginas que podem ser facilmente atualizadas.

O sistema de navegação do site fornece um mecanismo para os desenvolvedores de página definirem um mapa de site e uma API para que o mapa do site seja consultado programaticamente. A nova Web de navegação controla o Menu, o TreeView e o SiteMapPath facilitam a renderização de todo ou parte do mapa do site em um elemento de interface do usuário de navegação comum. Usaremos o provedor de navegação de site padrão, o que significa que nosso mapa do site será definido em um arquivo formatado em XML.

Para ilustrar esses conceitos e tornar nosso site de tutoriais mais utilizável, vamos gastar esta lição definindo um layout de página em todo o site, implementando um mapa de site e adicionando a interface do usuário de navegação. Ao final deste tutorial, teremos um projeto de site refinado para construir nossas páginas tutoriais da Web.

Figura 1: O resultado final deste tutorial (clique para exibir a imagem em tamanho real)

Etapa 1: Criando a página mestra

A primeira etapa é criar a página mestra para o site. Neste momento, nosso site consiste apenas no Conjunto de Dados Tipado (Northwind.xsd, na App_Code pasta), nas classes BLL (ProductsBLL.vb, CategoriesBLL.vb e assim por diante, tudo na pasta App_Code), no banco de dados (NORTHWND.MDF, na App_Data pasta), no arquivo de configuração App_Data (Styles.css) e em um arquivo de folha de estilo CSS (). Limpei essas páginas e arquivos demonstrando o uso do DAL e da BLL dos dois primeiros tutoriais, pois vamos reexaminar esses exemplos com mais detalhes em tutoriais futuros.

Os arquivos em nosso projeto

Figura 2: Os arquivos em nosso projeto

Para criar uma página mestra, clique com o botão direito do mouse no nome do projeto no Gerenciador de Soluções e escolha Adicionar Novo Item. Em seguida, selecione o tipo página mestra na lista de modelos e nomeie-o Site.master.

Figura 3: Adicionar uma nova página mestra ao site (clique para exibir a imagem em tamanho real)

Defina o layout da página em todo o site aqui na página mestra. Você pode usar a exibição Design e adicionar qualquer layout ou controle Web necessário, ou adicionar a marcação manualmente no modo de exibição Origem. Na minha página mestra, uso folhas de estilo em cascata para posicionamento e estilos com as configurações de CSS definidas no arquivo Style.cssexterno. Embora você não possa perceber pela marcação mostrada abaixo, as regras CSS são definidas de forma que o conteúdo da navegação <div> esteja absolutamente posicionado para aparecer à esquerda e tenha uma largura fixa de 200 pixels.

Site.master

<%@ Master Language="VB" AutoEventWireup="true"
    CodeFile="Site.master.vb" Inherits="Site" %>

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

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

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">
                 TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent"
                  runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Uma página mestra define o layout da página estática e as regiões que podem ser editadas pelas páginas ASP.NET que usam a página mestra. Essas regiões editáveis de conteúdo são indicadas pelo controle ContentPlaceHolder, que pode ser visto dentro do conteúdo <div>. Nossa página mestra tem um único ContentPlaceHolder (MainContent), mas a página mestra pode ter vários ContentPlaceHolders.

Com a marcação inserida acima, alternar para o modo de design mostra o layout da página mestre. Quaisquer páginas ASP.NET que usem esta página mestra terão esse layout uniforme, com a capacidade de especificar a marcação para a região MainContent.

Figura 4: a página mestra, quando exibida por meio da exibição de design (clique para exibir a imagem em tamanho real)

Etapa 2: Adicionando uma home page ao site

Com a página mestra definida, estamos prontos para adicionar as páginas de ASP.NET para o site. Vamos começar adicionando Default.aspx à página inicial do nosso site. Clique com o botão direito do mouse no nome do projeto no Gerenciador de Soluções e escolha Adicionar Novo Item. Escolha a opção Formulário da Web na lista de modelos e nomeie o arquivo Default.aspx. Além disso, marque a caixa de seleção "Selecionar página mestra".

Figura 5: Adicionar um novo formulário da Web, verificando a caixa de seleção da página mestra (clique para exibir a imagem em tamanho real)

Depois de clicar no botão OK, nos pediram para escolher qual página mestra essa nova página ASP.NET deve usar. Embora você possa ter várias páginas mestras em seu projeto, temos apenas uma.

Figura 6: Escolha a página mestra que esta página ASP.NET deve usar (clique para exibir a imagem em tamanho real)

Depois de escolher a página mestra, as novas páginas de ASP.NET conterão a seguinte marcação:

Default.aspx

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

Na diretiva @Page, há uma referência ao arquivo de página mestra usado MasterPageFile="~/Site.master", e a marcação da página ASP.NET contém um Controle de Conteúdo para cada um dos controles ContentPlaceHolder definidos na página mestra, com o controle ContentPlaceHolderID mapeando o Controle de Conteúdo para um ContentPlaceHolder específico. O controle de conteúdo é onde você coloca a marcação que deseja exibir no ContentPlaceHolder correspondente. Defina o @Page atributo da Title diretiva como Página Inicial e adicione algum conteúdo de boas-vindas ao controle conteúdo:

Default.aspx

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

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

    <p>Over time, it will include a host of samples that
     demonstrate:</p>

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

O Title atributo na @Page diretiva nos permite definir o título da página a partir da página ASP.NET, mesmo que o <title> elemento seja definido na página mestra. Também podemos definir o título programaticamente, usando Page.Title. Observe também que as referências da página mestra a folhas de estilos (como Style.css) são atualizadas automaticamente para que funcionem em qualquer página ASP.NET, independentemente de qual diretório a página ASP.NET está em relação à página mestra.

Alternando para o modo design, podemos ver como nossa página ficará em um navegador. Observe que, na vista de design da página ASP.NET, somente as regiões editáveis de conteúdo são editáveis; a marcação que não faz parte dos ContentPlaceHolders definida na página mestra está esmaecida.

Figura 7: a exibição de design da página ASP.NET mostra as regiões editáveis e não editáveis (clique para exibir a imagem em tamanho real)

Quando a Default.aspx página é visitada por um navegador, o motor do ASP.NET combina automaticamente o conteúdo da página mestra e o conteúdo do ASP.NET, e renderiza o conteúdo combinado no HTML final que é enviado ao navegador solicitante. Quando o conteúdo da página mestra for atualizado, todas as páginas ASP.NET que usam essa página mestra terão seu conteúdo mesclado com o novo conteúdo da página mestra na próxima vez que forem solicitadas. Em suma, o modelo de página mestra permite que um modelo de layout de página única seja definido (a página mestra) cujas alterações são refletidas imediatamente em todo o site.

Adicionando páginas de ASP.NET adicionais ao site

Vamos dedicar um momento para adicionar marcadores de página adicionais ASP.NET ao site que, eventualmente, conterá as várias demonstrações de relatórios. Haverá mais de 35 demonstrações no total, portanto, em vez de criar todas as páginas de stub, vamos apenas criar as primeiras. Como também haverá muitas categorias de demonstrações, para gerenciar melhor as demonstrações, adicione uma pasta para as categorias. Adicione as três pastas a seguir por enquanto:

BasicReporting
Filtering
CustomFormatting

Por fim, adicione novos arquivos conforme mostrado no Gerenciador de Soluções na Figura 8. Ao adicionar cada arquivo, lembre-se de verificar a caixa de seleção "Selecionar página mestra".

Adicionar os seguintes arquivos

Figura 8: Adicionar os seguintes arquivos

Etapa 2: Criando um mapa de site

Um dos desafios de gerenciar um site composto por mais de um punhado de páginas é fornecer uma maneira simples para os visitantes navegarem pelo site. Para começar, a estrutura de navegação do site deve ser definida. Em seguida, essa estrutura deve ser convertida em elementos de interface do usuário navegáveis, como menus ou caminhos de navegação. Por fim, todo esse processo precisa ser mantido e atualizado à medida que novas páginas são adicionadas ao site e as existentes removidas. Antes do ASP.NET 2.0, os desenvolvedores estavam por conta própria para criar a estrutura de navegação do site, mantê-la e traduzi-la em elementos de interface do usuário navegáveis. No entanto, com o ASP.NET 2.0, os desenvolvedores podem utilizar o sistema de navegação interno muito flexível.

O sistema de navegação do site ASP.NET 2.0 fornece um meio para um desenvolvedor definir um mapa de site e acessar essas informações por meio de uma API programática. ASP.NET é fornecido com um provedor de mapa de site que espera que os dados do mapa do site sejam armazenados em um arquivo XML formatado de uma maneira específica. No entanto, como o sistema de navegação do site é criado no modelo de provedor , ele pode ser estendido para dar suporte a maneiras alternativas para serializar as informações do mapa do site. O artigo de Jeff Prosise, O Provedor de Mapa de Site do SQL que você estava esperando , mostra como criar um provedor de mapa de site que armazena o mapa do site em um banco de dados do SQL Server.

Para este tutorial, no entanto, vamos usar o provedor de mapa de site padrão fornecido com ASP.NET 2.0. Para criar o mapa do site, basta clicar com o botão direito do mouse no nome do projeto no Gerenciador de Soluções, escolher Adicionar Novo Item e escolher a opção Mapa do Site. Deixe o nome como Web.sitemap e clique no botão Adicionar.

Figura 9: Adicionar um mapa de site ao seu projeto (clique para exibir imagem em tamanho real)

O arquivo de mapa do site é um arquivo XML. Observe que o Visual Studio fornece o IntelliSense para a estrutura do mapa do site. O arquivo de mapa do site deve ter o nó <siteMap> como seu nó raiz, o qual deve conter exatamente um elemento filho <siteMapNode>. Esse primeiro <siteMapNode> elemento pode conter um número arbitrário de elementos descendentes <siteMapNode> .

Defina o mapa do site para imitar a estrutura do sistema de arquivos. ** Ou seja, adicione um elemento <siteMapNode> para cada uma das três pastas e um elemento filho <siteMapNode> correspondente a cada uma das páginas ASP.NET nessas pastas, da seguinte maneira:

Web.sitemap

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

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting"
        url="~/BasicReporting/Default.aspx"
        description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
          of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
          title="Declarative Parameters"
          description="Displays a subset of the contents
            of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
          programmatically." />
      </siteMapNode>

      <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
       description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
          title="Filter by Drop-Down List"
          description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
          title="Details of Selected Row"
          description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

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

  </siteMapNode>

</siteMap>

O mapa do site define a estrutura de navegação do site, que é uma hierarquia que descreve as várias seções do site. Cada elemento em <siteMapNode> representa uma seção na estrutura de navegação do site Web.sitemap.

Figura 10: o mapa do site representa uma estrutura de navegação hierárquica (clique para exibir a imagem em tamanho real)

ASP.NET expõe a estrutura do mapa do site por meio da classe SiteMap do .NET Framework. Essa classe tem uma CurrentNode propriedade, que retorna informações sobre a seção que o usuário está visitando no momento; a RootNode propriedade retorna a raiz do mapa do site (Página Inicial, em nosso mapa do site). As propriedades CurrentNode e RootNode retornam instâncias SiteMapNode, que têm propriedades como ParentNode, ChildNodes, NextSibling, PreviousSibling e assim por diante, permitindo a navegação pela hierarquia do mapa do site.

O acesso a dados no ASP.NET 2.0 pode ser feito programaticamente, como no ASP.NET 1.x ou declarativamente, por meio dos novos controles da fonte de dados. Há vários controles internos de fonte de dados, como o controle SqlDataSource, para acessar dados de banco de dados relacionais, o controle ObjectDataSource, para acessar dados de classes e outros. Você pode até mesmo criar seus próprios controles de fonte de dados personalizados.

Os controles da fonte de dados servem como um proxy entre a página ASP.NET e os dados subjacentes. Para exibir os dados recuperados de um controle de fonte de dados, normalmente adicionaremos outro controle Web à página e os associaremos ao controle da fonte de dados. Para associar um controle Web a um controle de fonte de dados, basta definir a propriedade do controle Web DataSourceID para o valor da propriedade do controle de fonte de dados ID.

Para ajudar a trabalhar com os dados do mapa do site, ASP.NET inclui o controle SiteMapDataSource, que nos permite associar um controle da Web ao mapa do site do nosso site. Dois controles da Web, o TreeView e o Menu, são comumente usados para fornecer uma interface de usuário para navegação. Para associar os dados do mapa do site a um desses dois controles, basta adicionar um SiteMapDataSource à página juntamente com um controle TreeView ou Menu cuja DataSourceID propriedade é definida adequadamente. Por exemplo, poderíamos adicionar um controle Menu à página mestra usando a seguinte marcação:

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

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

Para obter um grau mais fino de controle sobre o HTML emitido, podemos associar o controle SiteMapDataSource ao controle Repeater, da seguinte maneira:

<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>

O controle SiteMapDataSource retorna a hierarquia do mapa do site um nível de cada vez, começando com o nó do mapa do site raiz (Página Inicial, em nosso mapa do site), em seguida, o próximo nível (Relatórios Básicos, Relatórios de Filtragem e Formatação Personalizada) e assim por diante. Ao associar o SiteMapDataSource a um Repetidor, ele enumera o primeiro nível retornado e cria uma instância ItemTemplate para cada SiteMapNode instância nesse primeiro nível. Para acessar uma propriedade específica do SiteMapNode, podemos usar Eval(propertyName), que é como obtemos cada SiteMapNode's Url e Title propriedades para o controle HyperLink.

O exemplo do Repetidor acima renderizará a seguinte marcação:

<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>

Esses nós de mapa de site (Relatórios Básicos, Relatórios de Filtragem e Formatação Personalizada) compõem o segundo nível do mapa do site que está sendo renderizado, não o primeiro. Isso ocorre porque a propriedade do SiteMapDataSource ShowStartingNode está definida como False, fazendo com que o SiteMapDataSource ignore o nó raiz do mapa do site e, em vez disso, comece a retornar o segundo nível na hierarquia do mapa do site.

Para exibir as crianças no Relatório Básico, Relatórios Filtrados e Formatação Personalizada SiteMapNode, podemos adicionar outro Repetidor ao Repetidor ItemTemplate inicial. Este segundo Repetidor será associado à propriedade SiteMapNode da instância ChildNodes, da seguinte forma:

<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="<%# CType(Container.DataItem,
             SiteMapNode).ChildNodes %>">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

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

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

Esses dois Repetidores resultam na marcação a seguir (alguma marcação foi removida para fins de brevidade):

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

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

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

Usando estilos CSS escolhidos do livro Rachel Andrew, The CSS Anthology: 101 Essential Tips, Tricks & Hacks, os elementos e são estilizados de modo que a marcação produza a seguinte saída visual:

Um menu composto por dois repetidores e alguns CSS

Figura 11: Um menu composto por dois repetidores e alguns CSS

Esse menu está na página mestra e associado ao mapa do site definido Web.sitemap, o que significa que qualquer alteração no mapa do site será refletida imediatamente em todas as páginas que usam a Site.master página mestra.

Desabilitando ViewState

Todos os controles ASP.NET podem, opcionalmente, manter seu estado no estado de exibição, que é serializado como um campo de formulário oculto no HTML renderizado. O estado de exibição é usado por controles para lembrar seu estado alterado programaticamente em postbacks, como os dados associados a um controle da Web de dados. Embora o estado de exibição permita que as informações sejam lembradas entre postbacks, ele aumenta o tamanho da marcação que deve ser enviada ao cliente e pode levar a um inchaço da página severo se não for cuidadosamente monitorado. Os controles da Web de dados, especialmente o GridView, são particularmente notórios por adicionar dezenas de quilobytes extras de marcação a uma página. Embora esse aumento possa ser insignificante para usuários de banda larga ou intranet, o estado da exibição pode adicionar vários segundos à viagem de ida e volta para usuários de conexão discada.

Para ver o impacto do estado de exibição, visite uma página em um navegador e exiba a origem enviada pela página da Web (no Internet Explorer, vá para o menu Exibir e escolha a opção Origem). Você também pode ativar o rastreamento de página para ver a alocação de estado de exibição usada por cada um dos controles na página. As informações de estado de exibição são serializadas em um campo de formulário oculto chamado __VIEWSTATE, localizado em um elemento <div> imediatamente após a marca de abertura <form>. O estado de exibição só é mantido quando há um Web Form sendo usado; se sua página ASP.NET não incluir um <form runat="server"> em sua sintaxe declarativa, não haverá um campo de formulário oculto __VIEWSTATE na marcação renderizada.

O __VIEWSTATE campo de formulário gerado pela página mestra adiciona cerca de 1.800 bytes à marcação gerada pela página. Essa sobrecarga extra é causada principalmente pelo controle Repeater, pois o conteúdo do controle SiteMapDataSource é persistido no estado de exibição. Embora um adicional de 1.800 bytes possa não parecer muito significativo, ao usar um GridView com muitos campos e registros, o estado de visualização pode facilmente aumentar significativamente por um fator de 10 ou mais.

O estado de exibição pode ser desabilitado no nível de página ou controle definindo a EnableViewState propriedade como False, reduzindo assim o tamanho da marcação renderizada. Como o estado de exibição de um controle da Web de dados persiste os dados associados ao controle da Web de dados entre postbacks, ao desabilitar o estado de exibição de um controle da Web de dados, os dados devem ser associados a cada postback. Na versão 1.x do ASP.NET, essa responsabilidade recaía sobre o desenvolvedor de páginas; com o ASP.NET 2.0, no entanto, os controles de dados da Web se vinculam novamente ao controle da fonte de dados em cada postback, se necessário.

Para reduzir o estado de exibição da página, vamos definir a propriedade do EnableViewState controle Repeater como False. Isso pode ser feito por meio da janela Propriedades no Designer ou declarativamente no modo de exibição Origem. Depois de fazer essa alteração, a marcação declarativa do Repetidor deve ser semelhante a:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

Após essa alteração, o tamanho do estado da exibição renderizada da página diminuiu para apenas 52 bytes, uma economia de 97% no tamanho do estado de exibição! Nos tutoriais ao longo desta série, desabilitaremos o estado de exibição dos controles da Web de dados por padrão para reduzir o tamanho da marcação renderizada. Na maioria dos exemplos, a propriedade EnableViewState será configurada para False, sem que isso seja mencionado. O único estado de exibição de hora será discutido é em cenários em que ele deve ser habilitado para que o controle da Web de dados forneça sua funcionalidade esperada.

Para concluir a página mestra, vamos adicionar um elemento de interface do usuário de navegação de trilha a cada página. A trilha mostra rapidamente aos usuários sua posição atual dentro da hierarquia do site. Adicionar uma trilha de navegação no ASP.NET 2.0 é fácil: basta adicionar um controle SiteMapPath à página; nenhum código é necessário.

Para nosso site, adicione esse controle ao cabeçalho <div>:

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

A trilha mostra a página atual que o usuário está visitando na hierarquia do mapa do site, bem como os "ancestrais" do nó do mapa do site, até a raiz (Página Inicial, em nosso mapa do site).

A Trilha Exibe a Página Atual e seus Ancestrais na Hierarquia do Mapa do Site

Figura 12: A trilha exibe a página atual e seus ancestrais na hierarquia do mapa do site

Etapa 5: Adicionar a página padrão para cada seção

Os tutoriais em nosso site são divididos em diferentes categorias Relatórios Básicos, Filtragem, Formatação Personalizada e assim por diante com uma pasta para cada categoria e os tutoriais correspondentes como ASP.NET páginas dentro dessa pasta. Além disso, cada pasta contém uma Default.aspx página. Para esta página padrão, vamos exibir todos os tutoriais da seção atual. Ou seja, na pasta Default.aspxBasicReporting, teríamos links para SimpleDisplay.aspx, DeclarativeParams.aspx, e ProgrammaticParams.aspx. Aqui, novamente, podemos usar a SiteMap classe e um controle da Web de dados para exibir essas informações com base no mapa do site definido em Web.sitemap.

Vamos exibir uma lista não ordenada usando um Repetidor novamente, mas desta vez exibiremos o título e a descrição dos tutoriais. Como a marcação e o código para fazer isso precisarão ser repetidos para cada Default.aspx página, podemos encapsular essa lógica de interface do usuário em um Controle de Usuário. Crie uma pasta no site chamada UserControls e adicione a ela um novo item do tipo Controle de Usuário Web chamado SectionLevelTutorialListing.ascxe adicione a seguinte marcação:

Figura 13: Adicionar um novo controle de usuário da UserControls Web à pasta (clique para exibir a imagem em tamanho real)

SeçãoNívelTutorialListing.ascx

<%@ Control Language="VB" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.vb"
    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.vb

Partial Class UserControls_SectionLevelTutorialListing 
    Inherits UserControl

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If SiteMap.CurrentNode IsNot Nothing Then
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
            TutorialList.DataBind()
        End If
    End Sub
End Class

No exemplo anterior do Repetidor, associamos os SiteMap dados ao Repetidor declarativamente; o SectionLevelTutorialListing Controle de Usuário, no entanto, faz isso programaticamente. Page_Load No tratador de eventos, uma verificação é feita para garantir que a URL desta página esteja mapeada para um nó no mapa do site. Se esse Controle de Usuário for usado em uma página que não tenha uma entrada correspondente <siteMapNode> , SiteMap.CurrentNode retornará Nothing e nenhum dado será associado ao Repetidor. Supondo que tenhamos um CurrentNode, associamos sua ChildNodes coleção ao Repetidor. Como nosso mapa do site está configurado de modo que a Default.aspx página em cada seção seja o nó pai de todos os tutoriais nessa seção, esse código exibirá links e descrições de todos os tutoriais da seção, conforme mostrado na captura de tela abaixo.

Após a criação deste Repetidor, abra as Default.aspx páginas em cada uma das pastas, vá para o modo Design e arraste o Controle de Usuário do Gerenciador de Soluções para a superfície de Design, na qual você deseja que a lista de tutoriais apareça.

Figura 14: O controle de usuário foi adicionado Default.aspx (clique para exibir a imagem em tamanho real)

Figura 15: Os Tutoriais básicos de relatório estão listados (clique para exibir a imagem em tamanho real)

Resumo

Com o mapa do site definido e a página mestra concluída, agora temos um esquema de navegação e layout de página consistente para nossos tutoriais relacionados a dados. Independentemente de quantas páginas adicionamos ao nosso site, atualizar o layout de página em todo o site ou as informações de navegação do site é um processo rápido e simples devido a essas informações serem centralizadas. Especificamente, as informações de layout de página são definidas na página Site.master mestra e no mapa do site em Web.sitemap. Não precisamos escrever nenhum código para alcançar esse mecanismo de navegação e layout de página em todo o site, e mantemos suporte completo ao designer WYSIWYG no Visual Studio.

Depois de concluir a Camada de Acesso a Dados e a Camada Lógica de Negócios e ter um layout de página consistente e navegação de site definidos, estamos prontos para começar a explorar padrões comuns de relatórios. Nos próximos três tutoriais, examinaremos as tarefas básicas de relatório que exibem os dados recuperados da BLL nos controles GridView, DetailsView e FormView.

Divirta-se programando!

Leitura Adicional

Para obter mais informações sobre os tópicos discutidos neste tutorial, consulte os seguintes recursos:

Sobre o autor

Scott Mitchell, autor de sete livros asp/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 2.0 em 24 Horas. Ele pode ser alcançado em mitchell@4GuysFromRolla.com.

Agradecimentos Especiais a

Esta série de tutoriais foi revisada por muitos revisores úteis. Os principais revisores deste tutorial foram Liz Shulok, Dennis Patterson e Hilton Giesenow. Interessado em revisar meus próximos artigos do MSDN? Se assim for, deixe-me uma linha em mitchell@4GuysFromRolla.com.

Compartilhar via

Páginas mestras e navegação no site (VB)