Maintaining page scroll position after updatepanel

Question

I am a beginner at ASP.NET and I have a problem maintaining the scroll position of the page after a partial postback of an UpdatePanel. I tried setting MaintainScrollPositionOnPostback="true" in <%@ Page Language="C#" ...%> but it didn't do the trick. Please note that I am using (and have to use) FireFox.

Any help would be appreciated. Thank you! Here is my code:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
    <tr>
        <td>
            <asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
                Width="400px">
                <table id="MainTable">
                    <tr>
                        <td align="center" class="style3">
                            <asp:Label ID="GroupLabel" runat="server">
                            </asp:Label>
                        </td>
                        <td align="center" class="style4">
                            <asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
                            </asp:Label>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <br />
            <asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
            </asp:Panel>
        </td>
        <td width='100px'>
        </td>
        <td>
        </td>
    </tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
    <table>
        <tr>
            <td align="center">
                <br />
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
                    runat="server">
                </asp:ToolkitScriptManager>
                <asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
                    RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td>
                <asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
                    <ContentTemplate>
                        <asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
                        </asp:Panel>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
</asp:Panel>

Answer 1

I was able to resolve a similar problem with the following hack:

Add HiddenField Control to the page or control you're working in. Be sure to set the ClientIDMode to static so that it is easily accessible in JavaScript. We will use JavaScript to update this control:

<asp:HiddenField ID="scrollPosition" ClientIDMode="Static" runat="server" /> 

Also Add a panel control as the target to which we will insert some javascript:

<asp:Panel ID="pnlScriptRunner" runat="server"></asp:Panel>

Add the following JavaScript. With the window.onscroll function, we are updating our HiddenField Control. The updateScrollPosition function will be called from our C# code behind:

<script> 
     window.onscroll = function () {
          var ctrl = document.getElementById("scrollPosition");
          ctrl.value = document.body.scrollTop;
          console.log(ctrl.value);
     };

     function updateScrollPosition(value) {       
         window.scrollTo(0, value);
         console.log("updating scroll position");
     }
</script> 

Create a new C# Class and add the following method. This will allow us to insert some Javascript from the code-behind in C#:

public static class ClientScript
{
    public static void InsertScript(string script, Control target)
    {
        HtmlGenericControl s = new HtmlGenericControl();
        s.TagName = "script";
        s.InnerHtml = script;
        target.Controls.Add(s); 
    }        
}

Now, in the code behind of your control or page, call the JavaScript function "updateScrollPosition(value)" with the value from our ASP.NET HiddenField Control by inserting the javascript into pnlScriptRunner with the static class we created:

    protected void btnRotate_Click(object sender, EventArgs e)
    {
         //Do stuff with controls in your update panel here, then: 
         ClientScript.InsertScript("updateScrollPosition(" + scrollPosition.Value + ");", pnlScriptRunner);
         UpdatePanel1.Update();

    }

My btnRotate_Click event is registered as a trigger in the update panel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
     <ContentTemplate>
         <b>Image Preview: </b><br />
         <asp:Image ID="img" runat="server" CssClass="profileImage" />
         <br /> 
         <br />
         <asp:Button ID="btnRotate" runat="server" Text="Rotate Image" ClientIDMode="Static" OnClick="btnRotate_Click" />
         <br />
         <br />
      </ContentTemplate>
      <Triggers>
           <asp:PostBackTrigger ControlID="btnRotate" />
      </Triggers>
</asp:UpdatePanel>

The following references are necessary:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

Hopefully this helps!

Answer 2

This looks like the answer to your question. As a plus; it appears to work on every browser not just FF.

http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx

if you are using IE then its very simple just put the code in your page directive.

<%@ Page Language="C#" AutoEventWireup="true" 
 CodeFile="Default.aspx.cs" Inherits="_Default"
 MaintainScrollPositionOnPostback="true" %> 

but it will not work in Firefox for that you have to add one browser file into your website

Right click on solution explorer > Add New Item

Select Browser File and add it to App_Browsers folder.

Add MaintainScrollPositionOnPostback capability to this browser file as written below.

<browsers>
  <browser refID="Mozilla">
      <capabilities>
        <capability name="supportsMaintainScrollPositionOnPostback" value="true" />       
    </capabilities>   
  </browser>
</browsers>

Some times this also not work,

Then a simple solution just add a blank Update panel after the grid and onpostback just put the focus to that update panel it will work in any browser. in cs postbackevent updatepanel1.Focus();

If any problem just feel free to ask or any modification reply.

Answer 3

Though I understand that you are not familiar with javascript, still i'm suggesting this answer to you as there is no inbuilt solution for this in .net but you can achieve it with javascript with a work around. Don't worry Javascript ain't tough and is one of the important part of web development. So just give it a try. Might help you.

You can Refer to this Page : Maintaining page scroll position after updatepanel partial postback

<form id="form1" runat="server">
  <asp:ScriptManager ID="SM1" runat="server" ScriptMode="Release" />
   <script type="text/javascript">
      // It is important to place this JavaScript code after ScriptManager1
      var xPos, yPos;
      var prm = Sys.WebForms.PageRequestManager.getInstance();

      function BeginRequestHandler(sender, args) {
        if ($get('<%=Panel1.ClientID%>') != null) {
          // Get X and Y positions of scrollbar before the partial postback
          xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
          yPos = $get('<%=Panel1.ClientID%>').scrollTop;
        }
     }

     function EndRequestHandler(sender, args) {
         if ($get('<%=Panel1.ClientID%>') != null) {
           // Set X and Y positions back to the scrollbar
           // after partial postback
           $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
           $get('<%=Panel1.ClientID%>').scrollTop = yPos;
         }
     }

     prm.add_beginRequest(BeginRequestHandler);
     prm.add_endRequest(EndRequestHandler);
 </script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
     <asp:Panel ID="Panel1" runat="server" Height="300">
        <%-- Some stuff which would cause a partial postback goes here --%>
     </asp:Panel>
   </ContentTemplate>
 </asp:UpdatePanel>

Answer 4

You can set focus on the control you'd like to see on the screen.

e.g if dropdownlist "ddlCity" is the control that causes the postback, then do the following after your dropdownlist SelectedIndexChanged code:

ddlCity.Focus();