ASP.NET MVC: Praktický príklad

Princíp architektonického vzoru MVC je pomerne jednoduchý z hľadiska funkčnosti. Ukážkovým príkladom môže byť jednoduchá aplikácia, ktorá kooperuje medzi jednotlivými komponentmi. Za týmto účelom je možné vytvoriť prázdnu MVC aplikáciu.

sda

Do prázdneho projektu vytvoríme adresáre Content a Scripts, pričom jednotlivé súbory sú k dispozícii na oficiálnych stránkach Bootstrap alebo je možné ich skopírovať z automaticky generovaného projektu MVC.

sda

Jedine súbor kaskádových štýlov je mierne upravený:

Ako je možné vidieť, vzor MVC sa rozprestiera v troch adresároch, a teda model v adresári Models, pohľad v adresári View a ovládač v adresári Controllers.

Model (Model) obsahuje tzv. dátovú vrstvu alebo business vrstvu, ktorá zabezpečuje vo veľkej miere nejaké dáta rôznej povahy, najmä databázovej, ale aj výpočty a podobne. Jedná sa o klasický C# kód, ktorý korešponduje s tzv. CodeBehind. Model funguje vo forme nejakého skladu, kde nejakým spôsobom dáta prichádzajú a odchádzajú. Forma, akou tieto dáta navštevujú daný model je zásluhou parametrov metód, teda nejedná sa o žiadne formátovacie výstupy a podobne.

Takže môžme vytvoriť jednoduchú triedu, ktorá nám bude vracať zoznam kníh. Principiálne nezáleží na forme týchto dát, takže by určite bolo možné vytvoriť nejaký databázový dátový zdroj podobným spôsobom ako v článku SQL Server: ADO.NET alebo SQL Server: Entity Framework.

A samotnú zdieľanú šablónu _Layout.cshtml:

Ako je možné vidieť šablónu obsahuje celú webovú stránku s odkazmi na jednotlivé kaskádové štýly ako aj JavaScriptové súbory. Obsah konkrétnych web stránok bude zobraziteľný v sekcii @RenderBody(). To znamená, že zobrazí sa zdieľaná šablóna a v mieste bližšie určenom touto funkciou sa zobrazí časť konkrétnej web stránky. Zdieľaná šablóna obashuje aj funkciu @RenderSection("Sidebar", false), ktorá predstavuje podobnú funkcionalitu. V mieste určenia tejto funkcie sa zobrazí v špecifickej situácii ďalšia určitá časť konkrétnej web stránky. Jednotlivé URL odkazy odkazujú na konkrétny ovládač (Controller).

Ovládač (Controller) je prakticky najdôležitejšia komponenta celého vzoru MVC, pretože prostredníctvom tohto prvku komunikujú všetky komponenty navzájom. Každý ovládač môže obsahovať jeden alebo viac pohľadov. Konkrétny ovládač podľa parametrov zistí akú akciu je potrebné vykonať. Následne sa zavolá model, ktorý vráti nejaké dáta do ovládača, ten ich nejakým spôsobom pripraví a posiela do pohľadu. Názov pohľadu zistíme podľa akcie, ktorú vykonávame. Teda, prvý kontakt používateľa s danou web stránkou sa realizuje prostredníctvom ovládača alebo pomocou JavaScriptu priamo z pohľadu.

Takže kompletný ovládač HomeController.csbude vyzerať nasledovne:

Jedná sa o podobný súbor akým disponuje model, takže v zásade je to čistý jazyk C# vo forme tzv. CodeBehind. Metóda Index() sa zavolá v prípade, ak používateľ vyvolá domovskú stránku. Podobne to platí aj pre ostatné metódy, napr. Prva(), Druha()Stvrta(), s tým, že každý tento názov špecifikuje daný pohľad. Návratový typ všetkých týchto metód je ActionResult, čo predstavuje objekt, ktorý po dokončení požiadavky posielame prehliadaču. V našom prípade posielame šablónu View() s určitými parametrami. Samozrejme, je možné posielať aj zložitejšie dátové typy.

K samotnej manipulácii dát dochádza, okrem uvedného, aj troma kolekciami, konkrétne:

  • ViewData: kolekcia vo forme slovníka, kde pridávame jednotlivé premenné pre šablónu pod nejakými textovými kľúčmi
  • ViewBag: kolekcia, ktorá používa dynamické vlastnosti, kde namiesto kľúčov zapisujeme priamo do vlastností, ktoré sa na strane ViewBag vytvoria
  • TempData: kolekcia, ktorá sa používa pri presmerovaní, pričom jednotlivé dáta sú po dokončení aktuálnej požiadavky následne odstránené

Vzhľadom k uvednému je najrozšírenejšia kolekcia, ViewBag, pretože nám poskytuje väčšie možnosti dátového použitia, teda disponuje bližšie nešpecifikovaným charakterom.

K takto pripravenému obsahu je možné generovať samostatné pohľadové stránky. Takže Index.cshtml bude vyzerať nasledovne:

Teda, po stlačení na odkaz Domov sa vykoná nasledovný kód z ovládača:

sda

To znamená, že jednoduchý reťazec predáme do pohľadu prostredníctvom kolekcie ViewBag.

Prva.cshtml bude vyzerať nasledovne:

Po stlačení na odkaz Prvá sa vykoná nasledovný kód z ovládača:

sda

Na tomto mieste sme len nechali zobraziť JavaScriptové prvky z knižnice Bootstrap.

Druha.cshtml bude vyzerať nasledovne:

Po stlačení na odkaz Druhá sa vykoná nasledovný kód z ovládača:

sda

Do kolekcie ViewBag je možné poslať aj viac položiek.

Špeciálne máme na tejto stránke uvedené v časti @section Sidebar nasledovný kód:

Tento úsek kódu zabezpečí zobrazenie doplnkovanej informácie na spoločnej šablóne.

Tretia.cshtml bude vyzerať nasledovne:

Teda, po stlačení na odkaz Tretia sa vykoná nasledovný kód z ovládača:

sda

Na tomto mieste sme požadovali v metóde Tretia() parameter s konkrétnym Id knihy s hodnotou 2. To je možné napísať ako parameter tejto funkcie a v samotnom tele použijeme túto hodnotu v podmienke LINQ dopytu v uvedenej forme. Bližsie nešpecifikovaná (dynamicky typovaná) premenná b bude obsahovať jednu knihu v tvare zoznamu. Obsah tohto zoznamu zobrazíme na pohľadovej stránke nasledovne:

Metóda je napísaná všeobecne pre výpis všetkých kníh. Túto premennú b predáme do pohľadu View() ako parameter View(b). Následne je možné súčasne použiť aj pôvodnú kolekciu ViewBag na ktorú sa odkazujeme prostredníctvom @ViewBag.Datum a pre konkrétny výpis danej položky knihy sa odkazujeme v uvedenom cykle s predtým špecifikovaným using odkazom @using mojeMVC.Models;.

Na pohľadovej stránke, ako už bolo uvedené, je možné písať JavaScriptový kód v jednej z nasledujúcich podôb:

V našom prípade sme vytvorili jednoduchú funkciu na zmeny pozadia spoločnej šablóny.

Stvrta.cshtml bude vyzerať nasledovne:

Teda, po stlačení na odkaz Štvrtá sa vykoná nasledovný kód z ovládača:

sda

Tento spôsob zobrazenia je podobný predchádzajúcemu spôsobu s tým rozdielom, že vypisujeme celý zoznam kníh priamo do HTML tabuľky prostredníctvom kolekcie ViewBack.

You may also like...