Prvý web v ASP.NET MVC - Kontrolery, pohľady a ruty

V minulom dieli sme si vysvetlili rozdiel medzi MVC a WebForms. Dnes si vytvoríme svoju prvú webovú stránku.

Na začiatok chcem povedať, že sa sám ešte ASP učím. To pre vás znamená, že vám to budem vysvetľovať z amatérskej úrovne. Neznamená to však, že informácie nie sú pravdivé.

Ďalej by som chcel zdôrazniť, že je potrebné mať minimálne znalosti jazyka C #. Vedieť aspoň čo je to trieda, metóda a vlastnosť. Ako už bolo povedané v predchádzajúcom dieli.

Prvá stránka

Založíme si nový projekt typu ASP.NET MVC 4 Web Application, pomenujeme ho MvcHelloWorld a klikneme na OK. Objaví sa nám ďalší vyskakovacie okno s ponukou. Ide o template projektu. To znamená, že Visual Studio (ďalej len VS) nám ponúka nejaké už predpripravené šablóny projektov. My si vyberieme Empty, View Engine necháme Razor a unit testy zatiaľ nepotrebujeme. O ďalších Temple si povieme v ďalších dieloch a skúsime si vysvetliť jednotlivé rozdiely.

Hoci sme si vybrali prázdny projekt, tak nám VS vygenerovalo niekoľko zložiek so súbormi vnútri. V ASP.NET MVC je to dosť o konvenciách, ktoré by sa mali dodržiavať. Jedna z nich je rozdelenie súborov v projekte.

My sa dnes pozrieme na zložky Controllers a Views. Nakoniec si povieme niečo o routách.

Klikneme pravým na priečinok Controllers a dáme Add -> Controller. Ako vidíte, VS nám hneď dáva najavo jednu konvenciu a to je tá, že každý súbor (trieda) s kontroller by mala mať postfix (názov by mal končiť na) Controller. Takže si ho premenujeme na HelloWorldCon­troller. Template kontroleru necháme takhle (empty). Klikneme na Add a otvorí sa nám vytvorený HelloWorldCon­troller. V ňom by ste mali mať defaultný metódu Index (), tú si trochu zmeníme a doplníme. ActionResult zmeníme na string a miesto View vrátime string "Hello World". Metóda by mala teda vyzerať nejako takto:

// GET: /HelloWorld/
public string Index()
{
    return "Hello World";
}

Keď teraz spustíte projekt Debug -> Start Debugging (F5), tak sa nám otvorí defaultný prehliadač a v ňom adresa http: // localhost: 45515 /. Port máte ale určite iný. To preto, že server beží na vašom počítači, takže je port zakaždým náhodne vygenerovaný. Keď kliknete v tray ikonkách na IIS Express pravým, uvidíte, že server stále beží. Keď sa pozriete na stránku čo sa vám zobrazilo, tak asi nie to, čo ste očakávali. Chyba nám hovorí, že server nemohol nájsť danej súbory pre zobrazenie našej požiadavky.

Vrátime sa teda do VS a vypneme debugging (shift + F5 alebo Debug -> Stop Debugging). Pozrieme sa do zložky App_Start. Vidíme tam 3 súbory. My sa pozrieme na RouteConfig.cs, otvoríme ho a vidíme tam metódu RegisterRoutes. Keď sa na ňu pozrieme, vidíme, že si registrujeme defaultný route, ktorá má meno Default a url chce v tvare kontrolér / akcia / parametre. Takže to očakáva kontrolér Home a akciu Index. My si ale vytvorili kontrolér HelloWorld, takže prepíšeme "Home" na "HelloWorld" a ostatné už necháme tak, ako to je. Keď teraz obnovíme dáta na našom serveri (ten mimochodom beží celý čas, takže keď rebuildnete, obnoví sa dáta na serveri a stačí len refreshnout stránku). Spustíme debug (F5) a otvorí sa nám stránka s textom "Hello World". Keď sa pozriete na zdrojový kód, tak to je však holý text a nie webová stránka. Ideme sa teda pozrieť ďalej.

Použitia pohľadov

Vrátime sa späť do HelloWorldCon­trolleru a upravíme našu metódu Index späť do pôvodnej podoby. Ak ste ešte nevypli debugging, tak to teraz urobte a prepíšeme našej metódu, aby vracala ActionResult a vrátime View (). Metóda teda vyzerá v pôvodnom stave takhle:

//
// GET: /HelloWorld/
public ActionResult Index()
{
    return View();
}

Klikneme pravým kdekoľvek vnútri tejto metódy a klikneme na Add View. Vyskočí nám ďalšie okno. View name necháme takto, View engine necháme na Razor (aspx engine používa cca 1% populácie, rozdiel je v syntaxi akým píšete kód do výslednej HTML stránky, navonok to však nejde spoznať). Strongly-typed view necháme takto, to si ukážeme v ďalších dieloch, pretože je to viazané na model.

Klikneme teda na Add. Vygenerovala sa nám Index stránka. Ako si môžete všimnúť, vygenerovala sa nám automaticky do zložky Views a do ďalšej podzložky HelloWorld (Podľa názvu kontroleru). Do odseku si tam pridáme text "Hello World z Indexu". Výsledok by mal byť teda asi taký:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<p>Hello World z Indexu</p>

Určite ste si všimli, že toto ako HTML stránka nevyzerá. Máte pravdu, než sa dostane stránka k užívateľovi, tak to prejde cez view engine, ktorý ešte len vygeneruje stránku. Skompilujte si projekt a skúste si ako vyzerá stránka. Mal by tam byť nadpis h2 s textom "Index" a pod tým odstavec s textom "Hello World z Indexu".

Odovzdanie dát z kontroleru pohľadu

Ukážeme si ešte pár spôsobov ako dostať text z kontroleru na výslednú html stránku. Vytvoríme si teda ďalšiu metódu v kontroleru HelloWorld (). Bude úplne rovnaká ako metóda Index, ale než vrátime View, tak si ešte niekde uložíme našu správu. Použijeme preto dynamickú property ViewBag. Je to novinka v ASP.Net a to preto, že sa kód vytvára až keď niečo chcete po kontroleru. Môžete tam skrátka narvať čokoľvek. Metóda by teda mala vyzerať nejako takto:

//
// GET: /HelloWorld/
public ActionResult HelloWorld()
{
    ViewBag.Zprava = "Hello World pomocí ViewBagu";
    return View();
}

Klikneme pravým dovnútra metódy a pridáme si ďalší pohľad. Tentoraz sa volá HelloWorld, necháme všetko tak ako je a klikneme na Add. Vygenerovala sa nám ďalší podstránka, ktorá má názov HelloWorld.cshtml a je v priečinku Views / HelloWorld. My si teda vyzdvihneme našej správu dopíšeme teda nasledujúci kód.

<p>@ViewBag.zprava</p>

Zavináč je syntaxe Razor enginu, takže zakaždým keď budete písať kód tak použijete @ ... ASPX engine má zase syntax <% ...%>.

Spustíme si debugging a skúste si napísať na akú adresu sa máte odkázať, aby ste videli výsledok. Ak neviete, tak vám napoviem, pozrite sa do súboru App_Start / RouteConfig.cs. Ak vás nič nenapadá, tak stránku musíme zadať vo formáte kontrolér / akcia / parametre. My žiadne parametre nemáme, takže zadáme iba ... / HelloWorld / HelloWorld (Prvý HelloWorld je kontrolér a ďalšie je už názov akcie).

Dynamická stránka

Keď už sme sa dali do reči o parametroch, tak si vytvoríme nejakú stránku, ktorá sa bude dynamicky generovať podľa toho, čo si zadá užívateľ. V HelloWorld kontroleru si upravíme našej metódu HelloWorld, pridáme tam parameter pocet (int) a tú si dáme do našej dynamické vlastnosti. Skontrolujte si, či ste zapísali kód správne.

//
// GET: /HelloWorld/10
public ActionResult HelloWorld(int pocet)
{
    ViewBag.Zprava = "Hello World pomocí ViewBagu";
    ViewBag.Pocet = pocet;
    return View();
}

Vrátime sa do súboru Views / HelloWorld / HelloWorld.cshtml a upravíme náš súbor:

@{
    ViewBag.Title = "HelloWorld";
}

<h2>HelloWorld</h2>
<ul>
    @for (int i = 1; i <= @ViewBag.Pocet; i++)
    {
        <li>@ViewBag.Zprava</li>
    }
</ul>

Skompilujeme náš projekt a skúsime zadať adresu ... / HelloWorld / HelloWorld /? Pocet = 5. Malo by sa vám zobraziť HelloWorld a pod tým niekoľko odrážok správy "Hello World pomocou ViewBagu", závislé na tom počte, koľko ste tam zadali.

Ako to teda funguje

1. Užívateľ zadá adresu, ktorú by chcel zobraziť
2. Routovacie engine sa pozerá po kontroleru na základe routovacího nastavenie - Keď neexistuje, je vrátený routovacím enginom späť s chybou
   • Keď existuje, ide sa ďalej
3. Našli sme kontrolér. Vnútri kontroleru sa nájde daná akcia, ktorú užívateľ potreboval
4. Komunikuje sa s Modelom (dátami v databáze), vykonáva rôzne otázky na filtrovanie dát a pod.
5. Vracia sa kontrolér a ten chce po View enginu vyrenderovať view (to sú tie View čo sme stále vytvárali)
6. Kontrolér posiela výsledok užívateľovi

Pre demonštráciu som nakreslil nasledujúci obrázok.

Na záver vám znova pripomeniem čo aká časť MVC robí.

Models - Triedy, ktoré reprezentujúci dáta applikace. Spoločne s business pravidlami, ktoré súvisí s validáciou dát, treba pomocou atribútov (vďaka atribútom ide ľahko povedať, že pri validácii dát je toto dôležité, toto musí mať dĺžku 5 a pod.)

Pozn .: S atribúty súvisí pojem scaffolding, ale na ten sa pozrieme nabudúce.

Views - Sú šablóny súborov, ktoré sa potom posielajú do View Enginmu a ako výsledok je dynamicky vygenerovaná HTML stránka.

Controllers - Majú za úlohu vybaviť dotaz od užívateľa, pracovať s modelom (dátami) a potom vybrať view (pohľad, šablónu) pre danú stránku a odoslať odpoveď. (Formou zobrazenie stránky treba).