exercices asp net

TDM Sites WEB dynamiques

FARIH Saïd 1

Exercices ASP.NET

I. Premiers pas en asp.net

1. Créer une première application web

a. Lancer Visual Studio 2008.

b. Créer un nouveau projet de type Web :

Cliquer le menu Fichier > Nouveau Site Web…

Sélectionner le modèle de projet web Site Web vide.

Dans la liste Emplacement, sélectionner Système de fichiers.

Sélectionner le chemin du répertoire et donner un nom au site : FirstApp.

Dans la liste Langage, sélectionner le langage de prédilection.

Cliquer sur OK. Le contenu de l’Explorateur de solutions pointe sur votre répertoire de travail.

c. Créer une première page web

Sélectionner le modèle Formulaire Web (Web Form).

Saisir le nom par défaut : MaPage.aspx.

Choisir le langage de prédilection.

Cocher Placer le code dans un fichier distinct. Puis cliquer Ajouter.

d. Basculer en mode Design,

Observer la page MaPage.aspx générée :

e. Ouvrir le fichier MaPage.aspx.cs :

Pour afficher le fichier de code, faire un clic droit sur la page > Afficher le code ou cliquer sur le fichier dans

l’Explorateur de solutions.

f. Ouvrir la page Default.aspx dans le concepteur de vue en mode Design :

Depuis l’Explorateur de solutions, cliquez sur l’icône Concepteur de vue .

g. Dessiner un contrôle Label sur la page :

Passer en mode Design en cliquant sur l’onglet Design en bas à gauche.

Depuis la boîte à outils, faire un glisser déplacer d’un contrôle Label de la catégorie Standard sur la page.

h. Utiliser le mini navigateur html :

En mode Source, remarquer le navigateur html dans la barre de navigation au bas de la page.

Cliquer par exemple <form#form1> pour sélectionner en un seul clic l’ensemble de la balise form. On peut

ainsi remonter de droite à gauche toutes les balises jusqu’à la balise <html> qui encapsule l’ensemble du

contenu.

i. Utiliser la fonctionnalité IntelliSense qui est maintenant disponible partout :

En mode Source, supposons qu'on veut ajouter un attribut bgcolor à la balise <body> : positionner le curseur

à droite de la lettre y et cliquer la barre d’espace du clavier pour écrire le nom de l’attribut. L’IntelliSense se

déclenche et vous propose une liste d’attributs pour la balise.

Taper bg. L’IntelliSense se positionne directement sur le premier attribut commençant par ces lettres. Avec la

touche Tab du clavier (ou la barre d’espace ou directement en tapant =), l’IntelliSense récupère l’intégralité de

l’attribut.

j. Exécuter l’application web

Lancer l’exécution de l’application : Menu Déboguer > Exécuter sans débogage (ou Ctrl+F5).

Afficher la page Default.aspx en mode Design et double cliquer n’importe où sur la page pour faire apparaître

la fenêtre de code behind et générer automatiquement la signature de la procédure de réponse à l’évènement

de chargement de la page:

Label1.Tex = "Bienvenue sur le site du TDM2-ISTA AlAdarissa";

Sauvegarder la page. Puis basculer sur le navigateur encore ouvert sur la page Default.aspx. Cliquer sur

Actualiser

Revenir sur la page source, corriger l'erreur. Sauvegarder la page. Puis basculer sur le navigateur encore ouvert

sur la page Default.aspx. Cliquer sur Actualiser.

2. Créer un premier formulaire dynamique

On veut gérer certains événements qui se déroulent dans les villes.

a. Créer une page HTML qui affiche tout simplement 3 textes Ville: , Date sur la même ligne et Résultat de la

recherche... sur la ligne suivante. Enregistrez la page Default.htm


FARIH Saïd 2

b. On va améliorer la page précédente –sous Visual Studio-

un critère de recherche intitulé « Ville » qui doit être une liste déroulante listant les villes dans lesquelles sont

déroulés les événements.

un critère de recherche intitulé « date » qui doit être une zone de saisie où l’utilisateur entre la date à partir

de laquelle il souhaite consulter les événements.

Le formulaire devra contenir également un bouton "Ok" qui lancera la recherche des informations à partir de

la base de données des annonces.

une seconde zone présentant les résultats de la recherche. Pour l’instant cette zone affiche « Résultat de la

recherche… ».

c. La page sera nommée Default.aspx. puis ajouter une balise <form> à la page.

d. Ajoutez maintenant les contrôles de sélection/saisie et un bouton de soumission.

e. Programmer le bouton "Ok" pour qu'on puisse afficher la ville sélectionnée et une date saisie (ou simplement

la date d'aujourd'hui).

Enregistrer puis exécuter la page.

Sélectionner une région dans la liste, entrer une date dans la zone de texte et cliquer sur "Ok".

f. Afficher dans un tableau les événements d'une ville et leurs dates correspondantes.

g. Maintenant au lieu de saisir manuellement la date, on peut la sélectionner à partir d'un calendrier (contrôle

Calendar), la date choisie sera inscrite dans la zone de texte txtDate.

h. Implémenter le modèle de code-behind:

Dans le fichier Default.aspx.cs, On veut lorsqu'on clique sur le bouton "Ok" ou lorsqu'on choisit une date dans le

calendrier. Ce dernier disparait après l'affichage de la date en short dans un label et en long dans la zone de texte.

Enregistrer la page et vérifier son fonctionnement.

3. Travailler la présentation graphique-Master Page

a. Diviser la page en zones de contenu

Vous pouvez isoler :

les zones de navigations principales, tels que les menus ou liens hypertextes.

les zones de navigations secondaires,

l’en-tête de page, avec le logo de la société, une bannière de publicité etc…

le pied de page,

la zone de contenu contextuel en fonction de la page en cours,

etc…

Supposons ici qu’en analysant les types de contenus sur les pages de notre site, il en ressorte ceci :

Plan du site | Contactez-nous | Ajouter aux favoris

Logo Panneau publicitaire

Chemin de navigation

Espace membre

Zone dynamique modifiable par les pages enfants

Menu privé

Services

Menu des services

Pied de page

FARIH Saïd 3

Zones de

contenu

Description du contenu Représentation du contenu

En-tête Une barre avec des liens vers le plan du site,

comment vous contacter, etc…

Toute la zone contient un fond d’écran original et

coloré faisant office de bannière pour l’ensemble du

site. La barre de liens et la barre de navigation

sont alignées sur le bord droit de la zone. Le logo

est à gauche.

Un logo

Un panneau publicitaire

Une barre de navigation donnant des

informations telles que le chemin de la page

en cours dans la structure des pages du site.

Corps de

page

Une partie « espace membre » destinée aux

utilisateurs authentifiés sur le site et aux

informations de leur compte personnel.

Une partie « Services » contenant le menu

des services proposés par le site.

Une partie centrale affichant le contenu

dynamique d’une page à l’autre du site.

L’espace membre et la zone de services sont dans

une barre colorée alignée sur le bord gauche.

La zone centrale est au contraire calée à droite et

sur fond blanc.

Pied de

page

Panneau contenant des informations du type

adresse, téléphone, fax de l’entreprise

La zone doit être centrée et est simplement sur

fond blanc.

b. Etablir une feuille de style

c. Créer la page Maître

Faire un clic droit sur la racine du projet dans l’Explorateur de solutions > Ajouter un nouvel élément…

Sélectionner page Maître et garder le nom par défaut : MasterPage.master.

Basculer en mode Design. La page est vide et contient uniquement par défaut un contrôle ContentPlaceHolder.

Ajoutez une référence à la feuille de style : En mode Source, ajouter une balise <link> à l’intérieur de la balise

<head> comme suit :

<head runat="server">

<title>Page sans titre</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

<link href ="Default.css" rel= "Stylesheet" type="text/css" >

</head>

Toujours en mode Source, supprimer le contrôle <asp :contentplaceholder> et sa balise <div> englobante. La

balise <form> est maintenant vide.

Ajouter la zone d’en-tête de la page :



<div class="header">



<div class="menua">Plan du site | Contactez-nous | Ajoutez aux favoris</div>



<div class="rotator"></div>



<div class="nav"></div>

</div>

ajouter la zone centrale de la page :



<div class="page">



<div id="sidebar">



<h1>Espace membre</h1>

<div id="liensEspaceMembre"></div> <hr />



<h1>Nos Annonces</h1>

<h2>Consultez toutes nos annonces et passez vos annonces en ligne</h2>

</div>



<div id="content"></div></div>

FARIH Saïd 4

enfin ajoutez la zone pied de page associée à la classe footer :



<div class="footer">

</div>

Rester en mode Source. Et faire un glisser déplacer à l’intérieur de la balise <div id= "content"> d’un contrôle

ContentPlaceHolder depuis la Boîte à outils > rubrique Standard.

Renommer le contrôle : Main.

<div id="content">

<asp:ContentPlaceHolder ID="Main" runat="server">

</asp:ContentPlaceHolder>

</div>

Ajouter le panneau publicitaire : faire un glisser déplacer à l’intérieur de la balise <div class= "rotator"> d’un

contrôle AdRotator depuis la Boîte à outils > rubrique Standard.

<asp:AdRotator AdvertisementFile="PublicationsBanniere.xml" runat="server"

ID="AdRotator1">

</asp:AdRotator>

Ajouter un texte simple en bas de page : faire un glisser déplacer à l’intérieur de la balise <div class="footer">

d’un contrôle Literal depuis la Boîte à outils > rubrique Standard.

Changer l’ID par défaut en ltlPiedDePage.

Ajouter le texte comme suit dans la propriété Text :


<asp:Literal ID="ltlPiedDePage" Text="Adresse | Tel: +212 612 345 678 | Fax:

+212 612 345 679" runat="server"> </asp:Literal>

</div>

d. Créer des pages de contenu.

Créer une nouvelle page de contenu, nommée QuiSommesNous.aspx à partir de la page Maître. Son contenu

est une description de l’entreprise.

Transformer une page existante: Ouvrir la page Default.aspx en mode Source. Modifier la directive @Page pour

indiquer au runtime que la page hérite maintenant de la page Maître MasterPage.master, puis ajouter l’attribut

MasterPageFile et pointer sur l’url de la page Maître.

<%@ Page MasterPageFile ="~/MasterPage.master" Language="C#" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default" %>

On doit ensuite transformer la structure de la page qui n’a plus de balise <html> puisqu’elle va déjà être

incluse dans celle de la page Maître : Supprimer tout le contenu HTML de la page en ne gardant que la

directive @Page et le contrôle Label qu'on avait dessiné :

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Une page enfant n’a le droit que de remplir les zones de contenu délimitées par les contrôles

ContentPlaceHolder de la page Maître. Dans une page enfant, cette zone de contenu dynamique est un

contrôle <asp:Content> qui est relié à un contrôle ContentPlaceHolder parent par l’attribut ContentPlaceHolderID

: ajoutez un contrôle <asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server" >

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</asp:Content>

Sauvegarder la page puis exécuter la page.

e. Accéder aux objets de la page maître depuis la page enfant

Ajouter une propriété dans la page maître publique PiedDePage qui renvoie la valeur de la propriété Text du

contrôle ltlPiedDePage

public partial class MasterPage : System.Web.UI.MasterPage{

public string PiedDePage{

get {

return ltlPiedDePage.Text;

}

set {

ltlPiedDePage.Text = value;

}}} Pour accéder à cette propriété depuis la page enfant, il faut d’abord créer dans cette dernière une référence

fortement typée sur la page maître correspondante : En mode source, ajoutez la directive @MasterType à la

page pour indiquer le type de la page maître dont la page hérite :

<%@ MasterType VirtualPath="~/MasterPage.master" %> Sauvegarder la page.


FARIH Saïd 5

Ajouter le code de modification du pied de page dans la page enfant :

Afficher le code behind de la page Default.aspx. Puis positionner le curseur juste après le remplissage du Label1

dans la procédure Page_Load de façon à changer le pied de page dès le chargement de la page. Ensuite accéder

directement à la propriété PiedDePage en utilisant la propriété Master de la classe Page et saisir le texte suivant :

protected void Page_Load(object sender, EventArgs e)

{

Label1.Text = "Bienvenu sur le site N°1 de la...";

Master.PiedDePage="Merci de prendre quelques instants pour répondre à notre <a

href=EnqueteSatisfaction.aspx>enquête de satisfaction</a>";

} Sauvegarder le fichier puis exécuter la page Default.aspx pour observer le changement dynamique de pied de

page.

f. Créer une nouvelle page de contenu

Créer une nouvelle page de contenu : Faire un clic droit sur le répertoire du projet dans l’Explorateur de

solutions > Ajouter un nouvel élément…puis Sélectionnez le modèle Formulaire Web et cocher les deux cases à

cocher. Nommer la page : ContactezNous.aspx.

Cliquer sur Ajouter. Et dans la fenêtre Sélectionner une page maître, cliquer sur la page MasterPage.master.

Observer la page générée en mode Source : on obtient directement une page avec un contrôle <asp:Content>

lié au contrôle <asp:ContentPlaceHolder> d’ID=Main de la page Maître, comme précédemment pour la page

Default.aspx.

Ajouter du contenu à la page : Basculer en mode Design en tapant directement dans le contrôle Content1 le

contact de l’entreprise ou plus simplement un texte.

Sauvegarder la page puis exécuter la page.

g. Utiliser un thème

Créer un nouveau thème : Faire un clic droit sur la racine de votre projet dans l’Explorateur de solutions >

Ajouter le dossier ASP.Net > Theme.

Nommer le thème : Default (ce sera le thème par défaut de l'application).

Visual Studio a créé un répertoire très spécial avec le nom prédéfini App_Themes. C’est là que ASP.NET s’attend

à trouver tous les thèmes utilisés par l'application.

Déplacer les éléments graphiques dans le dossier Default : Faire un glisser déplacer de la feuille de style

default.css et du répertoire Images sous le dossier Default.

Créez un fichier de configuration pour l'application (celui-ci existe peut-être déjà si on avait activé le mode

debug) : Depuis l’Explorateur de solutions, faire un clic droit sur la racine du projet > Ajouter un nouvel

élément… > modèle fichier de configuration Web.

Appliquer le thème à l’ensemble de l’application depuis le fichier de configuration : Depuis l’Explorateur de

solutions, double cliquer sur le fichier web.config pour l’éditer, puis ajouter à l’intérieur de la balise

<system.web> la balise <pages> donnant le nom du dossier Thème qu'on souhaite appliquer à l’application.

<system.web>

<pages theme ="Default" />

On peut supprimer la référence dans le fichier MasterPage.master. ASP.NET sait où la trouver tout seul.

<link href ="Default.css" rel= "Stylesheet" type="text/css" >

Tester l’exécution de la page Default.aspx pour vérifier que le runtime retrouve la feuille de style.

h. Appliquer un autre thème

Depuis l’explorateur de Windows, faire un glisser déplacer du répertoire Chaud dans le dossier App_Themes du

projet dans l’Explorateur de solutions.

Appliquer le thème à l’ensemble de l’application depuis le fichier de configuration : Depuis l’Explorateur de

solutions, double cliquer sur le fichier web.config pour l’éditer puis changer l’attribut theme de la balise

<pages> avec le nouveau nom de thème : Chaud.

Exécutez la page Default.aspx pour tester le nouveau thème.

i. Définir un fichier d’apparence de contrôles

Regardant le contrôle serveur AdRotator qu'on a positionné dans la page maître : Afficher la page

MasterPage.master en mode Design. Puis faire un clic droit sur le contrôle AdRotator1 > Propriétés

Faire un clic droit sur le répertoire Default dans App_Themes > Ajoutez un élément existant…puis sélectionner

Default.skin puis cliquer Ajouter.

j. Utiliser un contrôle serveur avancé

Construire deux nouvelles pages EnqueteSatisfaction.aspx et EnqueteSatisfactionTerminee.aspx qui réalisent

l’enquête.

Ouvrir la page EnqueteSatisfaction.aspx en mode Design. Faites un glisser déplacer du contrôle Wizard dans la

Boîte d’outils > rubrique Standard sur le contrôle Content1.

Supprimer la barre de navigation du contrôle : afficher la fenêtre de propriétés du contrôle Wizard (clic droit

sur le contrôle > Propriétés) puis changer la valeur de DisplaySideBar : False.


FARIH Saïd 6

4. Création de son premier thème

On va voir comment les thèmes utiliser dans les pages Web à l'aide de Visual Studio (2005/2008).

a. Création du répertoire de gestion des thèmes

Une fois le projet créé, On va ajouter le répertoire qui gère les thèmes ASP.NET. Pour cela, faite clic droit sur le

projet dans la fenêtre "Solution Explorer" et cliquez sur "Add/Add ASP.NET Folder/Theme".

Le répertoire App_Themes est le répertoire de base permettant de gérer les thèmes. D'ailleurs, lors de la

création de ce répertoire, Visual Studio a créé par la même occasion le répertoire Theme1 représentant votre premier

thème de départ. On utilisera ce répertoire pour établir notre premier thème en le renommant MonPremierTheme.

b. Création de notre fichier Skin

On va à présent créer le fichier d'apparences à l'aide d'un fichier .skin ; faire clic droit sur le répertoire Theme1

puis sélectionner "Add/New Item...". Dans la boite de dialogue, sélectionner le fichier de type .skin et nommer le fichier

monApparence.skin.

Maintenant que le fichier d'apparences est créé, on va y définir les choses suivantes :

Label nommé : texte en gras et souligné.

Image nommée : représentée par une flèche qui sera placée devant notre Label nommé.

Label par défaut : texte en gras.

TextBox par défaut : bordure en pointillés et de couleur verte.

Button par défaut : couleur de fond mauve et couleur de texte en blanc.

Ce qui donne le résultat suivant :

<asp:Label runat="server" SkinID="Titre" Font-Bold="true" Font-

Underline="true"></asp:Label>

<asp:Image runat="server" SkinID="Fleche" ImageUrl="~/fleche.gif" />

<asp:Label runat="server" Font-Bold="true"></asp:Label>

<asp:TextBox runat="server" BorderStyle="Dotted" BorderColor="#008040"

Width="98%"></asp:TextBox>

<asp:Button runat="server" BackColor="#8080C0" ForeColor="white" />

c. Création de notre feuille de style

On va aussi créer une feuille de style (Clic droit sur le répertoire monPremierTheme et sélectionnez "Add/ New

Item....". Puis dans la boite de dialogue, sélectionner le fichier de type Style Sheet et nommer le monStyle.css) avec

aura les propriétés suivantes :

Fond d'écran gris.

Police Verdana de taille 12.

Les tableaux auront une bordure continue grise de 2 pixels.

Ce qui nous donne le résultat suivant :

body

{

background-color: #E8E8E8;

font-family: Verdana;

font-size: 12px;

}

table

{

border: 2px solid #CCC;

}

d. Application du thème à une page web

Passer à la création de notre page aspx qui va représenter un formulaire (sans logique de traitement derrière)

afin que l'utilisateur puisse y insérer son nom, prénom et adresse email. Au passage, vous verrez trois boutons qui

permettront de changer de thème dynamiquement. On obtient donc facilement le code suivant :

<form id="form1" runat="server">

<div>

<table width="350px">

<tr>

<td colspan="2">

<asp:Image ID="Image_Fleche" runat="server" />

<asp:Label ID="Label_Titre" runat="server" Text="Formulaire d'exemple"></asp:Label>

</td>

</tr>

<tr>

<td style="width: 100px;"><asp:Label ID="Label_Nom" runat="server" Text="Nom

"></asp:Label></td>

<td style="width: 250px;"><asp:TextBox ID="TextBox_Nom"

runat="server"></asp:TextBox></td>

</tr>

<tr>


FARIH Saïd 7

<td><asp:Label ID="Label_Prenom" runat="server" Text="PrÃ©nom "></asp:Label></td>

<td><asp:TextBox ID="TextBox_Prenom" runat="server"></asp:TextBox></td>

</tr>

<tr>

<td><asp:Label ID="Label_Email" runat="server" Text="E-mail "></asp:Label></td>

<td><asp:TextBox ID="TextBox_Email" runat="server"></asp:TextBox></td>

</tr>

<tr>

<td colspan="2" style="text-align: center;">

<br />

<asp:Button ID="Button_Theme1" runat="server" Text="ThÃ¨me1" />



</td>

</tr>

</table>

</div>

</form>

Nous allons à présent appliquer le thème monPremierTheme. Pour ce faire, on doit assigner la propriété Theme

de la balise Page de votre page Web avec le nom de votre thème :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

Inherits="TutorialThemes._Default" Theme="MonPremierTheme" %>

Au passage, on utilisera les SkinID Titre et Fleche qu'on appliquera respectivement aux contrôles Label_Titre et

Image_Fleche :

<asp:Image ID="Image_Fleche" SkinID="Fleche" runat="server" />

<asp:Label ID="Label_Titre" SkinID="Titre" runat="server" Text="Formulaire

d'exemple"></asp:Label>

e. Changement dynamique du thème

Précédemment, on a initialisé le thème via le designer mais il est tout à fait possible de le modifier durant

l'exécution de l'application Web. Pour ce faire, il suffit tout simplement de setter la propriété Theme du objet Page

avec le nom du thème à utiliser. A noter que ceci ne peut être fait qu'au moment de l'évènement PreInit ou alors

avant cet évènement.

Prenons l'exemple de trois thèmes appelés MonPremierTheme, MonDeuxiemeTheme et MonTroisiemeTheme.

Lorsque l'utilisateur cliquera sur un des trois boutons, on sélectionnera le thème correspondant :

protected override void OnPreInit(EventArgs e){

string objBtn1 = Page.Request["Button_Theme1"];



if (objBtn1 != null)

{ Page.Theme = "MonPremierTheme"; }

else if (objBtn2 != null)

{ Page.Theme = "MonDeuxiemeTheme"; }

else if (objBtn3 != null)

{ Page.Theme = "MonTroisiemeTheme"; }

else

{ Page.Theme = "MonPremierTheme"; }

base.OnPreInit(e);

}

}


FARIH Saïd 8

f. Thème pour tout le site Web

Jusqu'à maintenant, on n'a appliqué un thème qu'à une page mais il est possible de définir un thème pour

l'entièreté des pages d'un site Web. Pour cela, on passera par le fichier de config où on précisera le nom du thème à

utiliser :

<?xml version="1.0"?>

<configuration>

<system.web>

<pages theme="MonPremierTheme" />

</system.web>

</configuration>

On n'aura donc plus besoin de préciser le thème pour chaque thème via la propriété Theme de la balise page

de vos pages aspx.

5. Validators

Exercice 1

Créer une page web qui contient une liste déroulante, un bouton et une zone de texte.

Dans la liste on trouve 4 villes différentes avec la valeur initiale par défaut qui sera affichée "Choisissez votre

ville". Attacher à cette liste un validator qui permet d'exiger le choix d'une valeur différente de la valeur par défaut.

L'utilisateur doit saisir le code postal de la ville correspondante.

On veut se rediriger vers la page reponse.aspx lorsqu'on clique sur le bouton "Valider".

Exercice 2

a. Utiliser les contrôles Web suivants pour réaliser le formulaire :

Une zone de texte : TextBox1

Un bouton : Button1

Un label : Label1

b. On va essayer de faire en sorte que lorsque l’utilisateur clique sur le bouton OK, le label soit mis à jour avec

le contenu de la zone de texte

Exercice 3

a. Créer la fenêtre de logon suivante

b. Tester le fonctionnement du formulaire

c. Initialiser la zone de texte de saisie du logon soit avec le texte suivant : « Tapez votre logon ».

d. Tester la modification en relançant une nouvelle instance du navigateur.

Exercice 4: Les contrôles serveur avancés

1. Modifier ce formulaire (WebForm2.aspx).


FARIH Saïd 9

2. Ajouter deux Validators: RangeValidator et RequiredFieldValidator.

3. Modifier les deux propriétés suivantes de RequiredFieldValidator :

ControlToValidate -> TextBox1

ErrorMessage -> Champ de saisie obligatoire

4. Modifier les deux propriétés suivantes de RangeValidator :

ControlToValidate -> TextBox2

ErrorMessage -> Valeur entre 0 et 999

5. Compiler et essayer de valider le formulaire sans avoir saisi de valeur dans la première zone de texte

(Que remarquer?)

6. Modifier la propriété suivante :

EnableClientScript -> False

7. Compiler et essayer de valider le formulaire sans avoir saisi de valeur dans la première zone de texte

(Que remarquez-vous ?)

8. Programme la deuxième zone de texte pour qu’il n’accepte que des valeurs entières compris entre O et

999

9. Compiler et essayer de valider le formulaire (on suppose que la première zone de texte contient une

valeur quelconque) en saisissant la valeur 1500 dans la seconde zone de texte puis réessayer avec la

valeur 80.

10. Refaire ce bloc de programme écrit en VB en C#.

Partial Class _Default Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Button1.Click

Dim logonvalide As Boolean = False

Select Case TextLogon1.Text.ToLower

Case "logon1"

If TextMotPasse1.Text = "passe1" Then

logonvalide = True

End If

'logonvalide = (TextMotPasse1.Text = "passe1")

Case "logon2"

If TextMotPasse1.Text = "passe2" Then

logonvalide = True

End If

'logonvalide = (TextMotPasse1.Text = "passe2")

Case Else

logonvalide = False

End Select

If logonvalide = True Then

Response.Redirect("Default.aspx")

Else

LabelMssg3.Visible = True

End If

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Me.Load

LabelMssg3.Visible = False

TextMotPasse1.TextMode = TextBoxMode.Password

If Not (Page.IsPostBack) Then

TextLogon1.Text = "Taper votre logon"

End If

End Sub

End Class

Exercice 5: Travail à faire à la maison

Notre objectif c’est de réaliser un site web de gestion des vacataires au sein de l’ISTA Adarissa.

Notre site web est donc basé sur deux pages web :

La première page d’authentification permet d’identifier l’utilisateur sur le site via un login et un mot de passe.

La deuxième permet de gérer les formateurs Vacataires.


FARIH Saïd 10

Partie I : Réaliser la page web d’authentification suivante :

Tel que :

Le bouton Ok permet de valider le login et mot de passe, et charger

Ensuite la deuxième page web ci-dessous.

Le bouton Annuler permet de quitter le site web.

Partie II : Réaliser la page web de gestion suivante :

Tel que :

Le bouton Nouveau permet d’initialiser les champs du formulaire.

Le bouton Ajouter permet de stocker les informations d’un vacataire en mémoire, à vous de choisir la

structure adéquate.

Le bouton Supprimer permet de supprimer le vacataire sélectionné.

Le lien HyperText Page d’authentification en bas de page permet de charger la page d’authentification.

6. Ajouter la navigation

Cet atelier illustre la mise en œuvre des éléments de navigation d’une application web, tels que les menus. On

utilisera les fichiers de l'exercice précédent, et surtout MasterPage.master sinon il faut le recréer.

a. Contexte fonctionnel de l’atelier:

L’essentiel des options de menu de l’application web Affaires.ma concerne les services disponibles autour des

annonces :

Service de consultation des annonces en ligne. Celles-ci sont classées par région. L’utilisateur peut également

retrouver dans quels journaux est publiée chaque annonce.

Service de diffusion d’une annonce. Ce service n’est accessible qu’aux utilisateurs authentifiés.

Service d’administration des annonces. Ce service n’est accessible qu’à l’administrateur du site.

L’application web fournit trois systèmes de navigation :

Un menu sur le côté gauche de l’écran qui permet de naviguer dans les services du site.

Le même menu dans le pied de page, qui permet d’avoir un lien sur tous les services à la fin de la lecture

d’une page (sans avoir besoin de refaire défiler la page jusqu’à son sommet pour refaire apparaître le menu

gauche).

Un chemin dans la bannière du site qui permet de savoir à tout moment où l’on se trouve dans la hiérarchie

des pages du site.


FARIH Saïd 11

b. Construire un plan de site

L’application web fournit trois systèmes de navigation :

Un menu sur le côté gauche de l’écran qui permet de naviguer dans les services du site.

Le même menu dans le pied de page, qui permet d’avoir un lien sur tous les services à la fin de la lecture

d’une page (sans avoir besoin de refaire défiler la page jusqu’à son sommet pour refaire apparaître le menu

gauche).

Un chemin dans la bannière du site qui permet de savoir à tout moment où l’on se trouve dans la hiérarchie

des pages du site.

Plan Url de la page associée

Accueil Default.aspx

Consulter nos annonces ConsulterAnnoncesParRegion.aspx

Consulter les publications ConsulterAnnoncesJournaux.aspx

Diffuser une annonce DiffuserAnnonce.aspx

Administrer les annonces AdministrerAnnonces.aspx

Qui sommes-nous ? QuiSommesNous.aspx

Créer les différentes pages de l’application web correspondantes aux nœuds :

Explorateur de solutions > Ajouter un nouvel élément > modèle Formulaire web. Sélectionner Placer le code dans

un fichier distinct et Sélectionner la page maître puis MasterPage.master dans la fenêtre Sélectionner une page maître.

Créer un fichier de type plan de site :

Faire un clic droit sur la racine du projet dans l’Explorateur de solutions > Ajouter un nouvel élément…

Sélectionner Plan de site et garder le nom par défaut :Web.sitemap.

Modifier le plan de site vide en ajoutant les informations des différentes pages de l’application :

Saisir les nœuds suivants à partir du modèle de plan généré :

Url Titre Description Niveau

Default.aspx Accueil Espace Accueil 0

ConsulterAnnoncesParRegion.aspx Consulter nos annonces Liste de toutes nos annonces classées par

région 1

ConsulterAnnoncesJournaux.aspx Consulter les

publications Liste des publications de nos annonces 2

DiffuserAnnonce.aspx Diffuser une annonce Publier une annonce en ligne 1

AdministrerAnnonces.aspx Administrer les annonces Administration des annonces 1

QuiSommesNous.aspx Qui sommes-nous ? En savoir plus sur AffairesSansRisque 1

Plan de site est maintenant prêt :

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="Default.aspx" title="Accueil" description="Espace Accueil">

<siteMapNode url="ConsulterAnnoncesParRegion.aspx" title="Consulter nos

annonces" description="Liste de toutes nos annonces classées par région" >

<siteMapNode url="ConsulterAnnoncesJournaux.aspx" title="Consulter les

publications" description="Liste des publications de nos annonces" />

</siteMapNode>

<siteMapNode url="DiffuserAnnonce.aspx" title="Diffuser une annonce"

description="Publier une annonce en ligne" />

Indicateur du

chemin de la

page en cours

dans la

hiérarchie du Menu de type

treeview avec

exploration

dynamique des

sous niveaux de Barre de menu horizontale dans le pied de page


FARIH Saïd 12

<siteMapNode url="AdministrerAnnonces.aspx" title="Administrer les annonces"

description="Administration des annonces" />

<siteMapNode url="QuiSommesNous.aspx" title="Qui sommes-nous ?" description="En

savoir plus sur AffairesSansRisque" />

</siteMapNode>

</siteMap>

c. Définir une source de données

La navigation est une fonctionnalité commune à l’ensemble de l’application web, c’est pourquoi elle est mise en

œuvre sur la page maître MasterPage.master. La source de données doit représenter le plan de site établi

précédemment:

Double cliquer sur MasterPage.master l’Explorateur de solutions. Puis ajouter un contrôle SiteMapDataSource

dans la zone « Services des annonces proposés par le site » juste après le titre en style <h2>, par: Boîte à

outils > rubrique Données > contrôle SiteMapDataSource.




<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"

ShowStartingNode="False" />

Paramétrer à False la propriété ShowStartingNode du contrôle pour démarrer la lecture du plan au premier

niveau des nœuds à l’intérieur du nœud racine.

d. Définir des menus

Ajouter les contrôles de navigation à l’application liés à la source de données établie précédemment pour:

Utiliser le contrôle serveur de type TreeView.

Utiliser le contrôle serveur de type Menu.

Utiliser le contrôle serveur de type SiteMapPath.

i. Le contrôle TreeView

C’est le contrôle qui va permettre d’afficher le menu sur la barre de navigation à gauche vers l’ensemble des

pages du site:

Ouvrir la page MasterPage.master en mode Source :

Ajouter un contrôle TreeView à la suite du contrôle de source de données SiteMapDataSource dans la partie

« Services des annonces proposés » : Boîte à outils > rubrique Navigation > contrôle TreeView.




<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"

ShowStartingNode="False" />

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"

LineImagesFolder="~/TreeLineImages" ShowLines="True" CssClass="treeview">

</asp:TreeView>

Basculer en mode Design pour afficher la balise active du contrôle. Choisir la source de données

SiteMapDataSource1

Modifier les Databindings TreeNode qui permet de personnaliser les liaisons du contrôle avec les nœuds de la

source de données.

Actualiser le schéma pour rafraîchir le schéma associé à la source de données lorsque celle-ci a changé.

Afficher les lignes pour faire apparaître des lignes dans le menu.

Sauvegarder la page MasterPage.master. Puis exécuter la page Default.aspx pour observer le contrôle de

navigation.

ii. Le contrôle Menu

C’est le contrôle qui va permettre d’afficher le même menu dans le pied de page :

Ouvrir la page MasterPage.master en mode Source.

Puis ajouter un contrôle Menu juste au-dessus du contrôle literal ltlPiedDePage dans la partie « Zone : Pied

de page » : Boîte à outils > rubrique Navigation > contrôle Menu.


<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" </asp:Menu>

<asp:Literal ID="ltlPiedDePage" runat="server" Text="AffairesSansRisque |

Adresse | Tél : 0 800 888 888 | Fax : 0 111 111 999"></asp:Literal>

</div>

Basculer en mode Design pour afficher la balise active du contrôle. Choisir la source de données

SiteMapDataSource1

Noter que le contrôle a maintenant l’attribut DataSourceID renseigné :

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"

DataSourceID="SiteMapDataSource1" > </asp:Menu>


FARIH Saïd 13


navigation.

On pourrait utiliser également la mise en forme automatique proposée en mode Design dans le menu de la

balise active du contrôle. Cette option propose plusieurs apparences de contrôle prédéfinies.

iii. Le contrôle SiteMapPath

C’est le contrôle qui donne le chemin de la page en cours dans la bannière des pages.

Ouvrir la page MasterPage.master en mode Source. Puis ajouter un contrôle SiteMapPath à l’intérieur de la

balise <div> de classe « nav » : Boîte à outils > rubrique Navigation > contrôle SiteMapPath.

<div class="nav">

<asp:SiteMapPath ID="SiteMapPath1" runat="server"

</asp:SiteMapPath>

</div>


navigation. Cliquer sur le menu Consultez nos annonces pour observer le chemin de la page correspondante

donné par le contrôle.

Modifier également le séparateur dans le chemin affiché : Afficher MasterPage.master en mode Design. Puis

Cliquer la balise active du contrôle SiteMapPath1. Sélectionner l’option Modifier les modèles et Dans la liste

déroulante, se positionner sur le modèle correspondant au dessin du séparateur de menu :

PathSeparatorTemplate.


FARIH Saïd 14

Labo 1

Exercice 1

Ecrire un programme pour afficher un formulaire de feedback suivant:

Liste de cours:VB, Java, DotNet et C++

Lorsqu'on clique sur le bouton "Envoyer" après remplissage des contrôles, un message doit apparaitre en bas de

page pour remercier l'étudiant.

Exercice 2

Ecrire un programme qui affiche trois images sur une ligne. Lorsqu'on clique sur l'une des images, elle sera

affichée en bas. Si on clique sur cette dernière, elle sera disparue. Voir un exemple au-dessus:

Labo 2

Exercice 1

Ecrire un programme en ASP.NET qui affiche les Web Controls suivants:

un bouton avec le nom “click me”. Et qui doit être au centre du formulaire.

Un label qui porte le texte hello

Une case à cocher "checkbox".

Le formulaire prendra le nom "Web Controls".

Exercice 2

Ecrire un programme qui affiche “Welcome To ISTA-ADARISSA” dans un formulaire lorsqu'on clique sur un

bouton.

exercices asp net

Documents