4. diel - Spracovanie dát a validácie v ASP.NET Core MVC

V minulej lekcii, Obsluha formulárov v ASP.NET Core MVC , sme načal spracovanie formulárov a napojenie modelu na pohľad. Jednoduchou kalkulačku dnes v C# .NET tutoriálu dokončíme.

Odoslanie formulára

Pri odoslaní nášho formulára sa zatiaľ nič nestane. Je to z toho dôvodu, že formulár odošle dáta na tú istú stránku. Požiadavka teda zachytí metóda Index() v kontroleru, ktorá vyzerá nasledovne:

public IActionResult Index()
{
    Kalkulacka kalkulacka = new Kalkulacka();
    return View(kalkulacka);
}

Aj po odoslaní formulára sa teda vytvorí nová inštancia kalkulačky, ktorá má nulový výsledok a tá sa nastaví pohľadu. Preto je výsledok stále nula. Situáciu odoslaní formulára na stránku, ktorá ho má spracovať, sa niekedy hovorí PostBack. My by sme práve na túto situáciu potrebovali reagovať iným spôsobom, než že opäť vypíšeme stránku určenú pre situáciu, kedy užívateľ ešte nič neodoslal.

Do kontroleru pridáme ďalšiu metódu Index(), tentoraz s parametrom a atribútom HttpPost:

[HttpPost]
public IActionResult Index(Kalkulacka kalkulacka)
{
    if (ModelState.IsValid)
    {
        kalkulacka.Vypocitej();
    }

    return View(kalkulacka);
}

V metóde nám príde parametrom inštancie kalkulačky tak, ako bola vytvorená z hodnôt v odoslanom formulári. Ak je model validný, čo zistíme pomocou triedy ModelState, zavoláme metódu výpočtu. Nakoniec vrátime pohľad, ktorému odovzdáme daný model so zadanými hodnotami a výsledkom.

Metóda je označená atribútom [HttpPost]. Tým hovoríme, že si želáme, aby bola spustená len v prípade, že sa odoslal formulár. ASP.NET vždy spúšťa to preťaženie metódy, ktoré sa najviac hodia na danú situáciu. Odoslanie formulára teda už nespadne do prvej metódy Index(), ale až do tej novej.

Aplikáciu môžeme vyskúšať, už sa nám bude zobrazovať výsledok operácie:

Vyplnená zostanú i ostatné polia, pretože sa hodnota načíta z modelu, ktorý ju má nastavenú z POST.

GET a POST

Patrilo by sa povedať, že okrem metódy POST existuje ešte metóda GET. Obe metódy môžeme použiť na odoslanie údajov našej aplikácii.

Už vieme, že metódou POST sa odosielajú hodnoty z formulára. Dáta sa odošlú vnútri HTTP požiadavky na server. Hoci sa to nemusí vždy striktne dodržiavať, metóda POST slúži hlavne pre vkladanie nových dát.

Metódou GET odovzdávame dáta priamo v URL adrese. Ak by sme ju chceli u nejaké metódy kontroleru vynútiť, môžeme použiť podobne ako u POST atribút [HttpGet].

Urobme si jednoduchý príklad použitia parametra odovzdaného metódou GET. Keby sme napr. Chceli uviesť v URL adrese venovanie, pre koho je kalkulačka vytvorená, vyzerala by URL adresa takto:

http://localhost:50913/?jmeno=Karla

Prípadne rozčlenené ako:

http://localhost:50913/Home/Index?jmeno=Karla

Váš port bude samozrejme opäť iný. Aby sme takúto hodnotu načítali, presunieme sa do prvej metódy Index(), ktoré pridáme parameter. Ten vzápätí odovzdáme pomocou ViewBag pohľadu.

public IActionResult Index(string jmeno)
{
    Kalkulacka kalkulacka = new Kalkulacka();
    ViewBag.Jmeno = jmeno;
    return View(kalkulacka);
}

Parameter vypíšeme v pohľade v nadpise <h2>:

<h2>
        Kalkulacka
        @if (ViewBag.Jmeno != null)
        {
            <text> pro @ViewBag.Jmeno</text>
        }
</h2>

Ak je GET parameter jmeno zadaný (nie je null), vypíšeme do nadpisu ešte "pre" a obsah tohto parametra. Ak v konštrukcii @if vypisujeme nejaký text, mal by byť obalený v elemente <text> ;

výsledok:

Parameter by sme rovnako dobre mohli miesto pohľadu odovzdať modelu. V kalkulačke ma nenapadá žiadne využitie, v aplikácii pre generovanie náhodných čísel by parameter mohol udávať koľko čísel si prajeme vygenerovať.

Už teda vieme odovzdávať dáta skriptu na serveri a to buď v URL adrese pomocou metódy GET alebo v tele HTTP požiadavky pomocou metódy POST. POST používajú najmä formuláre, GET ak chceme, aby sa hodnota zadávala formou odkazu.

Labely

Popisky u polí formulára obsahujú text s názvom vlastnosti, ku ktorej sa viažu. Názvy ako číslo1 však nie sú pre používateľov príliš vábne. Preto k vlastnostiam v triede Kalkulacka pridáme atribúty s ľudskejším popisom:

public class Kalkulacka
{
    [Display(Name = "1. číslo")]
    public double Cislo1 { get; set; }
    [Display(Name = "2. číslo")]
    public double Cislo2 { get; set; }
    public double Vysledek { get; set; }
    [Display(Name = "Operace")]
    public string Operace { get; set; }
    public List<SelectListItem> MozneOperace { get; set; }

    // ...

K atribútom je potrebné nakliknúť using System.ComponentModel.DataAnnotations;.

výsledok:

Validácia

Posledným témou, ktoré si na našej kalkulačke vyskúšame, bude validácia. Určite ste už zistili, že ak nezadáte číslo alebo by sa vám podarilo odoslať namiesto čísla text, ASP.NET vám formulár odoslať nedovolí. Validácia sa generujú automaticky podľa dátového typu danej vlastnosti modelu a sú ako na strane klienta, tak na strane servera.

Ak zadáte neplatný vstup, zachytí ho ešte pred odoslaním na server validátor v JavaScripte. Požiadavka sa teda vôbec neodošle. Pre istotu musí byť tá istá validácie aj na serveri, pretože klient si môže napr. JavaScript vypnúť.

Ďalšie požiadavky na validáciu pridávame vo forme atribútov. Atribút [Required] nám umožňuje určiť, že je zadanie pole nutné. Všetky nenullovatelné hodnotové typy (napr. int, decimal, DateTime...) sú považované za [Required] automaticky.

U čísel môžeme ďalej napr. Validovať ich rozsah:

[Range(1, 100, ErrorMessage = "Zadejte prosím číslo od 1 do 100.")]

Všimnite si, že u validačných atribútov možno jednoducho špecifikovať aj hlášku, ktorá sa užívateľovi vypíše ak hodnotu zadá zle.

U reťazcov môžeme validovať napr. Ich dĺžku:

např. [StringLength(5)]

Alebo je validovať pomocou regulárnych výrazov:

[RegularExpression("\\d+", ErrorMessage = "Neplatný kód")]

Môžete si skúsiť, že sa hlášky naozaj vypíšu. Niektoré (napríklad pri vstupných políčok pre čísla) sú vytvárané automaticky frameworkom pomocou JavaScriptu, alebo si ich prehliadač prispôsobí sám. Skúste napríklad zadať do poľa pre 1. číslo písmená.

Model kalkulačky je teraz plný atribútov a je teda prispôsobený hlavne pre View, preto sa týmto modelom často hovorí ViewModel. Toto označenie by ste mali poznať, ak ste niekedy pracovali s WPF.

To by bolo v našej kalkulačke už všetko. V budúcej lekcii, Úprava template MVC v ASP.NET Core , začneme niečo zaujímavejšie. Pôjde o osobný blog s administráciou. Zdrojové kódy dnešného projektu máte k stiahnutiu nižšie.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.