Mapa do site ASP.NET 2.0 cria estrutura de navegação do site

Autor：Eve Cole Data da Última Atualização：2009-06-30 16:47:46

Se você já viajou para um destino desconhecido, sabe a importância dos mapas – eles podem ajudar a tornar sua viagem mais confortável. O mesmo princípio se aplica a sites. Um site deve apresentar aos visitantes uma estrutura de navegação simples, mas flexível, para que possam navegar facilmente para diferentes partes do site. O ASP.NET 2.0 fornece um recurso chamado SiteMap que ajuda você a obter essa funcionalidade. Este artigo explicará o que são sitemaps e descreverá como desenvolver uma estrutura de navegação de site que os utilize.

1. Mapa do Site

Um sitemap é um arquivo XML (com extensão .sitemap) que descreve em detalhes todo o layout de navegação do seu site. Você pode usar arquivos de mapa do site para atender a todos os seus requisitos.

Um exemplo ajudará a explicar os arquivos do mapa do site. A Figura 1 mostra a estrutura de diretórios de um site de exemplo.

Figura 1: Estrutura do site

Na figura, a página inicial (Default.aspx) e a página Fale Conosco (contact.aspx) estão localizadas na pasta raiz do site. Existem também duas subpastas chamadas Produtos e Serviços. Existem dois formulários da Web em cada subpasta: correspondentes a Product1.aspx e Product2.aspx e Service1.aspx e Service2.aspx.

Agora, basta seguir estas etapas e você poderá usar um mapa do site para descrever a estrutura do seu site:

1. Crie um novo site usando VS.NET 2005.

2. Clique com o botão direito no site e selecione "Adicionar novo item...".

3. Selecione Mapa do Site na caixa de diálogo "Adicionar Novo Item..." (veja a Figura 2) e nomeie-o como Web.sitemap.

Figura 2: Adicionando um novo mapa do site

Digite a seguinte marcação XML no arquivo web.sitemap:

＜?xml versão="1.0" codificação="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Home" description="Meu site"＞
＜siteMapNode url="~/products/default.aspx" title="Produtos"＞
＜siteMapNode url="~/products/product1.aspx" title="Primeiro Produto" /＞
＜siteMapNode url="~/products/product2.aspx" title="Segundo produto" /＞
＜/siteMapNode＞
＜siteMapNode url="~/services/default.aspx" title="Serviços"＞
＜siteMapNode url="~/services/service1.aspx" title="Primeiro serviço" /＞
＜siteMapNode url="~/services/service2.aspx" title="Segundo serviço" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Fale Conosco" /＞
＜/siteMapNode＞
＜/siteMap＞

A raiz do arquivo do mapa do site é siteMap. Ele contém um nó siteMapNode e, dependendo da estrutura do seu site, pode conter vários nós siteMapNode.

Esta tag siteMapNode possui quatro atributos importantes (consulte a Tabela 1).

O título

da descrição	da propriedade
exibe	o título da página. Esta propriedade é frequentemente usada por controles de navegação para exibir o título da URL.
url	exibe o URL da página descrita por este nó.
description	especifica uma descrição sobre esta página. Você pode usar esta descrição para exibir o conteúdo do prompt.
funções	Ao usar o corte de segurança (discutido posteriormente), esse atributo especifica as funções que têm permissão para acessar esta página.

Tabela 1: Atributos importantes da tag

Isso forma o seu mapa do site. Agora você pode usá-lo para fins de navegação.
2. Como usar o SiteMap

Você pode usar o arquivo de mapa do site criado na seção anterior de três maneiras comuns:

· Usando o controle SiteMapPath

· Usando o controle de fonte de dados SiteMap

· Usando a classe SiteMap

O controle SiteMapPath permite gerar trilhas de navegação. A Figura 3 mostra o que é breadcrumb.

Figura 3: Navegação estrutural

O controle SiteMapPath exibe vários níveis de navegação. Por exemplo, você pode clicar no nível pai ou raiz para voltar ou ir para o nível superior. Claro, você também pode personalizar a hierarquia de navegação.

O ASP.NET 2.0 também vem com um bom conjunto de controles de navegação, incluindo TreeView e menus. Com o controle de fonte de dados SiteMap, você pode vincular arquivos de mapa do site a esses controles.

Em alguns casos, os controles de navegação integrados podem não atender aos seus requisitos. Nesse caso, você pode acessar programaticamente o arquivo do mapa do site e ler os vários nós siteMapNode. Você pode então gerar uma estrutura de navegação personalizada usando o título e as propriedades de URL do siteMapNode.

3. Use o controle SiteMapPath

Antes de entrar em detalhes, vamos primeiro criar a estrutura de diretórios e o formulário web que precisamos. Primeiro, adicione duas pastas, Produtos e Serviços, ao site. Em seguida, adicione uma nova página mestra MasterPage.master. Em seguida, adicione os formulários da Web mostrados na Tabela 2 e certifique-se de definir a página mestra para eles ao adicioná-los.

Pasta	de nome do formulário da Web
Default.aspx	Raiz do site
Contact.aspx	Raiz do site
Default.aspx	Produtos
Produto1.aspx	Produtos
Produto2.aspx	Produtos
Default.aspx	Serviços
Service1.aspx	Serviços
Service2.aspx	Serviços

Tabela 2: Lista de formulários da Web

Agora, abra a página mestra que você adicionou anteriormente. Arraste um controle Label e um controle SiteMapPath para ele. Em seguida, defina a propriedade Text do Label como "Welcome!".

A lista a seguir mostra todas as tags na página MasterPage.master:

＜%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="servidor"＞
＜title＞Página sem título＜/title＞
＜/cabeça＞

＜form id="form1" runat="servidor"＞

＜asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Blue" Text="Bem-vindo!"＞＜/asp:Label＞＜br /＞
Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : "＞
＜PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜CurrentNodeStyle ForeColor="#333333" /＞
＜NodeStyle Font-Bold="True" ForeColor="#7C6F57" /＞
＜RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜/asp:SiteMapPath＞
＜br /＞
＜br /＞

＜/asp:contentplaceholder＞

＜/formulário＞
＜/corpo＞
＜/html＞

Agora, abra Default.aspx na pasta raiz. Default.aspx deve ser semelhante à Figura 4.

Figura 4: Exemplo de execução de Default.aspx

Para projetar esta página, adicione uma tabela com 4 linhas e 1 coluna. Arraste um controle Label para a linha superior e defina sua propriedade Text como "Bem-vindo ao nosso site!". Em seguida, arraste os três controles HyperLink para as linhas restantes e defina suas propriedades Text e NavigateUrl, conforme mostrado na Tabela 3.

HyperLink ID	Propriedade de texto Propriedade	NavigateUrl
HyperLink1	Produtos	~/products/default.aspx
HyperLink2	Serviços	~/Services/default.aspx
HyperLink3	Contate-nos	~/contact.aspxTabela

3: Configurando as propriedades de HyperLinks

A lista a seguir mostra a marcação completa em Default.aspx:

＜%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup = "true" CodeFile = "Default.aspx.cs"
Inherits="_Default" Title="Página sem título" %＞
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Servidor">
＜centro＞

＜tr＞
＜largura td="60%"＞
Text="Bem-vindo ao nosso site!"＞＜/asp:Label＞＜/td＞
＜/tr＞
＜tr＞
＜largura td="60%"＞
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">Produtos
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜tr＞
＜largura td="60%"＞
NavigateUrl="~/Services/Default.aspx">Serviços
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜tr＞
＜largura td="60%"＞
Font-Size="X-Large" NavigateUrl="~/Contact.aspx">Entre em contato conosco
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜/tabela＞
＜/centro＞
＜/asp:Conteúdo＞

Agora, abra Default.aspx na pasta Products e projete-o conforme mostrado na Figura 5.

Figura 5: Página padrão da pasta Produtos

A Tabela 4 lista todos os hiperlinks usados em formulários da Web.

ID do hiperlink Propriedade	de texto Propriedade	NavigateUrl
HyperLink1	Primeiro produto	~/products/product1.aspx
HyperLink2	Segundo produto	~/products/product2.aspx

Tabela 4: Informações de hiperlink na página Padrão na pasta Produtos

Seguindo o mesmo princípio, projete Default.aspx na pasta Services e o resultado é mostrado na Figura 6.

Figura 6. Página padrão da pasta Serviços

A Tabela 5 lista as informações de hiperlink usadas em formulários da Web.

HyperLink ID	Propriedade de texto Propriedade	NavigateUrl
HyperLink1	Primeiro serviço	~/Services/service1.aspx
HyperLink2	Segundo serviço	~/Services/service2.aspx

Tabela 5: Informações de hiperlink na página Padrão na pasta Produtos

Por fim, adicione uma tag a cada outro formulário da Web e defina sua propriedade Text conforme mostrado na Tabela 6.

Rótulo Formulário 6

Atributo de texto do	nome do formulário da Web
~/Contact.aspx	Entre em contato conosco
~/Products/Product1.aspx	Detalhes do primeiro produto
~/Products/Product2.aspx	Detalhes do segundo produto
~/Services/Service1.aspx	Detalhes do primeiro serviço
~/Services/Service2. aspx	de detalhes do segundo serviço

: definindo a propriedade Text do Label do formulário da web restante

Agora, execute Default.aspx na pasta raiz e navegue até a página Product1.aspx. A Figura 7 mostra um exemplo de execução do formulário da web.

Figura 7: Exemplo de execução de Product1.aspx

Observe como os atributos de título e URL do arquivo web.sitemap são usados para gerar "breadcrumbs". Além disso, observe como o pai é exibido junto com o título da página atual. Tente navegar para várias páginas e observar o controle SiteMapPath.

4. Use o controle de fonte de dados do SiteMap

O uso de mapas de sites não está limitado ao controle SiteMapPath. Você também pode anexar um mapa do site a um controle navegável (como um TreeView). No exemplo a seguir, você usará o mesmo arquivo de mapa do site para implementar a associação a um controle TreeView.

Adicione um novo formulário da Web SiteMapDataSourceDemo.aspx ao site. Em seguida, arraste um controle de fonte de dados SiteMap (SiteMapDataSource1) e um controle TreeView (TreeView1) para o formulário. Defina a propriedade DataSourceID deste controle TreeView como SiteMapDataSource1. Além disso, defina a propriedade ShowLines do controle TreeView como true. Aqui está a marcação completa da página SiteMapDataSourceDemo.aspx:

＜%@ Idioma da página = "C#" AutoEventWireup = "true"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Herda =SiteMapDataSourceDemo" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="servidor"＞
＜title＞Página sem título＜/title＞
＜/cabeça＞

＜form id="form1" runat="servidor"＞
ShowLines="Verdadeiro"＞
＜asp:SiteMapDataSource ID="SiteMapDataSource1" runat="servidor" /＞
＜/formulário＞
＜/corpo＞
＜/html＞

Agora, execute o formulário da Web para ver como a mesma estrutura de navegação é gerada automaticamente no TreeView (veja a Figura 8).

Figura 8: Vinculando o arquivo de mapa do site a um controle TreeView

5. Use a classe SiteMap

Exibir dados de mapa do site em um controle SiteMapPath ou TreeView funciona muito bem. No entanto, às vezes pode ser necessário projetar uma lógica de geração personalizada. Por exemplo, talvez você queira desenvolver um controle de navegação personalizado que exiba seu pai apenas verticalmente. Nesse caso, você precisa acessar o arquivo do mapa do site programaticamente. A classe SiteMap permite que você consiga exatamente isso.

Este caminho do SiteMap possui duas propriedades importantes: RootNode e CurrentNode. Seus tipos são todos SiteMapNode e ambos permitem fazer referência ao nó raiz e ao nó atual do mapa do site, respectivamente. A Tabela 7 lista algumas propriedades importantes da classe SiteMapNode.

Descrição	da propriedade
ChildNodes	representa a coleção de todos os nós filhos do nó atual
HasChildNodes	indica se o nó do mapa do site possui nós filhos (verdadeiro/falso)
Title	retorna o valor do atributo title especificado no arquivo de mapa do site
Url	retorna no arquivo de mapa do site O valor do atributo url especificado
Description	retorna o valor do atributo description especificado no arquivo de mapa do site
ParentNode	indica a referência do nó pai do mapa do site do nó atual

Tabela 7: Alguns atributos importantes da classe SiteMapNode

O exemplo a seguir usa um caminho SiteMap para acessar um único nó de um arquivo de sitemap. Em seguida, adicione-os programaticamente a um controle TreeView.

Adicione um formulário da web chamado SiteMapCustom.aspx. Em seguida, arraste um controle TreeView para ele. Adicione o código de listagem ao evento Page_Load deste formulário da web:

protegido void Page_Load (remetente do objeto, EventArgs e)
{
contagem interna = SiteMap.RootNode.ChildNodes.Count;
for (int i = 0; i < contagem; i++)
{
SiteMapNode smNode=SiteMap.RootNode.ChildNodes[i];
TreeNode tvNode = new TreeNode(smNode.Title, "", "", smNode.Url, "");
TreeView1.Nodes.Add(tvNode);
se (smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
for (int j = 0; j < childCount; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = novo TreeNode(smChildNode.Title,
"", "",
smChildNode.Url, "");
tvNode.ChildNodes.Add(tvChildNode);
}
}
}
}

Aqui, você primeiro obtém o número total de nós filhos no nó raiz. Em seguida, você percorre a coleção ChildNodes do nó raiz. Em cada iteração, você cria uma nova instância da classe TreeNode e especifica seu título e URL em seu construtor. Em seguida, você adiciona este TreeNode à coleção Nodes do TreeView. Em seguida, você verifica se o SiteMapNode atual possui algum nó filho. Se houver, você percorre-o e repete o processo de criação do TreeNode. Observe que desta vez você adiciona os novos TreeNodes à coleção ChildNodes do objeto TreeNode atual.

Observe que você usa 2 no loop porque sabe que existem apenas dois níveis de aninhamento. Para tornar sua lógica mais geral, você pode usar a recursão para preencher o TreeView.

Execute o formulário da web e você verá algo semelhante à Figura 8 novamente.

6. Use manutenção de segurança

Freqüentemente, os sites implementam um modelo de segurança baseado em funções. Por exemplo, você pode ter funções diferentes em seu aplicativo, como administrador de sistema, testador de produto e testador de serviço. Em situações como essa, muitas vezes você precisa controlar os links de navegação do site exibidos aos usuários. Por exemplo, se o usuário atualmente conectado tiver a função de testador de produto, talvez você queira exibir apenas links relacionados ao produto e ocultar quaisquer outros links. Uma maneira de lidar com funções é usar codificação manual; no entanto, requer a implementação de toda a lógica de autorização de forma programática. Felizmente, os arquivos do sitemap e o controle da fonte de dados do SiteMap juntos fornecem um recurso chamado corte de segurança para ajudá-lo.

Para testar a revisão da segurança, você precisa ativar os recursos de associação e função do seu site. Abra o arquivo web.config e adicione as seguintes tags:

＜modo de autenticação="Formulários" /＞
＜autorização＞
＜negar usuários="?"＞＜/negar＞
＜/autorização＞

Aqui, você definiu o modo de autenticação para Formulários. Você também pode definir regras de autorização para que usuários anônimos sejam impedidos de acessar o site. Em seguida, você precisa habilitar o recurso de gerenciamento de funções - adicionando os seguintes sinalizadores ao arquivo web.config:

＜roleManager habilitado="true" /＞

Em seguida, selecione "WebSite> Configuração ASP.NET" no menu VS.NET para abrir a ferramenta de gerenciamento de sites. Use esta ferramenta para adicionar duas funções: ProductTesters e ServiceTesters (consulte a Figura 9). Quando um usuário que pertence à função ProductTesters entra, você deseja exibir apenas links relacionados ao produto no controle TreeView de navegação. Da mesma forma, quando um usuário pertencente à função ServiceTesters faz check-in, apenas links relacionados ao serviço devem ser exibidos no TreeView.

Figura 9: Adicionando funções usando ferramentas de gerenciamento de sites

Use a ferramenta de gerenciamento de sites para criar dois usuários, chamados user1 e user2. Adicione user1 à função ProductTesters e user2 à função ServiceTesters (veja a Figura 10).

Figura 10: Criando usuários usando ferramentas de gerenciamento de sites

Nota: Por padrão, as informações de usuário e função são armazenadas no banco de dados ASPNETDB na pasta App_Data do seu site. Este banco de dados é criado automaticamente pelo ASP.NET se não existir.

Agora, adicione um novo arquivo de mapa do site SecurityTrimming.sitemap ao site e insira as seguintes tags:

＜?xml versão="1.0" codificação="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Home" description="Meu site"＞
＜siteMapNode title="Produtos" papéis="ProductTesters"＞
＜siteMapNode url="~/products/product1.aspx" title="Primeiro Produto" /＞
＜siteMapNode url="~/products/product2.aspx" title="Segundo Produto" /＞
＜/siteMapNode＞
＜siteMapNode title="Serviços" role="ServiceTesters"＞
＜siteMapNode url="~/services/service1.aspx" title="Primeiro serviço" /＞
＜siteMapNode url="~/services/service2.aspx" title="Segundo serviço" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Fale Conosco" /＞
＜/siteMapNode＞
＜/siteMap＞

A maior parte da marcação aqui é a mesma do arquivo web.sitemap. No entanto, há um atributo importante adicionado aos Produtos e Serviços – siteMapNodes:roles. O atributo role especifica as funções que podem acessar esse nó e seus nós filhos. Como os links associados aos produtos são exibidos apenas para usuários que pertencem à função ProductTesters, você definirá o atributo de funções do siteMapNode de Produtos como ProductTesters. Seguindo a mesma lógica, você definiria o atributo de funções de Services siteMapNode para ServiceTesters. SiteMapNodes sem o atributo de funções especificado são acessíveis a todos os usuários. Além disso, observe que os nós Produtos e Serviços não possuem mais atributos de URL especificados.

Agora, você precisa configurar o provedor do sitemap e habilitar a renovação da segurança para que o controle da fonte de dados do SiteMap possa se comportar de acordo com seus requisitos. Adicione as seguintes tags ao arquivo web.config:

＜provedores＞
＜adicionar nome="meuprovedor"
type="System.Web.XmlSiteMapProvider"
siteMapFile="SecurityTrimming.sitemap"
securityTrimmingEnabled="true" />
＜/provedores＞

Aqui, você adiciona a seção e especifica um provedor que aponta para o arquivo SecurityTrimming.sitemap. Observe que o atributo securityTrimmingEnabled aqui está definido como true para oferecer suporte ao corte de segurança. Depois de configurar a seção , o controle de fonte de dados do SiteMap "capta" automaticamente essas configurações nesta seção.

Adicione um novo formulário da web chamado Login.aspx ao site. Em seguida, arraste um controle Login para ele e defina sua propriedade DestinationPageUrl como "~/SiteMapDataSourceDemo.aspx". Observe que você desenvolveu SiteMapDataSourceDemo.aspx anteriormente.

Execute Login.aspx (veja a Figura 11) e insira as credenciais do usuário1.

Figura 11: Página de login

Depois de fazer login com sucesso, você deverá ver o TreeView mostrado na Figura 12. Como o usuário1 pertence à função ProductTesters, o link para o serviço fica oculto.

Figura 12: Use reforma de segurança

7. Resumo

Um mapa do site é um arquivo XML – ele contém todos os detalhes da estrutura do seu site. Você pode usar arquivos de mapa de site para gerar estruturas de navegação. Três maneiras comuns de usar arquivos de mapa de site são: usar o controle SiteMapPath, usar o controle de fonte de dados SiteMap ou usar a classe SiteMap. Você também pode usar um recurso chamado corte de segurança para oferecer suporte à segurança baseada em função para links de navegação gerados. Juntos, esses controles e classes ajudam a criar uma estrutura de navegação profissional para seu site.