Lekce 8 - Úprava template MVC v ASP.NET Core
V předešlém cvičení, Řešené úlohy k 1.-7. lekci frameworku ASP.NET Core MVC, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Od dnešního ASP.NET Core tutoriálu začneme pracovat na jednoduchém blogu s databází článků a administrací.
Již víme, že ve Visual Studiu můžeme kromě prázdného projektu založit také projekt, ve kterém jsou již připraveny složky MVC obsahující jednoduchý ukázkový projekt. Dnes půjdeme ještě dále.
Založme si nový projekt podle šablony ASP.NET Core
Web App (Model-View-Controller) s názvem AspBlog
. Verzi
frameworku nebudeme volit nižší než .NET 8.0, ideálně vybereme tu
nejnovější možnou. U výběru typu ověření pak nastavíme Individual
Accounts:
Výběrem možnosti Individual Accounts se nám projekt vygeneruje s podporou autentizace, tedy ověření identity uživatele, v naší aplikaci.
Struktura ASP.NET Core MVC template
V okně Solution Explorer 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. Měli bychom ji alespoň zhruba znát již z předchozích lekcí. Raději si ji ale i tak ještě jednou popíšeme a něco málo si doplníme:
Ve složce wwwroot/
se nachází statický (neměnný) obsah
webu. Visual Studio nám do složky wwwroot/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 wwwroot/js/
. Dále zde máme
ve složce wwwroot/css/
soubor site.css
, který již
styluje naši konkrétní stránku. Tam budeme přidávat naše
styly.
Díky výběru typu ověření při vytváření projektu nám sem přibyla
složka Data/
, ve které nalezneme základní třídy pro
generování databáze. Více se jim budeme věnovat dále v
kurzu.
Co se týká stránek, máme zde opět kontroler HomeController
s akcemi:
Index()
– pro úvodní stránku,Privacy()
– pro stránku se zásadami ochrany osobních údajů,Error()
– pro chybovou stránku.
Do složky Models/
si budeme ukládat naše
ViewModely. 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
ViewBag
mají výhodu statického typování.
Využijeme je zejména pro přihlašování a
registraci, viz dále v kurzu. Zatím v této složce máme
pouze ViewModel ErrorViewModel
pro chybovou
stránku.
V složce Views/
máme podsložku Home/
pro pohledy
kontroleru HomeController
. Dále pak podsložku
Shared/
pro sdílené části webové šablony.
Můžeme si zde všimnout šablony _Layout
, která obsahuje
společnou HTML šablonu a obaluje jednotlivé strá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í podobně, jako minule:
Je připravena webová aplikace s navigačním menu, úvodní stránkou, autentizací apod. 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 dostaneme hotový vzhled od kodéra/grafika a budeme ho muset na tento projekt naroubovat. Právě tomu se budeme nyní věnovat.
Úprava šablony
Pro šablonu nebudeme chodit daleko, ale vypůjčíme si ji z kurzu Moderní webdesign. 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 a CSS. 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ůžeme si i mírně upravit obsah a vzhled tak, aby se nám blog líbil:
Obsah a vzhled nyní postupně přeneseme do našeho projektu v ASP.NET Core.
Kopírování souborů
Vrátíme se do našeho ASP.NET Core projektu. Ve složce
wwwroot/
vytvoříme novou složku images/
. Do této
složky následně nakopírujeme všechny obrázky ze složky
obrazky/
z HoBiho webu.
Dále ve složce wwwroot/
ještě vytvoříme složku
fonts/
a překopírujeme do ní všechny soubory ze složky
fonty/
z HoBiho webu.
Přejdeme do souboru site.css
rovněž ve složce
wwwroot/
v ASP.NET Core projektu, kde vymažeme výchozí
stylování a přidáme do něj všechny styly ze souboru styl.css
z HoBiho webu. V souboru site.css
je třeba ještě přepsat cesty
ke všem souborům, konkrétně se jedná o řádky:
src: url(fonty/Poppins-Regular.ttf); /*...*/ src: url(fonty/Poppins-ExtraBold.ttf); /*...*/ background: url('obrazky/logo.png') no-repeat;
Upravíme je na:
src: url(../fonts/Poppins-Regular.ttf); /*...*/ src: url(../fonts/Poppins-ExtraBold.ttf); /*...*/ background: url('../images/logo.png') no-repeat;
Dvě tečky musíme uvést proto, že styl je ve složce
css/
a fonts/
s images/
jsou o složku
výše (tečka označuje aktuální složku, dvě tečky rodičovskou).
Přidání knihovny Lightbox
HoBiho web využívá javascriptovou knihovnu lightbox2 pro vytvoření vyskakovacího okna s galerií obrázků. Na této knihovně si ukážeme, jak se do ASP.NET Core projektů instalují knihovny používané na straně klienta. Použijeme k tomu vestavěný správce balíčků (knihoven) LibMan, který máme ve Visual Studio k dispozici.
Dříve se k těmto účelům používal i NuGet Package Manager. Ten se již ale pro instalaci javascriptových balíčků nedoporučuje.
V Solution Explorer klikneme pravým tlačítkem na složku
wwwroot/lib/
, zvolíme Add a poté
Client-Side-Library.... Otevře se okno, ve kterém vyhledáme
potřebný balíček, pro nás je to lightbox2
. Verzi balíčku
volíme napsáním zavináče (@
) za jeho název, což nám
nabídne všechny dostupné verze a my si vybereme verzi 2.11.4 . Dále
pak můžeme vše nechat na výchozích hodnotách, tedy necháme vybrané
všechny soubory a místo uložení wwwroot/lib/lightbox2/
.
Instalaci potvrdíme tlačítkem Install:
V příští lekci, Úprava layotu a obsahových stránek v ASP.NET Core MVC , dokončíme úpravu struktury výchozí MVC šablony a obsahových stránek tak, aby vypadaly jako osobní blog.
Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.