ASP NET Passo a Passo Navegao em Sites

  • Slides: 8
Download presentation
ASP. NET Passo a Passo Navegação em Sites Conteúdo do Capítulo 1. 2. 3.

ASP. NET Passo a Passo Navegação em Sites Conteúdo do Capítulo 1. 2. 3. Implementar um mapa de site usando uma origem de dados XML Usar o mapa de site para acionar controles de navegação Capturar e responder aos eventos de navegação de mapa de site

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 1. 2.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 1. 2. 3. Crie uma aplicação Web (Empty Web Application) de nome Navigate. Me. Site. Adicione ao projeto uma Master. Page. Aceite o nome padrão “Site 1. Master”. Utilizando o opção Add Item, adicione ao projeto um item do tipo “Site Map”. Aceite o nome padrão “Web. sitemap”. O sitemap consiste em um arquivo XML com a estrutura de páginas da aplicação. A estrutura padrão inserida é apresentada abaixo. <? xml version="1. 0" encoding="utf-8" ? > <site. Map xmlns="http: //schemas. microsoft. com/Asp. Net/Site. Map-File-1. 0" > <site. Map. Node url="" title="" description="" /> </site. Map. Node> </site. Map>

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 4. Altere

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 4. Altere a estrutura do sitemap padrão para definir uma navegação para 4 páginas a serem inseridas na aplicação: Default. aspx, Products. aspx, Support. aspx e Contact. aspx conforme apresentado abaixo. <? xml version="1. 0" encoding="utf-8" ? > <site. Map xmlns="http: //schemas. microsoft. com/Asp. Net/Site. Map-File-1. 0" > <site. Map. Node url="" title="NMenu" description=""> <site. Map. Node url="Default. aspx" title="Página Inicial" description="Essa é a página principal" /> <site. Map. Node url="Products. aspx" title="Cadastro de Produtos" description="Essa é a página de produto" /> <site. Map. Node url="Support. aspx" title="Suporte" description= "Essa é a página de suporte" /> <site. Map. Node url="Contact. aspx" title="Contato" description= "Essa é a página de contato"/> </site. Map. Node> </site. Map>

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 5. Adicione

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 5. Adicione à página mestre um componente Menu e selecione a opção “Choose Data Source” para escolher a fonte de dados do componente. Selecione “New Data Source” e direcione para o sitemap criado.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 6. 7.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 6. 7. 8. 9. Adicione à página mestre um componente Tree. View e selecione a opção “Choose Data Source” para escolher a fonte de dados do componente. Selecione o Site. Map. Data. Source criado durante a configuração do componente Menu. Adicione à página mestre um componente Site. Map. Path que serve para apresentar a hierarquia da página atual selecionada. Adicione ao projeto as 4 páginas referenciadas no site map, sempre associando-as à página mestre criada, são elas: Default. aspx, Products. aspx, Support. aspx e Contact. aspx. Adicione a cada uma destas páginas um rótulo e atribua os conteúdos “Página Principal”, “Cadastro de Produtos”, “Suporte” e “Contato” respectivamente, de forma que o usuário possa diferenciar cada uma das páginas.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 10. Execute

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 10. Execute a aplicação e navegue entre as páginas utilizando os componentes Menu e Tree. View.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 1. 2.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 1. 2. Vamos agora adicionar mais um nível de menu. Deseja-se adicionar ao menu, na opção Contato, duas entradas adicionais para acessar duas páginas distintas de contato, uma para endereço físico e outro para endereço eletrônico. Abra o arquivo Web. Sitemap e altere o conteúdo do nó de Contato para incluir dois nós internos que darão acesso para as páginas Contact. Address. aspx e Contact. Email. Phone. aspx que conforme apresentado abaixo. <site. Map. Node url="Contact. aspx" title="Contato" description= "Essa é a página de contato com dois níveis"> <site. Map. Node url="Contact. Address. aspx" title="Contato usando endereço físico" description="Essa é a primeira página de contato" /> <site. Map. Node url="Contact. Email. Phone. aspx" title="Contato usando email e telefone" description="Essa é a segunda página de contato" /> </site. Map. Node>

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 1. 2.

ASP. NET Passo a Passo Navegação em Sites Aplicação Web com sitemap 1. 2. Adicione as duas páginas referenciadas no sitemaos, Contac. Address. aspx e Contact. Email. Phone. asp. Adicione em cada uma delas um rótulo com os textos “Endereço” e “Endereço de Email e Telefone” respectivamente. Observe a navegação em menu de dois níveis permitida pelos componentes.