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

V minulej lekcii, Obsluha formulárov v ASP.NET 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í formulára sa 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 ActionResult 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, ako keď užívateľ na stránku len vstúpi bez toho aby niečo odosielal.

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

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

    return View(kalkulacka);
}

V metóde nám príde 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/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 ActionResult Index(string jmeno)
{
    Kalkulacka kalkulacka = new Kalkulacka();
    ViewBag.Jmeno = jmeno;
    return View(kalkulacka);
}

Parameter vypíšeme v pohľade v nadpise H2:

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

Ak je parameter Jmeno zadaný (nie je null), vypíšeme do nadpisu ešte pre a obsah 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é pridať potrebné USING.

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 správny formát, ASP.NET vám formulár nedovolí odoslať.

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úť.

Ukážme si, ako zadať vlastné chybové hlášky k jednotlivým poliam. Navštívime opäť model a k atribútom nad vlastnosťami pridáme ďalšie:

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

Atribút Required nám umožňuje určiť, že je zadanie pole nutné. Pokiaľ ho používateľ nezadá, vypíše sa daná chybová hláška. Atribút môžeme uviesť aj bez hlášky.

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

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

U reťazcov 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.

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 , 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š.