How can I stop a postback from bringing page to top ? 6

[JCruz063]

Hi All,
I have a form with some widgets that cause postback when clicked. The form is a bit longer (in terms of height) than the screen and so scroll bars show up on the page. Some of the widgets that cause postback are near the bottom of the form (and no, I cannot put them anywhere else). The problem is that when postback occurs, the form displays its top portion regardless of where it was. In other words, if the user was at the bottom of the page when the postback occurs, he's taken back to the top and is forced to scroll down to get to where he was.

Now, research shows that, in the United States, this problem is by far the #1 cause of frustration, depression, and suicide among programmers new to ASP.NET. Also, the literature states that users who use a web page in which clicking on a button takes them back to the top, regardless of where they were, take action against the programmer who created such page. These actions include firing, torturing, and sometimes even murdering the programmer.

As you see, I am in serious danger. If none of you tells me how I can make the page stay where it is after a postback, the world may lose a very valuable human being. Please don't let this tragedy occur and help me out!

Thanks in advance.

JC

 

[LV]

Try enabling SmartNavigation, that's what is serves for.

<%@ Page language=&quot;c#&quot; Codebehind=&quot;MyPage.aspx.cs&quot; AutoEventWireup=&quot;false&quot; Inherits=&quot;MyProject.MyPage&quot; SmartNavigation=&quot;true&quot;%>

Make sure you have \aspnet_client\1_1_4322\ directory(if on Framework 1.1) with SmartNav.js and SmartNav.htm files in it on the root of your site.

 

[dragonwell]

Smart Navigation is definately the recommended method, but remember that it only works in Internet Explorer 5.0 or better. If, for some remote reason, you need to support other browsers, you can use this hack I came up with before I knew about SmartNav..

Put an "Anchor" somewhere in your html where you want the focus to return to after postback:

<a name=&quot;myAnchor&quot;></a>

Then during your postback event, last thing you do is inject some javascript that tells sets the current location to the current url, along with the "#" + anchor name appended to the querystring...(

http://server.com/mypage.aspx#myAnchor)

//some utlitity method...
public static void GoToAnchor(System.Web.UI.Page page, string anchor){
    string script = &quot;<SCRIPT language = 'javascript'>window.location.href='#&quot; + anchor + &quot;'</SCRIPT>&quot;;
	
    page.RegisterStartupScript(&quot;anchor&quot;, script);
}

//in your page
GoToAnchor(this, &quot;myAnchor&quot;);

HTH

 

[jn03]

I assume this will work with Netscape 4.7 ? This sure is helpful for me. Will give it a try. Thanks a bunch, Dragonwell.

 

[BoulderBum]

Smart navigation is an IE only feature, I believe. It's convenient beyond keeping scroll position (it keeps a postback from being cached and maintains focus on a control) but it's terribly buggy. Everytime I've tried to use it, it ends up breaking part of the app, so I turn it off.

 

[dragonwell]

::I assume this will work with Netscape 4.7 ?

Actually, I have not tested it in Netscape, but theoretically it should work, although you may have to adjust to javascript syntax just a little.

d

 

[JCruz063]

Thanks a lot guys...

Dragonwell,
That anchor hack of yours is very nifty. Now, let me ask you something: Will the page show at the same position (i.e. where the anchor is) for every postback, and if so, how can I create the anchor dynamically based on the position of the scroll bars of the page so that the page is always shown where it was before the postback?

For example, before a postback, users may be anywhere on the page (e.g. top, middle, bottom, etc). If the position of the anchor is fixed at design time, the page will always return to the anchor position after a postback but the user may have been at a slightly different place. On the other hand, if the anchor is dynamically created right before the postback, say by some script function, then the user will be returned exactly where he was before the postback. Can this be done?

Thanks in advance!

JC

 

[dragonwell]

Thanks - what I used it for a lot is in-grid data editing, so when a user scrolls down and finds the record they want to edit and clicks the "edit" link, the page reloads and the srcolling is set to somewhere around that DataGrid item. I did this by putting an anchor somewhere in the EditItemTemplate, and using the current item index as it's name

<EditItemTemplate>
<a name=<%#Container.ItemIndex%>&nbsp;</a>
</EditItemTemplate>

Then, during the EditItemCommand event handler, I set the grid's EditItemIndex as usual, re-bind, and then call the GoToAnchor function - supplying the itemIdex as a the name of the anchor to go to

GoToAnchor(this, e.Item.ItemIndex.ToString());

So if I'm editing the first row in the datagrid, the url looks like page.aspx#0, editing the fifth item would give page.aspx#4, etc.

 

[JCruz063]

Alright,
I don't have a datagrid on my form but I'll play with it and see what I come up with.

Thanks!

JC

 

[checkai]

\aspnet_client\1_1_4322\ directory(if on Framework 1.1) with SmartNav.js and SmartNav.htm files in it on


where do i find these files???

dlc

 

[LV]

You should find the aspnet_client directory on the root of Default Web Site, that's where it's installed by default.

 

[arst06d]

Hi
What's this GoToAnchor function? Throws an error on my asp.net web form. Is it only for c#? If so, is there a vb.net equivilent?

 

[LV]

You have to write it yourself, look at dragonwell's first post.

 

[livezone]

I am using the same trick in classic ASP pages. But there is one drawback putting anchor is that any field.focus() used in Onload will not work as focus is to the anchor.

Thanks
Shafiq

 

[Isadore]

live: Set your focus on Load; and do not set it on Postback (using code behind).

 

[checkai]

I am looking to do something like this for a datalist within a datalist...

I have a datalist that when a user clicks a button, a second datalist shows directly under that row...

Now both of these are in a <DIV> tag so that I can scroll...

If I click on an item that is below the initial scroll line, the second datalist is not visible...just the Row of the first datalist...Making sense?

currently I am using Smart Navigation...but I'd like to use the anchor method if the results are better...

"...we both know I'm training to become a cagefighter...see what happens if you try 'n hit me..."

 

[ca8msm]

Another solution (one that I use) is to find which control caused the postback and then add a javascript function to set focus to that control. This can all be done server side and (if you use inheritance) is very easy to implement for whichever pages need it.

----------------------------------------------------------------------

Need help finding an answer?

Try the search facility (

http://www.tek-tips.com/search.cfm)

or read FAQ222-2244 on how to get better results.

 

[dace]

Another method that works for any case and doesn't need controls or anchors is to add a script like:

<script language="javascript"> 
function setScrollPos(scrollPos) {
   document.body.scrollTop=scrollPos;
}
</script>

-When you post back, read document.body.scrollTop (by making a javascript function that adds it as a parameter to each of your urls, for instance, or add it as an argument when the callback function executes), then set onLoad=setScrollPos(___) as part of your body tag.