How to Position the ASP.NET page to a particular vertical position on PostBack ...

<< MCMS 101 - Getting/Searching list of Channels or Postings by Custom Property .... | Home | MCMS 101 - Creating a BreadCrump Control that skips undesired Channels (Folders) >>

How to Position the ASP.NET page to a particular vertical position on PostBack ...

In ASP.Net projects I have come across numerous time that you need to position the the page at certain vertical location on PostBack. For example you might have multiple long Panels or grids that when clicked need to post back the data to the server and return to certain other panel or Grid on the Page. SmartNavigation feature of ASP.Net allows you to keep the last click position on post back but does not allow the positioning of the page to any other desired location.

The solution is to put the bookmarks on the .aspx page and then using the Javascript jump to the desired bookmark on PostBack ... i.e.

Now on Post Back I can inject a simple Javascript code to the page .....

//Script for Bookmark Positioning
StringBuilder Script = new StringBuilder();
Script.Append("\n<script language=JavaScript id='BookMarkScript'>\n";");
Script.Append("var hashValue="#MyPanelInMiddle";");
Script.Append("if(location.hash!=hashValue) ");
Script.Append("location.hash=hashValue;");
Script.Append("</script>");
RegisterClientScriptBlock ("BookMarkScript", Script.ToString());

This will result in the page being position where the bookmark tag is placed on he page.

Print | posted on Wednesday, May 25, 2005 11:21 PM | Filed Under [ ASP.NET ]

Feedback

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

This post helped me, but it didn't work.

The name attribute i.s.o. href attibute was needed in bookmark.

Somewhere in page I put:

<a name="MyPanelInMiddle"/>

this worked.

Below complete function content, i check on existince of controls and focus on that control as well:

private void SetFocusControl(string ControlName1, string ControlName2)
{
string scriptString = "<script language=javascript>";
scriptString += " var control = document.getElementById(" + '"' + ControlName1 + '"' + ");";
scriptString += " if( control != null ){control.focus(); location.hash = '#wijzigen';}";
scriptString += " else {";
scriptString += " control = document.getElementById(" + '"' + ControlName2 + '"' + ");";
scriptString += " if( control != null ) {control.focus(); location.hash = '#aanvragen';}";
scriptString += " }";
//scriptString += " alert('location.hash=' + location.hash)"; // test
scriptString += "</script>";

if(!this.IsStartupScriptRegistered("Startup"))
this.RegisterStartupScript("Startup", scriptString);
}

6/9/2005 5:07 AM | Jos Boelens

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Hello,
Ur code was fantastic. It was of great help to us.

Thanks
Online

7/22/2005 11:14 PM | Online

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

One other thing that I have found that works was to just set the page's SmartNavigation = true. This allows .NET to remember the vertical location of the page so you don't have that problem. I have found that this works in most cases, but not all.

7/28/2005 9:56 AM | uadrive

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Instead of breaking ur head like this, u can set the SmartNavigation to true....it will work..

8/24/2005 7:43 AM | Sumanesh

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

True, the smart nav works but only if you want it to stay in the same position..

For what i needed, the page needed to jump to a different part of the page depending on what button was clicked so smart nav didnt work..

Also, im a vb.net programmer so for others like me, this is the code in VB:

Put you anchor on the page where you want to jump to like:

<A name="jumphere">

Then put a sub in you code behind:

Private Sub registerAnchorScript(ByVal strAnchorID As String)
Dim Script As String
Script &= "<script language=JavaScript id='BookMarkScript'>" & vbCrLf
Script &= "var hashValue='#" & strAnchorID & "';" & vbCrLf
Script &= "if(location.hash!=hashValue)" & vbCrLf
Script &= "location.hash=hashValue;" & vbCrLf
Script &= "</script>" & vbCrLf

If (Not Page.IsStartupScriptRegistered("BookMarkScript")) Then
Page.RegisterStartupScript("BookMarkScript", Script)
End If

End Sub

Then depending on which button, etc is clicked you can pass a different anchor id to the sub i.e. registerAnchorScript ("jumphere")

Anyway, cheers for the code guys - works great!

8/24/2005 11:40 AM | Dave

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Cool code, but is there anyway to prevent a new instance of the page being generated every time the user executes the above block of code?

Michael.

10/5/2005 2:25 AM | Michael O'Donnell

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

I just have one question..could this code work inside a page which is a user control i.e and ascx control?
I have a page which is itself a user control and I need to apply this logic to a portion of my page.Just wondered if someone has tried it out in a user control.

10/5/2005 11:46 AM | Ranjita

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Great piece of code guys! This is exactly what I needed! You guys ROCK!

10/5/2005 1:19 PM | Dookiebomb

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Yes Ranjita you can use it from User Control.
You just have to access the Page Object from this.Page property of User Control.The rest is all javascript ..

10/5/2005 1:34 PM | JawadKhan

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

THANK YOU! This rocks.

1/31/2006 2:27 PM | Neil

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Use smartNavigation="True" feature of asp.net but it cant work with javascript so if u r using javascript anywhere in a page than its not working good.

Add smartNavigation="True" tag in Page Directive line

Bye,
Diamond

3/29/2006 5:22 AM | Diamond

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

My experience of smartNavigation is that it only works on pages which remain visually consistent across postback. If you have dynamic pages which show / hide certain elements then its unlikely to work.

6/27/2006 11:25 PM | boon

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

This is really good stuff. I was having trouble with some web custom controls that were anoying my users because they always lost their place on postback. Thanks for your efforts.

Aken

11/5/2006 12:16 PM | Aken

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Hi Guys,

thanks for info very helpful, with respect to the vb code had error message, however renamed the Scipt variable to Strscript and third last line changed to

strScript &= "<" & "/script>" & vbCrLf

and works ok.

12/14/2006 4:57 PM | Mike Clifford

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Thanks to everyone who worked out this solution, the original post, the vb.net version and the correction in the last post. It took ages for me to find this solution for something that really is an essential process.

As for smartNavigation="True", apart from the fact that it is not a soluion to the problem identified, I haved tried it and not only does it not work with all browsers, but it has 'features'.

If you do want to position the cursor where it was before the PostBack, then there is a great solution provided at http://aspnet.4guysfromrolla.com/articles/111704-1.aspx

1/22/2007 1:11 PM | Kevin

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Thx guys! This was hard to find!
SmartNavigation is the one and only thing i needed :)
But the script for letting you navigate where you want can
be handy in the future thx 2!

Grtz

4/25/2007 7:12 AM | Lawrence

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Did anyone try to use this code in a content page with a master page? When I try to do this, the master page disappears.

TIA

10/10/2007 1:50 PM | Deepa

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

In ASP.NET 2.0 in the Page Directive use

MaintainScrollPositionOnPostback="true"

Simple as that, no extra code needed

2/29/2008 10:51 AM | Thomas Eriksson

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

se enter a comm

4/10/2008 8:50 AM | se enter a comm

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Thanks a lot! . I have been googling this topic forever :) I have tested the solution in all major browsers and it also works in a masterpage scenario.

Good work!

5/20/2008 2:53 AM | Tor Christian

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Or you can save a bunch of coding and write two lines of code

e.Cell.Attributes.Add("OnClick", "javascript:location.href('#jump')")

this will work for a calendar.

9/8/2008 12:10 PM | notsobright

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

MaintainScrollPositionOnPostback="true" does not allow the script to work

9/17/2008 7:19 AM | F.Y.B.

# re: How to Position the ASP.NET page to a particular vertical position on PostBack ...

Greate hint!

I made two changes:
1 - to

2- RegisterClientScriptBlock ("BookMarkScript", Script.ToString()); to
ClientScript.RegisterClientScriptBlock(GetType(), "BookMarkScript", Script.ToString());

Maybe it was necessary beacuse i'm using .NET 2.0
Thanks!

9/25/2008 2:53 PM | Michel

Post Comment

Title
Name
Email
Url
Comment
Remember Me?
Please add 2 and 1 and type the answer here:

Jawad Khan

My Links

News

Archives

Post Categories

Image Galleries