21 Ocak 2013 Pazartesi

Javascript ve C#'ı birlikte kullanmak

   Web programlama ile uğraşırken zaman zaman istemci ve sunucu işlemlerini bir arada yapmak isteyebiliriz. Örneğin sunucu tarafından javascript ile client-side işlemler yapmak veya javascript üzerinde sunucu kontrol ve değişkenlerine erişmek gibi.

Aslında ASP.NET sunucu kontrollerinin bir HTML karşılığı vardır. Örneğin Label sunucu kontrolü html tarafında span etiketine karşılık gelir. Bu yüzden ASP.NET kontrollerinde HTML olayları veya özelliklerini kullanabilirsiniz. Örneğin bir buton üzerinden gidelim. Butonda OnClientClick="test()" diyerek istemci tarafında tıklama olunca mesaj vermek istiyorum.

<script>
   function test(){
       alert("İstemci tarafında tıkladın.");
}
</script>

<asp:Button ID="Button1" onclick="Button1_Click" OnClientClick="test()" runat="server" Text="Button" />

Yukarıdaki kodu sayfanıza ekleyip çalıştırdıktan sonra butona tıklanınca tarayıcı "İstemci tarafında tıkladın." yazan bir pencere açacaktır. Sunucu tarafı da çalışacak orada da sayfaya "Sunucu tarafında tıkladın" yazacaktır.

protected void Button1_Click(object sender, EventArgs e)

        {
            Response.Write("Sunucu tarafında tıkladın");
        }

Tıklama haricinde başka bir olay daha ekleyelim. Fare üzerine gelince "fare üzerine geldi." şeklinde bir mesaj versin.

<script>
   function fareUzerineGeldi() {
          alert("Fare üzerine geldi.");
      }
</script>


<asp:Button ID="Button1" onmouseover="fareUzerineGeldi()" OnClientClick="test()" runat="server" 
Text="Button" onclick="Button1_Click" />


Butonun üzerine farenizi getirdiğinizde "Fare üzerine geldi." diyerek bir mesajla karşılaşıyorsunuz. HTML tarafında aşağıdaki forma dönüşmektedir.

 <input type="submit" name="Button1" value="Button" onclick="test();" id="Button1" onmouseover="fareUzerineGeldi()" />

Şimdi bir de C# tarafına göz atalım. Sunucudan javascript fonksiyonlarını nasıl çalıştırabiliriz. Aşağıdaki kodlara bir göz atalım.

protected void Button1_Click(object sender, EventArgs e) { ClientScript.RegisterClientScriptBlock(this.GetType(), "mesaj", "<script>alert('Merhaba')</script>"); }

Burada sunucu tarafından javascipt kodlarını ekleyerek çalıştırdık.