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.