Készítsünk most egy olyan nyomógombot, melyet bármely web lapra feltéve egyszerűen megjeleníthetünk vele egy kis üzenet ablakot a kliens oldalon, szerverünk közreműködése nélkül. Az üzenet ablak fejlécét és az üzenet szövegét csak be kell írnunk az új kontrolunk megfelelő property-jébe és a többit rábízhatjuk: ha a felhasználó kattint rajta, akkor jön az üzenet ablak.
Ezt az üzenet ablakot egy kis javascript-tel indítjuk el, mely az alert függvényt hívja. Ez a függvény megjelenít a felhasználó gépén egy szabványos Windows dialóg ablakot, melyben az általunk megadott szöveg kerül megjelenítésre. Mivel mindez a kliens oldalán történik, így arra figyeljünk oda, hogy az üzenetünk szövegét már a web oldal generálásakor meg kell fogalmaznunk, mert a gombra történő kattintáskor az üzenet megjelenik anélkül, hogy szerverünk újabb kérést kapna.
A gombra történő kattintáskor az üzenet megjelenítésén kívül természetesen lehetőségünk van arra is, hogy a szerverünk felé újabb kérést küldjünk. Hogy a javascript az alert hívásán kívül mit tesz, az nyilván csak az adott feladattól függ.
Nézzük hát, hogyan készül egy ilyen új nyomógomb kontrol.
A projekthez hozzáadunk egy Web Custom Control-t a Project - Add new item menüpont kiválasztásakor megjelenő ablakon keresztül.
Ebbe felveszünk két új property-t Text és Message névvel. Mindkettő sztring típusú lesz. A Text property-ben a nyomógombon megjelenő felirat adható meg, míg a Message property-be írt szöveg jelenik meg az üzenet ablakban.
A Render függvényben kell legenerálnunk a kontrol HTML kódját, mely nem más, mint egy <input type=submit...> típusú HTML elem lesz.
A gombhoz rögtön hozzárendelünk egy onclick eseménykezelőt, mely most egy javascript meghívása lesz, mely doClick névvel szerepel.
protected override void Render(HtmlTextWriter output)
{
RenderBeginTag(output);
StringBuilder sb = new StringBuilder();
sb.Append("<input type=\"submit\" value=\"");
sb.Append(text);
sb.Append("\" onclick=\"javascript:doClick(\'");
sb.Append(message);
sb.Append("\');\"/>");
output.Write(sb.ToString());
RenderEndTag(output);
}
Ettől kezdve már meg is jelenne a nyomógombunk, de ha rákattintanánk, akkor hibaüzenetet kapnánk és nem azt az üzenetet, melyet elképzeltünk. Ennek oka, hogy a doClick javascript még nem került erre a web oldalra. Hogy ezt se kelljen manuálisan beilleszteni azon HTML oldalakra, melyeken ilyen nyomógombot használunk, helyeztessük el inkább ezt is programból.
Az OnPreRender függvényt felülírva és a Page osztály RegisterClientScriptBlock függvényét használva erre is lehetőségünk nyílik. Összeállítunk egy script-et, mely doClick néven fut és meghívja az alert függvényt. Ezt követően a RegisterClientScriptBlock függvénnyel elhelyeztetjük ezt a generálandó HTML oldalon. E függvény első paraméterében egy tetszőleges nevet kell adnunk, mely lehet akár a script függvényének neve is, másodikként pedig magát a scriptet kell megadnunk sztringként. Ennek hatására azokon az oldalakon, ahol használjuk ezt a nyomógombot a doClick script is rendelkezésre fog állni.
protected override void OnPreRender (EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("<script language=\"javascript\">\n");
sb.Append(" function doClick(message)\n");
sb.Append(" {\n");
sb.Append(" alert(message);\n");
sb.Append(" }\n");
sb.Append("</script>");
Page.RegisterClientScriptBlock("doClick", sb.ToString());
}
Felmerülhet a kérdés, hogy mi a helyzet akkor, ha nem csak egy ilyen nyomógombot helyezünk a web oldalra, akkor vajon a script is több példányban bekerült a HTML kódba? Erre a válasz nem. A doClick script csak egyszer kerül bele a HTML kódba több gomb esetén is, mivel a RegisterClientScriptBlock függvény első paraméterében mindig ugyanaz a név szerepel, így a függvény intelligens módon mindig csak egy példányt helyez el a web oldalunkon.