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

V minulé lekci, Zpracování dat a validace v ASP.NET Core MVC, jsme si vysvětlili zpracování dat z formuláře a validace.

Od dnešního ASP.NET Core tutoriálu začneme pracovat na jednoduchém blogu s databází článků a administrací.

Založení projektu

Již víme, že ve Visual Studio můžeme kromě prázdného projektu založit také projekt, ve kterém jsou již připraveny základní věci jako šablony, složky MVC nebo ona oblíbená cookie hláška. Dnes půjdeme ještě dále.

Založte si novou ASP.NET Core Web Application s názvem AspBlog. V horní části okna si můžete nastavit verzi ASP.NET Core, kterou chcete používat, kurz je psán pro verze 2.1 a vyšší. U výběru template zvolíme Web Application (Model-View-Controller) a způsob ověření nastavíme pomocí tlačítka "Change Authentication" na Individual User Accounts.

Struktura ASP.NET Core MVC template

V Solution Exploreru vidíme poměrně komplikovanou strukturu projektu. Struktura se může drobně odlišovat a pravděpodobně se bude odlišovat v závislosti na konkrétní verzi Visual Studia. Pojďme si ji alespoň zhruba popsat.

Ve složce wwwroot se nachází statický (neměnný) obsah webu. Visual Studio nám do složky lib nakopírovalo Bootstrap (CSS framework pro jednoduché stylování pomocí předpřipravených stylů) a populární javascriptový framework jQuery, který ASP.NET Core využívá zejména na validace. Své vlastní javascriptové soubory můžeme ukládat do složky js. Dále zde máme ve složce css soubor site.css, který již styluje naši konkrétní stránku, tam budeme přidávat naše styly. Máme ještě předpřipravenou složku images pro naše obrázky.

Co se týká stránek, máme zde opět HomeController s pohledy úvodní stránky, kontaktní stránky a about stránky.

Do složky Models si budeme ukládat naše view-modely. Možná si již pamatujete, že se jedná o objektové kontejnery pro data, která poté předáme do View. Oproti kolekcím ViewData a ViewBagu mají výhodu statického typování, využijeme je zejména pro přihlašování a registraci, viz dále v kurzu.

V složce Views máme podsložku Home pro pohledy kontroleru a také sdílené části webové šablony. Můžete si zde všimnout šablony _Layout.cshtml, která obsahuje společnou HTML šablonu a obaluje jednotlivé podstránky. Až budeme mít v aplikaci více kontrolerů, každý bude mít pro své pohledy rovněž vlastní složku.

Aplikace vypadá po spuštění zatím stejně, jako minule:

Je připravena úvodní stránka s carouselem, oznámení o cookies, pod ním navigační menu a pod. Web je dokonce i responzivní. Ačkoli bychom si mohli web poměrně jednoduše přeskinovat pomocí hotového schéma, v praxi většinou dostanete hotový vzhled od kodéra/grafika a budete ho muset na tento projekt naroubovat. Právě tomu budeme věnovat zbytek dnešní lekce.

Mimochodem, jistě jste si všimli, že Microsoft v projektu používá poměrně hodně otevřených technologií a nepřichází s vlastními alternativami, což je asi dobře.

Úprava šablony

Pro šablonu nebudeme chodit daleko, ale vypůjčíme si ji z kurzu Webové stránky krok za krokem. Nakódovaný web si stáhněte v posledním dílu (Nahrání webu na internet). Jedná se o jednoduchý statický web v HTML 5 a CSS 3. Pokud vám v jeho kódu není cokoli jasné, v kurzu je detailně popsána jeho tvorba.

Web si minimálně upravíme pro naše účely a to tak, že do navigačního menu místo "O mně" vložíme "Články". Můžete si i mírně upravit obsah a vzhled tak, aby se vám blog líbil. Já jsem to udělal následovně:

Obsah a vzhled nyní postupně přeneseme do našeho projektu v ASP.NET Core.

Kopírování souborů

Nakopírujte obrázky ze složky obrazky v šabloně do složky images ve složce wwwroot projektu.

Přejdeme do souboru site.css rovněž ve složce wwwroot v ASP.NET Core projektu, kde vymažeme stylování týkající se body (2 selektory), zbytek ponecháme. Do souboru nyní přidáme ještě všechny styly ze souboru styl.css z HoBiho webu. V site.css je nyní třeba přepsat cesty k obrázkům, např. řádek:

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

Upravíme na:

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

Dvě tečky musíme uvést proto, že styl je ve složce css a images jsou o složku výše (tečka označuje aktuální složku, dvě tečky rodičovskou). Podobné řádky tam jsou asi 4, všechny si je upravte.

Nakonec ve stylech provedeme rozšíření šablony, aby se tam výchozí obsah z ASP.NET template vešel. V selektoru #centrovac nastavíme width: 1200px a v selektoru article section nastavení width naopak odstraníme.

Úprava layoutu

Přesuneme se do Views/Shared/_Layout.cshtml. 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í _Layout.cshtml upravíme tak, aby vypadal jako index.html z HoBiho šablony. Budeme upravovat pouze část <body>. V ní odstraníme <nav> s navigačním menu, patičku <footer> a případně další viditelný obsah (<hr> a podobně).

Do <body> nyní vložíme obsah body z HoBiho šablony (ze souboru index.html). Na místo, kam se vkládá obsah, nesmíme zapomenout přemístit volání RenderBody(). Podobným způsobem vypíšeme i titulek do nadpisu <h1> pomocí @ViewData["Title"] a odkazy do menu.

Element <body> bude v layoutu nyní vypadat nějak 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šimněte si, že navigační odkazy na metody kontroleru používají atributy asp-controller a asp-action. Když aplikaci nyní spustíme, uvidíme, že se podstránky opravdu vkládají do naší šablony:

Úprava obsahových stránek

Nejprve se přesuneme do Views/Home/Index.cshtml, kde odstraníme vše kromě nastavení titulku na začátku souboru, kde text změníme na "O mě". Nyní sem přesuneme obsah elementu <section> z HoBiho šablony. Nezapomeňte upravit cestu k obrázkům. Index.cshtml vypadá 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šimněte si použití tildy (~) pro získání cesty do wwroot, kde se složka s obrázky nalézá.

Výsledek:

Podobně 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 potřebovat a proto je z Views odstraníme, stejně jako jejich metody v HomeControlleru.

Naopak si přidejme 2 nové Views do složky Home: References.cshtml a Skills.cshtml a opět jim vložíme obsah z šablony.

Obsah References.cshtml bude následující:

@{
    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 ve stránce 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 zatím neřešit nebudeme. Do HomeControlleru dodejte metody pro tyto pohledy:

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

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

Můžete si zkusit proklikat stránku pomocí navigačního menu, vše kromě článků by mělo fungovat.

Šablonu máme tedy připravenou.

V příští lekci, Scaffolding a Entity Framework v ASP.NET Core MVC, si zobrazíme články z databáze. Projekt je jako vždy v příloze ke stažení se zdrojovými kódy.