Skip to Content

ASP.Net 2 - šablony Master Page

Při vývoji webu často potřebujeme měnit či editovat jen určitou oblast plochy stránky a u statických částí zachovat vzhled, tak aby byl ve všech ostatních stránkách stejný a nemusel se kódovat znovu a znovu. Týká se to například bannerů, loga, menu atd.
Z PHP známe způsob použití funkce include(), která nám umožňuje udělat jakousi šablonu například pro patičku stránky, kterou bychom mohli nazvat třeba footer.inc.php. Do souboru můžeme vložit funkce či design zápatí a do stránky jen vložíme odkaz (include) na tento soubor. Šablona by měla vždy mít příponu .php a ne .inc, jinak nebude nastaveno parsování, a uživatel by si kdykoliv mohl prohlédnout zdrojový kód skriptu.

Mimo funkce include() můžeme ještě využít funkci require(). Používá se například pro jednotné napojení k databázi, což je věc nepostradatelná a nutná k běhu aplikace, proto vyvolání chyby způsobí fatal error a skriptování se ukončí. Při chybě s použitím include() se pokračuje v konání skriptu dál, jen třeba s varováním. Pokud chceme mít jistotu, že se funkce nevyvolá náhodou dvakrát či vícekrát, použijeme např. funkci require_once.

A nyní přejděme k ASP. Net šablonám, které nesou název Master Pages. Principy fungování šablon v této technologii jsou trochu jinak koncipované. Pracujeme zde s jakousi předlohou či předlohami, které můžou být do sebe i vnořené. Vytváříme tedy postupně Master stránky a pak stránky s obsahem, které nazýváme kontextové. Stránku Master od ostatních kontextových stránek poznáme podle přípony .master a direktivy v záhlaví.
(<%@ Master language="VB" masterpagefile="potraviny.master" %>
či normální stránka:
<%@ Page language="C#" masterpagefile="prodej.master" %>)

Pro příklad vložíme obsah stránky prodej.aspx do master šablony potraviny.master, která obsahuje logo ze zelenými potravinami.

Master stránka potraviny.master

<%@ Master Language="C#" %>
<html>
<head><title>Master Page</title></head>
<body style="margin:0;">
<form runat="server">

<table border="0" width="100%">
<tr><td>img src="logo.gif"</td></tr>
</table><br />

<asp:contentplaceholder runat="server" id="Obsah" />
</form>
</body>
</html>

Rohy

A nakonec to dáme dohromady:

Kontextová stránka prodej.aspx napojená na šablonu potraviny.master.

<%@ Page language="C#" MasterPageFile="potraviny.master" %>

<asp:content ID="Content1" runat="server" contentplaceholderID="Obsah">
<div>
<asp:label runat="server" id="label1" text="Zelené potraviny - Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
</div>
</asp:content>

Rohy

Všiměte si ve stránce Master prvku asp:contentplaceholder s unikátním ID, které odkazuje na obsah tohoto "placu" definovaného ve stránce prodej.aspx (Zelené potraviny lorem ipsum...).
Nezapomeňte, že celá stránka se bude jmenovat prodej.aspx, i když je jaksi utlačená naší šablonou.

Master pages můžou mít i více oblastí, kam mohou stránky s obsahem vkládat obsah a také se šablony mohou do sebe vnořovat.

Hiearchii úrovní si pro náš příklad můžeme uspořádat takto:

       Potraviny.master
prodej.master    nakup.master
prodej.aspx       nakup.aspx

Více úrovní znamená, že v hlavní stránce Master mohou být i další podstránky Master a pak teprve naše content stránka.
Na nejvyšší úrovni se často nachází pilíř celého designu stránek (Např. záhlaví, zápatí s informacemi atd...)
Další podúrovňové master, které jsou do hlavní stránky zahrnuty už budou mít doplňkový charakter tomu či onomu zaměření (prodej x nákup).
Do naší podúrovňové master si přidáme obrázek zelené lišty s nápisem "Prodej".

potraviny.master

<%@ Master Language="VB" %>
<html>
<head><title>Master Page</title></head>
<body style="margin:0;">
<form runat="server">

<table border="0" width="100%">
<tr><td><"img src="logo.gif"></td></tr>
</table><br />

<asp:contentplaceholder runat="server" id="Menu" />
</form>
</body>
</html>

prodej.master

<%@ Master Language="VB" MasterPageFile="potraviny.master" %>
<asp:content runat="server" contentplaceholderID="Menu">
<table width="100%">
<tr><td><"img src="lista.gif"></td></tr>
</table><br />
<asp:contentplaceholder runat="server" id="Obsah" />
</asp:content>

Rohy

prodej.aspx

<%@ Page language="VB" MasterPageFile="prodej.master" %>

<asp:content runat="server" contentplaceholderID="Obsah">
<div>
<asp:label runat="server" id="label1" text="Zelené potraviny - Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
</div>
</asp:content>

Když si kód prohlédneme pořádně, zjistíme, že logo v 1. master se bude zobrazovat všude - jak na stránce nakup.aspx i prodej.aspx. Dále nás to odkazuje na contentplaceholder "Menu". V podstránce master je obsah tohoto místa a odkaz na další s názvem "Obsah", který najdeme v kontextové stránce.

Intuitivní postup najdeme ve vývojovém prostředí Visual Web Developeru, kde si vytvoříme novou stránku Master Page (Stránka předlohy). Rozvrhneme si části webové stránky a také přesuneme myší prvek ContentPlaceHolder do části, kterou potřebujeme.
Dále vytvoříme naší kontextovou stránku prodej.aspx a nezapomeneme zaškrtnout políčko "Select master page", aby se zajistila vazba na naší právě vytvořenou stránku MasterPage.