ASP.NET AJAX UpdatePanel scrolling problem

问题

I'll try and be concise:

I have a dropdownlist with Autopostback set to true
I have an UpdatePanel that contains a Label.
When the downdownlist selection is changed, I want to update the label.

Problem: Focus is lost on the dropdownlist, forcing the user to click on the dropdownlist to reset focus back to the control.

My "solution": In the DropDownList_SelectionChanged event, set focus back to the drop down list:

dropdownlist1.focus()

While this works great in IE, Firefox and Chrome change the scroll position such that the control which was assigned focus is positioned at the bottom on the visible portion of the browser window. This is often a very disorientating side effect.

How can this be avoided so it works in FF as it does in IE?

回答1:

Try MaintainScrollPositionOnPostback in one of these 3 ways

Programmatically - Page.MaintainScrollPositionOnPostBack = true;
Page declaration - <%@ Page MaintainScrollPositionOnPostback="true" %>
In the web.config - <pages maintainScrollPositionOnPostBack="true" />

You may also need to add this javascript after the scriptmanager declaration:

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(beginRequest);

function beginRequest()
{
    prm._scrollPosition = null;
}

</script>

回答2:

Velika - Sorry for the delay. If you are using a master page add :

<asp:ScriptManagerProxy runat="server" ID="smp"></asp:ScriptManagerProxy>

Otherwise just add

<asp:ScriptManager runat="server" id="sm" />

回答3:

Had the exact same issue and got the answer. Hope this helps : http://forums.asp.net/p/1622050/4164858.aspx#4164858

 <script type="text/javascript">  
 var xPos, yPos;  
 var postBackElement;  

 var prm = Sys.WebForms.PageRequestManager.getInstance();  
 prm.add_endRequest(EndRequestHandler);  
 prm.add_initializeRequest(InitializeRequest);  

 function EndRequestHandler(sender, args) {  
     if (postBackElement != null) {  
         document.getElementById(postBackElement.id).focus();  
     }  
 }  
 function InitializeRequest(sender, args) {    
      postBackElement = args.get_postBackElement();    
  }

回答4:

try this one

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(beginRequest);

    function beginRequest() {
        prm._scrollPosition = window.top;
    }
</script>

回答5:

public static void SetFocusByJavaScript(Page page, string clientID)
        {
            string uniqueScriptId = String.Concat("focusScript", clientID);
            string scriptBody = String.Format("setTimeout(\"$get('{0}').focus();\", 100);", clientID);
            ScriptManager.RegisterStartupScript(page, page.GetType(), uniqueScriptId, scriptBody, true);
        }

This is how I have been getting around this issue. The example requires jquery, but you could rewrite if needed. Basically just delays the focus script.

来源：https://stackoverflow.com/questions/2547763/asp-net-ajax-updatepanel-scrolling-problem

标签

ASP.NET

ajax

updatepanel

focus

vertical-scrolling