Question

我有一个自定义ASP.NET控件，一个下拉/树视图，需要添加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 - 两次！

一个更好的选择肯定会只附加一对Begin / End处理程序，我可以执行这些处理程序，例如，为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

Answer 2

使用LostInComputer中的位修改代码，解决方案如下所示：

            Page.ClientScript.RegisterStartupScript(this.GetType(), "scrollRestorer", @"
                  var scrolledDivs = [];
                  var prm = Sys.WebForms.PageRequestManager.getInstance();

                  function BeginRequestHandler(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.id,
                                scrollLeft: div.scrollLeft(),
                                scrollTop: div.scrollTop()
                            });
                        }
                    });
                 }

                 function EndRequestHandler(sender, args) {
                    //restore scroll positions
                    $.each(scrolledDivs, function (index, value) {
                        $('#' + value.element).scrollLeft(value.scrollLeft).scrollTop(value.scrollTop);
                    });
                 }

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

项目本身不能存储在数组中，只应存储ID。

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

2 个答案: