1. ábra Mester oldal alapján különböző témákkal létrehozott webhely oldalai

ASP.NET ALAPOZÓ 2. gyak Mester oldalak, témák 2. feladat

Áttekintés A feladat megvalósításához Master Page (mester oldalt) oldalt készítünk. A mester oldalban a változó tartalom helyét ContentPlaceHolder vezérlő(k) jelölik. Oldalanként különböző Themes-t (témákat) használunk, egy vezérlőhöz pedig Skin-t készítünk. Szükségünk lesz továbbá a követkő vezérlőkre: Table, Menu. Az aktuális dátum megadásához felhasználjuk a DateTime osztályt.

A gyakorlat feladata Készítsük el személyes honlapunkat (tartalmazzon legalább három aloldalt például család, hobbi és munka témakörökben), melyeknek felépítése és szerkezete egységes (megegyezik a főoldallal), de az egyes témák kinézete (színek, betűk, stb.) eltérőek. A honlapon legyen egy vezérlő, amelyik az aktuális dátumot mutatja és egyéni kinézetettel (skin) rendelkezik.

1. ábra Mester oldal alapján különböző témákkal létrehozott webhely oldalai

Probléma – Tervezés Egy több oldalból álló webalkalmazás esetén előnyös, ha minden oldalunk felépítése (vezérlők elrendezésére, az oldal szerkezetére gondolunk) közel azonos, például minden oldalon elérhető a menü. Ezért készítünk egy Master Page oldalt, melyből a többi oldalt (Content Page) származtatjuk (sablonként is tekinthetünk rá). A mester oldalra elhelyezünk egy Menu vezérlőt, mellyel a Család, Munka, Hobbi oldalakra léphetünk. Ezen oldalakat a Master Page oldalból, származtatva készítjük el. Ez azért előnyös, mert minden oldal, ami a Master Page alapján készül, tartalmazni fogja a Master Page oldal elemeit. Amennyiben bármilyen változtatásra van szükség, amelynek minden oldalon látszódnia kell, elég azt a mester oldalon módosítani. FONTOS! Minden vezérlőt, amit a mester oldal alapján létrehozott oldalon szeretnénk elhelyezni, a Content Page oldalon lévő Content vezérlőben helyezzünk el, mely egy Master Page-beli ContentPlaceHolder-rel van kapcsolatban. Ha a szerkezet azonos, akkor a kinézetet (stílust, témát) is érdemes egységesíteni. A Theme (téma) azonban sokkal több, mint a weboldalak kinézete kapcsán korábban tanult CSS. Természetesen a

ASP.NET ALAPOZÓ 2. gyak Mester oldalak, témák 2. feladat CSS-t is magába foglalja, de egyes vezérlőinknek (Button, Label, stb.) egyéni kinézetet (Skin) is adhatunk. Honlapunkhoz készítsünk egy általános Theme-t, majd minden oldalon ennek az alapértelmezett témának egy változatát állítsuk be.

Megvalósítás Készítsünk egy webalkalmazást az ASP.NET Empty Web Site sablon alapján, majd adjunk hozzá egy Master Page oldalt.

2. ábra Új Master Page létrehozása

Egy Master Page hasonló, mint a már ismert Web Form, kiterjesztése MASTER. A markup kódban a Page direktíva helyett a következő jelenik meg az első sorban: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MesterOldal.master.cs" Inherits="MesterOldal" %> Figyeljük meg továbbá, hogy a VS2010 automatikusan elhelyez a mester oldal markup kódjában kettő ContentPlaceHolder-t, egyet a Header tartalomnak, egyet pedig az oldal tartalmának. Természetesen hozzáadhatunk az oldalhoz további ContentPlaceHolder-eket is. Ekkor a tartalom oldal annyi részt tartalmaz, ahány PlaceHolder van a mester oldalon. Helyezzünk el egy menüt (Navigation / Menu) a mester oldalon. Készítsük el a 3 menüpontot, melyek majd a megfelelő aloldalakra mutatnak.

ASP.NET ALAPOZÓ 2. gyak Mester oldalak, témák 2. feladat

3. ábra Menü elhelyezése és beállítása a mester oldalon

Készítsünk egy főoldalt (index.aspx) a Master Page oldal alapján. Adjuk meg, hogy melyik Master Page oldal-t szeretnénk fölhasználni.

4. ábra Web Form készítése mester oldal alapján

FONTOS! Ne felejtsük el beállítani, hogy melyik Master Page-t szeretnénk használni. Az így létrehozott aspx oldal @Page direktívájában megjelenik, hogy melyik Master Page az alapja: <%@ Page Title="" Language="C#" MasterPageFile="~/template.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Fel2.Index" %>

A Master Page oldal alapján készült oldalak esetében az adott oldalra vonatkozó specifikus tartalmat a Content vezérlőben helyezzük el, amely össze van kapcsolva a mester oldal ContentPlaceHolder vezérlőjével, ahogy azt az alábbi markup kódban látszik.

Master Page



Content Page

ASP.NET ALAPOZÓ 2. gyak Mester oldalak, témák 2. feladat

Amikor az adott oldal legenerálódik, akkor a Master Page oldalba behelyettesítésre kerül a Content tartalma és végül a Master Page az adott oldalhoz tartozó tartalommal kerül át HTML kódba. Állítsuk be, hogy a megfelelő menüpontok a megfelelő oldalakra mutassanak (Menu Item Navigate URL tulajdonsága). Ne felejtsük el, hogy elegendő ezt a beállítást a Master Page-en beállítanunk. Írjunk minden oldalra (index, munka, hobbi, család) valamilyen tartalomhoz illő címet és szöveget. Ezeket egy Label-ben a megfelelő PlaceHolder-hez tartozó Content vezérlőben helyezzük el. A címet a head Content-ben, az információkat pedig ContentPlaceHolder1-ben. Az hobbi.aspx esetén: Ez a hobbim!

Hasonlóan járjunk el a többi oldal esetében is. Az index.aspx oldalt állítsuk be kezdőoldalnak. Nézzük meg az eddigi munkánk eredményét.

5. ábra Az index.aspx oldal

Készítsük el az alapértelmezett Theme-t az oldalainkhoz. Adjunk a solution-höz ASP.NET Folder-t. Nevezzük el „alap”-nak. Ehhez a mappához adjunk egy Style Sheet-et. Ebben a CSS fájlban állítsuk be, hogy az oldalak háttérszíne halványszürke legyen.

ASP.NET ALAPOZÓ 2. gyak Mester oldalak, témák 2. feladat A stílusok leírását szerkesztő segítségével is megadhatjuk.

6. ábra CSS leírás szerkesztő ablaka

Miután elkészítettük a stílus leírását, azt meg is kell adnunk az oldalon, amelyiken használni szeretnénk. Ezt az oldal Page direktívájában adhatjuk meg a Theme attribútum segítségével.

<%@ Page Title="" Language="C#" MasterPageFile="~/MesterOldal.master" AutoEventWireup="true" CodeBehind="Csalad.aspx.cs" Inherits="Csalad" Theme=”Alap” %> FONTOS! Ilyenkor nem a CSS nevét, hanem az egész Theme mappa nevét kell megadni, ahol a CSS fájl is található. Amennyiben mindegyik oldalunkra szeretnénk megadni egy adott Theme-t, akkor azt a web.config fájlban érdemes beállítani a következőképpen: <system.web> <pages theme="Alap" />

Nekünk a három aloldalunk Theme-je más kell hogy legyen. Hozzuk létre az ehhez tartozó Theme-ket (ThemeCsalad, ThemeMunka, ThemeHobbi néven), majd vagy beállítjuk kézzel, vagy megváltoztatjuk az oldal töltődésekor, hogy az adott oldalhoz milyen téma tartozzon. Ezt a Page_PreInit eseménykezelőjében kell megtennünk, a Page osztály Theme tulajdonságának segítségével. Már csak a dátumot tartalmazó cimkét (Label-t) kell létrehozni - érdemes a mester oldalon elhelyezni. Ennek a vezérlőnek fogunk egyedi kinézetet (Skin) adni. A már elkészített App_Themes Alap almappájához adjunk egy skin fájlt (kiterjesztése .skin). Adjunk szürke hátteret a Label-nek. Ez azt jelentené, hogy minden Label szürke lesz. Mi azonban csak a dátumot tartalmazó címkét szeretnénk ezzel az egyedi kinézettel felruházni. Módosítsuk a skin fájlt és a SkinId megadásával tegyük hivatkozhatóvá ezt az egyedi kinézetet.

ASP.NET ALAPOZÓ 2. gyak Mester oldalak, témák 2. feladat

A mester oldal markup kódjában a dátumot megjelenítő címkét lássuk el a SkinId-val. Már csak az hiányzik, hogy a dátum automatikusan frissüljön az oldal betöltődésekor. Ehhez használjuk a DateTime osztályt a Code-Behind fájlban.
SkinID="datum">

Label1.Text = Convert.ToString(DateTime.Now.Year) + ". " + Convert.ToString(DateTime.Now.Month) + ". " + Convert.ToString(DateTime.Now.Day); A következőkben az ASP.NET-es webalkalmazások készítésénél használhatjuk az ASP.NET Web Site sablont. Az így létrejövő solution több egyéb mellett tartalmaz weboldalt, mester oldalt és témát is.

7. ábra ASP.NET Web Site sablonnal generált webhely részei