web-dev-qa-db-fra.com

Comment puis-je empêcher une page de passer en première position après un échec de validation?

J'ai une simple page aspx avec quelques TextBox et un bouton d'envoi. Certains champs sont obligatoires et sous le bouton se trouve un ValidationSummary. Le formulaire complet est plus grand que la hauteur de l'écran, il faut donc faire défiler l'écran pour atteindre le bouton de soumission. Si je ne remplis pas tous les champs obligatoires et que je clique sur Soumettre, la validation échoue comme prévu et le récapitulatif de validation affiche des messages d'information sous le bouton. La validation est effectuée sur le client et aucune publication n'est effectuée.

Donc tout cela fonctionne comme souhaité. Mais ce qui est dérangeant, c'est que la page se déplace ("saute") en première position lorsque je clique sur le bouton d'envoi. Pour voir le résumé de validation, il faut descendre à nouveau dans la page.

J'ai essayé de définir la propriété ShowSummary sur false (ce qui n'a pas beaucoup de sens): La validation fonctionne toujours (pas de publication), mais dans ce cas, la page ne se déplace pas en première position. Le problème semble donc dépendre du rendu des textes de validation.

Y a-t-il un moyen d'empêcher ce saut de page?

Merci d'avance!

Mettre à jour:

Le comportement que j'ai décrit ci-dessus ne semble pas dépendre du navigateur. J'ai testé dans cinq navigateurs différents et c'est partout pareil.

asp.netvalidationvalidationsummary
23
Slauma

J'ai posé la question sur asp.net ( http://forums.asp.net/p/1545969/3779312.aspx ) et j'ai obtenu des réponses avec deux solutions. Le meilleur est ce morceau de Javascript qui maintient la position de défilement:

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

Ce n'est que pour mettre sur la page et nulle part à appeler.

L'autre solution est similaire à la proposition de RioTera ici (en utilisant MaintainScrollPositionOnPostBack) mais ajoute EnableClientScript="false" aux validateurs pour forcer une publication. Cela fonctionne aussi, mais le prix est un postback artificiel.

31
Slauma

Vous pouvez utiliser la propriété MaintainScrollPositionOnPostBack:

Dans le code-behind:

Page.MaintainScrollPositionOnPostBack = true;

ou dans votre formulaire web:

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

Essayez de définir le focus de la page Page.SetFocus(control); J'ai un bouton d'insertion qui ajoute une ligne supplémentaire à mon gridview, qui est l'un des nombreux éléments d'une page afin que je puisse ajouter Page.SetFocus(control) comme dernière méthode de mon événement btnInsert_Click.

6
Kate

J'ai trouvé ce paramètre la propriété:

maintainScrollPositionOnPostBack="true"

dans votre section Web.config <pages> fonctionne bien.

3
Freddie

La page scintille car toute la page est renvoyée sur le serveur et le contenu est renvoyé à partir du serveur. Vous devez utiliser la balise UpdatePanel pour entourer l'endroit que vous souhaitez actualiser. Il ne fera que poster les informations qui sont à l'intérieur de la balise

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

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

1
Hoy Cheung

J'utilise MVC5 et le seul moyen d'arrêter le saut était d'utiliser le code JQuery ci-dessous.

J'ai testé la solution sur Safari, Chrome, Mozilla, Internet Explorer et Opera.

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

Malheureusement, MantainScrollPositionOnPostback ne fonctionne plus sur les navigateurs modernes . Pour une solution compatible avec plusieurs navigateurs, vous pouvez utiliser cet extrait (nécessite 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>

Voir aussi ma réponse ici .

0
Darkseal