Lekce 5 - Obsluha formulářů v ASP.NET MVC

V minulé lekci, První webová aplikace 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 C# .NET tutoriálu. Programovat budeme jednoduchou kalkulačku.

Založíme si novou ASP.NET Web Application, kterou pojmenujeme MVCKalkulacka. Template zvolíme prázdný s MVC. Nepoužívejte jako název projektu jen Kalkulacka, jelikož by kolidoval s názvem naší třídy.

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

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. Nezapomeňte si přidat using na using System.Web.Mvc;.

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. Opět nezapomeňte nakliknout using pro třídu Kalkulacka.

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.

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:

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:

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

V příští lekci, Zpracování dat a validace v ASP.NET MVC, 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.

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