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

Vydávání, hosting a aktualizace umožňují jeho sponzoři.
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 ©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 HomeController
u.
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 HomeController
u 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.
Stáhnout
Staženo 110x (2.02 MB)
Aplikace je včetně zdrojových kódů v jazyce C#
Komentáře


Zobrazeno 3 zpráv z 3.