C# - UpDown TextBox web kontrol készítése

forráskód letöltése
Készítünk egy olyan web kontrolt, mely két kis gomb segítségével növeli, illetve csökkenti a TextBox-ba írt számot. Ezt a növelést, csökkentést két kis javascript-el oldja meg, melyet automatikusan elhelyez a generálandó web oldalon a kontrol. Ennek előnye, hogy a két kis gombra történő kattintás a kliensnél lesz lekezelve és nem lesz postback a szerverünk felé.
Mellékelt példa megnyitása előtt szükséges egy UpDown nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A web kontrolunk három gyerek kontrolt tartalmaz. Egy TextBox-ot, melyen keresztül a kérdéses szám megadható. Két Image kontrolt, melyen két kis kép segítségével megjeleníthető egy felfelé és lefelé mutató nyíl, mint két kis gomb. E képekre történő kattintásnál vihető végbe a TextBox-ba írt szám növelése, csökkentése.
A gyerek kontrolok létrehozását a CreateChildControls függvényre bízzuk.
Elsőként a TextBox-ot hozzuk létre, melynek egy egyedi azonosítót kell adnunk. Ehhez a tb_ sztringet és a kontrol UniqueID property-jét használjuk fel, mely biztosítja, hogy akárhány kontrolt is teszünk a web lapra, a TextBox azonosítója mindig egyedi marad.
    protected override void CreateChildControls()
    {
      tb = new TextBox();
      tb.ID = "tb_"+UniqueID;
      ...
      Controls.Add(tb);
A kép létrehozásánál megadjuk az Up.gif, illetve a Down.gif állományokat, melyekben kis nyomógombok képeit helyeztük el.
Szükségünk lesz még az onclick esemény kezelésére is. Ehhez egy új attribútumot adunk hozzá. Onclick esetén meghívjuk a doUp, illetve a doDown nevű javascript függvények egyikét. Paraméterként átadva annak a TextBox-nak az egyedi azonosítóját, mely az adott kontrolhoz tartozik. Erre azért lesz szükségünk, mert több kontrol elhelyezése esetén is csak egy doUp és egy doDown függvény lesz, de ezeknek bármelyik TextBox-ot kezelniük kell.
      System.Web.UI.WebControls.Image i1 = new System.Web.UI.WebControls.Image();
      i1.ImageUrl = "up.gif";
      i1.Attributes.Add("onclick", "doUp(tb_"+UniqueID+")");
      ...
      Controls.Add(i1);
      System.Web.UI.WebControls.Image i2 = new System.Web.UI.WebControls.Image();
      i2.ImageUrl = "down.gif";
      i2.Attributes.Add("onclick", "doDown(tb_"+UniqueID+")");
      ...
      Controls.Add(i2);
    }
Hozzuk most létre a doUp és doDown javascript-eket.
Ezeket az OnInit függvényben készítjük el.
    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);
      if (Page != null)
      {
        StringBuilder sb1 = new StringBuilder();
        sb1.Append("<script language=\"javascript\">\n");
        sb1.Append("function doUp(obj)\n");
        sb1.Append("{\n");
A script paramétereként kapott TextBox-ba írt szöveget konvertáljuk számmá a parseInt függvény felhasználásával, majd növeljük ennek értékét eggyel és az eredményt ismét a TextBox-ba írjuk.
        sb1.Append("  obj.value = parseInt(obj.value, 10) + 1;\n");
        sb1.Append("  obj.focus();\n");
        sb1.Append("}\n");
        sb1.Append("</script>");
Az elkészült script-et a RegisterClientScriptBlock függvény hívásával helyezzük el a web oldalon. E függvény első paramétereként egy tetszőleges azonosítót adunk, másodikként pedig a script szövegét. A függvény biztosítja azt, hogy több kontrol használata esetén is csak egy példányban kerüljön a web lapra a script. Teszi ezt úgy, hogy ellenőrzi, hogy az itt első paraméterként megadott azonosító létezik-e már vagy még sem.
        Page.RegisterClientScriptBlock("doUp", sb1.ToString());
        ...
      }
    }