Makale Özeti

Merhaba arkadaşlar, bu makalemiz de ASP.NET 4.0 ile birlikte gelecek olan ClientIDMode özelliğini inceliyor olacağız...

Makale

ASP.NET de kontroller render edildikten sonra bir ID değeri alıyor ve bu ID değeri tüm kontroller için benzersiz oluyor. Bu yüzden, eğer kontrol UserControl yada MasterPage içerisindeyse kontrol'ün ID'si UserControlAdi_KontrolAdi şeklinde uzun bir isme sahip oluyor. Bu şekilde özellikle istemci taraflı geliştirme yaparkan(Javascript, JQuery vs.) bu kontrollere erişmek çok zor oluyor ve uygulamayı geliştiren kişinin geliştirme süresini uzatıyordu.

ASP.NET 4.0 Öncesi ve Read-Only ClientID Özelliği

Aslında ASP.NET içerisinde her kontrolün ClientID isimli read-only bir propertysi var. Bu property ile kontrolün alacağı ID’ye erişebiliyoruz. Fakat kontrolü bir user control içerisine taşırsak WebUserControl1_lblClientID gibi bir ClientID’ye sahip oluyor. Bu da istemci tarafında yapılan işlemi ve süreci etkiler, yapılan işlemin hatalı olmasına neden olur. Çünkü eğer harici bir dosya içinde İstemci taraflı işlemler yapılıyorsa orada da ilgili değişikliğin yapılması gerekir.

ASP.NET 4.0 Öncesi ClientID Özelliği
Response.Write(KonrolAdi.ClientID);
KonrolAdi.ClientID = “Atanamaz”; // => Read only bir özellik, atama yapılamaz !

ASP.NET 4.0 Yaklaşımı ve ClientIDMode Özelliği

İstemci taraflı geliştirmenin web uygulamalı içerisinde kullanımın artmasıyla birlikte bu sorunu aşmak için ASP.NET 4.0 ile birlikte kontrollere ClientIDMode isimli bir özellik eklendi. Bu özellik kontrol render edildikten sonra kontrolün alacağı ClientID değerinin istediğimiz gibi atanmasını sağlıyor. Yani ClientID’nin değeri eskiden olduğu gibi uzunca bir değer olabilir, bizim vereceğimiz her hangi bir değer olabilir ya da kontrol’ün ID’si ile aynı olabilir.

ClientIDMode özelliğinin alabileceği 4 özellik var. Bunlar Legacy (varsayılan değer), Inherit, Static, Predictable.

Legacy
ClientIDMode’un default değeridir. Eğer ClientIDMode özelliğine Legacy’i enum’u set edilmişse kontrolün alacağı ID değeri önceki sürümlerde olduğu gibidir. Yani uzunca bir ClientID oluşur :)

Örnek Kullanımı
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label ID="lblSample" ClientID="lblSample" ClientIDMode="Legacy" runat="server" Text="Deneme"></asp:Label>
</asp:Content>

Html Çıktısı
<span id="ctl00ctl00_ContentPlaceHolder1_lblSample">Deneme</span>

Inherit
Her kontrol için default davranış gösterir. İçerisinde yer aldığı parent kontrolün ClientIDMode property’si ne olarak belirlenmişse, kontrol içinde o özellik atanır. Örneğin bir User Control ve içinde bir Label var. User Control’ün ClientIDMode özelliği static ise içerisinde yer alan kontrolün özelliği de static olarak belirlenir.

Örnek Kullanımı

MasterPage
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ClientIDMode="Static"> </asp:ContentPlaceHolder>

Content
<asp:Label ID=" lblSample" ClientID="lblInheritSample" ClientIDMode="Inherit" runat="server" Text="Deneme"></asp:Label>

Html Çıktısı
<span id="lblInheritSample">Deneme</span> // Parent Kontrolün(Content) ClientIDMode özelliği static olduğu için içteki kontrolünde ClientIDMode özelliği static olarak atandı…

Static
Bu mod seçildiğinde, kontrolün ClientID’ne ne atamışsak oluşacak olan HTML çıktısına da o değer atanır. Burada dikkat edilmesi gereken şey, ClientID’nin benzersiz olduğundan emin olmak zorundayız. Yani elimizde 2 User Control var. Her ikisi içinde de bir label olduğunu düşünürsek iki label’ın CleintID’si farklı olması gerekir. Eğer ikisi de aynı olursa, client site de yapacağımız işlemler de yanlış sonuçlar alabiliriz. Özellikle de databound kontrollerinden kullanmamak gerekir

Örnek Kullanımı
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label ID=" lblSample" ClientID=”lblClientSample" ClientIDMode="Static" runat="server" Text="Deneme"></asp:Label>
</asp:Content>

Html Çıktısı
<span id=" lblClientSample">Deneme</span>

Predictable
Bu özellik, Gridview, Repeater gibi DataBound kontroller için daha kullanışlıdır. Burada işe yarayacak bir diğer property de RowClientIDSuffix özelliğidir. Bu özellik ile DataBound kontrolünün kolonu içerisinde yer alan kontrolün ClientID’nin değerinin sonuna takı olarak belirttiğimiz alanın değeri eklenir.

Örnek Kullanımı
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ClientIDMode="Predictable" RowClientIDSuffix="UrunAdi"> // RowClientIDSuffix özelliğine veri kaynağından gelen bir alan yazmak zorundayız. Birden fazla kontrol için yapacaksak alanları virgül ile ayırabiliriz.
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblUrunAdi" runat="server" Text='<%# Eval("UrunAdi") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Html Çıktısı
<table cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;">
<tr><th scope="col">&nbsp;</th></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_lblUrunAdi_Kalem">Kalem</span>
</td></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_lblUrunAdi_Defter">Defter</span>
</td></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_lblUrunAdi_Silgi">Silgi</span>
</td></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_lblUrunAdi_Dosya Kağıdı">Dosya Kağıdı</span>
</td></tr>
</table> 

Eğer ClientIDMode özelliğini Predictable yapmasaydık,
<table cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;">
<tr><th scope="col">&nbsp;</th></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblUrunAdi">Kalem</span>
</td></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_lblUrunAdi">Defter</span>
</td></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_lblUrunAdi">Silgi</span>
</td></tr><tr><td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_lblUrunAdi">Dosya Kağıdı</span>
</td></tr>
</table>

Makalenin sonuna geldik, başka bir makalede görüşmek üzere. ASP.NET ile kalın ;)

Sem GÖKSU
www.semgoksu.com  | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com 
Kaynaklar
msdn.com