ASP

Universit Ibno Tofail Facult des Sciences Master Qualit logiciel Cours : Internet & Multimdia
Pr. Abdelalim SADIQ

Sadiq.alim@gmail.com
Quest ce que .NET ?

Quest ce que .NET ? Un label marketing sur tous les nouveaux produits. Une plate-forme de dveloppement unifi. Un environnement dexcution scuris. Le remplaant de larchitecture 3-tiers DNA (Distribued interNet Architecture ). Objectifs Prendre une place prpondrante sur le Web avec la location de services. Proposer une interoprabilit entres les services Web travers Internet. Pouvoir consommer lInternet sur plusieurs types de support (PC, PDA, tlphone). tre la plate-forme de rfrence pour la cration de Services Web XML.
2010/2011
ASP.NET
Quest ce que .NET ?

Caractristiques Support 27 langages de programmation. Lobjet est prpondrant. Un ensemble complet de classes de base. Orient pour le dveloppement dapplications Web. Bas sur des standards dInternet : XML et SOAP. Pas de code natif : utilisation dun langage intermdiaire le MSIL (MicroSoft Intermediate Language). Lexcution des programmes est contrle par la CLR (Common Language Runtime). Une architecture complte : le Framework.
2010/2011
ASP.NET
2010/2011
ASP.NET
Framework .net
Le Framework Environnement dexcution de .net. Application et mmoire manages par la CLR. Indpendant des syntaxes. Vie dune application .net Compilation des sources vers le MSIL (MicroSoft Intermediate Language). Compilation du code MSIL vers le code natif machine : JIT Compiler (Just In Time), Pr JIT possible. Excution du code en Binaire.
2010/2011
ASP.NET
Support des standards

Support des standards Standards issus dorganismes indpendants. XML (eXtended Markup Language) pour les donnes. XSD (Schema Definition Language) pour dfinir la grammaire et le type de donnes dun langage. HTTP (Hyper Text Transfert Protocol), natif dans .NET.
SOAP (Simple Access Object Protocol), permet la communication des objets de manire transparente pour le dveloppeur.
WDSL (Web Services Description Language), format XML utilis pour dcrire les services dun rseau. UDDI (Universal Description, Discovery and Integration), annuaire des Web Services.
2010/2011
ASP.NET
Les langages
Les langages 27 langages supports pour le moment C#, VC++, VB.net, Jscript, Perl, Small Talk, Cobol, Fortan, Delphi Les langages doivent rpondre aux contraintes du MSIL. Une classe en C# peut-tre utilise dans un programme crit en VB.net. 27 syntaxes diffrentes plutt que 27 langages ?
Le C# A mi-chemin entre C++ et Java. Rponse de Microsoft Java : syntaxe et fonctionnalits similaires. Bnficie du Framework.net et sa CLR.
2010/2011
ASP.NET
ASP . NET
Quest ce quASP.net ? Version .NET dASP. : utilis pour la cration de site Web dynamique 3 types de pages : ASPx, ASMx (assembly) pour les Web services, ASCx (control) pour les contrles utilisateurs. ASP.net fait partie intgrante du FrameWork et bnficie de toutes ses fonctionnalits (classes de base). Les Pages ASP.net sont compils et excut par la CLR : code manag, possibilit de tracing et de debugging . Le code peut-tre spar totalement de la partie prsentation. Apparition des contrles serveurs. Comparable J2EE + RMI Sappuie toujours sur IIS 5, mais multi-processus au lieu de multi-thread.
2010/2011
ASP.NET
ASP . NET
Les contrles serveurs 45 contrles disponibles (Listbox, treeview, calendar, adrotator, ) Excuts sur le serveur. Renvoie du code HMTL au client en fonction du navigateur utilis (compatible HMTL 3.2). Masque au dveloppeur la communication client / serveur.
Peut agir sans rechargement de la page.

Chaque contrle est une classe du Framework.
2010/2011
ASP.NET
Asp.net
<%@ Page Language="c#" %> <HTML> <BODY> <H1>Table des factorielles</H1> <% int i,fact; for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) { Response.Write( i + "! =" + fact + "<BR>" ); } %> </BODY> </HTML
invocation excution ct serveur
2010/2011
ASP.NET
10
Asp.net
<%@ Page Language="c#" %> <HTML> <BODY> <H1>Table des factorielles</H1> <% int i,fact; for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) { Response.Write( i + "! =" + fact + "<BR>" ); } %> </BODY> </HTML
du code C#
rsultat = HTML gnr via l'objet prdfini Response
ce qui est renvoy au client
<HTML> <BODY> <H1>Table des factorielles</H1> 1! = 1<BR> 2! = 2<BR> 3! = 6<BR> </BODY> </HTML>
2010/2011
ASP.NET
11
Asp.net
Philosophie ASP.NET
Sparer
rendu graphique traitement
2 fichiers
.aspx
le code de prsentation et celui des contrles fichier XTHML (HTML 4.0 formul en XML) Web form
.aspx.cs , .aspx.vb ,
fichier dit codebehind classe contenant les traitements
2010/2011
ASP.NET
12
Contrles
Les contrles
Composants graphiques pour lcriture de pages ASP.NET Pour agir avec l'utilisateur : lui prsenter de l'information Pour ragir aux actions de l'utilisateur : dclencher des traitements Utilisation en drag-and-drop dans VS pour la conception page web
Analogue atelier conception IHM en client lourd
Classe / Objet
Proprits vnements
: les caractristiques d'affichage (ex. Text pour un TextBox) : ractions (clic, frappe, changement, )
autant d'objets par page que de contrles "dposs" sur la page interaction avec la page interaction avec les objets rendu HTML de la page partir de l'tat des objets
2010/2011
ASP.NET
13
TP1
CRER UN PREMIER FORMULAIRE DYNAMIQUE

2010/2011 ASP.NET 14
TP1 : Crer un premier formulaire dynamique

Objectif
Construire une page aspx partir dun formulaire HTML standard et de mettre en
vidence le principe du post back (aller retour ) avec ASP.NET 2.0.

Contexte fonctionnel
construire un formulaire de recherche des petites annonces partir de deux
critres : la rgion de publication (une liste droulante) et la date (une zone de

texte). Dans un premier temps le rsultat de la recherche consiste en laffichage dun texte rsumant les critres choisis. Dans un deuxime temps construire un tableau html avec plusieurs annonces issues de la recherche
2010/2011
ASP.NET
15
TP1 : tape 1 Partir dune page html standard

1. Crez un rpertoire sur le disque pour stocker la solution que vous allez dvelopper. 2. Ouvrez Microsoft Visual Studio et enregistrez le nouveau document vide sous le nom Default.aspx dans votre rpertoire de projet. 3. Saisissez le contenu statique de la page suivante:
<html> <head> <title>Page de recherche</title> <link href="Default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="recherche"> <div class="region"> <h3>Rgion: </h3> </div> <div class="date"> <h3>Date: </h3> </div> </div> <div class="resultat"> Rsultat de la recherche... </div> </body> </html> 2010/2011 ASP.NET 16
TP1 : tape2 rendre la page un formulaire interactif

Ajoutez une balise <form> la page La balise <form> dlimite la zone dynamique proprement dite du formulaire,
Elle contient les zones de saisie de lutilisateur dont les donnes devront tre
envoyes sur le serveur. Elle possde des attributs obligatoires :
method pour indiquer de quelle manire sont envoyes les donnes sur le
serveur : soit codes dans lurl de la requte pour la mthode GET soit stockes dans le corps de la requte pour la mthode POST . Par dfaut, une page aspx utilise la mthode POST. action pour indiquer lurl laquelle sont envoyes les informations. Il faut savoir quune page aspx poste ses donnes sur elle-mme cest--dire que lurl denvoi est celle de la page elle-mme tout simplement !
2010/2011
ASP.NET
17
TP1 : tape 1 rendre la page un formulaire interactif

<html> <head> <title>Page de recherche</title> </head> <body> <form method="post" action="Default.aspx"> <div class="recherche"> </div> <div class="resultat"> </div> </form> </body> </html>
2010/2011
ASP.NET
18
TP1 : tape3 rendre la page un formulaire interactif

Ajoutez maintenant les contrles de slection/saisie et un bouton de soumission
Contrle de slection
Contrle de saisie et bouton de <div class="region"> <h3>Rgion: </h3> soumission <SELECT name="ddlRegion"> <div class="date"> <OPTION VALUE="1"> Rabat </OPTION> <h3>Date: </h3> <OPTION VALUE="2"> Casa </OPTION> <input name="txtDate type="text"/> <OPTION VALUE="3"> Kenitra </OPTION> <input name="btnGo type="submit <OPTION VALUE="4"> Sale </OPTION> value="Go" /> <OPTION VALUE="5"> Ouajda </OPTION> </div> <OPTION VALUE="6"> Fs </OPTION> <OPTION VALUE="7"> Meknes </OPTION> <OPTION VALUE="8"> Nadour </OPTION> <OPTION VALUE="9"> Tetouane </OPTION> <OPTION VALUE="10"> Errachidia </OPTION> <OPTION VALUE="11"> Ouarzazate </OPTION> <OPTION VALUE="12"> Zagoura </OPTION> <OPTION VALUE="13"> Essaouira </OPTION> <OPTION VALUE="14"> Saf </OPTION> <OPTION VALUE="15"> Agadir </OPTION> <OPTION VALUE="16"> Marrakeche </OPTION> <OPTION VALUE="17"> Taroudante </OPTION> <OPTION VALUE="18"> Tantan </OPTION> <OPTION VALUE="19"> Tata </OPTION> <OPTION VALUE="20"> Laayoune </OPTION> </SELECT> </div> 2010/2011 ASP.NET 19
TP1 : tape4 ajouter un traitement la page

Ajouter un traitement la page qui sera pris en charge ct serveur par ASP.NET 2.0. La page est poste sur elle-mme, donc ce traitement est directement programm dans la page elle-mme Le mcanisme le plus simple est dinclure les instructions de la page qui doivent tre excutes sur le serveur lintrieur dune balise server <% %> ASP.NET repre le code de traitement server excuter via cette balise. Nous allons simplifier le traitement de recherche des annonces et nous contenter dafficher dans la zone de rsultat dlimite par la balise <div class=resultat> ASP.NET 2.0 propose de coder avec un langage compil, C# ou VB.Net entre autres, en utilisant un modle de contrles avec des proprits, des mthodes et des vnements pour manipuler les diffrents lments html de la page.
2010/2011
ASP.NET
20

Ajoutez lattribut runat avec la valeur server aux lments html <SELECT>,
<INPUT> de type text et la balise <DIV> de rsultat et donnez-leur chacun un identifiant unique (via lattribut id). Ajoutez galement runat="server" sur le formulaire dlimit par <FORM>.
<form method="post" action="Default.aspx"> <form method="post" action="Default.aspx" runat="server"> <SELECT name="ddlRegion"> <SELECT name="ddlRegion" runat="server" id="ddlRegion"> <input name="txtDate type="text"/> <input name="txtDate" type="text" runat="server" id="txtDate"/> <div class="resultat"> <div class="resultat" runat="server" id="resultat">
2010/2011
ASP.NET
21

Lattribut runat="server" est fondamental car il indique au moteur ASP.NET qui traite la requte sur le serveur que les balises HTML vont pouvoir tre considres comme des contrles accessibles par programmation via leur id unique. Lorsque le server dmarre le traitement de la page, un objet Page est charg en mmoire et ralise une succession dtapes dont la toute premire est de crer une
instance de tous les contrles marqus avec runat="server". Ces instances

sappuient sur des classes dfinies dans le Framework 2.0. Pour chaque balise html marque, on obtient donc un objet :
bas sur une classe du Framework, ayant une reprsentation graphique, dot de proprits qui le caractrisent et le dfinissent, dot de mthodes qui permettent de jouer sur son comportement,
et dot dvnements qui sont dclenchs en gnral par des actions de lutilisateur sur le
contrle
2010/2011
ASP.NET
22

Un contrle <INPUT> de type submit tel que le bouton Go, est charg en mmoire par ASP.NET sur la base dune classe nomme HtmlButton. Cet objet est alors accessible par programmation et comprend entre autres :
une reprsentation graphique qui est celle dune balise INPUT de type submit , une proprit InnerText qui permet dinscrire un texte sur le bouton,
une mthode Focus(), qui permet de positionner le focus sur le contrle,

un vnement ServerClick qui est dclench lorsque lutilisateur clique sur le bouton.
Le formulaire doit tre galement runat="server" et est alors vu comme un contrle de type HtmlForm Avant de programmer le traitement serveur, il reste indiquer le langage de choix dans ce quon appelle une directive de page. Celle-ci est crite au tout dbut de la page et est lue ct serveur par ASP.NET.
Dans le cas prsent, nous allons indiquer au serveur le langage de votre choix, en
utilisant lattribut Language :
2010/2011 ASP.NET 23

Indiquer le langage de votre choix Code VB.NET
<%@ Page Language="VB" %> <html> </html>
Code C#
<%@ Page Language="C#" %> <html> </html>
2010/2011
ASP.NET
24

Puisque vous avez accs aux lments <SELECT>, <INPUT> et <DIV> via les contrles server chargs en mmoire par ASP.NET 2.0, il ne vous reste plus qu programmer la lecture de la date dans la zone de texte et lcriture du texte final dans la zone de rsultat Code VB.NET
<%
If Not txtDate.Value = "" Then resultat.InnerHtml = "Rsultat de la recherche pour le " & txtDate.Value End If %>
Code C#
<% if (txtDate.Value != "") { resultat.InnerHtml = "Rsultat de la recherche pour le " + txtDate.Value; } %>
2010/2011 ASP.NET 25

Ces lignes dinstruction utilisent :
la proprit Value du contrle txtDate de type HtmlInputText pour lire la valeur de la date saisie dans la zone de texte et envoye au serveur lors dun post back. la proprit InnerHtml pour modifier le contenu html du contrle resultat de type HtmlGenericControl qui reprsente la balise <DIV> did rsultat.
2010/2011
ASP.NET
26

Autre exemple de traitement serveur : on pourrait par exemple crire dans la zone de texte pour linitialiser au chargement de la page avec la date du jour. Code VB.NET
<%
txtDate.Value = DateTime.Now.ToShortDateString()
%>
Code C#
<% txtDate.Value = DateTime.Now.ToShortDateString() ; %>
La proprit DateTime.Now du Framework 2.0 donne la date du jour que lon formate avec ToShortDateString().
2010/2011
ASP.NET
27

Ajoutez la page, en suivant la mme logique, la lecture de la slection dans la liste droulante de faon complter le texte de rsultat comme ceci : Code VB.NET
<% If Not txtDate.Value = "" Then resultat.InnerHtml = "Rsultat de la recherche des annonces dans la rgion " _ & ddlRegion.Items(ddlRegion.SelectedIndex).Text & " pour le " + txtDate.Value End If %>
Code C#
<% if (txtDate.Value != "") { resultat.InnerHtml = "Rsultat de la recherche des annonces dans la rgion " + ddlRegion.Items[ddlRegion.SelectedIndex].Text + " pour le " + txtDate.Value; } %> ddlRegion est un contrle de type HtmlSelect et contient une collection doptions appele Items. Chacune des options est accessible via un index, llment slectionn en cours tant positionn lindex donn par la proprit SelectedIndex du contrle.
2010/2011
ASP.NET
28
TP1 : tape 5 Utiliser les contrles Html Serveur

Tous les contrles Html standards sont reprsents dans le Framework 2.0
par des classes du type HtmlForm, HtmlInputText, HtmlInputButton, ou

plus gnrique comme HtmlGenericControl . Ces classes nous permettent davoir accs aux lments Html trs facilement
dans un traitement ct serveur. La seule condition pour les utiliser est de

donner un id vos balises et de les configurer avec runat="server".
2010/2011
ASP.NET
29

On va construire un tableau html avec plusieurs annonces issues de la recherche. Toujours avec cette mme approche de contrles serveur, cette opration peut se faire trs simplement grce la classe HtmlTable qui reprsente le tableau html standard et qui contient des lments de type HtmlTableRow (ligne) eux-mmes constitus de HtmlTableCell (cellule). Ajoutez un tableau vide dans la zone de rsultat de la page la place du texte initial
<form method="post" action="Default.aspx" runat="server"> Ne pas oublier lattribut runat <div class="resultat" runat="server" id="resultat"> <table id="tblResultat" class="gridcontent" runat="server"> </table> </div> Format dfini dans la feuille de style </form>
2010/2011 ASP.NET 30

Mettez en commentaire le code de ltape prcdent dans la balise <%%>. Ajoutez le code suivant affichant une seule annonce (code en dur pour simplifier) dans le tableau de rsultat lorsque la rgion slectionne est Kenitra (indexe = 2)
<% .. If ddlRegion.SelectedIndex = 2 Then ' Crer une nouvelle ligne de tableau Dim ligne As HtmlTableRow = New HtmlTableRow() ' Crer une nouvelle cellule de tableau pour afficher lemail Dim celluleEmail As HtmlTableCell = New HtmlTableCell() ' Afficher dans la cellule un texte littral en utilisant le control LiteralControl celluleEmail.Controls.Add(New LiteralControl("gege@hotmail.fr")) 'Ajouter la cellule la collection de cellules de la ligne ligne.Cells.Add(celluleEmail) 'Recommencer pour afficher la ville et le code postal de lannonce Dim celluleVille As HtmlTableCell = New HtmlTableCell() celluleVille.Controls.Add(New LiteralControl("Paris")) ligne.Cells.Add(celluleVille) Dim celluleCodePostal As HtmlTableCell = New HtmlTableCell() celluleCodePostal.Controls.Add(New LiteralControl("75000")) ligne.Cells.Add(celluleCodePostal) 'Ajouter la ligne la collection de lignes du tableau tblResultat.Rows.Add(ligne) End If 2010/2011 %> ASP.NET
31

Code C#
<% /**/ if (ddlRegion.SelectedIndex == 2) { // Crer une nouvelle ligne de tableau HtmlTableRow ligne = new HtmlTableRow(); // Crer une nouvelle cellule de tableau pour afficher lemail HtmlTableCell celluleEmail = new HtmlTableCell(); // Afficher dans la cellule un texte littral en utilisant le control LiteralControl celluleEmail.Controls.Add(new LiteralControl(MASTER@hotmail.fr")); //Ajouter la cellule la collection de cellules de la ligne ligne.Cells.Add(celluleEmail); //Recommencer pour afficher la ville et le code postal de lannonce HtmlTableCell celluleVille = new HtmlTableCell(); celluleVille.Controls.Add(new LiteralControl(KENITRA")); ligne.Cells.Add(celluleVille); HtmlTableCell celluleCodePostal = new HtmlTableCell(); celluleCodePostal.Controls.Add(new LiteralControl("75000")); ligne.Cells.Add(celluleCodePostal); //Ajouter la ligne la collection de lignes du tableau tblResultat.Rows.Add(ligne); } %>
2010/2011 ASP.NET 32
TP2
COMPRENDRE LA PROBLMATIQUE DE GESTION DTAT

2010/2011 ASP.NET 33
TP 2 : Comprendre la problmatique de gestion dtat

Objectif
Mettre en vidence la problmatique de gestion dtat dans une application web.

Le contexte fonctionnel reste identique lexercice prcdent ceci prs que vous allez maintenant charger la liste droulante de manire dynamique partir du fichier
texte rgions.txt.
2010/2011
ASP.NET
34
TP2 : Comprendre la problmatique de gestion dtat

Dans le TP1, le code est inscrit lintrieur dune balise <% %>, et est valu avec lexcution de la page. Cette criture est limite en ASP.NET 2.0 dans la mesure o vous ne pouvez pas dclarer dans un tel bloc une fonction ou toute autre instruction quun code de rendu. Nous allons maintenant remplacer la balise <% %> par une balise de script <script>
munie du fameux attribut runat="server" pour indiquer au serveur que ce code doit
tre excut ct serveur. Dans ce bloc de dclaration de code, les lignes vont tre compiles avec une approche oriente objet cest--dire dans le contexte dune classe gnre dynamiquement par ASP.NET et associe la page web, cest la classe page. Aussi nous allons incorporer les lignes de code dans la procdure de rponse lvnement de chargement de la page en mmoire, appel Page_Load
2010/2011
ASP.NET
35
TP 2 : Utiliser la balise script

Remplacez la balise <% %> par une balise <script> et ajoutez la procdure Page_Load autour de code Insrer le code aprs la balise </head> Code VB.NET
<script runat="server" > Protected Sub Page_Load() If ddlRegion.SelectedIndex = 2 Then End If End Sub </script>
Code C#
<script runat="server" > public void Page_Load() { if (ddlRegion.SelectedIndex == 2) {} } </script>
2010/2011
ASP.NET
36
Tp2 : lecture de la liste droulante

Programmez le chargement dynamique de la liste droulante :
Commencez par supprimer les options de llment SELECT
<SELECT name="ddlRegion" runat="server" id="ddlRegion"> </SELECT>
Ajoutez le code de lecture du fichier texte et de chargement de la liste droulante

Code VB.NET
<script runat="server" > Protected Sub Page_Load() Using sr As System.IO.StreamReader = _ System.IO.File.OpenText("C:\Votre chemin de projet\Liste des rgions.txt") Dim s As String = "" Dim index As Integer = 0 s = sr.ReadLine() Do Until s = "" ddlRegion.Items.Add(New ListItem(s, index.ToString())) index += 1 s = sr.ReadLine() End Using If ddlRegion.SelectedIndex = 2 Then End If End Sub </script> 2010/2011
ASP.NET
37

Code C#
<script runat="server" > public void Page_Load() { using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\chemin\rgions.txt")) { string s = ""; int index = 0; while ((s = sr.ReadLine()) != null) { ddlRegion.Items.Add(new ListItem(s, index.ToString())); index++; } } if (ddlRegion.SelectedIndex == 2) {} } </script>
2010/2011
ASP.NET
38

On utilise lespace de nom System.IO du Framework 2.0 qui fournit des classes pour lire et crire dans des fichiers, telle que StreamReader. Une liste droulante de type HtmlSelect contient une collection dlments de type ListItem, appele Items. Il suffit dutiliser la mthode Add pour insrer un nouveau lment en indiquant le texte (lu dans le fichier et donn par s) et la valeur (incrmentale donne par index) de loption.
2010/2011
ASP.NET
39
Tp2 : garder ltat de la liste

Nous voyons que la liste sincrmente une nouvelle fois avec les rgions !! Pourquoi?
ASP.NET soccupe pour prserver ltat des informations des contrles de la page entre deux aller-retour sur le serveur par la technique dite du View State View State consiste en un champ cach appel __VIEWSTATE quASP.NET insre dans la page et utilise pour crire et lire les informations prserver Ce champ est transport entre le navigateur et le serveur web dun post back lautre
Vrifier ce champ dans la source de la page html
2010/2011
ASP.NET
40

lorsque la page est poste sur le serveur en cliquant sur Go :
les informations contenues dans les contrles sont crites dans le champ cach __VIEWSTATE, Le serveur ASP.NET construit une nouvelle instance de la classe Page Le serveur instancie les contrles marqus avec lattribut runat=server et les initialise avec ltat lu dans le View State. La liste droulante inscrit son contenu dans le champ cach, le serveur charge en mmoire un contrle de type HtmlSelect avec toutes les rgions crites au premier chargement de la page. Le serveur ralise les traitements demands, tel que le chargement de la liste et crit donc une deuxime fois les rgions dans le contrle HtmlSelect Une fois le traitement termin, le serveur crit dans le View State ltat des contrles rsultant et demande chacun deux leur reprsentation html standard de faon construire la page de rponse renvoyer au navigateur
Dsactivons maintenant lutilisation du View State par ajouter :

<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="false"> </SELECT>
La page de rponse affiche toujours la premire rgion de la liste

2010/2011 ASP.NET 41

Nous avons besoin de sauvegarder ltat de la liste au moment du post back de faon retrouver la mme slection Pour viter le chargement intempestif de la liste lors dun post back et prserve ltat des contrles, ASP.NET sait vous indiquer si vous tes au premier chargement de la page ou pas. Pour cela il fournit la proprit IsPostBack sur la classe Page qui a la valeur FAUX au premier chargement de la page et la valeur VRAI ensuite chaque aller retour.
Repositionnez lattribut enableViewState avec la valeur true de llment <Select>
2010/2011
ASP.NET
42

Rajoutez le test du post back dans la procdure Page_Load de faon ne charger la liste quune seule fois au premier chargement de la page Code VB.NET
<script runat="server" > Protected Sub Page_Load() If Not Page.IsPostBack Then Using sr As System.IO.StreamReader = _ System.IO.File.OpenText("C:\Votre chemin de projet\Liste des rgions.txt") Dim s As String = "" Dim index As Integer = 0 s = sr.ReadLine() Do Until s = "" ddlRegion.Items.Add(New ListItem(s, index.ToString())) index += 1 s = sr.ReadLine() End Using End If If ddlRegion.SelectedIndex = 2 Then End If End Sub </script>
2010/2011 ASP.NET 43

Code C#
<script runat="server" > public void Page_Load() { If ( !Page.IsPostBack) { using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\Votre chemin de projet\Liste des rgions.txt")) { string s = ""; int index = 0; while ((s = sr.ReadLine()) != null) { ddlRegion.Items.Add(new ListItem(s, index.ToString())); index++; } } } if (ddlRegion.SelectedIndex == 2) {} } </script>
2010/2011
ASP.NET
44
TP3
UTILISER LE MODLE VNEMENTIEL

2010/2011 ASP.NET 45
TP 3 : Utiliser le modle vnementiel

Objectif
Comprendre lapproche vnementielle de la programmation avec ASP.NET 2.0.

Le contexte fonctionnel reste identique lexercice prcdent ceci prs quau lieu de construire un tableau de rsultat de la recherche sur la procdure Page_Load comme prcdemment, nous allons associer le traitement directement lvnement clic de lutilisateur sur le bouton Go. Nous verrons finalement comment associer le traitement lvnement de changement de slection dans la liste droulante.
Principe
Lide est de fournir un modle de dveloppement similaire celui dont vous disposez dans du script client pour programmer des procdures en rponse des vnements dans la page. La diffrence est que si lvnement est bien dclench ct client le traitement en rponse celui-ci est en revanche effectu sur le serveur : ce procd
est videmment plus lourd

Les vnements sont associs des contrles, mais galement la page elle-mme
2010/2011 ASP.NET 46
TP 3 : Traiter des vnements

Branchez lvnement de clic sur le contrle html du bouton Go :
Modifiez la dclaration du contrle en ajoutant lattribut onserverclick et en lui donnant le nom de la procdure de rponse lvnement, par exemple btnGo_ServerClick:
<input name="btnGo" type="submit" value="Go" onserverclick="btnGo_ServerClick" runat="server" />
Liez lvnement ServerClick la procdure de rponse appele btnGo_ServerClick. Ajoutez la procdure btnGo_ServerClick lintrieur de la balise de script
2010/2011
ASP.NET
47

Protected Sub Page_Load() If Not Page.IsPostBack Then Using sr As System.IO.StreamReader = _ System.IO.File.OpenText("C:\Labs PHP-ASP\VB\Lab rgions.txt") Dim s As String = "" Dim index As Integer = 0 s = sr.ReadLine() Do Until s = "" ddlRegion.Items.Add(New ListItem(s, index.ToString())) index += 1 s = sr.ReadLine() End Using End If End Sub Protected Sub butGo_ServerClick(ByVal System.EventArgs) If ddlRegion.SelectedIndex = 2 Then .. End If End Sub </script>
2010/2011 ASP.NET
1\Solution\Liste
des
sender
As
Object,
ByVal
As
48

public void Page_Load() { If ( !Page.IsPostBack) { using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\chemin\rgions.txt")) { string s = ""; int index = 0; while ((s = sr.ReadLine()) != null) { ddlRegion.Items.Add(new ListItem(s, index.ToString())); index++; } } } } protected void btnGo_ServerClick(object sender, EventArgs e) { if (ddlRegion.SelectedIndex == 2) { . } } </script>
2010/2011 ASP.NET 49

Vous constatez que la procdure de rponse un vnement doit respecter un certain formalisme. Elle contient deux arguments, lun de type EventArgs donnant des informations spcifiques lvnement, et lautre de type object indiquant lobjet dclencheur de lvnement. Ce type de signature est commun aux vnements sauf ceux associs au cycle de vie de la page web, tel que lvnement Load, qui nont pas darguments.
2010/2011
ASP.NET
50

Branchez lvnement de changement de la slection sur le contrle html ddlRegion :
Modifiez la dclaration du contrle en ajoutant lattribut onserverchange et en lui donnant le nom de la procdure de rponse lvnement, par exemple ddlRegion_ServerChange
<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="true" onserverchange="ddlRegion_ServerChange"></SELECT>
Crez la procdure ddlRegion_ServerChange de traitement de lvnement ct serveur :

Ajoutez la procdure lintrieur de la balise de script et transfrez-y le code de cration du tableau de rsultat prcdemment plac dans la procdure
btnGo_ServerClick
2010/2011
ASP.NET
51

Code VB.NET
<script runat="server" > Protected Sub Page_Load() End Sub Protected Sub butGo_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) End Sub Protected Sub ddlRegion_ServerChange(ByVal sender As Object, ByVal System.EventArgs) If ddlRegion.SelectedIndex = 2 Then End If End Sub </script>
As
2010/2011
ASP.NET
52

Code C#
public void Page_Load() {} protected void btnGo_ServerClick(object sender, EventArgs e) { } protected void ddlRegion_ServerChange(object sender, EventArgs e) { if (ddlRegion.SelectedIndex == 2) { .... } } </script>
2010/2011
ASP.NET
53
TP4
COMPRENDRE LAPPROCHE COMPOSANT

2010/2011 ASP.NET 54
TP 4 : Comprendre lapproche composant

Objectif
Mettre en uvre les contrles serveur dASP.NET 2.0 et de comprendre lintrt de lapproche base sur lutilisation de ces composants.
Si vous voulez ajouter un calendrier la page pour faciliter la saisie de la date par lutilisateur. Le calendrier est invisible au chargement de la page et
apparat si lutilisateur le sollicite par un bouton . Grce au calendrier

lutilisateur peut rapidement slectionner une date et la zone de texte est automatiquement charge avec celle-ci.
2010/2011
ASP.NET
55
TP 4 : Comprendre lapproche composant

Principe o
Avec lapproche composant, ASP.NET permet le contrle ct serveur du comportement de certains lments lors dun post pack, mais cette fois en construisant directement vos pages ct serveur avec des contrles labors. Ces contrles sont reprsents par des balises qui ne sont connues que du moteur ASP.NET. Donc pour la plupart, ils sont associs une reprsentation graphique base sur des contrles html standard, quASP.NET construit dynamiquement la fin de lexcution de la page juste avant de renvoyer la page de rponse au navigateur. Chaque contrle est dailleurs capable dadapter son rendu en fonction du navigateur cible. Certains contrles nont mme pas de reprsentation graphique. Lobjectif est de fournir un ensemble de composants qui encapsulent tout un comportement dynamique que le dveloppeur peut facilement contrler via des proprits, des mthodes et des vnements. Par exemple, vous avez des contrles pour vous aider configurer une connexion sur une base de donnes
2010/2011
ASP.NET
56
TP 4 : Ajouter composant calendrier

Ajoutez un contrle serveur web de type Calendar la page :
Ajoutez une balise <div> de classe date la suite dans la zone de recherche <div class="recherche"> <div class="region"></div> <div class="date"></div> <div class="date"> </div> </div> Ajoutez un contrle <asp:Calendar> suivi dun saut de ligne (br): <div class="date"> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> <br /> </div> La balise prfixe par asp: nest pas connue des navigateurs, cest pourquoi le flux de la page, tel quil est visible dans votre diteur, nest quun flux intermdiaire . Il vous sert dynamiser la page en exploitant le ct serveur mais nest pas transmis tel quel dans la rponse au navigateur.
2010/2011
ASP.NET
57
TP 4 : Exploitons les capacits du contrle

Configurez les proprits de style pour amliorer le format du contrle
<div class="date"> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px" Width="220px" > <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" /> <TodayDayStyle BackColor="#99CCCC" ForeColor="White" /> <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" /> <WeekendDayStyle BackColor="#CCCCFF" /> <OtherMonthDayStyle ForeColor="#999999" /> <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" /> <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" /> </asp:Calendar> <br /> </div>
2010/2011
ASP.NET
58
TP 4 : Chargement automatique de la date

Un contrle serveur ASP.NET contient toute une batterie de proprits qui permettent de
contrler non seulement son style mais galement son comportement.
Modifiez la dclaration du contrle en ajoutant lattribut OnSectionChanged et en lui donnant le nom de la procdure de rponse lvnement, par exemple Calendar1_SelectionChanged:
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged > </asp:Calendar> Ajoutez la procdure Calendar1_SelectionChanged lintrieur de la balise de script :
Code VB.NET
<script runat="server" > Protected Sub Calendar1_SelectionChanged(ByVal sender As Object,_ByVal e As System.EventArgs) End Sub </script>
Code C#
<script runat="server" > protected void Calendar1_SelectionChanged(object sender, EventArgs e) {} </script>
2010/2011 ASP.NET 59
TP 4 : Chargement automatique de la date

Le chargement de la zone de texte avec la date slectionne est fournie par le contrle grce sa proprit SelectedDate :
Code VB.NET
<script runat="server" > Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) txtDate.Value = Calendar1.SelectedDate.ToShortDateString() End Sub </script>
Code C#
<script runat="server" > protected void Calendar1_SelectionChanged(object sender, EventArgs e) { txtDate.Value = Calendar1.SelectedDate.ToShortDateString(); } </script>
La proprit SelectedDate retourne un objet de type DateTime . la mthode ToShortDateString() de la classe DateTime permet de rcuprer la date sous forme de chane de caractres.
2010/2011
ASP.NET
60
TP 4 : Combiner plusieurs contrles

Pour afficher/cacher le calendrier en fonction des besoins de lutilisateur. Nous utilisons le contrle serveur <asp:Button>
Ajoutez un contrle serveur web de type Button la page
<div class="date"> <h3>Date: </h3> <input name="txtDate" type="text" runat="server" id="txtDate" /> <asp:Button ID="Button1" runat="server" Text=..." /> <input name="btnGo" type="submit" value="Go" runat="server" onserverclick="btnGo_ServerClick"/> </div>
Ajoutez lvnement click sur le bouton

Modifiez la dclaration du contrle en ajoutant lattribut OnClick et en lui donnant le nom de la procdure de rponse lvnement, par exemple Button1_Click
<asp:Button ID="Button1" runat="server" Text=Calendrier" OnClick="Button1_Click" />
2010/2011
ASP.NET
61

Ajoutez la procdure Button1_Click lintrieur de la balise de script et Inversez la visibilit du contrle en utilisant la proprit Visible du contrle Calendar: Code VB.NET
<script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Calendar1.Visible = Not Calendar1.Visible End Sub </script>
Code C#
<script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Calendar1.Visible = !Calendar1.Visible ; } </script>
2010/2011
ASP.NET
62

Notez que dans le cas o lutilisateur saisit manuellement une date dans la zone de texte, il serait peut-tre opportun dinitialiser le contrle Calendar en correspondance
Code VB.NET
<script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Calendar1.Visible = Not Calendar1.Visible If Not String.IsNullOrEmpty(txtDate.Text) Then Dim dateCourante As DateTime = Convert.ToDateTime(txtDate.Value) Calendar1.VisibleDate = dateCourante Calendar1.SelectedDate = dateCourante End If End Sub </script>
Code C#
<script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Calendar1.Visible = !Calendar1.Visible ; if (Calendar1.Visible & !String.IsNullOrEmpty(txtDate.Value)) Calendar1.VisibleDate = Calendar1.SelectedDate = Convert.ToDateTime(txtDate.Value); } </script>
2010/2011 ASP.NET 63
TP5
UTILISER VISUAL WEB DEVELOPER

2010/2011 ASP.NET 64
TP 5 : Utiliser Visual Web Developer

Objectif
Montrer tout lintrt dun environnement de dveloppement tel que Visual Studio. En mode Source, supposons que vous voulez ajouter des attribut lune des balises par exemple <body> : positionnez le curseur droite de la lettre y et cliquez la barre despace du clavier pour crire le nom de lattribut. IntelliSense se dclenche et vous propose une liste dattributs pour la balise. LIntelliSense est galement disponible au niveau du code inline dans des balises <script runat=server>.
La Bote outils pour remplacer tous les contrles html standards par les contrles serveur web dASP.NET 2.0
2010/2011
ASP.NET
65

Basculez en mode Design. Supprimez le contrle de zone de saisie de la date. Si la bote outils nest pas visible, cliquez le menu Affichage -> Bote outils. Faites un glisser dplacer du contrle TextBox dans la catgorie Standard lemplacement de lancien contrle html de saisie.
Slectionnez le contrle et cliquez F4 pour afficher la fentre de proprits de Visual Web Developer. Renommez le contrle en txtDate (ID = txtDate) Le systme dtecte un problme vient de la procdure SelectionChanged qui charge la zone de texte avec la date slectionne dans le calendrier. Changez la proprit Value par Text.
2010/2011 ASP.NET 66

En mode Design. Double cliquez sur le contrle html. Visuel Web Developer vous emmne automatiquement sur la procdure de rponse lvnement par dfaut associ ce type de contrle, Si la procdure nexiste pas encore, VWD vous crer la procdure avec la signature correspondante, sans oublier dajouter lattribut OnServerClick dans la dclaration du contrle lui-mme. Supprimez le bouton Go et remplacez le par un contrle Button en faisant un glisser dplacer du contrle depuis la bote outils (ou en double cliquant sur le contrle). Renommez lID (butnGo) du contrle et son titre via la proprit Text (Go). Double cliquez sur le contrle pour gnrer la procdure de rponse lvnement click Remplacez le contrle Select de la mme faon, par un contrle DropDownList dans la catgorie Standard. Renommez lID en ddlRegion. Double cliquez sur le contrle en mode Design pour gnrer la procdure de rponse lvnement par dfaut SelectedIndexChanged. Dplacez le code anciennement dans la procdure ddlRegion_ServerChange dans la nouvelle procdure. Supprimez lancienne procdure.
2010/2011
ASP.NET
67

Contrairement au contrle html Select et comme certains autres contrles
web serveur ASP.NET 2.0, le contrle DropDownList peut provoquer un post back et dclencher lvnement SelectedIndexChanged directement. Pour cela, il faut configurer la proprit AutoPostBack de la DropDownList.
Ajoutez lattribut AutoPostBack avec la valeur true dans la dclaration de la DropDownList de faon activer le post back automatique. Sauvegardez et excutez la page par un clic droit sur la page en mode source -> Afficher dans le navigateur.
2010/2011
ASP.NET
68

Utiliser un contrle de validation pour contrler la saisie de la date dans la zone de saisie :
Basculez en mode Design. Faites un glisser dplacer du contrle RangeValidator depuis la catgorie Validation de la bote outils juste droite de la zone de texte de la date.
Configurez les proprits du contrle :

ControlToValidate : txtDate (contrle TextBox de la date) ErrorMessage : La date nest pas valide Type : Date MinimumValue : 01/01/2011 MaximumValue : 01/07/2011 Text : *
La proprit Text donne le message affich lemplacement du contrle de validation. Le message dans ErrorMessage est utilis par le contrle ValidationSummary pour afficher le message derreur dtaill.
2010/2011
ASP.NET
69

Faites de-mme avec un contrle RequiredFieldValidator pour viter que le formulaire soit publi sans que lutilisateur ait saisi une date. Configurez les proprits du contrle :
ControlToValidate : txtDate (contrle TextBox de la date) ErrorMessage : La date est obligatoire Text : *
Faites un glisser dplacer du contrle ValidationSummary depuis la catgorie Validation de la bote outils au sommet de la page (par exemple).
Sauvegardez et excutez la page Entrez une date incorrecte manuellement dans la zone de texte. Cliquez sur Go. Testez la vrification du champ obligatoire si vous ne saisissez aucune date
2010/2011
ASP.NET
70

La validation a lieu ct client par un script gnr par le contrle ASP.NET Vous pouvez galement dsactiver la validation ct client pour quelle ait lieu ct serveur via la proprit EnableClientScript.
Configurez la proprit EnableClientScript False sur les deux contrles de validation de la TextBox txtDate. Configurez la proprit CausesValidation False sur le contrle Button1 pour dsactiver la validation ct serveur de faon autoriser laffichage du calendrier.
Avec cette configuration, le postback de la page lors du clic sur le bouton ne
sera pas bloqu par les validations de la date. Par contre, la validation a lieu
ct serveur sur le clic du bouton Go Le calendrier saffiche maintenant correctement, le serveur neffectuant plus
de contrle sur le clic du bouton Calendrier
2010/2011
ASP.NET
71
TP5 : en tant que Compilateur

Lancez lexcution de lapplication :
Menu Dboguer > Excutez sans dbogage ou CTRL+F5 dans le coin bas gauche de Visual Web Developer, il est indiqu dbut de la gnration puis la gnration a russi . Il y a donc bien eu une phase de COMPILATION de projet.
dans la zone de notification de la barre de tches de Windows XP, vous constatez que Visual Web Developer a lanc une instance du serveur de test pour vous permettre de tester lapplication. Attention : ce mini serveur web comporte quelques limitations et nest propos que pour vous donner les moyens de dvelopper et tester vos applications sans IIS dans un premier temps. Par exemple, il ne supporte pas la mtabase, il na pas la capacit denvoyer des emails ou il utilise lidentit de lutilisateur connect au lieu du compte ASPNET(IIS5) ou NETWORK SERVICE(IIS6) pour sexcuter
2010/2011
ASP.NET
72
TP5 : en tant que Compilateur

Pour observer la compilation dynamique dans la suite de lexercice : ne fermez pas le navigateur et gardez la fentre ainsi affiche. Vous allez maintenant redplacer le code de rponse au changement de slection dans la liste droulante, dans la procdure de rponse au clic sur le bouton Go :
Afficher la page en mode Source Dplacez le code de ddlRegion_SelectedIndexChanged dans ButGo_Click Sauvegardez la page. Trs important ici !!! Basculez sur le navigateur encore ouvert sur la page Default.aspx. Entrez une date, slectionnez la rgion N2 dans la liste et cliquez sur le bouton Go.
le serveur web de test a constat que vous aviez sauv la page et en a donc dduit quil fallait redemander une compilation de celle-ci avant de la rexcuter. Cest le principe dit de la compilation dynamique.
2010/2011
ASP.NET
73
TP5 : en tant que Dbogueur

Pour indiquer au runtime o vous souhaitez faire des pauses dans lexcution du code, positionnez des points darrt dans les procdures de code correspondantes :
Positionnez le curseur sur la premire ligne de la procdue Page_Load et cliquez F9 ou directement dans la marge Faites de mme pour Calendar1_SelectionChanged et ButGo_Click.
Lancez lapplication en mode dbogage :

menu Dboguer > Dmarrer le dbogage ou F5 Utilisez les boutons de la barre doutils Dboguer de Visual Web Developer pour avancer le pointeur dexcution pas pas. Avancez pas pas avec F10 jusquau premier passage dans la boucle dexcution Positionnez la souris sur la variable s et vous obtenez sa valeur dans une bulle dinformation Faites de mme sur le contrle ddlRegion et cliquez sur le signe + pour avoir le dtail de cet objet dun type un peu plus complexe quune simple String. Cliquez F5. La fentre saffiche dans le navigateur.
2010/2011
ASP.NET
74
TP6
ACCDER DES DONNES
2010/2011
ASP.NET
75
TP6 : Accder des donnes

Objectif
Introduire les principes de base de laccs aux donnes dans une page
ASP.NET.
Remplacer la table html de rsultat par une grille de donnes en utilisant le nouveau contrle GridView dASP.NET. Brancher sur le clic du bouton Go une vritable recherche sur une base de donnes SQL Server Express via une procdure stocke. La recherche doit seffectuer partir de la rgion slectionne et de la date qui sont les paramtres de la procdure stocke utilise. Vous allez travailler avec une base de donnes existante de type SQL Server, appele AffairesSansRisque
2010/2011
ASP.NET
76
TP6 : Se connecter une source de donnes

Ajoutez un nouveau dossier dans votre application web appel App_Data :
Faites un clic droit sur la racine du projet dans lExplorateur de solutions > Ajouter le dossier ASP.NET> App_Data.
Rcuprez la base de donnes existante dans le dossier projet

Faites un glisser dplacer des fichiers AffairesSansRisque_Data.mdf et AffairesSansRisque_Data_log.ldf vers le dossier App_Data.
Utilisez lExplorateur de bases de donnes de Visual Web Developer :

Double cliquez sur le fichier AffairesSansRisque_Data.mdf dans lExplorateur de Solutions pour basculer automatiquement dans lExplorateur de bases de donnes de VWD. Consultez les diffrents objets de la base de donnes via leur menu contextuel.
2010/2011
ASP.NET
77

La base contient entre autres :
une table Annonces avec la liste des annonces publies sur le site. et une procdure stocke nomme RechercherAnnonce permettant de retrouver toutes les annonces dune rgion donne au-del dune certaine date. Pour tester la procdure stocke, faites un clic droit sur la procdure > Excuter.
2010/2011
ASP.NET
78

Vous pouvez crer dautres connexions des sources de donnes quelconques, indpendamment de votre projet, en faisant un clic droit la racine de lexplorateur > Ajouter une connexion. Faites un clic droit sur la table Annonces > Afficher les donnes de la table pour vrifier que la source de donnes contient dj des annonces publies.
2010/2011
ASP.NET
79
TP6 : Afficher des donnes

Ouvrez la page Default.aspx en mode Source. Supprimez la table html did tblResultat et le code de la procdure ButGo_Click. Basculez en mode Design. Configurez une source de donnes vers la table Annonces de la base AffairesSansRisque :
Faites un glisser dplacer lintrieur de la balise <div class=resultat> de la Bote outils > rubrique Donnes > SqlDataSource.
Aidez-vous du mini navigateur pour tre bien positionn
2010/2011
ASP.NET
80

Ouvrez la page Default.aspx en mode Source. Supprimez la table html did tblResultat et le code de la procdure ButGo_Click. Basculez en mode Design. Configurez une source de donnes vers la table Annonces de la base AffairesSansRisque :
Faites un glisser dplacer lintrieur de la balise <div class=resultat> de la Bote outils > rubrique Donnes > SqlDataSource. Faites un clic droit sur le contrle > Proprits et renommez le contrle : dsAnnonces. Slectionnez le contrle pour faire apparatre sa balise active (ou clic droit sur le contrle > Afficher la balise active). Cliquez Configurer la source de donnes
2010/2011
ASP.NET
81

Dans la fentre Choisir votre connexion de donnes, cliquez la liste droulante et retrouvez la connexion dfinie lexercice prcdent : AffairesSansRisque_Data.mdf.
Cliquez sur Chane de connexion pour observer la chane de connexion associe :

Vous voyez que la Source est le moteur SQL Server Express Edition .\SQLEXPRESS car SQL Express sinstalle par dfaut comme une instance nomme sur la machine
Cliquez sur Suivant.
2010/2011
ASP.NET
82

Dans la fentre Enregistrer la chane de connexion dans le fichier de configuration de lapplication, cliquez Oui, enregistrer cette connexion en tant que et renommez la chane : csAffairesSansRisque Cliquez sur Suivant. Dans la fentre Configurer linstruction Select, cliquez Spcifiez une instruction SQL personnalise ou une procdure stocke. Cliquez sur Suivant.
2010/2011
ASP.NET
83

Dans la fentre suivante, slectionnez Procdure Stocke et choisissez la procdure nomme RechercherAnnonce. Cliquez sur Suivant.
2010/2011
ASP.NET
84

configurez successivement les deux paramtres attendus par la procdure stocke, correspondant lID de la rgion et la date sur lesquels porte la recherche. Pour cela, slectionnez une source de type Control et indiquez lID de la liste droulante ddlRegion pour le paramtre pRegion et lID de la textbox txtDate pour le second paramtre pDate. Cliquez sur Suivant.
2010/2011
ASP.NET
85

Dans la fentre Tester la requte, cliquez le bouton Tester la requte pour la valider. Saisissez par exemple 19 comme ID de rgion correspondant la rgion Ile de France, et 01/01/2006 dans le paramtre date. Cliquez OK pour lancer le test dexcution de la procdure stocke. Cliquez sur Terminer.
2010/2011
ASP.NET
86

Dessinez maintenant une grille pour afficher la liste des annonces :
Faites un glisser dplacer de la bote outils > rubrique Donnes > contrle GridView lintrieur de la balise <div.resultat#resultat>.
Affichez la balise active du contrle GridView. Cochez les options Activer la pagination, Activer le tri, Activer la slection.
2010/2011
ASP.NET
87

Dans la balise active du contrle GridView, cliquez Modifier les colonnes Dans la fentre Champs, supprimez tous les champs SAUF Ville, Code Postal, Email et le champ Slectionner.
Les champs Ville, Code Postal et Email sont de type BoundField, cest--dire que ce sont des colonnes directement lies des champs dans la base de donnes. La liaison se fait partir de lattribut DataField qui donne le nom du champ de la table Annonces dans la base de donnes
Sauvegardez la page Default.aspx et excutez-la (clic droit > afficher dans le navigateur).
Cliquez sur la rgion Rhne-Alpes, entrez la date 01/01/2006 puis cliquez sur Go.
2010/2011
ASP.NET
88
Notez les types de champs disponibles. Renommez les enttes de chaque colonne.
Changez lordre des colonnes avec les boutons. Bouton pour supprimer les colonnes slectionnes.
2010/2011
ASP.NET
89

Vous pourriez mme charger la liste droulante partir de la table Regions de la base de donnes AffairesSansRisque au lieu de la charger partir du fichier texte Liste des rgions.txt ajouter un autre contrle SqlDataSource sur la page, qui pointe toujours sur la mme chane de connexion que prcdemment, cest-dire csAffairesSansRisque. Configurez le contrle pour quil rapatrie toutes les rgions de la base via une requte SELECT. Terminez lassistant en effectuant un test si besoin. Nommez-le dsRegions en utilisant la fentre de proprits (F4) du contrle SqlDataSource. Liez le contrle DropDownList1 sur cette source de donnes dsRegions en utilisant le menu Choisir la source de donnes de la balise active du contrle.
2010/2011
ASP.NET
90

Paramtrez laffichage de la liste droulante sur le champ Reg_Nom et indiquer Reg_Id comme tant la donne prendre en compte pour la liaison avec la source de donnes. Mettez en commentaire le chargement de la liste partir du fichier texte dans la procdure Page_Load. Enregistrez, excutez puis testez la page.
2010/2011
ASP.NET
91
TP7
MASTER PAGE
2010/2011
ASP.NET
92
TP 7: Master page
Objectif
Crer une page matre qui servira de modle aux pages de contenu du site. Crer des pages de contenu qui hritent de la page modle.
Les pages matres ASP.NET vous permettent de crer une disposition
cohrente des pages de votre application. Une page matre unique dfinit
l'apparence et le comportement standard que vous souhaitez pour toutes les pages (ou groupe de pages) de votre application. Vous pouvez ensuite crer des pages de contenu individuelles comportant les lments que vous souhaitez afficher. Lorsque les utilisateurs demandent les pages de contenu, ils fusionnent avec la page matre pour produire une sortie qui associe la prsentation de la page matre au contenu de la page de contenu.
2010/2011
ASP.NET
93
TP 7: Master Page
Atelier 1
Une page matre est un fichier ASP.NET possdant l'extension .master (*) La page matre est identifie par une directive @ Master
<%@ Master Language="C#" %>
ContentPlaceHolder
Dfinit relative une rgion pour le contenu dans une page matre ASP.NET. Placer l o vous souhaitez que le contenu soit modifiable
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
2010/2011
ASP.NET
94
TP 7: Cration de page Maitre

Diviser la page en zones de contenu
Plan du site | Contactez-nous | Ajouter aux favoris
Logo
Panneau publicitaire Chemin de navigation
Espace membre
Menu priv Zone dynamique modifiable par les pages enfants
Services
Menu des services Pied de page
2010/2011
ASP.NET
95
TP 7: Cration d'une master page

Crez un nouveau site web : Fichier -> nouveau -> Site Web Dans l'explorateur de solution, cliquez avec le bouton droit puis choisissez Ajoutez un nouvel lment Slectionnez page Matre et gardez le nom par dfaut : MasterPage.master. Cliquez sur Ajouter
Ajoutez un autre ContentPlaceHolder et choisir Un id
2010/2011
ASP.NET
96
TP 7: Cration d'une master page
2010/2011
ASP.NET
97
TP 7: Cration d'une page de contenu

Modifiez la directive @Page pour indiquer au runtime que votre page hrite maintenant de la page Matre MasterPage.master : Ajoutez lattribut MasterPageFile et pointez sur lurl de la page Matre.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits= " MasterPage" MasterPageFile="~/MaitrePage.Master" Title="Test" %>
Dans une page enfant, cette zone de contenu dynamique est un contrle <asp :Content> qui est reli un contrle ContentPlaceHolder parent par lattribut ContentPlaceHolderID
<asp:Content ID="Content1" ContentPlaceHolderID="Body" Runat="Server"> </asp:Content>
2010/2011
ASP.NET
98
TP 7: Crer une nouvelle page de contenu Webform Atelier 2

crer une nouvelle WebForm, et de cocher la case "Select master page ", l'tape suivante Visual Studio va vous demander de slectionner la master page utiliser avec cette WebForm
2010/2011
ASP.NET
99
TP 7: Crer une nouvelle page de contenu Webform
2010/2011
ASP.NET
100
TP7: Accder aux objets de la page matre depuis la page enfant

Pour changer le pied de page dfini dans la page matre dynamiquement depuis la page enfant, il faut dabord crer dans cette dernire une rfrence fortement type sur la page matre correspondante En mode source, ajoutez la directive @MasterType la page pour indiquer le type de la page matre dont la page hrite et sa proprit VirtualPath:
<%@ MasterType VirtualPath="~/MaPageMaitre.Master" %>
2010/2011
ASP.NET
101
TP 7 : Accder aux objets de la page matre depuis la page enfant

Dans MaPageMaitre.Master :
Ajouter un LableDePageMaitre lextrieur des ContentPlaceHolder
<div>
<asp:Label ID="LabelDePageMaitre" runat="server" </asp:Label> </div> Text="Label">
Dans le code Bhind de notre page Master :

Crez des get et set pour notre Label(en gnral des fonctions pour avoir laccs)
public string GetSetLabelDePageMaitre { get { return LabelDePageMaitre.Text;} set { LabelDePageMaitre.Text=value; } }

2010/2011 ASP.NET 102
TP7 : Accder aux objets de la page matre depuis la page enfant

Dans notre page qui hrite de MaPageMaitre dajouter la directive MasterType Ajouter un Bouton nom : Get et au autre nom :Set
2010/2011
ASP.NET
103
<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ MasterType VirtualPath="~/Site.master" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <div> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Get" onclick="Button1_Get" /> <asp:Button ID="Button2" runat="server" Text="Set" onclick="Button2_Set" /> </div> </asp:Content>
2010/2011
ASP.NET
104

Dans le code Bhind de notre page Default.aspx Ajoutez une mthode Button1_Get Pour le bouton Get qui permit de rcuprer la valeur du label de la page maitre
protected void Button1_Get(object sender, EventArgs e) { //pour rcuprer la valeur du label de la page //maitre dans Lable1 de La page Default Label1.Text = Master.GetSetLabelDePageMaitre ; }
2010/2011
ASP.NET
105

Toujours dans Dans le code Bhind de notre page Default.aspx Ajouter une mthode Button1_Set Pour le bouton Set qui permit de changer la valeur du label de la page maitre
protected void Button2_Set(object sender, EventArgs e) { //pour chnager la valeur du label de la page maitre Master.GetSetLabelDePageMaitre = "je change la valeur de label de la page maitre "; }
2010/2011
ASP.NET
106
TP7 : Excuter
2010/2011
ASP.NET
107
TP7 : Aprs Clic sur Get
2010/2011
ASP.NET
108
TP 7 : Aprs Clic sur Set
2010/2011
ASP.NET
109
TP8
LES CONTRLES SERVEUR DATA-BOUND

2010/2011 ASP.NET 110
TP8 : Les contrles serveur Data-Bound

Les contrles Data-Bound, sont des contrles qui ont ncessairement besoin dun bind pour fonctionner; Ils sont classs en trois catgories : simple, compos et Hirarchique
GridView, DetailsView et FormView La Classe CompositeDataBoundControl
2010/2011
ASP.NET
111
TP8 : DetailsView
Le contrle DetailsView vous permet la fois dafficher, de
modifier, dinsrer ou de supprimer un enregistrement unique de

sa source de donnes associe. Par dfaut, le contrle DetailsView affiche chaque champ dun enregistrement sur une ligne distincte
Le contrle DetailsView est gnralement utilis pour la mise

jour et linsertion de nouveaux enregistrements et souvent dans un scnario matre/dtail
2010/2011
ASP.NET
112

Atelier 1
Cration dune base donnes

Ouvrez lExplorateur de base de donnes de Visual Studio Ajoutez un nouvel lment au dossier App_Data :<<Base de donnes Sql Server >> Crez une table Client( id_cli, nom_cli ,mail_cli, ville_cli ) et id comme cl primaire Ajoutez une nouvelle ClientAffiche.aspx nhrite pas de page master
2010/2011
ASP.NET
113
2010/2011
ASP.NET
114

Faites un glisser dplacer de la table Client dans le <div > de la page ClientAffiche.aspx Supprimer le GridView ?? Crez un block div puis faites un glisser dplacer du contrle DetailsView Choisissez SqlDataSource1 comme source de donnes DetailsView Excutez
Cliquez sur la flche du control DetailsVeiw Modifier les champs Slectionnez id_client modifiez le hederText avec numClient
2010/2011
ASP.NET
115
TP8 : Personnalisation de laffichage du contrle DetailsView

En mode Cration, cliquez avec le bouton droit sur le contrle DetailsView, puis cliquez sur Afficher les tches de contrle courantes. Dans le menu Tches courantes du contrle DetailsView, cliquez sur Format automatique. Dans la bote de dialogue Format automatique, slectionnez un mode dans la liste Slectionner un mode. Leffet du mode sur votre contrle DetailsView est affich dans la zone Aperu.
2010/2011
ASP.NET
116
TP8 : Personnalisation de laffichage du contrle DetailsView

Cochez la fonctionnalit souhaite : Permettre la modification Activer la suppression Activer la insertion Activer la pagination
2010/2011
ASP.NET
117
TP 8: La Proprit DefaultMode:
Permit dobtenir ou dfinit le mode d'entre par dfaut du contrle Il existe 3 modes : Insert ,Edit et ReadOnly
2010/2011
ASP.NET
118
TP 8: La Proprit DefaultMode:
Insert Edit Read Only
2010/2011
ASP.NET
119
TP8 : davoir laffichage dans une page et linsertion dans une autre
Atelier 2
Objectif
Cette fois cest davoir laffichage dans une page et linsertion dans une autre
Cre une nouvelle page ClientInsert.aspx Mme instructions que lAtelier 1 Dans la fentre Proprits du DetailsVeiw changez DefaultMode de ReadOnly Insert Activer la insertion Excutez
2010/2011
ASP.NET
120
Dans la page ClientAffiche Faites un glisser dplacer du contrle HyperLink dans la page Dans la fentre Proprits du HyperLink
changer la valeur de Text avec Ajouter un Client NavigateUrl par ClientInsert.aspx
2010/2011
ASP.NET
121
Dans le code la page ClientInsert.aspx ajouter la mthode suivante
protected void DetailsView1_InsertMql(object sender, DetailsViewInsertedEventArgs e) { if (e.AffectedRows == 1) { Response.Redirect("~/ClientAffiche.aspx"); } }
Ajouter dans Source du Control DetailsVeiw de la page ClientInsert OnItemInserted="DetailsView1_InsertMql"
2010/2011
ASP.NET
122
Dans le code la page ClientInsert.aspx ajouter la mthode suivante
protected void DetailsView1_CancelMql(object sender, DetailsViewCommandEventArgs e) { if (e.CommandName=="Cancel") { Response.Redirect("~/ClientAffiche.aspx"); } }
Ajouter dans Source du Control DetailsVeiw de la page ClientInsert OnItemCommand="DetailsView1_CancelMql "
2010/2011
ASP.NET
123
TP9
DFINITION DES MENUS
2010/2011
ASP.NET
124
TP 9: Dfinition des menus

Lapplication web fournit trois systmes de navigation :
Un menu sur le ct gauche de lcran qui permet de naviguer dans les services du site. Le mme menu dans le pied de page, qui permet davoir un lien sur tous les services la fin de la lecture dune page (sans avoir besoin de refaire dfiler la page jusqu son sommet pour refaire apparatre le menu gauche). Un chemin dans la bannire du site qui permet de savoir tout moment o lon se trouve dans la hirarchie des pages du site.
2010/2011
ASP.NET
125
TP 9 : Plan de site
XmlSiteMapProvider : permet de lier les contrles serveur de menu (type TreeView, Menu) une source de donnes au format Xml appele fichier de plan de site, contenant ladresses des diffrentes pages utiliss dans notre site.
2010/2011
ASP.NET
126
TP 9 : Plan de site
Construire une cartographie du site dcrivant ladresse de toutes les pages du
site ainsi que le titre de menu associ et de le stocker au format Xml dans un fichier de type Plan de site.
Un plan de site est un fichier XML qui dcrit la collection de nuds du menu de
votre application. Il doit y avoir un nud principal incluant des sous nuds pour les sous menus.
2010/2011
ASP.NET
127
TP 9 : Plan de site
Faites un clic droit sur la racine de votre projet > Ajouter un nouvel lment > Plan de site
2010/2011
ASP.NET
128
TP 9 : Source de donnes
Double cliquez sur MasterPage.master lExplorateur de solutions. Faites un glisser dplacer de la Bote outils > rubrique Donnes > contrle SiteMapDataSource sur la page.
2010/2011
ASP.NET
129
TP 9 : Site Map DataSource

Paramtrez False la proprit ShowStartingNode du contrle pour dmarrer la lecture du plan au premier niveau des nuds lintrieur du nud racine
Slectionnez le contrle SiteMapDataSource > clic droit > Proprits.
Changez la valeur de ShowStartingNode : False
Le menu racine Accueil napparat pas car vous avez indiqu au contrle source de donnes
SiteMapDataSource1 que vous ne souhaitiez pas en tenir compte
(proprit ShowStartingNode false).
2010/2011
ASP.NET
130
TP 9 : Dfinition des menus
1. Le contrle TreeView: Cest le contrle qui va nous permettre dafficher le menu sur la barre de
navigation gauche vers lensemble des pages du site.
2010/2011
ASP.NET
131
TP 9 : Le contrle TreeView
Double clique sur la page MasterPage.master depuis lExplorateur de solutions. Ajoutez un contrle TreeView la suite du contrle de source de donnes SiteMapDataSource Faites un glisser dplacer de la Bote outils > rubrique Navigation > contrle TreeView sur la page Choisissez la source de donnes siteMapDataSource1.
2010/2011
ASP.NET
132
TP 9 : Le contrle TreeView
Proprits: Les attributs ExpandImageUrl et CollapseImageUrl du contrle TreeView
pour afficher des images de votre choix lorsquun menu contient des sous
menus. Lattribut NoExpandImageUrl donne limage affiche pour toutes les options de menus nayant pas de sous niveau.
Lattribut ExpandDepth permet de contrler la profondeur de laffichage des nuds dans la hirarchie au lancement du menu. Avec la valeur 0, on obtient seulement les menus. Avec une valeur 1, mme les sous-menu sont dj ouvertes .
2010/2011
ASP.NET
133
TP 9 : Le contrle Menu
Cest le contrle qui va nous permettre dafficher le mme menu dans le pied de notre page. Double clique sur la page MasterPage.master depuis lExplorateur de solutions. Ajoutez un contrle Menu juste au dessus du contrle literal ltlPiedDePage dans la partie Zone : Pied de page : Faites un glisser dplacer de la Bote outils => rubrique Navigation => contrle Menu sur la page.
2010/2011
ASP.NET
134
TP 9 : Le contrle Menu
Choisissez la source de donnes :
Chaque menu contient une collection dItems :
Statiques : cest--dire affichs au lancement du menu.

Dynamiques: cest--dire affichs lorsque lutilisateur passe la souris sur le menu parent correspondant.
2010/2011
ASP.NET
135
TP 9 : Mise en forme de menu

Lattribut Orientation contrle lorientation du menu. Lattribut StaticMenuItemStyle, pour dfinir le style des lments de menu. Lattribut ItemSpacing dtermine lespacement entre les options de menu. Vous pourriez utiliser galement la mise en forme automatique propose en mode Design dans le
Pour choix de la forme de menu
2010/2011
ASP.NET
136
TP 9 : Le contrle SiteMapPath
Cest le contrle qui donne le chemin de la page en cours dans la bannire des pages. Par exemple ici vous tes dans la page Acceuil (Default.aspx).
Lorsque vous cliquez sur lun des lments du menu, vous observez le chemin de la page correspondante donn par le contrle.
2010/2011
ASP.NET
137
TP 9 : Le contrle SiteMapPath
Ajoutez un contrle SiteMapPath lintrieur de la balise <div> de classe nav :
Faites un glisser dplacer de la Bote outils > rubrique Navigation => contrle SiteMapPath sur la page.
Notez les lments drivs de la classe Style, PathSeparatorStyle, CurrentNodeStyle, NodeStyle et RootNodeStyle, pour dfinir le style des diffrentes parties du contrle. Slectionnez loption Modifier les modles.
Dans la liste droulante, positionnez vous sur le modle correspondant au dessin du sparateur de menu : PathSeparatorTemplate.
2010/2011
ASP.NET
138
TP 9 : Mise en forme SiteMapPath

<asp:SiteMapPath runat="server"> <PathSeparatorStyle Font-Bold="True" ForeColor="White" /> <CurrentNodeStyle ForeColor="#003063" /> <NodeStyle Font-Bold="True" ForeColor="White" /> <RootNodeStyle Font-Bold="True" ForeColor="White" /> </asp:SiteMapPath>
Notez les lments drivs de la classe Style, PathSeparatorStyle, CurrentNodeStyle, NodeStyle et RootNodeStyle, pour dfinir le style des diffrentes parties du contrle.
2010/2011
ASP.NET
139
A suivre

ASP

Transféré par

Informations du document

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

ASP

Transféré par

Droits d'auteur :

Formats disponibles

Universit Ibno Tofail Facult des Sciences Master Qualit logiciel Cours : Internet & Multimdia

Pr. Abdelalim SADIQ

Quest ce que .NET ?

Quest ce que .NET ?

Support des standards

Peut agir sans rechargement de la page.

invocation excution ct serveur

rsultat = HTML gnr via l'objet prdfini Response

ce qui est renvoy au client

CRER UN PREMIER FORMULAIRE DYNAMIQUE

TP1 : Crer un premier formulaire dynamique

vidence le principe du post back (aller retour ) avec ASP.NET 2.0.

construire un formulaire de recherche des petites annonces partir de deux

critres : la rgion de publication (une liste droulante) et la date (une zone de

TP1 : tape 1 Partir dune page html standard

TP1 : tape2 rendre la page un formulaire interactif

TP1 : tape 1 rendre la page un formulaire interactif

TP1 : tape3 rendre la page un formulaire interactif

TP1 : tape4 ajouter un traitement la page

TP1 : tape4 ajouter un traitement la page

TP1 : tape4 ajouter un traitement la page

instance de tous les contrles marqus avec runat="server". Ces instances

TP1 : tape4 ajouter un traitement la page

une mthode Focus(), qui permet de positionner le focus sur le contrle,

TP1 : tape4 ajouter un traitement la page

TP1 : tape4 ajouter un traitement la page

TP1 : tape4 ajouter un traitement la page

TP1 : tape4 ajouter un traitement la page

TP1 : tape4 ajouter un traitement la page

TP1 : tape 5 Utiliser les contrles Html Serveur

par des classes du type HtmlForm, HtmlInputText, HtmlInputButton, ou

dans un traitement ct serveur. La seule condition pour les utiliser est de

TP1 : tape 5 Utiliser les contrles Html Serveur

TP1 : tape 5 Utiliser les contrles Html Serveur

TP1 : tape 5 Utiliser les contrles Html Serveur

COMPRENDRE LA PROBLMATIQUE DE GESTION DTAT

TP 2 : Comprendre la problmatique de gestion dtat

Mettre en vidence la problmatique de gestion dtat dans une application web.

TP2 : Comprendre la problmatique de gestion dtat

TP 2 : Utiliser la balise script

Tp2 : lecture de la liste droulante

Ajoutez le code de lecture du fichier texte et de chargement de la liste droulante

Tp2 : lecture de la liste droulante

Tp2 : lecture de la liste droulante

Tp2 : garder ltat de la liste

Vrifier ce champ dans la source de la page html

Tp2 : garder ltat de la liste

Dsactivons maintenant lutilisation du View State par ajouter :

La page de rponse affiche toujours la premire rgion de la liste

Tp2 : garder ltat de la liste

Repositionnez lattribut enableViewState avec la valeur true de llment <Select>

Tp2 : garder ltat de la liste

Tp2 : garder ltat de la liste

UTILISER LE MODLE VNEMENTIEL

TP 3 : Utiliser le modle vnementiel

Comprendre lapproche vnementielle de la programmation avec ASP.NET 2.0.

est videmment plus lourd

TP 3 : Traiter des vnements

TP 3 : Utiliser le modle vnementiel

TP 3 : Utiliser le modle vnementiel

TP 3 : Utiliser le modle vnementiel

TP 3 : Utiliser le modle vnementiel

Crez la procdure ddlRegion_ServerChange de traitement de lvnement ct serveur :

TP 3 : Utiliser le modle vnementiel