Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

V minulej lekcii, Prvá webová aplikácia v ASP.NET Core 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 ASP.NET Core tutoriálu. Programovať budeme jednoduchú kalkulačku.

Založíme si novú ASP.NET Core Web Application, ktorú pomenujeme MVCKalkulacka. Aj keď by sme mohli ako minule začať s prázdnym template, dnes zvolíme template MVC.

Založenie nového ASP.NET MVC projektu - Základy ASP.NET Core MVC

Tým nám budú vygenerované aj jednotlivé zložky pre MVC komponenty a nastavené ruty a konfigurácie, ktorú sme minule robili ručne. Bude nám vygenerovaný aj ukážkový projekt obsahujúci niekoľko sliderov a dokonca aj slávnu EÚ cookie hlášku. Môžete si ho skúsiť spustiť, minule sme ho nevyužili, aby sme lepšie pochopili ako MVC funguje a zbytočne nás nerozptyloval.

Predvolené projekt v ASP.NET Core MVC - Základy ASP.NET Core MVC

My tento projekt nebudeme potrebovať a preto vyprázdnime všetok obsah zložiek Models, Controllers a Views v Solution Exploreri, avšak ponecháme súbor _ViewImports.cshtml, inak by nám správne nefungovali tzv. Tag helpers (viď ďalej). Ak by sme začínali s prázdnym projektom ako minule, museli by sme tento súbor pridať ručne. Ako názov projektu nepoužívajte len Kalkulacka, pretože by kolidoval s názvom našej triedy.

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

Kalkulačka v ASP.NET Core MVC - Základy ASP.NET Core MVC

Model

Začnime opäť modelom, ktorým bude trieda Kalkulacka. Tú si pridajte do zložky Models. 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 element <select>. List rovno naplníme v konstruktoru. Nezabudnite si pridať using Microsoft.AspNetCore.Mvc.Rendering.

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 triedy SelectListItem 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 Operace a hodnôt v Cislo1 a Cislo2 vypočíta 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ýsledok sa po zavolaní metódy uloží do vlastnosti Vysledek. Rovnako tak by sme ho mohli aj vrátiť, ako sme to robili v minulom projekte s náhodným číslom. Pre naše ďalšie zámery s Binding to ale bude takto výhodnejšie.

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

Controller

Kontrolér budeme mať v našej aplikácii zas len jeden. Určite si spomínate, že kontrolér slúži k prepojeniu modelu (logiky) a pohľadu (HTML šablóny). Pridáme nový Empty Controller a pomenujeme ho HomeController. Tým sa spustí pri vstupe na úvodnú stránku aplikácie. Prejdime do jeho kódu a metódu Index() upravme do nasledujúcej podoby:

public IActionResult 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 MVCKalkulacka.Models.

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.

Scaffolding v ASP.NET Core MVC - Základy ASP.NET Core MVC

Template nám umožňuje do pohľadu rovno předgenerovat nejaký kód, tejto technike sa hovorí 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:

https://local­host:44337
https://local­host:44337

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

Presunieme sa preto do Index.cshtml a zmeníme ho do nasledujúcej podoby:

@model MVCKalkulacka.Models.Kalkulacka

@{
    ViewData["Title"] = "Kalkulačka";
}

<head>
    <title>@ViewData["Title"]</title>
</head>

<body>
<h2>Index</h2>

<h4>Kalkulacka</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Cislo1" class="control-label"></label>
                <br />
                <input asp-for="Cislo1" class="form-control" />
                <span asp-validation-for="Cislo1" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Cislo2" class="control-label"></label>
                <br />
                <input asp-for="Cislo2" class="form-control" />
                <span asp-validation-for="Cislo2" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Operace" class="control-label"></label>
                <br />
                @Html.DropDownListFor(model => model.Operace, new SelectList(Model.MozneOperace, "Value", "Text"))
                <span asp-validation-for="Operace" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Vypočítej" class="btn btn-default" />
            </div>

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

        </form>
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
</body>

Zmien sme proti pôvodnej podobe šablóny vykonali minimum. Na úplnom začiatku šablóny vidíme nastavenie typu modelu, na ktorý je pohľad nabindování (naviazaný). Ďalej sme nastavili titulok stránky a podnadpis. Všimnite si, že keďže šablónu nevkladáme do layoutu, pridali sme do nej elementy <head> a <body>. Nasleduje formulár, ktorý vygenerovalo Visual Studio a len sme ho upravili.

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

<div class="form-group">
    <label asp-for="NazevVlastnosti" class="control-label"></label>
    <br />
    <input asp-for="NazevVlastnosti" class="form-control" />
    <span asp-validation-for="NazevVlastnosti" class="text-danger"></span>
</div>

Atribúty asp-for sú tzv. Tag helpers, pomocou ktorých dokáže ASP.NET Core vygenerovať pre našu vlastnosť vhodný ovládací prvok. Napr. pre dátum sa vloží DatePicker a podobne. Atribúty asp-validation-for 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 všetko teda funguje úplne automaticky. Drobnou nevýhodou je, že danú vlastnosť odovzdávame helper ako text, čo ste si iste všimli. Visual Studio nám našťastie správnosť kódu dokáže skontrolovať aj tak.

Môžete vidieť, že kombinujeme tag helpers so starším systémom vkladanie ovládacích prvkov pomocou IHtmlHelper (@Html). Nie všetky ovládacie prvky sú totiž v súčasnosti tag helper podporované, niekedy sa tomuto riešeniu nevyhneme. Preferujeme však napojovanie formulárových prvkov na vlastnosti modelu pomocou tag lymfocytov a asp-for než pomocou zavinac. Predsa chceme, aby HTML šablóna vyzerala čo najviac ako HTML kód :)

Aby vám tag helpers v projekte fungovali, je potrebné mať v ňom aj súbor pomenovaný _ViewImports.cshtml s nasledujúcim obsahom. Ak ste postupovali podľa tutoriálu, súbor už máte v projekte obsiahnutý. Ak ste si tento súbor omylom zmazali alebo ste začali s prázdnym projektom, môžete si ho teraz vytvoriť:

@using MVCKalkulacka
@using MVCKalkulacka.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

Náš formulár teraz vyzerá takto:

MVC kalkulačka v ASP.NET Core - Základy ASP.NET Core MVC

Po jeho odoslaní sa zatiaľ nič nestane. Pokračovať budeme zas až nabudúce.

V budúcej lekcii, Spracovanie dát a validácie v ASP.NET Core MVC , aplikáciu dokončíme. Ak ste niekde urobili chybu, v budúcej lekcii si môžete tiež stiahnuť kompletnú kód projektu.


 

Predchádzajúci článok
Prvá webová aplikácia v ASP.NET Core MVC
Všetky články v sekcii
Základy ASP.NET Core MVC
Preskočiť článok
(neodporúčame)
Spracovanie dát a validácie v ASP.NET Core MVC
Článok pre vás napísal Martin Petrovaj
Avatar
Užívateľské hodnotenie:
1 hlasov
Autor je lenivý vymýšľať nejaký slušný podpis. Venuje sa ale prevažne C#.
Aktivity