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

Uma característica comum dos sites de fácil utilização é que eles têm um layout de página e esquema de navegação 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 dos sites de fácil utilização é que eles têm um layout de página e esquema de navegação consistentes em todo o site. ASP.NET 2.0 introduz dois novos recursos que simplificam muito a implementação de um layout de página em todo o site e 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. Este modelo pode então ser aplicado a ASP.NET páginas no site. Essas páginas ASP.NET precisam apenas 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 assim 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áginas definirem um mapa do site e uma API para que esse mapa do site seja consultado programaticamente. Os novos controles de navegação da Web Menu, TreeView e SiteMapPath facilitam a renderização total ou parcial do mapa do site em um elemento comum da interface do usuário de navegação. Usaremos o provedor de navegação do 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 passar esta lição definindo um layout de página em todo o site, implementando um mapa do site e adicionando a interface do usuário de navegação. No final deste tutorial, teremos um design de site polido para construir nossas páginas web tutoriais.

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

Etapa 1: Criando a página mestra

O primeiro passo é criar a página mestra para o site. No momento, o nosso site consiste apenas no DataSet Tipado (Northwind.xsd, na pasta App_Code), nas classes BLL (ProductsBLL.cs, CategoriesBLL.cs, e assim por diante, todas na pasta App_Code), na base de dados (NORTHWND.MDF, na pasta App_Data), no ficheiro de configuração (Web.config) e num ficheiro de folha de estilo CSS (Styles.css). Eu limpei essas páginas e arquivos demonstrando o uso do DAL e BLL dos dois primeiros tutoriais, pois estaremos reexaminando 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 de Página Mestra na lista de modelos e nomeie-o.Site.master

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

Defina o layout de página em todo o site aqui na página mestra. Você pode usar o modo Design e adicionar qualquer controle de layout ou da Web que precisar, ou pode adicionar a marcação manualmente no modo Código-fonte. Na minha página mestra utilizo folhas de estilo em cascata para posicionamento e estilos com as configurações CSS definidas no arquivo Style.cssexterno. Embora você não possa distinguir a partir da marcação mostrada abaixo, as regras CSS são definidas de modo que o conteúdo da navegação <div>é absolutamente posicionado de modo que ele aparece à esquerda e tem uma largura fixa de 200 pixels.

Sítio.mestre

<%@ Master Language="C#" AutoEventWireup="true"
    CodeFile="Site.master.cs" Inherits="Site" %>

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

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

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

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

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

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

Uma página mestra define o layout de página estática e as regiões que podem ser editadas pelas ASP.NET páginas 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, mudar para a vista Design mostra o layout da página principal. Todas as páginas ASP.NET que usam essa página mestra terão esse layout uniforme, com a capacidade de especificar a marcação para a MainContent região.

Figura 4: A página mestra, quando visualizada através da visualização Design (Clique para visualizar a imagem em tamanho real)

Etapa 2: Adicionando uma página inicial ao site

Com a página mestra definida, estamos prontos para adicionar as páginas ASP.NET para o site. Vamos começar adicionando Default.aspx, a 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, marcando a caixa de seleção Selecionar página mestra (Clique para visualizar a imagem em tamanho real)

Depois de clicar no botão OK, somos solicitados a 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 visualizar a imagem em tamanho real)

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

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>

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

Default.aspx

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

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

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

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

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 esteja 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 estilo (como Style.css) são atualizadas automaticamente para que funcionem em qualquer página ASP.NET, independentemente do diretório em que a página ASP.NET esteja em relação à página mestra.

Mudando para a visualização Design, podemos ver como nossa página ficará em um navegador. Observe que, no modo Design da página ASP.NET, apenas as regiões de conteúdo editáveis são alteráveis, enquanto a marcação que não faz parte do ContentPlaceHolder e está definida na página mestra fica acinzentada.

Figura 7: A visualização Design da página ASP.NET mostra as regiões editáveis e não editáveis (Clique para visualizar a imagem em tamanho real)

Quando a Default.aspx página é visitada por um navegador, o motor do ASP.NET mescla automaticamente o conteúdo da página mestra e o conteúdo do ASP.NET, e renderiza o conteúdo mesclado no HTML final que é enviado para o navegador solicitante. Quando o conteúdo da página mestra é atualizado, todas as páginas ASP.NET que usam essa página mestra terão seu conteúdo ressurgido com o novo conteúdo da página mestra na próxima vez que forem solicitadas. Em resumo, 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 imediatamente refletidas em todo o site.

Adicionar páginas de ASP.NET adicionais ao site

Vamos reservar um momento para adicionar mais esboços de página ao site em ASP.NET, que futuramente abrigará as várias demonstrações de relatórios. Haverá mais de 35 demonstrações no total, então em vez de criar todas as páginas de esboço, 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. Por enquanto, adicione as três pastas a seguir:

BasicReporting
Filtering
CustomFormatting

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

Adicione os seguintes ficheiros

Figura 8: Adicionar os seguintes arquivos

Etapa 2: Criando um mapa do 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 traduzida em elementos navegáveis da interface do usuário, como menus ou trilhas de navegação. Finalmente, 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. Com o ASP.NET 2.0, no entanto, os desenvolvedores podem utilizar o sistema de navegação de site integrado muito flexível.

O sistema de navegação de site ASP.NET 2.0 fornece um meio para um desenvolvedor definir um mapa do site e, em seguida, acessar essas informações por meio de uma API programática. ASP.NET é fornecido com um provedor de mapa do site que espera que os dados do mapa do site sejam armazenados em um arquivo XML formatado de uma maneira específica. Mas, como o sistema de navegação do site é construído no modelo de provedor , ele pode ser estendido para oferecer suporte a maneiras alternativas de serializar as informações do mapa do site. O artigo de Jeff Prosise, The SQL Site Map Provider You've Been Waiting For mostra como criar um provedor de mapa do site que armazena o mapa do site em um banco de dados do SQL Server; Outra opção é criar um provedor de mapa do site com base na estrutura do sistema de arquivos.

Para este tutorial, no entanto, vamos usar o provedor de mapa do site padrão que acompanha o 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 do site ao seu projeto (Clique para visualizar a imagem em tamanho real)

O arquivo de mapa do site é um arquivo XML. Observe que o Visual Studio fornece IntelliSense para a estrutura do mapa do site. O arquivo de mapa do site deve ter o <siteMap> nó como seu nó raiz, que deve conter precisamente um <siteMapNode> elemento filho. Esse primeiro <siteMapNode> elemento pode então 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 elementos filho <siteMapNode> para cada uma das páginas ASP.NET nessas pastas, assim:

Web.mapa do site

<?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 <siteMapNode> elemento em Web.sitemap representa uma seção na estrutura de navegação do site.

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

ASP.NET expõe a estrutura do mapa do site por meio da classe SiteMap do .NET Framework. Esta 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 (Home, em nosso mapa do site). As propriedades CurrentNode e RootNode retornam instâncias de SiteMapNode, que têm propriedades como ParentNode, ChildNodes, NextSibling, PreviousSibling, e assim por diante, permitindo percorrer a hierarquia do mapa do site.

O acesso aos dados no ASP.NET 2.0 pode ser realizado programaticamente, como no ASP.NET 1.x, ou declarativamente, por meio dos novos controles de fonte de dados. Há vários controles de fonte de dados internos, como o controle SqlDataSource, para acessar dados de banco de dados relacional, 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 sua página ASP.NET e os dados subjacentes. Para exibir os dados recuperados de um controle de fonte de dados, normalmente adicionaremos outro controle da Web à página e o vincularemos ao controle da fonte de dados. Para vincular um controle da Web a um controle da fonte de dados, basta definir a propriedade do controle da DataSourceID Web como o valor da propriedade do controle ID da fonte de dados.

Para ajudar a trabalhar com os dados do mapa do site, ASP.NET inclui o controle SiteMapDataSource, que nos permite vincular um controle da Web ao mapa do site do nosso site. Dois controles da Web, TreeView e Menu, são comumente usados para fornecer uma interface de usuário de navegação. Para vincular os dados do mapa do site a um desses dois controles, basta adicionar um SiteMapDataSource à página junto com um controle TreeView ou Menu cuja DataSourceID propriedade é definida de acordo. Por exemplo, podemos 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 vincular o controle SiteMapDataSource ao controle Repeater, assim:

<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 (Home, em nosso mapa do site), depois o próximo nível (Relatórios Básicos, Filtragem de Relatórios e Formatação Personalizada) e assim por diante. Ao vincular o SiteMapDataSource a um Repeater, ele enumera o primeiro nível retornado e instancia o 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 de Repeater 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 do mapa do site (Relatórios Básicos, Relatórios de Filtragem e Formatação Personalizada) compreendem o segundo nível do mapa do site que está sendo renderizado, não o primeiro. Isso ocorre porque a propriedade SiteMapDataSource ShowStartingNode é definida como False, fazendo com que o SiteMapDataSource ignore o nó do mapa do site raiz e, em vez disso, comece retornando o segundo nível na hierarquia do mapa do site.

Para exibir os filhos para os Relatórios Básicos, Relatórios de Filtragem e Formatações PersonalizadasSiteMapNode, podemos adicionar outro Repetidor ao Repetidor inicial.ItemTemplate Este segundo Repetidor será vinculado à propriedade SiteMapNode da instância ChildNodes, assim:

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

            <asp:Repeater runat="server"
                DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

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

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

Estes dois repetidores resultam na seguinte marcação HTML (alguma marcação foi removida para maior 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 de Rachel Andrew The CSS Anthology: 101 Essential Tips, Tricks, & Hacks, os <ul> elementos e <li> são estilizados de tal forma que a marcação produz 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

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

Desativar ViewState

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

Para ver o impacto do estado de exibição, visite uma página em um navegador e, em seguida, exiba a fonte 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 do estado de vista são serializadas em um campo de formulário oculto chamado __VIEWSTATE, localizado em um elemento <div> imediatamente após a tag de abertura <form>. O estado de visualização só é persistido quando há um formulário da Web a ser usado; se a sua página ASP.NET não incluir um <form runat="server"> na 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 aproximadamente 1.800 bytes à marcação gerada pela página. Esse inchaço extra é devido principalmente ao controle Repeater, pois o conteúdo do controle SiteMapDataSource é persistido no estado de exibição. Embora 1.800 bytes extras possam não parecer significativos, ao usar um GridView com muitos campos e registos, o estado de exibição pode facilmente aumentar 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 visualização de um controle da Web de dados persiste os dados vinculados ao controle da Web de dados entre postbacks, ao desabilitar o estado de visualização de um controle da Web de dados, os dados devem ser vinculados em cada postback. Na versão 1.x do ASP.NET, essa responsabilidade era do desenvolvedor da página. No entanto, com o ASP.NET 2.0, os controlos de dados da Web são automaticamente associados novamente ao controlo 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 através da janela Propriedades no Designer ou declarativamente na visualização Código-fonte. Depois de fazer essa alteração, a marcação declarativa do repetidor deve ter a seguinte aparência:

<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 de exibição renderizado 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, desativaremos o estado de exibição dos controles da Web de dados por padrão, a fim de reduzir o tamanho da marcação renderizada. Na maioria dos exemplos, a propriedade EnableViewState será definida para false e feita sem menção. O único estado de exibição de tempo que 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 da interface de utilizador de trilhas de navegação a cada página. A trilha mostra rapidamente aos usuários sua posição atual na hierarquia do site. Adicionar uma trilha no ASP.NET 2.0 é fácil basta adicionar um controle SiteMapPath à página; nenhum código é necessário.

Para o nosso site, adicione este 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" desse nó do mapa do site, até a raiz (Home, em nosso mapa do site).

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

Figura 12: O caminho de navegação mostra a página atual e os seus antecessores na hierarquia do mapa do site

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

Os tutoriais no nosso site web são divididos em várias categorias, como relatórios básicos, filtragem, formatação personalizada e assim por diante, com uma pasta para cada categoria e os tutoriais correspondentes como páginas ASP.NET 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, para a Default.aspxBasicReporting pasta teríamos links para SimpleDisplay.aspx, DeclarativeParams.aspxe 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 da 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 da Web chamado SectionLevelTutorialListing.ascx, e adicione a seguinte marcação:

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

SectionLevelTutorialListing.ascx

<%@ Control Language="CS" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.cs"
    Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server"
         NavigateUrl='<%# Eval("Url") %>'
         Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null,
        // bind CurrentNode ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

No exemplo anterior de Repeater, vinculámos os dados ao Repeater de forma declarativa; o controlo de Utilizador, no entanto, realiza-o programaticamente. No manipulador de eventos Page_Load, realiza-se uma verificação para garantir que o URL desta página seja mapeado 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á null e nenhum dado será vinculado ao Repetidor. Supondo que temos um CurrentNode, vinculamos sua ChildNodes coleção ao Repetidor. Como nosso mapa do site está configurado de forma que a Default.aspx página em cada seção seja o nó pai de todos os tutoriais dentro dessa seção, esse código exibirá links e descrições de todos os tutoriais da seção, conforme mostrado na captura de tela abaixo.

Depois de o Repeater ter sido criado, abra as Default.aspx páginas em cada uma das pastas, vá para o modo de design e simplesmente arraste o controlo de utilizador do Explorador de Soluções para a superfície de design onde deseja que a lista de tutoriais apareça.

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

Figura 15: Os tutoriais básicos de relatórios estão listados (Clique para visualizar a imagem em tamanho real)

Resumo

Com o mapa do site definido e a página mestra concluída, agora temos um layout de página consistente e um esquema de navegação para nossos tutoriais relacionados a dados. Independentemente de quantas páginas adicionamos ao nosso site, atualizar o layout da 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 precisávamos escrever nenhum código para obter esse layout de página e mecanismo de navegação em todo o site, e mantemos suporte total ao designer WYSIWYG no Visual Studio.

Tendo concluído a Camada de Acesso a Dados e a Camada de Lógica de Negócios e tendo um layout de página consistente e navegação no 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 dados recuperados da BLL nos controles GridView, DetailsView e FormView.

Feliz Programação!

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 sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.

Um agradecimento especial 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 rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

Anterior Próximo

Comentários

Esta página foi útil?

Last updated on 2025-04-30