Menu dinâmico com XML, XPATH e ASP.NET

A necessidade de um menu ser carregado dinamicamente sempre é encontrada, mas uma solução simples para isso, é usar o XML ao invés de usar banco de dados. O XML é fácilmente alterado, enquanto o banco de dados precisa ser conectado. Outro recurso interessante é o XPATH, que permite que naveguemos pelo XML facilmente, como se estivessemos em um diretório Windows.

por André Baltieri

Esta semana me deparei com um problema bem comum. A criação de menus dinâmicos.
Bem, criar um menu dinâmico não é a coisa mais difícil, mas creio eu que com XML e o XPath, seja mais simples e muito, mas muito mais fácil de se dar manutenção futuramente.
Bom, o XPath é uma linguagem padronizada pela W3C que tem por função endereçar as partes do nosso XML, nos possibilitando navegar facilmente pelo XML e ainda fazer buscas e etc.
Para maiores informações sobre o XPath leia: http://www.w3.org/TR/xpath.

A primeira coisa que iremos fazer, será criar nosso XML, organizando o menu.
O XML facilita a nossa criação e manutenção dos links depois, pois não precisamos acessar banco de dados, nem mexer no código fonte das páginas, apenas abrimos o XML com qualquer editor de texto e pronto.
Abra o Visual Web Developer Express, ou Visual Studio.
Crie um novo Web Site, com o nome que quiser e linguagem que quiser.
Abra o painel Solution Explorer (CRTL + ALT + L) e clique sobre a raiz do projeto. Em seguida clique sobre Add New Item, como mostrado na figura:



Com isso, uma nova janela será aberta, selecione XML File, dê a ele o nome de Menu.xml e clique em Add, como mostrado abaixo:



Com o arquivo XML na tela, adicione o seguinte conteúdo a ele:

<?xml version="1.0" ?>
<menus>
    <menu id="padrao">
        <item titulo="Sobre Nós" link="uiEmpresa.aspx?tipo=sobre&menu=empresa"></item>
        <item titulo="Serviços" link="uiEmpresa.aspx?tipo=servicos&menu=empresa"></item>
        <item titulo="Preços" link="uiEmpresa.aspx?tipo=precos&menu=empresa"></item>
        <item titulo="Notícias" link="uiNoticias.aspx?menu=empresa"></item>
        <item titulo="Contato" link="uiContato.aspx?menu=contato"></item>
    </menu>
    
    <menu id="empresa">
        <item titulo="Biografia do Tabelionato" link="uiEmpresa.aspx?tipo=biografia"></item>
        <item titulo="Histórico do Tabelionato" link="uiEmpresa.aspx?tipo=historico"></item>
        <item titulo="Conheça o Tabelionato" link="uiEmpresa.aspx?tipo=conheca"></item>
        <item titulo="Escreventes" link="uiEmpresa.aspx?tipo=escreventes"></item>
    </menu>
    <menu id="utilidades">
        <item titulo="Legislaçao" link="uiEmpresa.aspx?tipo=biografia"></item>
        <item titulo="Links Interessantes" link="uiEmpresa.aspx?tipo=historico"></item>
        <item titulo="Novidades" link="uiEmpresa.aspx?tipo=conheca"></item>
        <item titulo="Notícias Relacionadas" link="uiEmpresa.aspx?tipo=escreventes"></item>
    </menu>
    <menu id="contato">
        <item titulo="Web Mail" link="uiEmpresa.aspx?tipo=biografia"></item>
        <item titulo="Fale Conosco" link="uiEmpresa.aspx?tipo=historico"></item>
        <item titulo="Acesso Restrito" link="uiEmpresa.aspx?tipo=conheca"></item>
    </menu>
</menus>

Salve-o e feche-o.
Na página Default.aspx, adicione um Data List e um XML Data Source, onde o XML Data Source será o responsável por nos vincular ao XML e o Data List por exibir os dados.



Sua página deve estar parecida com esta:



Vamos então configurar nosso Xml Data Source.
Selecione o XML Data Source, clique sobre a seta que aparece na frente dele e em seguida clique sobre a opção "Configure data source", como mostrado na figura abaixo:



Uma nova janela se abrirá, no campo Data File clique sobre o botão Browse...

Em seguida, selecione o Menu.xml e clique em OK



Note que o caminho do arquivo Menu.xml foi escrito no campo Data File. Feito isso, apenas clique em OK.



Com o nosso XML Data Source configurado, vamos então para o código.
O esquema é simples, durante a navegação no site, chamaremos nossas páginas normalmente, exemplo http://www.meusite.com.br/Default.aspx, somente acrescentaremos uma query string a nossa URL, com um parâmetro chamado menu, e um valor, que no nosso caso será o id de um dos menus que criamos no XML.
Nossa URL ficaria então assim:

http://www.meusite.com.br/Default.aspx?menu=empresa, ou http://www.meusite.com.br/Default.aspx?menu=padrao, e assim por diante.

Com a Default.aspx aberta, aperte F7, para irmos para a parte de códigos, e no evento Page_Load, adicione o seguinte código:

Código em VB:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim strMenu As String = Request.QueryString("menu")
    If strMenu = "" Then
        strMenu = "padrao"
    End If
    xdsMenu.XPath = "/menus/menu[@id="" & strMenu & ""]/item"
    xdsMenu.DataBind()
End Sub

Código em C#:

protected void Page_Load(object sender, EventArgs e)
{
    string strMenu = Request.QueryString["Menu"];
    if(strMenu==null)
    {
        strMenu = "padrao";
    }
    XmlDataSource1.XPath = "/menus/menu[@id="" + strMenu + ""]/item";
    XmlDataSource1.DataBind();
}

Nada demais no código, além do XPath.
Primeiramente, eu declaro uma variável chamada strMenu e atribuo a ela uma valor que eu recupero da querystring.
Depois faço uma verificação, para saber se ela está vazia, pois se estiver, vou atriuir um valor a ela, que no caso é o valor "padrao", pois se nenhum menu for solicitado, o menu a ser aberto será o padrão.
Depois, finalmente, vem o uso do XPath.

Repare que navegamos no Xpath, como se estivessemos navegando na barra de endereços de um site.

/menus
.../menu
......//item

Uma hierarquia, como em nosso XML.

A única coisa diferente é o [@id="valor"]
Quando queremos pesquisar no XML usando o XPath, usamos essa sintaxe [@atrbuto="valor"].
No nosso caso, queremos listar todos os itens do menu que recebemos via querystring, então fazemos a seguinte sintaxe "...[@id=" + strMenu + "]..."
Sendo que strMenu estará contendo um valor referente a um menu do nosso XML.

Com nosso código criado, podemos salvar nossa página e voltar ao Design (F7).
Vamos agora vincular nosso Data List ao XML Data Source e exibir os dados na tela.
Para isso, selecione o Data List, clique sobre a seta a frente dele e em seguida, selecione o XmlDataSource1 como data source para este objeto, como mostrado abaixo:



Agora, para finalizar, precisamos criar o template da nossa data list.
Na página Default.aspx, mude o layout para o modo Source.



Entre as tags <ItemTemplate> e </ItemTemplate>, vamos escrever nosso código:

<ItemTemplate>
    <a href="<%# Eval("link") %>">
   		<asp:Label ID="idLabel" runat="server" Text="<%# Eval("titulo") %>" />
    </a>
    <br />
</ItemTemplate>

O Eval nos permite recuperar valores da nossa fonte de dados.
Neste caso, recuperamos os valores link e titulo, do nosso XML carregado.
Neste exato momento, podemos rodar nossa aplicação.
Aperte F5.



Para chamarmos outros menus, basta modificar a URL desta forma
http://www.meusite.com.br/Default.aspx?menu=ID_DO_MENU

Exemplo:



Bom, é claro que existem outras formas, como sempre...
Espero ajudar em algo.

Abraços e comentem.