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

 

Zgodnie z zapowiedzią, po utworzeniu tabeli z kategoriami dla produktów, przyszedł czas na utworzenie menu ułatwiającego nawigację po grupach produktów. Menu powinno występować na każdej ze stron aplikacji (w pierwszym założeniu), dlatego w tym celu warto wykorzystać mechanizm ASP.NET, jakim jest istnienie tzw. master pages. Nie jest to post o tym właśnie zagadnieniu, zatem napiszę tylko, że master page jest to utworzona strona, która pozwala na zagnieżdżanie w sobie innych stron w odpowiednich miejscach. Sprawia to, że dołączając do tworzonych przez nas stron wybraną master page otrzymujemy powtarzającą się zawartość na każdej ze stron będącej wynikiem takiego połączenia. Master page jest to zatem idealne miejsce do utworzenia elementu występującego na każdej ze stron, czyli menu wyświetlającego kategorie produktów.

Aplikacja tworzona w Visual Web Developer 2010 Express domyślnie posiada wbudowaną już jedną master pager o nazwie Site.Master. Dla przypomnienia, po dodaniu paru elementów do menu nawigacyjnego, wyglądą ona następująco:

poczatkowa SiteMaster

Do moich zastosowań taki layout jest w zupełności wystarczający, a ponadto według mnie jest całkiem przyzwoity. Posiada on jednak jedną wadę, mianowicie posiada tylko jeden ContentPlaceHolder, w którym umieszczana jest cała treść. Może ona zająć w przybliżeniu całą szerokość tworzonej strony. Aby oddzielić menu, a także inne elementy od głównej treści strony proponuję niewielką modyfikację dostępnego szablonu. W miejsce dotychczas istniejącej jednej kolumny utworzę 3 kolumny:

  1. Menu (menu z kategoriami)
  2. Treść (główna zawartość strony)
  3. Gadżety (opcjonalne miejsce na umieszczanie przez użytkownika takich dodatków, jak np. kalendarz)

oraz

  • powyżej nich własny nagłówek
  • poniżej nich własną stopkę

Nagłówek i stopkę postanowiłem utworzyć przyszłościowo – w tym momencie jeszcze nie jestem w stanie określić ich dokładnego zastosowania.

Zmiany w layoucie wymagają modyfikacji zarówno w utworzonym nowym pliku z komponentami, w moim przypadku będzie to SiteNewLayout.Master, jak i w pliku zawierającym style css. Aby przypadkiem czegoś nie skasować również w tym przypadku utworzyłem nowy plik o nazwie SiteNewLayout.css, z zawartością taką jak w domyślnym Site.css.

W layoucie strony w miejsce dotychczasowego wpisu:

<div class="main">
    <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
wstawione zostały następujące znaczniki:
<div class="top">
    <div class="contentHeader"></div>
    <div class="contentMenu"></div>
    <div class="main">
       <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
    <div class="contentGadgets"></div>
    <div class="contentFooter"></div>
</div>
 
Widać zatem, że dotychczas występujący ContentPlaceHolder z identyfikatorem MainContent został zachowany i jednocześnie został przeniesiony do kolumny środkowej (czego jeszcze po tym fragmencie kodu nie widać). Zachowana została zatem pełna zgodność z utworzonymi do tej pory stronami wykorzystującymi ContentPlaceHolder o tym właśnie identyfikatorze.

Na marginesie, jako że nie lubię kasować poprzednich treści z pliku, aby wiedzieć jak to wyglądało wcześniej, podaję wskazówkę odnośnie komentowania w plikach z kodem źródłowym strony. Do wstawiania komentarzy po stronie serwera służą znaczniki <%–  –%>

Teraz przyszedł czas na odpowiednie rozmieszczenie przygotowanych kolumn, nagłówka oraz stopki. Zaznaczam w tym miejscu, że nie mam na co dzień styczności z css, a więc jest bardzo duża szansa, że przedstawiony przeze mnie kod nie zadziała poprawnie w większości przypadków i przeglądarek. Przy takich ustawieniach jednak wygląd w Visual Studio oraz w przeglądarce Internet Explorer 9 Beta jest dla mnie zadowalający:

.contentHeader
{
    background-color: Aqua;
}

.contentMenu
{
    width: auto;
    background-color: Fuchsia;
    float: left;
    overflow: hidden;
}

.main
{
    min-height: 420px;
    min-width: 150px;
    background-color: Blue;
    float: left;
}

.contentGadgets
{
    width: 150px;
    background-color: Yellow;
    float: right;
    overflow: hidden;
}

.contentFooter
{
    clear: both;
    width: 100%;
    background-color: Green;   
}
 
Efekt wymienionych wyżej zmian wygląda następująco (kolory zostały celowo przejaskrawione dla łatwiejszego zobrazowania):

poczatkowa2 SiteMaster

Menu z kategoriami znajdzie się w lewej części ekranu w miejscu koloru różowego (fioletowego?). O tym jednak w kolejnej części (już jutro), gdyż w przeciwnym przypadku ten post stałby się zbyt długi.  

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: