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

V predchádzajúcom cvičení, Riešené úlohy k 1.-7. lekciu frameworku ASP.NET Core MVC, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

Od dnešného ASP.NET Core tutoriálu začneme pracovať na jednoduchom blogu s databázou článkov a administráciou.

Už vieme, že vo Visual Studiu môžeme okrem prázdneho projektu založiť aj projekt, v ktorom sú už pripravené zložky MVC obsahujúce jednoduchý ukážkový projekt. Dnes pôjdeme ešte ďalej.

Založme si nový projekt podľa šablóny ASP.NET Core Web App (Model-View-Controller) s názvom AspBlog. Verziu frameworku nebudeme voliť nižšiu ako .NET 6.0, ideálne vyberieme tú najnovšiu možnú. Pri výbere typu overenia potom nastavíme Individual Accounts:

Výberom možnosti Individual Accounts sa nám projekt vygeneruje s podporou autentizácie, teda overenia identity užívateľa, v našej aplikácii.

Štruktúra ASP.NET Core MVC template

V okne Solution Explorer vidíme pomerne komplikovanú štruktúru projektu. Štruktúra sa môže trochu odlišovať a pravdepodobne sa bude odlišovať v závislosti od konkrétnej verzie Visual Studia. Mali by sme ju aspoň zhruba poznať už z predchádzajúcich lekcií. Radšej si ju ale aj tak ešte raz popíšeme a niečo málo si doplníme:

V priečinku wwwroot/ sa nachádza statický (nemenný) obsah webu. Visual Studio nám do zložky wwwroot/lib/ nakopírovalo Bootstrap (CSS framework pre jednoduché štylovanie pomocou predpripravených štýlov) a populárny javascriptový framework jQuery, ktorý ASP.NET Core využíva najmä na validáciu. Svoje vlastné javascriptové súbory môžeme ukladať do zložky wwwroot/js/. Ďalej tu máme v priečinku wwwroot/css/ súbor site.css, ktorý už štyluje našu konkrétnu stránku. Tam budeme pridávať naše štýly.

Vďaka výberu typu overenia pri vytváraní projektu nám sem pribudla zložka Data/, v ktorej nájdeme základné triedy pre generovanie databázy. Viac sa im budeme venovať ďalej v kurze.

Čo sa týka stránok, máme tu opäť kontrolér HomeController s akciami:

• Index() - pre úvodnú stránku,
• Privacy() - pre stránku so zásadami ochrany osobných údajov,
• Error() - pre chybovú stránku.

Do zložky Models/ si budeme ukladať naše ViewModely. 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 ViewBag majú výhodu statického typovania. Využijeme ich najmä pre prihlasovanie a registráciu, viď ďalej v kurze. Zatiaľ v tejto zložke máme iba viewModel ErrorViewModel pre chybovú stránku.

V zložke Views/ máme podzložku Home/ pre pohľady kontroléra HomeController. Ďalej potom podpriečinok Shared/ pre zdieľané časti webovej šablóny. Môžeme si tu všimnúť šablónu _Layout, ktorá obsahuje spoločnú HTML šablónu a obaľuje jednotlivé stránky. Keď budeme mať v aplikácii viac kontrolérov, každý bude mať pre svoje pohľady aj vlastnú zložku.

Aplikácia vyzerá po spustení podobne, ako minule:

Je pripravená webová aplikácia s navigačným menu, úvodnou stránkou, autentizáciou a pod. Web je dokonca aj responzívny.

Hoci by sme si mohli web pomerne jednoducho preskinovať pomocou hotovej schémy, v praxi väčšinou dostaneme hotový vzhľad od kodéra/grafika a budeme ho musieť na tento projekt naskrutkovať. Práve tomu sa budeme teraz venovať.

Úprava šablóny

Pre šablónu nebudeme chodiť ďaleko, ale vypožičiame si ju z kurzu Webovej stránky krok za krokom. Nakódovaný web si stiahnite v poslednom diele ( Nahranie webu na internet). Jedná sa o jednoduchý statický web v HTML a CSS. Pokiaľ 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 na naše účely a to tak, že do navigačného menu namiesto "O mne" vložíme "Články". Môžeme si aj mierne upraviť obsah a vzhľad tak, aby sa nám blog páčil:

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

Kopírovanie súborov

Vrátime sa do nášho ASP.NET Core projektu. V zložke wwwroot/ vytvoríme novú zložku images/. Do tejto zložky následne nakopírujeme všetky obrázky zo zložky obrazky/ z HoBiho webu.

Ďalej v zložke wwwroot/ ešte vytvoríme zložku fonts/ a prekopírujeme do nej všetky súbory zo zložky fonty/ z HoBiho webu.

Prejdeme do súboru site.css aj v priečinku wwwroot/ v ASP.NET Core projektu, kde vymažeme predvolené štýlovanie a pridáme doň všetky štýly zo súboru styl.css z HoBiho webu. V súbore site.css je potrebné ešte prepísať cesty ku všetkým súborom, konkrétne sa jedná o riadky:

src: url(fonty/Poppins-Regular.ttf);
/*...*/
src: url(fonty/Poppins-ExtraBold.ttf);
/*...*/
background: url('obrazky/logo.png') no-repeat;

Upravíme ich na:

src: url(../fonts/Poppins-Regular.ttf);
/*...*/
src: url(../fonts/Poppins-ExtraBold.ttf);
/*...*/
background: url('../images/logo.png') no-repeat;

Dve bodky musíme uviesť preto, že štýl je v zložke css/ a fonts/ s images/ sú o zložku vyššie (bodka označuje aktuálnu zložku, dve bodky rodičovskú).

Pridanie knižnice Lightbox

HoBiho web využíva javascriptovú knižnicu lightbox2 pre vytvorenie vyskakovacieho okna s galériou obrázkov. Na tejto knižnici si ukážeme, ako sa do ASP.NET Core projektov inštalujú knižnice používané na strane klienta. Použijeme na to vstavaný správca balíčkov (knižníc) LibMan, ktorý máme vo Visual Studio k dispozícii.

Predtým sa na tieto účely používal aj NuGet Package Manager. Ten sa už ale na inštaláciu javascriptových balíčkov neodporúča.

V Solution Explorer klikneme pravým tlačidlom na zložku wwwroot/lib/, zvolíme Add a potom Client-Side-Library.... Otvorí sa okno, v ktorom vyhľadáme potrebný balíček, pre nás je to lightbox2. Verziu balíčka volíme napísaním zavináča (@) za jeho názov, čo nám ponúkne všetky dostupné verzie a my si vyberieme verziu 2.11.3. Ďalej potom môžeme všetko nechať na východiskových hodnotách, teda necháme vybrané všetky súbory a miesto uloženia wwwroot/lib/lightbox2/. Inštaláciu potvrdíme tlačidlom Install:

V budúcej lekcii, Úprava layotu a obsahových stránok v ASP.NET Core MVC , dokončíme úpravu štruktúry východiskovej MVC šablóny a obsahových stránok tak, aby vyzerali ako osobný blog.