19 Mar 2009 ASP.NET 4.0 – Kontroller için ClientIDMode Özelliği Kategori: ASP.NET Etiketler: ASP.NETASP.NET 4.0 3 Yorum Merhaba arkadaşlar, bu makalemiz de ASP.NET 4.0 ile birlikte gelecek olan ClientIDMode özelliğini inceliyor olacağız...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ğiAslı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ğiResponse.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.LegacyClientIDMode’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 MasterPage ve Content sayfası var. Content sayfanın içinde de bir Label var. Master Page içerisindeki ContentPlaceHolder'ın ClientIDMode özelliği static ise Content sayfa içerisinde yer alan kontrolün özelliği de static olarak belirlenir.Örnek Kullanımı Master Page<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ı…StaticBu 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>PredictableBu ö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"> </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"> </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 Kaynaklarmsdn.com Yorum (3) Hüseyin Yıldırım / 10.11.2010 01:42:06 Siteye manşet uygulaması yapıyordum ve bu sorun beni çok yormuştu. Makalenizi okuduktan sonra olayı çözdüm. Teşekkür ederim. Hüseyin Yıldırım / 10.11.2010 02:06:54 Bu özelliği div de kullanmaya çalıştım. clientid sini yazmaya gerek yok. uğraşan arkadaşlar clientid sini girmeye çalışmasın diye :) Ahmet Remzi EKMEKÇİ / 1.4.2011 10:20:53 Makale için teşekkürlerler. Yorum Yaz * Ad Soyad: * Email: * Message:
Yorum (3) Hüseyin Yıldırım / 10.11.2010 01:42:06 Siteye manşet uygulaması yapıyordum ve bu sorun beni çok yormuştu. Makalenizi okuduktan sonra olayı çözdüm. Teşekkür ederim. Hüseyin Yıldırım / 10.11.2010 02:06:54 Bu özelliği div de kullanmaya çalıştım. clientid sini yazmaya gerek yok. uğraşan arkadaşlar clientid sini girmeye çalışmasın diye :) Ahmet Remzi EKMEKÇİ / 1.4.2011 10:20:53 Makale için teşekkürlerler.
Hüseyin Yıldırım / 10.11.2010 01:42:06 Siteye manşet uygulaması yapıyordum ve bu sorun beni çok yormuştu. Makalenizi okuduktan sonra olayı çözdüm. Teşekkür ederim.
Hüseyin Yıldırım / 10.11.2010 02:06:54 Bu özelliği div de kullanmaya çalıştım. clientid sini yazmaya gerek yok. uğraşan arkadaşlar clientid sini girmeye çalışmasın diye :)