Lekce 6 - Zpracování dat a validace v ASP.NET MVC

V minulé lekci, Obsluha formulářů v ASP.NET MVC, jsme načali zpracování formulářů a napojení modelu na pohled.

Jednoduchou kalkulačku dnes v C# .NET tutoriálu dokončíme.

Odeslání formuláře

Při odeslání formuláře se nic nestane. Je to z toho důvodu, že formulář odešle data na tu samou stránku. Požadavek tedy zachytí metoda Index() v kontroleru, která vypadá následovně:

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

I po odeslání formuláře se tedy vytvoří nová instance kalkulačky, která má nulový výsledek a ta se nastaví pohledu. Proto je výsledek stále nula. Situaci odeslání formuláře na stránku, která ho má zpracovat, se někdy říká PostBack. My bychom právě na tuto situaci potřebovali reagovat jiným způsobem, než když uživatel na stránku jen vstoupí aniž by něco odesílal.

Do kontroleru přidáme další metodu Index(), tentokrát s parametrem a atributem HttpPost:

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

    return View(kalkulacka);
}

V metodě nám přijde instance kalkulačky tak, jak byla vytvořena z hodnot v odeslaném formuláři. Pokud je model validní, což zjistíme pomocí třídy ModelState, zavoláme metodu pro výpočet. Nakonec vrátíme pohled, kterému předáme daný model se zadanými hodnotami a výsledkem.

Metoda je označená atributem [HttpPost]. Tím říkáme, že si přejeme, aby byla spuštěna pouze v případě, že se odeslal formulář. ASP.NET vždy spouští to přetížení metody, které se nejvíce hodí na danou situaci. Odeslání formuláře tedy již nespadne do první metody Index(), ale až do té nové.

Aplikaci můžeme vyzkoušet, již se nám bude zobrazovat výsledek operace:

Vyplněná zůstanou i ostatní pole, jelikož se hodnota načítá z modelu, který ji má nastavenou z POST.

GET a POST

Slušelo by se říci, že kromě metody POST existuje ještě metoda GET. Obě metody můžeme použít k zaslání dat naší aplikaci.

Již víme, že metodou POST se odesílají hodnoty z formuláře. Data se odešlou uvnitř HTTP požadavku na server. Ačkoli se to nemusí vždy striktně dodržovat, metoda POST slouží hlavně pro vkládání nových dat.

Metodou GET předáváme data přímo v URL adrese. Pokud bychom ji chtěli u nějaké metody kontroleru vynutit, můžeme použít podobně jako u Post atribut [HttpGet].

Udělejme si jednoduchý příklad použití parametru předaného metodou GET. Kdybychom např. chtěli uvést v URL adrese věnování, pro koho je kalkulačka vytvořena, vypadala by URL adresa takto:

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

Váš port bude samozřejmě opět jiný. Abychom takovouto hodnotu načetli, přesuneme se do první metody Index(), které přidáme parametr. Ten vzápětí předáme pomocí ViewBag pohledu.

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

Parametr vypíšeme v pohledu v nadpisu H2:

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

Pokud je parametr Jmeno zadaný (není null), vypíšeme do nadpisu ještě pro a obsah parametru. Pokud v konstrukci @if vypisujeme nějaký text, měl by být obalený v elementu <text>

Výsledek:

Parametr bychom stejně dobře mohli místo pohledu předat modelu, v kalkulačce mě nenapadá žádné využití, v aplikaci pro generování náhodných čísel by parametr mohl udávat kolik čísel si přejeme vygenerovat.

Již tedy umíme předávat data skriptu na serveru a to buď v URL adrese pomocí metody GET nebo v těle HTTP požadavku pomocí metody POST. POST používají zejména formuláře, GET pokud chceme, aby se hodnota zadávala formou odkazu.

Labely

Popisky u polí formuláře obsahují text s názvem vlastnosti, ke které se váží. Názvy jako Cislo1 však nejsou pro uživatele příliš vábné. Proto k vlastnostem ve třídě Kalkulacka přidáme atributy s lidštějším popisem:

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 atributům je třeba přidat potřebné usingy.

Výsledek:

Validace

Posledním tématem, které si na naší kalkulačce vyzkoušíme, bude validace. Určitě jste již zjistili, že pokud nezadáte správný formát, ASP.NET vám formulář nedovolí odeslat.

Validace se generují automaticky podle datového typu dané vlastnosti modelu a jsou jak na straně klienta, tak na straně serveru.

Pokud zadáte neplatný vstup, zachytí ho ještě před odesláním na server validátor v JavaScriptu. Požadavek se tedy vůbec neodešle. Pro jistotu musí být ta samá validace i na serveru, protože klient si může např. JavaScript vypnout.

Ukažme si, jak zadat vlastní chybové hlášky k jednotlivým polím. Navštívíme opět model a k atributům nad vlastnostmi přidáme další:

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; }

Atribut Required nám umožňuje určit, že je zadání pole nutné. Pokud ho uživatel nezadá, vypíše se daná chybová hláška. Atribut můžeme uvést i bez hlášky.

U čísel můžeme dále např. validovat jejich rozsah:

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

U řetězců např. jejich délku:

např. [StringLength(5)]

Nebo je validovat pomocí regulárních výrazů

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

Můžete si zkusit, že se hlášky opravdu vypíší.

Model kalkulačky je nyní plný atributů a je tedy uzpůsobený hlavně pro View, proto se těmto modelům často říká ViewModel. Toto označení byste měli znát, pokud jste někdy pracovali s WPF.

To by bylo v naší kalkulačce již vše.

V příští lekci, Úprava template MVC v ASP.NET, začneme něco zajímavějšího. Půjde o osobní blog s administrací. Zdrojové kódy dnešního projektu máte ke stažení níže.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.