Download
1 / 21
210 likes | 313 Vues
Master Pages. Master Pages i ASP.NET 2.0. Motivation. Hvordan giver man sin hjemmeside et ensartet udseende? Det er et langsommeligt arbejde, når man har mange sider …. header. header. header. left pane. left pane. left pane. footer. footer. footer. Løsning — Master Pages.
E N D
Master Pages • Master Pages i ASP.NET 2.0
Motivation • Hvordan giver man sin hjemmeside et ensartet udseende? • Det er et langsommeligt arbejde, når man har mange sider …
header header header left pane left pane left pane footer footer footer Løsning — Master Pages • Ideen er at definere en skabelon til webstedet – "Master Page" • Derefter defineres en eller flereindholdsfelter – "ContentPlaceholder" site.master header placeholder left pane footer default.aspx page1.aspx page2.aspx page-specific content page-specific content page-specific content
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. MasterPage.master <%@ Masterlanguage="C#"... %> <html> <body> . . . <asp:ContentPlaceHolder ID="MainContentArea" Runat="server" />
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 Default.aspx <%@ Page MasterPageFile="~/MasterPage.master"... %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContentArea" Runat="server"> <h1>Here is some very exciting content...</h1> </asp:Content>
Design-time understøttelse • Når indholdssiderene designes, så vises master-siden i gråt … "Master Page"- delen vises, menkan ikke redigeres content placeholders kan redigeres
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..."; } }
Arbejde med Content Pages • Indholdet i indholdssider kan være hvad som helst: • statisk tekst og billeder • dynamisk funktionalitet via kontroller
Temaer (Themes) • Stylesheets til ASP.NET web-applikationer
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 <%@ Page Language="C#"Theme="BasicBlue"%>
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 Day.skin <asp:buttonrunat="server"borderstyle="Solid" borderwidth="2px"bordercolor="#66ff66" backcolor="#99ffff"/> <asp:calendarrunat="server"borderstyle="Solid" borderwidth="2px"bordercolor="#66ff66" backcolor="#99ffff"/> <asp:TextBoxrunat="server"backcolor="#99ffff"forecolor="#FF3333"/>
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: <%@PageLanguage="C#"Theme="Day" %> web.config <configuration> <system.web> <pagestheme="Night"/> </system.web> </configuration>
Navigation på webstedet • Kontroller til navigation mellem siderne på webstedet
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*/); }
Navigationskontroller • Alle tre kontroller baseres på en XML .sitemap fil … web.sitemap <siteMapxmlns="http://schemas.microsoft.com/..." > <siteMapNodetitle="Home"url="~/Default.aspx" description="..."> <siteMapNodetitle="Departments" url="~/departments/default.aspx" > <siteMapNodetitle="Accounting" url="~/departments/accounting.aspx" /> <siteMapNodetitle="Development" url="~/departments/develop.aspx" > ...
Brug af navigationskontrollerne <siteMap> <siteMapNodetitle="Home"url="~/Default.aspx"> <siteMapNodetitle="Products"url="~/Products.aspx" /> <siteMapNodetitle="Contact Us"url="~/Contact.aspx" /> </siteMapNode> </siteMap> • 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 <siteMapNode>-elementer • en hierarkisk menu er defineret ved indlejrede <siteMapNode>-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]
Eksempel • En simpel flad menu vist med alle tre menukontroller • Menu • Orientation: Horizontal • StaticDisplayLevels: 2 TreeView SiteMapPath
Expression Web Designer • Microsoft's Expression Web Designer
Expression Web Designer • Microsoft's erstatning for FrontPage, "ASP.NET-aware"… • Man kan hoppe frem og tilbage mellem VS 2005 and EWD
Hvad så? • Øvelse #5
<blank> • …
