4. díl - Zpracování dat a validace v ASP.NET MVC

C# .NET ASP.NET MVC Zpracování dat a validace v ASP.NET MVC

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET MVC jsme načali zpracování formulářů a napojení modelu na pohled. Jednoduchou kalkulačku dnes 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:

Kalkulačka v ASP.NET MVC

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:

Kalkulačka v ASP.NET MVC

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:

Kalkulačka v ASP.NET MVC

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 v ASP.NET MVC

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

Validace v ASP.NET MVC

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. Příště 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.


 

Stáhnout

Staženo 388x (2.62 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.833334.833334.833334.833334.83333


 


Miniatura
Předchozí článek
Obsluha formulářů v ASP.NET MVC
Miniatura
Všechny články v sekci
Základy ASP.NET MVC
Miniatura
Následující článek
Úprava template MVC v ASP.NET

 

 

Komentáře

Avatar
Jiří Košata (kosata50):

Jen dotaz k té validaci AntiForgeryTokenu. Ve verzi MVC která je zde použita, již není potřeba akční metody, kde má dojít k validaci, označovat atributem "ValidateAnti­ForgeryToken"?
A taky jsem měl za to, že je to ochrana spíš proti CSRF než opakovanému odeslání fomuláře. :)

 
Odpovědět 12.1.2014 16:21
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jiří Košata (kosata50)
David Čápka:

Díky za reakci, atribut by tam měl být, doplním ho :)

Odpovědět 12.1.2014 16:31
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na David Čápka
Michal Štěpánek:

Jen drobná připomínka, v článku u nastavení "Labelů" jsou čísla jako double a u "Validace" tam máš čísla jako int...
Předpokládám, že by asi mělo být double i u té validace, ne?

Odpovědět 9.5.2014 9:08
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
heinrichm
Člen
Avatar
Odpovídá na Michal Štěpánek
heinrichm:

Dal tam int, protože zjistil, že double nefunguje. Nebo vám se někomu podařilo vložit decimální číslo, víte jak na to? Protože jinak tu máme příklad, na kterém se můžeme naučit, že s ASP.NET jen celá čísla.

 
Odpovědět  -1 20.9.2014 14:43
Avatar
heinrichm
Člen
Avatar
Odpovídá na heinrichm
heinrichm:

o problému s čárkou v desetinných číslech:
http://www.campusmvp.net/…-in-decimals

 
Odpovědět 20.9.2014 15:17
Avatar
Odpovídá na heinrichm
Michal Štěpánek:

Proč by v ASP.NET nešlo pracovat s desetinnými čísly? Posledních pár let dělám weby a aplikace "jen" v ASP.NET a s desetinnými čísly nemám nejmenší problém...

Odpovědět 20.9.2014 16:32
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
heinrichm
Člen
Avatar
Odpovídá na Michal Štěpánek
heinrichm:

Dotaz zněl, jak to udělat, abychom mohli zadat do input boxu například 1,5 a nevrátilo to chybu. jquery asi neumí čárky v desetinných číslech. Zadat mi lze jen 1.5, pak to ale logicky hodí chybu dále, protože systém používá v desetinných číslech čárky, ne tečky.

 
Odpovědět 21.9.2014 13:36
Avatar
Odpovídá na heinrichm
Michal Štěpánek:

Tak to se omlouvám, špatně jsem to pochopil... Mea culpa... :-)

Odpovědět 21.9.2014 15:51
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
I.Love.Guitar:

Zdravím ľudia, rád by som sa opýtal jednu otázku trocha pomimo :) ..je možné prepojiť Matlab a ASP .NET, resp. viete o nejakom postupe alebo návode ako spraviť webovú appku ktorá by používala na výpočty Matlab? :) ..veľmi by mi to pomohlo, za každú radu ďakujem :P

 
Odpovědět 21.3.2015 19:33
Avatar
roman.kratochvil:

Mám dotaz na tlačítka: Tento příklad má pouze jedno tlačítko a to "Vypočítej", to odesílá data do controlleru, ale kdybych požadoval více tlačítek, aby každé volalo jinou funkci/metodu v controlleru?
Myslím, že to je běžná věc, že má stránka více tlačítek a aby každé dělalo něco jiného.
Děkuji za odpověď

 
Odpovědět 4. listopadu 11:46
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.