2. díl - Obsluha formulářů v ASP.NET

C# .NET ASP.NET Web Forms Obsluha formulářů v ASP.NET

V "minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací 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 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:

Webová kalkulačka v ASP.NET Web Forms

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

Vlastnosti kontrolky v ASP.NET Web Forms v Visual Studio
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.

DropDownList v ASP.NET

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 :)

Formulář kalkulačky v ASP.NET

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.

Formulář kalkulačky v ASP.NET Web Forms

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:

Webová kalkulačka v ASP.NET Web Forms 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. Příště se zaměříme na validaci.


 

Stáhnout

Staženo 223x (24.21 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (3 hlasů) :
4.333334.333334.333334.33333 4.33333


 


Miniatura
Předchozí článek
První webová aplikace v ASP.NET
Miniatura
Všechny články v sekci
ASP.NET Web Forms
Miniatura
Následující článek
Validace formulářů v ASP.NET

 

 

Komentáře
Zobrazit starší komentáře (2)

Avatar
coells
Redaktor
Avatar
coells:

Na druhou stranu je fajn učit se něco správně hned od začátku.

Trochu mě překvapuje, že se zde stále zdůrazňuje OOP, ale když v praxi něco tenhle koncept narušuje, tak je to správně jenom kvůli tomu, že to tak má VS? :-(

 
Odpovědět 15.1.2014 13:52
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na coells
David Čápka:

OOP tu zdůrazňuji, protože začátečníci musí pochopit, že to není nic zbytečného a že se ho mají naučit. Z toho potom vzniká dojem, že jsem nějaký objektový nácek, jenže já to ve skutečnosti tak ortodoxně neberu :)

Přiznám se, že jsem to zatím viděl řešené opravdu jen WiredUp eventy. Kromě toho, že to tak generuje VS jsme se to tak učili i ve škole, to psal zas nějaký člověk z praxe nebo to brali z MSDN. Rád sem potom napíšu alternativní způsob, ale přijde mi lepší, když ten výchozí bude tento.

Odpovědět  +1 15.1.2014 16:18
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
coells
Redaktor
Avatar
Odpovídá na David Čápka
coells:

Takže takhle přijdeš do autoškoly a oni ti tam vysvětlují všechna možná pravidla, značky a dopravní předpisy a zdůrazňují, jak je důležité, aby je začátečník znal a dodržoval.

A pak přijde první testovací jízda a instruktor to střihne přes pole ve 170km/h a prohlásí, že na značku kašle, protože to takhle viděl v Rychle a zběsile. Pro začátečníka jsou přece předpisy vlastně složité a je jich hodně. Ale časem možná ukáže alternativní ukázkovou jízdu, které by se měli držet.

 
Odpovědět  +1 15.1.2014 16:56
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na coells
David Čápka:

Nějak nechápu pointu. Rychle a zběsile není vhodné přirovnání s výchozímu projektu od Microsoftu, kdyby to bylo tak špatně, tak by to tam nebylo a hlavně by to nepoužívalo tolik lidí.

Odpovědět 15.1.2014 17:23
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Bambo
Člen
Avatar
Bambo:

Mohol by som namiesto podmienky IsPostBack použiť metódu Button_Click? Lebo s Web formom som práve začal, ale nejaké skúsenosti mám z Win Formu, takže logicky mi to ide cez ten button. Ak som niečo prehliadol, že si to písal tak ma ospravedlň :)

 
Odpovědět 11.11.2014 18:12
Avatar
Odpovídá na Bambo
Michal Štěpánek:

IsPostBack nemůžeš příliš zaměňovat za Button_Click, protože každé je k něčemu jinému. IsPostBack v podstatě odkazuje "stav stránky", kdežto Button_Click by měl vyvolat nějakou akci... U některých komponent se nastavuje AutoPostBack kvůli načítání "správných" údajů z DB závislých na jiné komponentě a v tom případě se použije "stav stránky" (IsPostBack) pro zobrazení údajů v komponentách...

Odpovědět  +2 11.11.2014 21:34
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
O.S.DV.F
Člen
Avatar
O.S.DV.F:

A ehm.. jak to tlačítko vyvolá odeslání formuláře? To automaticky tlačítko ve formuláři vyvolá jeho odeslání?

Odpovědět 23. února 19:57
Jo! Zkompilovalo se to!
Avatar
Odpovídá na O.S.DV.F
Michal Štěpánek:

Stisknutí tlačítka v podstatě vyvolá "refresh" stránky a tím pádem to vlastně provede výpočet...

Odpovědět 24. února 10:33
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
O.S.DV.F
Člen
Avatar
Odpovídá na Michal Štěpánek
O.S.DV.F:

A proč se ten refresh provede, když se v podstatě nikde nenastavuje?

Odpovědět 24. února 17:15
Jo! Zkompilovalo se to!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na O.S.DV.F
David Čápka:

Protože se používá HTTP protokol, je to vysvětlené v sekci ASP.NET, bylo by dobré si nastudovat jak funguje web, jinak se pro něj nedá rozumně vyvíjet, od toho tu ty články jsou.

Odpovědět  +1 24. února 17:52
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 12. Zobrazit vše