ASP.NET Custom Server Control

ASP.Net ile web uygulamalarımız geliştirirken kimi zaman kontrollerin çalışma şekillerini
değiştirmek isteyebiliriz. Kontrollü biraz daha özelleştirmek isteyebiliriz. Bu işlemi kontrolü sayfamızın üstüne attıktan sonra sayfamızın koduna eklemeler yaparak gerçekleştirebiliriz. Ama peki başka bir sayfada daha aynı kontrolü kullanacaksak ne yapacağız. Böyle bir durumda kodları ilk sayfamızdan diğerine kopyalamamız gerekecek. Bu sorunu da böyle hallettikten sonra kontrolümüzü bir çok sayfada kullandık. Peki kontrolümüzün bir özelliğinde değişiklik yapacaksak ne olacak? Eklediğimiz bütün kodları teker teker değiştireceğiz. Daha sonra iş arkadaşınız kendi uygulamasında aynı özelleşmiş kontrolü kullanmak istediğinde ona kontrolün arkasına yazdığımız kodları göndermemiz
gerekecek. İşte bu ve buna benzer sorunlardan kurtulmak için kendi ASP.Net Server Kontrollerimizi yazarız.

Bu makalede uygularımızda kullanabilmek için Sayısal Textbox kontrolü oluşturucağım. Sayısal karakterlerin tesbitinde javascript kullanacağım için, javascript bilginiz olması bir avantaj olacaktır. Amacımız custom kontrolleri oluşturmayı anlamak olduğu için çok ayrıntılı bir kontrol yazmayacağım, ama siz bu başlangıcın üzerine eklemeler yaparak istediğiniz hale getirebilirsiniz. Bu konuda karşınıza çıkacak sorunlarda yardımcı olmaya çalışırım.

Öncelikle Visual Studio’da bir web uygulaması açalım. Daha sonra solution’a bir tane ASP.NET Server Control Projesi ekleyelim (Ben NumericTextbox adını verdim.) Kontrolümüzün adını da ServerControl1’den NumText’e değiştirdim.

Kontrolümüzün class dosyasını açtığımızda class’ımızın WebControl class’ından türediğini
görebiliriz. Ama ben burada TextBox’ın özelleşmiş bir halini kullanacağım için ve TextBox
kontrolünün birçok özelliğini kullanacağım için sınıfımı TextBox class’ından türeteceğim. Bu nedenler WebControl yerine TextBox yazıyoruz. Ayrıca class’ımıza bir adet property eklendiğini ve bu property’nin de default olarak atandığını görebiliriz. Ama biz bu propertyleri Textbox’dan alacağımız için DefaultProperty attribute’unu ve Text property’sini siliyoruz.

Class’ımızın hemen üstünde bulunan

[ToolboxData(“<{0}:NumText runat=server></{0}:NumText>”)]

attribute’u ise kontrolü sayfamıza attığımız da markup kodunda kontrolümüzün kodunun nasıl gözükeceğini belirtir. {0} yerine istediğimiz bir prefix yazabiliriz. Şimdilik biz bu şekilde bırakıp işleri ASP.Net’e bırakıyoruz.

Artık biraz kod yazma vakti geldi sanırım. Öncelikle bastığımız karakterleri kontrol edecek
javascript kodumuzu yazalım. Javascript kodu ile ilgili işlemleri RegisterJavaScript fonksiyonu ile yapıyoruz.

        private void RegisterJavaScript()
{
string script = @”
<SCRIPT language=’javascript’>
function GetNumeric(obj,event)
{
var unicode=event.charCode? event.charCode : event.keyCode;
innerText=obj.value;
if((unicode >= 48 && unicode <= 57) || // 0-9
(unicode >= 37 && unicode <= 40) || // yukarı,aşağı,sağ,sol
unicode == 8 || // backspace
unicode == 46)
{
event.returnValue=true;
}
else if(unicode==9)
{
event.returnValue=true;
}
else
event.returnValue=false;

}
</SCRIPT>”;
script += “\n<SCRIPT language=’javascript’>\n”;
script += “function NumericTextBoxOnKeyDown(obj,event){\n”;
script += “GetNumeric(obj,event);\n”;
script += “}\n”;
script += “</SCRIPT>\n”;
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), “NumericTextBox”))
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), “NumericTextBox”,

script);
}
}

Bu fonksiyonda basılan karakter sayısal tuşler ise ya da yön tuşları ise işleme alan değilse almayan bir script yazdık. Daha sonra da bu script’i sayfamıza ekleyen kodu yazdık. Klavye’de basılan tuşları masaüstü uygulamarında rahatça takip edebiliriz ama Asp.Net kontrollerindebu işlemleri Web de yapmamızı sağlayacak Client eventleri yok. Bu yüzden kontrolün Render metodunu override edip, içinde keydown olayını kontrolümüze eklememiz gerekir.

        protected override void Render(HtmlTextWriter writer)
{
Attributes.Add(“onkeydown”, “NumericTextBoxOnKeyDown(this,event)”);
base.Render(writer);
}

Bir şeyi dikkatinizi çekmiştir. NumericTextBoxOnKeyDown javascript fonksiyonunu kullanmamıza rağmen sayfamıza henüz eklemedik. Bunun için ise OnPreRender metodunu override edeceğiz ve RegisterJavaScript fonksiyonunu çağıracağız.

    protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
RegisterJavaScript();
}

Solution’ın tamamımını derledikten sonra web uygulamamızda bir sayfa açalım. Toolbox’a baktığımızda kontrolümüzün en üst kısımda eklendiğini görebiliriz. Kontrolü sayfamıza atalım ve uygulamamızı çalıştıralım. Gördüğümüz gibi artık içine sadece sayıları girebildiğimiz bir kontrolümüz oldu.

Şimdi de kontrolümüze bir property ekleyelim. Bu property kontrole kaç tane sayı girilebileceğini belirlesin. Böylece uygulama geliştiriciye design time’da kaç tane sayı girilebileceğini belirtme şansı vermiş oluruz.

        private int _KacSayi = 10;
public int KacSayi
{
get
{
return _KacSayi;
}
set
{
_KacSayi = value;
}
}

Bu property’i ekledikten sonra RegisterJavaScript fonksiyonunu biraz değiştirmemiz gerekli. GetNumeric javascript fonksiyonunu aşağıdaki hale getiriyoruz.

          function GetNumeric(obj,event)
{

var unicode=event.charCode? event.charCode : event.keyCode;
innerText=obj.value;
if(innerText.length < “+ KacSayi + @” )
{
if((unicode >= 48 && unicode <= 57) || // 0-9
(unicode >= 37 && unicode <= 40) || // yukarı,aşağı,sağ,sol
unicode == 8 || // backspace
unicode == 46)
{
event.returnValue=true;
}
else if(unicode==9)
{
event.returnValue=true;
}
else
event.returnValue=false;
}
else
{
event.returnValue=false;
}

}

Tekrar rebuild all ettikten sonra, sayfamızda kontrolümüze sağ tıklayıp özelliklerine baktığımızda eklediğimiz property’nin özellikler penceresine geldiğini görürüz.

Böylece kendi özelleşmiş kontrolümüzü yazmış oluyoruz. Yeni client side olaylar, property’ler ve fonksyisonlar ekleyerek çok daha güzel bir hale getirebilirsiniz. Gerisi ihtiyaçlarınıza ve hayal gücünüze kalmış.

Leave a Reply

Your email address will not be published. Required fields are marked *