Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

První web v ASP.NET MVC - Kontrolery, pohledy a routy

V minulé lekci, Dokončení AJAX Tooltipu v ASP.NET MVC, jsme dokončili tooltip pomocí AJAX.

V minulém dílu jsme si vysvětlili rozdíl mezi MVC a WebForms. Dnes si vytvoříme svoji první webovou stránku.

Na začátek chci říci, že se sám ještě ASP učím. To pro vás znamená, že vám to budu vysvětlovat z amatérské úrovně. Neznamená to ovšem, že informace nejsou pravdivé.

Dále bych chtěl zdůraznit, že je potřeba mít minimální znalosti jazyka C#. Vědět alespoň co je to třída, metoda a vlastnost. Jak už bylo řečeno v předchozím dílu.

První stránka

Založíme si nový projekt typu ASP.NET MVC 4 Web Application, pojmenujeme ho MvcHelloWorld a klikneme na OK. Objeví se nám další vyskakovací okno s nabídkou. Jde o template projektu. To znamená, že Visual Studio (dále jen VS) nám nabízí nějaké už předpřipravené šablony projektů. My si vybereme Empty, View Engine necháme Razor a unit testy zatím nepotřebujeme. O dalších templatech si povíme v dalších dílech a zkusíme si vysvětlit jednotlivé rozdíly.

Ačkoli jsme si vybrali prázdný projekt, tak nám VS vygenerovalo několik složek se soubory uvnitř. V ASP.NET MVC je to dost o konvencích, které by se měly dodržovat. Jedna z nich je rozdělení souborů v projektu.

Projekt ASP.NET MVC4 – Empty - Základy ASP.NET MVC

My se dnes podíváme na složky Controllers a Views. Nakonec si řekneme něco o routách.

Klikneme pravým na složku Controllers a dáme Add -> Controller. Jak vidíte, VS nám hned dává najevo jednu konvenci a to je ta, že každý soubor (třída) s kontrollerem by měla mít postfix (název by měl končit na) Controller. Takže si ho přejmenujeme na HelloWorldCon­troller. Template kontroleru necháme takhle (empty). Klikneme na Add a otevře se nám vytvořený HelloWorldCon­troller. V něm by jste měli mít defaultní metodu Index(), tu si trochu pozměníme. ActionResult změníme na string a místo View vrátíme string "Hello World". Metoda by měla tedy vypadat nějak takto:

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

Když teď spustíte projekt Debug -> Start Debugging(F5), tak se nám otevře defaultní prohlížeč a v něm adresa http://localhost:45515/. Port máte ale určitě jiný. To proto, že server běží na vašem počítači, takže je port pokaždé náhodně vygenerovaný. Když kliknete v tray ikonkách na IIS Express pravým, uvidíte, že server stále běží. Když se podíváte na stránku co se vám zobrazilo, tak asi ne to, co jste očekávali. Chyba nám říká, že server nemohl najít dané soubory pro zobrazení našeho požadavku.

Vrátíme se tedy do VS a vypneme debugging (shift+F5 nebo Debug -> Stop Debugging). Podíváme se do složky App_Start. Vidíme tam 3 soubory. My se podíváme na RouteConfig.cs, otevřeme ho a vidíme tam metodu RegisterRoutes. Když se na ní podíváme, vidíme, že si registrujeme defaultní routu, která má jméno Default a url chce ve tvaru kontroler/akce/pa­rametry. Takže to očekává kontroler Home a akci Index. My si ale vytvořili kontroler HelloWorld, takže přepíšeme "Home" na "HelloWorld" a ostatní již necháme tak, jak to je. Když teď obnovíme data na našem serveru (ten mimochodem běží celou dobu, takže když rebuildnete, obnoví se data na serveru a stačí jen refreshnout stránku). Spustíme debug (F5) a otevře se nám stránka s textem "Hello World". Když se podíváte na zdrojový kód, tak to je ovšem holý text a ne webová stránka. Jdeme se tedy podívat dále.

Použití pohledů

Vrátíme se zpátky do HelloWorldCon­trolleru a upravíme naši metodu Index zpátky do původní podoby. Jestli jste ještě nevypnuli debugging, tak to teď udělejte a přepíšeme naší metodu, aby vracela ActionResult a vrátíme View(). Metoda teda vypadá v původním stavu takhle:

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

Klikneme pravým kdekoliv uvnitř této metody a klikneme na Add View. Vyskočí nám další okno. View name necháme takhle, View engine necháme na Razor (aspx engine používá cca 1% populace, rozdíl je v syntaxi jakým píšete kód do výsledné HTML stránky, navenek to ovšem nejde poznat). Strongly-typed view necháme takhle, to si ukážeme v dalších dílech, protože je to vázáno na model.

Klikneme tedy na Add. Vygenerovala se nám Index stránka. Jak si můžete všimnout, vygenerovala se nám automaticky do složky Views a do další podsložky HelloWorld (Podle názvu kontroleru). Do odstavce si tam přidáme text "Hello World z Indexu". Výsledek by měl být teda asi takový:

@{
    ViewBag.Title = "Index";
}

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

Určitě jste si všimli, že tohle jako HTML stránka nevypadá. Máte pravdu, než se dostane stránka k uživateli, tak to projde přes view engine, který teprve vygeneruje stránku. Zkompilujte si projekt a zkuste si jak vypadá stránka. Měl by tam být nadpis h2 s textem "Index" a pod tím odstavec s textem "Hello World z Indexu".

Předání dat z kontroleru pohledu

Ukážeme si ještě pár způsobů jak dostat text z kontroleru na výslednou html stránku. Vytvoříme si tedy další metodu v kontroleru HelloWorld(). Bude úplně stejná jako metoda Index, ale než vrátíme View, tak si ještě někde uložíme naši zprávu. Použijeme proto dynamickou propertu ViewBag. Je to novinka v ASP.NETu a to proto, že se kód vytváří až když něco chcete po kontroleru. Můžete tam zkrátka narvat cokoliv. Metoda by teda měla vypadat nějak takto:

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

Klikneme pravým dovnitř metody a přidáme si další pohled. Tentokrát se jmenuje HelloWorld, necháme všechno tak jak je a klikneme na Add. Vygenerovala se nám další podstránka, která má název HelloWorld.cshtml a je v složce Views/HelloWorld. My si tedy vyzvedneme naší zprávu dopíšeme tedy následující kód.

<p>@ViewBag.zprava</p>

Zavináč je syntaxe Razor enginu, takže pokaždé když budete psát kód tak použijete @... ASPX engine má zase syntaxy <% ... %>.

Spustíme si debugging a zkuste si napsat na jakou adresu se máte odkázat, aby jste viděli výsledek. Jestli nevíte, tak vám napovím, podívejte se do souboru App_Start/Rou­teConfig.cs. Jestli vás nic nenapadá, tak stránku musíme zadat ve formátu kontroler/akce/pa­rametry. My žádné parametry nemáme, takže zadáme pouze .../HelloWorld/He­lloWorld (První HelloWorld je kontroler a další je už název akce).

Dynamická stránka

Když už jsme se dali do řeči o parametrech, tak si vytvoříme nějakou stránku, která se bude dynamicky generovat podle toho, co si zadá uživatel. V HelloWorld kontroleru si upravíme naší metodu HelloWorld, přidáme tam parametr pocet(int) a tu si dáme do naší dynamické vlastnosti. Zkontrolujte si, jestli jste zapsali kód správně.

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

Vrátíme se do souboru Views/HelloWor­ld/HelloWorld­.cshtml a upravíme náš soubor:

@{
    ViewBag.Title = "HelloWorld";
}

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

Zkompilujeme náš projekt a zkusíme zadat adresu .../HelloWorld/He­lloWorld/?pocet=5. Mělo by se vám zobrazit HelloWorld a pod tím několik odrážek zprávy "Hello World pomocí ViewBagu", závislé na tom počtu, kolik jste tam zadali.

Jak to tedy funguje

  1. Uživatel zadá adresu, kterou by chtěl zobrazit
  2. Routovací engine se dívá po kontroleru na základě routovacího nastavení
    • Když neexistuje, je vrácen routovacím enginem zpátky s chybou
    • Když existuje, jde se dále
  3. Našli jsme kontroler. Uvnitř kontroleru se najde daná akce, kterou uživatel potřeboval
  4. Komunikuje se s Modelem (daty v databázi), provádí různé dotazy na filtrování dat apod.
  5. Vrací se kontroler a ten chce po View enginu vyrenderovat view (to jsou ty View co jsme pořád vytvářeli)
  6. Kontroler posílá výsledek uživateli

Pro demonstraci jsem nakreslil následující obrázek.

Jak ASP.NET MVC funguje - Základy ASP.NET MVC

Na závěr vám znova připomenu co jaká část MVC dělá.

Models - Třídy, které reprezentující data applikace. Společně s business pravidly, která souvisí s validací dat, třeba pomocí atributů (díky atributům jde lehce říct, že při validaci dat je tohle důležité, tohle musí mít délku 5 apod.)

Pozn.: S atributy souvisí pojem scaffolding, ale na ten se podíváme příště.

Views - Jsou šablony souborů, které se potom posílají do View Enginu a jako výsledek je dynamicky vygenerována HTML stránka.

Controllers - Mají za úkol vyřídit dotaz od uživatele, pracovat s modelem (daty) a potom vybrat view (pohled, šablonu) pro danou stránku a odeslat odpověď. (formou zobrazení stránky třeba).


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 353x (6.04 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Předchozí článek
Dokončení AJAX Tooltipu v ASP.NET MVC
Všechny články v sekci
Základy ASP.NET MVC
Článek pro vás napsal Jan Vargovský
Avatar
Uživatelské hodnocení:
9 hlasů
H̴̢̡̛̫̙̖̦͍̥̺̳̪͖̺̫̲͇̗̹̠̥͈̭͔̻̗͚̭̥̝͐̋͒̆̾̅͒̈̐̀̒̔̇̈̔̆̎̔͐̊͆̆̐̊̈͆̂̐̓̓͛̌̈́̈́̅̅̔̚̕̚͠͝͝͝͝ì̸͇͖̹̯̤͇͍̹̥̅͗͆̄̌͆͑̓̈́̓̊̈́͋̈́͛͊͛͂̇͋͒̿̃͐͌̐̚͝͝͝͝͝͝.̶̧̡̧̧̖̫̯̞͖̯̩̠̭̩͇͔̤̱̜̠̠̙͉͉̼̱͓̣͍̱͎͕̦͓̫̗̮̦͍͚̗͕̥̳͚̬̯̞̟͇̻̺̙͙̜͖̰̊͒̌̌̚͜͜͝
Aktivity