Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

Retrieving the previous page in history instead of the PostBack page

Rate me:
Please Sign up or sign in to vote.
4.00/5 (17 votes)
23 Dec 2005CPOL2 min read 92.3K   31   11
An article on retrieving the actual previous page instead of the post back page using JavaScript and ASP.NET.

Introduction

We all are quite familiar with the Back and Forward buttons of a web browser. They work exactly as they should, but when dealing with server-side pages that take advantage of post-backs, such as ASP.NET pages, the Back and Forward buttons work a little too well.

For instance, if you were to interact with a drop down list on a page or any type of control that automatically displays results to the same page, then the previous state before the change took place will be added into the browser's memory.

So in this case, what happens when you click the Back button?

That's right, you get the previous state of that page and not the actual page that you browsed from or were sent from.

The Solution

Oh, it's simple. Just write your own backward and forward JavaScript functions and track the number of times the page commits an action or post-back. There are three easy steps to accomplish this. Before we get started, note that templating is popular with server-side pages (especially with ASP.NET). Templating can cause the actual ID of a web-control to change after the page is rendered, so we will take advantage of the ClientID property found in all ASP.NET web-controls since it knows what the rendered ID will be.

Step 1

Insert the following JavaScript functions in a referenced (.js) file or within script tags:

HTML
<html>
    <head>
        <title>Backward Forward Example</title>

        <script>
JavaScript
function Backward(oSpyID)
{
   // The hidden post-back spy or counter field
   var spy = null;
   // Total number of post-backs
   var refreshes = new Number(0);
   // Allows the actual previous page to be selected
   var offset = new Number(1);

   spy = document.getElementById(oSpyID);

   refreshes = new Number(spy.value) + offset;

   history.go(-refreshes);
   // Redirects to the actual previous page
}



function Forward()
{
   history.forward(1);
   // Redirects if the next page exists,
   // including the post-back versions.
}
HTML
        </script>
    </head>
    <body>
        <form runat="server">
            ...
        </form>
    </body>
</html>

Step 2

Create two HyperLink controls and one input server tag (the post-back spy). Note that if you want a more graphical look, you can wrap these HyperLink controls around backward and forward images.

HTML
<asp:HyperLink CssClass="navPages" ID="hpBackward" Runat="server">
      <img src="../images/nav-arrow-backward.gif" /></asp:HyperLink>
<asp:HyperLink CssClass="navPages" ID="hpForward" Runat="server">
      <img src="../images/nav-arrow-forward.gif" /></asp:HyperLink>
<input type="hidden" id="inputPostBackSpy" runat="server" />

Step 3

In the code-behind file or in the server script tags, declare the HyperLinks and set their attributes respectfully.

VB
Protected WithEvents inputPostBackSpy As HtmlInputHidden
Protected WithEvents hpBackward As HyperLink
Protected WithEvents hpForward As HyperLink

Private Property PostBackSpy() As Integer
   Get
      Return Convert.ToInt32(inputPostBackSpy.Value)
   End Get
   Set(ByVal Value As Integer)
      inputPostBackSpy.Value = Value.ToString()
   End Set
End Property

Private Sub Page_Load(ByVal sender As System.Object, _
   ByVal e As System.EventArgs) Handles MyBase.Load

   If Not Me.IsPostBack Then

      hpBackward.Attributes.Add("onclick", _
         "Backward('" & inputPostBackSpy.ClientID & "')")
      hpForward.Attributes.Add("onclick", "Forward()")

      PostBackSpy = 0

   Else

      PostBackSpy = PostBackSpy + 1

   End If
End Sub

That's It!

That's all there is to it.

Combining custom JavaScripts with ASP.NET or any type of server-side environment will always allow better performance.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) CDC
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralThank You Pin
rema1029-Apr-10 3:45
rema1029-Apr-10 3:45 
GeneralRe: Thank You Pin
Roy Oliver2-May-10 14:28
Roy Oliver2-May-10 14:28 
GeneralMade some improvements Pin
vatri29-Jul-08 22:34
vatri29-Jul-08 22:34 
GeneralRe: Made some improvements Pin
Roy Oliver6-Aug-08 11:23
Roy Oliver6-Aug-08 11:23 
QuestionPostback problem Pin
hvdncy28-Dec-07 8:47
hvdncy28-Dec-07 8:47 
AnswerRe: Postback problem Pin
Roy Oliver17-May-08 21:32
Roy Oliver17-May-08 21:32 
Generalusing the Back buttons on the browser Pin
liptonIcedTea13-Nov-07 12:21
liptonIcedTea13-Nov-07 12:21 
GeneralRe: using the Back buttons on the browser Pin
Roy Oliver14-Nov-07 11:44
Roy Oliver14-Nov-07 11:44 
GeneralRe: using the Back buttons on the browser Pin
liptonIcedTea14-Nov-07 15:52
liptonIcedTea14-Nov-07 15:52 
QuestionHow to Read and recognize web element and there properties Pin
Rohituappu19-Sep-07 21:15
Rohituappu19-Sep-07 21:15 
AnswerRe: How to Read and recognize web element and there properties Pin
Roy Oliver5-Oct-07 14:59
Roy Oliver5-Oct-07 14:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.