使用弹出控件扩展器 Asp.net 在更新面板内维护滚动位置复选框列表？

Posted 2023-03-10

【中文标题】使用弹出控件扩展器 Asp.net 在更新面板内维护滚动位置复选框列表？

【英文标题】：Maintain scroll position checkbox list inside update panel with popup control extender Asp.net?

【发布时间】：2014-11-02 11:15:38

【问题描述】：

我正在尝试保持更新面板内复选框列表的滚动位置。

我已经使用文本框、面板和弹出扩展器构建了我自己的控件，当在文本框中标记复选框项目选择但其滚动位置不保持时，通过单击面板和面板内的复选框列表来扩展文本框？

我的代码：

<div>
    <asp:UpdatePanel ID="updatepanel1" runat="server" RenderMode="Inline">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server" DynamicServicePath=""
                Enabled="True" ExtenderControlID="" TargetControlID="TextBox1" PopupControlID="Panel1"
                OffsetY="22">
            </asp:PopupControlExtender>
            <asp:Panel ID="Panel1" runat="server" Height="116px" Width="145px" BorderStyle="Solid"
                BorderWidth="2px" Direction="LeftToRight" ScrollBars="Auto" BackColor="#CCCCCC"
                Style="display:none ">
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataTextField="holiday_name"
                    DataValueField="holiday_name" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" > 
                </asp:CheckBoxList>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

我用这个帖子试了一下，

Maintain Panel Scroll Position On Partial Postback ASP.NET

我使用了类似的脚本，

<script type="text/javascript">
    var xpos, ypos;
    var pra = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) 
        alert("hello");
        if ($get('<%=CheckBoxList1.ClientID%>') != null) 
            xpos = $get('<%=CheckBoxList1.ClientID%>').scrollLeft;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop;
        
    

    function EndRequestHandler(sender, args) 
        if ($get('<%=CheckBoxList1.ClientID%>') != null) 
            xpos = $get('<%=CheckBoxList1.ClientID%>').scrollLeft = xpos;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop = ypos;
        
    

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

...但是这个脚本不能正常工作，它没有警告“你好”，也许它没有调用方法？？

希望得到建议，因为我一直在搜索并尝试解决此问题。

谢谢

【参考方案1】：

脚本有错误。您将其定义为pra 并使用prm，将其更改为：

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

也可以使用window.scrollTo(positionX, positionY); 来定位，完整代码为：

<script type="text/javascript">
    var xpos, ypos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) 
        alert("hello");
        if ($get('<%=CheckBoxList1.ClientID%>') != null) 
            xpos = $get('<%=CheckBoxList1.ClientID%>').offsetLeft;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop;
        
    

    function EndRequestHandler(sender, args) 
        if ($get('<%=CheckBoxList1.ClientID%>') != null) 
            xpos = $get('<%=CheckBoxList1.ClientID%>').offsetLeft= xpos;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop = ypos;

            window.scrollTo(xpos, ypos);
        
    

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

通常脚本可以完成这项工作。

打开浏览器的调试工具，看看有没有其他的javasript错误。

您也可以尝试从这个答案滚动的功能https://***.com/a/6356328/159270

【讨论】：

甚至没有提醒你好

你好没有提醒，我用你更新的答案，但它不工作

我在 IE 中运行它，所以如果 JS 中有任何错误，则必须显示错误，但没有提及 js 中的任何错误？

现在它正在打印你好但不保持位置:(

@user3664724 使用这里的脚本***.com/questions/6355482/… 移动它...