Vous êtes sur la page 1sur 4

Labs ASP.NET v1.

1 Aurélien Norie & Sébastien Bovo [Microsoft]

Lab02

But du Lab

Le but de ce Lab est d’appréhender la création d’une application ASP.NET avec Visual
Studio .NET et d’utiliser son interface en environnement Web.
Nous utiliserons les contrôles HTML Serveur et les Contrôles Web Serveur.

Exercice 1 – Utilisation de Visual Studio .NET en environnement


Web

- Lancer Visual Studio .NET


- Activer le menu « Fichier/Nouveau/Projet… »
- Choisir « Projets Visual Basic » et « Application Web ASP.NET »
- Pour l’emplacement, utiliser « http://localhost/02VBControlesServeur »
- Visual Studio .NET crée pour vous l’application Web ASP.NET dans le répertoire
« C:\Inetpub\wwwroot », ainsi qu’une page ASPX « WebForm1.aspx »
- Cliquer sur le bouton « Afficher tous les fichiers » de l’explorateur de solutions afin
de voir les fichiers de code behind

Vous pouvez constater la présence des fichiers Web.Config, Global.asax,


AssemblyInfo.vb et le fichier de code behind de la page web WebForm1.aspx dont
nous avons discuté précédemment.

Exercice 2 – Les contrôles HTML

- Dans la boîte à outils, sélectionner l’onglet « HTML » et ajouter les contrôles


suivants sur la page Web (en faisant un glisser/déplacer des contrôles vers la
page par exemple). Utiliser la fenêtre de propriétés afin de spécifier les
attributs Id et Name tels que définis ci-dessous :
◊ Une zone de texte (« Text Field ») : id=TextBox1, Name=TextBox1

Page 1 sur 4
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

◊ Un bouton : id=Button1, Name=Button1


◊ Un label : id=Label1

- Pour chacun de ces 3 contrôles, cliquer droit sur le contrôle et sélectionner


« Exécuter en tant que contrôle serveur ». De cette manière les événements liés à
ces contrôles seront traités côté serveur.
- Constater qu’un contrôle serveur est repéré par une flèche verte :
- Passer en mode HTML afin d’observer le code HTML généré par Visual Studio .NET

Nous allons essayer de faire en sorte que lorsque l’utilisateur clique sur le bouton, le label
soit mis à jour avec le contenu de la zone de texte.
- Double cliquer sur le bouton
- Le gestionnaire d’événement associé à l’événement ServerClick est
automatiquement généré dans le code serveur (code behind) par Visual Studio
.NET.

- Insérer le code suivant :

Label1.InnerText = TextBox1.Value

- Compiler le projet Web par le menu « Générer / Générer la solution »


- Exécuter le formulaire en effectuant un click droit sur WebForm1.aspx dans
l’explorateur de solution et en choisissant « Afficher dans le navigateur ».
- Tester le fonctionnement du formulaire.
- Regarder la source HTML de la page obtenue pour constater qu’il n’y a pas de
référence aux lignes de code tapées précédemment.
- Avec l’explorateur de fichiers, regarder dans le répertoire de l’application Web, un
répertoire « Bin » a été créé. Il contient la DLL correspondant au code serveur de
l’application Web.

Page 2 sur 4
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

Exercice 3 – Les contrôles Web Serveur – Création d’une fenêtre


de Logon

- Dans l’explorateur de solutions, effectuer un click droit sur le projet et ajouter un


nouveau formulaire. Nommer ce formulaire « frmLogon »

- Ajouter les contrôles serveur suivants (situés dans l’onglet « Web Forms » de la
boîte à outils) :
◊ Trois labels : labLogon, labMotDePasse et labMessage
◊ Deux zones de texte : txtLogon et txtMotDePasse
◊ Un bouton : cmdOK

- Double-cliquer sur le bouton et insérer le code suivant :

Page 3 sur 4
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

Private Sub cmdOK_Click(ByVal sender As System.Object, ByVal e As


System.EventArgs) Handles cmdOK.Click
Dim logonValide As Boolean = False

Select Case txtLogon.Text.ToLower


Case "etudiant1"
logonValide = (txtMotDePasse.Text = "passe1")
Case "etudiant2"
logonValide = (txtMotDePasse.Text = "passe2")
Case Else
logonValide = False
End Select

If logonValide Then
Response.Redirect("WebForm1.aspx")
Else
labMessage.Visible = True
End If
End Sub

- Ajouter ensuite le code suivant :

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As


System.EventArgs) Handles MyBase.Load

labMessage.Visible = False
txtMotDePasse.TextMode = TextBoxMode.Password

End Sub

- Recompiler la solution et tester le fonctionnement de cette page en vous


trompant, puis en entrant un logon et un mot de passe valides

Nous allons maintenant faire en sorte que lors du tout premier appel du formulaire, la
zone de texte de saisie du logon soit initialisée avec le texte suivant : « Tapez votre
logon ».

- Modifier l’événement « Page_Load » comme suit :

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As


System.EventArgs) Handles MyBase.Load

labMessage.Visible = False
txtMotDePasse.TextMode = TextBoxMode.Password

If Not Page.IsPostBack Then


txtLogon.Text = "Tapez votre logon"
End If

End Sub

- Recompiler et tester de nouveau la page

Page 4 sur 4