Lekce 9 - Úprava layotu a obsahových stránek v ASP.NET Core MVC

V minulé lekci, Úprava template MVC v ASP.NET Core, jsme začali s úpravou předgenerovaného projektu z Visual Studia do podoby osobního blogu.

V dnešním ASP.NET Core tutoriálu dokončíme úpravu struktury layotu a obsahových stránek tak, aby vypadaly jako osobní blog.

Úprava layoutu

Přesuneme se do pohledu _Layout umístěného ve složce Views/Shared/. Již víme, že tento layout obsahuje základní HTML strukturu (hlavičku, menu, patičku). Dovnitř se renderuje aktivní View, tedy např. kontaktní stránka. Této funkcionality je docíleno pomocí souboru _ViewStart.cshtml, kde je soubor s layoutem nastavený.

My si nyní pohled _Layout upravíme tak, aby vypadal jako soubor index.html z HoBiho šablony.

Hlavička `<head>`

Nejprve upravíme hlavičku webu <head>, kde nastavíme jeho autora, ikonu a titulek a přidáme odkaz na CSS soubor knihovny lightbox2:

<html lang="cs">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="HoBi" />
    <title>@ViewData["Title"]</title>
    <link rel="shortcut icon" href="~/images/ikona.ico" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <!-- Zbytek obsahu... -->
</body>
</html>

Ke složce wwwroot/, kde se nalézají odkazované soubory, přistupujeme přes znak tildy ~. V elementu <html> jsme zároveň změnili jazyk stránky na češtinu.

Všimněme si odkazu <link> na soubor s našimi CSS styly. Použitím tag helperu asp-append-version a jeho nastavením na hodnotu true zajistíme, že klient bude mít u sebe vždy aktuální verzi importovaného souboru.

Tělo `<body>`

Nyní upravíme část <body> podle obsahu <body> z HoBiho šablony (ze souboru index.html).

Hlavička

Začneme hlavičkou <header>, kde v navigačním menu oproti HoBiho šabloně akorát zaměníme položku "O mně" za položku "Články":

<body>
    <header>
        <div id="logo">
            <h1>Honza<span>Bittner</span></h1>
            <small>webdeveloper</small>
        </div>
        <nav>
            <ul>
                <li><a asp-controller="Home" asp-action="Index">Domů</a></li>
                <li><a asp-controller="Articles" asp-action="Index">Články</a></li>
                <li><a asp-controller="Home" asp-action="Skills">Dovednosti</a></li>
                <li><a asp-controller="Home" asp-action="References">Reference</a></li>
                <li><a class="kontakt-tlacitko" asp-controller="Home" asp-action="Contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>
</body>

Všimněme si, že navigační odkazy na metody kontroleru používají nám již známé atributy asp-controller a asp-action. Tyto atributy sice známe z formulářů, můžeme je však používat i u odkazů <a>. Atribut asp-action odkazu určuje, na jakou akci se odkazuje, a atribut asp-controller, v jakém kontroleru se má daná akce hledat.

Všechny uvedené akce a kontrolery si postupně vytvoříme.

Hlavní obsah

Hlavní obsah každé stránky spolu s jejím nadpisem je obalen v elementu <article>. Nadpis stránky budeme brát z kolekce ViewData (@ViewData["Title"]), kam jej na každé stránce uložíme:

<body>
    <!-- Zbytek obsahu... -->

    <article>
        <header>
            <h1>@ViewData["Title"]</h1>
        </header>

        <section>
            @RenderBody()
        </section>
    </article>
</body>

Samotný obsah je pak obalen elementem <section>. Obsah stránky do layoutu vyrenderujeme (vložíme) zavoláním metody RenderBody(). Jestliže tedy přejdeme např. na stránku Index, tak se celý její obsah vloží na místo volání metody RenderBody().

Patička a skripty

Nakonec už jen přidáme patičku stránky a naimportujeme potřebné javascriptové skripty. Konkrétně se bude jednat o skripty knihoven jQuery a Bootstrap a soubor site.js ze složky wwwroot/js/, do kterého případně můžeme psát vlastní JavaScript společný pro všechny naše stránky:

<body>
    <!-- Zbytek obsahu... -->

    <footer>
        Vytvořil &copy;HoBi @DateTime.Now.Year pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</body>

Spuštění

Když aplikaci nyní spustíme, uvidíme, že se podstránky opravdu vkládají do naší šablony:

HoBiho šablona pro ASP.NET Core MVC - Základy ASP.NET Core MVC

Úprava obsahových stránek

Teď už jen upravíme a přidáme jednotlivé stránky s obsahem.

Pohled pro články zatím řešit nebudeme.

Pohled `Index`

Nejprve se přesuneme do pohledu Index umístěného ve složce Views/Home/. V pohledu odstraníme vše kromě nastavení titulku na začátku souboru, kde text změníme na "O mně". Z HoBiho šablony index.html sem přesuneme všechen obsah elementu <section>. Nezapomeneme zároveň upravit cestu k obrázku a odkazy na další stránky:

@{
    ViewData["Title"] = "O mně";
}

<img src="~/images/avatar.jpg" class="avatar" alt="Programátor HoBi" />
<p>
    Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.
</p>

<p>
    Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.
    Kontaktovat mě můžete na <a asp-controller="Home" asp-action="Contact">kontaktní stránce</a>.
</p>

<p>
    Rád čtu a někdy (hlavně v létě) i sportuju.
</p>

<p>
    Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!
</p>

<p class="tlacitko-odstavec">
    <a asp-controller="Home" asp-action="References" class="reference-tlacitko">Moje reference</a>
</p>
<div class="cistic"></div>

Všimněme si použití tildy (~) pro získání cesty do wwwroot/, kde se složka s obrázky nalézá.

Výsledek:

Pohled `Contact`

Pro kontaktní stránku si přidáme nový pohled ve složce Views/Home/. Pravým tlačítkem klikneme na složku Views/Home/, zvolíme Add a poté View.... Vybereme Razor View - Empty a nazveme jej Contact.cshtml:

@{
    ViewData["Title"] = "Kontakt";
}

<p>
    <img src="~/images/email.png" alt="email" class="vlevo" />
    Pokud mi chcete něco sdělit, napište mi email na <strong>hobi (zavináč) hobi (tečka) cz nebo využijte formuláře níže</strong>.
</p>
    <p class="centrovany">
    <iframe frameborder="0" scrolling="no" width="500" height="220"
        src="https://www.itnetwork.cz/service/mail_form.php?hash=5b5a8cdab989b5e4833544f23501910b">
    </iframe>
</p>

Do pohledu jsem přesunuli pouze obsah elementu <section> z HoBiho šablony kontakt.html.

Pohled `Skills`

Stejně tak si do složky Views/Home/ přidáme nový pohled Skills:

@{
    ViewData["Title"] = "Dovednosti";
}

<table id="dovednosti">
    <tr class="centrovany">
        <td>
            <img src="~/images/html.png" alt="HTML" />
        </td>
        <td>
            <img src="~/images/java.png" alt="Java" />
        </td>
        <td>
            <img src="~/images/pascal.png" alt="Pascal" />
        </td>
    </tr>
    <tr>
        <td>
            <h2>HTML</h2>
            <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p>
        </td>
        <td>
            <h2>Java</h2>
            <p>Javu se učím z tutoriálů na itnetwork.cz. Dokáži tvořit jednoduché konzolové i okenní aplikace a programovat objektově.</p>
        </td>
        <td>
            <h2>Pascal</h2>
            <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky.</p>
        </td>
    </tr>
</table>

Přesunuli jsme sem obsah elementu <section> z HoBiho šablony dovednosti.html a upravili odkazy na obrázky.

Pohled `References`

No a nakonec si ještě do složky Views/Home/ přidáme pohled References pro naše reference:

@{
    ViewData["Title"] = "Reference";
}

<p>Níže naleznete ukázky mých dosavadních prací. Mohu vám nabídnout tvorbu podobného softwaru na zakázku.</p>

<div id="reference">
    <a href="~/images/kalkulacka_java.png" title="Kalkulačka v Javě" rel="lightbox[reference]">
        <img src="~/images/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" />
    </a>
    <a href="~/images/miny_pascal.png" title="Miny v Pascalu" rel="lightbox[reference]">
        <img src="~/images/miny_pascal_nahled.png" alt="Miny v Pascalu" />
    </a>
    <a href="~/images/hobi_web.jpg" title="Web v HTML a CSS" rel="lightbox[reference]">
        <img src="~/images/hobi_web_nahled.jpg" alt="Web v HTML a CSS" />
    </a>
</div>

Opět jsme zde vložili pouze obsah elementu <section> z HoBiho šablony reference.html a upravili odkazy na obrázky.

Sekce

Tento pohled na rozdíl od zbylých pohledů vyžaduje speciální CSS styly a skripty dříve nainstalované knihovny lightbox2. Nebylo by však nejoptimálnějším řešením vložit odkazy na požadované soubory přímo do pohledu _Layout. Všechen kód, který do tohoto pohledu umístíme, se totiž vloží na každou vygenerovanou stránku. My však soubory knihovny lightbox2 nepotřebujeme posílat na všechny stránky a zbytečně tak zpomalovat načítání naší stránky ve webovém prohlížeči.

Proto odkazy na soubory knihovny lightbox2 umístíme v pohledu References do tzv. sekcí. Sekce jsou pojmenované bloky kódu vytvářené pomocí direktivy @section, které je možné nechat vyrenderovat kdekoliv v pohledu _Layout. Název sekce si můžeme zvolit jakýkoliv.

Na konec pohledu References si umístíme dvě sekce:

<!-- Zbytek obsahu... -->

@section CSS {
    <link rel="stylesheet" href="~/lib/lightbox2/css/lightbox.min.css" asp-append-version="true" />
}

@section Scripts {
    <script src="~/lib/lightbox2/js/lightbox.min.js" asp-append-version="true"></script>
}

Máme zde sekce:

CSS pro import CSS souborů a
Scripts pro vkládání javascriptových skriptů.

Vkládání sekcí v pohledu `_Layout`

Nyní se přesuneme zpět do pohledu _Layout, kde si sekce necháme vložit na správné místo zavoláním metody RenderSectionAsync():

<html lang="cs">
<head>
    <!-- Zbytek obsahu... -->

    @await RenderSectionAsync("CSS", required: false)
</head>
<body>
    <!-- Zbytek obsahu... -->

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Sekci CSS jsme vložili na konec těla hlavičky stránky <head> a sekci Scripts na konec těla elementu <body> za zbylé skripty. Nastavením argumentu required metody RenderSectionAsync() na hodnotu false říkáme, že daná sekce se na stránce nemusí nacházet. Na většině stránek totiž tyto sekce vůbec nebudeme potřebovat.

Kontroler `HomeController`

Do našeho jediného kontroleru HomeController dodáme akce pro nově přidané pohledy:

public IActionResult Contact()
{
    return View();
}

public IActionResult References()
{
    return View();
}

public IActionResult Skills()
{
    return View();
}

Stránku Privacy nebudeme potřebovat, a proto ji ze složky Views/Home/ odstraníme, stejně jako její akci Privacy v kontroleru HomeController.

Šablonu máme tedy připravenou. Vše kromě článků funguje.

V příští lekci, Scaffolding a Entity Framework v ASP.NET Core MVC, se seznámíme s scaffoldingem a Entify Frameworkem. Pomocí těchto technologií vygenerujeme editor článků.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 249x (4.29 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

Článek pro vás napsal Martin Petrovaj

Uživatelské hodnocení:

222 hlasů

Autor je lenivý vymýšľať nejaký slušný podpis. Venuje sa ale prevažne C#.

Aktivity

Lekce 9 - Úprava layotu a obsahových stránek v ASP.NET Core MVC

Úprava layoutu

Hlavička <head>

Tělo <body>

Hlavička

Hlavní obsah

Patička a skripty

Spuštění

Úprava obsahových stránek

Pohled Index

Pohled Contact

Pohled Skills

Pohled References

Sekce

Vkládání sekcí v pohledu _Layout

Kontroler HomeController

Stáhnout

Hlavička `<head>`

Tělo `<body>`

Pohled `Index`

Pohled `Contact`

Pohled `Skills`

Pohled `References`

Vkládání sekcí v pohledu `_Layout`

Kontroler `HomeController`