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

V minulej lekcii, Úvod do MVC architektúry v ASP.NET , sme si uviedli MVC architektúru. Dnes tieto znalosti využijeme v praxi a naprogramujeme svoju prvú webovú aplikáciu v ASP.NET MVC.

Seriál predpokladá základné znalosti C# .NET a HTML, ak niečomu nebudete rozumieť, prečítajte si najprv seriály v sekcii C# .NET (najmä OOP), prípadne HTML seriál Webové stránky krok za krokom, kde je všetko potrebné vysvetlené.

Ak používate edícii Express Visual Studia, budete potrebovať verziu Microsoft Visual Studio Express For Web. Tutoriály píšem pre verziu 2013, rozhranie starších verzií sa môže trochu líšiť, ale určite nijako dramaticky, takže by ste všetko popisované mali nájsť.

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. Nový projekt založíme pomocou hlavného menu File -> New project (je tam aj možnosť New Web Site, ale tú nebudeme používať).

V dialógu vyberieme ako jazyk C #, ako typ projektu ASP.NET Web Application a meno zvolíme MVCNahodneCislo.

Akonáhle dialóg potvrdíme, zobrazí sa ďalší s výberom template. Template je předgenerovaná štruktúra projektu, my začneme s prázdnym projektom a preto vyberieme Empty. Nižšie zaškrtneme MVC, pretože túto technológiu budeme používať. Potvrdíme.

Adresárová štruktúra

Hoci sme založili prázdny projekt, Visual Studio aj tak vygenerovalo veľa súborov a priečinkov. To je preto, že ASP.NET MVC je framework, teda hotové riešenie, ktoré iba prispôsobujeme pre náš účel.

Určite ste si všimli zložiek Models, Views a Controllers. Práve sem pridáme komponenty našej aplikácie tak, ako sme si vysvetľovali v minulom dieli.

Model

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

public class Generator
{
    private 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 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 pomocou pravého tlačidla a výberu Add -> Controller. Ako typ vyberieme MVC Controller - Empty. Ostatné typy nám umožňujú napr. Rovno vygenerovať pohľady, použijeme ich ďalej v seriáli.

Ako meno kontroleru zvolíme HomeController. Meno kontroleru by malo vždy končiť na Controller. Home je obvyklý názov kontroleru, ktorý sa spustí vo chvíli, keď na stránku prídeme (bez toho aby sme zadávali ďalšie parametre).

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

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

Metóda Index () sa zavolá vo chvíli, kedy užívateľ zadá požiadavku na domovskú stránku. Práve v nej vytvoríme inštanciu modelu, získame si od neho dáta a tieto dáta odovzdáme pohľadu.

Metóda je návratového typu ActionResult, čo je vlastne objekt, ktorý po dokončení požiadavke zasielame prehliadači. V našom prípade mu zasielame šablónu (View). Rovnako tak mu môžeme zaslať súbor, žiadosť o presmerovanie alebo napríklad dáta v JSON. Vrátiť môžeme dokonca i len string, ktorý sa v prehliadači potom vypíše.

Odovzdanie dát pohľadu

K odovzdaniu dát máme k dispozícii 3 kolekcie, ktoré sú prístupné tak v kontroleru, tak neskôr v pohľade. V kontroleru kolekcii 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é ukazovatele pre šablónu pod textové kľúče. Používala sa hlavne predtým, ako C# zaviedol kľúčové slovo dynamic.
• ViewBag - ViewBag využíva dynamické vlastnosti, ktoré sú v C# .NET od verzie 4.0. Namiesto kľúčov zapisujeme rovno do vlastností, ktoré sa na ViewBag vytvorí. Tento spôsob budeme v seriáli používať.
• TempData - Pomerne mätúce kolekcia, slúžiace na odovzdanie dát najmä pri presmerovaní. Dáta sú vymazané po dokončení požiadavke.

Upravme metódu Index () v kontroleru tak, aby metóda pred vrátením pohľade získala dáta z modelu a tá uložila do ViewBag:

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

Aby sme mohli pristúpiť k modelu, je potrebné pridať using. Aj keď to všetci určite viete, pre istotu zopakujem, že kliknete na názov triedy a po zobrazení modrého podčiarknutia naklikne pridanie daného USING. V kontroléru sme hotoví. Zareagovali sme na požiadavku na indexovú stránku a prepojili model a pohľadom.

View

V našej aplikácii nám chýba už len šablóna (pohľad), v ktorej výstup zobrazíme užívateľovi. Pojmy šablóna a pohľad budem v seriáli zamieňať a myslím tým vždy pohľad. V priečinku Views máme už vytvorenú podpriečinok Home. Pridanie nového kontroleru vždy vytvorí podpriečinok pre jeho pohľady.

View najjednoduchšie pridáme priamo z príslušného kontroleru. Klikneme pravým kamkoľvek do metódy Index () a zvolíme Add View.

Pohľad sa bude volať rovnako ako metóda. Potvrdíme.

Je nám vygenerovaná HTML šablóna s nasledujúcim obsahom:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Na začiatku vidíme zavináč a C# kód. To je syntaxe tzv. Razor engine, ktorý slúži pre vkladanie C# kódu do HTML. V ASP.NET MVC existuje ešte niekoľko ďalších renderovacích enginov, ale takmer sa nepoužívajú.

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

Určite ste podľa obsahu vygenerovanej šablóny prišli na to, že šablóna nie je priamo výsledná HTML stránka, ale iba jej časť, ktorá sa potom vloží do layoutu. V tejto šablóne sa bude nachádzať iba to, čo je súčasťou jednej konkrétnej podstránky nášho webu. Podstránke nastavíme jej titulok pomocou ViewBag a Razor direktívy. Kód nižšie upravíme tak, aby sa 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 kontrolér, ktorý ho získal z modelu, ktorý ho vygeneroval.

Môžeme sa pre úplnosť pozrieť aj do zložky Shared v modeloch, kam sa vygeneroval layout stránky. Zatiaľ ho nebudeme upravovať.

Projekt spustíme, uvidíte takýto výsledok:

Port budete mať iný ako ja na screenshote.

Zopakovanie

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

Ako prvý je spustená metóda Index () v HomeControlleru. Tá sa spýta modelu na dáta a dáta uloží do ViewBag. Následne je vyrenderované pohľad, ktorý pomocou Razor syntaxe na určité miesta v šablóne vypisuje dáta z Viewbag. Hotová stránka je odoslaná užívateľovi.

Zdrojové kódy dnešného projektu sú k stiahnutiu nižšie, bude to tak vo všetkých dieloch. Ak sa vám niečo nepodarilo, môžete si nájsť chybu. V budúcej lekcii, Obsluha formulárov v ASP.NET MVC , sa pozrieme na obsluhu formulárov.

 

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š.