ASP.NET 2.0 - Navegação com Master Page, SiteMapPath, Menu e Treeview

Neste artigo veremos como aplicar o recurso de navegação a um web site usando os componentes Master Page, SiteMapPath, Menu e TreeView. Os componentes SiteMap e Menu foram abordados no artigo : ASP.NET  2.0 - Criando menus dinâmicos e estáticos , o controle TreeView foi visto no artigo ASP.NET  2.0 - Exibindo dados XML com controle TreeView e o componente Master Page pode ser visto no artigo: ASP.NET  2.0 - Master Pages: Conceito e utilização-

Nota: Acompanhe também os artigos :

Recursos necessários para acompanhar este artigo:

  • Visual Web Developer Express Edition (VWD)

    • Portanto vamos direto ao assunto. Abra o VWD e crie um novo web site no menu File->New Web Site com o nome de navegacaoNet;

    Exclua em seguida a página Default.aspx pois iremos criá-la novamente herdando uma Master Page

    Vamos criar uma Master Page no projeto; para isso clique com o botão direito do mouse sobre o nome do projeto e selecione a opção Add New Item e na janela Add New Item selecione a opção Master Page, aceite o nome padrão , e, clique no botão Add;

    Insira na Mater Page um componente Table a partir do Menu Layout contendo uma linha e um a coluna. Inclua um componente Imagem na célula da tabela , altere seu nome para imgSite e defina uma imagem para ser exibida no componente através da propriedade NavigateURL:

    Vamos incluir no projeto um componente Site Map. No menu Web Site selecione Add New Item e na janela a seguir selecione o componente Site Map:

    Inclua o seguinte conteúdo no arquivo Web.sitemap:

    O arquivo Web.sitemap especifica a estrutura lógica do site, e vai gerar o arquivo no formato XML que contém todos links do site que serão utilizados na navegação , portanto deveremos criar as seguintes páginas para navegação :

    Todas as páginas acima deverão herdar a partir da master page. O processo descrito a seguir deverá ser repetido para cada uma das páginas a serem criadas:

    - A partir do menu Web Site, opção Add New Item, selecione o template Web Form e informe o nome da página. Em seguida marque as opções - Place code in separete file e Select master page e clique no botão Add;

    Na janela Select Master Page , selecione a Master Page criada anteriormente e clique no botão OK.

    Exibindo a página Default.aspx criada iremos notar a Master Page e a área Content onde iremos colocar o conteúdo da página. Para editar a Master Page clique com o botão direito na área de desenho e selecione a opção Edit Master:

    Agora vamos incluir o componente SiteMapPath na nossa Master Page. Este componente permite exibir uma estrutura de navegação no seu site.

    Selecione a Master Page e a partir da ToolBox , na guia Navigation, selecione, arraste e solte o componente SiteMapPath, colocando logo abaixo da imagem usada na Master Page, conforme figura abaixo:

    A seguir vamos incluir um componente Menu logo abaixo do componente SiteMapPath incluído.

    A seguir , selecione o componente Menu e no Menu Tasks,na opção Choose Data Source, selecione <New data source>, e, na janela Data Source selecione o componente Site Map aceitando ID padrão para identificar o data source:

    Para poder visualizar a estrutura do menu do site altere a propriedade StaticDisplayLevels do controle Menu de 1 para 3 e verifique se a propriedade Orientation esta definida como Vertical.

    Vamos agora dar um toque diferente ao nosso site usando o controle TreeView. O objetivo é poder usar o mesmo recurso aplicado nas páginas do site da MSDN.

    Selecione a Master Page e inclua uma tabela , a partir do menu LayOut , opção Insert Table, com uma linha e duas colunas;

    Selecione o componente TreeView e em Choose Data Source selecione o data source SiteMapDataSource1.

    Para ter certeza de que os componentes TreeView e ContentPlace da Master Page estão alinhados no topo, alterne para o modo Source e inclua a tag valign="top" em ambas as células da tabela que contém os componentes, conforme mostrado no trecho de código abaixo:

    Para podermos visualizar o efeito do componente TreeView vamos incluir em cada página .aspx referente aos links do Menu da aplicação algumas imagens e textos referente a livros e revistas a título de ilustração. Vou mostrar como você pode facilmente fazer isto para uma página e, para as demais , basta repetir o processo.(Peguei algumas imagens e texto do site da wrox - www.wrox.com)

    Vamos iniciar com a página livros.aspx; selecione a página e no modo Design inclua imagem e texto conforme a figura a baixo: (Fique a vontade para incluir o que desejar):

    Pressione F5 para executar o projeto usando o servidor embutido da ASP.NET 2.0 e use o menu de navegação para  ver o links ativados e a indicação da localização no mapa do site.

    Fizemos tudo isto sem praticamente digitar código algum. Deixo a você a tarefa de incrementar ainda mais o menu e a navegação usando os diversos recursos que não foram abordados neste artigo.

    Pegue o projeto completo aqui:    navegacaoNet.zip

    Eu sei é apenas ASP.NET, mas eu gosto..

    Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

    Quer migrar para o VB .NET ?

    Quer aprender C# ??

    Quer aprender os conceitos da Programação Orientada a objetos ?

    Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

    Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

     

      Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

     

    Referências:

    José Carlos Macoratti