4. díl - MasterPage a navigace v ASP.NET

C# .NET ASP.NET Web Forms MasterPage a navigace v ASP.NET

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET jsme se naučili validovat formuláře. V dnešním dí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.

MasterPage v ASP.NET

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

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 devbook.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

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

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.

Menu

Přejdeme do grafického návrháře v MasterPage a z ToolBoxu vložíme někam do divu formuláře kontrolku Menu tak, aby byla nad ContentPlaceHolder. Menu je v ToolBoxu v sekci Navigation.

<form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu1" runat="server">
        </asp:Menu>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

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

Označenému Menu v oknu Properties nastavíme DataSourceID na New data source... a v následujícím dialogu vybereme Site Map.

Navigační menu v ASP.NET

Tím jsme nastavili Menu zdroj dat na SiteMap.

Když aplikaci nyní spustíme, budeme schopni pomocí navigačního menu přecházet mezi jednotlivými podstránkami.

Navigační menu v ASP.NET Web Forms

Menu můžeme bohatě uzpůsobit. My mu nastavíme Orientation na Horizontal (vodorovnou). Na formuláři máme také vygenerovaný element SiteMapDataSource1, tomu vypneme ShowStartingNode, což je zobrazování kořenové stránky.

Horizontální navigační menu v ASP.NET Web Forms

Chybí nám již jen dodat nějaký CSS styl, což zatím opomeneme.

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:

TreeView a SiteMapPath v ASP.NET

Zdrojové kódy dnešního projektu jsou v příloze ke stažení. Příště začneme pracovat na jednoduchém blogu s databází, styly a prostě vším, co k němu patří :)


 

Stáhnout

Staženo 242x (30.13 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (7 hlasů) :
4.857144.857144.857144.857144.85714


 


Miniatura
Předchozí článek
Validace formulářů v ASP.NET
Miniatura
Všechny články v sekci
ASP.NET Web Forms
Miniatura
Následující článek
Úprava template Web Forms v ASP.NET

 

 

Komentáře
Zobrazit starší komentáře (5)

Avatar
Libor Šimo (libcosenior):

Nie som si istý, že máš pravdu.
Mne sa zdá, že sdraco je výborne fungujúci program s umelou inteligenciou vyššieho stupňa. ]:>
Navyše má integrované niektoré pozitívne ľudské vlastnosti. ;)

Editováno 24.1.2014 12:59
Odpovědět  +2 24.1.2014 12:57
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
mkub
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
mkub:

myslis, ze je to akysi mimoriadne inteligentny bot? mimochodom, nieco na tom moze byt aj pravdy...

ale aj bot potrebuje energiu a potrebuje na cas vypnut, aby sa zregeneroval a dobili sa baterky ;)

 
Odpovědět  +1 24.1.2014 13:53
Avatar
Petr Čech (czubehead):

Podívali jste se někdo, co je na http://www.hobi.cz ? :P

Odpovědět  +2 8.2.2014 9:35
Why so serious? -Joker
Avatar
Odpovídá na Petr Čech (czubehead)
Michal Žůrek (misaz):

ano, řešilo se to tu když si HoBi vybíral novou doménu. Má takové skvělé jméno.

Odpovědět  +1 8.2.2014 10:00
Nesnáším {}, proto se jim vyhýbám.
Avatar
himak
Člen
Avatar
himak:

Vyborny clanok.

 
Odpovědět  +1 6.3.2014 14:49
Avatar
kowax
Člen
Avatar
kowax:

Super článek! ;-)

 
Odpovědět 21.4.2014 21:22
Avatar
Michal Štěpánek:

možná by bylo dobré zmínit, že toto když bude ve web.config

<siteMap enabled="true" defaultProvider="MySitemapProvider">
      <providers>
        <clear/>
        <add name="MySitemapProvider" type="System.Web.XmlSiteMapProvider" siteMapFile="Web.sitemap" securityTrimmingEnabled="true"/>
      </providers>
    </siteMap>

a bude securityTrimmin­gEnabled="tru­e", tak se aplikace automaticky postará, aby v menu nebyly vidět položky, které mají být viděny jen oprávněným osobám, tzn, po přihlášení a s tou správnou "rolí"...

Odpovědět  +1 29.4.2014 8:52
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
J.V.
Člen
Avatar
J.V.:

Úspěšně jsem absolvoval tvoje skvělé tutoriály C#. Můj první problém je Projekt -> Add New Item Master Page / Site Map => oprávnění přístupu k registru (viz.obr.). Bez výsledku jsem zkoušel How to msdn.microsoft.com. Pomóc, pls., děkuji (W7 prof. + VS15)

 
Odpovědět 9.12.2015 18:07
Avatar
Tomáš Jelínek:

Ahoj, po otevření a spuštění zdrojáku (stažený z tohoto článku) mi píše prohlížeč chybu konfigurace:

Unable to connect to any of the specified MySQL hosts., viz obrázek.

Používám VS 2015. Poradí někdo co s tím?

Odpovědět 7. dubna 9:04
Lenost je matka pokroku.
Avatar
Odpovídá na Tomáš Jelínek
Michal Štěpánek:

Podívej se pořádně na tu chybu, co ti píše.
Chyba je v tvém souboru machine.config, který je v C:\Windows\Mi­crosoft.NET\Fra­mework\v4.0.30319\Con­fig
Pravděpodobně jsi se v něm šťoural a nastavil sis tam blbě nějakou defaultní konektivitu...

Odpovědět 7. dubna 10:28
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 15. Zobrazit vše