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

V predchádzajúcej lekcii, Úvod do MVC architektúry v ASP.NET Core, sme si uviedli MVC architektúru.

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

Lekcie sú písané pre .NET 8.0 a novšie.

Príprava Visual Studio

V lekciách používame Visual Studio Community 2022, ktoré je najnižšou podporovanou verziou pre vývoj .NET 8.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ť.

Skôr než začneme, tak sa najskôr uistíme, že vo Visual Studiu 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 Modify (Zmeniť):

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

Nastavenie jazyka na angličtinu

Tiež sa uistíme, že máme nainštalovanú a nastavenú angličtinu. Prepneme sa do záložky Language packs (Jazykovej sady), kde chceme mať zaškrtnuté English (Angličtina):

Tlačidlom Modify (Zmeniť) potvrdíme prípadné zmeny.

Následne spustíme Visual Studio 2022 a na úvodnej obrazovke zvolíme možnosť Continue without code (Pokračovať bez kódu):

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

Následne v sekcii Environment (Prostredie) → International Settings (Medzinárodné nastavenie) zvolíme jazyk English a potvrdíme tlačidlom OK:

Prípadné pop-up okno potvrdíme tlačidlom OK a zatvoríme Visual Studio.

Vytvorenie projektu

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

Začnime vytvorením nového projektu vo Visual Studiu, 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 RandomNumber:

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 GenerateNumber()
    {
        return random.Next(100);
    }
}

Trieda robí len to, ž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 a v 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 zvyčajný 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 kontrolérov 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 vo formáte JSON. 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 a v 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. Namiesto 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.Number = generator.GenerateNumber();
    return View();
}

Aby sme mohli pristúpiť k modelu Generator, je potrebné do súboru pridať using na menný priestor RandomNumber.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 RandomNumber.Models;.

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

V nasledujú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.

 

Mal si s čímkoľvek problém? Zdrojový kód vzorovej aplikácie je k stiahnutiu každých pár lekcií. Zatiaľ pokračuj ďalej, a potom si svoju aplikáciu porovnaj so vzorom a ľahko opráv.