Lekce 2 - Obsluha formulářů v ASP.NET

V minulé lekci, První webová aplikace v ASP.NET, jsme si vysvětlili jak v ASP.NET probíhá generování HTML výstupu a vytvořili si aplikaci pro generování náhodných čísel.

Dnes se v C# .NET tutoriálu naučíme obsluhovat formuláře a naprogramujeme jednoduchou kalkulačku.

Příprava formuláře

Nezačneme ničím jiným, než přípravou formuláře. Založte si novou ASP.NET Web Application s názvem AspKalkulacka. Opět budeme vycházet z prázdného (Empty) projektu. Do něj přidáme nový Web Form s názvem Default.

Rovnou si ukažme, jak bude naše aplikace vypadat:

Přidání kontrolek

Přesuneme se do grafického designeru a na formulář z Toolboxu natáhneme:

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

Jednotlivé kontrolky si nyní uzpůsobíme.

TextBox

TextBox je univerzální zadávací pole. Jakmile nějakou kontrolku označíme kliknutím myší, v okně Properties se nám ukáží vlastnosti, které jí můžeme nastavovat.

TextBoxům nastavíme vlastnost ID na cislo1TextBox a cislo2TextBox. Budeme se snažit, aby se kontrolky jmenovaly podle dat, které obsahují a aby bylo z názvu zároveň i poznat jakého jsou typu. Již víme, že právě pomocí ID k nim poté z CodeBehind přistupujeme. Jako druhou vlastnost nastavíme oběma TextBoxům TextMode na Number, jelikož zadávat budeme čísla. Módů je tam více, kromě textu např. pro zadání emailu, data, času, barvy a podobně.

DropDownList

Kontrolka slouží k výběru z několika hodnot. V našem případě budeme vybírat početní operaci. Data můžeme do kontrolky nahrát z nějaké kolekce v CodeBehind nebo jen nakliknout v oknu Properties v případě, že je nepotřebujeme odnikud načítat. Přesně této možnosti využijeme, v Properties oknu klikneme na vlastnost Items a poté na tlačítko se třemi tečkami vpravo.

Do nově zobrazeného dialogu přidáme 4 položky. Každé položce můžeme nastavit 4 vlastnosti:

• Enabled - Zda je položku možné vybrat
• Selected - Zda je položka vybraná
• Text - Text položky, který vidí uživatel
• Value - Text položky, který se odešle na server

Položkám nastavíme texty na: Sečti, Odečti, Vynásob a Vyděl. Hodnoty (Value) nastavíme na +, -, *, /. První položce nastavíme Selected na True.

Jistě tušíte, že se DropDownList vyrenderuje jako HTML tag <select>. Proto má každá možnost kromě popisku i hodnotu, která se odesílá na server. Ta by ideálně neměla obsahovat diakritiku.

DropDownListu nastavíme ID na operaceDropDow­nList.

Button

Tlačítko vyvolá odeslání formuláře. ID změníme na vypocitejButton a Text na Vypočítej.

Label

Label je jak již víme text, který můžeme ovlivňovat z CodeBehind. Právě do něj vypíšeme výsledek. ID změníme na vysledekLabel, do Text můžeme napsat nulu, což je obvyklá výchozí hodnota na kalkulačkách

Layout formuláře

Formulář je stále v jednom řádku, což není úplně nejhezčí. Rozvržení formuláře tak, aby byly kontrolky pod sebou, provedeme ve zdrojovém kódu šablony. Každou kontrolku vložíme do divu. Alternativně bychom mohli použít tabulku nebo čistě CSS. Vážnějším stylováním se budeme zabývat až v dalších dílech.

Kód formuláře upravíme do následující 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 jsme ještě zvětšili velikost textu, aby byl výsledek dobře vidět.

CodeBehind

Na počítání základních matematických operací asi v tomto případě nemá smysl vytvářet třídu a tak budeme výjimečně psát logiku přímo do CodeBehind.

PostBack

Jakmile se formulář odešle, vykoná se tzv. PostBack. To je situace, kdy se po odeslání formuláře z nějaké stránky znovu ocitneme na té samé stránce, ale s tím rozdílem, že je formulář vyplněný tím, co uživatel odeslal. Není nic jednoduššího, než data z TextBoxů poté načíst a provést výpočet.

Jediné, co musíme rozlišit, je zda zpracováváme PostBack (formulář je vyplněný odeslanými hodnotami) nebo zda zpracováváme běžný příchod na stránku, kdy je formulář nevyplněný. ASP.NET nám nabízí vlastnost IsPostBack, která tento stav rozliší.

Přejděme do CodeBehind a metodu Page_Load upravme do následující 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 případě, že byl formulář odeslaný, načteme hodnoty z formuláře, provedeme výpočet podle vybrané operace a ten vypíšeme do labelu.

Výslednou aplikaci si můžeme vyzkoušet:

Název PostBack je složením slov back, které označuje že jsme se vrátili zpět na původní stránku a POST, což je název metody HTTP protokolu, přes kterou se formuláře odesílají. Kromě ní existuje ještě metoda GET, která slouží k sbírání parametrů z adresního řádku, o té si něco řekneme až v dalších dílech.

Zdrojový kód dnešního projektu je ke stažení v příloze.

V příští lekci, Validace formulářů v ASP.NET, se zaměříme na validaci.

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