Masterpages/Otto Knudsen 1 Master Pages Master Pages i ASP.NET 2.0.

Præsentationer af emnet: "Masterpages/Otto Knudsen 1 Master Pages Master Pages i ASP.NET 2.0."— Præsentationens transcript:

1 Masterpages/Otto Knudsen 1 Master Pages Master Pages i ASP.NET 2.0

2 Masterpages/Otto Knudsen 2 Motivation Hvordan giver man sin hjemmeside et ensartet udseende? Det er et langsommeligt arbejde, når man har mange sider …

3 Masterpages/Otto Knudsen 3 Løsning — Master Pages Ideen er at definere en skabelon til webstedet – "Master Page" Derefter defineres en eller flere indholdsfelter – "ContentPlaceholder" site.master default.aspx header left pane footer page1.aspxpage2.aspx placeholder page-specificcontent header left pane footer page-specificcontent header footer page-specificcontent header footer

4 Masterpages/Otto Knudsen 4 Skab en Master Page Næsten ligesom at skabe en standard ASP.NET, lige pånær: Website > Add New Item > Master Page anvender "Master"-direktiv og ".master"-filefternavn tilføj ContentPlaceHolder kontrol(ler), som forsynes med indhold fra indholdssiderne.. <asp:ContentPlaceHolder ID="MainContentArea" Runat="server" /> MasterPage.master

5 Masterpages/Otto Knudsen 5 Skab indholdsside (Content Page) Standard ASP.NET pages where: Website > Add New Item > WebForm > "Select Master page" side-direktivet indeholder en "MasterPageFile"-attribut knyt Content -kontrollen til indholdet <asp:Content ID="Content1" ContentPlaceHolderID="MainContentArea" Runat="server"> Here is some very exciting content... Default.aspx

6 Masterpages/Otto Knudsen 6 Design-time understøttelse Når indholdssiderene designes, så vises master-siden i gråt … "Master Page"- delen vises, men kan ikke redigeres content placeholders kan redigeres

7 Masterpages/Otto Knudsen 7 Arbejde med Master Pages Indholdssider bestemmer sidens titel (Title-egenskaben) forsyner hver "place holder" med indhold Tilgang til master-sidens egenskaber og kontroller brug Master. for at få tilgang til egenskaber brug Master.FindControl("ID") til at få adgang til kontroller på master-siden public partial class ContentPage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label lbl; lbl = (Label) Master.FindControl("lblStatus"); lbl.Text = "Content page is loading..."; } public partial class ContentPage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label lbl; lbl = (Label) Master.FindControl("lblStatus"); lbl.Text = "Content page is loading..."; }

8 Masterpages/Otto Knudsen 8 Arbejde med Content Pages Indholdet i indholdssider kan være hvad som helst: statisk tekst og billeder dynamisk funktionalitet via kontroller

9 Masterpages/Otto Knudsen 9 Temaer (Themes) Stylesheets til ASP.NET web-applikationer

10 Masterpages/Otto Knudsen 10 Temaer (Themes) Temaer giver mulighed for at anvende generelle layout-opsætninger på tværs af webstedet: themes are the control-based equivalent of stylesheets themes are applied on the server to set look-and-feel of controls

11 Masterpages/Otto Knudsen 11 Oprettelse af temaer Opret en App_Themes mappe Opret en ny mappe under App_Themes denne undermappe bliver til navnet på temaet Opret en eller flere.skin-filer i undermappen kan også indeholde stylesheet-filer (.css) kan også indeholde ressourcer, fx billeder.skin-filer indholder kontrolerklæringer med standard-attributter <asp:button runat="server" borderstyle="Solid" borderwidth="2px" bordercolor="#66ff66" backcolor="#99ffff" /> <asp:calendar runat="server" borderstyle="Solid" borderwidth="2px" bordercolor="#66ff66" backcolor="#99ffff" /> Day.skin

12 Masterpages/Otto Knudsen 12 Brug af temaer Temaer kan tilknyttes på side-niveau vha. Theme-egenskaben eller side-direktivet: Vha. web.config-filen kan et standard-tema knyttes til samtlige sider på webstedet: web.config

13 Masterpages/Otto Knudsen 13 Navigation på webstedet Kontroller til navigation mellem siderne på webstedet

14 Masterpages/Otto Knudsen 14 Navigation Vi så tidligere, hvordan vi via koden kunne gå fra side til side: ASP.NET 2.0 giver også mulighed for navigation på hele webstedet: Menu Traditional menu (statisk visning eller dynamisk opdateret) TreeView Hierarkisk visning med billeder og tekst SiteMapPath "Brødkrumme"-kontrol, som viser stien efterhånden som brugeren arbejder sig igennem siderne protected void btnLogout_Click(object sender, EventArgs e) { this.Server.Transfer("Login.aspx", false /*clear state*/); } protected void btnLogout_Click(object sender, EventArgs e) { this.Server.Transfer("Login.aspx", false /*clear state*/); }

15 Masterpages/Otto Knudsen 15 Navigationskontroller Alle tre kontroller baseres på en XML.sitemap fil … web.sitemap...

16 Masterpages/Otto Knudsen 16 Brug af navigationskontrollerne Opret først.sitemap-filen: Website menu > Add New Item > Site Map Opret en menustruktur i web.sitemap filen vha. XML: en flad menu er defineret ved ét niveau af indlejrede -elementer en hierarkisk menu er defineret ved indlejrede -elementer Tilføj en SiteMapDataSource –kontrol til (master-) siden træk og slip fra værktøjskassen … Tilføj en navigationskontrol til (master-) siden sæt DataSourceID –egenskaben til SiteMapDataSource kontrollen [SiteMapPath bindes automatisk]

17 Masterpages/Otto Knudsen 17 Eksempel En simpel flad menu vist med alle tre menukontroller Menu Orientation: Horizontal StaticDisplayLevels: 2 TreeView SiteMapPath

18 Masterpages/Otto Knudsen 18 Expression Web Designer Microsoft's Expression Web Designer

19 Masterpages/Otto Knudsen 19 Expression Web Designer Microsoft's erstatning for FrontPage, "ASP.NET-aware"… Man kan hoppe frem og tilbage mellem VS 2005 and EWD

20 Masterpages/Otto Knudsen 20 Hvad så? Øvelse #5

21 Masterpages/Otto Knudsen 21 …