C# - Üzenetablakot megjelenítő nyomógomb készítése ASP.NET-es weboldalhoz

forráskód letöltése
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.