CODEWITHSUNDEEP
asp.netasp.net-ajaxupdatepanel
John Engel-Kemnetz
John Engel-Kemnetz

Reputation: 2565

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.

Upvotes: 2

Views: 8814

Answers (4)

Pedro Emilio Borrego Rached
Pedro Emilio Borrego Rached

Reputation: 316

I had a similar scenario. In my case I just needed one tick for triggering data sync, so the solution I used to avoid the page scrolling to the top when the update panel did the update was inserting this JavaScript just after the closing ScriptManager tag:

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

I hope it works for you to.

Upvotes: 2

graham mendick
graham mendick

Reputation: 1839

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

Upvotes: 1

Geek
Geek

Reputation: 429

There are a couple of answers in Stack Overflow. Check this one:

How to avoid UpdatePanel scrolling on AutoPostBack?

Upvotes: 1

Adil
Adil

Reputation: 148110

You can use document.body.scrollTop in javascript to store the scroll position and later assign it back. I used it and it worked for me.

Also try 

Page.MaintainScrollPositionOnPostBack = true;

Upvotes: 5

Related Questions