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.
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.
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" %>
Try setting the page focus Page.SetFocus(control);
I have an insert button which adds an extra row to my gridview, which is one of many items on a page so I can add Page.SetFocus(control)
as the last method in my btnInsert_Click event.
I've found that setting the property:
maintainScrollPositionOnPostBack="true"
in your Web.config <pages>
section works well.
The page flickers because the whole page is posted back to the server and the content is sent back from server again. You need to use UpdatePanel tag to surround the place you want to refresh. It will only postback the information which is inside the tag
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
Read http://msdn.microsoft.com/en-us/library/bb386573(v=vs.100).aspx#CodeExamples
Unfortunately MantainScrollPositionOnPostback doesn't work anymore on modern browsers. For a cross-browser-compatible solution you can use this snippet (requires jQuery):
<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
$(function () {
var f = $("#<%=hfPosition.ClientID%>");
window.onload = function () {
var position = parseInt(f.val());
if (!isNaN(position)) {
$(window).scrollTop(position);
}
};
window.onscroll = function () {
var position = $(window).scrollTop();
f.val(position);
};
});
</script>
See also my answer here.
I'm using MVC5 and the only way to stop the jump was with the JQuery code below.
I've tested the solution on Safari, Chrome, Mozilla, Internet Explorer and Opera.
$(document).scrollTop($('form#formCheckout').offset().top);
event.stopPropagation();
event.preventDefault();
来源:https://stackoverflow.com/questions/2613411/how-can-i-prevent-a-page-to-jump-to-top-position-after-failed-validation