CODEWITHSUNDEEP
c#javascriptasp.netwebforms
Joe Stellato
Joe Stellato

Reputation: 568

Maintain Scroll Position Asynchronous Partial Page Postback Ajax With Master Page

I have yet to figure out how to make this work with master pages.

I want to maintain the scroll position of the page, not a sub element, after a partial page postback.

This script was found here on stackoverflow, and I have step through and debugged it, note I added the alerts to see if it was actually hitting the code. It does fire the alerts, and they are the correct scroll positions. However, ultimately the page scrolls back to the top after the partial page postback.

Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="somesite.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %>Master Page</title>
</head>
<body>

<form runat="server" enctype="multipart/form-data">
<ajaxToolkit:ToolkitScriptManager runat="server" EnablePageMethods="true" ScriptMode="Release">
<Scripts>
    <asp:ScriptReference Path="~/Scripts/jquery-1.8.2.min.js" />
    <asp:ScriptReference Name="WebForms.js" Path="~/Scripts/WebForms/WebForms.js" />
    <asp:ScriptReference Name="WebUIValidation.js" Path="~/Scripts/WebForms/WebUIValidation.js" />
    <asp:ScriptReference Name="MenuStandards.js" Path="~/Scripts/WebForms/MenuStandards.js" />
    <asp:ScriptReference Name="GridView.js" Path="~/Scripts/WebForms/GridView.js" />
    <asp:ScriptReference Name="DetailsView.js" Path="~/Scripts/WebForms/DetailsView.js" />
    <asp:ScriptReference Name="TreeView.js" Path="~/Scripts/WebForms/TreeView.js" />
    <asp:ScriptReference Name="WebParts.js" Path="~/Scripts/WebForms/WebParts.js" />
    <asp:ScriptReference Name="Focus.js" Path="~/Scripts/WebForms/Focus.js" />
    <asp:ScriptReference Name="WebFormsBundle" />
</Scripts>
</ajaxToolkit:ToolkitScriptManager>

     <asp:ContentPlaceHolder runat="server" ID="NavigationPlaceHolder" />
<div id="divMainContent" class="divMainContent">
     <asp:ContentPlaceHolder runat="server" ID="MainContentPlaceHolder" />
</div>

The Child Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="page.aspx.cs" Inherits="somesite.page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="NavigationPlaceHolder" runat="server">
<script type="text/javascript">
     var xPos, yPos;
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_beginRequest(BeginRequestHandler);
     prm.add_endRequest(EndRequestHandler);

     function BeginRequestHandler(sender, args) {
     //xPos = document.body.scrollLeft;
     yPos = document.documentElement.scrollTop;
     alert(yPos);
     }

     function EndRequestHandler(sender, args) {
     //document.body.scrollLeft = xPos;
     document.documentElement.scrollTop = yPos;
     alert(yPos);
     }
     </script>
     <!-- Provides Twitter Typeahead functionality -->
<script src="Scripts/typeahead.min.js" type="text/javascript"></script>
<script src="Scripts/hogan/hogan.js"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <asp:UpdatePanel runat="server" ID="updPnlClearVendorNameSessionVariable">
       <ContentTemplate>
          <asp:Button runat="server" ID="btnSearch" OnClick="btnSearch_Click" />
       </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Upvotes: 0

Views: 624

Answers (1)

yazanpro
yazanpro

Reputation: 4762

Add this script to your page. Make sure that you have jQuery registered in the page.

<script type="text/javascript">

    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('scrollDiv').scrollLeft;
        yPos = $get('scrollDiv').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('scrollDiv').scrollLeft = xPos;
        $get('scrollDiv').scrollTop = yPos;
    }

</script>

Upvotes: 1

Related Questions