AJAX Control Toolkit –
NumericUpDownExtender
Ez egy példaalkalmazáshoz tartozó leírás! Az alkalmazás erről a címről tölthető el:
http://devportal.hu/Portal/Detailed.aspx?NewsId=6a497b55-e21d-4bc5-beb2-a9e64c6ca24e vagy
http://cid-8dcaf3b0da4fb828.skydrive.live.com/embedrowdetail.aspx/ACTsorozat/ACT|_XXI|_NumericUpDown.zip
Kicsit hosszabb kihagyás után, visszacsöppenve az Ajax világába, folytatom tovább a félbehagyott ACT-t bemutató sorozatunkat. Ma a NumericUpDownExtender a soros!
NumericUpDownExtender alapok
Ezen extender segítségével a WinForms-os világból jól ismert NumericUpDown vezérlőt tudjuk webalkalmazásainkban megvalósítani. A NumericUpDown kontroll arra lett kitalálva, hogy egy egyszerű és jól használható felületet biztosítson egy szövegdobozon belüli érték növelésére/csökkentésére. A TextBox mellett található két gomb, melyek segítségével tudjuk növelni, illetve csökkenteni a TextBox értékét.
A NUDE annyival tud többet a winforms-os társánál, hogy nem csak numerikus értékek növelését, illetve csökkentését lehet vele egyszerűen megvalósítani, hanem akár egy saját enumerátoron is könnyedén végigiterálhatunk vele! Sőt akár még a gombokat is lecserélhetjük egyedi képekre!
NUDE használata
A példaalkalmazásunkban a kedvenc vezérlőnknek, vagyis a Calendar-nak fogjuk egy újabb implementációját elkészíteni (Születési dátumot fogunk bekérni a felhasználótól). Ne keressünk benne értelmet, én azért választom mindig a naptárat, mivel eléggé egyszerű elkészíteni és mellesleg tökéletes állatorvosi ló. 
Kezdjünk is hozzá a fejlesztéséhez!
Év
Először az évbeállító szövegdobozt készítsük el. Húzzunk a formunkra egy TextBox-ot, majd pedig egy NumericUpDownExtender-t! A szövegdoboz fölé írjuk oda, hogy Év! A TextBox-on egyetlen módosítást végezzünk el, igazítsuk középre a szöveget: (style="text-align:center;")! Kapcsoljuk össze a NUDE-t és a szövegdobozt a TargetControlID tulajdonság segítségével!
Az október 20.-ai ACT release-ben megjelent két új tulajdonsága a nude-nak, még pedig a Miminum, illetve a Maximum. Ezek tök jól használhatóak lennének az alkalmazásunkban, ha működnének! Ugyanis, ha a Miminum értéknek 20-nál nagyobb számot adunk meg, akkor javascript error-t kapunk. Hát eléggé ciki, de ez van!
Ezért ha határok közé szeretnénk szorítani a születési évet, akkor más módszerhez kell folyamodnunk. Szerencsére a nude növelését, illetve csökkentését webszolgáltatásokon keresztül is meg lehet valósítani. A webmetódusaink szignatúrája az alábbi módon néz ki: int IncrementValue (int current, string tag). Magyarul az aktuális értéket a current paraméteren keresztül kapjuk majd meg és egy egész típusú értékkel kell majd visszatérnünk. A nude-nak van egy Tag nevű tulajdonsága is, amelyen keresztül bármilyen adatot átpasszolhatunk a webservice-nek. Tehát a tag a már korábban megismert ContextKey paraméternek felel meg!
Külön lesz egy növelő, illetve egy csökkentő webmetódusunk, ezért az alábbi módon állítsuk be a NUDE vezérlőnket:
<ajaxToolkit:NumericUpDownExtender ID="NUDE_year" runat="server"
TargetControlID="txtbox_year"
Width="120"
ServiceDownMethod="DecrementValue"
ServiceUpMethod="IncrementValue" />
Mivel a Default.aspx oldalon belül fogjuk majd mindkét webmethod-ot megírni, ezért nem kell külön megadnunk a ServiceDownPath, illetve ServiceUpPath tulajdonságokat!
Egy kicsit furcsának találom, hogy a nude-on keresztül kell beállítanunk a TextBox szélességét a Width tulajdonság segítségével, de ez van, meg kell szokni! Mellesleg a neten található példaalkalmazásokban a szövegdobozoknak külön kézzel is beállítják a méretüket, bár szerintem teljesen felesleges, ugyanis nem veszi figyelembe a nude a TextBox eredeti méretét!
Most készítsük el a két eget rengetően bonyolult webmetódusunkat! Íme, az oldal head részébe elhelyezendő kódjuk:
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static int IncrementValue(int current, string tag)
{
if(current < 2005) current++;
return current;
}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static int DecrementValue(int current, string tag)
{
if (current > 1901) current–;
return current;
}
</script>
Ha a nude-tól átvesszük a növelés, illetve csökkentés terhét, akkor a felhasználó csak a gombok segítségével tudja változtatni a TextBox értékét, direktbe nem tudja módosítani (readonly = true)! Ez egyfelől jó, ugyanis így biztosan int értéket fog kapni a webservice. Másfelől viszont rossz, ugyanis ha „távol” vagyunk a kívánt évtől, akkor elunjuk az életünket, amire kattintgatásokkal elérjük.
Ha most elindítjuk az alkalmazásunkat, akkor azt láthatjuk, hogy a TextBox-unk Text értéke megegyezik a double negatív alsóhatárával. Ezért, ha most rákattintunk valamelyik gombra, akkor exception-t fogunk kapni. Azért, hogy ezt elkerüljük, állítsuk be a szövegdoboz értékét mondjuk 1950-re!
Hónap
A hónapbeállító szövegdobozunkat szintén megoldhatnánk webszolgáltatásokkal, de van egy egyszerűbb megoldás is. Kihasználjuk azt, hogy a nude képes általunk megszabott értékek között ugrálni. Az enumerátor értékeit a RefValue tulajdonságon keresztül tudjuk megadni.
Ismét húzzunk a formunkra egy TextBox-ot, illetve egy NUDE-ot, majd írjuk föléjük, hogy Hónap! A szövegdoboz Text-jét itt is igazítsuk középre, majd a nude-ot az alábbi módon állítsuk be:
<ajaxToolkit:NumericUpDownExtender ID="NUDE_month" runat="server" TargetControlID="txtbox_month" Width="120"
RefValues="Január;Február;Március;Április;Május;Június;Július;Agusztus;Szeptember;Október;November;December" />
Amint az a kódból látható, az enumerátorunk értékeit pontosvesszővel elválasztva kell felsorolni. Ha a RefValue-t beállítjuk, akkor szintén csak olvasható lesz a TextBox-unk, de legalább a Text default értéke az enum első eleme lesz! Az esélyegyenlőség miatt mégis állítsuk be a szövegdobozunk szövegét Júniusra!
Ez mind szép és jó, működik is, de nem eléggé izgi. Ezért egy kicsit tuningoljuk fel a nude vezérlőnket, cseréljük le a gombjait! Két ImageButton-nel fogjuk leváltani az eredeti gombokat. Egy kis érdekesség: amikor kicseréljük a gombokat másikakra, akkor az új button-öket nem közvetlenül az eredetiek helyére fogja tenni a NUDE, hanem ott hagyja, ahová tettük a markupban. Tehát ha azt szeretnénk, hogy a szövegdoboz bal oldalán legyenek a léptető gombok, akkor egyszerűen a TextBox elé tegyük be a két ImageButton-t!
Állítsunk be mindkettőnél valamilyen képet, majd pedig mondjuk meg a nude-nak, hogy ezekre kattintva léptesse a hónapos szövegdobozunk értékét. A TargetButtonUpId, illetve a TargetButtonDownId tulajdonságok segítségével tehetjük meg mindezt. Íme, a hónap megadós rész markup kódja egyben:
<b>Hónap</b><br/>
<asp:ImageButton ID="imgbtn_up" runat="server" ImageUrl="~/Img/increment.png" />
<asp:ImageButton ID="imgbtn_down" runat="server" ImageUrl="~/Img/decrement.png" />
<asp:TextBox ID="txtbox_month" runat="server" style="text-align:center;">Június</asp:TextBox>
<ajaxToolkit:NumericUpDownExtender ID="NUDE_month" runat="server"
TargetControlID="txtbox_month" Width="120"
RefValues="Január;Február;Március;Április;Május;Június;Július;Agusztus;Szeptember;Október;November;December"
TargetButtonUpID="imgbtn_up" TargetButtonDownID="imgbtn_down"/>
Nap
Utolsó komponensként készítsük el a születési dátum napbeállítós részét! Ahhoz, hogy itt a hónapnak megfelelő napok közül választhassuk (pl.: Február esetén 1 és 28 vagy 29 között, vagy Március esetén 1-től 31-ig) szükségünk van a másik két TextBox aktuális értékére is! Webservice-ből direktben nem tudjuk elérni őket, csak indirektben, például ha a tag paraméterben átpasszoljuk az értékeket! Ez javascriptben némi kis bűvészkedéssel megoldható, de semmiféleképpen nem szép megoldás, ezért most mutatok egy hasznos kis trükköt, hogy hogyan lehet ezt elegánsan megoldani!
A trükk lényege, hogy amikor a NUDE megváltozik, akkor mi kézzel PostBack-et váltunk ki, amelyet utána aszinkron kezelünk le. Ugye mennyivel szebb! 
Először írjuk ki a formunkba, hogy Nap, majd utána húzzunk be alá egy UpdatePanel-t! Az UP ContentTemplate-jében helyezzünk egy TextBox-ot, illetve egy NUDE-t! A szövegdoboz szövege legyen 15 és középre zárt! A nude-nál állítsuk be a TargetControlID-t, a Widht-ot, illetve a BehaviorID-t! Az utolsó értéke legyen nude! Erre azért van szükségünk, hogy a későbbiekben tudjunk majd rá hivatkozni java scriptből!
Végül az UP-hez vegyük fel aszinkron trigger-nek a TextBox-unk TextChanged eseményét! Valahogy így kéne kinézni a markupunknak:
<asp:UpdatePanel ID="UP" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtbox_day" runat="server">15</asp:TextBox>
<ajaxToolkit:NumericUpDownExtender BehaviorID="nude" ID="NUDE_day" runat="server" TargetControlID="txtbox_day" Width="120" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtbox_day" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
Folytassuk most a fejlesztést egy kis kliensoldali programozással!
A javascript kódunknak összesen az alábbi két feladata lesz:
– feliratkozni a nude változásfigyelő eseményére
– változás esetén postbacket generálni.
Ezt így valósíthatjuk meg a legegyszerűbben:
<script type="text/javascript">
function pageLoad()
{
var nude = $find("nude");
nude.add_currentChanged(onChanged);
}
function onChanged(sender, args)
{
__doPostBack("<%=txtbox_day.ClientID %>","");
}
</script>
A dolog érdemi részével meg is vagyunk, már csak a logikát kell az egész mögé ültetni! Iratkozzunk fel a txtbox_day TextChanged eseményére! Az eseménykezelő függvényében először kérjük el a txtbox_year értékét, majd határozzuk meg, hogy szökőév-e! Utána a txtbox_month-ban lévő hónap alapján állítsuk be a nude_day Maximum tulajdonságát!
Eddig itt tartunk kód-ügyileg:
int year = Convert.ToInt32(txtbox_year.Text);
string month = txtbox_month.Text;
int daynumber = 0;
if (month == "Február" && IsSzokoEv(year)) daynumber = 29;
else daynumber = 28;
switch (month)
{
case "Január":
case "Március":
case "Május":
case "Július":
case "Augusztus":
case "Október":
case "December":
daynumber = 31;
break;
case "Április":
case "Június":
case "Szeptember":
case "November":
daynumber = 30;
break;
}
NUDE_day.Maximum = daynumber;
Most készítsük el a szökőév ellenőrző függvényünket az alábbi módon:
bool IsSzokoEv(int year)
{
bool szokoev = false;
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) szokoev = true;
return szokoev;
}
Az alkalmazásunk elkészült, működik is, csak nem éppen hatékony. Ugyanis mindenegyes léptetésnél lefut a teljes kódunk (szökőév ellenőrzéssel együtt), feleslegesen! Ezért iktassunk be egy TextBoxChanged függvényt, amely megmondja, hogy az előző léptetés óta megváltozott-e a kiválasztott év vagy hónap! Ehhez a TextChanged lefutásakor tároljuk el Session-ben az aktuális értékeket:
…
Session["lastyearvalue"] = txtbox_year.Text;
Session["lastmonthvalue"] = txtbox_month.Text;
A változást figyelő függvényünket így már könnyű implementálni:
bool TextBoxChanged()
{
bool changed1 = false, changed2 = false;
if (Session["lastyearvalue"] != null)
changed1 = (txtbox_year.Text!=(string)Session["lastyearvalue"]);
if (Session["lastmonthvalue"] != null)
changed2 = (txtbox_month.Text!=(string)Session["lastmonthvalue"]);
if (changed1 || changed2)
return true;
else
return false;
}
Végül tegyük az egész TextChanged kódunkat egy nagy if-be, ahol leellenőrizzük, hogy történt-e változás, vagy egyáltalán be lett-e már állítva a nude_day Maximuma:
if ((NUDE_day.Maximum != Double.MaxValue)) || this.TextBoxChanged())
{
…
}
Így sem lesz tökéletes az alkalmazásunk, de legalább már valamivel hatékonyabb, mint a változásfigyelés előtt!
Én most teljesen föl vagyok pörögve, mert végre azt látom, hogy valami megmozdult, és ez nem egy csípős alfarhang következménye!
DOTNET érthetően... (főleg Silverlight) 