javascript - 使用 asp.net 和母版页在 ListView 中维护回发时的滚动位置

Question

在 ASP.NET 中的回发后维护滚动位置方面有很多类似的帖子。我已经尝试了其中的几个，但没有成功，但是，很多人似乎都使用以下 Javascript 取得了成功。我也尝试过使用 .scrollLeft 与 .offsetLeft ，但也没有任何运气。

var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    alert("Begin Request?");
    if ($get('<%=PanelReportInput.ClientID%>') != null) {
        xPos = $get('<%=PanelReportInput.ClientID%>').offsetLeft;
        yPos = $get('<%=PanelReportInput.ClientID%>').scrollTop;
    }
}

function EndRequestHandler(sender, args) {
    alert("End Request?");
    if ($get('<%=PanelReportInput.ClientID%>') != null) {
        $get('<%=PanelReportInput.ClientID%>').offsetLeft = xPos;
        $get('<%=PanelReportInput.ClientID%>').scrollTop = yPos;
    }
}

我将上面的 javascript 放在一个名为 ScrollPosition.js 的文件中，该文件被拉入下面的母版页中。 我收到了两个警报，但是当我调试此代码时，xPos 和 yPos 的值均为“未定义”。下面是我的 .aspx 页面，但在上面的 JavaScript 代码中，我还尝试使用“<%=UpdatePanelMain.ClientID%>”以及“<%=DailyStoreListView.ClientID%>”和“<%=DailyStoreListView”。 ClientID%>'.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DailyOrderSchedule.aspx.cs" MasterPageFile="~/MasterPages/Main.Master"
Inherits="OfficeIntranet.Forms.Warehouse.DailyOrdersSchedule" MaintainScrollPositionOnPostback="true" %> 

<%@ Register TagPrefix="uc" TagName="DateStoreSelectoruc"    Src="../../Controls/Warehouse/DateStoreSelector.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Order Schedule</title>
    <link href="../../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderPageHeading" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderBody"    runat="server">
    <div id="headerE" runat="server" style="text-align: center; width: auto;">
        <asp:Label ID="MainH" CssClass="headerText" runat="server">Order Schedule</asp:Label>
        <asp:Label ID="headVersion" CssClass="textarea" runat="server"></asp:Label>
    </div>
    <asp:UpdatePanel ID="UpdatePanelMain" runat="server">
        <ContentTemplate>
            <asp:Panel runat="server" ID="PanelReportInput" Width="980px" BorderColor="#CCCCCC" BorderStyle="Inset" BorderWidth="0px" Style="padding: 10px; text-align: center;">
                <asp:ListView ID="DailyStoreListView" runat="server" GroupItemCount="5" GroupPlaceholderID="GPH" style="width:940px"
                    ItemPlaceholderID="itemPlaceholder" OnItemDataBound="lv_ItemDataBound" >
                    <LayoutTemplate>
                        <div runat="server" style="padding: 2px; width: 932px; height:740px; overflow:scroll">
                            <div id="CalendarDays" style="padding: 2px">
                                <div class="SPAWeekFiller5">&nbsp;</div>
                                <div class="SPAWeekDays" style="margin-right: 2px">Friday</div>
                                <div class="SPAWeekFiller">&nbsp;</div>
                                <div class="SPAWeekDays">Thursday</div>
                                <div class="SPAWeekFiller">&nbsp;</div>
                                <div class="SPAWeekDays">Wednesday</div>
                                <div class="SPAWeekFiller">&nbsp;</div>
                                <div class="SPAWeekDays">Tuesday</div>
                                <div class="SPAWeekFiller">&nbsp;</div>
                                <div class="SPAWeekDays">Monday</div>
                                <div class="SPAWeekFiller">&nbsp;</div>
                                <div style="clear: both; padding: -1px;"></div>
                            </div>
                            <div id="groupPlaceholder" runat="server"></div>
                        </div>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <div style="padding: 6px 0px 6px 6px; width: 910px;" id="GTdIV">
                            <div id="itemPlaceholder" runat="server"></div>
                            <div style="clear: both; padding: 4px;"></div>
                        </div>
                    </GroupTemplate>
                    <ItemTemplate >
                        <uc:DateStoreSelectoruc ID="DateStoreSelectorControl" runat="server" />
                    </ItemTemplate>
                    <EmptyItemTemplate>
                        <div style="padding: 5px; height: 220px; width: 170px; float: left;">
                        </div>
                    </EmptyItemTemplate>
                    <EmptyDataTemplate>
                        <div style="padding: 10px; background: #CACACA; width: 930px;">
                        No Records Found.
                        </div>
                    </EmptyDataTemplate>
                </asp:ListView>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

这是母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="OfficeIntranet.MasterPages.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>My Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="True" >
            <Scripts>
                <asp:ScriptReference Path="../Scripts/ScrollPosition.js" />
            </Scripts>
        </asp:ScriptManager>
    <asp:Panel ID="wrapperP" runat="server">
        <div id="art-page-background-simple-gradient"></div>
        <div id="art-page-background-glare">
            <div id="art-page-background-glare-image"></div>
    ...

如果有人对我做错了什么有任何想法，我将不胜感激任何帮助/建议!

Answer 1

您的 Javascript 位于单独的文件中？

在这种情况下，标签的形式为 <%=something%> Javascript 中的值不会被您想要的实际值替换。仅当您的 Javascript 是内联的(页面的一部分)时，这才有效。

这是因为<% %>标签在将网页发送到浏览器之前由 Web 服务器上的 ASP.NET 编译器进行解释。如您所知，标签将替换为实际评估值。外部 Javascript 文件永远不会被 Web 服务器处理:当浏览器解释处理后的页面时，它会被浏览器拉入。