Come posso evitare che una pagina salti in cima dopo la convalida fallita?

Question

Ho una semplice pagina di aspx con alcuni TextBox e un pulsante di invio. Alcuni campi sono obbligatori e sotto il pulsante si trova un ValidationSummary. La forma completa è più grande dell'altezza dello schermo, quindi è necessario scorrere verso il basso per raggiungere il pulsante di invio. Se non compilo tutti i campi richiesti e clicco su invio la convalida fallisce come previsto e il riepilogo della validazione mostra alcuni messaggi informativi sotto il pulsante. La convalida avviene sul client e non si verifica alcun postback.

Quindi tutto funziona come desiderato. Ma inquietante è che la pagina si sposta ("salta") in alto quando faccio clic sul pulsante di invio. Per vedere il riepilogo della convalida, è necessario spostarsi nuovamente verso il basso.

Ho provato a impostare la proprietà ShowSummary su false (che non ha molto senso): la convalida funziona ancora (senza postback) ma in questo caso la pagina non si sposta nella posizione superiore. Quindi il problema sembra dipendere dal rendering dei testi di validazione.

C'è un modo per impedire il salto di questa pagina?

Grazie in anticipo!

Aggiornamento:

Il comportamento che ho descritto sopra non sembra essere il browser dipendente. Ho provato in cinque diversi browser ed è ovunque lo stesso.

Answer 1

Ho chiesto alla domanda su ASP .net (http://forums.asp.net/p/1545969/3779312.aspx) e ha ottenuto risposte con due soluzioni. Quella migliore è questo pezzo di JavaScript che mantiene la posizione di scorrimento:

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

Questo è solo per mettere sulla pagina e in nessun posto da chiamare.

L'altra soluzione è simile alla proposta di RioTera qui (utilizzando MaintainScrollPositionOnPostBack) ma aggiunge EnableClientScript="false" ai Validator per forzare un postback. Funziona anche, ma il prezzo è un postback artificiale.

Answer 2

È possibile utilizzare la MaintainScrollPositionOnPostBack la proprietà Pagina:

Nel code-behind:

Page.MaintainScrollPositionOnPostBack = true; 

o nel vostro modulo web:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %> 

Answer 3

l'impostazione della pagina di messa a fuoco Page.SetFocus(control); Prova Ho un pulsante Inserisci che aggiunge una riga in più per il mio GridView, che è uno dei tanti elementi in una pagina in modo da poter aggiungere Page.SetFocus(control) come ultimo metodo nel mio caso btnInsert_Click.

Answer 4

Lo sfarfallio della pagina perché l'intera pagina viene registrata sul server e il contenuto viene nuovamente inviato dal server. È necessario utilizzare il tag UpdatePanel per circondare il luogo che si desidera aggiornare. Sarà postback solo le informazioni che si trova all'interno del tag

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
    <!-- Place updatable markup and controls here. --> 
</ContentTemplate> 
</asp:UpdatePanel> 

Leggi http://msdn.microsoft.com/en-us/library/bb386573(v=vs.100).aspx#CodeExamples

Answer 5

Purtroppo MantainScrollPositionOnPostback non funziona più sul browser moderni. Per una soluzione cross-browser compatibile è possibile utilizzare questo frammento (richiede 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> 

Vedi anche la mia risposta here.

Answer 6

ho trovato che l'impostazione della proprietà:

maintainScrollPositionOnPostBack="true" 

nella tua sezione Web.config <pages> funziona bene.

Answer 7

Sto utilizzando MVC5 e l'unico modo per interrompere il salto era con il codice JQuery di seguito.

Ho provato la soluzione su Safari, Chrome, Mozilla, Internet Explorer e Opera.

$(document).scrollTop($('form#formCheckout').offset().top); 
    event.stopPropagation(); 
    event.preventDefault();