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.