Pr. Abdelalim SADIQ
Sadiq.alim@gmail.com
Université Ibno Tofail Faculté des Sciences Master Qualité logiciel
Qu’est ce que .NET ?
Objectifs
• Un label marketing sur tous les nouveaux produits.
• Une plate-forme de développement unifié.
• Un environnement d’exécution sécurisé.
• Le remplaçant de l’architecture 3-tiers DNA (Distribued interNet Architecture ).
• Prendre une place prépondérante sur le Web avec la location de services.
• Proposer une interopérabilité entres les services Web à travers Internet.
• Pouvoir consommer l’Internet sur plusieurs types de support (PC, PDA, téléphone).
• Être la plate-forme de référence pour la création de Services Web XML.
Caractéristiques
• Support 27 langages de programmation.
• L’objet est prépondérant.
• Un ensemble complet de classes de base.
• Orienté pour le développement d’applications Web.
• Basé sur des standards d’Internet : XML et SOAP.
• Pas de code natif : utilisation d’un langage intermédiaire le MSIL (MicroSoft Intermediate Language).
• L’exécution des programmes est contrôlée par la CLR (Common Language Runtime).
• Une architecture complète : le Framework.
Qu’est ce que .NET ?
Le Framework
Vie d’une application .net
• Environnement d’exécution de .net.
• Application et mémoire « managées » par la CLR.
• Indépendant des syntaxes.
• 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.
• Exécution du code en Binaire.
Framework .net
Support des standards
• Standards issus d’organismes indépendants.
•XML (eXtended Markup Language) pour les données.
• XSD (Schema Definition Language) pour définir la grammaire et le type de données d’un langage.
• HTTP (Hyper Text Transfert Protocol), natif dans .NET.
• SOAP (Simple Access Object Protocol), permet la communication des objets de manière transparente pour le développeur.
• WDSL (Web Services Description Language), format XML utilisé pour décrire les services d’un réseau.
• UDDI (Universal Description, Discovery and Integration), annuaire des Web Services.
Les langages
• 27 langages supportés pour le moment …
• C#, VC++, VB.net, Jscript, Perl, Small Talk, Cobol, Fortan, Delphi…
• Les langages doivent répondre aux contraintes du MSIL.
• Une classe en C# peut-être utilisée dans un programme écrit en VB.net.
• 27 syntaxes différentes plutôt que 27 langages ?
Le C#
• A mi-chemin entre C++ et Java.
• Réponse de Microsoft à Java : syntaxe et fonctionnalités similaires.
• Bénéficie du Framework.net et sa CLR.
Les langages
Qu’est ce qu’ASP.net ?
• Version .NET d’ASP. : utilisé pour la création de site Web dynamique
• 3 types de pages : ASPx, ASMx (assembly) pour les Web services, ASCx (control) pour les contrôles utilisateurs.
• ASP.net fait partie intégrante du FrameWork et bénéficie de toutes ses fonctionnalités (classes de base).
• Les Pages ASP.net sont compilés et exécuté par la CLR : code managé, possibilité de « tracing » et de « debugging ».
• Le code peut-être séparé totalement de la partie présentation.
• Apparition des contrôles serveurs.
• Comparable à J2EE + RMI
• S’appuie toujours sur IIS 5, mais multi-processus au lieu de multi-thread.
Les contrôles serveurs
• 45 contrôles disponibles (Listbox, treeview, calendar, adrotator, …)
• Exécutés sur le serveur.
• Renvoie du code HMTL au client en fonction du navigateur utilisé (compatible HMTL 3.2).
• Masque au développeur la communication client / serveur.
• Peut agir sans rechargement de la page.
• Chaque contrôle est une classe du Framework.
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 exécution côté serveur
Asp.net
2010/2011 ASP.NET 11 <%@ 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# résultat = HTML généré via l'objet prédéfini Response <HTML> <BODY>
<H1>Table des factorielles</H1>
1! = 1<BR> 2! = 2<BR> 3! = 6<BR> </BODY> </HTML> ce qui est renvoyé au client
Asp.net
Asp.net
•
Séparer
rendu graphique traitement•
2 fichiers
.aspx• le code de présentation et celui des contrôles • fichier XTHML (HTML 4.0 formulé en XML) • Web form
.aspx.cs , .aspx.vb , …
• fichier dit codebehind
• classe contenant les traitements
Contrôles
Composants graphiques pour l’écriture de pages ASP.NET
• Pour agir avec l'utilisateur : lui présenter de l'information
• Pour réagir aux actions de l'utilisateur : déclencher des traitements
• Utilisation en drag-and-drop dans VS pour la conception page web
Analogue atelier conception IHM en client lourd
• Propriétés : les caractéristiques d'affichage (ex. Text pour un TextBox)
• Événements : réactions (clic, frappe, changement, …) autant d'objets par page que de contrôles "déposés" 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
Les contrôles
CRÉER UN PREMIER
FORMULAIRE DYNAMIQUE
TP1 : Créer un premier formulaire dynamique
Construire une page aspx à partir d’un formulaire HTML standard et de mettre en évidence le principe du post back (aller retour ) avec ASP.NET 2.0.
construire un formulaire de recherche des petites annonces à partir de deux critères : la région de publication (une liste déroulante) et la date (une zone de texte).
Dans un premier temps le résultat de la recherche consiste en l’affichage d’un texte résumant les critères choisis.
Dans un deuxième temps construire un tableau html avec plusieurs annonces issues de la recherche
2010/2011 ASP.NET 15
Objectif
TP1 : étape 1
Partir d‟une page html standard
1. Créez un répertoire sur le disque pour stocker la solution que vous allez développer.
2. Ouvrez Microsoft Visual Studio et enregistrez le nouveau document vide sous le nom Default.aspx dans votre répertoire 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>Région: </h3> </div> <div class="date"> <h3>Date: </h3> </div> </div> <div class="resultat"> Résultat de la recherche... </div> </body>
TP1 : étape2
rendre la page un formulaire interactif
Ajoutez une balise <form> à la page
La balise <form> délimite la zone dynamique proprement dite du formulaire,
Elle contient les zones de saisie de l’utilisateur dont les données devront être envoyées sur le serveur.
Elle possède des attributs obligatoires :
method pour indiquer de quelle manière sont envoyées les données sur le serveur : soit codées dans l’url de la requête pour la méthode « GET » soit stockées dans le corps de la requête pour la méthode « POST ».
Par défaut, une page aspx utilise la méthode POST.
action pour indiquer l’url à laquelle sont envoyées les informations. Il faut savoir
qu’une page aspx poste ses données sur elle-même c’est-à-dire que l’url d’envoi est celle de la page elle-même tout simplement !
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>
TP1 : étape3
rendre la page un formulaire interactif
Ajoutez maintenant les contrôles de sélection/saisie et un bouton de soumission
2010/2011 ASP.NET 19
<div class="region"> <h3>Région: </h3> <SELECT name="ddlRegion">
<OPTION VALUE="1"> Rabat </OPTION> <OPTION VALUE="2"> Casa </OPTION> <OPTION VALUE="3"> Kenitra </OPTION> <OPTION VALUE="4"> Sale </OPTION> <OPTION VALUE="5"> Ouajda </OPTION> <OPTION VALUE="6"> Fés </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>
<div class="date"> <h3>Date: </h3>
<input name="txtDate” type="text"/> <input name="btnGo” type="submit”
value="Go" /> </div>
Contrôle de sélection
Contrôle de saisie et bouton de soumission
TP1 : étape4
ajouter un traitement à la page
Ajouter un traitement à la page qui sera pris en charge côté serveur par ASP.NET 2.0.
La page est postée sur elle-même, donc ce traitement est directement programmé dans la page elle-même
Le mécanisme le plus simple est d’inclure les instructions de la page qui doivent être exécutées sur le serveur à l’intérieur d’une balise server <% %>
ASP.NET repère le code de traitement server à exécuter via cette balise.
Nous allons simplifier le traitement de recherche des annonces et nous contenter d’afficher dans la zone de résultat délimitée 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 modèle de « contrôles » avec des propriétés, des
méthodes et des évènements pour manipuler les différents éléments html de la page.
TP1 : étape4
ajouter un traitement à la page
Ajoutez l’attribut runat avec la valeur server aux éléments html <SELECT>,
<INPUT> de type « text » et à la balise <DIV> de résultat et donnez-leur à chacun un identifiant unique (via l’attribut id).
Ajoutez également runat="server" sur le formulaire délimité par <FORM>.
2010/2011 ASP.NET 21
<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">
TP1 : étape4
ajouter un traitement à la page
L’attribut runat="server" est fondamental car il indique au moteur ASP.NET qui traite la requête sur le serveur que les balises HTML vont pouvoir être considérées comme des contrôles accessibles par programmation via leur id unique.
Lorsque le server démarre le traitement de la page, un objet Page est chargé en mémoire et réalise une succession d’étapes dont la toute première est de créer une instance de tous les contrôles marqués avec runat="server". Ces instances
s’appuient sur des classes définies dans le Framework 2.0.
Pour chaque balise html marquée, on obtient donc un objet :
basé sur une classe du Framework, ayant une représentation graphique,
doté de propriétés qui le caractérisent et le définissent,
doté de méthodes qui permettent de jouer sur son comportement,
et doté d’évènements qui sont déclenchés en général par des actions de l’utilisateur sur le contrôle
TP1 : étape4
ajouter un traitement à la page
Un contrôle <INPUT> de type « submit » tel que le bouton Go, est chargé en mémoire par ASP.NET sur la base d’une classe nommée HtmlButton.
Cet objet est alors accessible par programmation et comprend entre autres :
une représentation graphique qui est celle d’une balise INPUT de type « submit », une propriété InnerTextqui permet d’inscrire un texte sur le bouton,
une méthode Focus(), qui permet de positionner le focus sur le contrôle,
un évènement ServerClickqui est déclenché lorsque l’utilisateur clique sur le bouton.
Le formulaire doit être également runat="server" et est alors vu comme un contrôle de type HtmlForm
Avant de programmer le traitement serveur, il reste à indiquer le langage de choix dans ce qu’on appelle une « directive » de page. Celle-ci est écrite au tout début de la page et est lue côté serveur par ASP.NET.
Dans le cas présent, nous allons indiquer au serveur le langage de votre choix, en utilisant l’attribut Language :
TP1 : étape4
ajouter un traitement à la page
Indiquer le langage de votre choix
Code VB.NET
Code C#
<%@ Page Language="VB" %> <html> … </html> <%@ Page Language="C#" %> <html> … </html>TP1 : étape4
ajouter un traitement à la page
Puisque vous avez accès aux éléments <SELECT>, <INPUT> et <DIV> via les contrôles server chargés en mémoire par ASP.NET 2.0, il ne vous reste plus qu’à programmer la lecture de la date dans la zone de texte et l’écriture du texte final dans la zone de résultat
Code VB.NET Code C# 2010/2011 ASP.NET 25 <% if (txtDate.Value != "") {
resultat.InnerHtml = "Résultat de la recherche pour le " + txtDate.Value; }
%>
<%
If Not txtDate.Value = "" Then
resultat.InnerHtml = "Résultat de la recherche pour le " & txtDate.Value End If
TP1 : étape4
ajouter un traitement à la page
Ces lignes d’instruction utilisent :
la propriété Value du contrôle txtDate de type HtmlInputText pour lire la valeur de la date saisie dans la zone de texte et envoyée au serveur lors d’un post back.
la propriété InnerHtml pour modifier le contenu html du contrôle
resultat de type HtmlGenericControl qui représente la balise <DIV> d’id résultat.
TP1 : étape4
ajouter un traitement à la page
Autre exemple de traitement serveur : on pourrait par exemple écrire dans la zone de texte pour l’initialiser au chargement de la page avec la date du jour.
Code VB.NET
Code C#
La propriété DateTime.Now du Framework 2.0 donne la date du jour que l’on formate avec ToShortDateString().
2010/2011 ASP.NET 27 <% txtDate.Value = DateTime.Now.ToShortDateString() %> <% txtDate.Value = DateTime.Now.ToShortDateString() ; %>
TP1 : étape4
ajouter un traitement à la page
Ajoutez à la page, en suivant la même logique, la lecture de la sélection dans la liste déroulante de façon à compléter le texte de résultat comme ceci :
Code VB.NET
Code C#
ddlRegionest un contrôle de type HtmlSelectet contient une collection d’options appelée Items. Chacune des options est accessible via un index, l’élément sélectionné en cours étant positionné à l’index donné par la propriété SelectedIndexdu contrôle.
<%
If Not txtDate.Value = "" Then
resultat.InnerHtml = "Résultat de la recherche des annonces dans la région " _ & ddlRegion.Items(ddlRegion.SelectedIndex).Text & " pour le " + txtDate.Value
End If %>
<%
if (txtDate.Value != "") {
resultat.InnerHtml = "Résultat de la recherche des annonces dans la région " + ddlRegion.Items[ddlRegion.SelectedIndex].Text + " pour le " + txtDate.Value;
} %>
TP1 : étape 5
Utiliser les contrôles Html Serveur
Tous les contrôles Html standards sont représentés dans le Framework 2.0 par des classes du type HtmlForm, HtmlInputText, HtmlInputButton, ou plus générique comme HtmlGenericControl .
Ces classes nous permettent d’avoir accès aux éléments Html très facilement dans un traitement côté serveur. La seule condition pour les utiliser est de donner un id à vos balises et de les configurer avec runat="server".
TP1 : étape 5
Utiliser les contrôles Html Serveur
On va construire un tableau html avec plusieurs annonces issues de la
recherche. Toujours avec cette même approche de contrôles serveur, cette opération peut se faire très simplement grâce à la classe HtmlTable qui représente le tableau html standard et qui contient des éléments de type
HtmlTableRow (ligne) eux-mêmes constitués de HtmlTableCell (cellule).
Ajoutez un tableau vide dans la zone de résultat de la page à la place du texte initial
<form method="post" action="Default.aspx" runat="server"> …
<div class="resultat" runat="server" id="resultat">
<table id="tblResultat" class="gridcontent" runat="server"> </table>
</div> </form>
Format défini dans la feuille de style
TP1 : étape 5
Utiliser les contrôles Html Serveur
Mettez en commentaire le code de l’étape précédent dans la balise <%%>.
Ajoutez le code suivant affichant une seule annonce (codée en dur pour simplifier) dans le tableau de résultat lorsque la région sélectionnée est Kenitra (indexe = 2)
2010/2011 ASP.NET 31
<% „..‟
If ddlRegion.SelectedIndex = 2 Then
' Créer une nouvelle ligne de tableau
Dim ligne As HtmlTableRow = New HtmlTableRow()
' Créer une nouvelle cellule de tableau pour afficherl‟email
Dim celluleEmail As HtmlTableCell = New HtmlTableCell()
' Afficher dans la cellule un texte littéral 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 del‟annonce
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
TP1 : étape 5
Utiliser les contrôles Html Serveur
Code C#
<% /*…*/
if (ddlRegion.SelectedIndex == 2) {
// Créer une nouvelle ligne de tableau
HtmlTableRow ligne = new HtmlTableRow();
// Créer une nouvelle cellule de tableau pour afficherl‟email
HtmlTableCell celluleEmail = new HtmlTableCell();
// Afficher dans la cellule un texte littéral 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 l‟annonce
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); }
COMPRENDRE LA
PROBLÉMATIQUE DE
GESTION D‟ÉTAT
TP2
TP 2 : Comprendre la problématique de
gestion d‟état
Mettre en évidence la problématique de gestion d’état dans une application web.
Le contexte fonctionnel reste identique à l’exercice précédent à ceci près que vous allez maintenant charger
la liste déroulante de manière dynamique à partir du fichier texte régions.txt.
Objectif
TP2 : Comprendre la problématique de
gestion d‟état
Dans le TP1, le code est inscrit à l’intérieur d’une balise <% %>, et est évalué avec l’exécution de la page. Cette écriture est limitée en ASP.NET 2.0 dans la mesure où vous ne pouvez pas déclarer dans un tel bloc une fonction ou toute autre instruction qu’un 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 exécuté côté serveur.
Dans ce bloc de déclaration de code, les lignes vont être compilées avec une approche orientée objet c’est-à-dire dans le contexte d’une classe générée dynamiquement par ASP.NET et associée à la page web, c’est la classe page.
Aussi nous allons incorporer les lignes de code dans la procédure de réponse à l’évènement de chargement de la page en mémoire, appelé Page_Load
TP 2 :
Utiliser la balise script
Remplacez la balise <% %> par une balise <script> et ajoutez la procédure Page_Load autour de code
Insérer le code après la balise </head>
Code VB.NET
Code C#
<script runat="server" >
Protected Sub Page_Load()
If ddlRegion.SelectedIndex = 2 Then … End If End Sub </script> <script runat="server" > public void Page_Load() {
if (ddlRegion.SelectedIndex == 2) {…}
}
Tp2 :
lecture de la liste déroulante
Programmez le chargement dynamique de la liste déroulante :
Commencez par supprimer les options de l’élément SELECT
Ajoutez le code de lecture du fichier texte et de chargement de la liste déroulante
2010/2011 ASP.NET 37
<SELECT name="ddlRegion" runat="server" id="ddlRegion"> </SELECT>
<script runat="server" > Protected Sub Page_Load()
Using sr As System.IO.StreamReader = _
System.IO.File.OpenText("C:\Votre chemin de projet\Liste des régions.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> Code VB.NET
Tp2 :
lecture de la liste déroulante
Code C#<script runat="server" > public void Page_Load() {
using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\chemin\régions.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>
Tp2 :
lecture de la liste déroulante
On utilise l’espace de nom System.IO du Framework 2.0 qui fournit des classes pour lire et écrire dans des fichiers, telle que StreamReader.
Une liste déroulante de type HtmlSelect contient une collection d’éléments
de type ListItem, appelée Items.
Il suffit d’utiliser la méthode Add pour insérer un nouveau élément en
indiquant le texte (lu dans le fichier et donné par s) et la valeur (incrémentale donnée par index) de l’option.
Tp2 :
garder l‟état de la liste
Nous voyons que la liste s’incrémente une nouvelle fois avec les régions !! Pourquoi?
ASP.NET s’occupe pour préserver l’état des informations des contrôles 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 qu’ASP.NET
insère dans la page et utilise pour écrire et lire les informations à préserver
Ce champ est transporté entre le navigateur et le serveur web d’un post back à l’autre
Tp2 :
garder l‟état de la liste
lorsque la page est postée sur le serveur en cliquant sur Go :
les informations contenues dans les contrôles sont écrites dans le champ caché
__VIEWSTATE,
Le serveur ASP.NET construit une nouvelle instance de la classe Page
Le serveur instancie les contrôles marqués avec l’attribut runat=server et les initialise avec l’état lu dans le View State.
La liste déroulante inscrit son contenu dans le champ caché, le serveur charge en mémoire un contrôle de type HtmlSelect avec toutes les régions écrites au premier chargement de la page.
Le serveur réalise les traitements demandés, tel que le chargement de la liste et écrit donc une deuxième fois les régions dans le contrôle HtmlSelect
Une fois le traitement terminé, le serveur écrit dans le View State l’état des
contrôles résultant et demande à chacun d‘eux leur représentation html standard de façon à construire la page de réponse à renvoyer au navigateur
Désactivons maintenant l’utilisation du View State par ajouter :
La page de réponse affiche toujours la première région de la liste
2010/2011 ASP.NET 41
<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="false"> </SELECT>
Tp2 :
garder l‟état de la liste
Nous avons besoin de « sauvegarder l’état de la liste » au moment du post back de façon à retrouver la même sélection
Pour éviter le chargement intempestif de la liste lors d’un post back et préserve l’état des contrôles, ASP.NET sait vous indiquer si vous êtes au premier chargement de la page ou pas. Pour cela il fournit la propriété
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 l’attribut enableViewState avec la valeur true de l’élément <Select>
Tp2 :
garder l‟état de la liste
Rajoutez le test du post back dans la procédure Page_Load de façon à ne charger la liste qu’une seule fois au premier chargement de la page
Code VB.NET
2010/2011 ASP.NET 43
<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 régions.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>
Tp2 :
garder l‟état de la liste
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 régions.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>
UTILISER LE MODÈLE
ÉVÈNEMENTIEL
TP3
TP 3 :
Utiliser le modèle évènementiel
Comprendre l’approche évènementielle de la programmation avec ASP.NET 2.0.
Le contexte fonctionnel reste identique à l’exercice précédent à ceci près qu’au lieu de construire un tableau de résultat de la recherche sur la procédure Page_Load comme précédemment, nous allons associer le traitement directement à l’évènement clic de l’utilisateur sur le bouton Go.
Nous verrons finalement comment associer le traitement à l’évènement de changement de sélection dans la liste déroulante.
L’idée est de fournir un modèle de développement similaire à celui dont vous disposez dans du script client pour programmer des procédures en réponse à des évènements dans la page. La différence est que si l’évènement est bien déclenché côté client le traitement en réponse à celui-ci est en revanche effectué sur le serveur : ce procédé est évidemment plus lourd
Objectif
Contexte fonctionnel
TP 3 :
Traiter des évènements
Branchez l’évènement de clic sur le contrôle html du bouton Go :
Modifiez la déclaration du contrôle en ajoutant l’attribut onserverclick et en lui donnant le nom de la procédure de réponse à l’évènement, par exemple
btnGo_ServerClick:
Liez l’évènement ServerClick à la procédure de réponse appelée
btnGo_ServerClick. Ajoutez la procédure btnGo_ServerClick à
l’intérieur de la balise de script
2010/2011 ASP.NET 47
…
<input name="btnGo" type="submit" value="Go" onserverclick="btnGo_ServerClick" runat="server" /> …
TP 3 :
Utiliser le modèle évènementiel
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 1\Solution\Liste des régions.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 sender As Object, ByVal e As System.EventArgs)
If ddlRegion.SelectedIndex = 2 Then ..
End If End Sub
TP 3 :
Utiliser le modèle évènementiel
public void Page_Load(){
If ( !Page.IsPostBack) {
using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\chemin\régions.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
TP 3 :
Utiliser le modèle évènementiel
Vous constatez que la procédure de réponse à un évènement doit respecter un certain formalisme.
Elle contient deux arguments, l’un de type EventArgs donnant des
informations spécifiques à l’évènement, et l’autre de type object indiquant l’objet déclencheur de l’évènement.
Ce type de signature est commun aux évènements sauf à ceux associés au cycle de vie de la page web, tel que l’évènement Load, qui n’ont pas
TP 3 :
Utiliser le modèle évènementiel
Branchez l’évènement de changement de la sélection sur le contrôle html ddlRegion :
Modifiez la déclaration du contrôle en ajoutant l’attribut onserverchange et en lui donnant le nom de la procédure de réponse à l’évènement, par exemple
ddlRegion_ServerChange
Créez la procédure ddlRegion_ServerChange de traitement de l’évènement côté serveur :
Ajoutez la procédure à l’intérieur de la balise de script et transférez-y le code de création du tableau de résultat précédemment placé dans la procédure
btnGo_ServerClick
2010/2011 ASP.NET 51
…
<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="true"
onserverchange="ddlRegion_ServerChange"></SELECT>
TP 3 :
Utiliser le modèle évènementiel
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 e As System.EventArgs)
If ddlRegion.SelectedIndex = 2 Then End If
End Sub
TP 3 :
Utiliser le modèle évènementiel
Code C#
2010/2011 ASP.NET 53
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>
COMPRENDRE L‟APPROCHE
COMPOSANT
TP 4 :
Comprendre l‟approche composant
Mettre en œuvre les contrôles serveur d’ASP.NET 2.0 et de comprendre l’intérêt de l’approche basée sur l’utilisation de ces composants.
Si vous voulez ajouter un calendrier à la page pour faciliter la saisie de la date par l’utilisateur. Le calendrier est invisible au chargement de la page et apparaît si l’utilisateur le sollicite par un bouton . Grâce au calendrier
l’utilisateur peut rapidement sélectionner une date et la zone de texte est automatiquement chargée avec celle-ci.
2010/2011 ASP.NET 55
Objectif
TP 4 :
Comprendre l‟approche composant
o Avec l’approche composant, ASP.NET permet le contrôle côté serveur du comportement de certains éléments lors d’un post pack, mais cette fois en construisant directement vos pages côté serveur avec des contrôles élaborés.
Ces contrôles sont représentés par des balises qui ne sont connues que du moteur ASP.NET. Donc pour la plupart, ils sont associés à une représentation graphique basée sur des contrôles html standard, qu’ASP.NET construit dynamiquement à la fin de l’exécution de la page juste avant de renvoyer la page de réponse au navigateur.
Chaque contrôle est d’ailleurs capable d’adapter son rendu en fonction du navigateur cible.
Certains contrôles n’ont même pas de représentation graphique. L’objectif est de fournir un ensemble de composants qui encapsulent tout un comportement dynamique que le développeur peut facilement contrôler via des propriétés, des méthodes et des évènements.
Par exemple, vous avez des contrôles pour vous aider à configurer une connexion sur une base de données
TP 4 :
Ajouter composant calendrier
Ajoutez un contrôle serveur web de type Calendar à la page :
Ajoutez une balise <div> de classe date à la suite dans la zone de recherche
Ajoutez un contrôle <asp:Calendar> suivi d’un saut de ligne (br):
La balise préfixée par « asp: » n’est pas connue des navigateurs, c’est pourquoi le flux
de la page, tel qu’il est visible dans votre éditeur, n’est qu’un flux « intermédiaire ». Il vous sert à dynamiser la page en exploitant le côté serveur mais n’est pas transmis tel quel dans la réponse au navigateur.
2010/2011 ASP.NET 57 <div class="recherche"> <div class="region">…</div> <div class="date">…</div> <div class="date"> </div> </div> <div class="date">
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> <br />
TP 4 :
Exploitons les capacités du contrôle
Configurez les propriétés de style pour améliorer le format du
contrôle
<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 />
TP 4 :
Chargement automatique de la date
Un contrôle serveur ASP.NET contient toute une batterie de propriétés qui permettent de contrôler non seulement son style mais également son comportement.
Modifiez la déclaration du contrôle en ajoutant l’attribut OnSectionChangedet en lui donnant le nom de la procédure de réponse à l’évènement, par exemple Calendar1_SelectionChanged:
Ajoutez la procédure Calendar1_SelectionChanged à l’intérieur de la balise de script
:
2010/2011 ASP.NET 59
<asp:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged“ >
</asp:Calendar>
<script runat="server" >
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object,_ByVal e As System.EventArgs) End Sub
</script>
<script runat="server" >
protected void Calendar1_SelectionChanged(object sender, EventArgs e) {}
</script>
Code VB.NET
TP 4 :
Chargement automatique de la date
Le chargement de la zone de texte avec la date sélectionnée est fournie par le contrôle grâce à sa propriété SelectedDate :
La propriété SelectedDate retourne un objet de type DateTime .
la méthode ToShortDateString() de la classe DateTime permet de récupérer la date sous forme de chaîne de caractères.
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>
<script runat="server" >
protected void Calendar1_SelectionChanged(object sender, EventArgs e) {
txtDate.Value = Calendar1.SelectedDate.ToShortDateString();
} </script>
TP 4 :
Combiner plusieurs contrôles
Pour afficher/cacher le calendrier en fonction des besoins de l’utilisateur. Nous utilisons le contrôle serveur <asp:Button>
Ajoutez un contrôle serveur web de type Button à la page
Ajoutez l’évènement click sur le bouton
Modifiez la déclaration du contrôle en ajoutant l’attribut OnClick et en lui donnant le nom de la procédure de réponse à l’évènement, par exemple Button1_Click
2010/2011 ASP.NET 61
<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>
TP 4 :
Combiner plusieurs contrôles
Ajoutez la procédure Button1_Click à l’intérieur de la balise de script et
Inversez la visibilité du contrôle en utilisant la propriété Visible du contrôle
Calendar:
<script runat="server" >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Calendar1.Visible = Not Calendar1.Visible
End Sub </script>
<script runat="server" >
protected void Button1_Click(object sender, EventArgs e) { Calendar1.Visible = !Calendar1.Visible ; } </script> Code VB.NET Code C#
TP 4 :
Combiner plusieurs contrôles
Notez que dans le cas où l’utilisateur saisit manuellement une date dans la zone de texte, il serait peut-être opportun d’initialiser le contrôle Calendar en correspondance
2010/2011 ASP.NET 63
<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> <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>
Code VB.NET
UTILISER VISUAL WEB
DEVELOPER
TP 5 :
Utiliser Visual Web Developer
Montrer tout l’intérêt d’un environnement de développement tel que Visual Studio.
En mode Source, supposons que vous voulez ajouter des attribut à l’une
des balises par exemple <body> : positionnez le curseur à droite de la lettre y et cliquez la barre d’espace du clavier pour écrire le nom de
l’attribut. IntelliSense se déclenche et vous propose une liste d’attributs
pour la balise.
L’IntelliSense est également disponible au niveau du code inline dans des balises <script runat=server>.
La Boîte à outils pour remplacer tous les contrôles html standards par les contrôles serveur web d’ASP.NET 2.0
2010/2011 ASP.NET 65
TP 5 :
Utiliser Visual Web Developer
Basculez en mode Design.
Supprimez le contrôle de zone de saisie de la date.
Si la boîte à outils n’est pas visible, cliquez le menu Affichage -> Boîte à outils.
Faites un glisser déplacer du contrôle TextBox dans la catégorie Standard à l’emplacement de l’ancien contrôle html de saisie.
Sélectionnez le contrôle et cliquez F4 pour afficher la fenêtre de propriétés de Visual Web Developer.
Renommez le contrôle en txtDate (ID = txtDate)
Le système détecte un problème vient de la procédure SelectionChanged qui charge la zone de texte avec la date sélectionnée dans le calendrier. Changez
TP 5 :
Utiliser Visual Web Developer
En mode Design. Double cliquez sur le contrôle html. Visuel Web Developer vous emmène automatiquement sur la procédure de réponse à l’évènement par défaut associé à ce type de contrôle, Si la procédure n’existe pas encore, VWD vous créer la procédure avec la signature correspondante, sans oublier d’ajouter l’attribut
OnServerClick dans la déclaration du contrôle lui-même.
Supprimez le bouton Go et remplacez le par un contrôle Button en faisant un glisser déplacer du contrôle depuis la boîte à outils (ou en double cliquant sur le contrôle).
Renommez l’ID (butnGo) du contrôle et son titre via la propriété Text (Go).
Double cliquez sur le contrôle pour générer la procédure de réponse à l’évènement click
Remplacez le contrôle Select de la même façon, par un contrôle DropDownList dans la catégorie Standard.
Renommez l’ID en ddlRegion.
Double cliquez sur le contrôle en mode Design pour générer la procédure de réponse à l’évènement par défaut SelectedIndexChanged.
Déplacez le code anciennement dans la procédure ddlRegion_ServerChange dans la nouvelle procédure. Supprimez l’ancienne procédure.
TP 5 :
Utiliser Visual Web Developer
Contrairement au contrôle html Select et comme certains autres contrôles web serveur ASP.NET 2.0, le contrôle DropDownList peut provoquer un post back et déclencher l’évènement SelectedIndexChanged directement. Pour cela, il faut configurer la propriété AutoPostBack de la DropDownList.
Ajoutez l’attribut AutoPostBack avec la valeur true dans la déclaration de la DropDownList de façon à activer le post back automatique.
Sauvegardez et exécutez la page par un clic droit sur la page en mode source ->
TP 5 :
Utiliser Visual Web Developer
Utiliser un contrôle de validation pour contrôler la saisie de la date dans la zone de saisie :
Basculez en mode Design.
Faites un glisser déplacer du contrôle RangeValidator depuis la catégorie
Validation de la boîte à outils juste à droite de la zone de texte de la date.
Configurez les propriétés du contrôle :
ControlToValidate : txtDate (contrôle TextBox de la date)
ErrorMessage : La date n’est pas valide
Type : Date
MinimumValue : 01/01/2011
MaximumValue : 01/07/2011
Text : *
La propriété Text donne le message affiché à l’emplacement du contrôle de
validation. Le message dans ErrorMessage est utilisé par le contrôle
ValidationSummary pour afficher le message d’erreur détaillé.
TP 5 :
Utiliser Visual Web Developer
Faites de-même avec un contrôle RequiredFieldValidator pour éviter que le formulaire soit publié sans que l’utilisateur ait saisi une date.
Configurez les propriétés du contrôle :
ControlToValidate : txtDate (contrôle TextBox de la date)
ErrorMessage : La date est obligatoire
Text : *
Faites un glisser déplacer du contrôle ValidationSummary depuis la
catégorie Validation de la boîte à outils au sommet de la page (par exemple).
Sauvegardez et exécutez la page
Entrez une date incorrecte manuellement dans la zone de texte.
Cliquez sur Go.
TP 5 :
Utiliser Visual Web Developer
La validation a lieu côté client par un script généré par le contrôle ASP.NET Vous pouvez également désactiver la validation côté client pour qu’elle ait lieu côté serveur via la propriété EnableClientScript.
Configurez la propriété EnableClientScript à False sur les deux contrôles de validation de la TextBox txtDate.
Configurez la propriété CausesValidation à False sur le contrôle Button1 pour désactiver la validation côté serveur de façon à autoriser l’affichage 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 côté serveur sur le clic du bouton Go
Le calendrier s’affiche maintenant correctement, le serveur n’effectuant plus de contrôle sur le clic du bouton Calendrier
TP5 :
en tant que Compilateur
Lancez l’exécution de l’application :
Menu Déboguer > Exécutez sans débogage ou CTRL+F5
dans le coin bas gauche de Visual Web Developer, il est indiqué « début de la
génération… » puis « la génération a réussi ». Il y a donc bien eu une phase de
COMPILATION de projet.
dans la zone de notification de la barre de tâches de Windows XP, vous
constatez que Visual Web Developer a lancé une instance du serveur de test pour vous permettre de tester l’application.
Attention :
ce mini serveur web comporte quelques limitations et n’est proposé que pour vous donner les moyens de développer et tester vos applications sans IIS dans un premier temps. Par exemple, il ne supporte pas la métabase, il n’a pas la capacité d’envoyer des emails ou il utilise l’identité de l’utilisateur connecté au lieu du compte ASPNET(IIS5) ou NETWORK SERVICE(IIS6) pour s’exécuter
TP5 :
en tant que Compilateur
Pour observer la compilation dynamique dans la suite de l’exercice : ne fermez pas le navigateur et gardez la fenêtre ainsi affichée.
Vous allez maintenant redéplacer le code de réponse au changement de sélection dans la liste déroulante, dans la procédure de réponse au clic sur le bouton Go :
Afficher la page en mode Source
Déplacez le code de ddlRegion_SelectedIndexChanged dans ButGo_Click
Sauvegardez la page. Très important ici !!!
Basculez sur le navigateur encore ouvert sur la page Default.aspx.
Entrez une date, sélectionnez la région N°2 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 déduit qu’il fallait redemander une compilation de celle-ci avant de la
ré-exécuter. C’est le principe dit de la compilation dynamique.
TP5 :
en tant que Débogueur
Pour indiquer au runtime où vous souhaitez faire des pauses dans l’exécution du code, positionnez des points d’arrêt dans les procédures de code
correspondantes :
Positionnez le curseur sur la première ligne de la procédue Page_Load et cliquez
F9 ou directement dans la marge
Faites de même pour Calendar1_SelectionChanged et ButGo_Click.
Lancez l’application en mode débogage :
menu Déboguer > Démarrer le débogage ou F5
Utilisez les boutons de la barre d‟outils Déboguer de Visual Web Developer pour avancer le pointeur d’exécution pas à pas.
Avancez pas à pas avec F10 jusqu’au premier passage dans la boucle d’exécution
Positionnez la souris sur la variable s et vous obtenez sa valeur dans une bulle d’information
Faites de même sur le contrôle ddlRegion et cliquez sur le signe + pour avoir le détail de cet objet d’un type un peu plus complexe qu’une simple String.
ACCÉDER À DES DONNÉES
TP6
TP6 :
Accéder à des données
Introduire les principes de base de l’accès aux données dans une page ASP.NET.
Remplacer la table html de résultat par une grille de données en utilisant le nouveau contrôle GridView d’ASP.NET.
Brancher sur le clic du bouton Go une véritable recherche sur une base de données SQL Server Express via une procédure stockée. La recherche doit s’effectuer à partir de la région sélectionnée et de la date qui sont les
paramètres de la procédure stockée utilisée.
Vous allez travailler avec une base de données existante de type SQL Server, appelée AffairesSansRisque
Contexte fonctionnel Objectif
TP6 :
Se connecter à une source de données
Ajoutez un nouveau dossier dans votre application web appelé App_Data :
Faites un clic droit sur la racine du projet dans l’Explorateur de solutions > Ajouter le
dossier ASP.NET> App_Data.
Récupérez la base de données existante dans le dossier projet
Faites un glisser déplacer des fichiers
AffairesSansRisque_Data.mdf et
AffairesSansRisque_Data_log.ldf vers le dossier
App_Data.
Utilisez l’Explorateur de bases de données de Visual Web Developer :
Double cliquez sur le fichier AffairesSansRisque_Data.mdf
dans l’Explorateur de Solutions pour basculer
automatiquement dans l’Explorateur de bases
de données de VWD.
Consultez les différents objets de la base de données via leur menu contextuel.
TP6 :
Se connecter à une source de données
La base contient entre autres :
une table Annonces avec la liste des annonces publiées sur le site.
et une procédure stockée nommée RechercherAnnonce permettant de retrouver toutes les annonces d’une région donnée au-delà d’une certaine date. Pour tester la procédure stockée, faites un clic droit sur la procédure > Exécuter.
TP6 :
Se connecter à une source de données
Vous pouvez créer d’autres connexions à des sources de données
quelconques, indépendamment de votre projet, en faisant un clic droit à la racine de l’explorateur > Ajouter une connexion.
Faites un clic droit sur la table Annonces > Afficher les données de la table
pour vérifier que la source de données contient déjà des annonces publiées.
TP6 :
Afficher des données
Ouvrez la page Default.aspx en mode Source.
Supprimez la table html d’id tblResultat et le code de la procédure
ButGo_Click.
Basculez en mode Design.
Configurez une source de données vers la table Annonces de la base
AffairesSansRisque :
Faites un glisser déplacer à l’intérieur de la balise <div class=resultat> de la Boîte à outils > rubrique Données > SqlDataSource.
Aidez-vous du mini navigateur pour être bien positionné
TP6 :
Afficher des données
Ouvrez la page Default.aspx en mode Source.
Supprimez la table html d’id tblResultat et le code de la procédure
ButGo_Click.
Basculez en mode Design.
Configurez une source de données vers la table Annonces de la base
AffairesSansRisque :
Faites un glisser déplacer à l’intérieur de la balise <div class=resultat> de la Boîte à outils > rubrique Données > SqlDataSource.
Faites un clic droit sur le contrôle > Propriétés et renommez le contrôle :
dsAnnonces.
Sélectionnez le contrôle pour faire apparaître sa balise active (ou clic droit sur le contrôle > Afficher la balise active).
Cliquez Configurer la source de données
TP6 :
Afficher des données
Dans la fenêtre Choisir votre connexion de données, cliquez la liste déroulante et retrouvez la connexion définie à l’exercice précédent :
AffairesSansRisque_Data.mdf.
Cliquez sur Chaîne de connexion pour observer la chaîne de connexion associée :
Vous voyez que la Source est le moteur SQL Server Express Edition .\SQLEXPRESS car SQL Express s’installe par défaut comme une instance nommée sur la machine
TP6 :
Afficher des données
Dans la fenêtre Enregistrer la chaîne de connexion dans le fichier de configuration de
l‟application, cliquez Oui, enregistrer cette connexion en tant que et renommez la chaîne :
csAffairesSansRisque
Cliquez sur Suivant.
Dans la fenêtre Configurer l‟instruction Select, cliquez Spécifiez une instruction SQL personnalisée ou une procédure stockée.
Cliquez sur Suivant.
TP6 :
Afficher des données
Dans la fenêtre suivante, sélectionnez Procédure Stockée et choisissez la procédure nommée RechercherAnnonce.
TP6 :
Afficher des données
configurez successivement les deux paramètres attendus par la procédure stockée, correspondant à l’ID de la région et la date sur lesquels porte la recherche. Pour cela, sélectionnez une source de type Control et indiquez l’ID de la liste déroulante ddlRegion pour le paramètre pRegion et l’ID de
la textbox txtDate pour le second paramètre pDate.
Cliquez sur Suivant.
TP6 :
Afficher des données
Dans la fenêtre Tester la requête, cliquez le bouton Tester la requête
pour la valider. Saisissez par exemple 19 comme ID de région
correspondant à la région Ile de France, et 01/01/2006 dans le paramètre date. Cliquez OK pour lancer le test d’exécution de la procédure stockée. Cliquez sur Terminer.
TP6 :
Afficher des données
Dessinez maintenant une grille pour afficher la liste des annonces :
Faites un glisser déplacer de la boîte à outils > rubrique Données > contrôle
GridView à l’intérieur de la balise <div.resultat#resultat>.
Affichez la balise active du contrôle GridView. Cochez les options
Activer la pagination, Activer le tri, Activer la sélection.
TP6 :
Afficher des données
Dans la balise active du contrôle GridView, cliquez Modifier les colonnes…
Dans la fenêtre Champs, supprimez tous les champs SAUF Ville, Code Postal, Email et le champ Sélectionner.
Les champs Ville, Code Postal et Email sont de type BoundField, c’est-à-dire que ce sont des colonnes directement liées à des champs dans la base de
données. La liaison se fait à partir de l’attribut DataField qui donne le nom du champ de la table Annonces dans la base de données
Sauvegardez la page Default.aspx et exécutez-la (clic droit > afficher dans le navigateur).
Cliquez sur la région Rhône-Alpes, entrez la date 01/01/2006 puis cliquez sur
TP6 :
Afficher des données
2010/2011 ASP.NET 89
Renommez les en-têtes de chaque colonne.
Changez l’ordre des colonnes avec les boutons.
Bouton pour supprimer les colonnes
sélectionnées. Notez les types de
TP6 :
Afficher des données
Vous pourriez même charger la liste déroulante à partir de la table
Regions de la base de données AffairesSansRisque au lieu de la charger à partir du fichier texte Liste des régions.txt
ajouter un autre contrôle SqlDataSource sur la page, qui pointe
toujours sur la même chaîne de connexion que précédemment, c’est-à-dire csAffairesSansRisque.
Configurez le contrôle pour qu’il rapatrie toutes les régions de la base via une requête SELECT.
Terminez l’assistant en effectuant un test si besoin.
Nommez-le dsRegions en utilisant la fenêtre de propriétés (F4) du contrôle SqlDataSource.
Liez le contrôle DropDownList1 sur cette source de données
dsRegions en utilisant le menu Choisir la source de données de la balise active du contrôle.
