ASP.NET UpdatePanel问题维护页面滚动位置与级联DropDownLists

Question

我真的很感谢在这个问题上的一些帮助。我搜索过谷歌和谷歌正在寻找解决这个问题的方法，并没有发现任何可以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
• 存储scrollTop的在的BeginRequest，并将其设置在endRequest
• 在一个单独的endRequest
• 使用document.documentElement.scrollTop = yPos
• jQuery的.scrollTop（yPos）

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

Answer 1

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