AJAX Control Toolkit –
CascadingDropDown
CascadingDropDown
Ez egy példaalkalmazáshoz tartozó leírás! Az alkalmazás erről a címről tölthető el:
Ma a CascadingDropDown Extender-rel ismerkedünk meg, aminek ha magyar nevet szeretnénk adni, akkor a sorba kapcsolt legördülő-listát adhatnánk.
CascadingDropDown alapok
Ezzel az extender-rel olyan DropDownList-eket egészíthetünk ki AJAX-os funkcionalitással, melyek értékei függenek egy másik legördülő-listától. Magyarul egy DDL-t úgy töltjük fel kódból elemekkel, hogy az előző DDL-ben kiválasztott elemet vesszük alapul.
Ezzel az egyetlen nagy baj az volt, hogy mindegyik DDL AutoPostBack-re volt állítva, így gyakran ugrált/vibrált az oldalt. Jött az AJAX-szal a megoldás, mindegyiket beszórtuk egy UpdatePanel-be, és felvettük a SelectedIndexChanged eseményeket az aszinkronkioldóhoz (AsyncPostBackTrigger). Ettől a felhasználó már valamivel jobban érezte magát, de még mindig ott volt az esetleges hosszú várakozás, amelyet valamilyen chili-vili animációval próbáltunk elfedni. Na és itt jön képbe a CDD, ami mindent megváltoztat, mert gyorsabb, szebb és egyszerűbb is. (most kéne jönnie a „de” résznek… de nincs
).
A gyorsasága abban mutatkozik meg, hogy mindig csak az éppen szükséges adatért fog a szerverhez fordulni az objektum, így csökken az adatforgalom.
A szépsége a villódzás megszüntetésén kívül még abban is megnyilvánul, hogy pl.: addig nem enged választani a második DDL-ből míg az elsőből nem választottunk.
Az egyszerűségét két dolog példázza igazán. Az egyik például az, hogy egyetlen webmetódus segítségével is akár feltölthetjük az összes ddl-t, ha egy hierarchikus tárolóból (például XML) olvassuk ki az adatokat. A másik pedig, hogy lehetőségünk van arra is, hogy akár az adott oldalon írt webmetódust hívjuk meg.
Ezzel az extender-rel olyan DropDownList-eket egészíthetünk ki AJAX-os funkcionalitással, melyek értékei függenek egy másik legördülő-listától. Magyarul egy DDL-t úgy töltjük fel kódból elemekkel, hogy az előző DDL-ben kiválasztott elemet vesszük alapul.
Ezzel az egyetlen nagy baj az volt, hogy mindegyik DDL AutoPostBack-re volt állítva, így gyakran ugrált/vibrált az oldalt. Jött az AJAX-szal a megoldás, mindegyiket beszórtuk egy UpdatePanel-be, és felvettük a SelectedIndexChanged eseményeket az aszinkronkioldóhoz (AsyncPostBackTrigger). Ettől a felhasználó már valamivel jobban érezte magát, de még mindig ott volt az esetleges hosszú várakozás, amelyet valamilyen chili-vili animációval próbáltunk elfedni. Na és itt jön képbe a CDD, ami mindent megváltoztat, mert gyorsabb, szebb és egyszerűbb is. (most kéne jönnie a „de” résznek… de nincs
).A gyorsasága abban mutatkozik meg, hogy mindig csak az éppen szükséges adatért fog a szerverhez fordulni az objektum, így csökken az adatforgalom.
A szépsége a villódzás megszüntetésén kívül még abban is megnyilvánul, hogy pl.: addig nem enged választani a második DDL-ből míg az elsőből nem választottunk.
Az egyszerűségét két dolog példázza igazán. Az egyik például az, hogy egyetlen webmetódus segítségével is akár feltölthetjük az összes ddl-t, ha egy hierarchikus tárolóból (például XML) olvassuk ki az adatokat. A másik pedig, hogy lehetőségünk van arra is, hogy akár az adott oldalon írt webmetódust hívjuk meg.
CascadingDropDown – WebService
Mint ahogy a fentebbi bevezetőből kitalálható ennek az Extender-nek is a lelkét egy webszolgáltatás adja, mint az AutoCompleteExtender-nek.
Most egy olyan ws-t fogunk elkészíteni, amelyet három olyan DDL-hez kapcsolunk majd, melyek a naptárvezérlőt hivatottak helyesíteni. A webszolgáltatásunk legnehezebb része a szökőév ellenőrzés lesz.
Sokan úgy gondolják, hogy minden néggyel osztható év szökőév, pedig nem! A százzal osztható évek nem szökőévek, kivéve a 400-szal is oszthatóak. Tehát ezek alapján 1500 nem, de 1600 már szökőév lesz, (mármint volt…).
Nézzük a webszolgáltatásunkat! Adjunk a projektünkhöz egy WebService-t, aminek legyen a neve Get_Date.asmx. Az alábbi névtereket ajánlott using-olni:
System.Collections.Generic, AjaxControlToolkit, System.Collections.Specialized
Adjuk az osztálynak egy [System.Web.Script.Services.ScriptService] attribútumot. Törüljük ki az osztályon belül automatikusan létrehozott dolgokat! Most azt a webmetódust fogjuk megírni, amely az éveket fogja visszaadni. Először nézzük a kódot, majd utána jöhet a magyarázat:
Mint ahogy a fentebbi bevezetőből kitalálható ennek az Extender-nek is a lelkét egy webszolgáltatás adja, mint az AutoCompleteExtender-nek.
Most egy olyan ws-t fogunk elkészíteni, amelyet három olyan DDL-hez kapcsolunk majd, melyek a naptárvezérlőt hivatottak helyesíteni. A webszolgáltatásunk legnehezebb része a szökőév ellenőrzés lesz.
Sokan úgy gondolják, hogy minden néggyel osztható év szökőév, pedig nem! A százzal osztható évek nem szökőévek, kivéve a 400-szal is oszthatóak. Tehát ezek alapján 1500 nem, de 1600 már szökőév lesz, (mármint volt…).Nézzük a webszolgáltatásunkat! Adjunk a projektünkhöz egy WebService-t, aminek legyen a neve Get_Date.asmx. Az alábbi névtereket ajánlott using-olni:
System.Collections.Generic, AjaxControlToolkit, System.Collections.Specialized
Adjuk az osztálynak egy [System.Web.Script.Services.ScriptService] attribútumot. Törüljük ki az osztályon belül automatikusan létrehozott dolgokat! Most azt a webmetódust fogjuk megírni, amely az éveket fogja visszaadni. Először nézzük a kódot, majd utána jöhet a magyarázat:
[WebMethod()]
public CascadingDropDownNameValue[] Get_Years(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> result = new List<CascadingDropDownNameValue>();
public CascadingDropDownNameValue[] Get_Years(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> result = new List<CascadingDropDownNameValue>();
for (int i = 1500; i <= Convert.ToInt32(DateTime.Now.Year); i++)
{
result.Add(new CascadingDropDownNameValue(i.ToString(),i.ToString()));
}
{
result.Add(new CascadingDropDownNameValue(i.ToString(),i.ToString()));
}
return result.ToArray();
}
}
Itt is, mint az ACE-nél kötött a webmetódus struktúrája (még a paraméterek is!). Kötelezően egy CascadingDropDownNameValue gyűjteménnyel kell visszatérnünk, amely tartalmazni fogja a DDL-be feltöltendő elemek neveit és értékeit. Ehhez segítségül hívjuk a generikus osztályokat, konkrétan egy listát, amelyet a végén gyűjteménnyé avanzsálunk. Közben természetesen feltöltjük adatokkal a listánkat. Érdekességként jegyzem meg, hogy ha a for ciklusban a kezdeti évet például 1000-re állítanánk, akkor exceptiont generálna a webszolgáltatás, és a ddl-be az elemek helyett egy ilyen elem kerülne: [Method error 500].
A két kötelező paraméter közül az első (knowCategoryValues), egy olyan szöveges változó, amely felfogható egy naplóként. Vagyis ebben tárolódik el az, hogy melyik kategóriából (dropdownlist-ből), melyik értéket választottuk ki. Például, ha az első ddl-ünkhöz a Year kategóriát rendeljük, akkor a hónap webmetódus hívásánál a paraméter ezt fogja pl. tartalmazni: Year:1908; . További webmetódus hívások esetén a kategóriákat és a választott értékeket önmagához fogja hozzákonkatenálni.
A második paraméter az éppen aktuális kategória nevét tartalmazza. Tehát pl.: az év kiválasztása után ez a paraméter a Month értéket fogja felvenni.
A két kötelező paraméter közül az első (knowCategoryValues), egy olyan szöveges változó, amely felfogható egy naplóként. Vagyis ebben tárolódik el az, hogy melyik kategóriából (dropdownlist-ből), melyik értéket választottuk ki. Például, ha az első ddl-ünkhöz a Year kategóriát rendeljük, akkor a hónap webmetódus hívásánál a paraméter ezt fogja pl. tartalmazni: Year:1908; . További webmetódus hívások esetén a kategóriákat és a választott értékeket önmagához fogja hozzákonkatenálni.
A második paraméter az éppen aktuális kategória nevét tartalmazza. Tehát pl.: az év kiválasztása után ez a paraméter a Month értéket fogja felvenni.
A második legördülő-listánk feltöltéséhez szükséges webmetódust nem a webszolgáltatáson belül fogjuk megírni, hanem a naptárvezérlőt helyettesítő ddl-eket tartalmazó oldalon. Így most a harmadik DDL-t feltöltő webmetódust írjuk meg:
[WebMethod()]
public CascadingDropDownNameValue[] Get_Days(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> result = new List<CascadingDropDownNameValue>();
public CascadingDropDownNameValue[] Get_Days(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> result = new List<CascadingDropDownNameValue>();
StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
int y = Convert.ToInt32(sd["Year"]);
bool szokoev = false;
if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) szokoev = true;
bool szokoev = false;
if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) szokoev = true;
string month = sd["Month"];
int daynumber = 0;
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;
}
if (month == "Február" && szokoev) daynumber = 29;
else if (month == "Február" && !szokoev) daynumber = 28;
int daynumber = 0;
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;
}
if (month == "Február" && szokoev) daynumber = 29;
else if (month == "Február" && !szokoev) daynumber = 28;
for (int i = 1; i <= daynumber; i++)
{
result.Add(new CascadingDropDownNameValue(i.ToString(), i.ToString()));
}
{
result.Add(new CascadingDropDownNameValue(i.ToString(), i.ToString()));
}
return result.ToArray();
}
}
A CascadingDropDown objektumnak van egy nagyon hasznos tagfüggvénye, még pedig a ParseKnownCategoryValuesString(). Ez arra képes, hogy a knowCategoryValues-ban eltárolt kulcs (kategória) – érték párokat kimentse egy StringDictionary objektumba. Például ha az első paraméter értéke: Year:1908;Month:Február; ,akkor ezen metódus meghívása után ilyen egyszerűen eltudjuk érni a kiválasztott évszámot: sd["Year"]. Mivel ez egy string, ezért át kell konvertálnunk integerbe, hogy dolgozni tudjunk vele.
Az utána jövő két sor felelős a szökőév vizsgálatáért. Alapban azt feltételezzük, hogy nem szökőévet választott a kliens.
Utána egy switch/case segítségével meghatározzuk, hogy egyes hónapokban hány nap legyen, majd a választott hónapnak megfelelően, feltöltjük a CascadingDropDownNameValue listánkat.
Készen is vagyunk a webszolgáltatásunkkal, most már csak a hónapokat feltöltő webmetódust kell megírnunk. A Default.aspx.cs fájlba akarjuk mindezt megvalósítani. Itt az alábbi három névtérre lesz szükségünk:
System.Collections.Generic, AjaxControlToolkit, System.Web.Services
Nézzünk is a kódot:
Az utána jövő két sor felelős a szökőév vizsgálatáért. Alapban azt feltételezzük, hogy nem szökőévet választott a kliens.
Utána egy switch/case segítségével meghatározzuk, hogy egyes hónapokban hány nap legyen, majd a választott hónapnak megfelelően, feltöltjük a CascadingDropDownNameValue listánkat.
Készen is vagyunk a webszolgáltatásunkkal, most már csak a hónapokat feltöltő webmetódust kell megírnunk. A Default.aspx.cs fájlba akarjuk mindezt megvalósítani. Itt az alábbi három névtérre lesz szükségünk:
System.Collections.Generic, AjaxControlToolkit, System.Web.Services
Nézzünk is a kódot:
[WebMethod()]
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] Get_Months(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> result = new List<CascadingDropDownNameValue>();
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] Get_Months(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> result = new List<CascadingDropDownNameValue>();
result.Add(new CascadingDropDownNameValue("Január", "Január"));
result.Add(new CascadingDropDownNameValue("Február", "Február"));
result.Add(new CascadingDropDownNameValue("Március", "Március"));
result.Add(new CascadingDropDownNameValue("Április", "Április"));
result.Add(new CascadingDropDownNameValue("Május", "Május"));
result.Add(new CascadingDropDownNameValue("Június", "Június"));
result.Add(new CascadingDropDownNameValue("Július", "Július"));
result.Add(new CascadingDropDownNameValue("Augusztus", "Augusztus"));
result.Add(new CascadingDropDownNameValue("Szeptember", "Szeptember"));
result.Add(new CascadingDropDownNameValue("Október", "Október"));
result.Add(new CascadingDropDownNameValue("November", "November"));
result.Add(new CascadingDropDownNameValue("December", "December"));
result.Add(new CascadingDropDownNameValue("Február", "Február"));
result.Add(new CascadingDropDownNameValue("Március", "Március"));
result.Add(new CascadingDropDownNameValue("Április", "Április"));
result.Add(new CascadingDropDownNameValue("Május", "Május"));
result.Add(new CascadingDropDownNameValue("Június", "Június"));
result.Add(new CascadingDropDownNameValue("Július", "Július"));
result.Add(new CascadingDropDownNameValue("Augusztus", "Augusztus"));
result.Add(new CascadingDropDownNameValue("Szeptember", "Szeptember"));
result.Add(new CascadingDropDownNameValue("Október", "Október"));
result.Add(new CascadingDropDownNameValue("November", "November"));
result.Add(new CascadingDropDownNameValue("December", "December"));
return result.ToArray();
}
}
Ehhez összesen annyi megjegyzésem van, hogy fontos a ScriptMethod attribútum kiírása (a webszolgáltatás osztályánál ScriptService attribútum volt, nem keverendő a kettő!!!).
CascadingDropDown Extender tulajdonságainak beállítása
Most már csak az aspx oldalt kell összedobnunk, és utána szólhat is rock&roll!
Húzzunk a formunkra, egymás alá 3 DropDownList-et és a nevek legyenek sorra: ddl_year, ddl_month, ddl_day. Szükségünk lesz egy UpdatePanel-re és benne egy Label-re. Húzzunk még az oldalra 3db CascadingDropDown Extender-t, majd váltsunk source nézetbe!
Az első CDD-t így állítsuk be:
Most már csak az aspx oldalt kell összedobnunk, és utána szólhat is rock&roll!
Húzzunk a formunkra, egymás alá 3 DropDownList-et és a nevek legyenek sorra: ddl_year, ddl_month, ddl_day. Szükségünk lesz egy UpdatePanel-re és benne egy Label-re. Húzzunk még az oldalra 3db CascadingDropDown Extender-t, majd váltsunk source nézetbe!
Az első CDD-t így állítsuk be:
<ajaxToolkit:CascadingDropDown ID="CDD_y" runat="server"
TargetControlID="ddl_year"
ServicePath="Get_Date.asmx"
ServiceMethod="Get_Years"
Category="Year"
PromptText="Kérlek, válassz évet…"
LoadingText="Adatok letöltése…">
</ajaxToolkit:CascadingDropDown>
TargetControlID="ddl_year"
ServicePath="Get_Date.asmx"
ServiceMethod="Get_Years"
Category="Year"
PromptText="Kérlek, válassz évet…"
LoadingText="Adatok letöltése…">
</ajaxToolkit:CascadingDropDown>
Az első 5 attribútum egyértelmű mire való, ezért csak az utána jövőket részletezem. A Category, a már oly sokszor említett kategóriát szabja meg (ez alapján tudjuk azonosítani melyik DDL-ből melyik értéket választotta ki a kliens).
A PromptText szöveg, akkor jelenik meg, amikor egyetlen elem sincs kiválasztva még! A LoadingText pedig akkor fog látszani, amikor éppen lekéri a szervertől a javascript az új listát.
A második CDD kódja:
A PromptText szöveg, akkor jelenik meg, amikor egyetlen elem sincs kiválasztva még! A LoadingText pedig akkor fog látszani, amikor éppen lekéri a szervertől a javascript az új listát.
A második CDD kódja:
<ajaxToolkit:CascadingDropDown ID="CCD_m" runat="server"
TargetControlID="ddl_month"
ServiceMethod="Get_Months"
Category="Month"
ParentControlID="ddl_year"
LoadingText="Adatok letöltése…"
PromptText="Kérlek, válassz hónapot…">
</ajaxToolkit:CascadingDropDown>
TargetControlID="ddl_month"
ServiceMethod="Get_Months"
Category="Month"
ParentControlID="ddl_year"
LoadingText="Adatok letöltése…"
PromptText="Kérlek, válassz hónapot…">
</ajaxToolkit:CascadingDropDown>
3 különbség van az előző CDD és e között. Az első, hogy nincs megadva ServicePath, ilyenkor az oldalon keresi a webmetódust (ScriptManager EnablePageMethods attribútuma alapban true). A második, a kategória itt Month-ra van állítva. A harmadik, bejött egy új attribútum, a ParentControlID. Ennél a tulajdonságnál tudjuk megadni a DDL függőségét.
Végül a harmadik kódja a teljesség kedvéért, magyarázat nélkül:
Végül a harmadik kódja a teljesség kedvéért, magyarázat nélkül:
<ajaxToolkit:CascadingDropDown ID="CCD_d" runat="server"
TargetControlID="ddl_day"
ServicePath="Get_Date.asmx"
ServiceMethod="Get_Days"
Category="Day"
ParentControlID="ddl_month"
PromptText="Kérlek, válassz napot…"
LoadingText="Adat letöltése…">
</ajaxToolkit:CascadingDropDown>
Egy-két okosság
Ha feliratkozunk valamelyik DDL valamelyik eseményére, akkor a kódunk nem fog mindaddig végre hajtódni, amíg az oldal EnabledEventValidation tulajdonságát false-ra nem állítjuk. (állítólag már dolgoznak ezen hiba orvoslásán).
A CascadingDropDown objektumnak a ParseKnownCategoryValuesString() metóduson kívül van még egy hasznos metódusa, a QuerySimpleCascadingDropDownDocument(). Ez a metódus automatikusan képes generálni a webmetódusok eredményt, de csak hierarchikus felépítésű szerkezetekből! (erről írtam már az elején, hogy egyetlen metódus generálja az összes DDL elemeit). A metódus négy paramétert vár. Az első egy XmlDocument objektum, mely forrásként szolgál. A második egy string gyűjtemény, mely leírja a fájl hierarchiáját. A harmadik egy StringDictionary objektum, melyből nyeri a history-t. Az utolsó paraméter pedig értelemszerűen a category paramétere a webservice-nek.
Bővebb infó erről az SDK-ban!
Még egy dologra szeretném felhívni a figyelmeteket, ez pedig nem más, mint egy Walkthrough, amiben leírják, hogyan kell használni a CDD-t adatbázissal. Íme a linkje:
http://asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/CCDWithDB.aspx
TargetControlID="ddl_day"
ServicePath="Get_Date.asmx"
ServiceMethod="Get_Days"
Category="Day"
ParentControlID="ddl_month"
PromptText="Kérlek, válassz napot…"
LoadingText="Adat letöltése…">
</ajaxToolkit:CascadingDropDown>
Egy-két okosság
Ha feliratkozunk valamelyik DDL valamelyik eseményére, akkor a kódunk nem fog mindaddig végre hajtódni, amíg az oldal EnabledEventValidation tulajdonságát false-ra nem állítjuk. (állítólag már dolgoznak ezen hiba orvoslásán).
A CascadingDropDown objektumnak a ParseKnownCategoryValuesString() metóduson kívül van még egy hasznos metódusa, a QuerySimpleCascadingDropDownDocument(). Ez a metódus automatikusan képes generálni a webmetódusok eredményt, de csak hierarchikus felépítésű szerkezetekből! (erről írtam már az elején, hogy egyetlen metódus generálja az összes DDL elemeit). A metódus négy paramétert vár. Az első egy XmlDocument objektum, mely forrásként szolgál. A második egy string gyűjtemény, mely leírja a fájl hierarchiáját. A harmadik egy StringDictionary objektum, melyből nyeri a history-t. Az utolsó paraméter pedig értelemszerűen a category paramétere a webservice-nek.
Bővebb infó erről az SDK-ban!
Még egy dologra szeretném felhívni a figyelmeteket, ez pedig nem más, mint egy Walkthrough, amiben leírják, hogyan kell használni a CDD-t adatbázissal. Íme a linkje:
http://asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/CCDWithDB.aspx
), azoknak mondom, azok egyik szervező szavaival élve: "ide nem kell winforms tudás, csak ész!".
). 
Nézzük is meg hogyan!
)! 
DOTNET érthetően... (főleg Silverlight) 