使用母版页保持滚动位置异步部分页面回发Ajax

时间:2014-08-06 01:36:14

标签: c# javascript asp.net webforms

我还没弄明白如何使用母版页来完成这项工作。

我希望在部分页面回发后维护页面的滚动位置,而不是子元素。

这个脚本在stackoverflow上找到了,我已经逐步调试了它,注意我添加了警报,看看它是否真的命中了代码。它会触发警报,它们是正确的滚动位置。但是,最终页面会在部分页面回发后滚动回到顶部。

母版页:

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

儿童页

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

1 个答案:

答案 0 :(得分:0)

将此脚本添加到您的页面。确保您在页面中注册了jQuery

<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>