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

V predchádzajúcej 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šnej lekcii ASP.NET Core 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 funkcionalita 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 zo SaBiho š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="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="SaBi" />
    <title>@ViewData["Title"]</title>
    <link rel="shortcut icon" href="~/images/icon.ico" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <!-- Rest of the content... -->
</body>
</html>

K priečinku wwwroot/, kde sa nachádzajú odkazované súbory, pristupujeme cez znak vlnovky ~. Zároveň sme sa uistili, že v elemente <html> máme nastavený jazyk stránky na angličtinu.

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> zo SaBiho šablóny (zo súboru index.html).

Hlavička

Začneme hlavičkou <header>, kde v navigačnom menu oproti SaBiho šablóne akurát zameníme položku "About me" za položku "Articles":

<body>
    <header>
        <div id="logo">
            <h1>Sam<span>Bittner</span></h1>
            <small>webdeveloper</small>
        </div>
        <nav>
            <ul>
                <li><a asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-controller="Articles" asp-action="Index">Articles</a></li>
                <li><a asp-controller="Home" asp-action="Skills">Skills</a></li>
                <li><a asp-controller="Home" asp-action="References">References</a></li>
                <li><a class="contact-button" asp-controller="Home" asp-action="Contact">Contact</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 kontroléry 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>
    <!-- Rest of the content... -->

    <footer>
        Created by &copy;SaBi @DateTime.Now.Year for <a href="https://ictdemy.com">ictdemy.com</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:

SaBiho š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 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 "About me". Zo SaBiho š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"] = "About me";
}

<img src="~/images/avatar.jpg" class="avatar" alt="Programmer SaBi" />

<p>
    Welcome! I'm thrilled to help you transform your ideas into stunning, <strong>high-performing websites</strong>.
</p>

<p>
    I'm Sam Bittner, a web developer with a passion for creating dynamic and responsive websites.
    I have expertise in various technologies, including HTML, CSS, JavaScript, and C# with ASP.NET Core.
</p>

<p>
    When I'm not coding, I love reading tech blogs, experimenting with new frameworks, and engaging in outdoor activities.
</p>

<p class="paragraph-button">
    <a asp-controller="Home" asp-action="References" class="references-button">My References</a>
</p>

<div class="cleaner"></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"] = "Contact";
}

<p>
    <img src="~/images/email.png" alt="email" class="left" />
    If you want to tell me something, send me an email at
    <strong>sabi (at sign) sabi (dot) com or use the form below.</strong>
</p>
<p class="centered">
    <iframe
        frameborder="0" scrolling="no" width="500px" height="220px"
        src="https://www.itnetwork.sk/api/Service-MailForm/your-mailform-code">
    </iframe>
</p>

Do pohľadu sme presunuli iba obsah elementu <section> zo SaBiho šablóny contact.html.

Pohľad `Skills`

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

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

<table id="skills">
    <tr class="centered">
        <td>
            <img src="~/images/html.png" alt="HTML" />
        </td>
        <td>
            <img src="~/images/js.png" alt="JavaScript" />
        </td>
        <td>
            <img src="~/images/java.png" alt="Java" />
        </td>
        <td>
            <img src="~/images/spring-ico.png" alt="Spring Boot" />
        </td>
    </tr>
    <tr>
        <td>
            <h2>HTML</h2>
            <p>
                With my expertise in HTML, I can structure web content effectively, ensuring it is semantic,
                accessible, and optimized for search engines.
            </p>
        </td>
        <td>
            <h2>JavaScript</h2>
            <p>
                Thanks to my proficiency in JavaScript, I can create dynamic, interactive front-end
                interfaces.
            </p>
        </td>
        <td>
            <h2>Java</h2>
            <p>
                I learn Java from tutorials on ictdemy.com, enabling me to develop interactive web
                applications and efficient backend services.
            </p>
        </td>
        <td>
            <h2>Spring Boot</h2>
            <p>
                I built upon my Java skills with Spring Boot, enabling me to efficiently create RESTful APIs,
                manage data persistence, and implement security features.
            </p>
        </td>
    </tr>
</table>

Presunuli sme sem obsah elementu <section> zo SaBiho šablóny skills.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"] = "References";
}

<p>
    Below, you can find samples of my work up to now.
    I can offer you the opportunity to develop similar custom software.
</p>

<div id="references">
    <a href="~/images/spring_calc.png" title="Calculator in Java Spring Boot" rel="lightbox[references]">
        <img src="~/images/spring_calc_preview.png" alt="Calculator in Java Spring Boot" />
    </a>
    <a href="~/images/diary_js.png" title="Diary in JavaScript" rel="lightbox[references]">
        <img src="~/images/diary_js_preview.png" alt="Diary in JavaScript" />
    </a>
    <a href="~/images/sabi_website.png" title="Web in HTML and CSS" rel="lightbox[references]">
        <img src="~/images/sabi_website_preview.png" alt="Web in HTML and CSS" />
    </a>
</div>

Opäť sme tu vložili iba obsah elementu <section> zo SaBiho šablóny references.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="en">
<head>
    <!-- Rest of the content... -->

    @await RenderSectionAsync("CSS", required: false)
</head>
<body>
    <!-- Rest of the content... -->

    @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 nasledujúcej lekcii, Scaffolding a Entity Framework v ASP.NET Core MVC, sa zoznámime so 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é 9x (4.32 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:

18 hlasov

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

Aktivity

Najčastejšie vyhľadávané

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

Vkladanie sekcií v pohľade _Layout

Kontrolér HomeController

Stiahnuť

Hlavička `<head>`

Telo `<body>`

Pohľad `Index`

Pohľad `Contact`

Pohľad `Skills`

Pohľad `References`

Vkladanie sekcií v pohľade `_Layout`

Kontrolér `HomeController`