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

1. diel - Úvod do MVC architektúry v ASP.NET Core

V minulej lekcii, , sme si vysvetlili prečo je dobrý nápad našu aplikáciu naprogramovať ako webovú. Ak čítate tento tutoriál, rozhodli ste sa naučiť technológiu ASP.NET Core MVC.

Hoci v ASP.NET Core je viac možností ako aplikáciu vytvoriť, začneme tou najpopulárnejší, ktorou je MVC. Jedná sa o veľmi obľúbený architektonický vzor, ktorý sa uchytil najmä na webe, hoci pôvodne vznikol na desktopoch. Je súčasťou populárnych webových frameworkov, akými sú okrem ASP.NET Core MVC napr. Zend alebo Nette pre PHP a Ruby On Rails pre Ruby. Osobne si bez neho (alebo nejakého podobného princípu) nedokážem predstaviť zložitejšie web.

Motivácia

Základnou myšlienkou MVC architektúry je oddelenie logiky od výstupu. Rieši teda problém tzv. "Špagetového kódu", kedy máme v jednom súbore (triede) logické operácie a zároveň renderovanie výstupu. Súbor teda obsahuje databázové dotazy, logiku (C # kód) a rôzne pohádzané HTML tagy. Všetko je zamotané do seba ako špagety.

Kód sa samozrejme zle udržuje, nieto rozširuje. Je zle highlightovaný, pretože si s ním IDE nevie rady, HTML nie je správne naformátované, strácame sa v jeho stromovej štruktúre. Naším cieľom je, aby zdrojový kód s logikou vyzeral ako zdrojový kód v C# a výstup vyzeral ako HTML stránka s čo najmenšou prímesou ďalšieho kódu.

Komponenty

Celá aplikácia je rozdelená na komponenty 3 typov, hovoríme o modeli, View (pohľadoch) a Controller (kontroléry), od toho MVC. Označenie pohľad sa budem snažiť vyhýbať, pretože mi príde mätúce, že takto preloženej nekorešponduje s označením V. Neexistuje žiadna striktná definícia architektúry a tak sa môžete stretnúť s viacerými výklady. My sa zameriame na ten najrozšírenejší.

Poďme si jednotlivé komponenty najprv popísať.

Model

Komponent model z MVC architektúry - Základy ASP.NET Core MVC
Model obsahuje logiku a všetko, čo do nej spadá. Môžu to byť výpočty, databázové dotazy, validácie a podobne. Pre nás to znamená, že modely sú klasické C# triedy, ako sme ich poznali doteraz. Model vôbec nevie o výstupe. Jeho funkcia spočíva v prijatí parametrov zvonku a vydanie dát von. Zdôraznime, že parametre nemyslíme URL adresu ani žiadne iné parametre od užívateľa, ale parametre metód v triede modelu. Model nevie, odkiaľ dáta v parametroch prišla a ani ako budú výstupné dáta naformátovaná a vypísaná.

V kurze budeme používať EntityFramework, modely potom priamo korešpondujú s databázovými tabuľkami. Máme teda model Uzivatel, Komentar alebo Clanek. Instance modelov obsahujú samozrejme vlastnosti z databázy. Napr. inštancia modelu Uzivatel má vlastnosť Jmeno. Triede môžeme definovať inštančný metódy, napr. Takú, ktorá vypočíta vek používateľa podľa jeho dátumu narodenia.

Teraz máme predstavu, čo model vykonáva, poďme sa pozrieť na pohľad.

View

Komponent view z MVC architektúry - Základy ASP.NET Core MVC
Pohľad (View) sa stará o zobrazenie výstupu užívateľovi. Jedná sa o HTML šablónu, obsahujúci HTML stránku a tagy špeciálneho jazyka, ktorý umožňuje do šablóny vkladať premenné, prípadne vykonávať iterácie (cykly) a podmienky. Pohľad Uzivatel.cshtml teda vypíše detaily o používateľovi, pohľad Clanek.cshtml vypíše obsah článku.

Pohľadov máme veľa, napr. Pre funkcionalitu s entitou užívateľa: Registrace.cshtml, Prihlaseni.cshtml, Profil.cshtml a podobne. Pohľad Profil.cshtml je ale už spoločný všetkým užívateľom a sú do neho posielané rôzne dáta, vždy podľa toho, koho zrovna zobrazujeme. Tieto dáta sú potom dosadená do HTML elementov šablóny.

Šablóny možno samozrejme vkladať do seba, aby sme sa neopakovali (šablóna s layoutom stránky, šablóna s menu a šablóna článkom).

View nie je len šablóna, ale zobrazovač výstupu. Obsahuje teda minimálne množstvo logiky, ktorá je pre výpis nutná (napr. Kontrola, či si užívateľ vyplnil prezývku pred jej vypísaním alebo cyklus s komentármi, ktoré sa vypisujú).

View podobne ako Model vôbec nevie, odkiaľ mu dáta prišla, stará sa len o ich zobrazenie užívateľovi.

Controller

Komponent controller z MVC architektúry - Základy ASP.NET Core MVC
Controller je teraz onen chýbajúci prvok, ktorý osvetlí funkčnosť celého vzoru. Ide o akéhosi prostredníka, s ktorým komunikuje užívateľ, model i view. Drží teda celý systém pohromade a komponenty prepája. Jeho funkciu pochopíme z ukážky životného cyklu stránky. Najčastejšie má každá entita jeden controller, máme teda UzivatelController, ClanekController a tak podobne.

Životný cyklus stránky

Životný cyklus začína používateľ, ktorý zadá do prehliadača adresu webu a parametre, ktorými nám oznámi, ktorú podstránku si želá zobraziť. Budeme chcieť zobraziť detail užívateľov s id 15. Urobme si ukážku URL adresy:

http://www.domena.cz/Uzivatel/Detail/15

Požiadavka ako prvý zachytí tzv. Router. Ten podľa parametrov spozná, ktorý controller voláme.

Daný controller podľa parametrov spozná, čo sa po ňom chce, teda že má zobraziť detail užívateľa. Zavolá model, ktorý používateľa vyhľadá v databáze a vráti jeho údaje. Ďalej zavolá ďalšiu metódu modelu, ktorá napr. Vypočíta vek používateľa. Tieto údaje si controller ukladá do premenných. Nakoniec vyrenderuje view (pohľad). Názov pohľadu poznáme podľa akcie, ktorú vykonávame. View sú odovzdané premenné s príslušnými dátami. Controller teda poslúchol užívateľa, obstaral podľa parametrov dotazu dáta od modelu a odovzdal ich view.

View prijme dáta od Controlleru a vloží ich do pripravenej šablóny. Hotová stránka je zobrazená užívateľovi, ktorý často o celej tejto kráse ani netušia :)

Celú situáciu môžeme znázorniť diagramom:

MVC architektúra - Základy ASP.NET Core MVC

Získali sme teda oddelenie logiky od výstupu, view sú ako HTML, modely zas v C #. Dosiahli sme prehľadnosti kódu, ktorý je logicky rozčlenený.

MVC architektúra nám uľahčuje aj myslenia pri vývoji projektu. Keď píšem logiku, patrí do modelu, formátovanie a štýlovanie výstupu riešim v šablóne, to čo užívateľ chce z parametrov zisťujem v Controlleru. 3 rôzne problémy na 3 rôznych miestach, oddelené tak, aby do seba nezasahovali a nerobili nám vývoj zložitejšie.

ASP.NET MVC vs ASP.NET Core

ASP.NET (rovnako ako celý pôvodný .NET framework) je spravovaný spoločnosťou Microsoft a ako taký bol dlho cielený len na operačný systém Windows. Keďže však často potrebujeme, aby naše stránka mohla bežať aj pod iným OS bez ďalšej zbytočnej práce (napr. Kvôli hostingu), toto obmedzenie bolo pre vývoj v .NET pomerne limitujúce. K tomu sa ešte pridali ďalšie nevýhody oproti iným jazykom, napr. Že .NET nie je open source.

Preto sa Microsoft pred pár rokmi rozhodol framework oživiť a prepísať. Výsledkom je nový high-level framework .NET Core. Ten je novo multiplatformový, open source a prináša aj niekoľko ďalších výhod, spomeniem napr. Vstavanou DI ( Dependency Injection), lepší výkon ako pôvodná ASP.NET alebo možnosť mať viac verzií frameworku na jednom stroji naraz. Core bol tiež prepísaný tak, aby používal modernejší architektúru.

Dočasná hlavnou nevýhodou Coru je, že hoci má mnoho spoločného so starším .NET a podporuje všetky súčasti .NET štandardu, niektoré veci z .NET v Coru zatiaľ nenájdeme (a tiež naopak). Ak teda plánujete len rozširovať už existujúce, starší aplikáciu, bude mať väčší zmysel naučiť sa radšej pôvodné ASP.NET MVC, ktorý je navyše dnes po rokoch vývoja o niečo ucelenejší. Nie všetky balíčky / knižnice tretích strán sú dostupné pre Core.

Momentálne obe technológie existujú a vyvíja sa vedľa seba, obe budú ešte nejakú dobu podporované, v tutoriálu ale nie je dôvod, aby sme nepracovali s novším ASP.NET Core. V budúcej lekcii, Prvá webová aplikácia v ASP.NET Core MVC , si vytvoríme svoju prvú webovú aplikáciu v ASP.NET Core MVC.


 

Všetky články v sekcii
Základy ASP.NET Core MVC
Preskočiť článok
(neodporúčame)
Prvá webová aplikácia v ASP.NET Core MVC
Článok pre vás napísal Martin Petrovaj
Avatar
Užívateľské hodnotenie:
5 hlasov
Autor je lenivý vymýšľať nejaký slušný podpis. Venuje sa ale prevažne C#.
Aktivity