Académique Documents
Professionnel Documents
Culture Documents
Objectifs
2010/2011 ASP.NET 2
Qu’est ce que .NET ?
Caractéristiques
2010/2011 ASP.NET 3
2010/2011 ASP.NET 4
Framework .net
Le Framework
• Compilation du code MSIL vers le code natif machine : JIT Compiler (Just In
Time), Pré JIT possible.
2010/2011 ASP.NET 5
Support des standards
Support des standards
• WDSL (Web Services Description Language), format XML utilisé pour décrire
les services d’un réseau.
2010/2011 ASP.NET 6
Les langages
Les langages
• C#, VC++, VB.net, Jscript, Perl, Small Talk, Cobol, Fortan, Delphi…
Le C#
2010/2011 ASP.NET 7
ASP . NET
Qu’est ce qu’ASP.net ?
• 3 types de pages : ASPx, ASMx (assembly) pour les Web services, ASCx
(control) pour les contrôles utilisateurs.
• Les Pages ASP.net sont compilés et exécuté par la CLR : code managé,
possibilité de « tracing » et de « debugging ».
2010/2011 ASP.NET 8
ASP . NET
Les contrôles serveurs
2010/2011 ASP.NET 9
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
2010/2011 ASP.NET 10
Asp.net
<%@ Page Language="c#" %>
<HTML> <BODY>
du code C#
<H1>Table des factorielles</H1>
<%
int i,fact;
for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) {
Response.Write( i + "! =" + fact + "<BR>" ); résultat = HTML
} généré via l'objet
%> prédéfini Response
</BODY> </HTML
2010/2011 ASP.NET 11
Asp.net
Philosophie 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
2010/2011 ASP.NET 12
Contrôles
Les 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
Classe / Objet
2010/2011 ASP.NET 13
TP1
CRÉER UN PREMIER
FORMULAIRE DYNAMIQUE
2010/2011 ASP.NET 14
TP1 : Créer un premier formulaire dynamique
Objectif
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.
Contexte fonctionnel
2010/2011 ASP.NET 15
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>
</html>
2010/2011 ASP.NET 16
TP1 : étape2
rendre la page un formulaire interactif
Ajoutez une balise <form> à la page
Elle contient les zones de saisie de l’utilisateur dont les données devront être
envoyées sur le serveur.
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 !
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 contrôles de sélection/saisie et un bouton de soumission
Contrôle de sélection
<div class="region"> Contrôle de saisie et bouton de
<h3>Région: </h3> soumission
<SELECT name="ddlRegion">
<OPTION VALUE="1"> Rabat </OPTION> <div class="date">
<OPTION VALUE="2"> Casa </OPTION> <h3>Date: </h3>
<OPTION VALUE="3"> Kenitra </OPTION> <input name="txtDate” type="text"/>
<OPTION VALUE="4"> Sale </OPTION> <input name="btnGo” type="submit”
<OPTION VALUE="5"> Ouajda </OPTION> value="Go" />
<OPTION VALUE="6"> Fés </OPTION> </div>
<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 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.
2010/2011 ASP.NET 20
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).
<SELECT name="ddlRegion">
<SELECT name="ddlRegion" runat="server" id="ddlRegion">
<div class="resultat">
<div class="resultat" runat="server" id="resultat">
2010/2011 ASP.NET 21
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.
et doté d’évènements qui sont déclenchés en général par des actions de l’utilisateur sur le
contrôle
2010/2011 ASP.NET 22
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 »,
un évènement ServerClick qui est déclenché lorsque l’utilisateur clique sur le bouton.
Dans le cas présent, nous allons indiquer au serveur le langage de votre choix, en
utilisant l’attribut Language :
2010/2011 ASP.NET 23
TP1 : étape4
ajouter un traitement à la page
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
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
<%
If Not txtDate.Value = "" Then
resultat.InnerHtml = "Résultat de la recherche pour le " & txtDate.Value
End If
%>
Code C#
<%
if (txtDate.Value != "")
{
resultat.InnerHtml = "Résultat de la recherche pour le " + txtDate.Value;
}
%>
2010/2011 ASP.NET 25
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.
2010/2011 ASP.NET 26
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
<%
txtDate.Value = DateTime.Now.ToShortDateString()
%>
Code C#
<%
txtDate.Value = DateTime.Now.ToShortDateString() ;
%>
2010/2011 ASP.NET 27
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
<%
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
%>
Code C#
<%
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;
}
%>
ddlRegion est un contrôle de type HtmlSelect et 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é SelectedIndex du contrôle.
2010/2011 ASP.NET 28
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".
2010/2011 ASP.NET 29
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).
2010/2011 ASP.NET 30
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)
<%
„..‟
If ddlRegion.SelectedIndex = 2 Then
2010/2011 ASP.NET 32
TP2
COMPRENDRE LA
PROBLÉMATIQUE DE
GESTION D‟ÉTAT
2010/2011 ASP.NET 33
TP 2 : Comprendre la problématique de
gestion d‟état
Objectif
texte régions.txt.
2010/2011 ASP.NET 34
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
2010/2011 ASP.NET 35
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
<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 déroulante
Programmez le chargement dynamique de la liste déroulante :
Commencez par supprimer les options de l’élément SELECT
<SELECT name="ddlRegion" runat="server" id="ddlRegion">
</SELECT>
Ajoutez le code de lecture du fichier texte et de chargement de la liste déroulante
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 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>
2010/2011 ASP.NET 37
Tp2 :
lecture de la liste déroulante
Code C#
2010/2011 ASP.NET 38
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.
2010/2011 ASP.NET 39
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
Ce champ est transporté entre le navigateur et le serveur web d’un post back à
l’autre
2010/2011 ASP.NET 40
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 :
2010/2011 ASP.NET 41
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
2010/2011 ASP.NET 42
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
<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>
2010/2011 ASP.NET 43
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>
2010/2011 ASP.NET 44
TP3
UTILISER LE MODÈLE
ÉVÈNEMENTIEL
2010/2011 ASP.NET 45
TP 3 :
Utiliser le modèle évènementiel
Objectif
Comprendre l’approche évènementielle de la programmation avec ASP.NET 2.0.
Contexte fonctionnel
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.
Principe
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
Les évènements sont associés à des contrôles, mais également à la page elle-même
2010/2011 ASP.NET 46
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:
…
<input name="btnGo" type="submit" value="Go" onserverclick="btnGo_ServerClick" runat="server" />
…
2010/2011 ASP.NET 47
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
</script>
2010/2011 ASP.NET 48
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.
2010/2011 ASP.NET 50
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
…
<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="true"
onserverchange="ddlRegion_ServerChange"></SELECT>
…
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
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
</script>
2010/2011 ASP.NET 52
TP 3 :
Utiliser le modèle évènementiel
Code C#
public void Page_Load() {…}
protected void btnGo_ServerClick(object sender, EventArgs e) { }
2010/2011 ASP.NET 53
TP4
COMPRENDRE L‟APPROCHE
COMPOSANT
2010/2011 ASP.NET 54
TP 4 :
Comprendre l‟approche composant
Objectif
Contexte fonctionnel
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
TP 4 :
Comprendre l‟approche composant
Principe
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
2010/2011 ASP.NET 56
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
<div class="recherche">
<div class="region">…</div>
<div class="date">…</div>
<div class="date">
</div>
</div>
Ajoutez un contrôle <asp:Calendar> suivi d’un saut de ligne (br):
<div class="date">
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<br />
</div>
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
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 />
</div>
2010/2011 ASP.NET 58
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 OnSectionChanged et en lui donnant le
nom de la procédure de réponse à l’évènement, par exemple Calendar1_SelectionChanged:
2010/2011 ASP.NET 59
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 :
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 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.
2010/2011 ASP.NET 60
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
<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>
2010/2011 ASP.NET 61
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:
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
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
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
2010/2011 ASP.NET 64
TP 5 :
Utiliser Visual Web Developer
Objectif
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.
2010/2011 ASP.NET 66
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.
2010/2011 ASP.NET 67
TP 5 :
Utiliser Visual Web Developer
Sauvegardez et exécutez la page par un clic droit sur la page en mode source ->
Afficher dans le navigateur.
2010/2011 ASP.NET 68
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é.
2010/2011 ASP.NET 69
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.
Testez la vérification du champ obligatoire si vous ne saisissez aucune date
2010/2011 ASP.NET 70
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.
2010/2011 ASP.NET 71
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
2010/2011 ASP.NET 72
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.
2010/2011 ASP.NET 73
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.
Cliquez F5. La fenêtre s’affiche dans le navigateur.
2010/2011 ASP.NET 74
TP6
2010/2011 ASP.NET 75
TP6 :
Accéder à des données
Objectif
Introduire les principes de base de l’accès aux données dans une page
ASP.NET.
Contexte fonctionnel
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
2010/2011 ASP.NET 76
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.
2010/2011 ASP.NET 77
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.
2010/2011 ASP.NET 78
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.
2010/2011 ASP.NET 79
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.
2010/2011 ASP.NET 80
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
2010/2011 ASP.NET 81
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
Cliquez sur Suivant.
2010/2011 ASP.NET 82
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.
2010/2011 ASP.NET 83
TP6 :
Afficher des données
Dans la fenêtre suivante, sélectionnez Procédure Stockée et choisissez la
procédure nommée RechercherAnnonce.
Cliquez sur Suivant.
2010/2011 ASP.NET 84
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.
2010/2011 ASP.NET 85
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.
2010/2011 ASP.NET 86
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.
2010/2011 ASP.NET 87
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
Go.
2010/2011 ASP.NET 88
TP6 :
Afficher des données
2010/2011 ASP.NET 89
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.
2010/2011 ASP.NET 90
TP6 :
Afficher des données
Paramétrez l’affichage de la liste déroulante sur le champ Reg_Nom et
indiquer Reg_Id comme étant la donnée à prendre en compte pour la
liaison avec la source de données.
Mettez en commentaire le chargement de la liste à partir du fichier texte
dans la procédure Page_Load.
Enregistrez, exécutez puis testez la page.
2010/2011 ASP.NET 91
TP7
MASTER PAGE
2010/2011 ASP.NET 92
TP 7:
Master page
Objectif
Créer une page maître qui servira de modèle aux pages de contenu du site.
Créer des pages de contenu qui héritent de la page modèle.
Contexte fonctionnel
2010/2011 ASP.NET 93
TP 7:
Master Page
Atelier 1
Une page maître est un fichier ASP.NET possédant l'extension .master (*)
La page maître est identifiée par une directive @ Master
ContentPlaceHolder
Définit relative une région pour le contenu dans une page maître ASP.NET.
Placer là où vous souhaitez que le contenu soit modifiable
2010/2011 ASP.NET 94
TP 7:
Création de page Maitre
Chemin de navigation
Espace membre
Menu privé
Zone dynamique modifiable par les pages enfants
Services
Pied de page
2010/2011 ASP.NET 95
TP 7:
Création d'une master page
Créez un nouveau site web : Fichier -> nouveau -> Site Web
2010/2011 ASP.NET 96
TP 7:
Création d'une master page
2010/2011 ASP.NET 97
TP 7:
Création d'une page de contenu
Modifiez la directive @Page pour indiquer au runtime que votre page hérite maintenant de la
page Maître MasterPage.master :
Ajoutez l’attribut MasterPageFile et pointez sur l’url de la page Maître.
Dans une page enfant, cette zone de contenu dynamique est un contrôle
<asp :Content> qui est relié à un contrôle ContentPlaceHolder parent par
l’attribut ContentPlaceHolderID
2010/2011 ASP.NET 98
TP 7:
Créer une nouvelle page de contenu Webform
Atelier 2
créer une nouvelle WebForm, et de cocher la case "Select master page ", à
l'étape suivante Visual Studio va vous demander de sélectionner la master
page à utiliser avec cette WebForm
2010/2011 ASP.NET 99
TP 7:
Créer une nouvelle page de contenu Webform
Dans MaPageMaitre.Master :
Ajouter un LableDePageMaitre à l’extérieur des ContentPlaceHolder
<div>
<asp:Label ID="LabelDePageMaitre" runat="server" Text="Label">
</asp:Label>
</div>
Permettre la modification
Activer la suppression
Activer la insertion
Activer la pagination
Objectif
Cette fois c’est d’avoir l’affichage dans une page et l’insertion dans une autre
Activer la insertion
Exécutez
OnItemInserted="DetailsView1_InsertMql"
OnItemCommand="DetailsView1_CancelMql "
Un menu sur le côté gauche de l’écran qui permet de naviguer dans les
services du site.
Le même menu dans le pied de page, qui permet d’avoir un lien sur tous les
services à la fin de la lecture d’une page (sans avoir besoin de refaire
défiler la page jusqu’à son sommet pour refaire apparaître le menu gauche).
Un plan de site est un fichier XML qui décrit la collection de nœuds du menu de
votre application.
Il doit y avoir un nœud principal incluant des sous nœuds pour les sous menus.
1. Le contrôle TreeView:
Propriétés:
Les attributs ExpandImageUrl et CollapseImageUrl du contrôle TreeView
pour afficher des images de votre choix lorsqu’un menu contient des sous
menus.
L’attribut NoExpandImageUrl donne l’image affichée pour toutes les options
de menus n’ayant pas de sous niveau.
Pour choix de
la forme de
menu
Lorsque vous cliquez sur l’un des éléments du menu, vous observez le
chemin de la page correspondante donné par le contrôle.