3. diel - Obsluha formulárov v ASP.NET Core MVC
V minulej lekcii, Prvá webová aplikácia v ASP.NET Core MVC , sme si v praxi vyskúšali MVC architektúru a
naučili sa odovzdávať dáta z modelu do pohľadu. Hovorili sme si, že toto
odovzdanie prebieha cez špeciálnu kolekciu (najčastejšie
ViewBag
). Existuje však ešte druhý spôsob a to je napojenie
modelu priamo na View
, tejto technike sa hovorí model
binding. Ten sa hodí najmä pri práci s formulármi a
vyskúšame si ho v dnešnom ASP.NET Core tutoriálu. Programovať budeme
jednoduchú kalkulačku.
Založíme si novú ASP.NET Core Web Application, ktorú pomenujeme
MVCKalkulacka
. Aj keď by sme mohli ako minule začať s prázdnym
template, dnes zvolíme template MVC.
Tým nám budú vygenerované aj jednotlivé zložky pre MVC komponenty a nastavené ruty a konfigurácie, ktorú sme minule robili ručne. Bude nám vygenerovaný aj ukážkový projekt obsahujúci niekoľko sliderov a dokonca aj slávnu EÚ cookie hlášku. Môžete si ho skúsiť spustiť, minule sme ho nevyužili, aby sme lepšie pochopili ako MVC funguje a zbytočne nás nerozptyloval.
My tento projekt nebudeme potrebovať a preto vyprázdnime všetok obsah
zložiek Models
, Controllers
a Views
v
Solution Exploreri, avšak ponecháme súbor _ViewImports.cshtml
,
inak by nám správne nefungovali tzv. Tag helpers (viď ďalej). Ak by sme
začínali s prázdnym projektom ako minule, museli by sme tento súbor pridať
ručne. Ako názov projektu nepoužívajte len Kalkulacka
, pretože
by kolidoval s názvom našej triedy.
Rovno si ukážme, ako bude naša hotová kalkulačka vyzerať:
Model
Začnime opäť modelom, ktorým bude trieda Kalkulacka
. Tú si
pridajte do zložky Models
. Modelu pridáme niekoľko verejných
vlastností, konkrétne dve vstupné čísla, vybranú operáciu a výsledok.
Posledné vlastností bude list typu SelectListItem
, ktorý bude
obsahovať možné operácie pre pohľad. Ten z nich následne vyrenderuje HTML
element <select>
. List rovno naplníme v konstruktoru.
Nezabudnite si pridať
using Microsoft.AspNetCore.Mvc.Rendering
.
public class Kalkulacka { public int Cislo1 { get; set; } public int Cislo2 { get; set; } public double Vysledek { get; set; } public string Operace { get; set; } public List<SelectListItem> MozneOperace { get; set; } public Kalkulacka() { MozneOperace = new List<SelectListItem>(); MozneOperace.Add(new SelectListItem { Text = "Sečti", Value = "+", Selected = true }); MozneOperace.Add(new SelectListItem { Text = "Odečti", Value = "-" }); MozneOperace.Add(new SelectListItem { Text = "Vynásob", Value = "*" }); MozneOperace.Add(new SelectListItem { Text = "Vyděl", Value = "/" }); } }
Vlastnosť Text
triedy SelectListItem
je popisok
možnosti, ktorý vidí používateľ. Value
je hodnota, ktorá sa
odosiela na server (nemala by obsahovať diakritiku). Môžeme nastaviť aj
vlastnosť Selected
, ktorá označuje či má byť položka pri
zobrazení stránky vybraná.
Zostáva len metóda s nejakou logikou, ktorá podľa zvolenej
Operace
a hodnôt v Cislo1
a Cislo2
vypočíta Vysledek
:
public void Vypocitej() { switch (Operace) { case "+": Vysledek = Cislo1 + Cislo2; break; case "-": Vysledek = Cislo1 - Cislo2; break; case "*": Vysledek = Cislo1 * Cislo2; break; case "/": Vysledek = Cislo1 / Cislo2; break; } }
Výsledok sa po zavolaní metódy uloží do vlastnosti
Vysledek
. Rovnako tak by sme ho mohli aj vrátiť, ako sme to
robili v minulom projekte s náhodným číslom. Pre naše ďalšie zámery s
Binding to ale bude takto výhodnejšie.
Model máme hotový, pridajme si kontrolér.
Controller
Kontrolér budeme mať v našej aplikácii zas len jeden. Určite si
spomínate, že kontrolér slúži k prepojeniu modelu (logiky) a pohľadu (HTML
šablóny). Pridáme nový Empty Controller a pomenujeme ho
HomeController
. Tým sa spustí pri vstupe na úvodnú stránku
aplikácie. Prejdime do jeho kódu a metódu Index()
upravme do
nasledujúcej podoby:
public IActionResult Index() { Kalkulacka kalkulacka = new Kalkulacka(); return View(kalkulacka); }
Pri vstupe na stránku sa zavolá metóda Index()
, to už vieme.
Vtedy vytvoríme novú inštanciu modelu, čo je stále rovnaké, ako minule.
Novo však model odovzdáme pohľadu ako parameter. Opäť nezabudnite
nakliknúť using MVCKalkulacka.Models
.
View
Pre akciu Index()
vygenerujeme pohľad. To urobíme opäť
kliknutím kamkoľvek do metódy pravým tlačidlom a zvolením Add View. Ako
Template zvolíme Create a Model class nastavíme na
Kalkulacka
.
Template nám umožňuje do pohľadu rovno předgenerovat nejaký kód, tejto technike sa hovorí scaffolding. Template Create vygeneruje pohľad napojený na zvolený model a na vlastnosti tohto modelu vygeneruje formulár pre vytvorenie inštancie modelu. Keď aplikáciu teraz spustíme, vyzerá takto:
Vidíme, že Visual Studio vygenerovalo celkovo 4 Input pre čísla,
výsledok a operáciu. Operáciu však budeme chcieť zadávať pomocou elementu
<select>
a výsledok nebudeme vypisovať do formulárového
poľa, ale do HTML odseku <p>
.
Presunieme sa preto do Index.cshtml
a zmeníme ho do
nasledujúcej podoby:
@model MVCKalkulacka.Models.Kalkulacka @{ ViewData["Title"] = "Kalkulačka"; } <head> <title>@ViewData["Title"]</title> </head> <body> <h2>Index</h2> <h4>Kalkulacka</h4> <hr /> <div class="row"> <div class="col-md-4"> <form asp-action="Index"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Cislo1" class="control-label"></label> <br /> <input asp-for="Cislo1" class="form-control" /> <span asp-validation-for="Cislo1" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Cislo2" class="control-label"></label> <br /> <input asp-for="Cislo2" class="form-control" /> <span asp-validation-for="Cislo2" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Operace" class="control-label"></label> <br /> @Html.DropDownListFor(model => model.Operace, new SelectList(Model.MozneOperace, "Value", "Text")) <span asp-validation-for="Operace" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="Vypočítej" class="btn btn-default" /> </div> <p style="font-size: 2em;">@Model.Vysledek</p> </form> </div> </div> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} } </body>
Zmien sme proti pôvodnej podobe šablóny vykonali minimum. Na úplnom
začiatku šablóny vidíme nastavenie typu modelu, na ktorý je pohľad
nabindování (naviazaný). Ďalej sme nastavili titulok stránky a podnadpis.
Všimnite si, že keďže šablónu nevkladáme do layoutu, pridali sme do nej
elementy <head>
a <body>
. Nasleduje
formulár, ktorý vygenerovalo Visual Studio a len sme ho upravili.
Jednotlivé editačné pole pre vlastnosti modelu vkladáme týmto štýlom:
<div class="form-group"> <label asp-for="NazevVlastnosti" class="control-label"></label> <br /> <input asp-for="NazevVlastnosti" class="form-control" /> <span asp-validation-for="NazevVlastnosti" class="text-danger"></span> </div>
Atribúty asp-for
sú tzv. Tag helpers, pomocou ktorých
dokáže ASP.NET Core vygenerovať pre našu vlastnosť vhodný ovládací
prvok. Napr. pre dátum sa vloží DatePicker a podobne. Atribúty
asp-validation-for
vloží priestor pre výpis chybové hlášky v
prípade, že používateľ pole zle vyplní. To sa opäť zistí z dátového
typu vlastnosti a všetko teda funguje úplne automaticky. Drobnou nevýhodou
je, že danú vlastnosť odovzdávame helper ako text, čo ste si iste všimli.
Visual Studio nám našťastie správnosť kódu dokáže skontrolovať aj
tak.
Môžete vidieť, že kombinujeme tag helpers so starším systémom
vkladanie ovládacích prvkov pomocou IHtmlHelper
(@Html
). Nie všetky ovládacie prvky sú totiž v súčasnosti tag
helper podporované, niekedy sa tomuto riešeniu nevyhneme. Preferujeme však
napojovanie formulárových prvkov na vlastnosti modelu pomocou tag lymfocytov a
asp-for
než pomocou zavinac. Predsa chceme, aby HTML šablóna
vyzerala čo najviac ako HTML kód
Aby vám tag helpers v projekte fungovali, je potrebné mať v ňom aj súbor
pomenovaný _ViewImports.cshtml
s nasledujúcim obsahom. Ak ste
postupovali podľa tutoriálu, súbor už máte v projekte obsiahnutý. Ak ste
si tento súbor omylom zmazali alebo ste začali s prázdnym projektom, môžete
si ho teraz vytvoriť:
@using MVCKalkulacka @using MVCKalkulacka.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Na konci stránky vypíšeme vlastnosť Vysledek
modelu do HTML
odseku <p>
, tým ho zobrazíme užívateľmi.
Náš formulár teraz vyzerá takto:
Po jeho odoslaní sa zatiaľ nič nestane. Pokračovať budeme zas až nabudúce.
V budúcej lekcii, Spracovanie dát a validácie v ASP.NET Core MVC , aplikáciu dokončíme. Ak ste niekde urobili chybu, v budúcej lekcii si môžete tiež stiahnuť kompletnú kód projektu.