3. diel - Obsluha formulárov v ASP.NET MVC

V minulej lekcii, Prvá webová aplikácia v ASP.NET MVC , sme si v praxi vyskúšali MVC architektúru a naučili sa odovzdávať dáta z modelu do pohľadu. Hovorili sme si, že toto odovzdanie prebieha cez špeciálnu kolekciu (najčastejšie ViewBag). Existuje však ešte druhý spôsob a to je napojenie modelu priamo na View, tejto technike sa hovorí model binding. Ten sa hodí najmä pri práci s formulármi a vyskúšame si ho v dnešnom C# .NET tutoriálu. Programovať budeme jednoduchú kalkulačku.

Založíme si novú ASP.NET Web Application, ktorú pomenujeme MVCKalkulacka. Template zvolíme prázdny s MVC. Nepoužívajte ako názov projektu len Kalkulacka, pretože by kolidoval s názvom našej triedy.

Rovno si ukážme, ako bude naša hotová kalkulačka vyzerať:

Model

Začnime opäť modelom, ktorým bude trieda Kalkulacka. Modelu pridáme niekoľko verejných vlastností, konkrétne dve vstupné čísla, vybranú operáciu a výsledok. Posledné vlastností bude List typu SelectListItem, ktorý bude obsahovať možné operácie pre pohľad. Ten z nich následne vyrenderuje HTML select. List rovno naplníme v konstruktoru. Nezabudnite si pridať 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 = "/" });
    }

}

Vlastnosť Text SelectListItemu je popisok možnosti, ktorý vidí používateľ. Value je hodnota, ktorá sa odosiela na server (nemala by obsahovať diakritiku). Môžeme nastaviť aj vlastnosť Selected, ktorá označuje či má byť položka pri zobrazení stránky vybraná.

Zostáva len metóda s nejakou logikou, ktorá podľa zvolenej Operácie a hodnôt v číslo1 a číslo2 vypočíta Vysledok:

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ýsledok sa po zavolaní metódy uloží do vlastnosti Vysledok. Rovnako tak by sme ho mohli aj vrátiť, ako sme to robili v minulom projekte s náhodným číslom.

Model máme hotový, pridajme si kontrolér.

Controller

Kontrolér budeme mať v našej aplikácii zas len jeden, pomenujeme ho HomeController, aby sa spustil pri vstupe na úvodnú stránku aplikácie. Prejdime do jeho kódu a metódu Index () upravme do nasledujúcej podoby:

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

Pri vstupe na stránku sa zavolá metóda Index (), to už vieme. Vtedy vytvoríme novú inštanciu modelu, čo je stále rovnaké, ako minule. Novo však model odovzdáme pohľadu ako parameter. Opäť nezabudnite nakliknúť using pre triedu Kalkulacka.

View

Pre akciu Index vygenerujeme pohľad, to urobíme opäť kliknutím kamkoľvek do metódy pravým tlačidlom a zvolením Add View. Ako Template zvolíme Create a Model class nastavíme na Kalkulacka.

Template nám umožňuje do pohľadu rovno předgenerovat nejaký kód, hovorí sa tomu scaffolding. Template Create vygeneruje pohľad napojený na zvolený model a na vlastnosti tohto modelu vygeneruje formulár pre vytvorenie inštancie modelu. Keď aplikáciu teraz spustíme, vyzerá takto:

Vidíme, že Visual Studio vygenerovalo 4 Input pre čísla, výsledok a operáciu. Operáciu však budeme chcieť zadávať pomocou selectu a výsledok nebudeme vypisovať do formulárového poľa, ale do HTML odseku.

Presunieme sa preto do Index.cshtml a zmeníme ho do nasledujúcej 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 úplnom začiatku šablóny vidíme nastavenie typu modelu. Ďalej sme nastavili titulok stránky a podnadpis. Nižšie je formulár, ktorý vygenerovalo Visual Studio a len sme ho upravili. Celý formulár sa začne konštrukciou:

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

AntiForgeryToken () je ochrana proti neoprávnenému odoslaní formulára. Ďalej už vkladáme HTML kód s naším formulárom, v kóde si môžete všimnúť, že sa celý zoskupuje ešte do divov kvôli ľahšiemu štýlovanie.

Editačné pole pre jednotlivé vlastnosti modelu vkladáme týmto štýlom:

<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 triede Html máme k dispozícii metódy na renderovanie jednotlivých HTML elementov. LabelFor vyrenderuje popisok k danej vlastnosti. @EditorFor vyberie podľa typu vlastnosti vhodné editačné pole. Napr. pre dátum sa vloží DatePicker a podobne. V starších verziách táto metóda nebola a museli by sme ručne zvoliť napr. TextboxFor (). ValidationMes­sageFor () vloží priestor pre výpis chybové hlášky v prípade, že používateľ pole zle vyplní. To sa opäť zistí z dátového typu vlastnosti a funguje to teda úplne automaticky. Danú vlastnosť na modeli odovzdávame vždy pomocou lambda výrazu, čoho ste si iste všimli.

Na konci stránky vypíšeme vlastnosť Vysledok modelu do HTML odseku, tým ho zobrazíme užívateľmi.

Náš formulár teraz vyzerá takto:

Po jeho odoslaní sa zatiaľ nič nestane.

V budúcej lekcii, Spracovanie dát a validácie v ASP.NET MVC , aplikáciu dokončíme. Súčasný zdrojový kód projektu je nižšie k stiahnutiu v prípade, že ste niekde urobili chybu.

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