Kontrolki HTML w aplikacjach ASP.NET

Cele ćwiczenia

• Zapoznanie z kontrolkami HTML.
• Zapoznanie z serwerowymi kontrolkami HTML.
• Zapoznanie z obsługą zdarzenia submit.

Dodawanie z wykorzystaniem kontrolek HTML

1. Na stronie umieść prosty program dodający, po kliknięciu przycisku, dwie liczby umieszczone w kontrolkach tekstowych , wynik umieść w trzeciej kontrolce tekstowej. W programie można się posługiwać tyko kontrolkami HTML oraz właściwościami Request i Response klasy Page. Na rysunku 1 przedstawiono przykładowy układ kontrolek a na listingu 1 przykładowy kod.

Rys. 1. Przykładowy układ kontrolek dodawania liczb

+

Listing 1. Przykładowy listing ciała strony dodającej dwie liczby

<% double y = 0;   

if (! (Request.Params.GetValues("x1") == null))   

    y = Convert.ToDouble(Request.Params["x1"]) + Convert.ToDouble(Request.Params["x2"]);

%>

<form id="form1" >

<div>

<input id="Text1" type="text" name="x1"

<% if (Request.Params.GetValues("x1") == null) Response.Write("value=\"0\"");

        else Response.Write("value=\"" + Request.Params["x1"].ToString()+"\""); %>

/>+

<input id="Text2" type="text" name="x2" value=

"<% if (Request.Params["x2"] == null) Response.Write("0");

        else Response.Write(Request.Params["x2"].ToString());  %>"

/>

<input id="Submit1" type="submit" value="=" />

<input id="Text3" type="text" value="<% Response.Write(y.ToString()); %>" />

</div>

</form>

2. Przetestuj działanie programu. Pod formularzem umieść kod z listingu 2 drukujący parametry żądania. Każdorazowo po przeładowaniu strony należy zapoznać się z przesłanymi parametrami. Kod z listingu 2 powinien być umieszczony na wszystkich stronach w tym ćwiczeniu w celu śledzenia parametrów żądania.

Listing 2. Kod skryptu wypisującego na stronie WWW listę parametrów żądania

<%

// Wydruk parametrów żądania

for (int i = 0; i < Request.Params.Count; i++)

{

    Response.Write("Indeks : " + i.ToString() + "<br />");

    Response.Write("Nazwa  : " + Request.Params.GetKey(i) + "<br />");

    Response.Write("Ilość  : " + Request.Params.GetValues(i).Length.ToString() + "<br />");

for (int j = 0; j < Request.Params.GetValues(i).Length; j++)       

        Response.Write("Wartość:" + Request.Params.GetValues(i)[j] + "<br /><br />");

}        

%>

Prosty kalkulator z wykorzystaniem kontrolek HTML

1. Na stronie umieść prosty program dokonujący czterech działań arytmetycznych na dwóch argumentach umieszczonych w dwóch kontrolkach tekstowych. Działanie jest wykonywane po kliknięciu jednego z czterech przycisków umieszczonych na formularzu. Wynik może być umieszczony w kolejnej kontrolce tekstowej lub jako tekst na stronie. W programie można się posługiwać tyko kontrolkami HTML oraz właściwościami Request i Response.

2. Przed napisaniem programu zapoznaj się z trybem przekazywania parametrów przez przyciski. W tym celu przyciski należy nazwać, następnie po uruchomieniu aplikacji obserwować parametry żądania wysyłane po kliknięciu kolejnych przycisków.

3. Przy rozpoznawaniu jakie działanie wykonać można posłużyć się następującym fragmentem kodu:

double y=0;

if (!(Request.Params["+"] == null))

    y = Convert.ToDouble(Request.Params["x1"]) + Convert.ToDouble(Request.Params["x2"]);

gdy kliknięty przycisk rozpoznawany jest po nazwie lub następującym fragmentem kodu

double y=0;

if (Request.Params["operacja"] == "+")

    y = Convert.ToDouble(Request.Params["x1"]) + Convert.ToDouble(Request.Params["x2"]);

gdy przyciski mają tą sama nazwę operacja a rozpoznawane są po napisie, który jest przekazywany jako parametr żądania.

4. Przetestuj działanie programu.

5. Stwórz program kalkulatora, w którym dane i wyniki są wyświetlane w jednej kontrolce, tak jak w rzeczywistym kalkulatorze. Przy programowaniu można użyć ukrytych kontrolek HTML.

Dodawanie i kalkulator z wykorzystaniem serwerowych kontrolek HTML

Kontrolka HTML po dodaniu atrybutu runat="server" staje się kontrolka serwerową. Kontrolki serwerowe zachowują swój stan, ponadto skrypty działające po stronie serwera mają dostęp do atrybutów takich kontrolek i mogą je czytać i zmieniać. Na listingu 3 przedstawiono przykładowy kod dodawania liczb.

Listing 3. Przykładowy listing ciała strony dodającej dwie liczby, z wykorzystaniem serwerowych kontrolek HTML

<%
wynik.InnerHtml = (Convert.ToDouble(Text1.Value) + Convert.ToDouble(Text2.Value)).ToString();
%>
<input id="Text1" type="text" runat="server" value="0" />&nbsp;+
<input id="Text2" type="text" runat="server" value="0" />
<input id="Submit1" type="submit" value="=" />&nbsp;
<span id="wynik" runat="server" >0</span>

Kontrolkom serwerowym nie trzeba nadawać nazw, zrobi to automatycznie serwer przed wysłaniem strony do przeglądarki. W kodzie skryptu kontrolka jest identyfikowana przez atrybut id.

1. Wykonaj programy z powyższych poleceń (dodawanie i kalkulator) z wykorzystaniem kontrolek serwerowych HTML.

2. Przetestuj działania programów, zapoznaj się szczegółowo z parametrami żądania stron zawierających kontrolki serwerowe.

Projekt

1. Utworzyć aplikację realizującą kalkulator przy pomocy kontrolek HTML i serwerowych HTML.