1. díl - Úvod do MVC architektury v ASP.NET

C# .NET ASP.NET MVC Úvod do MVC architektury v ASP.NET

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET jsme si vysvětlili proč je dobrý nápad naší aplikaci naprogramovat jako webovou. Pokud čtete tento tutoriál, rozhodli jste se naučit technologii ASP.NET MVC.

MVC je velmi oblíbený architektonický vzor, který se uchytil zejména na webu, ačkoli původně vznikl na desktopech. Je součástí populárních webových frameworků, jakými jsou kromě ASP.NET MVC např. Zend nebo Nette pro PHP a Ruby On Rail pro Ruby. Osobně si bez něj (nebo nějakého podobného principu) nedokáži představit složitější web.

Motivace

Základní myšlenkou MVC architektury je oddělení logiky od výstupu. Řeší tedy problém tzv. "špagetového kódu", kdy máme v jednom souboru (třídě) logické operace a zároveň renderování výstupu. Soubor tedy obsahuje databázové dotazy, logiku (C# kód) a různě poházené HTML tagy. Vše je zamotané do sebe jako špagety.

Kód se samozřejmě špatně udržuje, natož rozšiřuje. Je špatně highlightovaný, protože si s ním IDE neví rady, HTML není správně naformátováno, ztrácíme se v jeho stromové struktuře. Naším cílem je, aby zdrojový kód s logikou vypadal jako zdrojový kód v C# a výstup vypadal jako HTML stránka s co nejmenší příměsí dalšího kódu.

Komponenty

Celá aplikace je rozdělena na komponenty 3 typů, hovoříme o Modelech, View (pohledech) a Controllerech (kontrolerech), od toho MVC. Označení pohled se budu snažit vyhýbat, protože mi přijde matoucí, že takto přeložené nekoresponduje s označením V. Neexistuje žádná striktní definice architektury a tak se můžete setkat s více výklady. Zaměřil jsem se na ten nejrozšířenější.

Pojďme si jednotlivé komponenty nejprve popsat.

Model

Komponenta model z MVC architektury Model obsahuje logiku a vše, co do ní spadá. Mohou to být výpočty, databázové dotazy, validace a podobně. Pro nás to znamaná, že modely jsou klasické C# třídy, jako jsme je znali doposud. Model vůbec neví o výstupu. Jeho funkce spočívá v přijetí parametrů zvenku a vydání dat ven. Zdůrazním, že parametry nemyslím URL adresu ani žádné jiné parametry od uživatele, ale parametry metod ve třídě modelu. Model neví, odkud data v parametrech přišla a ani jak budou výstupní data zformátována a vypsána.

V seriálu budeme používat EntityFramework, modely potom přímo korespondují s databázovými tabulkami. Máme tedy model Uzivatel, Komentar nebo Clanek. Instance modelů obsahují samozřejmě vlastnosti z databáze. Např. instance modelu Uzivatel má vlastnost Jméno. Třídě můžeme definovat instanční metody, např. takovou, která vypočítá věk uživatele podle jeho data narození.

Nyní máme představu, co model vykonává, pojďme se podívat na pohled.

View

Komponenta view z MVC architektury Pohled (View) se stará o zobrazení výstupu uživateli. Jedná se o HTML šablonu, obsahující HTML stránku a tagy speciálního jazyka, který umožňuje do šablony vkládat proměnné, případně provádět iterace (cykly) a podmínky. Pohled uzivatel tedy vypíše detaily o uživateli, pohled clanek vypíše obsah článku.

Pohledů máme mnoho, např. pro funkcionalitu s entitou uživatele: uzivatel_regis­trace, uzivatel_prih­laseni, uzivatel_profil a podobně. Pohled uzivatel_profil je ale již společný všem uživatelům a jsou do něj posílána různá data, vždy podle toho, koho zrovna zobrazujeme. Tato data jsou poté dosazena do HTML elementů šablony.

Šablony lze samozřejmě vkládat do sebe, abychom se neopakovali (šablona s layoutem stránky, šablona s menu a šablona článkem).

View není jen šablona, ale zobrazovač výstupu. Obsahuje tedy minimální množství logiky, která je pro výpis nutná (např. kontrola, zda si uživatel vyplnil přezdívku před jejím vypsáním nebo cyklus s komentáři, které se vypisují).

View podobně jako Model vůbec neví, odkud mu data přišla, stará se jen o jejich zobrazení uživateli.

Controller

Komponenta controller z MVC architektury Controller je nyní onen chybějící prvek, který osvětlí funkčnost celého vzoru. Jedná se o jakéhosi prostředníka, se kterým komunikuje uživatel, model i view. Drží tedy celý systém pohromadě a komponenty propojuje. Jeho funkci pochopíme z ukázky životního cyklu stránky. Nejčastěji má každá entita jeden controller, máme tedy UzivatelController, ClanekController a tak podobně.

Životní cyklus stránky

Životní cyklus zahajuje uživatel, který zadá do prohlížeče adresu webu a parametry, kterými nám sdělí, kterou podstránku si přeje zobrazit. Budeme chtít zobrazit detail uzivatele s id 15. Udělejme si ukázku URL adresy:

http://www.domena.cz/uzivatel/detail/15

Požadavek jako první zachytí tzv. router. Ten podle parametrů pozná, který controller voláme.

Daný controller podle parametrů pozná, co se po něm chce, tedy že má zobrazit detail uživatele. Zavolá model, který uživatele vyhledá v databázi a vrátí jeho údaje. Dále zavolá další metodu modelu, která např. vypočítá věk uživatele. Tyto údaje si controller ukládá do proměnných. Nakonec vyrenderuje view (pohled). Název pohledu poznáme podle akce, kterou provádíme. View jsou předány proměnné s příslušnými daty. Controller tedy poslechl uživatele, obstaral podle parametrů dotazu data od modelu a předal je view.

View přijme data od controlleru a vloží je do připravené šablony. Hotová stránka je zobrazena uživateli, který často o celé této kráse ani netuší :)

Celou situaci můžeme znázornit diagramem:

MVC architektura

Získali jsme tedy oddělení logiky od výstupu, view jsou jako HTML, modely zas v C#. Dosáhli jsme přehlednosti kódu, který je logicky rozčleněný.

MVC architektura nám usnadňuje i myšlení při vývoji projektu. Když píši logiku, patří do modelu, formátování a stylování výstupu řeším v šabloně, to co uživatel chce z parametrů zjišťuji v controlleru. 3 různé problémy na 3 různých místech, oddělené tak, aby do sebe nezasahovaly a nedělaly nám vývoj složitější.

Příště si vytvoříme svou první webovou aplikaci v ASP.NET MVC.


 

  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 (12 hlasů) :
4.833334.833334.833334.833334.83333


 


Miniatura
Předchozí článek
Kurz / školení ASP.NET MVC
Miniatura
Všechny články v sekci
Základy ASP.NET MVC
Miniatura
Následující článek
První webová aplikace v ASP.NET MVC

 

 

Komentáře

Avatar
Jakub Šťastný:

Mphl bych se zeptat na nějakou knihu zabývající se MVC

 
Odpovědět 16.7.2015 14:31
Avatar
Odpovídá na Jakub Šťastný
Ondřej Štorc:

K čem knihu, když zde na síti máš o MVC spoustu článků...

Odpovědět  +2 16.7.2015 14:33
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
vajkuba1234
Člen
Avatar
Odpovědět 16.7.2015 14:55
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Ondřej Štorc
vajkuba1234:

Tak někde je to třeba trochu podrobněji vysvětlené a nebo ukázány zase jiné příklady. Každému asi vyhovuje jiný styl psaní. :)

Odpovědět 16.7.2015 14:56
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Jakub Šťastný:

díky za tip,
tyto články jsou sice fajn, ale jsou dobré na pochopení základů nebo pro obecný přehled, ale přece jenom v knize najdu problematiku více vysvětlenou do detailů, a taky tam většinou najdu nějaké dobré tipy

Editováno 18.7.2015 10:40
 
Odpovědět 18.7.2015 10:39
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 5 zpráv z 5.