0

我真的很感激在这个问题上的一些帮助。我已经搜索了 SO 和 Google 寻找解决这个问题的方法，但没有找到任何 100% 有效的方法。这是我的问题（请耐心说明页面的设置方式）：

我有一个包含在母版页中的页面。此页面使用 UpdatePanel 中的 AjaxControlToolkit TabContainer。每个 TabPanel 加载不同的用户控件，每个用户控件可以包含 1:M 输入表单，这些表单根据用户是否要在控件中添加/编辑数据来显示。所有这些功能都很好用，但有时这些表单会在视口中消失。

为了尽量减少用户必须做的滚动量，我使用 PageRequestManager 实现了一个 jQuery 动画事件处理程序。本质上，我正在做的是调用 ShowForm 服务器端方法，该方法反过来构建一些 JavaScript 并将其注入到 endRequest 的页面中。这是服务器端代码：

private void ShowForm(bool pShowForm) {
    fsAdd.Visible = pShowForm;

    if (pShowForm) {
        LoadScript(FocusOnFormScript("control_client_id"), "control_client_id");
    }
}

protected void DropDownList_OnSelectedIndexChanged(object sender, EventArgs e) {
    //SelectedIndexChanged processing.
    MaintainFocusOnControl(KeepFocusOnFormScript("control_client_id"), "control_client_id");
}

private void LoadScript(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

private void MaintainFocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "maintainFocus_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form when it is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string FocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var offset = $('#" + pControlId + @"').offset();
        $('html, body').animate({ 
            scrollTop: offset.top+200,
            scrollLeft: offset.left+200}, 
            'slow', 
            'easeOutQuart'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(FocusOnFormCaller);
    }
    prm.add_endRequest(FocusOnFormCaller);
    function FocusOnFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}

/// <summary>
/// Scrolls to the form when it is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string KeepFocusOnFormScript(string pControlId) {
    string script = @"
    function KeepFocusOnForm() {
        var offset = $('#" + pControlId + @"').offset();
        window.scrollTo(offset.left+500, offset.top+500); //just jump to the position; scrolling not needed

        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(KeepFocusOnFormCaller);
    }
    prm.add_endRequest(KeepFocusOnFormCaller);
    function KeepFocusOnFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            KeepFocusOnForm();
        }
    }";
    return script;
}

这段代码在 99% 的时间里都很好用。1% 的问题发生在我拥有的一种需要级联 DropDownLists 的特定表单上。选择 DropDownList1 时，DropDownList2 被正确填充，但页面的滚动位置丢失，并且 DropDownList2 的视图移动到视口的最底部（在我现在描述的表单下方还有另一个列表和表单）。

我尝试了很多东西，包括：

  • 不同的maintainScrollPositionOnPostBack设置
  • PageRequestManager._scrollPosition = null
  • 在beginRequest中存储scrollTop并在endRequest中设置它
  • 在单独的 endRequest 中使用window.scrollTo(xPos,yPos)
  • 使用document.documentElement.scrollTop=yPos
  • jQuery 的 .scrollTop(yPos)

我觉得奇怪的是，如果我设置一个调用 window.scrollTo 或 document.documentElement.scrollTop 的手动链接，它就可以工作。我也可以只使用已经注册的 jQuery animate 事件处理程序，但是在 UpdatePanel 刷新后页面滚动到顶部，然后再次向下滚动。如果我用 window.scrollTo 或 document.documentElement.scrollTop 替换动画代码，它就不起作用。

4

1 回答 1

0

我通常做的是将scrollPos存储在隐藏的文本框中，当页面通过回发更新时，在渲染之前从文本框中获取值，然后通过一些javascript滚动到屏幕的那个部分......

于 2013-06-05T23:57:22.440 回答