ASP.NET: Menu na podstawie XML w master page

 

Menu do nawigacji po stronach w ASP.NET może zostać stworzone w przyjazny sposób przy wykorzystaniu kontrolki Menu. W przypadku Visual Web Developer 2010 Express w dostępnym szablonie w pliku Site.Master kontrolka taka została automatycznie stworzonan i wypełniona paroma pozycjami. Wygląda to następująco:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
	<Items>
		<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
		<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
	</Items>
</asp:Menu>

Rozwiązanie to pozwala na zachowanie na każdej ze stron osadzonych w wybranej master page identycznego menu. Co jednak w przypadku, w którym znalazłem się i ja, gdy dodany został nowy szablon master page. Powtórzenie identycznego kodu dla każdej ze stron (pomimo iż jest to tylko master page) byłoby marnotrawstwem czasu, wysiłku oraz mogłoby przyczynić się do trudności w utrzymaniu spójności menu na każdej ze stron. Z pomocą przychodzi tu możliwość przechowywania ścieżek nawigacyjnych w osobnym pliku. Plikiem takim, wspieranym poprzez wbudowany mechanizm, jest plik Web.sitemap. Jeśli nie znajduje się on już w solucji to można go dodać tak jak każdy inny element, czyli poprzez wybór z menu kontekstowego pozycji Add->New Item. Co ważne, plik ten musi znajdować się w katalogu głównym projektu.

Struktura pliku Web.sitemap wygląda następująco:

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

czyli mamy element siteMap, w którym mogą być zagnieżdżane kolejne poziomy menu, które muszą znaleźć się pomiędzy znacznikami <siteMapNode></siteMapNode>. Co warte podkreślenia może istnieć tylko jeden element główny, czyli <siteMapNode>, a pozostałe muszą być w nim zagnieżdżone. Niesie to ze sobą pewne konsekwencje. Mianowicie kod:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
	<siteMapNode url="~/Default.aspx" title="Home" description="Home Page">
		<siteMapNode url="~/About.aspx" title="About" description="About Application">
		</siteMapNode>
	</siteMapNode>
</siteMap>

spowoduje, że zamiast zapewne oczekiwanego uzyskania menu o dwóch elementach: Home oraz About, otrzymujemy jeden element o nazwie Home, po najechaniu na który rozwija się menu zawierające element About. Do zmiany takiego stanu rzeczy konieczna jest zmiana właściwości menu wstawionego w master page – “StaticDisplayLevels” na wartość 2.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
	<siteMapNode url="~/Default.aspx" title="Home" description="Home Page">
		<siteMapNode url="~/About.aspx" title="About" description="About Me And Application">
			<siteMapNode url="~/AboutMe.aspx" title="About Me" description="About Me"/>
			<siteMapNode url="~/AboutApplication.aspx" title="About Application" description="About Application"/>
		</siteMapNode>
	</siteMapNode>
</siteMap>

Takie ustawienie spowoduje, że widoczne będą dwa elementy, czyli Home Page oraz About. Po najechaniu myszką na drugi z nich rozwinięte zostanie menu z dwoma kolejnymi pozycjami.

Na koniec pozostaje tylko “podpięcie” kontrolki do źródła danych, czyli naszego pliku Web.sitemap. Najwygodniej można to uczynić wstawiając na stronę master page kontrolkę SiteMapDataSource i oczywiście ustawienie właściwości DataSourceID dla menu na id źródła danych.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: