Lab03 - Web Controls Avances

Labs ASP.NET v1.1

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

Lab03 But du Lab Le but de ce Lab est d’apprendre à utiliser certains contrôles Web Serveur tels que les contrôles de validation et le contrôle Calendar.

Exercice 1 – Les contrôles Validator -

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/03VBControlesServeurAvances »

-

Ajouter deux zones de texte (« TextBox1 » et « TextBox2 »), un bouton (« Button1 ») et un RequiredFieldValidator (« RequiredFieldValidator1 ») à la page « WebForm1.aspx ». Modifier les deux propriétés suivantes de RequiredFieldValidator1 : o ControlToValidate = TextBox1 o ErrorMessage = « Champ de saisie obligatoire »

-

-

Compiler et essayer de valider le formulaire sans saisir de valeur dans la première zone de texte. Vous devriez obtenir le résultat suivant :

Page 1 sur 5

Labs ASP.NET v1.1

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

Le contrôle a été effectué par du script client, aucun aller retour n’a été effectué vers le serveur. -

Modifier la propriété suivante : EnableClientScript = False Compiler et essayer de valider le formulaire sans avoir saisi de valeur dans la première zone de texte : le comportement est exactement identique excepté que le contrôle cette fois-ci, s’effectue que côté serveur et non côté client

-

Ajouter un RangeValidator (« RangeValidator1 ») et modifier les propriétés suivantes : o ControlToValidate = TextBox2 o ErrorMessage = « Doit être un entier compris entre 0 et 100 » o MinimumValue = 0 o MaximumValue = 100 o Type = Integer

-

Compiler et essayer de valider le formulaire (on suppose que la première zone de texte contient une valeur quelconque) en saisissant la valeur 150 dans la seconde zone de texte puis réessayez avec la valeur 80.

-

Ajouter un CustomValidator (« CustomValidator1 »), basculez et modifier les propriétés suivantes : o ControlToValidate = TextBox2 o ErrorMessage = « La valeur doit être impaire » Passer en mode HTML et ajouter l’attribut OnServerValidate= "FonctionValidation" :

-



Page 2 sur 5

Labs ASP.NET v1.1

-

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

Dans le code behind, ajouter le code suivant afin de tester la validité de la valeur saisie :

Public Sub FonctionValidation(ByVal source As Object, ByVal args As ServerValidateEventArgs) Dim valeur As Integer = Integer.Parse(args.Value) args.IsValid = ((valeur Mod 2) <> 0) End Sub -

Recompiler et tester le fonctionnement du formulaire

Page 3 sur 5

Labs ASP.NET v1.1

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

Exercice 2 – Le contrôle Calendar -

Ajouter un nouveau formulaire (WebForm2.aspx) Ajouter un label (« Label1 »), une DropDownList (« DropDownList1 ») et un Calendar (« Calendar1 ») Modifier la propriété « Text » du Label afin d’afficher « Planning des partiels » Cliquer droit sur le calendar, et choisir « Mise en forme automatique… » Choisir un design qui vous plaît et cliquer sur « OK »

Votre page devrait ressembler à quelque chose comme ceci :

-

Ajouter le code suivant dans le code behind afin de remplir la liste déroulante lors du premier accès à la page, et de cacher le contrôle Calendar :

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load If Not Page.IsPostBack Then DropDownList1.Items.Add("") DropDownList1.Items.Add("Gestion") DropDownList1.Items.Add("Informatique") DropDownList1.Items.Add("Mathématiques") Calendar1.Visible = False End If End Sub

-

Modifier la propriété « AutoPostBack » de la DropDownList1 en la positionnant à « True ». De cette manière, l’événement « SelectedIndexChanged » est déclenché côté serveur lorsque l’utilisateur saisie une valeur dans la liste

Page 4 sur 5

Labs ASP.NET v1.1

-

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

Double cliquer sur la DropDownList et ajoutez le code suivant :

Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged Calendar1.Visible = True Select Case DropDownList1.SelectedIndex Case 1 Calendar1.SelectedDate = New DateTime(2003, 7, 4) Case 2 Calendar1.SelectedDate = New DateTime(2003, 8, 12) Case 3 Calendar1.SelectedDate = New DateTime(2003, 9, 30) Case Else Calendar1.Visible = False Exit Sub End Select Calendar1.VisibleDate = Calendar1.SelectedDate End Sub

-

Compiler et tester cette page

Page 5 sur 5