Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I prevent a page to jump to top position after failed validation?

Tags:

I have a simple aspx page with a few TextBoxes and a submit button. Some fields are required and below the button is a ValidationSummary. The complete form is larger than screen height so one has to scroll down to reach the submit button. If I don't fill all required fields and click on submit validation fails as expected and the validation summary displays some info messages below the button. Validation happens on the client and no postback occurs.

So this all works as wished. But disturbing is that the page moves ("jumps") to top position when I click on the submit button. To see the validation summary one has to move down the page again.

I've tried to set the ShowSummary property to false (which doesn't make much sense): The validation still works (no postback) but in this case the page does not move to top position. So the problem seems to depend on rendering the validation texts.

Is there a way to prevent this page jump?

Thank you in advance!

Update:

The behaviour I described above doesn't seem to be browser dependent. I've tested in five different browsers and it's everywhere the same.

like image 979
Slauma Avatar asked Apr 10 '10 12:04

Slauma


2 Answers

I've asked the question on asp.net (http://forums.asp.net/p/1545969/3779312.aspx) and got replies with two solutions. The better one is this piece of Javascript which maintains the scroll position:

<script type="text/javascript">     window.scrollTo = function( x,y )      {         return true;     } </script> 

This is only to put on the page and nowhere to call.

The other solution is similar to RioTera's proposal here (using MaintainScrollPositionOnPostBack) but adds EnableClientScript="false" to the Validators to force a postback. It works too, but the price is an artificial postback.

like image 128
Slauma Avatar answered Oct 17 '22 03:10

Slauma


You can use the the Page property MaintainScrollPositionOnPostBack :

In the code-behind:

Page.MaintainScrollPositionOnPostBack = true; 

or in your webform:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %> 
like image 37
riotera Avatar answered Oct 17 '22 04:10

riotera