C# – Maintaining Scroll Position and Selected Control on Postback

asp.netcpostback

Back with another web based issue.

When a control issues a postback to the server the page refreshes (Fine). The page also scrolls back to the top and loses the control that is selected. If it's relevent after the postback depending on what changes have happened controls are made visible or made hidden. The focus is lost and current scroll resets even if nothing is changed on the page visibility wise. The data inputted in Text fields is kept and so are any radiobutton/checkbox selections. The problem is tabbing is reset to index 0 and the pages scroll is sent back to the top of the page.

I am using .Net 4.0

I have tried adding MaintainScrollPositionOnPostback="true" both on the asp page itself and in the web.config to no avail.
I have tried with and without the Ajax updatepanel using conditional updating triggering off when textboxes text is changed or radiobuttons are changed and the postback still causes a scroll and index loss.

Any ides would be fantastic. Ta!

Best Answer

First of all, the MaintainScrollPositionOnPostback="true" has a known bug in asp.net 2.0, see here.

Also, the correct syntax is maintainScrollPositionOnPostback. (lowercase m)

I used the maintainScrollPositionOnPostback but have many problems in IE, then I use the asp.net AJAX Control Toolkit UpdatePanel, it solves the problem (the page don't scroll to the top) and save some bandwidth.

EDIT:

I think I understand your problem, it's mantain the focus on the element, it can be done using some javascripts workarounds, se here.

Hope that helps.

Related Solutions

Jquery – ASP.NET AJAX postback and jQuery

First step would probably be to move the TextBox outside of the UpdatePanel (and use RegisterAsyncPostbackControl), which should solve the focus problem.

To solve the problem of postbacks on every keypress, what I've done in the past is trigger a timer to check the control for changes every X milliseconds instead of on every change. The process flow would look something like this:

TextBox's onchange event is triggered
UpdatePanel is updated
TextBox's onchange event is cleared, timer is set to check for value change in X milliseconds
If value changed again, UpdatePanel is updated, timer is reset to check again in X milliseconds
If value did not change, TextBox's onchange event is reset to go back to step #1

This way you have more control over how often the panel gets updated.

Scroll to top of page after ASP.Net Ajax Async-Postback without JQuery

Have you tried window.scrollTo(0, 0); ?

If you have, perhaps combine in with setTimeout

window.setTimeout("window.scrollTo(0, 0)", 3000);

Although I expect this might produce some ugly jumping around.

An alternative would be to hook into the EndRequest event handler

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
    window.scrollTo(0, 0);
}

Best Answer

Related Solutions

Jquery – ASP.NET AJAX postback and jQuery

Scroll to top of page after ASP.Net Ajax Async-Postback without JQuery

Related Topic