2. diel - Obsluha formulárov v ASP.NET

V minulej lekcii, Prvá webová aplikácia v ASP.NET , sme si vysvetlili ako v ASP.NET prebieha generovanie HTML výstupu a vytvorili si aplikáciu pre generovanie náhodných čísel. Dnes sa v C# .NET tutoriálu naučíme obsluhovať formuláre a naprogramujeme jednoduchú kalkulačku.

Príprava formulára

Nezačneme ničím iným, než prípravou formulára. Založte si novú ASP.NET Web Application s názvom AspKalkulacka. Opäť budeme vychádzať z prázdneho (Empty) projektu. Do neho pridáme nový Web Form s názvom Default.

Rovno si ukážme, ako bude naša aplikácia vyzerať:

Pridanie kontroliek

Presunieme sa do grafického dizajnérmi a na formulár z Toolbox natiahneme:

• 2x TextBox
• 1x DropDownList
• 1x Button
• 1x Label

Jednotlivé kontrolky si teraz prispôsobíme.

Textbox

TextBox je univerzálny zadávacie pole. Akonáhle nejakú kontrolku označíme kliknutím myšou, v okne Properties sa nám ukážu vlastnosti, ktoré jej môžeme nastavovať.

TextBoxům nastavíme vlastnosť ID na cislo1TextBox a cislo2TextBox. Budeme sa snažiť, aby sa kontrolky určili podľa dát, ktoré obsahujú a aby bolo z názvu zároveň i spoznať akého sú typu. Už vieme, že práve pomocou ID k nim potom z CodeBehind pristupujeme. Ako druhú vlastnosť nastavíme oboma TextBoxům TextMode na Number, pretože zadávať budeme čísla. Módov je tam viac, okrem textu napr. Pre zadanie emailu, dátum, čas, farby a podobne.

DropDownList

Indikátor slúži na výber z niekoľkých hodnôt. V našom prípade budeme vyberať početnej operáciu. Dáta môžeme do kontrolky nahrať z nejakej kolekcie v CodeBehind alebo len nakliknúť v oknu Properties v prípade, že ich nepotrebujeme odnikiaľ načítavať. Presne túto možnosť využijeme, v Properties oknu klikneme na vlastnosť Items a potom na tlačidlo s tromi bodkami vpravo.

Do novo zobrazeného dialógu pridáme 4 položky. Každej položke môžeme nastaviť 4 vlastnosti:

• Enabled - Či je položku možné vybrať
• Selected - Či je položka vybraná
• Text - text položky, ktorý vidí používateľ
• Value - Text položky, ktorý sa odošle na server

Položkám nastavíme texty na: Spočítaj, Odpočítaj, vynásobte a Vydeľ. Hodnoty (Value) nastavíme na +, -, *, /. Prvej položke nastavíme Selected na True.

Iste tušíte, že sa DropDownList vyrenderuje ako HTML tag

DropDownList nastavíme ID na operaceDropDow­nList.

Button

Tlačidlo vyvolá odoslanie formulára. ID zmeníme na vypocitejButton a Text na Vypočítaj.

Label

Label je ako už vieme text, ktorý môžeme ovplyvňovať z CodeBehind. Práve do neho vypíšeme výsledok. ID zmeníme na vysledekLabel, do Text môžeme napísať nulu, čo je bežná predvolená hodnota na kalkulačkách

Layout formulára

Formulár je stále v jednom riadku, čo nie je úplne najkrajšie. Rozvrhnutie formulára tak, aby boli kontrolky pod sebou, vykonáme v zdrojovom kóde šablóny. Každú kontrolku vložíme do divu. Alternatívne by sme mohli použiť tabuľku alebo čisto CSS. Vážnejším stylovaním sa budeme zaoberať až v ďalších dieloch.

Kód formulára upravíme do nasledujúcej podoby:

<form id="form1" runat="server">

    <div style="padding: 5px;">
        Číslo1:
        <asp:TextBox ID="cislo1TextBox" runat="server" TextMode="Number"></asp:TextBox>
    </div>

    <div style="padding: 5px;">
        Číslo2:
        <asp:TextBox ID="cislo2TextBox" runat="server" TextMode="Number"></asp:TextBox>
    </div>
    <asp:DropDownList ID="operaceDropDownList" runat="server">
        <asp:ListItem Selected="True" Value="+">Sečti</asp:ListItem>
        <asp:ListItem Value="-">Odečti</asp:ListItem>
        <asp:ListItem Value="*">Vynásob</asp:ListItem>
        <asp:ListItem Value="/">Vyděl</asp:ListItem>
    </asp:DropDownList>
    <div style="padding: 5px;">
        <asp:Button ID="vypocitejButton" runat="server" Text="Vypočítej" />
    </div>
    <div style="font-size: 2em;">
        <asp:Label ID="vysledekLabel" runat="server" Text="0"></asp:Label>
    </div>

</form>

Labelu sme ešte zväčšili veľkosť textu, aby bol výsledok dobre vidieť.

CodeBehind

Na počítanie základných matematických operácií asi v tomto prípade nemá zmysel vytvárať triedu a tak budeme výnimočne písať logiku priamo do CodeBehind.

PostBack

Akonáhle sa formulár odošle, vykoná sa tzv. PostBack. To je situácia, kedy sa po odoslaní formulára z nejakej stránky znova ocitneme na tej istej stránke, ale s tým rozdielom, že je formulár vyplnený tým, čo používateľ odoslal. Nie je nič jednoduchšie, než dáta z textbox potom načítať a vykonať výpočet.

Jediné, čo musíme rozlíšiť, je či spracovávame PostBack (formulár je vyplnený odoslanej hodnotami) alebo či spracovávame bežný príchod na stránku, kedy je formulár nevyplnený. ASP.NET nám ponúka vlastnosť IsPostBack, ktorá tento stav rozlíši.

Prejdime do CodeBehind a metódu Page_Load upravme do nasledujúcej podoby:

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        double vysledek = 0;
        int cislo1 = int.Parse(cislo1TextBox.Text);
        int cislo2 = int.Parse(cislo2TextBox.Text);
        switch (operaceDropDownList.SelectedItem.Value)
        {
            case "+":
                vysledek = cislo1 + cislo2;
                break;
            case "-":
                vysledek = cislo1 - cislo2;
                break;
            case "*":
                vysledek = cislo1 * cislo2;
                break;
            case "/":
                vysledek = cislo1 / (double)cislo2;
                break;
        }
        vysledekLabel.Text = vysledek.ToString();
    }
}

V prípade, že bol formulár odoslaný, načítame hodnoty z formulára, vykonáme výpočet podľa vybranej operácie a ten vypíšeme do labelu.

Výslednú aplikácii si môžeme vyskúšať:

Názov PostBack je zložením slov back, ktoré označuje že sme sa vrátili späť na pôvodnú stránku a POST, čo je názov metódy HTTP protokolu, cez ktorú sa formuláre odosielajú. Okrem nej existuje ešte metóda GET, ktorá slúži na zbieranie parametrov z adresného riadku, o tej si niečo povieme až v ďalších dieloch.

Zdrojový kód dnešného projektu je k stiahnutiu v prílohe. V budúcej lekcii, Validácia formulárov v ASP.NET , sa zameriame na validáciu.

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