Formation PUB770 : ASP.NET WebForms, H-2015 L'ergonomie

22.2 Action par défaut de la touche Entrée


Il est facile de déterminer le fonctionnement de la touche Entrée en attribuant une valeur à la propriété DefaultButton du composant <Form>.

Ex :

Fichier .aspx (ASP.NET)

<form id="formDefault" runat="server" defaultbutton="buttonSoumettre">

▼Publicité Le texte se poursuit plus bas

Si la page contient plusieurs boutons de soumission

Dans le cas où une page Web contient plusieurs boutons de soumission (ex : un pour s'authentifier, un pour effectuer une recherche, etc.), la technique consiste à placer les contrôles de saisie et les boutons dans un panel. Il sera ainsi possible d’assigner la propriété DefaultButton du panel. Dans le cas où une page Web comporte plusieurs boutons, la touche Entrée activera le bouton par défaut du panel ayant le focus.

Ex :

Fichier .aspx (ASP.NET)

<asp:Panel ID="panelAuthentif" runat="server" DefaultButton="buttonSoumettre">

   ...

   <asp:TextBox ID="textBoxUsager" runat="server"></asp:TextBox>

   ...

   <asp:Button ID="buttonSoumettre" runat="server" Text="Soumettre" />

</asp:Panel>

Pages maîtresses

Prenons le cas où la balise <form> est sur une page maîtresse et que le bouton à utiliser par défaut n'est pas défini sur la page maîtresse. Il est possible à ce moment de définir le bouton par défaut dans le Page_Load de la page enfant (attention : pas dans le Page_Load de la page maîtresse) :

Ex :

Fichier .aspx.cs (ASP.NET avec C#)

this.Form.DefaultButton = this.buttonSoumettre.UniqueID;

Notez l’utilisation de UniqueID.

Cette propriété, dont la valeur sera sous la forme "ctl00$contentPlaceHolderCorpsPage$buttonSoumettre", contient la valeur de l'attribut name du contrôle HTML généré par le contrôle serveur.

Sa valeur est construite à partir de l'identifiant du contrôle serveur, précédé de l'identifiant de son parent et, possiblement, celui du parent de son parent, de façon à ce que la valeur soit unique sur la page.

Ex :

HTML

<input type="submit" name="ctl00$contentPlaceHolderCorpsPage$buttonSoumetre" value="Soumettre" id="ctl00_contentPlaceHolderCorpsPage_buttonSoumettre" ... />

Il existe également une propriété ClientID qui, elle, fait référence à l'attribut id du contrôle HTML. Elle contiendra une valeur identique à UniqueID à l'exception que les $ seront remplacés par des _. 

Alors que ClientID est utilisé principalement pour effectuer des opérations du DOM (Document Object Model), UniqueID servira à des opérations relatives au PostBack d'une page. 

Problème avec LinkButton

Sous Internet Explorer, il est possible d'associer la touche Entrée à un clic sur un LinkButton. Il suffit d'utiliser une des techniques précédentes en utilisant un LinkButton plutôt qu'un Button. Cependant, sur les autres navigateurs, il peut arriver que ceci ne fonctionne pas. Vous trouverez sur le site Dmytro Shteflyuk's Home, dont le lien apparaît au bas de cette page, une technique pour réussir à associer la touche Entrée à un clic sur un LinkButton.

jQuery

Il est également possible de préciser le comportement de la touche Entrée à l'aide du code exécuté côté client.

Ex :

jQuery (placé dans un fichier .aspx afin de pouvoir utiliser l'affichage direct d'une expression avec <%= ... %>)

$(function () {

    $('#<%= formDefault.ClientID %>').keypress(function (event) {

        // si la touche Entrée a été enfoncée

        if (event.which == 13) {

            // génère un clic sur le bouton de soumission

            $('#<%= buttonSoumettre.ClientID %>').click();

        }

    });

});

Pour plus d'information

« Using Panel.DefaultButton property with LinkButton control in ASP.NET ».  Dmytro Shteflyuk's Home. http://kpumuk.info/asp-net/using-panel-defaultbutton-property-with-linkbutton-control-in-asp-net/

 
Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 5 février 2020
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre