Les contrôles serveur (runat= »server ») avec ASP.NET

Les contrôles serveur ASP.NET sont des balises spéciales pouvant être manipulées côté serveur. Une fois le traitement côté serveur effectué, les contrôles seront généralement transformés en balises HTML. 

Certains contrôles serveur seront plutôt transformés en code JavaScript ou seront utilisés pour effectuer une opération spéciale, comme par exemple un accès à la base de données.

On reconnaît les contrôles serveur par leur attribut « runat="server" ».

▼Publicité

Voici un exemple classique d'un contrôle serveur : 

Ex :

Fichier .aspx (ASP.NET)

<asp:Button ID="buttonEnvoyer" runat="server" Text="Envoyer" />

Pourquoi utiliser un contrôle serveur plutôt qu'une simple balise HTML ? Parce que les contrôles serveur offrent plus de possibilité.

Dans l'exemple du bouton, on pourra effectuer un traitement côté serveur lorsque l'usager clique sur le bouton. Si on avait utilisé une balise HTML, on aurait aussi pu associer du traitement au clic mais ce traitement aurait été fait côté client (ex : JavaScript), ce qui limite les interventions possibles.

Par exemple, le bouton présenté plus haut générera la balise HTML suivante. Notez que la valeur des attributs name et id pourra être différente selon les techniques utilisées.

HTML

<input type="submit" name="ctl00$...$buttonEnvoyer" value="Envoyer" id="ctl00_..._buttonEnvoyer" />

Différentes catégories de contrôles serveur

ASP.NET met à votre disposition différentes catégories de contrôles serveur :

Cet article couvre les trois premiers types de contrôles serveur.

Les contrôles serveur HTML

Dans le fichier .aspx, il est possible d'entrer différentes balises HTML : <head>, <title>, <div>, <section>, <p>, <footer>, etc.

Ces balises sont tout à fait correctes. Cependant, ASP.NET nous permet d'aller plus loin : on peut au besoin leur ajouter l’attribut « runat="server" », ce qui nous permettra de manipuler la balise en question du côté serveur avant qu'elle soit envoyée au client. Lorsqu'une balise HTML contient l'attribut « runat="server" », on l'appelle désormais un contrôle serveur HTML.

Puisqu'on aura besoin de faire référence au contrôle dans le code qui sera exécuté sur le serveur, on lui ajoute également un identifiant (ID).

Fichier .aspx (ASP.NET)

<title id="htmlTitle" runat="server" />

Note : plutôt que d'entrer à la main tous les caractères de l'attribut runat="server", vous pouvez entrer les caractères run puis faire Tab deux fois. Vive les extraits de code de Visual Studio !

Modifier un contrôle serveur HTML par programmation

Lorsqu'une balise HTML contient l'attribut runat="server", il devient possible de la modifier par programmation. 

ASP.NET crée alors un objet dont le type est dérivé de  HtmlControl (ex : HtmlMeta, HtmlTitle, HtmlImage, HtmlLink, HtmlTable, HtmlGenericControl, etc.). 

L'identifiant de cet objet correspond à l'attribut id donné au contrôle serveur HTML.

complétion de code pour un objet HtmlControls

Il est ainsi possible d'affecter une valeur aux différentes propriétés de l'objet.

Ex:

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

htmlTitle.Text = "Apical - apprendre, participer, interagir, collaborer avec logique";

Contrôles serveur placés dans la section <head>

Attention : dans le gestionnaire d'événements Page_Load(), vous ne pouvez utiliser que les contrôles serveur HTML déclarés entre <form runat="server">   et </form>.

Pour modifier par programmation les contrôles serveur HTML déclarés entre <head runat="server"> et </head>, vous devez créer un gestionnaire d'événement Page_Init().

Ex :

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

protected void Page_Init(object sender, EventArgs e)

{

   htmlTitle.Text = "Apical - apprendre, participer, interagir, collaborer avec logique";

}

Propriété Attributes

Il arrive que certains attributs de balises HTML ne puissent pas être modifiés directement à l'aide d'une propriété ASP.NET. Par exemple, si vous souhaitez ajouter un attribut class à une balise <a href>, vous constaterez qu'il n'existe aucune propriété Class. Pour contourner ce problème, la classe HtmlControl met à votre disposition la propriété Attibutes. Il s'agit d'un vecteur à l'aide duquel vous pouvez accéder à l'attribut de votre choix.

Ex :

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

menuTravaux.Attributes["class"] = "menuactuel";

Cacher une division par programmation côté serveur

Il est possible de cacher une balise HTML <div>, <section>, <header>, <footer>, etc. par programmation, à condition d'utiliser l'attribut runat="server".

Ex :

Fichier .aspx (ASP.NET)

<section id="sectionRecherche" runat="server">

   ...

</section>

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

if (...)

{

   sectionRecherche.Visible = "false";    // n'affichera plus la division ni son contenu

}

Identifiant d'un contrôle serveur HTML

Lorsque vous ajoutez l'attribut « runat="server" » à une balise HTML, il faut faire attention à l'identifiant que ASP.NET donnera à cette balise. En effet, puisque la page Web peut inclure différents éléments tels une page maîtresse ou un contrôle utilisateur, ASP.NET modifiera l'attribut id de la balise de façon à assurer qu'elle soit unique dans toute la page Web. Ceci influencera notamment l'utilisation de la feuille de style.

Par exemple, dans une page Web utilisant une page maîtresse, si vous définissez la balise suivante  :

Fichier .aspx (ASP.NET)

<section id="sectionEntete" runat="server">

Le code généré pourra être le suivant :

HTML

<section id="ctl00_contenu_sectionEntete">

Le style suivant ne pourra donc pas être appliqué :

CSS

#sectionEntete

{

   ...

}

Pour régler ce problème, on utilisera une classe pour gérer le style.

Ex :

Fichier .aspx (ASP.NET)

<section id="sectionEntete" class="entete" runat="server">

CSS

.entete

{

   ...

}

Important : pour assurer que le site soit facile à maintenir, il faut éviter d'utiliser dans le CSS un identifiant généré par ASP.NET.

Ex :

CSS

#ctl00_contenu_sectionEntete

{

   ...

}

Les contrôles serveur Web

ASP.NET a mis au point ses propres contrôles serveur. Il s’agit de balises débutant par "<asp:". 

Parmi ces contrôles, nous retrouvons les contrôles serveur Web. Ces contrôles permettent d’aller plus loin que les balises HTML traditionnelles. Certains génèrent l’affichage d’un élément HTML (ex : un bouton) alors que d’autres ne correspondent pas à une balise. Leur rôle est plutôt d’effectuer un traitement quelconque, comme par exemple effectuer un pont entre un contrôle et la base de données.

Fichier .aspx (ASP.NET)

<asp:Button ID="buttonEnvoyer" runat="server" Text="Envoyer" />

Affichez la fenêtre Propriétés (menu Affichage / Fenêtre Propriétés) pour voir la richesse du modèle objet proposé par les contrôles serveur Web.

Fenêtre propriété

Définir l'apparence d'un contrôle serveur à l'aide du CSS

La majorité des contrôles serveur ont une propriété CssClass qui vous permettent de préciser son apparence à l'aide d'une classe CSS.

Ex :  Pour aligner les éléments d'un formulaire, dans la feuille de style :

CSS

.authentification label.aligne {

   display: block;   /* si on ne met pas la balise en block, il sera impossible de spécifier sa largeur */

   width: 100px;     /* espace nécessaire pour écrire les libellés. */

   float: left;      /* pour permettre que les contrôles soient placés sur la même ligne que les libellés */

}

Dans le fichier .aspx :

Fichier .aspx (ASP.NET)

<section class="authentification">

   <p>

      <asp:Label ID="labelUsager" runat="server" Text="* Usager :" CssClass="aligne" AssociatedControlID="textBoxUsager" />

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

   </p>

   <p>

      ...

   </p>

</section>

Voici le code HTML généré par le serveur ASP.NET :

HTML

<section class="authentification">

   <p>

      <label for="textBoxUsager" id="labelUsager" class="aligne">* Usager :</label>

      <input name="textBoxUsager" type="text" id="textBoxUsager" maxlength="50" />

   </p>

   <p>

      ...

   </p>

</section>

Associer du code à un contrôle serveur

Pour associer du code à un contrôle serveur, plusieurs méthodes s’offrent à vous.

En mode Design

  • Cliquez sur le contrôle en question et faites afficher les événements disponibles en cliquant sur l’icône Événements (Icône événements).

    Fenêtre de propriétés

  • Double-cliquez sur l'événement désiré. Cette action aura pour effet :
    • d'ajouter un attribut au contrôle serveur;
    • d'ajouter le gestionnaire d'événement dans le fichier .aspx.cs.

En mode Source 

  • Dans la balise du contrôle, ajoutez l'attribut correspondant à l'événement désiré, suivi du =.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:Button ID="buttonEnvoyer" runat="server" Text="Envoyer" OnClick= />

  • Visual Studio vous offrira d'associer l'événement à un gestionnaire existant ou de créer un nouveau gestionnaire.

    Associer gestionnaire à l'événement

  • Si vous choisissez « Créer un événement », le gestionnaire sera automatiquement créé dans le fichier .aspx.cs :
    Fichier .aspx.cs (ASP.NET avec C#)

    protected void buttonEnvoyer_Click(object sender, EventArgs e)

    {

    }

Les contrôles serveur de validation

Comme leur nom l’indique, les contrôles serveur de validation se chargeront de la validation d’informations entrées par un internaute. Il s’agit de contrôles visuels puisqu’ils génèreront l’affichage d’un message d’erreur si le contenu du contrôle associé n’est pas valide. Ils doivent donc être placés à l’endroit où le message devra apparaître.

Regardons quelques-uns des contrôles serveur de validation.

RequiredFieldValidator

Assure qu'une information n'est pas laissée à blanc.

Ex :

Fichier .aspx (ASP.NET)

<asp:Label ID="labelPrenom" runat="server" CssClass="aligne" AssociatedControlID="textBoxPrenom">* Prénom :</asp:Label>

<asp:TextBox ID="textBoxPrenom" runat="server" MaxLength="50" />

<asp:RequiredFieldValidator ID="requiredFieldValidatorPrenom" runat="server" ControlToValidate="textBoxPrenom"

ErrorMessage="Information requise" CssClass="erreurvalidateur" ValidationGroup="authentification" Display="dynamic"></asp:RequiredFieldValidator>

RequiredFieldValidator

CompareValidator

Compare une information avec une autre. Utile notamment pour valider qu'un mot de passe et la confirmation du mot de passe sont identiques. 

Ex :

Fichier .aspx (ASP.NET)

<asp:CompareValidator runat="server" ID="compareValidatorMotDePasse" ControlToValidate="textBoxConfirmation" 

ControlToCompare="textBoxMotDePasse" ErrorMessage="Les mots de passe ne correspondent pas !" CssClass="erreurvalidateur" 

Operator="Equal" ValidationGroup="inscription" Display="Dynamic"></asp:CompareValidator>

Permet également de valider le type de l'information.

Ex :

Fichier .aspx (ASP.NET)

<asp:CompareValidator runat="server" ID="compareValidatorQuantite" ControlToValidate="textBoxQuantite"

ErrorMessage="Vous devez entrer un nombre !" CssClass="erreurvalidateur" Operator="DataTypeCheck"

Type="Integer" ValidationGroup="editionpanier" Display="Dynamic" />

RangeValidator

Vérifie si la valeur d'une information est comprise entre deux valeurs données.

Ex :

Fichier .aspx (ASP.NET)

<asp:RangeValidator runat="server" ID="rangeValidatorEpreuveFinale" ControlToValidate="textBoxPonderationEpreuveFinale"

ErrorMessage="Veuillez entrer une valeur située entre 40 et 100 !" CssClass="erreurvalidateur"

MinimumValue="40" MaximumValue="100" Type="Integer" ValidationGroup="plandecours" Display="Dynamic"></asp:RangeValidator>

RegularExpressionValidator

Valide une information par rapport à un modèle donné par une expression régulière.

Ex :

Fichier .aspx (ASP.NET)

<asp:RegularExpressionValidator runat="server" ID="regularExpressionValidatorCourriel" ControlToValidate="textBoxCourriel" 

ValidationExpression="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.+[a-zA-Z]+$" ErrorMessage="Courriel invalide. Format requis : xxx@xxx.xxx" 

CssClass="erreurvalidateur" ValidationGroup="contact" Display="Dynamic"></asp:RegularExpressionValidator>

Afficher ou non le contrôle serveur de validation

Notez que le programmeur n'a pas à modifier la visibilité des contrôles serveur de validation. Au départ, ils ne sont pas affichés. Si l'usager entre une donnée non valide, ASP.NET fera le nécessaire pour que le message d'erreur associé au validateur soit affiché.

Par défaut, ASP.NET réservera l'espace pour afficher le message d'erreur même lorsque le message n'est pas affiché. Ceci permet au développeur de s'assurer que l'affichage du message pourra se faire sans déplacer les autres éléments affichés.

Parfois, on préférera ne pas réserver cet espace. Ce sera le cas, par exemple, si le message est affiché à droite du TextBox et qu'il est suivi par un libellé pour indiquer à l'usager le format attendu. On ajoutera alors l'attribut Display="Dynamic" au contrôle de validation.

ValidationGroup

Lorsqu'une page Web contient un contrôle de validation, il ne sera pas possible de quitter cette page (par exemple en cliquant sur un bouton) tant que les données ne passent pas le test du contrôle de validation. Ceci peut être problématique lorsqu'une même page Web présente plusieurs boutons.

Par exemple, si on a une page Web qui présente les contrôles suivants :

Plusieurs boutons sur une même page

Par défaut, sur cette page, il ne sera pas possible de cliquer sur le bouton "Nouvel usager" ni sur la loupe tant qu'un code d'usager ne sera pas entré. Ceci n'est pas très pratique. Pour régler ce problème, on fera appel au ValidationGroup. Il s'agit d'indiquer quel bouton nécessite que les données soient validées à l'aide du contrôle de validation. On donnera donc le même ValidationGroup au bouton en question et au contrôle de validation. 

Ex :

Fichier .aspx (ASP.NET)

<asp:RequiredFieldValidator ID="requiredFieldValidatorUsager" runat="server" ControlToValidate="textBoxUsager"

ErrorMessage="Vous devez entrer un code d'usager" ValidationGroup="authentification"></asp:RequiredFieldValidator>

...

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

ValidationGroup="authentification"/>

CausesValidation

Une autre technique pour éviter que les contrôles de validation empêchent certaines actions consiste à utiliser l'attribut CausesValidation. Un bouton dont le CausesValidation est à false pourra être cliqué sans que les contrôles de validation entrent en jeu. On utilisera souvent cet attribut avec les boutons d'annulation.

Ex :

Fichier .aspx (ASP.NET)

<asp:Button ID="buttonAnnuler" runat="server" Text="Annuler"

CausesValidation="false"/>

Validation côté client vs côté serveur (Page.IsValid)

Les contrôles serveur de validation se chargent de générer le code JavaScript qui effectuera les validations côté client. Mais si l'internaute désactive le JavaScript dans son navigateur, il faut s'assurer que les validations soient tout de même effectuées.

Dans les faits, avec les contrôles serveur de validation, les validations côté serveur sont effectuées même si le JavaScript est désactivé. La preuve : dans le cas d'un RequiredFieldValidator, on verra le texte du validateur s'afficher si le champ est laissé à blanc.

Cependant, si on désire effectuer un traitement seulement lorsque les données sont valides, il faut ajouter un test : if (Page.IsValid). Par exemple, un formulaire qui permet d'ajouter des données ne devra pas effectuer l'ajout si la validation des données n'est pas réussie.

Le meilleur endroit pour ajouter ce test est le gestionnaire d'événement du contrôle servant à soumettre le formulaire. Ce contrôle peut être de type Button, ImageButton, LinkButton, etc.

Ex :

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

protected void buttonSoumettre_Click(object sender, EventArgs e)

{

    if (Page.IsValid) 

    {

        // effectuer le traitement sur les données

    }

}

Une autre approche consiste à ajouter systématiquement le code suivant au début du gestionnaire d'événement d'un contrôle de soumission de formulaire :

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

protected void buttonSoumettre_Click(object sender, EventArgs e)

{

    if (!Page.IsValid) 

    {

        return;

    }

    // effectuer le traitement sur les données

}

Pour plus d'information

« Vue d'ensemble des contrôles serveur Web ASP.NET ». MSDN. http://msdn.microsoft.com/fr-fr/library/zsyt68f1.aspx

« Contrôles serveur ASP.NET ». MSDN. http://msdn.microsoft.com/fr-fr/library/bb386416(v=vs.100).aspx

« System.Web.UI.HtmlControls, espace de noms ». MSDN. http://msdn.microsoft.com/fr-ca/library/system.web.ui.htmlcontrols(v=VS.100).aspx

« Syntaxe des contrôles serveur Web ». MSDN. http://msdn.microsoft.com/fr-fr/library/zfzfkea6.aspx

« Styling with CSS, Master Pages and SkinsStyling with CSS, Master Pages and Skins ». ASP.NET book. http://www.aspnetbook.com/basics/styling-css-master-pages-themes.php

« Override any CSS style (even inline styles) no matter where it is defined ». Just geeks. http://justgeeks.blogspot.ca/2008/09/override-any-css-style-even-inline.html

« Contrôles de validation ASP.NET ». MSDN. http://msdn.microsoft.com/fr-ca/library/debza5t0.aspx

« Validation des entrées utilisateur en ASP.NET ». MSDN. http://msdn.microsoft.com/fr-fr/library/ms972961.aspx

« ASP.net - tout savoir sur la validation des entrées utilisateurs | les controles de validation ». Cyril Durand. http://blogs.codes-sources.com/cyril/archive/2008/09/02/asp-net-tout-savoir-sur-la-validation-des-entr-es-utilisateurs-les-controles-de-validation.aspx

« Regular Expression - email ». regexlib.com. http://regexlib.com/Search.aspx?k=email&AspxAutoDetectCookieSupport=1

« How to Find or Validate an Email Address ». regular-expressions.info. http://www.regular-expressions.info/email.html

« .Net Validators – Don’t Forget Page.IsValid ». Jardine Software. https://www.jardinesoftware.net/2012/03/31/net-validators-dont-forget-page-isvalid/

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