65.9K
CodeProject 正在变化。 阅读更多。
Home

检索历史记录中的上一页,而不是 PostBack 页

starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (14投票s)

2005年12月23日

CPOL

2分钟阅读

viewsIcon

96288

一篇文章,介绍如何使用 JavaScript 和 ASP.NET 检索实际的上一页,而不是回发页。

引言

我们都非常熟悉 Web 浏览器的后退前进按钮。它们的工作方式正如我们所期望的那样,但在处理利用回发的服务器端页面(例如 ASP.NET 页面)时,后退前进按钮的作用有点过于强大了。

例如,如果您在页面上与下拉列表或任何自动将结果显示到同一页面的类型的控件进行交互,那么在更改发生之前的先前状态将被添加到浏览器的内存中。

那么在这种情况下,当您单击后退按钮时会发生什么?

没错,您将获得该页面的先前状态,而不是您浏览或发送到的实际页面。

解决方案

哦,很简单。只需编写您自己的后退和前进 JavaScript 函数,并跟踪页面提交操作或回发的次数。完成此操作有三个简单的步骤。在开始之前,请注意,模板在服务器端页面(尤其是 ASP.NET)中很流行。模板可能会导致 Web 控件的实际 ID 在页面呈现后发生更改,因此我们将利用所有 ASP.NET Web 控件中找到的 ClientID 属性,因为它知道呈现的 ID 会是什么。

步骤 1

将以下 JavaScript 函数插入到引用的(.js)文件中,或在 script 标签内。

<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>

第二步

创建两个 HyperLink 控件和一个 input 服务器标签(回发间谍)。请注意,如果您想要更图形化的外观,可以将这些 HyperLink 控件包装在后退和前进图像周围。

<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" />

步骤 3

在代码隐藏文件或服务器脚本标签中,声明 HyperLink 并相应地设置其属性。

      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

就是这样!

这就是它的全部内容。

将自定义 JavaScript 与 ASP.NET 或任何类型的服务器端环境结合使用,将始终允许获得更好的性能。

© . All rights reserved.