Types de contrôles:
les contrôles HTML:
Les contrôles HTML sont des contrôles serveurs dans le cas où ils ont un attribut runat="server". Vous aurez des exemples très bientôt de ces contrôles mais avant de voir le code reprenons l’arbre d’héritage des contrôles (celui de la première page) et montrons comment les contrôles ont étés fait par ressemblance.
- Link
- input
- text
- hidden
- checkbox
- radio
- button
- reset
- submit
- ...
- image
- ...
Ces classes existent principalement pour la compatibilité avec la syntaxe HTML pour permettre de porter facilement un site statique existant en ASP.NET.
les contrôles aspx:
Les contrôles Web sont des outils plus complets en fonctionnalités que les contrôles HTML, ils héritent d’une classe plus riche que le contrôle HTML, nous verrons les différences fonctionnelles dans la prochaine sous-partie qui montre les principaux attributs.
La syntaxe des contrôles Web est :
<asp:NomControle id="nom_de_mon_controle" runat="server"></asp:NomControle>
Principaux attributs
les attributs communs:
Nous allons vous présenter les attributs les plus utiles qui existent autant pour les contrôles serveur Web que HTML.
| Attributs | Type | Description |
|---|---|---|
| Visible | Booléen | Permet d’afficher ou dissimuler un contrôle. |
| ID | String | Identifiant unique sert de nom d’objet pour l’appel dans le code behind. |
| Parent | Control | Pointe sur le contrôle parent. |
les attributs de HTML:
| Attributs | Type | Description |
|---|---|---|
| Name | String | Donne une appellation utile pour le code non générés par visual studio comme du JavaScript et la rétrocompatibilité. |
| Disabled | Booléen | Correspond à l’attribut class en HTML |
| Value | String | Valeur retournée par défaut par le contrôle HTML. |
les attributs de aspx:
| Attributs | Type | Description |
|---|---|---|
| CSS | _ | Pour des raisons pratiques les contrôles Web ont des attributs pour accéder facilement aux propriétés CSS dont : BackColor, BorderColor, BorderStyle, Font, Width, Height |
| CssClass | String | Correspond à l’attribut class en HTML |
| AccessKey | String | Pour associer un raccourci clavier à un contrôle ex |
| TabIndex | Integer | Permet à l’utilisateur de sélectionner dans un ordre prédéfini par les valeurs (du plus petit au plus grand) en se déplaçant avec la touche TAB. |
| Enabled | Booléen | Permet d’interdire les interactions avec un contrôle (grise les champs). (Inutile sur un label) |
| ToolTip | String | Permet d’afficher une info-bulle. |
Les contrôles basiques
Label:
Un contrôle Label est un contrôle qui permet d’afficher du texte sur une page web qui peut être modifié dynamiquement par le serveur. On accède au texte du label dans le code behind grâce à son ID et l’attribut Text.
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>
Remarque : Le contrôle serveur Web ajoute une balise dans le code HTML (le contrôle serveur HTML lui reste une balise ) et il est impossible d’appliquer un événement onclick sur un label.
Button:
Un contrôle Button est un contrôle sur lequel on peut cliquer (bouton poussoir) et qui déclenchera alors le PostBack de la page (par défaut). Après le PostBack il exécutera la méthode qui lui est associé. On peut utiliser un bouton pour valider un formulaire, mais aussi pour effectuer une tache assigné a ce bouton (redirection, ajouter un article au panier, réinitialiser un formulaire …).
<asp:ButtonID="Button1"runat="server"Text="Button"/>
Remarque : Un Button ne peut pas se trouver en dehors d’un form.
TextBox:
Un contrôle TextBox est un contrôle qui permet à l’utilisateur d’entrer du texte (c’est une zone de saisie).
Cette zone de saisie peut être SingleLine, sur une seule ligne, ou MultiLine, sur plusieurs lignes. Le contrôle Web, par défaut, est SingleLine mais admet un attribut qui le rend MultiLine. Le contrôle HTML est quand à lui spécialisé : c'est-à-dire qu’il existe un contrôle Singleline et un contrôle MultiLine. Plus précisément, le SingleLine correspond à un TextBox et le MultiLine à un Textarea. On accède a son contenu de la même manière qu’avec le Label : c’est à dire avec son id et l’attribut Text.
<asp:TextBoxID="TextBox1"runat="server"TextMode="SingleLine"></asp:TextBox><%-- SingleLine --%>
<asp:TextBoxID="TextBox1"runat="server"TextMode="MultiLine"></asp:TextBox><%-- MultiLine --%>
Remarque : Un TextBox ne peut pas se trouver en dehors d’un form.
DropDownList:
Une DropDownList est une liste déroulante dans laquelle on ne peut sélectionner qu’un seul élément. A utiliser lorsque l’on a une grosse liste d’élément dans laquelle on ne doit pouvoir choisir qu’un élément.
<asp:DropDownListID="DropDownList1"runat="server">
<asp:ListItemText="Choix1"/>
<asp:ListItemText="Choix 2"/>
</asp:DropDownList>
CheckBox:
Les contrôles CheckBox sont des cases à cocher qui peuvent être assimilées à un booléen dans le sens où il permet de choisir entre deux état : sélectionné ou non (true ou false). L’attribut Checked permet de définir si la case doit être cochée ou non au chargement du contrôle, donc par défaut la case n’est pas cochée.
<asp:CheckBoxID="CheckBox1"Checked="true"runat="server"/><%--CheckBox simple --%>
RadioButton:
Les RadioButton sont un contrôle serveur garantissant l’unicité de la sélection dans une liste de propositions. Faire attention lors de son utilisation. En effet une fois que l’on en a coché un il est impossible de décocher (il faut donc prévoir un RadioButton correspondant au cas nul/ par défaut). Aussi n’est-il pas recommandé de l’utiliser avec une liste un peu longue (car encombrant), utiliser plutôt une DropDownList dans ce cas.
<asp:RadioButtonListID="RadioButtonList1"runat="server">
<asp:ListItemValue="maValeur"Text="texte_a_afficher"Selected="True"/>
<asp:ListItemValue="maValeur2"Text="texte_a_afficher2"Selected="False"/>
</asp:RadioButtonList>
Les RadioButtonList permettent de grouper les RadioButton qui les composent. ListItem correspond à un RadioButton. Value définit la valeur de la RadioButton (par exemple « oui » ou « non »). Text sera le texte associé au RadioButton. Selected défini si le RadioBouton est coché ou non par défaut (en HTML il faut mettre checked="checked" pour dire qu’il est coché).
Remarque : Par défaut le contrôle HTML ne possède pas de texte associé. Pour cela nous utiliserons un label pareillement que pour le Checkbox
Evénements
Un événement est une action (par exemple un clic sur un bouton, le changement d’un TextBox ect …) qui va pointer vers une méthode dans le code behind. Cela permet de programmer ce qui se passe lors d’un événement. Lorsque l’on défini un événement sur un contrôle on parle d’abonner le contrôle à un événement.
Exemple avec l’abonnement d’un bouton :
[Code à placer dans la page ASPX]
<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>
<asp:ButtonID="Button1"runat="server"Text="Cliquerici"onclick="Methode_Click"/>
<asp:LabelID="Label1"runat="server"Text="Vide"></asp:Label>
[Code à placer dans le code behind]
protectedvoid Methode_Click(object sender, EventArgse)
{
Label1.Text = TextBox1.Text;
}
