4. diel - Prvá webová aplikácia v ASP.NET Core MVC

V minulej lekcii, Úvod do MVC architektúry v ASP.NET Core , sme si uviedli MVC architektúru.

V dnešnom ASP.NET Core tutoriále začneme s tvorbou našej prvej webovej aplikácie v ASP.NET Core MVC, ktorou bude generátor náhodných čísel.

Tutoriály sú písané pre .NET 6.0 a novšie.

Príprava Visual Studio

V tutoriáloch používame Visual Studio Community 2022, ktoré je najnižšou podporovanou verziou pre vývoj .NET 6.0 aplikácií. Rozhranie novších verzií sa môže trochu líšiť, ale určite nijako dramaticky, takže by ste všetko popisované mali nájsť.

Než začneme, tak sa najskôr uistíme, že vo Visual Studio máme nainštalovanú sadu pre vývoj webových aplikácií. Otvoríme si teda Visual Studio Installer (program, pomocou ktorého sme inštalovali Visual Studio), tu nájdeme nami používanú verziu Visual Studio a zvolíme Zmeniť:

Zobrazí sa nám dialóg na úpravu Visual Studio, kde doinštalujeme sadu Vývoj pre ASP.NET a web (ak ju tam už nemáme):

Taktiež si doinštalujeme angličtinu. Prepneme sa do záložky Jazykovej sady, kde zaškrtneme Angličtina:

Tlačítkom Zmeniť potvrdíme naše zmeny.

Následne zmeníme jazyk nášho vývojárskeho prostredia na angličtinu. Spustíme Visual Studio 2022. Na úvodnej obrazovke zvolíme možnosť Pokračovať bez kódu:

V prostredí Visual Studia v navigačnom menu Nástroje zvolíme Možnosti...:

Následne v okne Možnosti v sekcii Prostredie - Medzinárodné nastavenie zvolíme jazyk English a potvrdíme tlačidlom OK:

V pop-up okne Zmeny v nastavení jazyka sa prejaví až po reštartovaní prostredia iba potvrdíme tlačidlom OK.

Nakoniec zatvoríme Visual Studio.

Založenie projektu

Naša prvá webová aplikácia bude generátor náhodných čísel.

Začnime založením nového projektu vo Visual Studio, klasicky tlačidlom Create a new project v úvodnom okne po spustení. Na ďalšej stránke si nájdeme šablónu ASP.NET Core Empty, vyberieme ju a pokračujeme stlačením tlačidla Next:

Šablóna (template) je predgenerovaná štruktúra projektu. Nami vybraná šablóna vygeneruje základnú štruktúru ASP.NET Core aplikácie.

Projekt nazveme napríklad NahodneCislo:

Po opätovnom kliknutí na tlačidlo Next sa dostaneme na stránku s výberom frameworku (implementácia .NET) a ďalšími nastaveniami projektu. Výber verzie frameworku necháme na najnovšom možnom. Ostatné nastavenia necháme na východiskových hodnotách:

Vytvorenie projektu už len potvrdíme kliknutím na tlačidlo Create.

Adresárová štruktúra

Keďže sme založili prázdny projekt, Visual Studio nám vygenerovalo iba tie najnutnejšie súbory, teda predovšetkým súbor Program.cs. Ďalšie súbory, ktoré budeme potrebovať, postupne pridáme sami.

Najprv začneme zložkami. Do projektu si pridáme zložky Models/, Views/ a Controllers/ tak, že klikneme pravým tlačidlom na projekt v okne Solution Explorer a zvolíme Add → New folder:

Model

Začnime modelom. Do zložky Models/ pridáme jednoduchú triedu Generator. Bude mať nasledujúci obsah:

public class Generator
{
    private readonly Random random = new Random();

    public int VratCislo()
    {
        return random.Next(100);
    }
}

Trieda nerobí nič iné, než že vracia náhodné číslo z privátnej inštancie triedy Random. Prakticky nemá takýto model veľký zmysel, pre nás je však dôležitý princíp av budúcnosti budeme úplne rovnako vracať napr. článok z databázy. Vytvorili sme teda logickú časť aplikácie.

Controller

Teraz pridáme Controller do zložky Controllers/. v okne Solution Explorer klikneme pravým tlačidlom na zložku Controllers/ a zvolíme Add → Controller.... Ako typ vyberieme MVC Controller-Empty. Ako meno kontroléra zvolíme HomeController:

Meno kontroléra by malo vždy končiť na Controller. HomeController je obvyklý názov kontroléra, ktorý sa spustí vo chvíli, keď na stránku prídeme (bez toho, aby sme zadávali ďalšie parametre, teda ako homepage).

Ostatné typy kontrolerov nám umožňujú napr. rovno vygenerovať pohľady, použijeme ich ďalej v kurze.

Visual Studio nám vygenerovalo novú triedu, ktorá vyzerá takto:

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Metóda Index() sa na kontroléri zavolá vo chvíli, keď užívateľ zadá požiadavku na stránku, ktorú daný kontrolér spravuje. Práve v tejto metóde vytvoríme inštanciu modelu, získame si od neho dáta a tieto dáta odovzdáme pohľadu.

Metóda využíva ako návratový typ rozhrania IActionResult, ktoré reprezentuje objekt, ktorý po dokončení požiadavky zasielame späť prehliadaču. V našom prípade mu zasielame šablónu (objekt View). Rovnako mu môžeme zaslať súbor, žiadosť o presmerovanie alebo napríklad dáta v JSON formáte. Vrátiť môžeme dokonca aj len string, ktorý sa v prehliadači potom vypíše.

Metódy s návratovým typom rozhrania IActionResult nazývame akcie.

Odovzdanie dát pohľadu

Na odovzdanie dát máme na výber z troch kolekcií, ktoré sú prístupné ako v kontroléri, tak neskôr v pohľade. V kontroléri kolekciu naplníme dátami z modelu av pohľade z nej dáta vypíšeme do pripravenej HTML šablóny.

Môžeme použiť kolekcie:

• ViewData - Kolekcia na spôsob Dictionary, kam vkladáme jednotlivé premenné pre šablónu pod textové kľúče. Používala sa hlavne predtým, ako C# zaviedol kľúčové slovo dynamic.
• ViewBag - Kolekcia využíva dynamické vlastnosti, ktoré sú v C# .NET od verzie 4.0. Miesto kľúčov zapisujeme rovno do vlastností, ktoré sa na ViewBag vytvoria.
• TempData - Pomerne mätúce kolekcie, slúžiace na odovzdanie dát najmä pri presmerovaní. Dáta sú zmazané po dokončení požiadavky.

Je vlastne jedno, či budeme dáta do šablóny odovzdávať pomocou kolekcie ViewBag alebo kolekcie ViewData, pretože kolekcia ViewBag interne využíva pre svoje vlastnosti práve ViewData.

Čokoľvek uložíme do kolekcie ViewBag, to bude prístupné aj ako položka v kolekcii ViewData a naopak. Výhodou kolekcie ViewBag je však to, že nemusíme vykonávať konverziu (type casting). Microsoft vo svojej dokumentácii ale využíva skôr staršiu kolekciu ViewData. Sčasti je to preto, že kolekcia ViewBag nie je momentálne dostupná v Razor Pages (iný typ stránok, ktorý sa dá v Core vytvárať). Na výbere kolekcie príliš nezáleží.

Niekedy (pri architektúre MVVM – Model-View-ViewModel) sa môžeme stretnúť aj s posielaním dát pohľadu cez k tomu určený objekt naplnený dátami, tzv. ViewModel. Tento spôsob si ale ukážeme až ďalej v kurze.

Upravme akciu Index() v kontroléri tak, aby pred vrátením pohľadu získala dáta z modelu a tie uložila do kolekcie ViewBag:

public IActionResult Index()
{
    Generator generator = new Generator();
    ViewBag.Cislo = generator.VratCislo();
    return View();
}

Aby sme mohli pristúpiť k modelu Generator, je potrebné do súboru pridať using na menný priestor NahodneCislo.Models. To sa dá veľmi rýchlo dosiahnuť pomocou funkcie Quick Actions and Refactorings... (žiarovka). K tej sa dostaneme buď kliknutím pravým tlačidlom na text Generator a vybraním Quick Actions and Refactorings..., alebo presunutím kurzora k textu Generator a stlačením Ctrl + .. Potom len stačí z ponuky vybrať požadovaný using NahodneCislo.Models;.

V kontroléri sme hotoví. Zareagovali sme na požiadavku na indexovú stránku a prepojili model s pohľadom.

V budúcej lekcii, Pohľad, middleware a routovanie v ASP.NET Core MVC , si do našej prvej webovej aplikácie v ASP.NET Core MVC doplníme pohľad, middleware a routovanie.