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

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

Dnes tyto znalosti využijeme v praxi a naprogramujeme svou první webovou aplikaci v ASP.NET MVC.

Seriál předpokládá základní znalosti C# .NET a HTML, pokud něčemu nebudete rozumět, přečtěte si nejprve seriály v sekci C# .NET (zejména OOP), případně HTML seriál Webové stránky krok za krokem, kde je vše potřebné vysvětleno.

Pokud používáte edici Express Visual Studia, budete potřebovat verzi Microsoft Visual Studio Express For Web. Tutoriály píši pro verzi 2013, rozhraní starších verzí se může trochu lišit, ale určitě nijak dramaticky, takže byste vše popisované měli nalézt.

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. Nový projekt založíme pomocí hlavního menu File -> New project (je tam i možnost New Web Site, ale tu nebudeme používat).

V dialogu vybereme jako jazyk C#, jako typ projektu ASP.NET Web Application a jméno zvolíme MVCNahodneCislo.

Jakmile dialog potvrdíme, zobrazí se další s výběrem template. Template je předgenerovaná struktura projektu, my začneme s prázdným projektem a proto vybereme Empty. Níže zaškrtneme MVC, jelikož tuto technologii budeme používat. Potvrdíme.

Adresářová struktura

Ačkoli jsme založili prázdný projekt, Visual Studio i tak vygenerovalo spoustu souborů a složek. To je proto, že ASP.NET MVC je framework, tedy hotové řešení, které pouze přizpůsobujeme pro náš účel.

Určitě jste si všimli složek Models, Views a Controllers. Právě sem přidáme komponenty naší aplikace tak, jak jsme si vysvětlovali v minulém dílu.

Model

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

public class Generator
{
    private 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ř. článek z databáze. Vytvořili jsme tedy logickou část aplikace.

Controller

Nyní přidáme Controller do složky Controllers pomocí pravého tlačítka a výběru Add -> Controller. Jako typ vybereme MVC Controller - Empty. Ostatní typy nám umožňují např. rovnou vygenerovat pohledy, použijeme je dále v seriálu.

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

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

public class HomeController : Controller
{
    //
    // GET: /NahodneCislo/
    public ActionResult Index()
    {
        return View();
    }
}

Metoda Index() se zavolá ve chvíli, kdy uživatel zadá požadavek na domovskou stránku. Právě v ní vytvoříme instanci modelu, získáme si od něj data a tato data předáme pohledu.

Metoda je návratového typu ActionResult, což je vlastně objekt, který po dokončení požadavku zasíláme prohlížeči. V našem případě mu zasíláme šablonu (View). Stejně tak mu můžeme zaslat soubor, žádost o přesměrování nebo třeba data v Json. Vrátit můžeme dokonce i jen string, který se v prohlížeči poté vypíše.

Předání dat pohledu

K předání dat máme k dispozici 3 kolekce, 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 - ViewBag 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ří. Tento způsob budeme v seriálu používat.
• 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.

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

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

Abychom mohli přistoupit k modelu, je třeba přidat using. I když to všichni jistě umíte, pro jistotu zopakuji, že kliknete na název třídy a po zobrazení modrého podtržítka nakliknete přidání daného usingu. V kontroleru jsme hotoví. Zareagovali jsme na požadavek na indexovou stránku a propojili model a pohledem.

View

V naší aplikaci nám chybí již jen šablona (pohled), ve které výstup zobrazíme uživateli. Pojmy šablona a pohled budu v seriálu zaměňovat a myslím tím vždy pohled. Ve složce Views máme již vytvořenou podsložku Home. Přidání nového kontroleru vždy vytvoří podsložku pro jeho pohledy.

View nejjednodušeji přidáme přímo z příslušného kontroleru. Klikneme pravým kamkoli do metody Index() a zvolíme Add View.

Pohled se bude jmenovat stejně jako metoda. Potvrdíme.

Je nám vygenerována HTML šablona s následujícím obsahem:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Na začátku vidíme zavináč a C# kód. To je syntaxe tzv. Razor engine, který slouží pro vkládání C# kódu do HTML. V ASP.NET MVC existuje ještě několik dalších renderovacích enginů, ale téměř se nepoužívají.

Již víme, že všechna logika by měla být obsažena v modelech, v pohledech budeme C# používat pouze k výpisu hotových dat, které jsme z modelů získali. Razor direktiv by v šablonách mělo být co možná nejméně.

Určitě jste podle obsahu vygenerované šablony přišli na to, že šablona není přímo výsledná HTML stránka, ale pouze její část, která se poté vloží do layoutu. V této šabloně se bude nacházet pouze to, co je součástí jedné konkrétní podstránky našeho webu. Podstránce nastavíme její titulek pomocí ViewBag a Razor direktivy. Kód níže upravíme tak, aby se vypisovalo naše náhodné číslo:

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

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

Číslo vypíšeme z ViewBag, tam ho uložil kontroler, který ho získal z modelu, který ho vygeneroval.

Můžeme se pro úplnost podívat i do složky Shared v modelech, kam se vygeneroval layout stránky. Zatím jej nebudeme upravovat.

Projekt spustíme, uvidíte takovýto výsledek:

Port budete mít jiný než já na screenshotu.

Zopakování

Ještě si naposled zopakujme jak celá aplikace funguje.

Jako první je spuštěna metoda Index() v HomeControlleru. Ta se zeptá modelu na data a data uloží do ViewBag. Následně je vyrenderován pohled, který pomocí Razor syntaxe na určitá místa v šabloně vypisuje data z Viewbag. Hotová stránka je odeslána uživateli.

Zdrojové kódy dnešního projektu jsou ke stažení níže, bude tomu tak ve všech dílech. Pokud se vám něco nepovedlo, můžete si najít chybu.

V příští lekci, Obsluha formulářů v ASP.NET MVC, se podíváme na obsluhu formulářů.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.