Search code examples
asp.netasp.net-ajaxupdatepanel

ASP page scrolls to top on UpdatePanel update


I am having a problem where I have an UpdatePanel that uses a timer to trigger to update an ASP graph with new points (essentially the guide at https://web.archive.org/web/20201205213920/https://www.4guysfromrolla.com/articles/121609-1.aspx under "Creating Real Time Charts"). I'm having a problem where whenever the timer ticks, the entire page scrolls to the top. How can I maintain the scroll position in the page when the timer ticks? I've tried the instructions at https://web.archive.org/web/20211020140248/https://www.4guysfromrolla.com/articles/111704-1.aspx and several other similar JavaScript solutions, but the x and y variables are getting wiped out whenever the timer ticks.

Code:

<%@ 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...

Edit: In the code behind, I've tried this to check what is going on:

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;
        ... }

When I run this, the UpdatePanel continuously adds a "1" to the errorLabel, indicating that the Page_Load and Page_Init functions are only occurring once, but the update panel is still shifting the scroll position.


Solution

  • This looks like a familiar .NET Bug. Setting ClientIDMode=Auto on the Timer control should fix it