MasterPage kullanımda kontrollerin ID mevzusu

Asp.Net de sayfamıza eklediğimiz her kontrolün bir id si bulunuyor. Javascript ile kontrollerimize erişmek istediğimizde bu id leri direk kullanabiliyoruz. Eğer masterpage kullanırsak işler biraz değişiyor. Sayfamız masterpage den türediği zaman kontrollerin idlerine bir ön ek geliyor. Bunu kod tarafında göremesekte sayfa yorumlandıktan sonra kaynak kodlarına baktığımızda id lerin değiştiğini görüyoruz. Haliyle jquery ile ilgili id deki elemanı seçmemiz için kod tarafında ki id değil, kullanıcı (client) tarafında ki id yi kullanmamız gerekiyor. Bu durumda İki şekilde problemimizi çözebiliyoruz. Birinci çözüm yolu kontrollerin ClientID özelliğini kullanmak. <%=kontrol.ClientID%> dediğimizde geriye dönen id bizim kontrolümüzün sayfa yorumlandıktan sonra oluşan değerdir. Fakat bu yöntemi .js sayfamızda kullanmamız söz konusu değil bu sebepten direk .js içerisine html de oluşan id yi yazarak kullanabiliyoruz. Şöylede bir durum var hiç uğraşmadan kontrollerimize class atayıp yukarıdaki olaylara bulaşmadan direk class adını yazarak seçip istediğimiz işlemleri aynen yapabiliriz. Burada ki tek nüans id yakalama performansı class a göre daha iyi fakat bunu küçük işlerde görmemiz çok zor ;) Neyse umarım konu anlaşılmıştır. Aşağıda bir örnek bulunuyor, dilerseniz çalışan halini buradan indirebilirsiniz.

    <script type="text/javascript">
        jQuery(function($) {
            $("#<%=date.ClientID %>").mask("99/99/9999");
            $("#<%=phone.ClientID %>").mask("(999) 999-9999");
            $("#ctl00_ContentPlaceHolder1_tin").mask("99-9999999");
            $("#ctl00_ContentPlaceHolder1_ssn").mask("999-99-9999");
        });
    </script>

http://Websitesi meryem

bu paylaşımınız için gerçekten teşekkürler.. işime çok yaradı.. günlerdir bu konuyla uğraşıyorum.. jquery ve javascripte tam olarak hakim olamadığımdan ne gibi değişiklikler yapabileceğimi bilmiyordum.. asp.nette maalesef bir çok özellik eksikliği olduğu için ancak javascript kodlarıyla bu görsellikleri katabiliyoruz.. benim bu projem üniversite bitirme tezim, bu yüzünden çok önemliydi… bundan dolayı tekrardan teşekkürler kolay gelsin..
http://Websitesi mustafa çoban

Evet, sorun bu şekilde aşılabiliyor. Ek olarak harici bir js dosyasından bu kontrollere ulaşmak isterseniz aspx sayfadaki script bloğu içinde nesne ID’lerini js variable olarak tanımlayıp (var obj = “#”;) haricen sayfaya eklediğiniz js dosyasından bu kontrollere erişebilirsiniz. (Ör: $(obj).css(“color”, “#f00”); gibi…) Aslında bu sorunun .NET 4.0 ‘da ClientIDMode ile daha pratik bir şekilde çözüldüğünü duymuştum ama henüz inceleme fırsatım olmadı.
http://Websitesi mustafa çoban

önceki yorumumda aşağıdaki satır temizlenmiş tekrar ekliyorum:) (var obj = “#<%= date.ClientID %>”;)
http://taylan.somee.com taylan

peki şöyle birşey olsa sayfa hem masterpage’den türetilmiş hemde içinde multiview kontroller var, sayfaya ilk gelen istekte gösterilen view içeriğinde tek bir buton var başka birşey yok, butona tıklayınca asıl içerik var, o zaman head bölümüne yazılan bu kod sayfanın ilk isteğinde hata verecektir onu nasıl aşarız.
http://tugberkugurlu.com/ Tugberk

Mustafa Çoban’ın da belirttiği gibi üsteki yorumda .net freamework 4, web controllerine yeni bir ClientIDMode adında yeni bir property ekledi. Konu ile ilgili makaleyi http://www.tugberkugurlu.com/50 linkinde bulabilirsiniz.
murat

merhaba benim bir sorunum var.Butonum var bunu css ile renlendiriyorum.güzelleştiriyorum.Desing sayfasında css tanıyıp istediğim gibi oluyor,fakat sayfası çalıştırdığım zaman css özellikleri kayboluyor.Sebebini araştıdığım zaman masterpage içindeki butonum çevrilirken ContentPlaceHolder1 ekinin gelmediğinden sanırım css özelliğini almıyor.Yani kısacası ben sayfayı çalıştırdığım zaman öğeyi denetle dediğimde benim butonum id=”ctl00_ButtonUyeOl” şeklinde oluşuruyor.Halbu ki mastermage kullandığım için id=”ctl00_ContentPlaceHolder_ButtonUyeOl” oluşması gerekiyor ama oluşmuyor.ID’yi class çevirdiğim zaman sorun yok fakat ID olduğu zaman cssim çalışmıyor.Bu sorunun çözümünü bilen var mı?

Bunu paylaş: