How do I maintain field focus on a post back (meaning prevent it from refreshing to the top of the page)?

Good day EE,

I have a form in ASP.Net that is long enough that it the bottom 4-5 fields would have to be seen by scrolling down (although filling out the form and tabbing forward gets you there as expected).

The issue is that the third to the last field is a drop down list that causes as postback so it can return the proper optoins for the drop down list right below it. When the postback triggers, the page "refreshes" and jumps to the top of the screen. I'm not losing any data, and the customer said they were fine with it, but it annoys me so I'm certain it'll reach that point with them at some point.

Also, rearranging the form is not apparently an option to those who control such decisions.

It is built in ASP.Net. I'm using VB.Net on the backend, but the drop down list and postback are not utilizing backend code, so it is all on the .asp page.

Code for  both drop down lists is shown below.
<asp:DropDownList ID="prmFacilityID" runat="server" DataSourceID="SqltblFacility2" DataTextField="FacilityName" DataValueField="FacilityID" AutoPostBack="True"> </asp:DropDownList>

<asp:DropDownList ID="prmServiceID" runat="server" DataSourceID="dboSelectService"DataTextField="ServiceNameOnly" DataValueField="ServiceID"></asp:DropDownList>

Open in new window

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shaun KlineLead Software EngineerCommented:
You can use the Page.SetFocus method:
  -- or --
You can use javascript to set the focus (which I believe the Page.SetFocus does).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
You can incorporate Ajax ... i.e. put you dropdowns inside UpdatePanel
glorrAuthor Commented:
I appreciate the feedback and am currently trying them out, starting with the Page.SetFocus method as my AJAX experience currently amounts to knowing how to spell it and a few articles that I've read on it.
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Tom BeckCommented:
Another option if Page.SetFocus does not work for you. Keep track of the current scroll position in some hidden fields, then have the window scroll to that position upon postback.
/*put this between the head tags*/
/*get the current scroll position so it can be restored after postback*/
function getScrollCoords() {
	var scrollX, scrollY;
	if (document.all) {
		if (!document.documentElement.scrollLeft)
			scrollX = document.body.scrollLeft;
			scrollX = document.documentElement.scrollLeft;
		if (!document.documentElement.scrollTop)
			scrollY = document.body.scrollTop;
			scrollY = document.documentElement.scrollTop;
	else {
		scrollX = window.pageXOffset;
		scrollY = window.pageYOffset;
	document.forms['Form1'].xCoordHolder.value = scrollX;
	document.forms['Form1'].yCoordHolder.value = scrollY;
/*set the current scroll position after postback*/
var validationError = <%=Session("ValidationError")%>;
function setScrollCoords() {
	var x = document.forms['Form1'].xCoordHolder.value;
	var y = document.forms['Form1'].yCoordHolder.value;
	if (validationError == 1) {
		window.scroll(0, 0);
	} else {
		window.scroll(x, y);
window.onload = setScrollCoords;
window.onscroll = getScrollCoords;
window.onkeypress = getScrollCoords;
window.onclick = getScrollCoords;

<!--put this just before the closing form tag-->
<input id="xCoordHolder" type="hidden" name="xCoordHolder" runat="server" /> <input id="yCoordHolder" type="hidden" name="yCoordHolder" runat="server" />

Open in new window

glorrAuthor Commented:
I appreciate the feedback.  I ended up finding a rather simple solution based on the directions that were recommended
As you can see in the code below, I was able to simply say that when the one drop down menu's value changed, to then set the focus on the next drop down list. I've tested it and it works.
I was working with Shaun's direction and it wasn't working cleanly, which lead to me digging more to find out what I was missing.
I found some more places that talked about how to do it within an AJAX Update Panel, when I thought about just going with the SetFocus(control) line since it was doing something similar (but involving a ScriptManager).
The scoll location item looks nice as well and I may have to try that out in the near future as it could help on some other forms that I'm thinking about.
I appreciate the assistance gentlemen.

Protected Sub prmFacilityID_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles prmFacilityID.SelectedIndexChanged

    End Sub

Open in new window

glorrAuthor Commented:
Heh. :facepalm:
Page.SetFocus = SetFocus in how I did it.
Of course I see that after making the above post. Ah well. I'm going to split credit between Shaun and Sami, with Shaun getting more since I was simply over complicating his answer and Sami getting some since his would have been correct if I was using AJAX and it did lead me around to where I needed to be.
glorrAuthor Commented:
Reading MSDN pages for me is hit and miss sometimes and this time it was a miss with my falling short and not coming around fully until also pursuing Sami's suggestion.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.