c# - 自定义 ASP.NET 控件中的 Begin/EndRequestHandler 多个处理程序

Question

我有一个自定义 ASP.NET 控件，一个下拉列表/ TreeView ，它需要添加 Begin(End-)RequestHandlers 以防止在 UpdatePanel 部分回发期间滚动到容器顶部(如所述 here )。它们是动态添加的，如下所示:

Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Format(@"
                  var xPos, yPos;
                  var prm = Sys.WebForms.PageRequestManager.getInstance();

                  function BeginRequestHandler(sender, args) {{
                    if ($get('{0}') != null) {{
                      // Get X and Y positions of scrollbar before the partial postback
                      xPos = $get('{0}').scrollLeft;
                      yPos = $get('{0}').scrollTop;
                    }}
                 }}

                 function EndRequestHandler(sender, args) {{
                     if ($get('{0}') != null) {{
                       // Set X and Y positions back to the scrollbar
                       // after partial postback
                       $get('{0}').scrollLeft = xPos;
                       $get('{0}').scrollTop = yPos;
                     }}
                 }}

                 prm.add_beginRequest(BeginRequestHandler);
                 prm.add_endRequest(EndRequestHandler);  ", this.ItemsContainer.ClientID), true);

当我向页面添加多个控件实例时，问题就出现了。这两个脚本都被渲染和注册，但最终只有一个，即页面上的最后一个，最终附加到容器，即。只要面板 X 或 Y 中有更新，则仅执行面板 Y 的 JS - 两次!

更好的选择肯定是仅附加一对开始/结束处理程序，我可以通过例如为 RegisterStartupScript 方法添加静态键来执行此操作。唯一的问题是我需要传递当前更新 UpdatePanel 的面板参数。

知道如何做到这一点，并与上面的结合起来吗？

Answer 1

此修改会自动恢复所有面板的滚动位置。

<script type="text/javascript">
    (function () {
        var scrolledDivs = [];
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_beginRequest(function (sender, args) {

            //store the scroll positions of all "scrolled" div elements
            //UpdatePanel and Panel both are div elements
            scrolledDivs = [];

            $('div').each(function () {
                var div = $(this);
                if (div.scrollLeft() != 0 || div.scrollTop() != 0) {
                    scrolledDivs.push({
                        element: this,
                        scrollLeft: div.scrollLeft(),
                        scrollTop: div.scrollTop()
                    });
                }
            });
        });

        prm.add_endRequest(function (sender, args) {
            //restore scroll positions
            $.each(scrolledDivs, function (index, value) {
                $(value.element).scrollLeft(value.scrollLeft).scrollTop(value.scrollTop);
            });
        });
    })();
</script>

注意:您需要包含 JQuery