3. díl - Obsluha formulářů v ASP.NET MVC

C# .NET ASP.NET MVC Obsluha formulářů 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 si v praxi vyzkoušeli MVC architekturu a naučili se předávat data z modelu do pohledu. Říkali jsme si, že toto předání probíhá přes speciální kolekci (nejčastěji ViewBag). Existuje však ještě druhý způsob a to je napojení modelu přímo na View, této technice se říká model binding. Ten se hodí zejména při práci s formuláři a vyzkoušíme si ho v dnešním dílu. Programovat budeme jednoduchou kalkulačku.

Založíme si novou ASP.NET Web Application, kterou pojmenujeme MVCKalkulacka. Template zvolíme prázdný s MVC.

Rovnou si ukažme, jak bude naše hotová kalkulačka vypadat:

Kalkulačka v ASP.NET MVC

Model

Začněme opět modelem, kterým bude třída Kalkulacka. Modelu přidáme několik veřejných vlastností, konkrétně dvě vstupní čísla, vybranou operaci a výsledek. Poslední vlastností bude List typu SelectListItem, který bude obsahovat možné operace pro pohled. Ten z nich následně vyrenderuje HTML select. List rovnou naplníme v konstruktoru.

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 = "/" });
        }

}

Vlastnost Text SelectListItemu je popisek možnosti, který vidí uživatel. Value je hodnota, která se odesílá na server (neměla by obsahovat diakritiku). Můžeme nastavit i vlastnost Selected, která označuje zda má být položka při zobrazení stránky vybraná.

Zbývá jen metoda s nějakou logikou, která podle zvolené Operace a hodnot v Cislo1 a Cislo2 vypočítá 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ýsledek se po zavolání metody uloží do vlastnosti Vysledek. Stejně tak bychom ho mohli i vrátit, jako jsme to dělali v minulém projektu s náhodným číslem.

Model máme hotový, přidejme si kontroler.

Controller

Kontroler budeme mít v naší aplikaci zas jen jeden, pojmenujeme ho HomeController, aby se spustil při vstupu na výchozí stránku aplikace. Přejděme do jeho kódu a metodu Index() upravme do následující podoby:

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

Při vstupu na stránku se zavolá metoda Index(), to již víme. Tehdy vytvoříme novou instanci modelu, což je stále stejné, jako minule. Nově však model předáme pohledu jako parametr.

View

Pro akci Index vygenerujeme pohled, to uděláme opět kliknutím kamkoli do metody pravým tlačítkem a zvolením Add View. Jako Template zvolíme Create a Model class nastavíme na Kalkulacka.

Scaffolding v ASP.NET MVC

Template nám umožňuje do pohledu rovnou předgenerovat nějaký kód, říká se tomu scaffolding. Template Create vygeneruje pohled napojený na zvolený model a k vlastnostem tohoto modelu vygeneruje formulář pro vytvoření instance modelu. Když aplikaci nyní spustíme, vypadá takto:

Kalkulačka v ASP.NET MVC

Vidíme, že Visual Studio vygenerovalo 4 inputy pro čísla, výsledek a operaci. Operaci však budeme chtít zadávat pomocí selectu a výsledek nebudeme vypisovat do formulářového pole, ale do HTML odstavce.

Přesuneme se proto do Index.cshtml a změníme ho do následující podoby:

@model MVCKalkulacka.Models.Kalkulacka

@{
    ViewBag.Title = "Kalkulačka";
}

<h2>Kalkulačka</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Cislo1, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Cislo1)
                @Html.ValidationMessageFor(model => model.Cislo1)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Cislo2, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Cislo2)
                @Html.ValidationMessageFor(model => model.Cislo2)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Operace, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Operace, new SelectList(Model.MozneOperace, "Value", "Text"))
                @Html.ValidationMessageFor(model => model.Operace)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Vypočítej" class="btn btn-default" />
            </div>
        </div>

    </div>
}

<p style="font-size: 2em;">@Model.Vysledek</p>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Na úplném začátku šablony vidíme nastavení typu modelu. Dále jsme nastavili titulek stránky a podnadpis. Níže je formulář, který vygenerovalo Visual Studio a pouze jsme ho upravili. Celý formulář se započne konstrukcí:

@using (Html.BeginForm())
{
        @Html.AntiForgeryToken()
}

AntiForgeryToken() je ochrana proti neoprávněnému odeslání formuláře. Dále již vkládáme HTML kód s naším formulářem, v kódu si můžete všimnout, že se celý seskupuje ještě do divů kvůli snažšímu stylování.

Editační pole pro jednotlivé vlastnosti modelu vkládáme tímto stylem:

<div class="form-group">
        @Html.LabelFor(model => model.Cislo2, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
                @Html.EditorFor(model => model.Cislo2)
                @Html.ValidationMessageFor(model => model.Cislo2)
        </div>
</div>

Na třídě Html máme k dispozici metody k renderování jednotlivých HTML elementů. LabelFor vyrenderuje popisek k dané vlastnosti. @EditorFor vybere podle typu vlastnosti vhodné editační pole. Např. pro datum se vloží DatePicker a podobně. Ve starších verzích tato metoda nebyla a museli bychom ručně zvolit např. TextboxFor(). ValidationMes­sageFor() vloží prostor pro výpis chybové hlášky v případě, že uživatel pole špatně vyplní. To se opět zjistí z datového typu vlastnosti a funguje to tedy zcela automaticky. Danou vlastnost na modelu předáváme vždy pomocí lambda výrazu, čehož jste si jistě všimli.

Na konci stránky vypíšeme vlastnost Vysledek modelu do HTML odstavce, tím ho zobrazíme uživateli.

Náš formulář nyní vypadá takto:

MVC kalkulačka v ASP.NET

Po jeho odeslání se zatím nic nestane.

Příště aplikaci dokončíme. Současný zdrojový kód projektu je níže ke stažení v případě, že jste někde udělali chybu.


 

Stáhnout

Staženo 525x (2.61 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 (7 hlasů) :
4.142864.142864.142864.14286 4.14286


 


Miniatura
Všechny články v sekci
Základy ASP.NET MVC

 

 

Komentáře

Avatar
hogs1397
Člen
Avatar
hogs1397:

Ahoj, při psaní podle tutoriálu se mi neustále něco podtrhuje a nefunguje. Vyzkoumal jsem podle řešení, že za to můžou "usingy" které mi chybí. Momentálně to je v Kalkulacka.cs "using System.Web.Mvc;" "using System.Componen­tModel.DataAn­notations;". V minulém díle to bylo například "using MVCNahodneCis­lo.Models;" a tak dále. Je tam nějaká funkce v nastavení která to automaticky doplňuje? Díky

 
Odpovědět  +1 24.7.2014 22:07
Avatar
Odpovídá na hogs1397
Michal Štěpánek:

Automaticky ne, ale když ti tam bliká kurzor a dáš Ctrl+.(tečka), tak se ti nabídne doplnění usingů...

Odpovědět 24.7.2014 22:16
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Majkel
Člen
Avatar
Majkel:

Ahoj, stáhnul jsem si zdroják. Spustil jsem ho, vyzkoušel zadat čísla, kliknul na vypočítej a výsledek je stále 0. Zkoušel jsem v Chromu i IE. Používám VS 2013 Community. Kde může být chyba?

AHA, UŽ JSEM SI TO DOLE PŘEČETL :D

Editováno 31.3.2015 18:52
 
Odpovědět  +1 31.3.2015 18:51
Avatar
DREAMDEV
Člen
Avatar
DREAMDEV:

dobre mám pár otázok :)

@Html.EditorFor(model => model.Cislo1, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Cislo1, "", new { @class = "text-danger" })

preco v prvom riadku je: new { htmlAttributes = new { @class...
a v druhom uz len: new { @class...

a preco mam ::before a ::after v html?

Odpovědět 29.5.2015 12:35
"minulosť je na to aby si odhalil chyby ktoré sa stali a v prítomnosti ich opravil pre lepšiu budúcnosť" - Ja
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na DREAMDEV
Jiří Gracík:

Before a after jsou pseudo elementy, pokus se podíváš na zdrojový kód (ctrl+U), tak tam nebudou. Bude to tím, že se na ně aplikuje nějaký styl, proto je vidíš v nástrojích pro vývojáře.

Odpovědět  +1 29.5.2015 12:43
Creating websites is awesome till you see the result in another browser ...
Avatar
CesurMirka
Redaktor
Avatar
Odpovídá na hogs1397
CesurMirka:

try

Kalkulacka.Models.Kalkulacka kalkulacka = new Kalkulacka.Models.Kalkulacka();
return View(kalkulacka);
 
Odpovědět 14. července 11:18
Avatar
Mila Kuba
Člen
Avatar
Mila Kuba:

Projekt v Kommunity 2015 nejde spustit. V index.cshtml to ukazuje samé nesrovnalosti.

 
Odpovědět 18. října 14:56
Avatar
David Novák
Člen
Avatar
Odpovídá na Mila Kuba
David Novák:

Vymaž si všechno z index.cshtml a vlož tam vše, co David nám napsal přímo do textu tohoto tutoriálu jako kód v index.cshtml. Pak to funguje. Zkoušel jsem to ve vlastní aplikaci dělané podle tohoto tutoriálu. Teď ještě tomu HTML kódu rozumět. OK moje chyba, zpět k HTML tutoriálům.

 
Odpovědět 25. října 11:39
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 8 zpráv z 8.