Layouts - en innføring

En layout er hoveddesignet til en nettside. Det vil si i praksis si den filen som inneholder html-taggene for head og body. Her er en innføring i hvilke muligheter som ligger her.

En layout er en såkalt MasterPage i ASP.NET. Det medfører at det er noen faste element som alltid må ligge her. Her er en "tom" layout:

<%@ Master Language="C#" AutoEventWireup="true" %>
<form id="form1" runat="server">
   <asp:ContentPlaceHolder ID="content" runat="server" />
</form>

Den første linjen må alltid bare være øverst i filen. Resten skal ligge mellom body-taggene. ASP.NET krever at det er én stor form rundt alt innholdet, så innholdet på siden vises derfor mellom form-taggene. Den taggen som begynner med <asp:ContentPlaceHolder plasseres der hvor resten av innholdet skal komme inn. Den tilsvarer den tidligere <!--e content --> taggen som ble brukt i tidligere versjoner.

For å bygge videre på Exampleet over, kan vi se på hvordan layouten ser ut med innhold i. Vi skal i dette Exampleet også se på hvordan en setter inn en snippet i en layout.

<%@ Master Language="C#" AutoEventWireup="true" Inherits="eR2MasterPage" %>
<%@ Import Namespace="eR2" %>
<!doctype html>
<html>
<head runat="server">
    <meta charset="utf-8" />
    <title>Tittel</title>
    <link rel="stylesheet" href="/site/partner.eredaktor.no/design/layouts/css/style.css" />
    <script defer src="/site/partner.eredaktor.no/design/layouts/js/script.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="pageholder">
        <div class="menu-main">
            <er:include SnippetName="MainMenu.snippet.ascx" runat="server" />
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="content" runat="server" />
        </div>
    </div>
    </form>
</body>
</html>

I tillegg til vanlig html, er det lagt til to elementer til i Exampleet her. Det første er på linje 2, og angir av vi ønsker å benytte oss av eRedaktør2 utviklingsfunksjonalitet i layouten. Det andre er på linje 15, hvor vi henter inn en snippet som heter MainMenu.snippet.ascx. Legg merke til at det står runat="server" inne i html-elementet. Denne må være med for at serveren skal gjøre jobben sin. Du vil også legge merke til at det står tilsvarende informasjon på flere andre elementer også.

Neste artikkel om layouts handler litt mer om utvikling, men er også nyttig for designimplementører å lese. Les artikkelen her.