ScriptManager'da EnableHistory ile AJAX uygulamalarında tarayıcı geçmişi desteği.

0 dakikada yazıldı

8816 defa okundu

Düzenle

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://daron.yondem.com/tr/post/1e6b22ff-cf0b-4927-a396-4eb5446daaa4

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.