Oğuz Yağmur'un Günlüğü

July 22, 2007

@ 02:45 AM

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.

Örnek uygulamayı indirebilirsiniz WebSite4.zip (2,34 KB)

Categories: Asp.net | Code | Inceleme

« Yazılımcıyız ? | Home | Scott Hanselman ve Yeni "İşi" »

Sunday, July 22, 2007 5:07:31 PM (GTB Daylight Time, UTC+03:00)

rendering sırasında çıkacak hatalara güzel ve kolay bir örnekle çözüm

ismail tutumluer | ismail dot tutumluerAT NOSPAMgmail dot comt

Sunday, November 01, 2009 3:14:24 AM (GTB Standard Time, UTC+02:00)

Thanks for article. Everytime like to read you.

ugg boots | siliAT NOSPAM163 dot com

Friday, November 06, 2009 3:42:41 AM (GTB Standard Time, UTC+02:00)

Do you want to buy some sheepskin boots, please come to www.findugg.com.Full range of UGG boots for Men and Women to buy online. Fast and free shipping to worldwide, competitive price, high quality, and efficient service.

Read more:http://www.findugg.com

findugg | finduggAT NOSPAMsina dot com