回发后在 Ajax TabContainer 的 TabPanel 中保持滚动条位置答案

【问题标题】：Maintain Scrollbar Postition in TabPanel of Ajax TabContainer after Postback回发后在 Ajax TabContainer 的 TabPanel 中保持滚动条位置
【发布时间】：2011-02-18 20:52:27
【问题描述】：

如何在部分回发后保持滚动条在 Ajax TabContainer 的选项卡面板中的位置？到目前为止，我尝试了以下脚本，但它不会检索位置。

 <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('<%=InputTabPanel.ClientID%>').scrollLeft;
        yPos = $get('<%=InputTabPanel.ClientID%>').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('<%=InputTabPanel.ClientID%>').scrollLeft = xPos;
        $get('<%=InputTabPanel.ClientID%>').scrollTop = yPos;
    }
</script>

【问题讨论】：

如果您不更新 TabContainer 的外部 UpdatePanel 而是更新 TabPanel 中的更新面板，则滚动条不应移动。
我在整个 TabContainer 周围只有 UpdatePanel。我会尝试用一个包裹 TabPanel，看看它是如何工作的。
显然你不能在 UpdatePanel 中包裹一个 tabpanel，只能包裹整个 TabContainer。除非有人知道怎么做。
在回发时，我也在更新更新面板之外的页面的其他部分。这还能保住位置吗？
您应该将 TabPanel 的内容包装在 UpdatePanel 中，而不是 TabPanel 本身。

标签： asp.net .net ajax

【解决方案1】：

您可以在指令中包含 MaintainScrollPositionOnPostback，如下所示：

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

这样，ASP.NET 会自动生成 javascript。但是，如果您的控件被包装到 UpdatePanel 中，则没有理由进行完整的回发并因此失去位置。

【讨论】：

【解决方案2】：

如果您设置了脚本控件属性的 CombineScripts = True 并且在使用内容页面时将脚本或对脚本文件的引用放在 BodyContent 中，这确实有效。见下文...

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    ...move script at the top of the BodyContent area        
</asp:Content

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="Scripts/site.js" type="text/javascript"></script>

    <div>
        ...markup
    </div>

</asp:Content>

下面是我的 site.js 文件

//-------------------------------------------------------//
// Maintain scroll position in given element or control
//------------------------------------------------------//
var xInputPanel, yInputPanel;
var xProductPanel, yProductPanel;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
    yInputPanel = $get  ('MainContent_Panel1').scrollTop;
    yProductPanel = $get('MainContent_Panel2').scrollTop;
}
function EndRequestHandler(sender, args) {
    $get('MainContent_Panel1').scrollTop = yInputPanel;
    $get('MainContent_Panel2').scrollTop = yProductPanel;
}

注意：如果您不将 js 脚本移动到 BodyContent 中，您可能会收到错误“Microsoft JScript 运行时错误：'Sys' 未定义”。 Script 需要在 ScriptManager 之后运行。

【讨论】：