2. díl - První webová aplikace v ASP.NET MVC

C# .NET ASP.NET MVC První webová aplikace v ASP.NET MVC

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET jsme si uvedli MVC architekturu. 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.

Nový ASP.NET projekt ve Visual Studio

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.

Prázdný ASP.NET MVC projekt ve Visual Studio

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.

Adresářová struktura projektu v ASP.NET MVC ve Visual Studio

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.

Nový controller v ASP.NET MVC

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

Home Controller v ASP.NET MVC

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.

Přidání pohledu v ASP.NET MVC

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

Přidání pohledu v ASP.NET MVC

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:

Webová aplikace v ASP.NET MVC – Náhodné číslo

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

Zopakování

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

MVC architektura

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. Příště se podíváme na obsluhu formulářů.


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (14 hlasů) :
4.785714.785714.785714.785714.78571


 


Miniatura
Všechny články v sekci
Základy ASP.NET MVC
Miniatura
Následující článek
Obsluha formulářů v ASP.NET MVC

 

 

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

Avatar
Chockobo
Člen
Avatar
Chockobo:

Příklad jsem úspěšně rozjel na lokále.
Prozradí někdo jak dostat ASP projekt na WWW hosting?
Mám založen hosting s podporou ASP a FTP přístup do www rootu.
Jen nevím co z adresáře projektu tam nakopírovat.

 
Odpovědět 29. dubna 16:02
Avatar
Odpovídá na Chockobo
Michal Štěpánek:

Všechno z adresáře Bin/Release

Odpovědět 1. května 16:24
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Marian Benčat
Redaktor
Avatar
Odpovídá na Chockobo
Marian Benčat:

V menu (v build tusim) je volba Publish, tam si navolíš, že to chceš publishnout na File System do nějaké složky, vše z té složky poté vem a nakopiruj to na hosting. Zkopírovat složku BIN/Release ti vždy nemusí zrovna stačit.

 
Odpovědět 2. května 19:55
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:

Ahoj, potřebuji pomoct. Mám Visual Studio Express 2015 for Windows Desktop a ASP.net nemám v nabídce (jako mám v nabídce Consolové aplikace, WPF aplikace, tak ASP.net tam není). Zkoušel jsem i hledat...

http://prntscr.com/b36br6

Jak si mám do VS nainstalovat template pro ASP.net? Nebo mám použít nějaký, co jsem vyhledal? Nebo pro VS for Windows Desktop ASP.net prostě nejde a musím si nainstalovat VS for Web?

 
Odpovědět 12. května 15:40
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Petr Stastny
vajkuba1234:

Stáhni si Community, obsahuje vše a je zdarma.
Tady:

https://www.visualstudio.com/post-download-vs?sku=community&clcid=0x409
Odpovědět  +2 12. května 22:01
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Mila Kuba
Člen
Avatar
Mila Kuba:

Tak používám Community a ten příklad vůbec nejde rozjet. V prohlížeči to ukazuje samé chyby.
Můj, podle článku taky ne do doby, než jsem doplnil: using MVCNahodneCis­lo.Models;,kte­ré se samo negeneruje.

 
Odpovědět 18. října 13:42
Avatar
Odpovídá na Mila Kuba
Ondřej Štorc:

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.

...

Odpovědět 18. října 13:55
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Mila Kuba
Člen
Avatar
Odpovídá na Ondřej Štorc
Mila Kuba:

Dobře, ale projekt uváděný ke stažení spustit nejde . V prohlížeči to ukazuje , že je něco jinak než by chtěl.
S Community 2015.

 
Odpovědět 18. října 15:04
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Mila Kuba
David Čápka:

MS pořád mění strukturu projektu, takže se řešení stávají nefunkční v nových verzích IDE, i když s kódem není nic špatně. Pokud nejde otevřít, je to třeba prostě napsat podle tutoriálu.

Odpovědět 18. října 15:23
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
David Novák
Člen
Avatar
David Novák:

Výborný tutoriál, super, děkuju. Jede všechno perfektně. Na základě tohoto 2 dílu si píšu jednu aplikaci za druhou dle úkolů z OOP (náhodné věty apod), aby se to zažilo pro složitější aplikace. Davide, dle tvého perfektního návodu jsem to pochopil i já, který má ze znalostí internetu pouhých 7 dílů HTML a CSS. Máš můj obdiv, jak to dokážeš skvěle vysvětlit.

 
Odpovědět 24. října 10:56
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 38. Zobrazit vše