daryaL

Ajax, uzun adıyla Asynchronous Java****** and XML, Java****** ve XMLHttpRequest’leri birarada kullanarak etkileşimli Web siteleri yaratmak için üretilmiş bir tekniğin adıdır.

Ajax, aslında tek başına yeni bir teknoloji değildir, varolan birçok web teknolojisinin birbirine entegre edilmiş halidir.

Ajax’dan önce bir web sayfasında herhangi bir ServerSide işlem yapıldığında bütün sayfa sunucudan istenirdi, Ajax’dan sonra ise sadece formun ilgili kısmının sunucudan istenilmesi sağlandı. Bu tekniğin getirdiği büyük artılardan biri hızın artması bir diğeri ise kullanıcı ile etkileşimin artmasıdır.

Asp.Net platformu Ajax’ı uzunca bir süredir desteklemektedir. Bu makalemizde Asp.Net kullanarak Ajax konusuna bir giriş yapacağız. Öncelikle bilgisayarınızda Visual Studio 2008 (http://www.microsoft.com/express adresinden indirebilirsiniz) veya Visual Studio 2005 ile beraber Ajax kütüphanesini ve kontrol kitini indirmelisiniz (http://www.asp.net/ajax/downloads adresinden indirebilirsiniz).

Şimdi Asp.Net kullanarak Ajax konusuna bir giriş yapalım. Visual Web Developer’ı açalım ve file menüsünden New Project’e tıklayalım. Gelen menüden Asp.Net Website’ı seçelim ve sitemize bir isim verelim, örneğin “AjaxTest”.

Asp.Net’de Ajax içeren her sayfada Script Manager adı verilen bir Control kullanmamız gerekir. Bu Control’ü eklemek için açılan Default.aspx sayfasında Design’a tıklayalım. Toolbox’dan “Ajax Extension”’ı seçelim ve buradan da Script Manager Control’ünü sayfamıza sürükleyip bırakalım.

Şimdi de sayfamıza yine Toolbox’daki “Ajax Extensions” bölümünden iki adet Update Panel Kontrolünü sürükleyip bırakalım. Şu ana kadar sayfamızda Ajax kullanmak için gerekli bütün kontrolleri eklemiş olduk.

Daha sonra sayfamıza iki adet label ekleyelim. Bunun için Toolbox’dan label’ı sürükleyip Update Panel1’in üstüne bırakmamız yeterli. İkinci label’ı da Update Panel2’nin üzerine bıraktıktan sonra ToolBox’dan bu defa iki adet Button ekleyelim. Buttonlardan birine sağ tıklayalım ve Properties’i seçelim, Text özelliğine “Bir” yazalım, ikinci Button içinde aynı işlemi yapıp Text özelliğine “İki” yazalım. Bu Button’ları Update Panellerin dışında bir yere eklememiz gerekmekte.

Update Panel1’in üzerine gelip sağ tıklayalım ve açılan menüde Triggers’daki açılan menüye tıklayalım. Açılan pencerede Add’e tıklayalım. Sağ tarafta ControlId’ye tıklayalım ve açılan menüden Button1’i seçelim. Aynı işlemi bir kez de Update Panel2 için tekrarlayalım ama bu defa Button2’yi seçelim. Her iki durumda da Event Name’ “Click” olarak seçmeliyiz. Ayrıca her panel için Update Mode’u Conditional seçmeliyiz.

Tekrar Designer’a geri dönelim ve Button1 ve Button2’ye çift tıklayalım. Bu sayede her ikisi içinde “Click” eventini üretmiş olduk. Bundan sonra kodumuzu aşağıdak şekilde değiştirelim.

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        ZamanGoster();

    }

    protected void Button2_Click(object sender, EventArgs e)

    {

        ZamanGoster();

    }

    private void ZamanGoster()
    {
        Label1.Text = DateTime.Now.ToLongTimeString();

        Label2.Text = DateTime.Now.ToLongTimeString();

    }

}

Burada hangi Button’a basılırsa basılsın iki label’ın da değerini değiştiriyoruz. Programı çalıştırdığınız zaman basılan düğme hangi Update Panel’de bir event’i tetikliyorsa ancak o panelin içindeki label’ın değerinin değiştiğini göreceksiniz. İşte Ajax bu şekilde işliyor, sayfanızın bir kısmı durağan iken diğer bir kısmında istediğiniz gibi değişiklik yapabiliyorsunuz.

Bu makalede Asp.Net ile Ajax uygulamarına bir giriş yapmış olduk. Daha sonraki yazılarda bu konu üzerine eğilmeye devam edeceğiz.