Makale Özeti

Herkese merhabalar, bu makalemizde asp.net içerisindeki Client Callback’i inceleyeceğiz...

Makale

Client Callbacks

Normal web sayfalarının çalışma modelinde, kullanıcı bir bilgiyi değiştirmek istediğin de postback sonucunda sayfanın yeni halini görüyor. Yani herhangi bir yerden sunucuya istek gelir, sunucu kodu çalıştırır istek sonucunu sayfaya yollar. Sonuç olarak, sayfa ve kontroller yeniden oluşturulur. Ancak bazı durumlarda performans açısından postbak işlemi gerçekleşmeden, istemci üzerinden sunucudaki kodu çalıştırmak gerekir. İşte bu noktada devreye client callback giriyor.

Client Callback, sayfayı postback etmeye gerek kalmadan client-side javascript kodu ile server-side bir metodu çalıştırmamızı sağlar. Arka planda server-side kodu çalıştırmak için XMLHTTP nesnesini kullanır. XmlHttp, HTTP protokolünü kullanarak internet üzerinden verileri almamızı sağlar. Aşağıdaki kod belirtilen sitedeki HTML kodları almamızı sağlıyor;

function RetrieveGoogleFrontPage() {
   var XmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
   XmlHttp.Open("GET", "http://www.semgoksu.com", false);
   XmlHttp.Send();
   return XmlHttp.responseText;
}

Şekil 1: Client callback çalışması;

Client Callback’de bizim için en önemli kavram IcallbackEventHandler interface’dir. Bu interface’i sayfamıza uyguladığımızda bize GetCallbackEvent ve RaiseCallbackEvent metodlarını kullanmamiz gerektigini söyluyor... RaiseCallbackEvent string türünde değer alan bir metodtur. Bu string değer client’deki veriyi sunucuya taşıyacak değerdir. GetCallBackEvent da geriye string döndürecek olan bir fonksiyondur. Bu fonksiyon sunucudaki değeri istemciye taşıyacaktır.

Not: RaiseCallbackEvent ne yazıkki Sadece string veri taşıyabiliyoruz...

ClinetCallback Script’in ne olduğunu ve önemli yapıtaşlarını inceledikten sonra şimdi bir örnek uygulama yapalım. Örneğimizde bir arama sayfası yapacağız. Kullanıcı arayacağı değeri arama alanına girecek ve sonuçlar sayfa da refresh işlemi gerçekleşmeden görüntülenecek.

Yeni bir ASP.NET projesi oluşturalım ve sayfamıza bir input text ve input button ekleyelim.

İlk olarak sayfamıza IcallbackEventHandler interface’ni uygulamalıyız.

public partial class LearningClientCallBacks : System.Web.UI.Page, IcallbackEventHandler

//Şimdi arama sonucunu listeleyeceğimiz bir string bir fonksiyon yazalım. String yazmamızın nedeni taşınacak verinin içeriği sadece string tipindedir
private string GetProducts(string Firstname)
{
string connectionString = "Server=localhost;Database=AdventureWorks;Trusted_Connection=true";
SqlConnection myConnection = new SqlConnection(connectionString);
string query = "SELECT Firstname,LastName,EmailAddress FROM Person.Contact WHERE Firstname like '%"+Firstname+"%'";
SqlCommand myCommand = new SqlCommand(query, myConnection);
SqlDataAdapter ad = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet();
ad.Fill(ds);
// Yeni bir gridview için instance aliyoruz. Ve datasource’ni be adını belirtiyoruz...
GridView gv = new GridView();
gv.ID = "Contacts";
gv.DataSource = ds;
gv.DataBind();
// Gridview’i render edip stringe çeviriyoruz çünkü taşınan veri...
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
gv.RenderControl(htw);
return sw.ToString();
}

// Şimdide yukarıda oluşturulan veriyi taşıyoruz..

public string GetCallbackResult()
{
    return GetProducts(TasinacakDeger);
}  

protected string TasinacakDeger;

public void RaiseCallbackEvent(string metodunStringParametresi)
{
    TasinacakDeger = metodunStringParametresi;

protected void Page_Load(object sender, EventArgs e)

// Burada istemci için gerekli olan scriptler sayfaya eklenecek.  
string sbReference = ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
string cbScript = "function CallServer(arg,context) { " + sbReference + "}";
ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", cbScript, true);

}

}tyle='text-align:left'>}

Şimdi de HTML tarafına göz atalım;

<body>
<form id="form1" runat="server">
Firstname giriniz:
<input type="text" id="firstname" name="firstname" />
<
input type="button" value="Submit" onclick="GetContactByfirstname()" id="Button1" />
<
br />
<
br />
<
div id="MyDiv" runat="server">
<
br />
</
div>
</
form>
</body>
</html> 

//Sayfamızda görüntülenecek olan designi belirledik... Şimdi de istemci tarafındaki fonksiyonlarımızı yazalım.

<script language ="javascript" type>

// Arama işlemini görüntülemek için kullanılacak olan istemci fonksiyonu...

function GetContactByfirstname()
{
    firstname = document.getElementById("firstname").value;
    CallServer(firstname);

// myDiv isimli divin içine Render edilen gridview’in içeriğini HTML olarak yazacak....

function ReceiveServerData(rValue)
{
    document.getElementById("myDiv").innerHTML = rValue;
}
</script>

Geriye yapmamız gereken tek şey projemizi çalıştırmak... Arama kriterini girmek ve sonucu beklemek (:

Şimdi aramak için bir şeyler girelim;

Gerçekten de refresh olmadan veriler geldi (: Birgün bunu ASP.NET AJAX (hazır tool'lar ile) olmadan da yapabileceğimi biliyordum...

Bu makalemizinde de sonuna geldik. Teşekkür eder iyi çalışmalar dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz
semgoksu@semgoksu.com

Kaynaklar
www.codeproject.com