ASP页面在UpdatePanel更新时滚动到顶部

时间:2012-06-22 17:57:31

标签: asp.net asp.net-ajax updatepanel

我遇到一个问题,我有一个UpdatePanel,它使用一个计时器触发更新带有新点的ASP图(实际上是“创建实时图表”下的http://www.4guysfromrolla.com/articles/121609-1.aspx指南)。我有一个问题,无论何时计时器滴答,整个页面滚动到顶部。当计时器滴答时,如何在页面中保持滚动位置?我已经尝试了http://www.4guysfromrolla.com/articles/111704-1.aspx和其他几个类似JavaScript解决方案的说明,但只要计时器滴答,x和y变量就会被删除。

代码:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="scmManager" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="updRealtimeChart" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:Chart ID="chtRandomData" ...></asp:Chart><br />
            <asp:Repeater ID="valueRepeater"...></asp:Repeater>
            <asp:Label ID="errorLabel" Font-Bold="true" Font-Size="Larger" ForeColor="Firebrick" BackColor="Khaki" runat="server"></asp:Label>
            <asp:Timer ID="tmrRefreshChart" runat="server" Interval="300"></asp:Timer>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="periodUpdate" />
        </Triggers>
    </asp:UpdatePanel>
    ...etc rest of the page...

编辑:在后面的代码中,我试过这个来检查发生了什么:

public partial class _Default : System.Web.UI.Page
{
    public int count = 0;
    protected void Page_Init(object sender, EventArgs e)
    {
        Page.MaintainScrollPositionOnPostBack = true;
        count++;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        errorLabel.Text += count;
        ... }

当我运行它时,UpdatePanel不断向errorLabel添加一个“1”,表示Page_Load和Page_Init函数只发生一次,但更新面板仍在移动滚动位置。

4 个答案:

答案 0 :(得分:5)

您可以在javascript中使用document.body.scrollTop来存储滚动位置,然后再将其分配回来。我用它,它对我有用。

也可以尝试

Page.MaintainScrollPositionOnPostBack = true; 

答案 1 :(得分:2)

我有类似的情况。在我的情况下,我只需要一个勾选来触发数据同步,因此我用来避免页面在更新面板执行更新时滚动到顶部的解决方案是在关闭ScriptManager标记之后插入此JavaScript

<script type="text/javascript">
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(beginRequest);
            function beginRequest() {
                prm._scrollPosition = null;
            }
</script>

我希望它适合你。

答案 2 :(得分:1)

Stack Overflow中有几个答案。检查一下:

How to avoid UpdatePanel scrolling on AutoPostBack?

答案 3 :(得分:1)

这看起来像一个熟悉的.NET Bug。在Timer控件上设置ClientIDMode = Auto应该修复它