Makale Özeti

DataGrid'in paging işlemini AJAX ile nasıl yapabileceğimizi, sayfa postback olmadan datagrid içeriğini nasıl değiştirebileceğimizi görelim.

Makale

    Merhabalar, AJAX (Asynchronous JavaScript language and XML) in ne olduğundan, nasıl bir teknoloji içerdiğinden daha önce bahsetmiş, hatta, çoklu dropdownlist, Google Suggest Box ve Tic Tac Toe oyununun nasıl yapışacağını incelemiştik.Bu makalede de projelerimizde sık sık kullandığımız DataGrid'in paging işlemini AJAX ile nasıl yapabileceğimizi, sayfa postback olmadan datagrid içeriğini nasıl değiştirebileceğimizi görelim.

    Öncelikle, bir datagride ve bu DataGridi dolduracak bir DataSource, DataAdapter vs. ye ihtiyacımız var. Hepimizin bildiği şekilde DataGrid'e, DataSet'i bind edeceğiz. DataGrid'in AllowPaging propertisini True yaparak sayfalanmasını sağlayacağız. Buraya kadarki işlem tüm uygulamalarımızda yaptığımız basit paging işlemidir.

    Şimdi ise, çözmemiz gereken bir kac sorunumuz var. Öncelikle, DataGrid pager'ı ister numaralardan oluşsun, ister  < > lerden, tıklandığında mutlaka postback olacaktır. Fakat bizim isteğimiz AJAX kullanımı ve postback olmaması. Öyleyse yapmamız gereken iki sey var. Birincisi, DataGridin kendi pager'ını kaldırmak, ikincisi ise, sayfaları değiştirebilmek için AJAX ile çalışacak olan kendi pager'ımızı koymak.

    Bunu şu şekilde yapacağız :

public void PagerDegistir(System.Web.UI.WebControls.DataGridItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Pager)
        {
            TableCell pager = (TableCell)e.Item.Controls[0];
            pager.Controls.RemoveAt(0);
            pager.Controls.RemoveAt(1);
            // boylece  < > işaretlerini kaldirmiş olduk. Şimdi kendi back ve next butonlarimizi koyalim.
 
 
            //back butonu..
            string ScriptRef = this.ClientScript.GetCallbackEventReference(
                          this, "'back' + document.getElementById('SayfaNo').innerHTML", "OnCallback", "'back'", "OnCallback", true);
            Image backButton = new Image();
            backButton.ImageUrl = "images/leftbluearrow.gif";
            backButton.Attributes.Add("OnClick", ScriptRef);
 
            //next butonu...
            ScriptRef = this.ClientScript.GetCallbackEventReference(
                        this, "'next' + document.getElementById('SayfaNo').innerHTML", "OnCallback", "'next'", "OnCallback", true);
            Image nextButton = new Image();
            nextButton.ImageUrl = "images/rightbluearrow.gif";
            nextButton.Attributes.Add("OnClick", ScriptRef);
 
            Label lblSayfa = new Label();
            lblSayfa.Text = " Gecerli Sayfa : <span id='SayfaNo'>" + dg.CurrentPageIndex.ToString() + "</span>";
 
 
            pager.Controls.AddAt(0, backButton);
            pager.Controls.AddAt(2, nextButton);
            pager.Controls.AddAt(1, lblSayfa);
 
 
        }
    }

    Gördüğünüz gibi, öncelikle var olan pagerlari Remove ettik, sonra ise, kendi back, next butonlarımızı (imaj olarak) ve gecerli sayfa numarasını ekledik. Peki ama bu PagerDegistir fonksiyonu nerede çalısacak?

DataGrid'in eventlerinden ItemCreated'i seçerek, oluşan fonksiyon içerisinden PagerDeğiştir fonksiyonunu çağırmalıyız. Bu şekilde, DataGrid yaratıldığı anda, pager'ı artık bizim yaptığımız pager ile değiştirilecektir.

PagerDegistir fonksiyonuna baktığımızda, AJAX kullanımı icin, CalBack eventlerinin ne şekilde register edildiğini göreilirsiniz. Burada dikkat etmemiz gereken, aslında sadece gösterim gibi görünen "geçerli sayfa numarası" span'ının aslinda, paging'i de yaptığıdır.

Clienttan server'a mesaj next2 next3 back1 gibi formatta gelmekte, ve serverda geri çözülmektedir.

Peki, hemen RaiseCallBackEvent ve GetCallbackResult fonksiyonlarımızı da yazalım.








    void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
    {
        this.eventArgument = eventArgument;
    }
 
    string ICallbackEventHandler.GetCallbackResult()
    {
        {
            dg.CurrentPageIndex = Int32.Parse(eventArgument.Substring(4, 1));
 
            if (eventArgument.Substring(0, 4) == "next")
            {
                if (dg.PageCount > Int32.Parse(eventArgument.Substring(4, 1)) + 1)
                    dg.CurrentPageIndex++;
            }
 
            else
            {
                if (Int32.Parse(eventArgument.Substring(4, 1)) > 0)
                    dg.CurrentPageIndex--;
            }
 
            GridDoldur();
        }
 
        System.IO.StringWriter sw = new System.IO.StringWriter();
        HtmlTextWriter htmlWriter = new HtmlTextWriter(sw);
        dg.RenderControl(htmlWriter);
        return sw.ToString();
     }
 

    GetCallbackResult fonskiyonu öncelikle, client tarafından gönderilen next1 ve ya back3 gibi mesajin ne olduğunu çözümler ve sayfa işlemini ona göre değiştirir. Sonrasında ise, tüm makalenin klit noktası gelmektedir. DataGrid'in sayfası değiştirildi, yeni datalar bind edildi, peki bu clienta nasıl gönderilecek ve client bunu aynı datagrid'in yerine nasıl koyacak?

    Server - Client arasında istediğimiz formda text alışverişi yapabiliyoruz. Öyleyse DataGrid'i text'e çevirmenin yollarını aramalıyız. Elbette en doğru ve işimize birebir yarayacak olan o kontrolu render ederek nasıl bir html taglı text haline dönüşeceğini almak ve, bunu clienta yollamak. Bunu yukarıda gördüğünüz gibi, StringWriter ve HtmlTextWriter ile yaptık.

    Peki gönderdiğimiz bu html text'i client nasıl olacak ta, datagridin birebir aynı yerine koyacak? Bu sorunun cevabı da bir satırlık bir javascriptte yatmakta.

<head runat="server">
    <title>Untitled Page</title>
 
    <script>
     function OnCallback(YeniGrid,p)
    {  
       document.getElementById("grid").innerHTML=YeniGrid;
    }
   
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <span id="grid">
                <asp:DataGrid ID="dg" runat="server" AllowPaging="True" OnItemCreated="dg_ItemCreated">
                </asp:DataGrid>
            </span>
        </div>
    </form>
</body>

    Normalden farklı olarak DataGrid'i bir span'ın icerisine koyalım ve, bu span'a 'grid' olarak bir id verelim. Scriptin içerisinde ise, bu span'ın innerHTML'inde yazan herşeye müdahale edebiliriz. Dolayısıyla, severdan cevap geldiginde, başka deyişle gridimizin yeni tagleri geldiğinde, span içeriğini bu yeni gride eşitlediğimizde hiç postback olmadan gridde yeni sayfamızı getirmiş oluruz.

    Ve işte sonuç:

    AJAX teknolojisi ilk düşünülmeye, küçük uygulamalar yapılmaya başlandığında kimse bu kadar büyüyeceğini görememişti, ama şu anda, google earth vb.. bir çok uygulamada yoğun olarak kullanılmakta. Dolayısıyla gerek amator gerek profesyonel olsun, projelerimizin bir çoğuna rahatlıkla uygulayabileceğimiz bu esnek teknolojiyle yapabileceğimiz daha bir çok kontrol var. Onları da zamanla bu makale serisinin devamında bulabileceksiniz.

Kivanc Ozuolmez

 

KaynakKodlar