Microsoft Ajax, from the bottom up - part 9 (and last)

Hi everyone, This is the last post i am going to write in this scope of ASP.NET Ajax. The post will talk about the History capabilities ASP.NET Ajax has to offer. but first of all, here are the list to the previous posts on the subject of ASP.NET Ajax.

Microsoft Ajax, from the bottom up

Microsoft Ajax, from the bottom up - part 2.

Microsoft Ajax, from the bottom up - part 3

Microsoft Ajax, from the bottom up - part 4

Microsoft Ajax, from the bottom up - part 5

Microsoft Ajax, from the bottom up - part 6

Microsoft Ajax, from the bottom up - part 7

Microsoft Ajax, from the bottom up - part 8

So why do we need any support for the back or forward button of our browser? Very simple, for instance, say we have a page with a grid in it (an asp.net Grid control) and this grid supports sorting among other thing. Now lets say this grid is inside an UpdatePanel control. There will be no postbacks and no flickering in the page. So after some column headers were clicked and the table was sorted, if i press the back button on my browser i will be navigated to the previous page i was at and not to the same page with other sorted state i was at. Sometimes this is not what i want to accomplish. I do want to be able to navigate threw the sorted states of my page.

This is exactly what i will show in this post. So make things simpler lets so a simpler example. This example has 3 buttons, each one is doing a postback and update some Label to the Text on the Button.

Here it is:

And here is the code behind:

public void ButtonClick(object sender, EventArgs e)
{
       LabelHistoryData.Text = ((Button)sender).Text;        
}    

Simple aspx page, right? Needless to say these buttons are triggers to some UpdatePanel.all the buttons OnClick is pointing to the same server side event handler. Now lets say Inavigated from www.google.com to this page and clicked each one of the buttons. Clicking the back button on my browser will take me back to Google. What if i want to move between the states of my postbacks?

Here is how i will do it:

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                    <asp:Panel runat="server" CssClass="box" ID="Content" Height="40px">
                        Date and Time:
                        <%= DateTime.Now.ToLongTimeString() %>
                        <br />
                        Page's refresh state:
                        <asp:Label runat="server" ID="LabelHistoryData" />
                    </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
            <p />
            <asp:Button runat="server" ID="Button1" Text="Key 1" OnClick="ButtonClick" />
            <asp:Button runat="server" ID="Button2" Text="Key 2" OnClick="ButtonClick" />
            <asp:Button runat="server" ID="Button3" Text="Key 3" OnClick="ButtonClick" />

Here I have the same  UpdatePanel control as before but look at the ScriptManager

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

Here i am telling the ScriptManager to support the History feature and that when the user clickes back or forward the event handler taking place is "OnNavigateHistory".

In addition every time the button is clicked , i am adding a logical entry point to my url:

// On button click, handle the event and set a history point. 
 public void ButtonClick(object sender, EventArgs e)
 {
   LabelHistoryData.Text = ((Button)sender).Text;
   ScriptManager1.AddHistoryPoint(key, LabelHistoryData.Text, LabelHistoryData.Text);        
 }    

When the page is renders after the buttons event handler the url now looks like this:

http://localhost/AdvancedJS/Ajax/MSAjaxHistory1.aspx#&&s=Key+2
http://localhost/AdvancedJS/Ajax/MSAjaxHistory1.aspx#&&s=Key+3

and when i am pressing the back button i am getting this logical entry points and doing whatever i want with them. typically to return to the state I want :

// Handle the Navigate event
public void OnNavigateHistory(object sender, HistoryEventArgs e)
{
   LabelHistoryData.Text = Server.HtmlEncode(e.State[key]);
}

We can achieve this affect using client side code only but may be i will show this sometime later.

Anyway guys and girls , There is a lot more to say about Microsoft ASP.NET Ajax framework , but I hope you all got the picture. I am using it a lot. Hope my posts helped.

Pini Dayan.