Uživatelský control je kousek kódu, který můžete vložit do mnoha stránek. Master je naopak rámec, do kterého může svůj obsah vložit mnoho stánek. Zní to záhadně? Nebojte se, za chvíli to začne dávat smysl.
Uživatelské controly
Uživatelské controly se hodí pro opakující se kousky kódu. Vlastně to není nic jiného, než obyčejný include. Na našem ukázkovém blogu se nám hodí pro útržky článku. Ty totiž ve stejné podobě vypisujeme na dvou stránkách:
- na homepage,
- na stránce článků filtrovaných podle kategorie.
Kdybychom se později např. rozhodli články doplnit o úvodní fotku, museli bychom upravit dvě stránky. Při použití uživatelského controlu to bude stačit na jednom místě – což bude méně práce a snazší na údržbu. Pomůže vám to váš kód udržet DRY.
Vytvořte soubor /controls/teaser.ascx s následujícím obsahem:
<%@ Control %>
<h2>
<je:avar runat="server" href="blogpost.aspx">
<je:item runat="server" field=".title" />
</je:avar>
</h2>
<je:item runat="server" field=".published" tag="time" />
<je:item runat="server" field=".text" format="length: 300" tag="p" />
Kód je naprosto totožný s tím, který jsme používali uvnitř <je:repeater> pro článek v /cs/default.aspx a /cs/category.aspx.
Ve .aspx stránce, v které potom chceme uživatelský control použít, ho musíme nejprve zaregistrovat, nejlépe hned v záhlaví:
<%@ Register TagPrefix="uc" TagName="teaser" Src="~/controls/teaser.ascx" %>
Atribut src říká, kde je soubor controlu, tagName pod jakým jménem ho chceme ve stránce používat a tagprefix v jakém namespace bude umístěn. Kdekoliv v .aspx pak můžeme použít
<uc:teaser runat="server" />
a JellyPot tuto značku nahradí odpovídajícím kódem.
Homepage z kapitoly Blog za 5 minut tedy upravíme takto:
<%@ Page %>
<%@ Register TagPrefix="uc" TagName="teaser" Src="~/controls/teaser.ascx" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<je:stylelink runat="server" href="/assets/css/main.css" />
<title>Můj cvičný blog</title>
</head>
<body>
<header>
<je:a runat="server" class="logo" href="/cs/">Můj blog</je:a>
<nav>
<je:a runat="server" href="/cs/">Homepage</je:a>
<je:a runat="server" href="/cs/about.aspx">O autorovi</je:a>
</nav>
</header>
<main>
<je:repeater runat="server" source="blogPost">
<item>
<uc:teaser runat="server" />
</item>
</je:repeater>
</main>
</body>
</html>
Stránku kategorií bychom upravili zcela stejným způsobem, to už určitě zvládnete sami.
Master
Master je takový uživatelský control naruby. Zatímco uživatelský control je kousek kódu, který můžete vložit do mnoha stránek, master je naopak rámec s vyznačenými oblastmi, do nichž mnoho stránek může vložit obsah. Master se často používá pro záhlaví a zápatí stránek, která jsou společná celému webu.
I samotné použití je podobné uživatelským controlům. Ve složce masters vytvoříme soubor main.master s následujícím obsahem:
<%@ Master %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<je:stylelink runat="server" href="/assets/css/main.css" />
<je:region runat="server" id="head" />
</head>
<body>
<header>
<je:a runat="server" class="logo" href="/cs/">Můj blog</je:a>
<nav>
<je:a runat="server" href="/cs/">Homepage</je:a>
<je:a runat="server" href="/cs/about.aspx">O autorovi</je:a>
</nav>
</header>
<main>
<je:region runat="server" id="main" />
</main>
</body>
</html>
Značka <je:region> označuje oblast, do které mohou stránky vkládat libovolný obsah. Jak je z příkladu vidět, regionů může být v masteru víc, jen musí mít každý unikátní jméno zapsané v atributu id. Master ve stránce potom použijeme takto:
<%@ Page %> <je:master runat="server" href="~/masters/main.master" /> <je:content runat="server" forRegion="head"> <!-- sem přijde obsah pro hlavičku --> </je:content> <je:content runat="server" forRegion="main"> <!-- sem přijde hlavní obsah --> </je:content>
V atributu forRegion controlu <je:content> uvádíme jméno z atributu id controlu <je:region>, do které chceme obsah vypsat. Homepage, ve které jsme již použili uživatelský control, by vypadala i s masterem takto:
<%@ Page %>
<%@ Register TagPrefix="uc" TagName="teaser" Src="~/controls/teaser.ascx" %>
<je:master runat="server" href="~/masters/main.master" />
<je:content runat="server" forRegion="head">
<title>Můj cvičný blog</title>
</je:content>
<je:content runat="server" forRegion="main">
<je:repeater runat="server" source="blogPost">
<item>
<uc:teaser runat="server" />
</item>
</je:repeater>
</je:content>
Ostatní stránky blogu bychom pak upravili stejně. To už necháme na vás.