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

时间:2014-09-09 06:13:52

标签: javascript asp.net custom-controls updatepanel modalpopupextender

我正在尝试维护更新面板中复选框列表的滚动位置。

我使用文本框,面板和弹出扩展程序来构建我自己的控件,通过使用面板上的单击和框内的复选框列表来扩展文本框时标记复选框项目在文本框中选择但其滚动位置不保持?

我的代码:

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

...但是这个脚本不能正常工作它没有警告&#34;你好&#34;也许它没有调用方法??

希望获得我一直在寻找和尝试解决此问题的建议。

由于

1 个答案:

答案 0 :(得分:0)

该脚本有一个错误。您将其定义为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://stackoverflow.com/a/6356328/159270