Lekce 4 - První webová aplikace v ASP.NET Core MVC

V minulé lekci, Úvod do MVC architektury v ASP.NET Core, jsme si uvedli MVC architekturu.

V dnešním ASP.NET Core tutoriálu začneme s tvorbou naší první webové aplikace v ASP.NET Core MVC, kterou bude generátor náhodných čísel.

Tutoriály jsou psány pro .NET 8.0 a novější.

Příprava Visual Studio

V tutoriálech používáme Visual Studio Community 2022, které je nejnižší podporovanou verzí pro vývoj .NET 8.0 aplikací. Rozhraní novějších verzí se může trochu lišit, ale určitě nijak dramaticky, takže byste vše popisované měli nalézt.

Než začneme, tak se nejprve ujistíme, že ve Visual Studio máme nainstalovanou sadu pro vývoj webových aplikací. Otevřeme si tedy Visual Studio Installer (program, pomocí kterého jsme instalovali Visual Studio), zde nalezneme námi používanou verzi Visual Studio a zvolíme Změnit:

Zobrazí se nám dialog pro úpravu Visual Studio, kde doinstalujeme sadu Vývoj pro ASP.NET a web (pokud ji tam už nemáme):

Nastavení jazyka na angličtinu

Taktéž se ujistíme, že máme nainstalovanou a nastavenou angličtinu. Přepneme se do záložky Jazykové sady (Language packs), kde chceme mít zaškrtnuto Angličtina (English):

Tlačítkem Změnit (Modify) potvrdíme případné změny. 

Následně spustíme Visual Studio 2022. Pokud není v angličtině, na úvodní obrazovce zvolíme možnost Pokračovat bez kódu:

V prostředí Visual Studia v navigačním menu Nástroje zvolíme Možnosti...:

Následně v sekci Prostředí → Mezinárodní nastavení zvolíme jazyk English a potvrdíme tlačítkem OK:

Případné pop-up okno potvrdíme tlačítkem OK a zavřeme Visual Studio.

Založení projektu

Naše první webová aplikace bude generátor náhodných čísel.

Začněme založením nového projektu ve Visual Studio, klasicky tlačítkem Create a new project v úvodním okně po spuštění. Na další stránce si najdeme šablonu ASP.NET Core Empty, vybereme ji a pokračujeme stisknutím tlačítka Next:

Šablona (template) je předgenerovaná struktura projektu. Námi vybraná šablona vygeneruje základní strukturu ASP.NET Core aplikace.

Projekt nazveme třeba NahodneCislo:

Po opětovném kliknutí na tlačítko Next se dostaneme na stránku s výběrem frameworku (implementace .NET) a dalšími nastaveními projektu. Výběr verze frameworku necháme na nejnovějším možném. Ostatní nastavení necháme na výchozích hodnotách:

Vytvoření projektu už jen potvrdíme kliknutím na tlačítko Create.

Adresářová struktura

Jelikož jsme založili prázdný projekt, Visual Studio nám vygenerovalo pouze ty nejnutnější soubory, tedy především soubor Program.cs. Další soubory, které budeme potřebovat, postupně přidáme sami.

Nejprve začneme složkami. Do projektu si přidáme složky Models/, Views/ a Controllers/ tak, že klikneme pravým tlačítkem na projekt v okně Solution Explorer a zvolíme Add → New folder:

Model

Začněme modelem. Do složky Models/ přidáme jednoduchou třídu Generator. Bude mít následující obsah:

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

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

Třída nedělá nic jiného, než že vrací náhodné číslo z privátní instance třídy Random. Prakticky nemá takovýto model valný smysl, pro nás je však důležitý princip a v budoucnu budeme úplně stejně vracet například článek z databáze. Vytvořili jsme tedy logickou část aplikace.

Controller

Nyní přidáme Controller do složky Controllers/. v okně Solution Explorer klikneme pravým tlačítkem na složku Controllers/ a zvolíme Add → Controller.... Jako typ vybereme MVC Controller - Empty. Jako jméno kontroleru zvolíme HomeController:

Jméno kontroleru by mělo vždy končit na Controller. HomeController je obvyklý název kontroleru, který se spustí ve chvíli, kdy na stránku přijdeme (aniž bychom zadávali další parametry, tedy jako homepage).

Ostatní typy kontrolerů nám umožňují například rovnou vygenerovat pohledy, použijeme je dále v kurzu.

Visual Studio nám vygenerovalo novou třídu, která vypadá takto:

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

Metoda Index() se na kontroleru zavolá ve chvíli, kdy uživatel zadá požadavek na stránku, kterou daný kontroler spravuje. Právě v této metodě vytvoříme instanci modelu, získáme si od něj data a tato data předáme pohledu.

Metoda využívá jako návratový typ rozhraní IActionResult, které reprezentuje objekt, který po dokončení požadavku zasíláme zpět prohlížeči. V našem případě mu zasíláme šablonu (objekt View). Stejně tak mu můžeme zaslat soubor, žádost o přesměrování nebo třeba data v JSON formátu. Vrátit můžeme dokonce i jen string, který se v prohlížeči poté vypíše.

Metody s návratovým typem rozhraní IActionResult nazýváme akce.

Předání dat pohledu

K předání dat máme na výběr ze tří kolekcí, které jsou přístupné jak v kontroleru, tak později v pohledu. V kontroleru kolekci naplníme daty z modelu a v pohledu z ní data vypíšeme do připravené HTML šablony.

Můžeme použít kolekce:

• ViewData – Kolekce na způsob Dictionary, kam vkládáme jednotlivé proměnné pro šablonu pod textové klíče. Používala se hlavně předtím, než C# zavedl klíčové slovo dynamic.
• ViewBag – Kolekce využívá dynamické vlastnosti, které jsou v C# .NET od verze 4.0. Místo klíčů zapisujeme rovnou do vlastností, které se na ViewBag vytvoří.
• TempData – Poměrně matoucí kolekce, sloužící k předání dat zejména při přesměrování. Data jsou smazána po dokončení požadavku.

Je vlastně jedno, jestli budeme data do šablony předávat pomocí kolekce ViewBag nebo kolekce ViewData, jelikož kolekce ViewBag interně využívá pro své vlastnosti právě ViewData.

Cokoliv uložíme do kolekce ViewBag, to bude přístupné i jako položka v kolekci ViewData a naopak. Výhodou kolekceViewBag je ovšem to, že nemusíme provádět konverzi (type casting). Microsoft ve své dokumentaci ale využívá spíš starší kolekci ViewData. Zčásti je to proto, že kolekce ViewBag není momentálně dostupná v Razor Pages (jiný typ stránek, který se dá v Core vytvářet). Na výběru kolekce příliš nezáleží.

Někdy (u architektury MVVM - Model-View-ViewModel) se můžeme setkat i s posíláním dat pohledu přes k tomu určený objekt naplněný daty, tzv. ViewModel. Tento způsob si ale ukážeme až dále v kurzu.

Upravme akci Index() v kontroleru tak, aby před vrácením pohledu získala data z modelu a ta uložila do kolekce ViewBag:

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

Abychom mohli přistoupit k modelu Generator, je třeba do souboru přidat using na jmenný prostor NahodneCislo.Models. Toho se dá velmi rychle dosáhnout pomocí funkce Quick Actions and Refactorings... (žárovka). K té se dostaneme buď kliknutím pravým tlačítkem na text Generator a vybráním Quick Actions and Refactorings..., anebo přesunutím kurzoru k textu Generator a stisknutím Ctrl + .. Poté jen stačí z nabídky vybrat požadovaný using NahodneCislo.Models;.

V kontroleru jsme hotoví. Zareagovali jsme na požadavek na indexovou stránku a propojili model s pohledem.

V příští lekci, Pohled, middleware a routování v ASP.NET Core MVC, si do naší první webové aplikace v ASP.NET Core MVC doplníme pohled, middleware a routování.

 

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.