Programmeren in ASP.NET/Master-pagina's

Een van de zaken die ontbreken in ASP.NET 1.x is de mogelijkheid een sjabloon te definiëren voor meerdere pagina’s. De meeste ontwikkelaars lossen dit op door aan het begin en einde van iedere pagina een (user)control te plaatsen die de algemene opmaak van de pagina verzorgt. ASP.NET 2.0 biedt een veel elegantere oplossing in de vorm van Master-pagina's. Een master-pagina is een paginasjabloon.

In elke pagina kan je instellen welk sjabloon hij gebruikt. Het interessante is dat je ook sjablonen kunt maken op basis van een sjabloon. Zo kun je dus voor delen van een applicatie een enigszins afwijkende opmaak gebruiken, maar toch eventuele wijzigingen aan de algehele opmaak meenemen. Je kunt als het ware een hele hiërarchie van sjablonen maken. Ook kun je tijdens het uitvoeren bepalen welke master-pagina een pagina gebruikt, zodat je bijvoorbeeld gebruikers hun eigen opmaak kunt laten kiezen.

Een master-pagina maken

Een master-pagina werkt met zogenaamde ContentPlaceHolder-controls waarmee één of meer regionen in het sjabloon kunnen worden aangegeven. In de pagina plaats je vervolgens Content-controls die aan de hand van de ContentPlaceHolderID aangeven voor welke placeholder ze inhoud bevatten. Hier is een simpel voorbeeld van een master-pagina:

wiki.master

<%@ Master %>
<html >
  <head>
    <title>Master-pagina</title>
  </head>
<body>
  <form runat="server">
    <h1>Master-pagina</h1>
    <hr />
    <asp:contentplaceholder id="Body" runat="server" ></asp:contentplaceholder>
    <hr />
    <asp:contentplaceholder id="Hulpvak" runat="server" ></asp:contentplaceholder>
    <hr />
    &copy 2006 WIKIPEDIA
  </form>
</body>
</html>

De master-pagina ziet eruit als een gewone HTML-pagina, maar wordt bewaard met de extensie .master. Verder bevat ze geen Page-directief, maar wel een Master-directief, en verschillende ContentPlaceHolder-controls.

Alles wat je in de master-pagina zet buiten de contentplaceholders zal terugkomen op elke pagina die de master gebruikt. Je mag eender welke HTML- of ASP.NET- code in de master-pagina opnemen.

Een master-pagina gebruiken

Hier is een pagina die de bovenstaande Page Master gebruikt:

content.aspx

<%@ Page Language="VB" MasterPageFile="~/wiki.master" Title="Content pagina" %>

<asp:Content ContentPlaceHolderID="Body" Runat="server">
  <asp:Label ID="lbl1" Runat="server" BackColor="Green">
    Een label in de Body ContentPlaceHolder
  </asp:Label>
</asp:Content>

<asp:Content ContentPlaceHolderID="Hulpvak" Runat="Server">
   Hier kan nog andere tekst verschijnen afhankelijk van de pagina.
</asp:Content>

De master-pagina staat ingesteld in het Page-directief, met behulp van de MasterPageFile-property.

Belangrijk: vergeet nooit de Title-property in te stellen, deze tekst verschijnt binnen de <title>-tag op de pagina.

Merk op dat de pagina content.aspx zelf geen <html>- of <body>-tag meer bevat. Een <script>-sectie kan je zelf altijd toevoegen als er code moet uitgevoerd worden.

De Content-controls bevatten de eigenlijke inhoud van de pagina. Elke Content-control heeft een eigenschap ContentPlaceHolderID, die bepaalt binnen welke ContentPlaceHolder van de master-pagina de inhoud zal verschijnen.

Master-pagina's kunnen ook genest worden, dus de ene master-pagina kan al afgeleid zijn van een andere.

Plaats van de master-pagina

Soms staat de master-pagina niet in dezelfde folder als de pagina. Meestal is dit geen probleem.

Als de master-pagina verwijst naar andere bestanden, zoals stylesheets, afbeeldingen, of met hyperlinks bijvoorbeeld, dan moet je opletten, want als de pagina de verwijzing gewoon overneemt, dan klopt ze niet meer.

Bijvoorbeeld:

<head>
  <link rel="stylesheet" href="StyleSheet.css" type="text/css" />
</head>
...
<a href="inhoud.aspx">Inhoud</a>
...
<img alt="Bloem" src="Images/bloem.jpg"/>

Dit voorbeeld werkt goed zolang de pagina in dezelfde folder staat als de master-pagina. In het andere geval kan je twee dingen doen:

Gebruik absolute URL's in de master-pagina, bijvoorbeeld

<img src="/mijntoepassing/images/banner.gif" /> 
of
<img src="http://www.mijndomein.com/mijntoepassing/images/banner.gif" />

Gebruik applicatie-relatieve URL's in server controls, bijvoorbeeld

<asp:Image ImageUrl="~/images/banner.gif" runat="server" />

Ter herinnering: de tilde ~ verwijst naar de applicatie-root. Deze werkt alleen als je runat="server" gebruikt.

Het bovenstaande voorbeeld wordt dan:

<head runat="server">
  <link rel="stylesheet" href="~/StyleSheet.css" type="text/css" runat="server" />
</head>
...
<a id="A1" href="pages/inhoud.aspx" runat="server">Inhoud</a>
...
<asp:Image ID="Image1" AlternateText="Bloem" ImageUrl="~/Images/bloem.jpg" 
runat="server"/>

← Validering

Programmeren in ASP.NET

Navigatie →