C# - Felhasználói web kontrol készítése

forráskód letöltése
Amikor készítünk egy Windows alkalmazáshoz egy új, saját kontrolt vagy komponenst, akkor ezt általában azért tesszük, mert vagy egy programon belül több helyen szeretnénk felhasználni ugyanazt funkcióval rendelkező objektumot, vagy több alkalmazásunkban is szükségünk van rá.
Ilyen helyzet könnyen előfordulhat webes alkalmazás fejlesztéskor is. Ekkor lehetőségünk van új web kontrol készítésére is, melynek módja azonban különbözik a Windows-os alkalmazásoknál megszokott kontrolok készítéséhez képest.
Legyen a feladatunk a következő: készítsünk egy olyan kontrolt, mely képes két szám bekérésére TextBox-okon keresztül, majd elvégezi e két szám összeadását és megjeleníti az eredményt.
A kontrol elkészülte után már csak annyi lesz a teendőnk a felhasználásához, hogy a web lapra húzzuk Drag and Drop-al annyi példányban ahányra csak szükségünk van. Látható tehát, hogy a kontrol létrehozásával a későbbi munkánk folyamán jelentős időt takaríthatunk meg.
Egy projekthez úgy adhatunk hozzá egy új kontrolt, ha a File - Add new item menüpont kiválasztása után megjelenő ablakban a WebUserControl elemet választjuk. Ekkor alapértelmezésben létrejön egy WebUserControl1.ascx nevű állomány, mely a kontrolunk alapja lesz és amelyre tekinthetünk úgy is mintha egy hagyományos web lap lenne egy ASPX-es oldalon, csak most ebből egy olyan kontrol készül, amelyet majd beilleszthetünk egy tetszőleges web lapra.
Helyezzük a szükséges vezérlőket az új kontrol területén és rendeljük a Button-hoz az alábbi kódot annak Click eseményéhez:
    private void Button1_Click(object sender, System.EventArgs e)
    {
      try
      {
        Label3.Text = (Convert.ToInt32(TextBox1.Text) + Convert.ToInt32(TextBox2.Text)).ToString();
      }
      catch
      {
        Label3.Text = "?";
      }
    }
Ezzel a kontrolunk el is készült. Most térjünk át a web lapunkra, a WebForm1.aspx-re. Itt elhelyezünk két Panel-t, melynek méretét akkorára állítjuk, amekkora a kontrolunk. Erre persze nincs feltétlenül szükségünk, de így látni fogjuk, hogy mekkora helyre is lesz szüksége a kontrolnak majd futási időben, na meg így egyszerűen tudjuk szabályozni, hogy a kontrol hol jelenjen meg.
Most mind a két Panel-re egy-egy új kontrolt helyezünk. Ehhez válasszuk ki a Solution Explorer-ben WebUserControl1.ascx elemet, majd fogjuk meg és Drag and Drop-al húzzuk a Panel kontrolra.
Futtassuk a programot.
Amint látható nem is volt nehéz feladat, de nézzük meg mi is történt a színfalak mögött.
A WebForm1.aspx lapnál ha átváltunk a HTML nézetre, akkor látható az alábbi sor:
<%@ Register TagPrefix="uc1" TagName="WebUserControl1" Src="WebUserControl1.ascx" %>
Itt tehát megtörténik egy hivatkozás az újonnan létrehozott web kontrolunkra, melyhez az uc1 címke kerül automatikusan hozzárendelésre.
Ha megnézzük milyen kód került a Panel kontrolnál a HTML kódba, akkor meg is értjük miért is kellett a fenti hivatkozás:
      <asp:Panel id="Panel1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 24px" runat="server" Height="160px" Width="272px">
        <uc1:WebUserControl1 id="WebUserControl11" runat="server"></uc1:WebUserControl1>
      </asp:Panel>
Megfigyelhető tehát, hogy egy <uc1:WebUserControl1> címke kerül beszúrásra azon a helyen, ahol az új kontrolt szeretnénk megjeleníteni.
Az kontrolunk meglehetősen egyszerű, de kezdetnek megfelel. Természetesen a webes kontrolok esetén is létrehozhatunk új property-ket, eseményeket, függvényeket, bármit amire szükségünk lehet.