Mar142010

ASP.NET 4.0 ve ClientIDMode

Cavusoglu tarafindan 07:20 tarihinde ASP.NET | Visual Studio kategorisine eklenmistir.

Geçmiş bir eğitim ve danışmanlık sürecinde bir katılımcı şöyle bir soru sormuştu. "Hocam bu ASP.NET üzerinde sistemin otomatik ürettiği nesnelerde Client tarafında Javascript ile çalışırken çok zorlanıyoruz çünkü hiç düzgün isimler vermiyor". ("ctl00_ContentPlaceHolder1_ProductRepeater_ctl01_AddBasket")

Bu sorun özellikle DataBinding ile tekrarlayan itemlar oluşturan data nesnelerinde ("Repeater", "DataList" vs.. ) karşımıza çıkmaktadır. Visual Studio 2010 ve ASP.NET 4.0 sürecine geldiğimizde bunun bir çözümü var.

İşte ASP.NET 4.0 yeniliklerden biride ClientIDMode propertysi. Nesneyi Server tarafında tanımlarken artık Client tarafındaki ismini belirleyebileceksiniz.

Bu noktada karşımıza ClientIDMode propertysi çıkmaktadır. Bu propertyi için 4 adet seçenek bulunmaktadır. Aşağıdaki kod üzerinde ClientIDMode özelliğini değiştirerek snuçları gözlemlediğimizde;

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
    <%#Eval("Adi") %> , <%#Eval("Soyadi") %> <asp:Button ID="SecButton" runat="server" Text="Seç" ClientIDMode="AutoID" /> <br />
    </ItemTemplate>
    </asp:Repeater> 

 

Değer 

Açıklama 

 AutoID

Bu değer seçildiği durumda Controller Parent nesneden başlayarak ve aralara _ ekleyerek son noktada CTLXX ifadesi ile kaçıncı olduğunu gösterir ifade ve ardından Server ID eklenerek Client ID üretilmektedir.

<input type="submit" name="Repeater1$ctl00$SecButton" value="Seç" id="Repeater1_ctl00_SecButton" />

<input type="submit" name="Repeater1$ctl01$SecButton" value="Seç" id="Repeater1_ctl01_SecButton" />

Bir web sayfası için bu değer varsayılandır. Controller için varsayılan değer ise inherit seçeneğidir. Controllerde miras yolu ile web sayfası için varsayılan olan bu AutoID seçeneğini almış olurlar.

 Static

Bu değer seçildiği durumda, Controle ait Server ID değeri Client ID olarakta karşımıza çıkmaktadır. Bu noktada özellikle otomatik oluşan itemlarda tekrar eden nesnelerin aynı isimle tekrar ettiğine dikkat edelim.

<input type="submit" name="Repeater1$ctl00$SecButton" value="Seç" id="SecButton" />
<input type="submit" name="Repeater1$ctl01$SecButton" value="Seç" id="SecButton" />

Yukarıda da gördüğümüz gibi id propertyleri static seçiminden dolayı aynı isimle tekrar edilmiştir. Javascript ile yapacağınız müdahale her iki butonuda etkileyecektir. Bununla birlikte ayırdedicilik özelliğinide kaybetmiştir.

 Predictable

 Bu değer seçildiği durumda Client ID oluşmasında 2 durum karşımıza çıkmaktadır.

1. Herhangi bir ek tanımla ve müdahale olmadığı taktirde

<input type="submit" name="Repeater1$ctl00$SecButton" value="Seç" id="Repeater1_SecButton_0" />

<input type="submit" name="Repeater1$ctl01$SecButton" value="Seç" id="Repeater1_SecButton_1" />

Yukarıda da gördüğümüz gibi ParentControl _Kontrol_ArtanSayı şeklinde bir yapı oluşmaktadır. Okunurluğu ve kullanımı kolaydır.

2. IDataBoundListControl arayüzünden türemiş olan ListView ve GridView gibi nesnelerde ClientIDRowSuffix isminde bir özellik bulunmaktadır. Bu Özellik ClientID belirlemede son aşama olan ArtanSayının yerine kullanılacak olan değeri ifade etmektedir. Bu tanımlamanın data kaynağından gelmesi gerektiğini unutmayalım.

Mesela : Veri kaynağımızın aşağıdaki gibi bir class'a dayanan bir List olduğunu düşünürsek

 public class Kisi
    {
        public string Adi { get; set; }
        public string Soyadi { get; set; }
    }

 List<Kisi> kisiler = new List<Kisi>() {new Kisi(){Adi="Resul",Soyadi="Cavusoglu"},new Kisi(){Adi="Mehmet",Soyadi="Ahmedov"} };

<asp:ListView ID="ListView1" runat="server" ClientIDRowSuffix="Adi">
    <ItemTemplate>
    <%#Eval("Adi")%> <br />
        <asp:Button runat="server" ID="SecButton" Text="Button" ClientIDMode="Predictable" />
    </ItemTemplate>
       
    </asp:ListView>

 

Client tarafında sonuc aşağıdaki gibi olacaktır. ID ait son aşamanın Adi veri alanından geldiğine dikkatinizi çekmek isterim.

<input type="submit" name="ListView1$ctrl0$SecButton" value="Button" id="ListView1_SecButton_Resul" />

 <input type="submit" name="ListView1$ctrl1$SecButton" value="Button" id="ListView1_SecButton_Mehmet" />

 

 Inherit  Bu değer seçildiği durumda, Control bu property ait değeri Parent durumdaki controlden miras alır. Bu değer aksi belirtilmediği durumlarda varsayılan değerdir.

Güzel günlerde kullanmanız dileğiyle.



[KickIt] [Dzone] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Etiketler: , ,

E-Posta | Permalink | Geri izlemeler | Yazi RSSRSS comment feed 0 Yorum