 |
ASP,NET bizlere, kendi server kontrollerimizi oluşturmak, ya da varolan kontrolleri genişletmek için kolay bir yapı sunmaktadır. Tüm ASP.NET kontrolleri System.Web.UI.Control yada System.Web.UI.WebControls.WebControl sınıflarından türemiştir. Aralarındaki fark; Control sınıfından türeyen sınıflar, sadece temel .NET bileşeni özelliklerine sahip olurlar (Visual Studio Toolbox’ a eklenme, property ve event’ lerinin Properties penceresinde gözükmesi gibi). WebControl sınıfından türeyen sınıflarımız ise, bunların yanında temel HTML stil özelliklerine sahip olurlar. Font, Forecolor, Height, Width gibi.
Kendi web kontrollerimizi oluşturmak için bir class library oluşturup (referansına System.Web eklememiz gerekecektir), yazacağımız sınıfları WebControl’den türetmemiz, daha sonra class library’ imizin referansını web projemize vermemiz yeterli olacaktır. Referans verdikten sonra oluşturduğumuz kontroller Toolbox ‘ a eklenmiş olur. Kontrolleri burdan sayfamıza sürükle bırakla taşıyabiliriz.
|
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyWebControls
{
public class MyMarquee : WebControl
{
private string kayanYazi;
public string KayanYazi
{
get { return kayanYazi; }
set { kayanYazi = value; }
}
protected override void Render(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.RenderBeginTag(HtmlTextWriterTag.Marquee);
writer.Write(KayanYazi);
writer.RenderEndTag();
}
}
}
|
Yukarıda WebControl’ den türettiğimiz sınıf, sayfamıza bir Kayan Yazı kontrolü eklemektedir. WebControl sınıfının Render isimli metodu kontrolümüzün render aşamasında, gerekli özelliklerinin HtmlTextWriter stream sınıfının yardımıyla client lara (browser) iletilmesini sağlar.
Burada dikkat edilmesi gereken en önemli nokta, bir tag içersinde bulunması gereken özellikler HtmlTextWriter’ a o tagdan önce yazılır. Bir başka ifadeyle, HtmlTextWriter’ a yazılan özellikler kendilerini takip eden ilk tag içerisine render edilirler.
WebControl base sınıfının AddAttributesToRender isimli metodu, WebControl sınıfı ile birlikte gelen temel HTML stil özelliklerinin render edilmesini sağlar. Bu özellikleri kontrolümüzün Properties penceresinden dizayn sırasında değiştirebiliriz. HtmlTextWriter stream’ inin RenderBeginTag isimli metodu ise kendisine verilen HTML tag’ ının render’ını gerçekleştirir. ASPNET motoru burada istemci tarayacısının tipine göre render işlemi gerçekleştirir. Write metodu ile de tag arasına yazılması gerekenler yazıldıktan sonra RenderEndTag metodu ile en son açılan tag kapanmış olur.
Bu kontrolümüze dizayn modunda bir kaç özellik verdikten sonra tarayıcımızda oluşan kaynak kodu aşağıdaki gibidir.
|
<div>
<marquee id="MyMarquee1" style="color:Red;font-weight:bold;">
İlk Web Kontrolüm
</marquee>
</div>
|
Buradaki div tagları TagKey property sinin override edilmemesi sonucu varsayılan olarak oluşturulmuştur. Biz kontrolümüzü oluştururken TagKey property sini override ederek Marquee tagının dönmesini sağlayabiliriz. Daha sonra RenderContents metodunu override ederek Marquee tagları arasına yazılması gerekenleri yazdırabiliriz. Ayrıca özellik eklemek istersek AddAttributesToRender metodunu override ederiz. Tabi bu metodun en başında HTML stil özelliklerinin uygulanması için base sınıfını çağırmayı unutmamız gerekir. Web Kontrolü oluşturulurken genelde bu yöntem kullanılmaktadır. Kodu aşağıdaki gibidir.
|
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyWebControls
{
public class MyMarqueeBasic : WebControl
{
private string kayanYazi;
public string KayanYazi
{
get { return kayanYazi; }
set { kayanYazi = value; }
}
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Marquee;
}
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write(KayanYazi);
}
}
}
|
Bu kodun ürettiği tarayıcı kaynak kodu aşağıdaki gibi olacaktır. Gerekli özellikler dizayn tarafında verilmiştir.
|
<marquee id="MyMarqueeBasic1" style="color:Teal;">
Basic Marquee
</marquee>
|
Diğer örneklerimize geçmeden küçük bir not. Aspx sayfamızın HTML kodunda assembly ‘nin TagPrefix’ ini değiştirerek, kontrollerimize istediğimiz ismi verebiliriz.
|
<%@ Register Assembly="MyWebControls"
Namespace="MyWebControls" TagPrefix="bta" %>
<bta:MyMarquee ID="MyMarquee1" runat="server"
ForeColor="Red" KayanYazi="Ylk Web Kontrolüm" Font-Bold="True"/>
|
Kendi Kontrollerimizde PostBack EventHandler
Buraya kadar, oluşturduğumuz bir kontrole render işleminin nasıl uygulandığını gördük. Şimdi yapacağımız iki örnekle birlikte kendi kontrollerimizdeki postback uygulaması üzerinde duralım.
|
public class MyBasicButton : WebControl, IPostBackEventHandler
{
private string text;
public string Text
{
get { return text; }
set { text = value; }
}
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Input;
}
}
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueID);
writer.AddAttribute(HtmlTextWriterAttribute.Type, "Submit");
writer.AddAttribute(HtmlTextWriterAttribute.Value, this.Text);
}
public event EventHandler Tikla;
public void RaisePostBackEvent(string eventArgument)
{
if (Tikla != null)
Tikla(this, EventArgs.Empty);
}
}
|
Yukarıdaki kod örneğimizde kendi butonumuzu yaratıyoruz. TagKey property ‘ sine HTML Input tagını set ettikten sonra AddAttributesToRender metodu ile ilk önce temel HTML stillerimizi base sınıfından çağırarak ekliyoruz. Daha sonra HTML Input tagını “Submit” butonu yapmak için gerekli attribute ‘ ları HtmlTextWriter sınıfının AddAttribute metodu yardımıyla ekliyoruz. Type özelliğine “Submit”, Value özelliğine de buton üzerinde görünecek yazıyı ekliyoruz. Name özelliğine de UniqueID property si yardımıyla unique bir isim veriyoruz. Name özelliğine UniqueID vermemiz postback mekanizması için gerekli. Eğer bu özelliği vermezsek, post edilen data koleksiyonuna erişelemez, dolayısla postback eventi tetiklenmez.
Buton kontrolü (HTML Submit Input) kendi kendine postback yapabilen bir nesne olduğu için ayrıca postback yaptıracak attribute eklememize gerek yoktur. Ama eğer herhangi bir kontrole postback attribute u eklemek isteseydik aşağıdaki kodu AddAttributesToRender metoduna eklememiz yeterli olacaktı.
|
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,
Page.GetPostBackEventReference(this, "Previous"));
|
Bu kod satırı Input tagının OnClick attribute ‘ına aspnet motoru tarafından otomatik olarak üretilen __doPostBack javascript fonksiyonunun referansını verir. İlerde bu özelliği iki butondan oluşan bir kontrol yaptığımızda hangi butona tıklandığını ayırt etmek için kullanacaz.
Yarattığımız bir kontrolün postback yönetimini yapmamız için kontrolümüzü IPostBackEventHandler arayüzünden türetmemiz gerekmektedir. PostBack edildiğinde tetiklenecek eventimizi tanımladıktan sonra ise RaisePostBackEvent metodunu implemente ederek eventimizin tetiklenmesini sağlarız.
Yukarıda oluşturduğumuz EventHandler yönetimi, her sayfaya bağlanan kullanıcı için bu buton adına ayrı birer EventHandler nesnesi oluşturmuş olur. Bu durum performans kaybına yol açar. EventHandler yönetimimizi aşağıdaki örnekteki gibi yaparsak tüm kullanıcılar için tek bir EventHandler delegate’ i oluşturmuş oluruz. Tercih edilen yöntem bu şekildedir.
|
public void RaisePostBackEvent(string eventArgument)
{
EventHandler d = (EventHandler)Events[EventClickedKey];
if (d != null)
d(this, EventArgs.Empty);
}
public event EventHandler Tikla
{
add{Events.AddHandler(EventClickedKey, value);}
remove{Events.RemoveHandler(EventClickedKey, value);}
}
private static readonly object EventClickedKey = new object();
|
Oluşturduğumuz buton kontrolunu sayfamıza koyduktan sonra, Tikla eventinin kontrolumuzun Property penceresinde oluştuğunu göreceğiz.
Şimdi iki butondan oluşan bir kontrol yaparak öğrendiklerimizi pekiştirelim.
|
public class MyPreviousNextButton : WebControl, IPostBackEventHandler
{
private string previousText;
public string PreviousText
{
get { return previousText; }
set { previousText = value; }
}
private string nextText;
public string NextText
{
get { return nextText; }
set { nextText = value; }
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,
Page.GetPostBackEventReference(this, "Previous"));
writer.AddAttribute("language", "javascript");
writer.RenderBeginTag(HtmlTextWriterTag.Button);
writer.Write(this.PreviousText);
writer.RenderEndTag();
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,
Page.GetPostBackEventReference(this, "Next"));
writer.AddAttribute("language", "javascript");
writer.RenderBeginTag(HtmlTextWriterTag.Button);
writer.Write(this.NextText);
writer.RenderEndTag();
}
#region IPostBackEventHandler Members
public void RaisePostBackEvent(string eventArgument)
{
EventHandler d;
if (eventArgument == "Next")
d = (EventHandler)Events[EventNextClickedKey];
else
d = (EventHandler)Events[EventPreviousClickedKey];
if (d != null)
d(this, EventArgs.Empty);
}
public event EventHandler ClickNext
{
add{Events.AddHandler(EventNextClickedKey, value);}
remove{Events.RemoveHandler(EventNextClickedKey, value);}
}
public event EventHandler ClickPrevious
{
add{Events.AddHandler(EventPreviousClickedKey, value);}
remove{Events.RemoveHandler(EventPreviousClickedKey, value);}
}
private static readonly object EventPreviousClickedKey = new object();
private static readonly object EventNextClickedKey = new object();
#endregion
}
|
İki butondan oluşan bu kontrol için ilk önce iki adet text property si ekledik. Tek bir kontrol olmayacağı için TagKey ve AddAttributesToRender metotları yerine tüm render işlemini RenderContents metodu içinde yapıyoruz. Burda ilk önce butonların attribute ‘larını yazdırıp, daha sonra bu attribute ‘ların ekleneceği buton tagını oluşturuyoruz. Postback attribute ‘ını set ederken verdiğimiz “Previous” ve “Next” özelliklerini ise ilerde event tetiklerken kullandığımız RaisePostBackEvent metodunda eventArgument stringi olarak geri alıyoruz. İki buton olduğundan iki event, her event için de iki readonly key oluşturup, RaisePostBackEvent metodunda gelen eventArgument parametresine göre ilgili eventin tetiklenmesini gerçekleştiriyoruz.
Kendi Kontrollerimizde Kullanıcı Tarafından Girilen Datayı Post Edebilmek
Son örneğimizde kullanıcı tarafından girilen datanın post edilmesini sağlamak amacıyla bir textbox oluşturup, text özelliğinin değişimi ile bir eventin tetiklenmesini gerçekleştirecez. Burda unutmamamız gereken bir nokta, text değerinin ilk halini kaybetmemek için bu değeri ViewState ‘den okumamız gerektiğidir. örnek kod aşağıdaki gibidir.
|
public class MyTextBox : WebControl, IPostBackDataHandler
{
public string Text
{
get
{
if (ViewState["Text"] == null)
{
return "";
}
else
{
return (string)ViewState["Text"];
}
}
set
{
ViewState["Text"] = value;
}
}
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Input;
}
}
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueID);
writer.AddAttribute(HtmlTextWriterAttribute.Type, "Text");
writer.AddAttribute(HtmlTextWriterAttribute.Value, this.Text);
}
#region IPostBackDataHandler Members
public bool LoadPostData(string postDataKey,
System.Collections.Specialized.NameValueCollection postCollection)
{
string oldVal = Text;
string newVal = postCollection[this.UniqueID];
if (!oldVal.Equals(newVal))
{
this.Text = newVal;
return true; // true olduğu RaisePostDataChangedEvent çalışır
}
return false;
}
public void RaisePostDataChangedEvent()
{
EventHandler d = (EventHandler)Events[TextChangedKey];
if (d != null)
d(this, EventArgs.Empty);
}
public event EventHandler TextChanged
{
add { Events.AddHandler(TextChangedKey, value); }
remove { Events.RemoveHandler(TextChangedKey, value); }
}
private static readonly object TextChangedKey = new object();
#endregion
}
|
Text property sini kaybetmemek için ViewState’den okumanın yanında bir diğer önemli konu Input tagımızın Name özelliğime UniqueID atamayı unutmamak gerekir. Eğer bu değer verilmez ise post edilen data koleksiyonuna erişilemez. Datamızı post edebilmek için sınıfımızı IPostBackDataHandler sınıfından türetmemiz gerekir. Bu sınıfın iki önemli metodu vardır. LoadPostData metodu ve RaisePostDataChangedEvent metodu.
LoadPostData metodu ile post edilen datanın alımı gerçekleşir. Yukarda kullandığımız UniqueID property si ile bu sefer postCollection koleksiyonundan post edilen datayı elde ederiz. ViewState ‘den de eski değeri okuyup datanın değişip değişmediğine göre hareket ederiz. Burdaki önemli nokta, eğer LoadPostData metodu true dönerse aspnet motoru tarafından RaisePostDataChangedEvent metodu çalıştırılır. false dönerse ise çalıştırılmaz. RaisePostDataChangedEvent metodu içersinde de daha önceki örneklerimizdeki yöntemle ilgili event tetikleme işlemi yapılmaktadır. Biz de eğer datalar farklı ise true, aynı ise false dönerek TextChanged eventinin yönetimini yaparız.
Bugünkü makalemde, sizlere ASP.NET server kontrolü oluşturma konusunda temel bilgileri vermeye çalıştım. Bir sonraki makalemde görüşmek üzere hepinize iyi çalışmalar dilerim.
Makalede anlatılan uygulamayı indirmek için tıklayın.
Kaynak : csharpnedir.com
|
 |
