Lekce 4 - MasterPage a navigace v ASP.NET

V minulé lekci, Validace formulářů v ASP.NET, jsme se naučili validovat formuláře.

V dnešním C# .NET tutoriálu naprogramujeme web s více podstránkami, mezi kterými se budeme navigovat.

Vytvořte si nový projekt, opět půjde o prázdnou ASP.NET Web Application, kterou pojmenujeme Podstranky.

MasterPage

K projektu přidáme novou položku, v následujícím dialogu vybereme Web Forms master Page, kterou pojmenujeme MasterPage.Master.

Je nám vygenerována jednoduchá šablona s následující podobou:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="Podstranky.MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Šablona slouží jako výchozí layout stránky, ve kterém se později zobrazují jednotlivé podstránky. Za tímto účelem zde nalezneme 2 elementy ContentPlaceHolder. Jeden v hlavičce a druhý v těle. Do nich se vloží hlavička a tělo vkládané podstránky.

Ani v dnešním tutoriálu se ještě nebudeme zabývat designem a proto do šablony pouze přidáme za začátek body nadpis H1:

<h1>HoBiho osobní blog</h1>

Obsahové stránky

Jednotlivé obsahové stránky přidáme kliknutím pravým tlačítkem na Projekt -> Add New Item a následně zvolíme Web Form with Master Page. Výchozí podstránku pojmenujeme Default.

Web Form s Master Page v ASP.NET - ASP.NET Web Forms - Webové aplikace v C#

Zobrazí se ještě jeden dialog, ve kterém můžeme vybrat kterou Master Page bude Web Form používat. My zde máme jen jednu, čili ho potvrdíme.

Pozn: V Solution Exploreru lze obsahovou stránku přidat také pravým kliknutím na MasterPage a zvolením Add Content Page. Taková obsahová stránka má bohužel vygenerovanou třídu jako WebFormX a tu již nelze přejmenovat. Proto tento způsob nebudeme používat.

Vygeneroval se nám následující kód se dvěma elementy Content. První obsahuje hlavičkovou část podstránky, která se má vložit do elementu <head> v MasterPage. Tu zatím potřebovat nebudeme. Do obsahové části si vložíme nadpis druhé úrovně a nějaký text.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Podstranky.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h2>O mně</h2>
    <p>Jmenuji se Honza Bittner a toto je můj osobní blog. V současné době jsem zaměstnán jako HTML/JS developer webového studia Websoft. Mimo to působím jako redaktor na programátorské sociální síti itnetwork.cz.</p>
</asp:Content>

Úplně stejně si přidáme ještě obsahové stránky pro dovednosti, reference a kontakt, vymyslete si do nich nějaký obsah. Výchozí stránka se nastaví ta prvně přidaná, případně ji můžeme změnit pomocí volby Set As Start Page u Web Formu v Solution Exploreru.

Aplikaci můžeme nyní spustit, objeví se MasterPage, ve které je vložená obsahová stránka Default.

Použití MasterPage v ASP.NET - ASP.NET Web Forms - Webové aplikace v C#

SiteMap

K projektu si nyní přidáme mapu stránek. To je soubor, ve kterém je seznam všech stránek webu. Pokud budeme tento koncept využívat, ASP.NET nám z mapy později vygeneruje navigační menu a další komponenty webu.

SiteMap přidáme opět jako novou položku pravým kliknutím na projekt.

SiteMap z ASP.NET - ASP.NET Web Forms - Webové aplikace v C#

Jeho obsah upravíme do následující podoby:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Default.aspx" title="HoBiho blog"  description="">
        <siteMapNode url="~/Dovednosti.aspx" title="Dovednosti"  description="Mé dovednosti" />
        <siteMapNode url="~/Reference.aspx" title="Reference"  description="Mé reference" />
        <siteMapNode url="~/Kontakt.aspx" title="Kontakt"  description="Kontaktujte mě" />
    </siteMapNode>
</siteMap>

Vidíme, že soubor je XML, což by nás nemělo příliš překvapit. Každé podstránce definujeme její url, titulek a popisek. URL zadáváme v ASP.NET předsazené vlnovkou, což je zástupný znak pro kořenovou složku webu.

Struktura je stromová, všechny podstránky patří pod hlavní stránku (Default.aspx). Další podstránky můžeme opět rozvětvit do stromové struktury, v našem příkladu to však nevyužijeme.

SiteMapPath a TreeView

Na závěr si zmiňme ještě 2 kontrolky z ToolBoxu, které souvisí s navigací.

SiteMapPath

Kontrolka zobrazuje tzv. "drobečkovou navigaci". Název vychází z povídek typu Jeníček a Mařenka, kteří za sebou nechávali drobečky, aby se mohli vrátit zpět domů. Kontrolka tedy zobrazí aktuální podstránku a cestu přes jednotlivé nadstránky až ke kořeni. Na SiteMap se napojí sama.

TreeView

TreeView funguje po napojení na SiteMap podobně jako navigační menu. Rozdíl je v tom, že TreeView zobrazuje stromovou strukturu, což uplatníme hlavně u složitějších webů, kde se např. stránky produkt dále větví na další kategorie. S větvením počítá i kontrolka Menu, která by v tomto případě vyrenderovala rozbalovací podmenu. Stejně jako v Menu i TreeView bychom nastavili datový zdroj na nyní již existující SiteMapDataSource1.

Drobečkovou navigaci a TreeView si alespoň ukážme: