5. diel - Úprava template MVC v ASP.NET Core

V minulej lekcii, Spracovanie dát a validácie v ASP.NET Core MVC , sme si vysvetlili spracovanie dát z formulára a validácie. Od dnešného ASP.NET Core tutoriálu začneme pracovať na jednoduchom blogu s databázou článkov a administráciou.

Založenie projektu

Už vieme, že vo Visual Studio môžeme okrem prázdneho projektu založiť tiež projekt, v ktorom sú už pripravené základné veci ako šablóny, zložky MVC alebo ona obľúbená cookie hláška. Dnes pôjdeme ešte ďalej.

Založte si novú ASP.NET Core Web Application s názvom AspBlog. V hornej časti okna si môžete nastaviť verziu ASP.NET Core, ktorú chcete používať, kurz je písaný pre verzie 2.1 a vyššie. U výberu template zvolíme Web Application (Model-View-Controller) a spôsob overenia nastavíme pomocou tlačidla "Change Authentication" na Individual User Accounts.

Štruktúra ASP.NET Core MVC template

V Solution Exploreri vidíme pomerne komplikovanú štruktúru projektu. Štruktúra sa môže nadrobno odlišovať a pravdepodobne sa bude odlišovať v závislosti na konkrétnu verziu Visual Studia. Poďme si ju aspoň zhruba popísať.

V priečinku wwwroot sa nachádza statický (nemenný) obsah webu. Visual Studio nám do zložky lib skopírovali Bootstrap (CSS framework pre jednoduché štýlovanie pomocou predpripravených štýlov) a populárna javascriptový framework jQuery, ktorý ASP.NET Core využíva najmä na validácie. Svoje vlastné javascriptové súbory môžeme ukladať do zložky js. Ďalej tu máme v priečinku css súbor site.css, ktorý už štýlom našu konkrétnu stránku, tam budeme pridávať naše štýly. Máme ešte predpripravenú zložku images pre naše obrázky.

Čo sa týka stránok, máme tu opäť HomeController s pohľadmi úvodnej stránky, kontaktné stránky a about stránky.

Do zložky Models si budeme ukladať naše view-modely. Možno si už pamätáte, že sa jedná o objektové kontajnery pre dáta, ktoré potom odovzdáme do View. Oproti kolekciám ViewData a ViewBagu majú výhodu statického typovanie, využijeme je najmä pre prihlasovanie a registráciu, viď ďalej v kurze.

V zložke Views máme podpriečinok Home pre pohľady kontroleru a tiež zdieľané časti webovej šablóny. Môžete si tu všimnúť šablóny _Layout.cshtml, ktorá obsahuje spoločnú HTML šablónu a obaľuje jednotlivé podstránky. Až budeme mať v aplikácii viac kontrolerov, každý bude mať pre svoje pohľady tiež vlastné zložku.

Aplikácia vyzerá po spustení zatiaľ rovnako, ako minule:

Je pripravená úvodná stránka s Carousel, oznámenie o cookies, pod ním navigačné menu a pod. Web je dokonca aj responzívne. Hoci by sme si mohli web pomerne jednoducho přeskinovat pomocou hotového schému, v praxi väčšinou dostanete hotový vzhľad od kodér / grafika a budete ho musieť na tento projekt zaštepiť. Práve tomu budeme venovať zvyšok dnešnej lekcie.

Mimochodom, určite ste si všimli, že Microsoft v projekte používa pomerne veľa otvorených technológií a neprichádza s vlastnými alternatívami, čo je asi dobre.

Úprava šablóny

Pre šablónu nebudeme chodiť ďaleko, ale vypožičiame si ju z kurzu Webové stránky krok za krokom. Nakódovanie web si stiahnite v poslednom dieli (Nahrávanie webu na internet). Jedná sa o jednoduchý statický web v HTML 5 a CSS 3. Ak vám v jeho kóde nie je čokoľvek jasné, v kurze je detailne popísaná jeho tvorba.

Web si minimálne upravíme pre naše účely a to tak, že do navigačného menu namiesto "O mne" vložíme "Články". Môžete si aj mierne upraviť obsah a vzhľad tak, aby sa vám blog páčil. Ja som to urobil nasledovne:

Obsah a vzhľad teraz postupne prenesieme do nášho projektu v ASP.NET Core.

Kopírovanie súborov

Nakopírujte obrázky z priečinka obrazky v šablóne do zložky images v priečinku wwwroot projektu.

Prejdeme do súboru site.css takisto v priečinku wwwroot v ASP.NET Core projekte, kde vymažeme štýlovanie týkajúce sa body (2 selektory), zvyšok ponecháme. Do súboru teraz pridáme ešte všetky štýly zo súboru styl.css z HoBiho webu. V site.css je teraz potrebné prepísať cesty k obrázkom, napr. Riadok:

background: url('obrazky/pozadi_sede.png') #1c2228;

Upravíme na:

background: url('../images/pozadi_sede.png') #1c2228;

Dve bodky musíme uviesť preto, že štýl je v priečinku css a images sú o zložku vyššie (bodka označuje aktuálnu zložku, dve bodky rodičovskú). Podobné riadky tam sú asi 4, všetky si ich upravte.

Nakoniec v štýloch vykonáme rozšírenie šablóny, aby sa tam predvolené obsah z ASP.NET template vošiel. V selektora #centrovac nastavíme width: 1200px a v selektora article section nastavenie width naopak odstránime.

Úprava layoutu

Presunieme sa do Views/Shared/_Layout.cshtml. 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. Tejto funkcionality je docielené pomocou súboru _ViewStart.cshtml, kde je súbor s layoutom nastavený.

My si teraz _Layout.cshtml upravíme tak, aby vyzeral ako index.html z HoBiho šablóny. Budeme upravovať iba časť <body>. V nej odstránime <nav> s navigačným menu, pätičku <footer> a prípadne ďalšie viditeľný obsah (<hr> a podobne).

Do <body> teraz vložíme obsah 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 odkazy do menu.

Element <body> bude v layoutu teraz vyzerať nejako takto:

...
<body>
    <partial name="_CookieConsentPartial" />
    <header>
        <div id="logo"><h1>HoBi</h1></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 asp-controller="Home" asp-action="Contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <div id="centrovac">
            <header>
                <h1>@ViewData["Title"]</h1>
            </header>

            <section>
                <div class="container body-content">
                    @RenderBody()
                </div>
            </section>
            <div class="cistic"></div>
        </div>
    </article>

    <footer>
        Vytvořil &copy;HoBi pro <a href="https://www.itnetwork.cz">ITnetwork.cz</a>
    </footer>


    ...
    Zde ponechte načtení skriptů, jak vám jej Visual Studio do šablony vygenerovalo
    Začíná pravděpodobně jako <environment include="Development"> ...
    ...
</body>

Všimnite si, že navigačné odkazy na metódy kontroléra používajú atribúty asp-controller a asp-action. Keď aplikáciu teraz spustíme, uvidíme, že sa podstránky naozaj vkladajú do našej šablóny:

Úprava obsahových stránok

Najprv sa presunieme do Views/Home/Index.cshtml, kde odstránime všetko okrem nastavenia titulku na začiatku súboru, kde text zmeníme na "O mňa". Teraz sem presunieme obsah elementu <section> z HoBiho šablóny. Nezabudnite upraviť cestu k obrázkom. Index.cshtml vyzerá asi takto:

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

<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. Mimo to působím jako redaktor na programátorské sociální síti ITnetwork.cz.</p>

<p class="centrovany"><img src="~/images/avatar.png" alt="Programátor HoBi" /></p>

<p>Blog je naprogramovaný v C# .NET s použitím webového frameworku ASP.NET Core MVC. Komunikuje s databází pomocí EntityFrameworku, ze které se tímto způsobem zobrazují články, což si můžete vyzkoušet v záložce články. Obsahuje také jednoduchou administraci s přihlašováním.</p>

<p>Blog vznikl jako ukázková práce ke kurzu na programátorské síti <a href="http://www.itnetwork.cz">ITnetwork.cz</a>, kde je také detailně popsaný postup k jeho vytvoření. Jedná se o rozšíření statického portfolia webdesignera HoBiho.</p>

Všimnite si použitie Tildy (~) pre získanie cesty do wwroot, kde sa zložka s obrázkami nachádza.

výsledok:

Podobne si upravte kontaktnú stránku 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="500px" height="220px"
            src="https://www.itnetwork.cz/api/Service-MailForm/5b5a8cdab989b5e4833544f23501910b"></iframe>
</p>

Stránky About.cshtml a Privacy.cshtml nebudeme potrebovať a preto ich z Views odstránime, rovnako ako ich metódy v HomeController u.

Naopak si pridajme 2 nové Views do zložky Home: References.cshtml a Skills.cshtml a opäť im vložíme obsah z šablóny.

Obsah References.cshtml bude nasledujúci:

@{
    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/upominac_narozenin.png" title="Upomínač narozenin v C# .NET"><img src="~/images/upominac_narozenin_nahled.png" alt="Upomínač narozenin v C# .NET" /></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>

A v stránke Skills.cshtml bude tento kód:

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

<table id="dovednosti">
    <tr class="centrovany">
        <td>
            <img src="~/images/html.png" alt="HTML" />
        </td>
        <td>
            <img src="~/images/csharp.png" alt="C#" />
        </td>
        <td>
            <img src="~/images/aspnet.png" alt="ASP.NET" />
        </td>
    </tr>
    <tr>
        <td>
            <h2>HTML a CSS</h2>
            <p>Perfektně ovládám HTML 5, CSS 3 a také na dobré úrovni ovládám JS Framework jQuery. Dokážu optimalizovat webové stránky pro mobilní zařízení.</p>
        </td>
        <td>
            <h2>C# .NET</h2>
            <p>Na velmi dobré úrovni ovládám C# .NET, objektově orientované programování a práci s relačními databázemi v jazyce MS-SQL.</p>
        </td>
        <td>
            <h2>ASP.NET</h2>
            <p>Učím se technologii ASP.NET Core MVC, na které je postavený tento blog. Umím pracovat s EntityFrameworkem a tvořit dynamické weby.</p>
        </td>
    </tr>
</table>

Články zatiaľ neriešiť nebudeme. Do HomeController u dodajte metódy pre tieto pohľady:

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

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

Môžete si skúsiť preklikať stránku pomocou navigačného menu, všetko okrem článkov by malo fungovať.

Šablónu máme teda pripravenú, v budúcej lekcii, Scaffolding a Entity Framework v ASP.NET Core MVC , si zobrazíme články z databázy. Projekt je ako vždy v prílohe k stiahnutiu so zdrojovými kódmi.