4. diel - Masterpage a navigácia v ASP.NET

V minulej lekcii, Validácia formulárov v ASP.NET , sme sa naučili validovať formuláre. V dnešnom C# .NET tutoriálu naprogramujeme web s viacerými podstránkami, medzi ktorými sa budeme navigovať.

Vytvorte si nový projekt, opäť pôjde o prázdnu ASP.NET Web Application, ktorú pomenujeme podstránky.

Masterpage

K projektu pridáme novú položku, v nasledujúcom dialógu vyberieme Web Forms master Page, ktorú pomenujeme MasterPage.Master.

Je nám vygenerovaná jednoduchá šablóna s nasledujúce 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>

Šablóna slúži ako východiskový layout stránky, v ktorom sa neskôr zobrazujú jednotlivé podstránky. Za týmto účelom tu nájdeme 2 elementy ContentPlaceHolder. Jeden v hlavičke a druhý v tele. Do nich sa vložia hlavička a telo vkladané podstránky.

Ani v dnešnom tutoriálu sa ešte nebudeme zaoberať dizajnom a preto do šablóny len pridáme za začiatok body nadpis H1:

<h1>HoBiho osobní blog</h1>

Obsahovej stránky

Jednotlivé obsahovej stránky pridáme kliknutím pravým tlačidlom na Projekt -> Add New Item a následne zvolíme Web Form with Master Page. Predvolené podstránku pomenujeme Default.

Web Form s Master Page v ASP.NET - ASP.NET Web Forms

Zobrazí sa ešte jeden dialóg, v ktorom môžeme vybrať ktorú Master Page bude Web Form používať. My tu máme len jednu, čiže ho potvrdíme.

Pozn: V Solution Exploreri možno obsahovú stránku pridať tiež pravým kliknutím na masterpage a zvolením Add Content Page. Taká obsahová stránka má bohužiaľ vygenerovanú triedu ako WebFormX a tú už nemožno premenovať. Preto tento spôsob nebudeme používať.

Vygeneroval sa nám nasledujúci kód s dvoma elementy Content. Prvá obsahuje hlavičkový časť podstránky, ktorá sa má vložiť do elementu

<%@ 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>

Úplne rovnako si pridáme ešte obsahovej stránky pre zručnosti, referencie a kontakt, vymyslite si do nich nejaký obsah. Predvolená stránka sa nastaví tá prvýkrát pridaná, prípadne ju môžeme zmeniť pomocou voľby Set As Start Page u Web Formu v Solution Exploreri.

Aplikáciu môžeme teraz spustiť, objaví sa masterpage, v ktorej je vložená obsahová stránka Default.

Použitie masterpage v ASP.NET - ASP.NET Web Forms

Sitemap

K projektu si teraz pridáme mapu stránok. To je súbor, v ktorom je zoznam všetkých stránok webu. Ak budeme tento koncept využívať, ASP.NET nám z mapy neskôr vygeneruje navigačné menu a ďalšie komponenty webu.

SiteMap pridáme opäť ako novú položku pravým kliknutím na projekt.

Jeho obsah upravíme do nasledujúcej 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 súbor je XML, čo by nás nemalo príliš prekvapiť. Každej podstránke definujeme jej url, titulok a popisok. URL zadávame v ASP.NET predsadené vlnovkou, čo je zástupný znak pre koreňovú zložku webu.

Štruktúra je stromová, všetky podstránky patrí pod hlavnú stránku (Default.aspx). Ďalšie podstránky môžeme opäť rozvetviť do stromovej štruktúry, v našom príklade to však nevyužijeme.

SiteMapPath a TreeView

Na záver si spomeňme ešte 2 kontrolky z ToolBox, ktoré súvisia s navigáciou.

SiteMapPath

Kontrolka zobrazuje tzv. "Drobečková navigáciu". Názov vychádza z poviedok typu Janko a Marienka, ktorí za sebou nechávali omrvinky, aby sa mohli vrátiť späť domov. Kontrolka teda zobrazí aktuálny podstránku a cestu cez jednotlivé nadstránky až ku koreňu. Na SiteMap sa napojí sama.

TREEVIEW

TreeView funguje po napojenie na SiteMap podobne ako navigačné menu. Rozdiel je v tom, že TreeView zobrazuje stromovú štruktúru, čo uplatníme hlavne u zložitejších webov, kde sa napr. Stránky produkt ďalej vetví na ďalšie kategórie. S rozvetvením počíta aj kontrolka Menu, ktorá by v tomto prípade vyrenderovala rozbaľovacej podmenu. Rovnako ako v Menu aj TreeView by sme nastavili dátový zdroj na teraz už existujúce SiteMapDataSource1.

Drobečková navigáciu a TreeView si aspoň ukázať:

TreeView a SiteMapPath v ASP.NET - ASP.NET Web Forms

Zdrojové kódy dnešného projektu sú v prílohe k stiahnutiu. V budúcej lekcii, Úprava template Web Forms v ASP.NET , začneme pracovať na jednoduchom blogu s databázou, štýly a proste všetkým, čo k nemu patrí

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 300x (30.13 kB)
Aplikácia je vrátane zdrojových kódov v jazyku C#

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity