A példa leírása

Példaképpen készítsünk el egy olyan web alkalmazást, amely bekér két egész számot, ki lehet választani, milyen alapműveletet szeretnénk a két számmal elvégezni. Az alkalmazás fogadja a kitöltött adatokat, elvégzi a műveletet, és az eredményt visszaküldi a kliens felé megjelenítésre.

Ehhez egy webes űrlapra lesz szükségünk, két adatbeviteli mezővel, a választási lehetőség miatt 4 választógombbal (RadioButton), és egy beküldés nyomógombbal. A számolt eredmény megjelenítését egy címke (Label) fogja végezni.

HTML tábla felrakása

Állítsuk a web form pageLayout tulajdonságát FlowLayout értékre, és helyezzünk el a formon egy HTML komponenst, egy Table-t.
Váltsunk át Design nézetről HTML nézetre. Ekkor egy 3 soros, 3 oszlopos HTML nyelven leírt TABLE-t láthatunk:
<TABLE id="Table1" cellSpacing="1" cellPadding="1" border="1">
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD> </TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD> </TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
A table elejét a <table>, a végét a </table> elem jelöli. Három sort tartalmaz: mindegyik <tr> és </tr> között. Minden sor három oszlopot tartalmaz, <td> és </td> között. Az oszlopokban egyelőre nincs adat, üresek.

Szöveg írása

A beszúrt táblába egyelőre helyezzük el a statikus (nem program által generált) szövegeket. Mivel további sorokra is szükség van, bővítsük két új sorral a táblázatot:
<TABLE id="Table1" cellSpacing="1" cellPadding="1" border="1">
<TR>
<TD>Kérem az első számot:</TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD> Kérem a második számot:</TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD> Válassz műveletet:</TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD> </TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD> </TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

Adatbekérés

Ideje beszúrni a HTML lapra az adatbeviteli mezőket. A VIEW | TOOLBOX részről a WEB FORMS szakaszról drag&drop módszerrel helyezzünk el a megfelelő részen egy-egy TextBox komponenst. Valami ilyesmit kell látnunk:
<TR>
<TD>Első szám:</TD>
<TD></TD>
<TD><asp:TextBox id="TextBox1" runat="server"></asp:TextBox></TD>
</TR>
<TR>
<TD>Második szám:</TD>
<TD></TD>
<TD><asp:TextBox id="TextBox2" runat="server"></asp:TextBox></TD>
</TR>
Az ’asp:’ jelenti, hogy ezek a program által feldolgozható elemek. Az id= szakaszban vannak leírva, hogy a programon belül milyen névvel hivatkozhatunk majd ezekre az adatbeviteli elemekre (TextBox1, TextBox2).

Alapművelet választása

A választó gombok felrakásához szúrjunk be a HTML lapra RadioButton-okat a VIEW | TOOLBOX részről a WEB FORMS szakaszról drag&drop módszerrel. Valami ilyesmit kell látnunk:
<TR>
<TD>Alapművelet:</TD>
<TD></TD>
<TD>
<asp:RadioButton id="RadioButton1"
runat="server" Text="Összeadás" Checked="True"></asp:RadioButton><br>
<asp:RadioButton id="RadioButton2"
runat="server" Text="Szorzás"></asp:RadioButton><br>
<asp:RadioButton id="RadioButton3"
runat="server" Text="Osztás"></asp:RadioButton><br>
<asp:RadioButton id="RadioButton4"
runat="server" Text="Kivonás"></asp:RadioButton>
</TD>
</TR>
A RadioButton-ok feliratát a Text jellemzőn keresztül állíthatjuk be a PROPERTIES beállító ablakban. Az első RadioButton (Összeadás) Checked tulajdonságát állítsuk true-ra, hogy ő eleve kiválasztott állapotban legyen.

Kiértékelés kérése

A webes űrlapot kitöltése után vissza kell küldeni a szerverhez feldolgozás céljából. Ezért minden űrlap tartalmaz egy beküldés (Submit) gombot. Helyezzünk fel mi is egyet az űrlapra, a mezők alá:
<TR>
<TD colspan="3" align="center">
<asp:Button id="Button1" runat="server"
Text="Kiértékelés"></asp:Button>
</TD>
</TR>
Mivel ő ebben a sorban mindhárom oszlopot kitölti, így csak egyetlen oszlopot (TD) hagyunk meg, de annak colspan értékét 3-ra állítjuk. Az align tulajdonsággal tudjuk az oszlopon belüli igazítást középre (center) állítani.
A nyomógombra a program szövegén belül a Button1 névvel tudunk majd hivatkozni. A nyomógomb felirata pedig ”Kiértékelés” lesz.

A kiírás megoldása

Helyezzünk el még egy sort, amelyben egy Label komponens teszünk bele:
<TR>
<td colspan=3 align="center">
<asp:Label id="Label1" runat="server"></asp:Label>
</td>
</TR>
Mivel ő ebben a sorban mindhárom oszlopot kitölti, így csak egyetlen oszlopot (TD) hagyunk meg, de annak colspan értékét 3-ra állítjuk. Az align tulajdonsággal tudjuk az oszlopon belüli igazítást középre (center) állítani.
A Label komponensre a program szövegén belül a Label1 névvel tudunk majd hivatkozni. A címke tartalma egyelőre legyen üres.

A számolás elvégzése

Rendeljünk eseményt (függvényt) a nyomógomb lenyomásához. A Button1 nyomógombhoz a PROPERTIES beállító ablakban az Események (EVENTS, jele kis sárga villám) a CLICK részhez írjunk be egy függvénynevet (pl. Szamolas), és üssük le az Entert:
Első lépésben olvassuk ki a két beviteli mezőnkben lévő értékeket, azokat alakítsuk át számokká. Majd vizsgáljuk meg, melyik alapműveletet választották ki. Számoljuk ki az eredményt, és helyezzük el a Label-ben:
private void Szamolas(object sender, System.EventArgs e)
{
// 1
int a = Int32.Parse( TextBox1.Text );
int b = Int32.Parse( TextBox2.Text );
// 2
int c = 0;
if (RadioButton1.Checked) c = a+b;
if (RadioButton2.Checked) c = a*b;
if (RadioButton3.Checked) c = a/b;
if (RadioButton4.Checked) c = a-b;
// 3
Label1.Text = String.Format("Az eredmény = {0}",c);
}