|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
IntroductionWe 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 SolutionOh, 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 Step 1Insert the following JavaScript functions in a referenced (.js) file or within <html>
<head>
<title>Backward Forward Example</title>
<script> 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.
} </script>
</head>
<body>
<form runat="server">
...
</form>
</body>
</html>
Step 2Create two <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 3In the code-behind file or in the server script tags, declare the 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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
+ offset;
News 
Joke 
Rant 
Admin