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

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

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

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

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ženo 328x (6.04 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal Jan Vargovský
Avatar
Autor se věnuje vývoji enterprise softwaru v .NETu.

Jak se ti líbí článek?
Celkem (4 hlasů) :
4.254.254.254.25 4.25


 


Miniatura
Všechny články v sekci
Základy ASP.NET MVC

 

 

Komentáře
Zobrazit starší komentáře (9)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Vrátil jsem se znovu k draw.io a hodně ho vylepšili, takže budu vše dělat už jen v něm :) Vyrovná se Visiu které stojí 8k a to je úplně zadarmo.

Odpovědět 17.8.2013 9:38
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na David Čápka
Inoue Yūki:

Právě se na to koukám, díky za doporučení. :)

Odpovědět 17.8.2013 9:49
Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

Ahoj mám dotaz. IIS server po vypnutí debug ve VS se vypne ? Je to celkem otravný vždy zapínat přes F5 a Chrome vám to pak otevírá v nové záložce.

Odpovědět 18.12.2013 8:09
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Petr Nymsa
David Čápka:

Mám dojem, že projekt nemusíš vypínat a zapínat po změně v kódu, stačí ho uložit a dát v prohlížeči F5.

Odpovědět 18.12.2013 8:17
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Petr Nymsa
Jan Vargovský:

Já si vždycky zapnu iis skrz debug a pak jen kompiluju a reshuju stranku. Ale proč se ti vypíná najdeš popř vygooglujes ne ? :)

 
Odpovědět 18.12.2013 8:46
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na David Čápka
Petr Nymsa:

Vypíná se mi právě IIS - server. Je mi jasný že by pak stačilo dát Build a F5 v prohližeči, jenže když je vyplej server tak to moc nejde že :D

Odpovědět 18.12.2013 11:02
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
coells
Redaktor
Avatar
Odpovídá na Petr Nymsa
coells:

Ten mini server, ktery se by default spousti ze studia neni IIS!!! Pozor na to, vetsina featur v nem chybi. Napojeni na IIS se dela pres property projektu jako obvykle. IIS se nikdy nezastavuje, ale pri zmene ve virtualni aplikaci dojde k restartu aplikace. Defaultni server navic nepouzivejte dele, nez je nutne. Napriklad kdyz sahnes do filesystemu, tak to projde, ale na IIS to bude vsechno padat. Pro MVC nepouzivej chrome, ale IE. Uz je to kolik let a chrome blbne stale stejne. Jsem taky chromar, ale kvuli ASP mam default IE.

 
Odpovědět 18.12.2013 11:14
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na coells
Petr Nymsa:

Aha :) Díky, dneska jsem teprve na ASP začal koukat

Odpovědět 18.12.2013 11:15
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Petr Nymsa
David Čápka:

Také se na něj chystám velice brzy. Můžeme dát zas nějakou coop :)

Odpovědět 18.12.2013 12:16
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na David Čápka
Petr Nymsa:

Jelikož mě přišla nabídka na práci s ASP chci si to zkusit ošahat a zjistit jestli jsme schopnej vůbec udělat něco kloudného. Zatím to nevypadá zle :)

Odpovědět 18.12.2013 13:23
Pokrok nezastavíš, neusni a jdi s ním vpřed
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 19. Zobrazit vše