5. diel - Pohľad, middleware a routovanie v ASP.NET Core MVC

V dnešnom ASP.NET Core tutoriále si do našej prvej webovej aplikácie v ASP.NET Core MVC doplníme pohľad, middleware a routovanie.

View

V našej aplikácii nám ešte chýba šablóna (pohľad), v ktorej výstup zobrazíme užívateľovi.

Pojmy šablóna a pohľad sa budú v kurze zamieňať a bude tým myslený vždy pohľad.

View(pohľad) najjednoduchšie pridáme priamo z príslušného kontroléra. Klikneme pravým tlačidlom kamkoľvek do metódy Index() a zvolíme Add View...:

V novo otvorenom okne vyberieme Razor View - Empty a potvrdíme. Pohľad sa bude volať rovnako ako metóda:

Po potvrdení vytvorenia sa nám vygeneruje HTML šablóna s nasledujúcim obsahom:

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

Na začiatku vidíme komentár zapísaný medzi zavináčmi s hviezdičkami a blok pre C# kód začínajúci zavináčom a ohraničený zloženými zátvorkami. To je syntax tzv. Razor engine, ktorý slúži na vkladanie C# kódu do HTML. Existuje ešte niekoľko ďalších renderovacích enginov, ale takmer sa nepoužívajú.

Už vieme, že všetka logika by mala byť obsiahnutá v modeloch. V pohľadoch budeme C# používať iba na výpis hotových dát, ktoré sme z modelov získali. Razor direktív by v šablónach malo byť čo možno najmenej.

Šablóna nie je priamo výsledná HTML stránka, ale iba jej časť, ktorá sa potom vloží do layoutu. Ten však zatiaľ nemáme definovaný, výstup teda nebude HTML validný, čo pri prvom príklade zanedbáme. V tejto šablóne sa bude nachádzať iba to, čo je súčasťou jednej konkrétnej podstránky nášho webu. Šablóne nastavíme jej titulok a vložíme do nej číslo z modelu pomocou kolekcie ViewBag a Razor @ direktívy. Jej kód bude teraz nasledujúci:

@{
    ViewBag.Title = "Online generátor náhodných čísel";
}

<h2>Náhodné číslo</h2>
<p style="font-size: 2em;">@ViewBag.Cislo</p>

Titulok stránky nastavujeme cez vlastnosť Title kolekcie ViewBag alebo kľúč Title kolekcie ViewData. Náhodné číslo vypisujeme z ViewBag, kam ho uložil kontrolér. Ten ho získal z modelu, ktorý ho vygeneroval.

Middleware, spracovanie požiadaviek a routovanie

Keby sme našu aplikáciu teraz spustili klávesovou skratkou Ctrl + F5, zobrazila by sa iba hláška "Hello World!" a náš kontrolér by sa nespustil vôbec. Keďže sme pri vytváraní projektu zvolili prázdnu šablónu, musíme HomeController sami nasmerovať, aby sa spustil ako predvolený.

Práve tomuto mechanizmu smerovania URL adries na kontrolérov alebo inej časti aplikácie sa hovorí routovanie.

Routovanie sa nastavuje v súbore Program.cs, ktorého obsah teraz vyzerá asi nasledovne:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

Do tohto súboru budeme písať registrácia služieb a väčšinu konfigurácií aplikácie, ktorej zostavenie zaisťuje inštancia WebApplicationBuilder s metódou Build(). Ako si môžeme všimnúť, hláška "Hello World!" by sa po spustení aplikácie zobrazila preto, že je tu v predvolenom stave pomocou metódy MapGet() nastavené smerovanie adresy / na vrátenie práve tohto reťazca.

Do súboru Program.cs môžeme do zostavenej aplikácie ďalej písať tzv. middleware. Middleware si v ASP.NET Core môžeme predstaviť ako sériu filtrov, cez ktoré postupne putuje požiadavka od užívateľa na server, kým sa nájde ten vhodný, ktorý ho spracuje. Majú podobu rozširujúcich metód na inštanciu zostavenej aplikácie (niektorým z vás pravdepodobne pripomenú návrhový vzor Chain of responsibility, pretože sa reťazí).

Každý middleware v reťazci má iba obmedzenú a špecifickú úlohu v spracovaní požiadavky - napr. prvá môže plniť len funkciu loggeru, ďalší middleware bude hľadať nejakú cookie alebo autorizačný token. A ak nenájde čo hľadá, vráti chybovú hlášku alebo používateľa presmeruje. Napr. middleware UseFileServer() nám umožní ako odpoveď vrátiť statický obsah (skripty v Javascripte, obrázky, CSS súbory atď.) nášho projektu a podobne.

V .NET 5.0 a starších verziách je kód súboru Program.cs vyčlenený do metód ConfigureServices() a Configure() v súbore Startup.cs. V metóde ConfigureServices() sa registrujú služby av metóde Configure() sa konfiguruje middleware na už zostavenej aplikácii.

Routovanie na kontrolér

Budeme teda chcieť, aby sa používateľ hneď po spustení aplikácie nasmeroval na kontrolér HomeController a jeho akciu Index(). K tomu využijeme middleware MapControllerRoute(), ktorý sa stará o napojenie URL adresy na určitú akciu kontroléra:

var builder = WebApplication.CreateBuilder(args);

var app = builder.Build();

app.MapControllerRoute("default", "{controller=Home}/{action=Index}");

app.Run();

Metóde MapControllerRoute() najprv odovzdávame názov URL adresy, ktorá sa má napojiť na určitú akciu kontroléra. Túto akciu a kontrolér potom definujeme pomocou vzoru v ďalšom parametri. Predvolený názov adresy môžeme zapísať buď ako /, alebo default.

Týmto typom middleware, ktoré požiadavku smerujú na kontrolérov, sa hovorí routy.

Registrácia služieb

Pri spustení projektu by sa teda mala zavolať akcia Index() kontroléra HomeController. Keď ho teraz však spustíme, čaká nás nepríjemne vyzerajúca výnimka o chýbajúcich službách:

ASP.NET Core Framework sa skladá z veľkého množstva granulárnych služieb a komponentov, ktoré sú pre fungovanie MVC potrebné. Aby všetko mohlo správne fungovať tak, ako očakávame, musíme tieto služby do našej aplikácie najskôr zaregistrovať (k čomu nás nabáda aj text výnimky).

Presunieme sa preto späť do súboru Program.cs a ešte pred zostavením aplikácie zaregistrujeme potrebné služby pomocou metódy AddControllersWithViews():

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews(); // Tento riadok sme pridali

var app = builder.Build();

app.MapControllerRoute("default", "{controller=Home}/{action=Index}");

app.Run();

Projekt spustíme a uvidíme tentoraz správny výsledok:

Port aplikácie v URL adrese budete mať pravdepodobne iný ako ja na screenshote.

Zopakovanie

Ešte si naposledy zopakujme ako celá aplikácia funguje.

Najskôr je požiadavka užívateľa spracovaná našimi middlewarmi a prerútovaná (posunutá) kontroléra HomeController. Potom je spustená jeho akcia Index(). Tá sa spýta modelu na dáta a dáta uloží do kolekcie ViewBag. Následne je vyrenderovaný pohľad, ktorý pomocou Razor syntaxe na určité miesta v šablóne vypisuje dáta z kolekcie Viewbag. Hotová stránka je odoslaná užívateľovi.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.