Cumartesi, Nisan 16, 2011

ASP .Net RegisterStartupScript() ve RegisterClientScriptBlock() arasındaki fark

ASP .net ile javascript fonksiyonlarını tetikleyebileceğimiz metodlardan ikisi RegisterStartupScript() ve RegisterClientScriptBlock(). Bu yazıda bunların nasıl kullanıldığından ziyade aralarındaki farktan bahsedeceğim.

Ben server tarafında gerçekleşen bir olaydan sonra uyarı verdirmek için RegisterClientScriptBlock() kullanırdım. Lakin bir gün uyarı verdirmekten daha fazlasına ihtiyaç duydum. Mesela jQuery kullanarak sayfa içindeki bir elementin içeriğini değiştirmek gibi.

RegisterClientScriptBlock() kullanarak sayfadaki html elementlere erişmeyi başaramadım. Çünkü bu metod sayfadaki html elementleri render edilmeden çalışıyormuş.

Google da kısa bir aramadan sonra istediğimi yapmak için kullanmam gereken RegisterStartupScript() metodunu keşfettim.

Sayfanın Page_Load olayına aşağıdaki kodları eklediğimizde önce "Register Client Script Block" daha sonra "Register Startup Script" mesajlarını alırız.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ClientScript.RegisterStartupScript(this.GetType(), "Mesaj1", "<script type='text/javascript'>alert('Register Startup Script')</script>");
ClientScript.RegisterClientScriptBlock(this.GetType(), "Mesaj2", "<script type='text/javascript'>alert('Register Client Script Block')</script>");
}
}


Şimdi de her iki metodu kullanarak sayfa içindeki html elementine erişip içeriğini değiştirmeyi deniyelim. Kodlar aşağıdaki şekilde.

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function icerikDegistir(icerik) {
var myDiv = document.getElementById("mesaj");
if (myDiv != null) {
myDiv.innerHTML = icerik;
}
else {
alert("Element bulunamadı");
}
}
</script>
</head>
<body>

<form id="form1" runat="server">
<div>
<asp:Button ID="btnScriptBlock" runat="server" Text="Script Block"
onclick="btnScriptBlock_Click" />
<asp:Button ID="btnStartupScript" runat="server" Text="Startup Script"
onclick="btnStartupScript_Click" />
<div id="mesaj"></div>
</div>
</form>
</body>
</html>


Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnScriptBlock_Click(object sender, EventArgs e)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "ScriptBlock", "<script type='text/javascript'>icerikDegistir('Register Client Script Block')</script>");
}
protected void btnStartupScript_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "StartupScript", "<script type='text/javascript'>icerikDegistir('Register Startup Script')</script>");
}
}










İlk resimde Script Block butonuna tıkladım ve "Element bulunamadı" şeklinde uyarı aldım. Ve resimde farkettiyseniz henüz butonlar görünmüyor. İkinci resimde ise Startup Script butonuna tıkladıktan sonra divin içeriğinin istediğim şekilde değiştiğini görüyoruz.

Bu yazınında sonuna geldik. Faydalı olması dileği ile kolay gelsin...

2 yorum:

Adsız dedi ki...

güzel açıklamışsın kardeş

Adsız dedi ki...

Ben işin daha araştırma kısmında iken yazınızla karşılaştım. Zaman kazanmamı sağladınız. Çok teşekkürler :)