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

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 a ikonu 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" />
    <link rel="stylesheet" href="~/lib/lightbox2/css/lightbox.min.css" asp-append-version="true" />
</head>
/*...*/
</html>

Taktiež sme v elemente <html> zmenili jazyk stránky na slovenčinu.

Telo `<body>`

Teraz upravíme časť <body> podľa obsahu <body> z HoBiho šablóny (zo súboru index.html). Na miesto, kam sa vkladá obsah, nesmieme zabudnúť premiestniť volanie RenderBody(). Podobným spôsobom vypíšeme aj titulok do nadpisu <h1> pomocou @ViewData["Title"] a upravíme odkazy v menu. Medzi skripty ešte pridáme odkaz na javascriptový súbor knižnice lightbox2.

Element <body> bude v layoute teraz vyzerať takto:

/*...*/
<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>
    <article>
        <div id="centrovac"
            @if (Context.Request.RouteValues.Values.Any(p => p is "Home") && Context.Request.RouteValues.Values.Any(p => p is "Index"))
            {
                <text>class="domu-article"</text>
            }>
            <header>
                <h1>@ViewData["Title"]</h1>
            </header>

            @RenderBody()

            <div class="cistic"></div>
        </div>
    </article>

    <footer>
        Vytvoril &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>
    <script src="~/lib/lightbox2/js/lightbox.min.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</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.

Razor direktíva `@if`

Prvýkrát tu používame špeciálny Razor direktívu @if, ktorá funguje obdobne ako klasický if zo C#. Ak uvedená podmienka platí, vloží sa do pohľadu obsah nasledujúceho bloku, v opačnom prípade sa vloží obsah bloku else, pokiaľ je uvedený. My tu overujeme, či sa nachádzame na domovskej stránke, teda či je volaná akcia Index() kontroléra HomeController. Jedine na tejto stránke totiž potrebujeme elementu <div> nastaviť triedu domu-article.

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

Úprava obsahových stránok

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

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 element <section> a <img>. Nezabudneme zároveň upraviť cestu k obrázku a odkazy na ďalšie stránky:

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

<section>
    <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>
</section>

<img src="~/images/avatar.jpg" alt="Programátor HoBi" />

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";
}

<section>
    <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>
</section>

Pohľad `References`

Rovnako si do zložky Views/Home/ pridáme nový pohľad References pre naše referencie:

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

<section>
    <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>
</section>

Pohľad `Skills`

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

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

<section>
    <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>
</section>

Články zatiaľ riešiť nebudeme.

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, Úprava ďalších šablón a editor v ASP.NET Core MVC , dokončíme úpravu kódu scaffoldovaných šablón administrácie článkov tak, aby sa články priblížili nejakej našej predstave. Sprevádzkováme WYSIWYG editor TinyMCE.

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é 253x (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>

Razor direktíva @if

Úprava obsahových stránok

Pohľad Index

Pohľad Contact

Pohľad References

Pohľad Skills

Kontrolér HomeController

Stiahnuť

Hlavička `<head>`

Telo `<body>`

Razor direktíva `@if`

Pohľad `Index`

Pohľad `Contact`

Pohľad `References`

Pohľad `Skills`

Kontrolér `HomeController`