Etape Par Étape: 2ème Partie: Création D'un Formulaire Simple

ASP
Etape par tape

2me partie : Cration dun formulaire simple

(Rvision : 2 du 05/11/2004 31 pages)

Avertissement :

Ce document peut comporter des erreurs. Cependant, tout a t mis en uvre afin de ne
pas en inclure dans ce texte. Tout code qui trouve sa place ici a t test au pralable.

Creatlon d'un formu|alre slmp|e ASP .N|I : |tape par etape
dltch.deve|oppez.com/aspnet/lntroductlon - 2 -
Tables des matires :

Table des matires 2

Bibliographie 3

Utilisation des composants 5

Proprits communes importantes 6

Label (Zone daffichage) 8

Button (Bouton) 9

TextBox 11

Premires modifications et amliorations 13

CheckBox (case cocher) 17

RadioButtonList (cases cocher) 18

ListBox (boite de liste) 20

DropDownList (bote combo) 21

Image 22

ImageButton 23

HyperLink (Hyperlien) 24

LinkButton (bouton avec apparence dhyperlien) 25

Panel (panneau) 26

Calendar (calendrier) 27

Initialisation dune page 28

Proprits communes supplmentaires 29

Conclusion tome 2 31

ASP .N|I : |tape par etape 2
eme
partle
- 3 - dltch.deve|oppez.com/aspnet/lntroductlon

Bibliographie

Grard Leblanc, c# et .NET, ed. Eyrolles

MSDN sur le site

Copyright 2004 Danse Didier. Aucune reproduction, mme partielle, ne peut tre faite de ce site et
de lensemble de son contenu : textes, documents, images, etc sans lautorisation expresse de lauteur.
Sinon vous encourez selon la loi jusqu 3 ans de prison et jusqu 300000 de dommages et intrts.


Au travers de cette deuxime partie, nous allons construire un
formulaire simple.

Celui-ci contiendra la plupart des composants asp.NET dits simples .
Ces composants possdent certaines proprits identiques qui seront vues en
premier lieu. Ensuite, nous verrons, composant par composant la majorit de
leurs proprits particulires importantes. Nous terminerons, dans la dernire
partie, par voir les proprits qui se trouvent dans la plupart des composants
mais qui sont moins utiliss.

Nous utiliserons quelques commandes en c# (de nouveau, on aurait pu
adopter le VB.NET comme langage de rfrence) afin de vrifier que les
donnes encodes correspondent la syntaxe attendue.

eme
partle
Utilisation des composants

Ce tableau permet, de manire simple et rapide, de voir quel composant
utiliser suivant lutilit envisage.

Label
Composant trs simple permettant dafficher du texte.
Il est possible de modifier ce texte de manire aise
suivant les situations rencontres. Le texte peut inclure
des balises html.
Button
Excute des fonctions. A utiliser pour utiliser du code
quand on le souhaite.
TextBox
Il sagit dune case que lon peut complter. Cela
permet de rcuprer des chanes de caractres
encodes lutilisateur.
CheckBox
A nutiliser que lors dun choix qui se limite deux
valeurs (Oui/Non, Homme/Femme)
RadioButtonList
Permet de slectionner un choix parmi une liste de
choix possible. Dans le cas dun nombre trop lev de
choix, ce composant nest pas adquat car il prend
de la place (plus exactement chacun des lments
de la liste de choix prend de la place).
ListBox
La place utilise pour une telle liste est fixe. On peut
voir plusieurs lments de celle ci.
DropDownList
Il sagit du composant le plus utilis en terme de listes.
Concrtement, il sagit de celui qui prend le moins de
place. Il sagit dune liste droulante qui se met au
premier plan, par dessus les autres composants
lorsquelle est droule. Aucune place nest ainsi
perdue.
Image Comme son nom lindique, il sagit dune image.
ImageButton Il sagit dun bouton qui a la forme dune image.
Hyperlink Trs utiliss pour passer dune page lautre.
LinkButton Il sagit dun bouton qui a la forme dun hyperlien.
Panel
Ce composant est intressant pour afficher ou non un
nombre important de composants dun coup.
Calendar
Il sagit dun calendrier qui a la forme qui est la plus
utilise. Il sagit dun composant trs simple pour choisir
une date.
Proprits communes importantes

Ici, nous allons voir la liste des proprits qui se retrouvent au travers des
diffrents composants. Ces proprits sont, pour la plupart, la pice duvre
de lutilisation de ces composants. Les connatre permet un dveloppement
facile et ais par la suite. Cest la raison pour laquelle ces proprits sont vues
avant mme de voir le premier composant.

Les voici donc :

Id : Tout composant peut porter un nom, ce nom est lId. Cest partir de ce
nom que nous pourrons modifier ses attributs dans du code c# . On ne peut
donc avoir deux fois le mme Id dans une mme page asp.NET. Il nest donc
pas ncessaire de lui donner de nom si celui-ci nest pas manipul dans du
code.

OnClick : est lvnement lorsque lon clique sur un composant, par exemple
un bouton

Runat : Cet attribut permet de spcifier o le traitement du composant doit
tre fait.

Text : est la valeur affiche par le composant. Cette valeur peut inclure des
balises html qui seront considres en tant que telles.

OnTextChanged : est lvnement lorsque le texte change. Comme pour le
OnClick, il faut donc spcifier une mthode de traitement et lui affecter son
nom.

AutoPostBack : Si sa valeur est true, la page est automatiquement
renvoye au serveur pour quil puisse faire son traitement. Dans le cas
contraire, la page ne sera envoye que lors dun clic sur un bouton,

Il en existe dautres, moins importantes, qui sont dtailles la fin de ce tome.
Ces dernires proprits sont utilises pour la mise en forme des composants
et galement pour lutilisation dynamique de ceux-ci.
eme
partle

I
d

O
n
C
l
i
c
k

R
u
n
a
t

T
e
x
t

O
n
T
e
x
t
C
h
a
n
g
e
d

A
u
t
o
P
o
s
t
B
a
c
k

Label
Button
TextBox
CheckBox
RadioButtonList
ListBox
DropDownList
Image
ImageButton
Hyperlink
LinkButton
Panel
Calendar

Passons maintenant aux composants proprement dits et ce, de
manire progressive, cest dire en fonction du niveau de
difficult de ceux-ci.
Label (zone daffichage)

Le premier composant asp.NET que nous allons inclure dans notre page web
est une zone daffichage. Comme il a t expliqu dans la premire partie, le
composant sera compil par le serveur et traduit en html avant dtre
envoy au client.

La syntaxe la plus simple pour ce composant est la suivante :

<asp:Label id="zaValeur" text="Notre premier composant asp" runat="server"/>

Ce qui donne dans notre code :

<head>
</head>
<body>
<form runat="server">
<asp:Label id="zaValeur" text="Notre premier composant asp"
runat="server"/>
</form>
</body>

Label.aspx

Ce qui donne sur le navigateur du client :

Comme il a dj t dit, il est possible de passer des balises html dans la
valeur du texte. Ainsi

<asp:Label id="zaValeur" text="<b>Notre premier composant asp</b>"
runat="server"/>

affiche le mme texte si ce nest que celui-ci est affich en gras. Ceci est trs
utile dans certains cas que nous verrons par la suite.
eme
partle
Button (bouton)

Un bouton est un composant permettant lors dun clic de souris sur celui-ci
dexcuter la mthode de lvnement OnClick.

Voici un exemple de syntaxe dune balise Button :

<asp:Button id="bEnvoi" text="Envoi !" OnClick="Envoi()" runat="server"/>

Nous remarquons le b comme premier caractre du nom du bouton. Nous
emploierons cette norme de nommer un bouton.

A notre page, nous allons ajouter ce bouton, ainsi que le code de la
mthode de traitement correspondante. Nous allons nous limiter ici
changer le texte affich dans la zone daffichage dfinie prcdemment.

Nous allons dabord montrer le code et ensuite nous lanalyserons.

<head>
<script language="c#" runat="server">
void Envoi(Object Sender, EventArgs E)
{
zaValeur.Text="Notre deuxime composant asp fonctionne :)";
}
</script>
</head>
<body>
runat="server"/>
<br clear="all">
<asp:Button id="bEnvoi" text="Envoi !" OnClick="Envoi"
runat="server"/>
</form>
</body>

Button.aspx

On voit, comme on sy attendait, que nous avons mis la balise asp.NET du
bouton entre les balises <form> et </form>. Nous devions galement ajouter le
code du traitement du bouton. Cest ce que lon trouve dans la partie du
script en c# (entre <script > et </script>).

La fonction Envoi() ne renvoie rien, cependant, elle change la proprit Text
de la zone daffichage zaValeur. On remarquera galement la prsence des
paramtres Object Sender et EventArgs E comme dans les Forms Windows. Si
cela ne vous parat pas clair, peut tre quun petit tour sur Le langage c# , les
premiers pas pourrait vous aider.

On se rend vite compte que le principe est semblable la programmation
Windows. Dans le cadre de ce tutorial, les mthodes et fonctions se trouvent
dans la page dont elles dpendent. Cependant il est possible dutiliser la
mthode dite du Code_behind qui consiste sparer le code de
linterface.

En plus des proprits habituelles, un bouton a galement les proprits
suivantes :
- CommandName est la commande associe au bouton. Il sagit de la
mme fonction de traitement quand dans la proprit OnClick. Le seul
avantage tant si cette mme mthode est utilise par plusieurs
boutons.
- CommandArgument est largument ventuellement associe la
commande.

Aprs avoir cliqu sur le bouton, on obtient :

eme
partle
TextBox (zone ddition)

Une zone ddition est une zone de texte qui peut tre modifie par
lutilisateur. Nous allons principalement nous en servir pour rcuprer des
donnes quil devra encoder.

La balise minimale pour une zone ddition est la suivante :

<asp :TextBox id="zeSaisie" runat="server"/>

Une zone ddition peut galement avoir les proprits suivantes :
- Columns : il sagit de la largeur du contrle exprime en nombre de
caractres. Si le nombre est infrieur MaxLength, il y aura dfilement
horizontal dans la bote ddition
- MaxLength : est le nombre maximal de caractres qui seront admis. Pour
avoir un effet, il faut que TextMode vaut SingleLine ou Password.
- Rows : est le nombre de lignes visibles. Il faut dans ce cas que TextMode
soit MultiLine. On peut saisir plus de lignes mais dans ce cas, il y aura
dfilement vertical
- TextMode : Les trois modes qui sont possibles sont Single, MultiLine ou
Password. Chacune des significations a t explique dans les
proprits prcdentes
- Wrap : permet de stipuler si oui ou non il y passage automatique la
ligne dans une zone ddition de plusieurs lignes

Dans notre page web, nous allons faire que la valeur affiche dans la zone
daffichage soit la valeur saisie dans la zone ddition.

On obtient ainsi :

<head>
<script language="c#" runat="server">
{
zaValeur.Text=zeSaisie.Text;
}
</script>
</head>
<body>
runat="server"/>
<br clear="all">
<asp:Button id="bEnvoi" text="Envoi !" OnClick="Envoi"
runat="server"/><br clear="all">
<asp:TextBox id="zeSaisie" runat="server"/>
</form>
</body>
TextBox.aspx

Le fonctionnement du code suivant est simple. Lors du clic sur le bouton, la
mthode de traitement de celui-ci est appele. Dans notre exemple, cette
mthode effectue lopration suivante : il lit la valeur saisie dans la boite, en
ressort et le texte et laffecte la proprit Text de la zone daffichage.

Le rsultat est le suivant :

eme
partle
Premires modifications et amliorations

Nous allons modifier lgrement la page afin darriver ce que lon attend.
Ainsi, avec les lments dj prsent, nous pouvons dj inclure la page les
lments suivants :
- Un nom dutilisateur dune longueur minimale de 5 caractres et de
maximum 10
- Un nom de famille facultatif dont la longueur doit tre infrieure 25
caractres. La zone fera lcran 10 caractres de large
- Un prnom non facultatif. La longueur est identique au nom
- Un email
- Un mot de passe
- Une confirmation de mot de passe

On se rend vite compte quil sera dj ncessaire de faire des contrles sur
les diverses valeurs qui seront saisies.

Nous allons suivre le formalisme suivant pour une ligne :
- Une zone daffichage comprenant lintitul
- Une zone daffichage signifiant si llment est facultatif ou non
- Une zone ddition dans laquelle les valeurs seront saisies
- Une zone daffichage qui permettra de signaler une erreur
dencodage

Ce qui donne laffichage suivant :

Voici le code de la page correspondante ct serveur:

<%@ Page Language="c#" %>
<script runat="server">

{
// A AJOUTER: 'strlen' 5 a 10 caracteres
if (zeUtilisateur.Text=="") zaErrUtilisateur.Text="Vous devez entrer un nom d'utilisateur
dont la longueur varie entre 5 et 10 caractres";
else zaErrUtilisateur.Text="";

if (zePrenom.Text=="") zaErrPrenom.Text="Vous devez entrer votre prnom dont la
longueur varie entre 5 et 10 caractres";
else zaErrPrenom.Text="";

if (zeMdp.Text=="") zaErrMdp.Text="Vous devez entrer un mot de passe";
else zaErrMdp.Text="";

if (zeConfMdp.Text=="") zaErrConfMdp.Text="Vous devez entrer une deuxime fois votre
mot de passe";
else { if (zeConfMdp.Text!=zeMdp.Text) zaErrConfMdp.Text="Vos mots de passe ne
concident pas";
else zaErrConfMdp.Text="";}
}

</script>
<html>
<head>
</head>
<body>
<asp:Label id="zaUtilisateur" runat="server" text="Utilisateur
:"></asp:Label><asp:Label id="zaFacUtilisateur" runat="server" text="(*)"></asp:Label>
<asp:TextBox id="zeUtilisateur" runat="server"></asp:TextBox>
<asp:Label id="zaErrUtilisateur" runat="server" text=""></asp:Label>
<br clear="all" />
<asp:Label id="zaNom" runat="server" text="Nom :"></asp:Label><asp:Label
id="zaFacNom" runat="server" text=""></asp:Label>
<asp:TextBox id="zeNom" runat="server"></asp:TextBox>
<asp:Label id="zaErrNom" runat="server" text=""></asp:Label>
<br clear="all" />
<asp:Label id="zaPrenom" runat="server" text="Prenom
:"></asp:Label><asp:Label id="zaFacPrenom" runat="server" text="(*)"></asp:Label>
<asp:TextBox id="zePrenom" runat="server"></asp:TextBox>
<asp:Label id="zaErrPrenom" runat="server" text=""></asp:Label>
<br clear="all" />
<asp:Label id="zaEmail" runat="server" text="Email
:"></asp:Label><asp:Label id="zaFacEmail" runat="server" text="(*)"></asp:Label>
<asp:TextBox id="zeEmail" runat="server"></asp:TextBox>
<asp:Label id="zaErrEmail" runat="server" text=""></asp:Label>
<br clear="all" />
<asp:Label id="zaMdp" runat="server" text="Mot de passe
:"></asp:Label><asp:Label id="zaFacMdp" runat="server" text="(*)"></asp:Label>
<asp:TextBox id="zeMdp" runat="server"></asp:TextBox>
<asp:Label id="zaErrMdp" runat="server" text=""></asp:Label>
<br clear="all" />
<asp:Label id="zaConfMdp" runat="server"
text="Confirmation Mot de passe :"></asp:Label><asp:Label id="zaFacConfMdp"
runat="server" text="(*)"></asp:Label>
<asp:TextBox id="zeConfMdp" runat="server"></asp:TextBox>
<asp:Label id="zaErrConfMdp" runat="server" text=""></asp:Label>
<br clear="all" />
<br clear="all" />

<asp:Button id="bEnvoi" onclick="Envoi" runat="server" text="Envoi !"></asp:Button>
</form>
</body>
</html>
1stLogin2.aspx

eme
partle
Et voici maintenant le code de la page html envoy au client.

<html>
<head>
</head>
<body>
<form name="_ctl0" method="post" action="1stLogin2.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE"
value="dDwxOTc3ODg3MTQ1OztsPGNjTWFpbGluZ0xpc3Q7Pj73NPpQr/3jNgkKYWjOd9CoS/gS
Lw==" />


<span id="zaUtilisateur">Utilisateur :</span><span id="zaFacUtilisateur">(*)</span>
<input name="zeUtilisateur" type="text" id="zeUtilisateur" />
<span id="zaErrUtilisateur"></span>
<br clear="all" />

<span id="zaNom">Nom :</span><span id="zaFacNom"></span>
<input name="zeNom" type="text" id="zeNom" />
<span id="zaErrNom"></span>
<br clear="all" />

<span id="zaPrenom">Prenom :</span><span id="zaFacPrenom">(*)</span>
<input name="zePrenom" type="text" id="zePrenom" />
<span id="zaErrPrenom"></span>
<br clear="all" />

<span id="zaEmail">Email :</span><span id="zaFacEmail">(*)</span>
<input name="zeEmail" type="text" id="zeEmail" />
<span id="zaErrEmail"></span>
<br clear="all" />

<span id="zaMdp">Mot de passe :</span><span id="zaFacMdp">(*)</span>
<input name="zeMdp" type="text" id="zeMdp" />
<span id="zaErrMdp"></span>
<br clear="all" />

<span id="zaConfMdp">Confirmation Mot de passe :</span>
<span id="zaFacConfMdp">(*)</span>
<input name="zeConfMdp" type="text" id="zeConfMdp" /><span
id="zaErrConfMdp"></span>
<br clear="all" />

<input type="submit" name="bEnvoi" value="Envoi !" id="bEnvoi" />
</form>
</body>
</html>

On remarque quil sagit bien dHTML pur. Plus aucune trace dasp.NET.

Lors dun clic sur le bouton Envoi ! , sans avoir entr de valeurs, nous
obtenons toutes une srie de messages tels que ceux-ci :


Effectivement ! La mthode Envoi() qui a t appele par le clic sur le bouton
a effectuer quelques contrles rudimentaires sur la valeur des zones de texte.
Il y a galement un contrle sur lgalit des deux zones de mots de passe.

Ici, tous ces contrles se font du ct du serveur. Cependant, cela pourrait se
faire ct client. Il existe par ailleurs des composants permettant de faire
cela. Il sagit des Validator (contrles de validation). Ceux-ci sont dtaills
dans larticle suivant :

Nous allons maintenant continuer notre petit tour des composants ASP .NET.

En regardant attentivement, on se rend compte que la page envoye ne
contient que des balises html. Cependant, on remarque un champ cach
appel __VIEWSTATE. Ce champ permet, lors du renvoi de la page au
serveur, de ne pas perdre les donnes des diffrents composants. Ainsi, la
page ne doit tre initialise quune seule fois.

Cependant, il faut avouer que ce nest pas trs convivial tel quel. Quelques
modifications en html donnent ceci :

Cette page est dj beaucoup plus agrable. En utilisant les feuilles de styles
et autres, le design de la page ne peut que samliorer, cependant il ne sera
pas vu dans ce cadre-ci.
eme
partle
CheckBox (case cocher)

Une case cocher permet de faire un choix de type oui/non ou vrai/faux.

Comme toujours, ce contrle possde au minimum un id. Il a galement
comme proprits :
- Checked : est true si la case est coche et false dans le cas
contraire
- TextAlign : est la position du libell par rapport la case. Les valeurs
possibles sont Right ou Left

Nous obtenons donc, dans sa forme la plus simple un contrle tel que celui-
ci :

<asp:CheckBox id="ccMailingList" runat=server" text="S'incrire la mailing-list"/>

Nous allons le rajouter aux composants dj existants dans notre page
dinscription (1stLogin2.aspx), ce qui donne comme rsultat :

RadioButtonList (cases cocher)

Parmi plusieurs cases cocher dun mme ensemble, on ne peut en choisir
quune seule, ce qui implique que lorsque lon cocher une autre case, celle
qui tait au pralable coche est dcoche. On les utilise donc lorsque lon
a plusieurs choix mais quune seule valeur ne peut tre choisie.

Pour les proprits, elles sont identiques un CheckBox si ce nest que ces
cases cocher doivent tre dans un mme groupe. On lui donne donc un
nom (proprit GroupName).

Pour notre page dinscription, on pourrait demander le titre dune personne
(Mme, Mr, Mlle). Cest ce que nous allons faire.

Pour ce composant il existe deux syntaxes :

<asp:RadioButton id="Madame" runat="server" value="Madame"
GroupName="rblMmeMlleMr"/>

<asp:RadioButton id="Mademoiselle" runat="server" value="Mademoiselle"

<asp:RadioButton id="Monsieur" runat="server" value="Monsieur"

ou encore

<asp:RadioButtonList id="rblMmeMlleMr" runat="server">
<asp:ListItem value="Madame" runat="server"/>
<asp:ListItem value="Mademoiselle" runat="server"/>
<asp:ListItem value="Monsieur" runat="server"/>
</asp:RadioButtonList>

A laffichage, les pages 1stLogin3.aspx et 1stLogin3b.aspx ne laissent
transparatre aucune diffrence si ce nest quavec la deuxime syntaxe, il y
a eu retour la ligne automatiquement. Il est donc quivalent dutiliser une
syntaxe ou lautre.

La premire syntaxe est avantageuse dans ce sens quelle permet de voir
directement quil sagit bien dun composant RadioButton. La seconde
permet davoir le groupe de cases cocher de manire claire.

Le rsultat obtenu avec la deuxime syntaxe :

eme
partle

ListBox (bote de liste)

Une bote de liste est un composant permettant dafficher une liste de valeur
possible.

Les caractristiques de ce composant sont les suivantes :
- SelectionMode qui indique lon peut slectionner un (Single) ou
plusieurs articles (Multiple) simultanment
- Items : qui est la collection des articles
- SelectedIndex : qui est le numro de larticle slectionn, le premier
ayant comme valeur 0
- SelectedItem : est larticle slectionn
- SelectedItems est la collection des articles slections
- Rows est le nombre de lignes pour la liste visibles

Passons directement au code que nous allons insrer dans notre page web :

<asp:ListBox id="lbPays" runat="server" SelectionMode="Single" Rows="2">
<asp:ListItem text="Belgique" runat="server"/>
<asp:ListItem text="France" runat="server"/>
<asp:ListItem text="Suisse" runat="server"/>
</asp:ListBox>

On remarquera la syntaxe fort similaire au RadioButtonList.

Ici, nous aurons 2 des 3 lignes qui seront affiches dans le contrle.
SelectionMode tant Single, nous ne pouvons en slectionner quune seule
valeur.

Il est vident que le contrle est utilis ici pour la slection dun nom de pays.

A laffichage, nous obtenons donc ceci :

Continuons notre petit tour des composants

eme
partle
DropDownList (bote combo)

La bote combo possde les mmes proprits quune ListBox.

Nous allons les utiliser pour par exemple une date de naissance. On pourrait
utiliser trois DropDownList pour le faire. Cependant, nous ne mettrons pas
lanne maintenant.

Par exemple, voici le code de la bote combo pour le mois :

<asp:DropDownList id="ddlMoisNaissance" runat="server" SelectionMode="Single"
Rows="10">
<asp:ListItem text="Janvier" runat="server"/>
<asp:ListItem text="Fevrier" runat="server"/>

<asp:ListItem text="Octobre" runat="server"/>
<asp:ListItem text="Novembre" runat="server"/>
<asp:ListItem text="Decembre" runat="server"/>
</asp:DropDownList>

Et voici le rsultat :

Image

Pour celui qui a dj vu les proprits dune image en html, les proprits
suivantes ne lui sembleront pas trs compliques. On y retrouve :
- ImageUrl qui est ladresse de limage (relative ou absolue)
- AlternateText est le texte afficher si limage ne peut ltre
- ImageAlign est lalignement de limage par rapport au contour de son
composant. On retrouve comme valeurs acceptes AbsBottom,
AbsMiddle, BaseLine, Bottom, Left, Middle, NotSet, Right, TextTop et Top.

Ce qui donne par exemple :

<asp:Image ImageUrl="dotnet.gif" runat="server" AlternateText="Made with
ASP.NET"/>

eme
partle
ImageButton

Dapparence, ce composant est le mme que le prcdent, si ce nest
quun vnement lui est associ lors du clic.

Pour ce qui est des proprits, on ne retrouve que ImageUrl par rapport
au prcdent.

On obtient ainsi dans le script c# :

void ibClick(Object Sender, ImageClickEventArgs E)
{
lImageButton.Text="Encore un contrle qui fonctionne!";
}

et dans la partie daffichage

<asp:ImageButton ImageUrl="dotnet2.gif" runat="server" AlternateText="Une info"
OnClick="ibClick"/>
<asp:Label id="lImageButton" runat="server" text=""/>

On remarque dans le script que lon ne passe plus de EventArgs mais
bien un ImageClickEventArgs.

Un clic sur limage de lexemple fera afficher un texte dans une zone
daffichage.

Hyperlink (hyper-lien)

Toute personne qui souhaite faire un site web se doit de savoir ce
quest un hyperlien. Cependant, voici quand mme lutilit : le clic sur un tel
lien permet douvrir une autre page web, tlcharger un programme,
envoyer un email ou ouvrir une adresse ftp. On peut les trouver sous deux
formes : un texte ou une image.

Les caractristiques sont simples :
- ImageUrl est limage qui contient le lien (si lon dsire utiliser une image
comme hyperlien). Si cette proprit est utilise, il ne faut pas utiliser la
proprit Text.
- NavigateUrl est ladresse destination

<asp:Hyperlink Text="Tutoriaux .NET" NavigateUrl="http:\\dotnet.developpez.com"
runat="server"/>

Lexemple ci-dessus est facilement comprhensible. Un clic sur le texte
Tutoriaux .NET permet douvrir la page du site dotnet.developpez.com .

eme
partle
LinkButton (bouton avec apparence dhyperlien)

Tout est dans le titre Identique un hyperlien lors dun affichage, ce
composant permet dactionner un vnement tel que lon en a dj vu
prcdemment.

Dans le script, on trouve :

void lbLinkButton(Object Sender, EventArgs E)
{
lLinkButton.Text="Bientot, nous serons des pros :)";
}

et dans la seconde partie :

<asp:LinkButton Text="LinkButton!" OnClick="lbLinkButton" runat="server"/>
<asp:Label id="lLinkButton" Text="" runat="server"/>

Panel (volet)

Le panneau contient dautres composants asp.NET. On peut lui donner des
effets de relief tout autour.

Ce composant est souvent utilis pour afficher ou cacher un grand nombre
de composants.

Ici, nous allons dsactiver tout une srie de composants laide de
lImageButton de tout lheure. Si ceux ci sont dj dsactivs, ils seront
ractivs.

void ibClick(Object Sender, ImageClickEventArgs E)
{
pTout.Enabled=!(pTout.Enabled);
}

permet de changer lactivation ou non du panel pTout.

Les balises de dbut et de fin du volet sont respectivement :

<asp:Panel id="pTout" runat="server">

et

</asp:Panel>

Comme proprits, on trouve :
- BackImageUrl qui est limage de fond
- HorizontalAlign qui est lalignement du contenu du volet (Center,
Justify, Left, NotSet ou Right)

eme
partle
Calendar (calendrier)

Il sagit dun calendrier complet prt lemploi.

On trouve une liste interminable (mais logique) de proprits pour ce
composant. Si il y en a deux retenir, il sagit bien de celles-ci :
- SelectedDate qui donne la date slectionne
- VisibleDate qui est la date visible

Ceux deux lments sont de type DateTime.

<asp:Calendar VisibleDate="2003/12/11" runat="server"/>

La date est de type anglosaxone.

Voici le code de la nouvelle page :

<head>
</head>
<body>
<asp:Calendar VisibleDate="2003/12/11" runat="server"/>
</form>
</body>

La simplicit de celui-ci saute aux yeux. Pourtant le rsultat est surprenant :

Il possible de changer de mois sans avoir crit une seule ligne de code !
Simplissime !

Nous allons ajouter une deuxime page notre exemple. Cette fonction sera
utilise par ladministrateur du site. Appellons la admin.aspx.

Initialisation dune page

Il est peu pratique de devoir encoder toutes les valeurs comme dans une
DropDownList pour, par exemple, lanne de naissance. Celui qui fait un site
sur lhistoire et qui remonte plusieurs centaines dannes risque de passer
plus de temps lencodage de ces annes quautre chose.

Il est ainsi possible dinitialiser une page avec les valeurs correspondantes.

Cest ce que fait lvnement Page_Load. On peut ainsi y mettre du code.
Ainsi on a :

int i;
for (i=1 ; i<2005 ; i++)
{
DDLNaissAnnee.Items.Add=i ;
}

Ce type dinitialisation fera partie dun prochain tutorial.

eme
partle
Proprits communes supplmentaires

- AccessKey permet de spcifier une combinaison de touches de type
Alt+<touche> pour servir de raccourci. La syntaxe exacte est
AccessKey= touche .

- Attributes est la collection des attributs du composant. Ces attributs peuvent
tre atteints laide des indexeurs ( [] ). Ce sont eux qui gardent les diverses
informations sur les composants.

- BackColor est, comme son nom lindique, la couleur darrire plan. Les
valeurs accepts pour cette proprits sont divers noms de couleurs (Red,
Blue, Green, Dans ce cas, il faut importer System.Drawing qui contient la
dfinition de ces couleurs) mais aussi les valeurs exprimes en hexadcimal
au format RGB (cest dire celle utilise en HTML). On trouve ainsi des choses
telles que : BackColor= #FF0012 .

- BorderWidth spcifie lpaisseur de la bordure autour du composant. La
syntaxe est donc BorderWidth= NbPixels .

- BorderStyle que lon traduit par style de bordure . Lnumration possible
est None (aucune), Solid (ligne pleine), Double (ligne double), Groove (effet
de relief), Ridge (effet de relief galement), Inset (image dans lcran),
Outset (image qui ressort fortement de lcran).

- CssClass permet de spcifier le nom dune classe de la feuille de style
spcifie au pralable. Ceci permet, dans le cas de mise en forme rpte,
de simplifier lcriture (moins de rptition au niveau de font- ) mais aussi de
faciliter des mises jour de la police par exemple au travers du document.

- Enabled indique si il est possible deffectuer une action sur le composant
(true / false).

- Font-Bold indique si le texte doit tre affich en gras ou non (true / false).

- Font-Italic indique si le texte doit tre affich en italique ou non (true / false).

- Font-Name contient le nom de la police de caractres. On trouve par
exemple Font-Name= Times New Roman .

- Font-Overline avec la valeur true permet de surligner le texte.

- Font-Size est la taille des caractres. Elle peut tre exprime de quatre
manires : par dfaut en pixels (px) ou alors en points typographiques (pt), en
millimtres (mm) ou en centimtres (cm).

- Font-StrikeOut avec la valeur true permet de barrer le texte.

- Font-Underline avec la valeur true permet de souligner le texte.

- ForeColor est la couleur davant plan du texte.

- Height est la hauteur du composant exprime par dfaut en pixels (px) ou
en pourcentage par rapport au container (%).

- Style est une chane de caractres comprenant plusieurs attributs de cette
liste.

- TabIndex permet de spcifier lordre de passage des composants par
lutilisation des touches de tabulation.

- ToolTip contient la chane de caractres affiche dans la bulle daide.

- Width est la largeur du contrle composant exprime par dfaut en pixels
(px) ou en pourcentage par rapport au container (%).

eme
partle
Conclusion Tome 2

Nous avons ainsi fait un simple formulaire.

Une page peut bien entendu tre entirement dynamique par lutilisation de
tableau en mmoire, de fichiers XML ou encore dADO.NET (accs aux bases
de donnes, ce qui nous permet de rendre les donnes persistantes), il est
ainsi possible de charger des pages de manire dynamique.

Bonne continuation.

Etape Par Étape: 2ème Partie: Création D'un Formulaire Simple

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Etape Par Étape: 2ème Partie: Création D'un Formulaire Simple

Transféré par

Droits d'auteur :

Formats disponibles

ASP

Etape par tape

Vous aimerez peut-être aussi