Bir mail ile gelen soru üzerine verdiğim cevabımı buraya da yazayım dedim. Az çok - istesek de istemesek de - asp.net uygulamarında javascript kodları ile haşır neşir oluyoruz.
Şimdi çok basit bir örnek ile giriş yapalım. Bir aspx sayfası bir button ve bir textbox. Button'a tıklağımızda textbox'a birşey yazsın istiyoruz.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function Yaz()
{
var txt = document.getElementById('txt');
txt.value = "BT Akademi";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="button" onclick="Yaz()" />
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</form>
</body>
</html>
Görüldüğü gibi zor bir tarafı yok daha önce ilgilenenler için. getElementById javascript fonksiyonuna butona tıklandığında içerisine "BT Akademi" yazmasını istediğimiz kontrolümüzün ( dikkat edin bu kontrol asp.net webserver kontrolü) ID'sini veriyoruz.Şimdi ise aynı olayı bir User Control içersinde gerçekleştirelim. Öncelikle çok basit bir user kontrol oluşturacağız ve bunu asp.net sayfamıza ekleyeceğiz. Bakalım neler oluyor.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucTest.ascx.cs" Inherits="ucTest" %>
<script type="text/javascript">
function Yaz()
{
var txt = document.getElementById('ucTxt');
txt.value = "BT Akademi";
}
</script>
<asp:TextBox ID="ucTxt" runat="server"></asp:TextBox>
<br />
<input id="ucBtn" type="button" value="Uc Tıkla" onclick="Yaz()" />
Dikkat ediniz. Yukardaki kodlar ucTest isimli user kontrolümüzün kodlarıdır.Bu user kontrolü asp.net sayfasına ekleyip sayfamızı çalıştırdığımızda hata alacağız. Nedeni ise: Javascipt kodumuza baktığımızda direk ucTxt yazdığımızı fark edeceksiniz. Bu user kontrol render edildiğinde html çıktısına bakacak olursak bizim ucTxt Textbox kontrolümüzün adının "UcTest1_ucTxt" şekline dönüştürüldüğünü yani ,ilk olarak user kontrolünün adı (UcTest1) , araya "_" eklenmiş ve sonra da kontrolün adı (ucTxt) eklenmiştir. Oysaki biz javascript kodunda kontrolümüzün adını "ucTxt" olarak belirtmiştik. Şimdi hatamızın kaynağını bulduk. Çözüm :
1- javascipt kodunu bu bilgiler ışığında şu şekilde güncelleyebiliriz.
var txt = document.getElementById('UcTest1_ucTxt');
Pek iyi bir fikir değil gibi. Çözüm müdür? Evet. Ama kontrolümüzün ismi değiştiğinde gidip js kodları ile de oynamak gerekiyor.
2- En iyisi biz bu oluşacak yeni ismi küçük bir kod ile asp.net ten alalım ve js kodumuz ile bir daha hiç uğraşmayalım...user kontrol eklendiğinde
ilgili kontrolün ismini hiç düşünmeyelim ve kendisinden alalım. İşte asp.net webserver kontrolümüzün ClientID özelliği sayfa render edildikten sonra kontrolün clientdaki id sini bize verecektir.Son olarak js kodunu aşağıdaki gibi değiştirirsek sorun hallolacaktır.
<script type="text/javascript">
function Yaz()
{
var txt = document.getElementById('<%=ucTxt.ClientID %>');
txt.value = "BT Akademi";
}
</script>
Örnek uygulamayı indirebilirsiniz
WebSite4.zip (2,34 KB)