Criando um Menu baseado em arquivos SiteMap

Neste artigo vou falar sobre o desenvolvimento de um menu para o seu site baseado em arquivos sitemap.

por Guilherme de Carvalho Carneiro

Neste artigo vou falar sobre o desenvolvimento de um menu para o seu site baseado em arquivos sitemap. Primeiramente temos que criar o(s) arquivo(s) sitemap, que no final deve ter o formato abaixo.

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

<siteMapNode title="Principal" url="~/admsistema/frm_principal.aspx" description="Página inicial do sistema"/>

<siteMapNode title="Cadastrar usuário" url="~/admsistema/frm_cadastrar_usuario.aspx" description=""/>

<siteMapNode title="Manutenção" url="" description="">

<siteMapNode title="Vara" url="~/admsistema/frm_atualizar_vara.aspx" description="Administrar vara"/>

</siteMapNode>

<siteMapNode title="Sair" url="~/admsistema/frm_logoff.aspx" description="Sair do sistema"/>

</siteMapNode>

</siteMap>

Explicando o formato do arquivo

Cada item siteMapNode será um item do menu, percebe-se que os itens estão aninhados, onde tenho nós pais como por exemplo <siteMapNode title="Principal" url="~/admsistema/frm_principal.aspx" description="Página inicial do sistema"/> que será um item do menu, e temos nós filhos como por exemplo <siteMapNode title="Vara" url="~/admsistema/frm_atualizar_vara.aspx" description="Administrar vara"/> que no caso só será visto no momento em que o usuário passar o mouse por cima do nó pai. Para configurar um nó filho deve-se tomar o cuidado de colocá-lo internamento entre a tag <siteMapNode> e </siteMapNode>.

Mas isto é apenas para demonstrar a estrutura do arquivo, visto que o próprio Visual Studio gera toda a estrutura do arquivo.

Configurando o web.config

Para se trabalhar com os arquivos siteMap temos que fazer a inserção de uns parâmetros no nosso web.config, mas é coisa bem simples mesmo, devemos dizer quais arquivos serão usados pela aplicação. Como estamos trabalhando com acesso separados por nível de usuário iremos cadastrar vários arquivos no web.config, onde o defaultProvider vai determinar qual o siteMap padrão para o sistema carregar no componente menu. Para cada arquivo siteMap que desejar usar deve-se adicionar uma tag dentro de providers, no formato destacado abaixo

<siteMap defaultProvider="Advogado" enabled="true">
<providers>
<add name="Advogado" type="System.Web.XmlSiteMapProvider" siteMapFile="~/admsistema/Advogado.SiteMap"/>
<add name="Administrador" type="System.Web.XmlSiteMapProvider" siteMapFile="~/admsistema/Administrador.SiteMap"/>
<add name="Secretaria" type="System.Web.XmlSiteMapProvider" siteMapFile="~/admsistema/Secretaria.SiteMap"/>
<add name="Socio" type="System.Web.XmlSiteMapProvider" siteMapFile="~/admsistema/Socios.SiteMap"/>
<add name="Estagiario" type="System.Web.XmlSiteMapProvider" siteMapFile="~/admsistema/Estagiario.SiteMap"/>
<add name="Cliente" type="System.Web.XmlSiteMapProvider" siteMapFile="~/admsistema/Cliente.SiteMap"/>
</providers>
</siteMap>

Determinando via código qual o siteMap a ser carregado no componente Menu.

Na página aspx vamos inserir o componente menu, e também um siteMapDataSource como abaixo

<asp:SiteMapDataSource ID="SMDS" SiteMapProvider="Advogado" runat="server" ShowStartingNode="False" />

Veja que estou determinando qual o siteMapProvider vou usar inicialmente Advogado ou seja o mesmo nome que deu para o meu primeiro SiteMap, a referencia deve ser feita usando o parâmetro name dos providers inseridos no web.config.

Por fim vamos carregar um siteMap diferenciado. Para isto basta carregar via código o provider que eu quero usar.

SMDS.SiteMapProvider = "Administrador"

Assim o sistema vai carregar o siteMap do usuário administrador.

Configuração do asp:menu na página aspx

Já a Tag com a configuração do Menu está logo abaixo, onde devemos destacar o DataSourceID, que deve apontar para o SiteMapDataSource configurado logo acima. Outro parâmetro que vale destacar é o Orientation que determina se o menu vai ser exibido na horizontal ou vertical. Os parâmetros em verde são estilos css para os estados dos objetos do menu, como o HoverStyle que vai aplicar um estilo quando o mouse estiver sobre o elemento.


<asp:Menu ID="MenuSistema" runat="server" DataSourceID="SMDS" Orientation="Horizontal" DynamicEnableDefaultPopOutImage="False" StaticEnableDefaultPopOutImage="False" DynamicVerticalOffset="5" Height="25px">
<DynamicMenuItemStyle CssClass="cssmenuxmlsubmenu" />
<StaticMenuItemStyle CssClass="cssmenuxmlitens" />
<DynamicHoverStyle CssClass="cssmenusubitenshover" />
<DynamicMenuStyle CssClass="csssubmenuxml" />
<StaticHoverStyle CssClass="cssmenuxmlitenshover" />
</asp:Menu>