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

  • Artigo

por Scott Mitchell

Baixar PDF

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: master páginas 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 ASP.NET páginas só precisam fornecer conteúdo para as regiões editáveis especificadas da página master, todas as outras marcações na página master são idênticas em todas as páginas ASP.NET que usam a página master. 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 que os desenvolvedores de página definam um mapa do 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, facilitando 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 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. Ao final deste tutorial, teremos um design de site aprimorado para criar nossas páginas da Web do tutorial.

O resultado final deste tutorial

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 master para o site. No momento, nosso site consiste apenas no Conjunto de Dados Tipado (Northwind.xsd, na pasta), nas App_Code classes BLL (ProductsBLL.vb, CategoriesBLL.vbe assim por diante, tudo na App_Code pasta), no banco de dados (NORTHWND.MDF, na pasta), no App_Data arquivo de configuração (Web.config) e em um arquivo de folha de estilos CSS (Styles.css). Limpei essas páginas e arquivos demonstrando o uso da 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 master, 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.mastercomo .

Adicionar uma nova página mestra ao site

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

Defina o layout de página em todo o site aqui na página master. Você pode usar o modo design e adicionar qualquer layout ou controles da Web necessários ou adicionar manualmente a marcação manualmente no modo de exibição Origem. Na minha página master uso folhas de estilos em cascata para posicionamento e estilos com as configurações de CSS definidas no arquivo Style.cssexterno . Embora você não possa dizer a partir da marcação mostrada abaixo, as regras CSS são definidas de modo que o conteúdo da navegação <div>esteja absolutamente posicionado para que ele apareça à 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 master define o layout de página estático e as regiões que podem ser editadas pelas páginas ASP.NET que usam a página master. 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 master tem um único ContentPlaceHolder (MainContent), mas master página pode ter vários ContentPlaceHolders.

Com a marcação inserida acima, alternar para o modo design mostra o layout da página master. Todas as páginas ASP.NET que usam essa página master terão esse layout uniforme, com a capacidade de especificar a marcação para a MainContent região.

A página mestra, quando exibida por meio do modo de exibição de design

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: Adicionar uma home page ao site

Com a página master definida, estamos prontos para adicionar as páginas de ASP.NET para o site. Vamos começar adicionando Default.aspx, a home page 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 Web Form na lista de modelos e nomeie o arquivo Default.aspx. Além disso, marcar caixa de seleção "Selecionar página master".

Adicionar um novo formulário da Web, marcando a caixa de seleção Selecionar página master

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

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

Escolha a Página Mestra que esta página ASP.NET deve usar

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

@Page Na diretiva , há uma referência ao arquivo de página master usado (MasterPageFile="~/Site.master") e a marcação da página ASP.NET contém um controle Content para cada um dos controles ContentPlaceHolder definidos na página master, com o controle mapeando ContentPlaceHolderID o controle Content para um ContentPlaceHolder específico. O controle Conteúdo é onde você coloca a marcação que deseja que apareça 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 da página ASP.NET, mesmo que o <title> elemento seja definido na página master. Também podemos definir o título programaticamente, usando Page.Title. Observe também que as referências da página master a folhas de estilos (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 está em relação à página master.

Alternando para o modo design, podemos ver como nossa página ficará em um navegador. Observe que no modo design da página ASP.NET que somente as regiões editáveis de conteúdo podem ser editadas, a marcação não ContentPlaceHolder definida na página master está esmaeçada.

O modo de exibição de design da página ASP.NET mostra as regiões editáveis e não editáveis

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 mecanismo de ASP.NET mescla automaticamente o conteúdo da página master página e o ASP. O conteúdo do NET e renderiza o conteúdo mesclado no HTML final que é enviado para o navegador solicitante. Quando o conteúdo da página master for atualizado, todas as páginas ASP.NET que usam essa página master terão seu conteúdo mesclado novamente com o novo conteúdo da página master na próxima vez que forem solicitados. Resumindo, o modelo de página master permite que um modelo de layout de página única seja definido (a página master) cujas alterações são refletidas imediatamente em todo o site.

Adicionando páginas de ASP.NET adicionais ao site

Vamos demorar um pouco para adicionar outros stubs de página ASP.NET ao site que, eventualmente, conterá as várias demonstrações de relatório. Haverá mais de 35 demonstrações no total, portanto, em vez de criar todas as páginas 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 marcar caixa de seleção "Selecionar master página".

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 de 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 navegáveis da interface do usuário, como menus ou trilhas. Por fim, todo esse processo precisa ser mantido e atualizado à medida que novas páginas são adicionadas ao site e as existentes são 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 navegáveis da interface do usuário. No entanto, com 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 do site e 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 é criado no modelo de provedor , ele pode ser estendido para dar 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 de site que armazena o mapa do site em um banco de dados SQL Server.

Para este tutorial, no entanto, vamos usar o provedor de mapa de site padrão fornecido com 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.

Adicionar um mapa do site ao seu projeto

Figura 9: Adicionar um mapa do site ao seu projeto (clique para exibir a 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 <siteMap> nó como seu nó raiz, que deve conter precisamente um <siteMapNode> elemento filho. 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 para cada uma <siteMapNode> das três pastas e elementos filho <siteMapNode> para cada uma das páginas ASP.NET nessas pastas, da seguinte forma:

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

O mapa do site representa uma estrutura de navegação hierárquica

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). CurrentNode As propriedades e RootNode retornam instâncias SiteMapNode, que têm propriedades como ParentNode, ChildNodes, NextSibling, PreviousSiblinge assim por diante, que permitem que a hierarquia do mapa do site seja andada.

Etapa 3: Exibindo um menu com base no 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 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 de 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 da fonte de dados, normalmente adicionaremos outro controle da Web à página e os associaremos ao controle da fonte de dados. Para associar um controle da Web a um controle de fonte de dados, basta definir a propriedade do controle da DataSourceID Web como o valor da propriedade do controle da ID fonte de dados.

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, TreeView e Menu, normalmente são usados para fornecer uma interface do usuário de navegação. Para associar 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 adequadamente. Por exemplo, poderíamos adicionar um controle Menu à página master 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 forma:

<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 por vez, começando com o nó do mapa do site raiz (Página Inicial, em nosso mapa do site), depois 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 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 as propriedades e Title de Url cada SiteMapNodeum para o controle HyperLink.

O exemplo de 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 do 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 siteMapDataSource ShowStartingNode está 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 dos relatórios básicos, filtragem de relatórios e formatação SiteMapNode personalizada, podemos adicionar outro Repetidor ao repetidor ItemTemplateinicial. Esse segundo Repetidor será associado à SiteMapNode propriedade da ChildNodes instância, 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 Repeaters resultam na seguinte marcação (algumas marcações foram removidas 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 de Rachel AndrewThe CSS Anthology: 101 Essential Tips, Tricks, & Hacks, os <ul> elementos e <li> são estilizados de modo 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

Esse menu está na página master e associado ao mapa do site definido em 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 master.

Desabilitando 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 por controles para lembrar seu estado alterado programaticamente entre 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 bloat de página severo 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 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 de exibição pode adicionar vários segundos à viagem de ida e volta para usuários de discagem.

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 (na 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 <div> elemento imediatamente após a marca de abertura <form> . O estado de exibição só é persistido quando há um Web Form sendo usado; se a página ASP.NET não incluir um <form runat="server"> em sua sintaxe declarativa, não haverá um __VIEWSTATE campo de formulário oculto na marcação renderizada.

O __VIEWSTATE campo de formulário gerado pela página master adiciona cerca de 1.800 bytes à marcação gerada pela página. Esse bloat extra deve-se principalmente ao controle Repeater, pois o conteúdo do controle SiteMapDataSource é persistido para exibir o estado. Embora 1.800 bytes extras possam não parecer muito animados, ao usar um GridView com muitos campos e registros, 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 da página ou do controle definindo a EnableViewState propriedade Falsecomo , 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. No ASP.NET versão 1.x, essa responsabilidade caiu sobre os ombros do desenvolvedor de páginas; com ASP.NET 2.0, no entanto, os controles da Web de dados serão reassociados 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 do janela Propriedades no Designer ou declarativamente na 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 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, 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 EnableViewState propriedade será definida False como e a fará sem menção. O único estado de exibição de tempo será discutido em cenários em que ele deve ser habilitado para que o controle da Web de dados forneça sua funcionalidade esperada.

Etapa 4: adicionando navegação de trilha

Para concluir a página master, 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 em ASP.NET 2.0 é fácil apenas adicionar um controle SiteMapPath à página; nenhum código é necessário.

Para 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" do nó do mapa do site, até a raiz (Página Inicial, no 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, para o Default.aspx na BasicReporting 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 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 da Web chamado SectionLevelTutorialListing.ascxe adicione a seguinte marcação:

Adicionar um novo controle de usuário da Web à pasta UserControls

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

SectionLevelTutorialListing.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, vinculamos os SiteMap dados ao Repetidor declarativamente; o SectionLevelTutorialListing Controle de Usuário, no entanto, faz isso programaticamente. Page_Load No manipulador de eventos, é feita uma marcar para garantir que a URL desta página seja 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, associaremos sua ChildNodes coleção ao Repeater. 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.

Depois que esse Repetidor tiver sido criado, abra as Default.aspx páginas em cada uma das pastas, vá para o modo design e simplesmente arraste o Controle de Usuário do Gerenciador de Soluções para a superfície design onde você deseja que a lista de tutoriais apareça.

O controle de usuário foi adicionado ao Default.aspx

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

Os Tutoriais básicos de relatórios estão listados

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

Resumo

Com o mapa do site definido e a página master 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 master e no mapa do site no Web.sitemap. Não precisamos escrever nenhum código para obter esse mecanismo de navegação e layout de página em todo o site e retivemos o 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 a navegação do 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.

Programação feliz!

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 do 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 contatado em mitchell@4GuysFromRolla.com. ou através de seu blog, que pode ser encontrado em http://ScottOnWriting.NET.

Agradecimentos Especiais

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? Nesse caso, deixe-me uma linha em mitchell@4GuysFromRolla.com.

Anterior