ASP.NET: Menu kategorii na podstawie danych z bazy cz.2 – Menu

 

Po odpowiednim rozmieszczeniu elementów tworzących layout strony czas na właściwą część, czyli utworzenie menu z kategoriami produktów. Najpierw jednak trochę o samym zagadnieniu tworzenia menu. W toolboxie Visual Studio, w części Navigation, można odnaleźć gotową kontrolkę Menu. Kontrolka ta umożliwia utworzenie menu w oparciu o powiązane dane zawarte w pliku XML – Web.sitemap. Dzięki temu odpowiednie pozycje menu przechowywane są w zewnętrznym pliku a nie w danym pliku ze stroną. Po utworzeniu projektu plik ten nie jest dostępny, zatem należy go utworzyć dodając w Solution Explorerze nowy element o nazwie Site Map. Zawartość tego pliku tworzymy pomiędzy znacznikami <siteMap></siteMap>. Poszczególne elementy mogą być natomiast zagnieżdzane i tworzone są poprzez dodanie znacznika <siteMapNode>. Przykładowy plik tworzący pozycje menu może 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="Default"  description="Home Page">
        <siteMapNode url="~/About.aspx" title="About"  description="About me" />
        <siteMapNode url="~/Validation.aspx" title="Validation"  description="Validation of input" />
    </siteMapNode>
</siteMap>
Powiązanie kontrolki Menu z tym źródłem danych spowoduje utworzenie elementu menu o nazwie Default, a po jego wybraniu pojawi się podmenu z dwoma elementami: About oraz Validation.

Na potrzeby mojego projektu chciałbym jednak mieć możliwość automatycznego uaktualniania menu w oparciu o kategorie znajdujące się w mojej bazie danych. W tym celu zamierzam wykorzystać kontrolkę ListView powiązaną z odpowiednią tabelą w bazie danych. Wygląd tabeli z kategoriami przedstawiłem w jednym z poprzednich postów. Zawiera ona jedynie dwie kolumny: jedną z identyfikatorem oraz drugą z nazwą kategorii.

Pierwszym krokiem jest skonfigurowanie źródła danych:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ShoppingAppDbConnectionString %>" 
    SelectCommand="SELECT * FROM [ProductsCategories] ORDER BY [ProductsCategories_ID]">
</asp:SqlDataSource>
 
Do utworzenia połączenia wykorzystywany jest ConnectionString umieszczony w pliku Web.config. Z bazy natomiast, za pomocą polecenia SELECT, pobierane są obie kolumny (aby można było później łatwo przekierować się używając identyfikatora), dane zaś sortowane są w wybranej przeze mnie kolejności dodania danych do tabeli.

Po wstawieniu kontrolki ListView należy jeszcze dokonać jej konfiguracji:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<EmptyDataTemplate>No items on list</EmptyDataTemplate>
<ItemSeparatorTemplate></ItemSeparatorTemplate>
<ItemTemplate>
   <li>
       <a href="&lt;%# VirtualPathUtility.ToAbsolute(&quot;~/CategoriesList.aspx?CategoryId=&quot; + Eval(&quot;ProductsCategories_ID&quot;)) %&gt;"><%# Eval("Name") %></a>
   </li>
</ItemTemplate>
<LayoutTemplate>
   <ul id="itemPlaceHolderContainer" runat="server" style="font-family: Verdana; font-size: 16px;">
       <li runat="server" id="itemPlaceHolder" />
   </ul>
</LayoutTemplate>
</asp:ListView>
 
Wyświetlane elementy menu poprzedzone są kropkami. Treść danej pozycji w menu jest odpowiednią nazwą pobraną z bazy i jest ona jednocześnie odnośnikiem do strony wyświetlającej produkty dla wybranej kategorii. Odnośnik zawiera w sobie query string utworzony z wykorzystaniem identyfikatora kategorii. Po sformatowaniu za pomocą css:
.contentMenu li a
{
    color: #000;
    text-decoration: none;
    padding: 0.5em;
}

.contentMenu li a:hover
{
    text-decoration: underline;
    color: #ff0000;
}
otrzymujemy treść elementów w kolorze czarnym, jako czysty tekst, natomiast po najechaniu na wybrany element menu zostaje on podkreślony i zmienia się jego kolor na czerwony.

Natomiast dodanie:

.contentMenu li a:active, .contentMenu li a:focus
{
    outline: none;
}
powoduje usunięcie otoczki wokół wybranego elementu menu.
 

Materiały źródłowe: http://msdn.microsoft.com/en-us/library/ecs0x9w5(VS.80).aspx, http://www.asp.net/aspnet-4/videos/tailspin-spyworks-category-menu

Reklamy

Skomentuj

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

Logo WordPress.com

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

Zdjęcie z Twittera

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

Zdjęcie na Facebooku

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

Zdjęcie na Google+

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

Connecting to %s

%d blogerów lubi to: