ASP.NET : Action par défaut de la touche Entrée

Lorsque vous développez un formulaire Web, il est essentiel de déterminer ce qui arrivera lorsque l'usager appuiera sur la touche Entrée. La plupart du temps, cette touche devra faire la même chose que lorsque l'usager clique sur le bouton de soumission du formulaire. Ceci contribuera à améliorer l'ergonomie du formulaire.

▼Publicité

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">

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. 

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/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories