Makale Özeti

.NET Framework 3.5 SP1 ile beraber gelen yeniliklerden biri olan AJAX ScriptManager'a ait EnableHistory özelliği ile AJAX web sitelerinde istemci tarafında tarayıcı geçmişini kontrol ederek normal sitelerdeki gibi tarayıcılarda "Geri" ve "İleri" düğmelerinin çalışmasını sağlayabiliyoruz. Detaylar makalemizin devamında.

Makale

AJAX kullanılan sitelerde tarayıcıların "Geri" düğmesinin çalışmaması sorunu ile ilgili farklı JavaScript kütüphanelerinde çözümler bulunsa da ASP.NET ile sunucu tarafında kullanılabilecek tek bir çözüm vardı. Aşağıdaki adresten söz konusu çözüm ile ilgili makaleyi inceleyebilirsiniz.

http://www.yazgelistir.com/Makaleler/1000001424.ygpx

Bahsettiğimiz çözüm ASP.NET harici özel bir sunucu kontrolünün kullanılmasına dayalı. Oysa artık bunlara ihtiyacımız yok. .NET Framework 3.5'in SP1 güncellemesi ile beraber artık ASP.NET AJAX altyapısı istemci tarafındaki tarayıcı geçmişinin de kontrol edilebilmesine olanak tanıyor. Gelin sistemin kullanım şeklini beraber inceleyelim.

ScriptManager'da yeni bir özellik : EnableHistory

Ufak bir örnek yaparak uygulama üzerinden ilerleyelim. Örneğimizde sayfamızda UpdatePanel içerisinde bir Label ve bir de Button bulunsun. Düğmeye her bastığımızda basit bir şekilde Label'ın içerisindeki sayıyı bir arttırsın. Amacımız bu şekilde UpdatePanel'in içi değişirken tarayıcının geçmişini de yenileyerek tarayıcıdaki "Geri" ve "İleri" düğmelerinin çalışmasını sağlamak.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager EnableHistory="true" ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:Label ID="Label1" runat="server" Text="0"></asp:Label>

                <asp:Button ID="Button1" runat="server" Text="Button" />

            </ContentTemplate>

        </asp:UpdatePanel>

    </div>

    </form>

</body>

</html>

Yukarıdaki örnek sayfa içerisinde gördüğünüz kodun normal bir ASP.NET AJAX uygulamasından tek farkı ScriptManager kontrolünün EnableHistory özelliğinin True olarak ayarlanmış olması. Bu özellik ScriptManager kontrolüne .NET Framework 3.5 SP1 güncellemesi ile beraber eklendi. Tabi sadece bu ayarı değiştirmiş olmak her şeyin çalışması için yeterli değil.

AJAX ile sayfada yapılan değişikliklerin hangilerinin birer "yeni sayfa" niteliği taşıdığına karar vermemiz gerekiyor. Böylece tarayıcı doğru durumları kendi geçmişine ekleyecektir. Bunun için sayfamızın kod kısmına geçerek bizim örneğimizde AJAX isteğine neden olan Button kontrolünün arkasında saklı koda göz atalım.

[VB]

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Label1.Text = CInt(Label1.Text) + 1

        ScriptManager1.AddHistoryPoint("sayi", Label1.Text)

    End Sub

[C#]

    protected void Button1_Click(object sender, EventArgs e)

    {

      Label1.Text = (int.Parse(Label1.Text) + 1).ToString();

      ScriptManager1.AddHistoryPoint("sayi", Label1.Text);

    }

Gördüğünüz üzere kodumuzun ilk satırında basit bir şekilde Label içerisindeki değeri bir arttırıyoruz. Son olarak elde ettiğimiz değeri ayrıca ScriptManager üzerinden AddHistoryPoint komutu ile istemci tarafında bir tarayıcı geçmişi noktası olarak kaydediyoruz. AddHistoryPoint komutu toplamda iki parametre alıyor (Key/Value Pair), birincisi sizin tamamen kendi isteğinize göre tanımlayabileceğiniz bir string değer, diğeri ise bu string değer ile eşleşen değişkenin ta kendisi. Örneğin eğer web sayfamız farklı ürünlerin gösterildiği bir sayfa olsaydı bu noktada string değer olarak "ID" verip ikinci parametre olarak da gösterilen ürünün primary key değerini aktarabilirdik. Tüm bu değerler bize ileride geri döndürülüyor olacak.

Tarayıcı geçmişine yeni bir nokta ekledik ve tarayıcımızı sayfanın değiştiğinden haberdar ettik. Hatta değişen sayfa ile ilgili ufak bir bilgiyi de AddHistoryPoint sayesinde kaydetmiş olduk. Şimdi sıra geldi web sitemizin kullanıcısı tarayıcının "Geri" veya "İleri" tuşlarına tıkladığında bizim durumu nasıl algılayarak uygun hareketleri yapacağımızı belirlemeye. Bunun için sunucu tarafında ScriptManager'ın Navigate adındaki event-handler'ını kullanacağız.

[VB]

    Protected Sub ScriptManager1_Navigate(ByVal sender As Object, ByVal e As System.Web.UI.HistoryEventArgs) Handles ScriptManager1.Navigate

        Label1.Text = e.State("sayi")

    End Sub

[C#]

    void ScriptManager1_Navigate(object sender, HistoryEventArgs e)

    {

        Label1.Text = e.State["sayi"];

    }

Navigate event-handler'ına gelen HistoryEventArgs üzerinden State dizisine daha önce AddHistoryPoint derken verdiğimiz anahtar stringi ilettiğimizde eşleştirilmiş olan değeri alabiliyoruz. Böylece kullanıcı bir önceki sayfaya gitmek istediğinde o sayfa yaratılırken eklemiş olduğumuz HistoryPoint ile eşleştirilmiş değeri yakalayabileceğiz. Bizim örneğimizde sayfayı eski haline getirmek için söz konusu değeri Label'ın içine aktarmak yeterli oluyor. Eğer bu değer bir ürüne ait primary key olsaydı tekrar veritabanını sorgulayarak sayfayı uygun verilerle dolduracak bilgileri çekecektik.

Sonuç

Aslına bakılırsa gerçek anlamı ile bir "Geri" navigasyonu sağlamıyoruz. Tarayıcının "Geri" düğmesine basıldığında bir önceki sayfayı tekrar AJAX ile oluşturuyoruz. İstemci tarafında bu durum sanki geri gidilmiş gibi algılanıyor, oysa veriler tekrar sunucudan geliyor. Maalesef bunun şu an için farklı bir çözümü yok.

Diğer yandan tarayıcının sayfa değişmemesine rağmen sayfa değişmiş gibi davranmasını sağlamak için de sayfa adresine aşağıdaki gibi anchor bilgileri ekleniyor. Bu durum site içerisinde anchor kullanımını engelleyecektir. Diğer yandan anchor içerisinde AddHistoryPoint ile eklediğimiz tüm veriler encrypt edilerek saklandığı için bu verilerin olabildiğince güvenlik seviyesinin düşük olmasında da fayda var.

http://localhost:54366/Default.aspx#&&/wEXAQUEc2F5aQUBMrCb2/2XpreE0oVczcMgPShkFLH/

Son olarak yukarıdaki gibi linklerin yaratılması ile beraber artık AJAX sayfalarında da sitenin farklı durumlarının farklı web adreslerine sahip olduğunu unutmayalım. Böylece AJAX ile çalışan bir sitede gezildiğinde kullanıcılar tam olarak içerisinde bulundukları görsel sayfanın adresini kopyalayarak paylaşabileceklerdir.

Hepinize kolay gelsin.

Daron Yöndem
MVP, MCT, MCPD, MCITP, MCTS
MCSD, MCAD, MCDBA, MCP, ACP, ICSD
Blog: http://daron.yondem.com
Sorularınız için: http://daron.yondem.com/tr/sorusor