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

V minulej lekcii, Úprava template MVC v ASP.NET Core , sme začali s úpravou predgenerovaného projektu z Visual Studia do podoby osobného blogu.

V dnešnom ASP.NET Core tutoriále dokončíme úpravu štruktúry layotu a obsahových stránok tak, aby vyzerali ako osobný blog.

Úprava layoutu

Presunieme sa do pohľadu _Layout umiestneného v priečinku Views/Shared/. Už vieme, že tento layout obsahuje základnú HTML štruktúru (hlavičku, menu, pätičku). Dovnútra sa renderuje aktívny View, teda napr. kontaktná stránka. Túto funkcionalitu je docielené pomocou súboru _ViewStart.cshtml, kde je súbor s layoutom nastavený.

My si teraz pohľad _Layout upravíme tak, aby vyzeral ako súbor index.html z HoBiho šablóny.

Hlavička `<head>`

Najprv upravíme hlavičku webu <head>, kde nastavíme jeho autora, ikonu a titulok a pridáme odkaz na CSS súbor knižnice 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>
    <!-- Zvyšok obsahu... -->
</body>
</html>

K priečinku wwwroot/, kde sa nachádzajú odkazované súbory, pristupujeme cez znak tildy ~. V elemente <html> sme zároveň zmenili jazyk stránky na slovenčinu.

Všimnime si odkaz <link> na súbor s našimi CSS štýlmi. Použitím tag helperu asp-append-version a jeho nastavením na hodnotu true zaistíme, že klient bude mať pri sebe vždy aktuálnu verziu importovaného súboru.

Telo `<body>`

Teraz upravíme časť <body> podľa obsahu <body> z HoBiho šablóny (zo súboru index.html).

Hlavička

Začneme hlavičkou <header>, kde v navigačnom menu oproti HoBiho šablóne akurát zameníme položku "O mne" 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">Domov</a></li>
                <li><a asp-controller="Articles" asp-action="Index">Články</a></li>
                <li><a asp-controller="Home" asp-action="Skills">Zručnosti</a></li>
                <li><a asp-controller="Home" asp-action="References">Referencie</a></li>
                <li><a class="kontakt-tlacitko" asp-controller="Home" asp-action="Contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>
</body>

Všimnime si, že navigačné odkazy na metódy kontroléra používajú nám už známe atribúty asp-controller a asp-action. Tieto atribúty síce poznáme z formulárov, môžeme ich však používať aj pri odkazoch <a>. Atribút asp-action odkazu určuje, na akú akciu sa odkazuje, a atribút asp-controller, v akom kontroléri sa má daná akcia hľadať.

Všetky uvedené akcie a kontrolery si postupne vytvoríme.

Hlavný obsah

Hlavný obsah každej stránky spolu s jej nadpisom je obalený v elemente <article>. Nadpis stránky budeme brať z kolekcie ViewData (@ViewData["Title"]), kam ho na každej stránke uložíme:

<body>
    <!-- Zvyšok obsahu... -->

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

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

Samotný obsah je potom obalený elementom <section>. Obsah stránky do layoutu vyrenderujeme (vložíme) zavolaním metódy RenderBody(). Ak teda prejdeme napr. na stránku Index, tak sa celý jej obsah vloží na miesto volania metódy RenderBody().

Pätička a skripty

Nakoniec už len pridáme pätičku stránky a naimportujeme potrebné javascriptové skripty. Konkrétne sa bude jednať o skripty knižníc jQuery a Bootstrap a súbor site.js zo zložky wwwroot/js/, do ktorého prípadne môžeme písať vlastný JavaScript spoločný pre všetky naše stránky:

<body>
    <!-- Zvyšok obsahu... -->

    <footer>
        Vytvoril &copy;HoBi @DateTime.Now.Year pre <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>

Spustenie

Keď aplikáciu teraz spustíme, uvidíme, že sa podstránky skutočne vkladajú do našej šablóny:

HoBiho šablóna pre ASP.NET Core MVC - Základy ASP.NET Core MVC - Základy ASP.NET Core MVC

Úprava obsahových stránok

Teraz už len upravíme a pridáme jednotlivé stránky s obsahom.

Pohľad pre články zatiaľ riešiť nebudeme.

Pohľad `Index`

Najprv sa presunieme do pohľadu Index umiestneného v zložke Views/Home/. V pohľade odstránime všetko okrem nastavenia titulku na začiatku súboru, kde text zmeníme na "O mne". Z HoBiho šablóny index.html sem presunieme všetok obsah elementu <section>. Nezabudneme zároveň upraviť cestu k obrázku a odkazy na ďalšie stránky:

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

<img src="~/images/avatar.jpg" class="avatar" alt="Programátor HoBi" />
<p>
    Vitajte na mojom prvom webe, písať weby sa ešte len učím, ale myslím, že mi to celkom ide.
</p>

<p>
    Volám sa Honza Bittner a mám 16 rokov. Chodím na Strednú priemyselnú školu v Českej Lípe na odbor IT.
    Kontaktovať ma môžete na <a asp-controller="Home" asp-action="Contact">kontaktnej stránke</a>.
</p>

<p>
    Rád čítam a niekedy (hlavne v lete) aj športujem.
</p>

<p>
    Mojím hlavným koníčkom (a dúfam že raz aj zamestnaním) je <strong>programovanie</strong>!
</p>

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

Všimnime si použitie tildy (~) na získanie cesty do wwwroot/, kde sa zložka s obrázkami nachádza.

Výsledok:

Pohľad `Contact`

Pre kontaktnú stránku si pridáme nový pohľad v priečinku Views/Home/. Pravým tlačidlom klikneme na zložku Views/Home/, zvolíme Add a potom View.... Vyberieme Razor View - Empty a nazveme ho Contact.cshtml:

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

<p>
    <img src="~/images/email.png" alt="email" class="vlevo" />
    Pokiaľ mi chcete niečo oznámiť, napíšte mi email na <strong>hobi (zavináč) hobi (bodka) cz alebo využite formuláre nižšie</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 pohľadu som presunuli iba obsah elementu <section> z HoBiho šablóny kontakt.html.

Pohľad `Skills`

Rovnako si do zložky Views/Home/ pridáme nový pohľad Skills:

@{
    ViewData["Title"] = "Zručnosti";
}

<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čínam a viem vytvoriť jednoduché webové stránky, ako sú tieto.</p>
        </td>
        <td>
            <h2>Java</h2>
            <p>Javu sa učím z tutoriálov na itnetwork.cz. Dokážem tvoriť jednoduché konzolové aj okenné aplikácie a programovať objektovo.</p>
        </td>
        <td>
            <h2>Pascal</h2>
            <p>Pascal nás učí v škole, ale radšej sa učím moderné jazyky.</p>
        </td>
    </tr>
</table>

Presunuli sme sem obsah elementu <section> z HoBiho šablóny dovednosti.html a upravili odkazy na obrázky.

Pohľad `References`

No a nakoniec si ešte do zložky Views/Home/ pridáme pohľad References pre naše referencie:

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

<p>Nižšie nájdete ukážky mojich doterajších prác. Môžem vám ponúknuť tvorbu podobného softvéru na zákazku.</p>

<div id="reference">
    <a href="~/images/kalkulacka_java.png" title="Kalkulačka v Jave" rel="lightbox[reference]">
        <img src="~/images/kalkulacka_java_nahled.png" alt="Kalkulačka v Jave" />
    </a>
    <a href="~/images/miny_pascal.png" title="Míny v Pascale" rel="lightbox[reference]">
        <img src="~/images/miny_pascal_nahled.png" alt="Míny v Pascale" />
    </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äť sme tu vložili iba obsah elementu <section> z HoBiho šablóny reference.html a upravili odkazy na obrázky.

Sekcia

Tento pohľad na rozdiel od zvyšných pohľadov vyžaduje špeciálne CSS štýly a skripty predtým nainštalovanej knižnice lightbox2. Nebolo by však najoptimálnejším riešením vložiť odkazy na požadované súbory priamo do pohľadu _Layout. Všetok kód, ktorý do tohto pohľadu umiestnime, sa totiž vloží na každú vygenerovanú stránku. My však súbory knižnice lightbox2 nepotrebujeme posielať na všetky stránky a zbytočne tak spomaľovať načítanie našej stránky vo webovom prehliadači.

Preto odkazy na súbory knižnice lightbox2 umiestnime v pohľade References do tzv. sekcií. Sekcie sú pomenované bloky kódu vytvárané pomocou direktívy @section, ktoré je možné nechať vyrenderovať kdekoľvek v pohľade _Layout. Názov sekcie si môžeme zvoliť akýkoľvek.

Na koniec pohľadu References si umiestnime dve sekcie:

<!-- Zvyšok 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 tu sekcie:

CSS pre import CSS súborov a
Scripts pre vkladanie javascriptových skriptov.

Vkladanie sekcií v pohľade _Layout

Teraz sa presunieme späť do pohľadu _Layout, kde si sekciu necháme vložiť na správne miesto zavolaním metódy RenderSectionAsync():

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

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

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

Sekciu CSS sme vložili na koniec tela hlavičky stránky <head> a sekciu Scripts na koniec tela elementu <body> za zvyšné skripty. Nastavením argumentu required metódy RenderSectionAsync() na hodnotu false hovoríme, že daná sekcia sa na stránke nemusí nachádzať. Na väčšine stránok totiž tieto sekcie vôbec nebudeme potrebovať.

Kontrolér `HomeController`

Do nášho jediného kontroléra HomeController dodáme akcie pre novo pridané pohľady:

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

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

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

Stránku Privacy nebudeme potrebovať, a preto ju zo zložky Views/Home/ odstránime, rovnako ako jej akciu Privacy v kontroléri HomeController.

Šablónu máme teda pripravenú. Všetko okrem článkov funguje.

V budúcej lekcii, Scaffolding a Entity Framework v ASP.NET Core MVC , sa zoznámime s scaffoldingom a Entify Frameworkom. Pomocou týchto technológií vygenerujeme editor článkov.

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é 279x (4.29 MB)
Aplikácia je vrátane zdrojových kódov v jazyku C#

Článok pre vás napísal Martin Petrovaj

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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

Aktivity

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

Úprava layoutu

Hlavička <head>

Telo <body>

Hlavička

Hlavný obsah

Pätička a skripty

Spustenie

Úprava obsahových stránok

Pohľad Index

Pohľad Contact

Pohľad Skills

Pohľad References

Sekcia

Kontrolér HomeController

Stiahnuť

Hlavička `<head>`

Telo `<body>`

Pohľad `Index`

Pohľad `Contact`

Pohľad `Skills`

Pohľad `References`

Kontrolér `HomeController`