ASP.NET Cours Complet
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail
Développer des composants serveur
DIRECTION RECHERCHEET INGENIERIEDE FORMATION
SECTEUR NTIC
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail
DIRECTION RECHERCHEET INGENIERIEDE FORMATION
SECTEUR NTIC
Sommaire
1.1. Principes
L'interaction Client / Serveur est la base principale des applications web. Il est donc très important de bien comprendre le principe de fonctionnement d' dans l'environnement DotNet avec le serveur IIS.
Un petit schéma très simplifié vous aidera peut être à y voir plus clair :
Voici donc ce qui se passe lorsque vous, utilisateur désirant naviguer sur une page web, générez comme action si l'application que vous désirez atteindre est développée en 2.0 :
• 1 = vous tapez une url dans votre navigateur et donc, envoyez une requête pour une page aspx d'un client web vers le serveur IIS
• 2 = la requête est analysée et le traitement est transféré au runtime, un processus est créé pour exécuter l'application
• --> S'il s'agit de la première exécution du code de cette page, le compilateur JIT (Just In Time) compile le code en binaire natif et le stoque en mémoire.
• --> Si ce n'est pas la première exécution, le code binaire est chargé depuis le cache.
• 3 = ce code binaire est exécuté puis renvoyé vers le serveur IIS
• 4 = IIS renvoie la réponse sous la forme de code HTML strict vers l'utilisateur. Ce code HTML est affiché dans votre navigateur.
1.2. Environnement de développement
1.2.1. Un serveur Web
Puisque nous allons créer du code utilisant une liaison Client / Serveur, il est bien entendu nécessaire d'avoir un serveur à disposition dans notre cas, Nous allons utiliser le serveur IIS.
IIS est disponible avec windows XP professionnel et windows 2003 server Sous XP Home, il n'est pas aisé d'installer IIS, bien que cela soit possible.
1.2.2. Framework 2.0
Si framework .NET n'a pas été installé après le serveur IIS, vous aurez des problèmes d'exécution des pages aspx.
Pour remédier à cet inconvénient à postériori, vous pouvez exécuter une commande du type :
C:\Windows\\Framework\\ -i ou xx est la version du Framework 2.0 présente sur votre ordinateur.
1.2.3. Un EDI, c'est nécessaire ?
Nous avons tous l'habitude de travailler dans un environnement de développement intégré bien que cela ne soit pas toujours nécessaire mais plutôt bien pratique. Il en est de même avec le développement . Vous pouvez, comme pour des applications Winforms, écrire du code dans un éditeur de texte. Voici, en quelques étapes, la réalisation et l'exécution d'une page aspx créée avec le bloc-note :
Créez un site virtuel sur votre IIS et nommez-le, par exemple, "PremierePage". Si vous n'avez jamais réalisé cette opération, voici comment procéder :
a. Allez dans le panneau de contrôle de Services Internet (IIS) : Outils d'administration dans le panneau de configuration puis choisissez
Internet Informations Services
b. Déroulez les options jusqu'à trouver Site Web par défaut et faites un
clic droit
c. Choisissez Nouveau -> Répertoire virtuel
d. Créez votre répertoire
Voici en images et sur XP Pro en anglais les étapes décrites ci-dessus :
Terminer votre création en laissant les paramètres par défaut.
Ouvrez le bloc-notes et créez un fichier avec ce code :
%>.
|
Sauvegardez-le à la racine du site que vous avez créé en le nommant par exemple "".
Exécutez cette page aspx dans votre navigateur en tapant son adresse dans la barre de navigation : et vous devez avoir une page web comme suit :
Vous venez donc de créer votre première page s'exécutant sur un serveur IIS sans avoir ouvert Visual Studio comme support de programmation.
1.3. La gestion d’Etat
1.3.1. Première page
Enfin ! Un petit exemple en utilisant Visual Studio ou Visual Web Développer pour se familiariser avec l'environnement . Si vous êtes familier avec le "designer" des applications Visual Studio ou Visual Express Edition, ceci vous paraîtra très simple mais on se permet tout de même de détailler un peu l'interface pour ceux qui abordent ce thème pour la première fois.
Reprenons notre EDI et, après avoir bien configuré les données au niveau du serveur et du nom de l'application, l'interface doit maintenant ressembler à ceci :
Vous pouvez remarquer que l'interface des applications diffère des applications Winforms mais nous y retrouvons quand même pas mal de points communs, notamment :
l'explorateur de solution contenant notre projet "WebApp", sa localisation "http://localhost/WebApp" et la page par défaut "", que nous pouvons bien évidemment renommer.
les propriétés des contrôles et pages grâce auxquelles nous allons pouvoir définir des comportements graphiques ou autres. la page de code où une partie de codage est générée automatiquement par l'environnement de développement. deux boutons "design" et "source" nous permettant de passer aisément d'un mode à l'autre dans notre page aspx. Remarquez aussi que, si vous déplacez votre curseur dans la partie code, à droite du bouton "source", vous apercevez l'endroit exact où se situe le curseur dans l'arborescence des balises HTML. la boite à outils, ancrée ou non, contenant les contrôles utilisables pour votre application web :
Passons maintenant en mode "design". Faites glisser sur la page les contrôles suivant et changez leurs propriétés en suivant le tableau ciaprès :
Contrôle | Propriété Contenu | |
Un "label" : Label1 | Text | "Nom :" |
Un "textbox" à droite de Label1 : TextBox1 | BorderWidth | 2 |
Un "button" sous Label1 : Button1 | Text | "Cliquez" |
Un "label" sous le bouton : Label2 | Text | "Bonjour" |
Remarque : dans la propriété BorderWidth, par défaut, l'unité de mesure est en "px" (pixel). Cela correspond bien aux normes HTML. Votre page doit ressembler à ceci :
Si vous retournez en mode "source", vous constatez que le code HTML s'est enrichi automatiquement des contrôles que vous avez intégrés à votre page ainsi que des propriétés modifiées via la page de propriétés. Rien ne vous empêche, au fil de l'expérience acquise dans le développement , de taper immédiatement le code de vos contrôles dans la page HTML, vous verrez que le "design" se met aussi à jour de la même manière. L'avantage de coder directement dans l'HTML se trouve dans le libre choix que vous avez du type de contrôle placé. Par exemple, vous voyez dans notre application que le TextBox1 est considéré comme un "asp:textbox" ce qui, niveau exécution du code prend plus de place et de temps qu'un simple "asp:inputbox" alors que le résultat, ici, est exactement le même. Pour les utilisateurs avertis ayant déjà réalisé des sites web en HTML, il peut aussi être plus aisé de coder directement dans la page source.
A ce point, nous avons des contrôles placés sur une page aspx, mais encore aucune action n'est définie. Vous avez beau taper un nom dans "TextBox1" et cliquer sur le "Button1", rien ne se passe. En effet, il faut associer un événement au bouton "Cliquez". Pour ce faire, double-cliquez sur le bouton en mode design et l'environnement de développement va créer une méthode associée à l'événement "Click" du bouton :
Remarquez qu'une nouvelle page est apparue "" qui contient le code associé aux méthodes et événements. Dans votre événement "Button1_Click", tapez cette ligne :
& " " &
Vous verrez en cours de frappe que l'aide à la complétion existe aussi, exactement comme dans les applications winforms. Maintenant, vous pouvez exécuter votre page aspx (F5). Lors d'une première exécution vous allez certainement obtenir ce message :
Par défaut, le débogage n'est pas activé au niveau des applications web. On vous conseille fortement de l'activer en répondant OK avec la première option cochée.
Ensuite, testez en tapant un nom et en cliquant sur votre bouton. Prenons un peu le temps de voir le code HTML de la page exécutée :
Vous constatez que des champs cachés ont été générés. Le champ nommé _VIEWSTATE contient toutes les informations d'état des contrôles de la page. Il est intéressant car est accessible par le programmeur et peut contenir des données internes aux pages. Cette notion de conservation de données sera développée plus loin dans ce tutoriel.
1.3.2. Des événements particuliers
En tant que programmeur, nous sommes pratiquement tous habitués à entendre parler d'événements, nous venons encore de nous en servir dans notre première petite application. Nous connaissons ceux liés à une action comme "click", répondant à une action sur la souris. possède le même genre d'événements mais, certains sont assez particuliers et très importants pour le déroulement et le contrôle de ce genre d'application.
Evénement | Description |
Application_Start | Exécuté lors du premier appel à une page du site depuis le démarrage de IIS |
Application_End | Appelé lorsque l'application se termine, cela ne signifie pas que IIS s'arrête mais est d'office appelé si, pour une raison quelconque IIS est arrêté |
Evénement | Description |
Session_Start | appelé lors de chaque nouvelle session d'un navigateur client |
Session_End | fin de session : lors d'un timeout ou lors d'une destruction explicite (Session.Abandon()) via un lien "Log Out" par exemple |
Il faut aussi savoir qu'une session peut stocker ses données en mode "InProc" (dans le process en mémoire) ou en mode "Sql " (dans une BD
SqlServer) via la base de données "AspNetState".
Application et Session sont des notions très importantes en . Elles jouent en effet un rôle très actif au niveau de la vie d'un site et, notamment, au niveau de la pérénité des données véhiculées dans le site lui-même.
Un petit schéma pour mieux visualiser la différence entre "Application" et "Session" :
Soit trois utilisateurs U1, U2 et U3 qui envoient une requête vers le serveur IIS. Il y aura un seul objet "Application" commun à tous les utilisateurs du site mais trois objets "Session" correspondant chacun à un utilisateur précis.
Si U2 quitte son poste de travail sans couper son navigateur :
• s'il n'y a pas de timeout, les autres utilisateurs peuvent accéder à S2
• S'il y a timeout et que U2 revient visiter le site, une nouvelle session S4 sera créée .
Par contre, si U2 coupe son navigateur, S2, persiste jusqu'à un éventuel timeout ou jusqu'à la fin de l'application
Cet événement génère un appel au serveur. Dans 2.0, la page se rappelle continuellement en déclenchant cet événement. C'est au programmeur de créer les conditions de passage d'une page à l'autre.
• IsPostBack est une propriété de la page booléenne (read-only) qui permet justement d'effectuer ce genre de test.
Par exemple, on l'utilise dans l'événement Page_Load pour éviter de recharger des données persistantes.
• AutoPostBack est une propriété des contrôles qui active le déclenchement d'un aller retour sur le serveur.
Surtout, ne pas s'affoler, ces notions seront reprises maintes fois dans le développement du tutoriel mais sont nécessaires niveau vocabulaire pour évoluer dans la manipulation du code proprement dit.
1.3.3. Les Server Controls
Un petit mot sur les types de contrôles présents dans . Il existe deux jeux de contrôles s'exécutant côté serveur :
Les Web Controls, gérés par des événements, ils ressemblent plus aux objets utilisés dans du développement winforms c'est-à-dire qu'ils possèdent des propriétés ("font", "backcolor", ) facilitant la mise en forme. Ils dépendent de ".WebControls".
Les HTML Controls qui correspondent directement aux balises HTML. Les attributs des balises correspondantes sont accessibles via les propriétés de ces contrôles. Pour faire une analogie avec les "WebControls", ceux-ci ne possèdent qu'une balise "Style" pour la mise en forme, cela est plutôt limitatif.
Ces derniers dépendent eux de ".HtmlControls".
1.3.4. ViewState
Comme dit lors du premier exemple de page aspx, le ViewState, nouveau concept introduit par Microsoft avec , représente l'état de l'ensemble des contrôles d'un page. Les informations sont sauvées sous forme d'un flux sérialisé dans la page HTML et le champ caché _VIEWSTATE permet le transit de ces informations entre le client et le serveur.
Il peut être désactivé au niveau d'un contrôle, au niveau d'une page ou au niveau d'une application en plaçant la propriété EnabledViewState à False.
Le plus intéressant est que le programmeur peut y ajouter ses propres informations sous forme d'objets indexés par une clé de type String. Pour sauvegarder et lire une information, voici comment utiliser le ViewState, par exemple pour modifier un argument dans une requête de sélection :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles If Not IsPostBack Then ViewState("tri") = "nom" ConstruireRequete() End If End Sub Private Sub ConstruireRequete Dim tri As String = CType(ViewState("tri"), String) Dim rq As String = "SELECT * FROM UneTable ORDER BY " & tri End Sub Protected Sub cmdLocalite_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdLocalite.Click ViewState("tri") = "localite" ConstruireRequete() End Sub |
1.3.5. Cookies
Les cookies permettent aux applications Web de stocker des informations spécifiques à l'utilisateur. Par exemple, lorsqu'un utilisateur visite votre site, les cookies peuvent vous servir à stocker ses préférences, ou d'autres informations. Lorsque cet u tilisateur revient visiter votre site Web, l'application peut récupérer les informations stockées précédemment.
§ Exemple de Création de cookie
Dim cookie As HttpCookie Dim UserID As String User = "neo" cookie = New HttpCookie("User") ("User", User) (cookie) |
§ Exemple de Lecture de cookie
Dim cookie As HttpCookie cookie = Request.Cookies("User")
Dim User As String
User= cookie.Value()
§ Détecter si le navigateur supporte les cookies
Dim CoookiesSupported As Boolean = Request.Browser.Cookies
§ Supprimer un cookie
Vous ne pouvez pas supprimer directement un cookie sur l'ordinateur d'un utilisateur. Mais vous pouvez donner au navigateur de l'utilisateur l'ordre de supprimer le cookie en réglant la date d'expiration de ce cookie sur une date révolue. La prochaine fois que l'utilisateur soumettra une demande à une page dans le domaine ou le chemin d'accès où se trouve le cookie, le navigateur jugera que le cookie a expiré et le supprimera.
myCookie.Expires = .AddDays(1D)
1.3.6. Variable de session
"Session" est un objet qui s'utilise un peu comme le ViewState, c'est-àdire avec une clé mais se comporte plutôt comme une table de hachage. Prenons deux pages aspx :
: page dans laquelle nous encodons, par l'intermédiaire d'une TextBox, un nom de société.
: page dans laquelle nous affichons le nom de la société (vous comprenez que le but est d'avoir une page d'affichage de données de société se trouvant par exemple dans une base de données)
Protected Sub cmdAfficheSoc (Byval sender As Object, ByVal e As System.EventArgs) Handles cmdAfficheSoc.Click Session("NomSoc") = Response.Redirect("") End Sub |
Code de la : L'utilisateur introduit un nom de société dans la TextBox nommée "txtNomSoc". Cette information est sauvée en Session avant de passer à la
Protected Sub Page_Load (Byval sender As Object, ByVal e As System.EventArgs) Handles If Session("NomSoc") IsNot Nothing Then = CType(Session("NomSoc"), String) Else Response.Write("Aucune société n'a été choisie !") End If End Sub |
Code de la : Un test est effectué pour savoir si la variable de session contient bien une donnée. Celle-ci est affichée en passant par un transtypage.
Il est évident que cet exemple est très simpliste et que l'objet Session permet bien d'autres utilisations. Voici quelques points liés à l'objet Session (liste non exhaustive) :
• Initialisation de l'objet Session : événements Session_Start et
Session_End déclenchés par le serveur et accessibles via le fichier
• Expiration de la session
• Session avec ou sans cookies
• Session sécurisée
1.3.7. Variable d'application
La grande différence avec l'objet Session se situe dans le fait qu'un objet Application conserve des données pour l'ensemble des utilisateurs d'un même site web. Il s'utilise de la même manière que l'objet Session.
Protected Sub Page_Load (Byval sender As Object, ByVal e As
System.EventArgs) Handles
Dim cpt As Integer = 0
()
If Application("Compteur") IsNot Nothing Then cpt = CType(Application("Compteur"), Integer) End If cpt = cpt + 1
Application("Compteur") = cpt Application.UnLock()
= "Page vue : " & cpt & " fois."
End Sub
L'objet Application étant commun à tous les utilisateurs du site, il est préférable de bloquer l'accès lors de l'écriture et, bien entendu, de ne pas oublier l'action inverse.
1.3.8. L'objet Cache
Comme l'objet Application, il conserve aussi des données accessibles à tous les utilisateurs mais il possède quelques avantages non négligeables:
• Gestion interne de locking
• Plus rapide
• Gestion des dépendances
En ce qui concerne les dépendances, on peut en citer quelques-unes très succinctement car ce genre de programmation demanderait presque un tutoriel à elle toute seule !
? Dépendances de temps : permet de faire expirer automatiquement une donnée à une date/heure absolue
• Dépendances fichiers : le serveur d'application peut mettre à jour des données lorsque cells-ci sont modifiées dans le fichier associé
• Dépendances SQL : sous SqlServer 2000 et 2005. Agit de la même manière avec une base de données grâce au "poling" (interrogation du serveur vers la BD).
• le callback : association d'une procédure qui est rappelée, non pas dès que la donnée est supprimée mais à la prochaine exécution de la page qui contient la procédure
1.3.9. Caching (ou cache HTML)
Un autre aspect de la mise en cache des données suivant diverses méthodes. Ici aussi, il serait trop long d'étendre leur mode d'utilisation.
• Cache de sortie (output cache) : prend un "copie" instantanée du flux HTML puis supplante toute action de requête en imposant sa "copie" gardée en cache
• substitution : ce contrôle permet de ne pas mettre en cache une partie de la page même si le cache est activé
• profils de cache : peuvent être créés dans le Web.Config et associé par leur nom aux pages qui en ont besoin
• fragments de cache : fonctionne comme le cache de sortie mais donne la possibilité au programmeur de ne mettre en cache qu'une partie de la page HTML. Le frament caching peut se faire grâce aux usercontrols qui disposent eux-mêmes d'une directive Output
1.3.10. QueryString
QueryString permet de faire passer des informations via l'URI d'une page à une autre.
En reprenant l'exemple d'un ID de société sélectionné dans une page dont les données sont présentées dans une autre page, on aurait très bien pu indiquer cet ID via l'URI lors de l'appel à la deuxième page.
Vous avez choisi la société ayant un ID = 1235, voici comment passer l'identifiant à la page suivante :
Pour récupérer l'ID dans la seconde page, il vous suffira de coder comme suit :
Vous avez choisi la société : &
Request.QueryString("idsoc")
Vous comprenez maintenant le pourquoi de certaines url complexes du genre : ? id=1257&lng=fr&action=del&
1.4. Contrôles utilisateur
Il peut arriver que vous ayez besoin dans un contrôle de fonctionnalités dont les contrôles serveur Web intégrés ne disposent pas. Vous pouvez alors créer vos propres contrôles. Pour ce faire, vous disposez de deux options : Vous pouvez créer :
o Des contrôles utilisateur. Les contrôles utilisateur sont des conteneurs dans lesquels vous pouvez placer des balises et des contrôles serveur Web. Vous pouvez ensuite traiter le contrôle utilisateur comme une unité et lui assigner des propriétés et des méthodes.
o Des contrôles personnalisés. Un contrôle personnalisé est une classe que vous écrivez et qui dérive de Controlou de WebControl.
Les contrôles utilisateur sont beaucoup plus faciles à créer que les contrôles personnalisés, dans la mesure où vous pouvez réutiliser des contrôles existants. Il est donc particulièrement facile de créer des contrôles comportant des éléments d'interface utilisateur complexes. Cette rubrique fournit une vue d'ensemble de l'utilisation des contrôles utilisateur .
1.4.1. Structure de contrôle utilisateur
Un contrôle Web ressemble à une page complète (fichier .aspx), avec à la fois une page d'interface utilisateur et du code. Un contrôle utilisateur se crée de façon très semblable à une page . On lui ajoute par la suite le balisage et les contrôles enfants nécessaires. Tout comme une page, un contrôle utilisateur peut inclure du code servant à manipuler son contenu, et notamment à effectuer des tâches telles que des liaisons de données.
Un contrôle utilisateur présente les différences suivantes par rapport à une page Web :
• L'extension du nom de fichier du contrôle utilisateur est .ascx.
• Au lieu d'une directive @ Page, le contrôle utilisateur contient une directive @ Controlqui définit la configuration et d'autres propriétés.
• Les contrôles utilisateur ne peuvent pas s'exécuter comme des fichiers autonomes. Vous devez au lieu de cela les ajouter à des pages , comme vous le feriez pour n'importe quel contrôle.
• Le contrôle utilisateur ne contient pas d'élément htmlbody ou form. Ces éléments doivent se trouver dans la page d'hébergement.
Vous pouvez utiliser sur un contrôle utilisateur les mêmes éléments HTML (sauf les éléments html, body ou form) et les mêmes contrôles Web que dans une page Web . Par exemple, si vous créez un contrôle utilisateur afin de l'utiliser comme barre d'outils, vous pouvez placer dessus une série de contrôles serveur Web Buttonet créer des gestionnaires d'événements pour les boutons.
L'exemple suivant montre un contrôle utilisateur qui implémente un contrôle Spinner dans lequel les utilisateurs peuvent cliquer à leur guise sur des boutons pour naviguer dans une série de choix au sein d'une zone de texte.
Protected colors As String() = {"Red", "Green", "Blue", "Yellow"} Protected currentColorIndex As Integer = 0 Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) If IsPostBack Then currentColorIndex = CInt(ViewState("currentColorIndex")) Else currentColorIndex = 0 DisplayColor() End If End Sub Protected Sub DisplayColor() = colors(currentColorIndex) ViewState("currentColorIndex") = currentColorIndex.ToString() End Sub Protected Sub buttonUp_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If currentColorIndex = 0 Then currentColorIndex = colors.Length - 1 Else currentColorIndex -= 1 End If DisplayColor() End Sub Protected Sub buttonDown_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If currentColorIndex = colors.Length - 1 Then currentColorIndex = 0 Else currentColorIndex += 1 End If DisplayColor() End Sub
|
ReadOnly="True" />
Text="^" OnClick="buttonUp_Click" />
1.4.2. Ajout d'un contrôle utilisateur à une page
Pour utiliser un contrôle utilisateur, vous devez l'inclure dans une page Web . Lorsqu'une demande est soumise concernant une page et que cette page contient un contrôle utilisateur, celui-ci passe par toutes les étapes du traitement qu'effectuent tous les contrôles serveur .
1. Dans la page Web conteneur, créez une directive @ Registercomprenant :
• Un attribut TagPrefix, qui associe un préfixe au contrôle utilisateur. Ce préfixe sera inclus dans la balise d'ouverture de l'élément du contrôle utilisateur.
• Un attribut TagName, qui associe un nom au contrôle utilisateur. Ce nom sera inclus dans la balise d'ouverture de l'élément du contrôle utilisateur.
• Un attribut Src, qui définit le chemin d'accès virtuel au fichier contrôle utilisateur que vous incluez.
2. Dans le corps de la page Web, déclarez l'élément contrôle utilisateur à l'intérieur de l'élément form.
3. Éventuellement, si le contrôle utilisateur expose des propriétés publiques, définissez-les de façon déclarative.
1.5. Validation des données
La validation des données est en général la chose la plus importante dans un site web. Ici, nous allons pouvoir travailler côté client et côté serveur, c'est indispensable pour prévenir au plus tôt l'utilisateur d'une erreur éventuelle. En effet, il est inutile d'envoyer une demande au serveur si l'information transmise est erronée : cela génère une perte de temps et un encombrement inutile du serveur.
La validation côté client est donc celle qui intervient la première et se fait en général en JavaScript. fournit des contrôles de validation qui génèrent le code javascript associé, vous évitant de connaître à fond le langage et de devoir taper le code.
Les principaux contrôles de validation sont :
• RequiredFieldValidator
• RangeValidator
• CompareValidator
• RegularExpressionValidator
• CustomValidator
• ValidationSummary
Voyons un peu les caractéristiques générales de chacun.
1.5.1. RequiredFieldValidator
Le plus fréquemment utilisé car il est le seul qui peut s'assurer qu'un champ n'est pas vide. En effet, tous les autres contrôles de validation acceptent un champ vide donc, associer ce contrôle de validation aux autres contrôles permet cette vérification essentielle.
Le RequiredFieldValidator a donc pour fonction de vérifier qu'un champ a été modifié. Ses propriétés principales à renseigner sont :
Nom de propriété | la | Utilisation |
ControlToValidate | doit contenir le nom du contrôle à valider | |
ErrorMessage | message à afficher en cas d'erreur dans le contrôle ValidationSummary | |
InitialValue | contient une valeur qui invalide le contrôle si celuici est égal à cette valeur précise | |
Text | texte affiché en cas de non validation |
Exemple de RequiredFieldValidator sur une TextBox nommée TxtNom :
InitialValue="Admin">
Vous remarquez que pour valider le nom qui est obligatoire, il nous faut 2 contrôles RequiredFieldValidator.
Un pour signaler que le nom ne peut pas être un champ vide, l'autre pour interdire l'utilisation du nom "Admin".
1.5.2. RangeValidator
Comme son nom l'indique, il sera utilisé pour valider l'encodage entre des bornes données. Par exemple, encoder un nombre entre 1 et 10. Les propriétés sont pratiquemment identiques à celles du contrôle précédent :
Nom de la propriété | |
Utilisation | |
ControlToValidate | doit contenir le nom du contrôle à valider |
ErrorMessage | message à afficher en cas d'erreur dans le contrôle ValidationSummary |
MinimumValue | valeur minimale de la plage de données |
MaximumValue | valeur maximale de la plage de données |
Text | texte affiché en cas de non validation |
Exemple de validation entre 1 et 10 :
ErrorMessage="RangeValidator" MaximumValue="10" MinimumValue="1" Type="Integer" ControlToValidate="TxtValue">Valeur entre 1 et 10 requise !
1.5.3. CompareValidator
Il utilise un opérateur pour comparer les valeurs en présence et valider leur concordance. La situation la plus courante d'utilisation est, bien entendu, lors d'une deuxième saisie d'un mot de passe.
Les propriétés restent aussi dans les mêmes normes. Par contre, vous pouvez avoir plusieurs types de validation :
Comparaison à un type.
ControlToValidate="TxtValeur" Type="Integer"
Operator="DataTypeCheck" ErrorMessage="Doit être un chiffre entier de type integer !"
Comparaison à une valeur.
ControlToValidate="TxtValeur" Type="Integer"
Operator="GreaterThan" ValueToCompare="0" ErrorMessage="Un chiffre positif est requis !"
Comparaison à un autre champ.
ControlToValidate="TxtMotPasse2" Type="String"
Operator="Equal" ControlToCompare="TxtMotPasse1" ErrorMessage="Les mots de passe ne correspondent
pas !"
1.5.4. RegularExpressionValidator
Ce contrôle valide un champ suivant une expression régulière. Il convient pour des tests de validation très complexes mais demande beaucoup de ressources donc, ne l'utilisez pas pour des validations qui peuvent se faire aisément avec plusieurs autres contrôles de validation.
Il utilise les mêmes propriétés que les contrôles précédents avec en plus une propriété ValidationExpression qui correspond évidemment à l'expression régulière de test.
Un petit exemple de validation d'un numéro de compte bancaire pour en voir l'application :
runat="server">
ID="RegularExpressionValidator1" runat="server"
ErrorMessage="RegularExpressionValidator"
ControlToValidate="TxtCptBancaire"
ValidationExpression="^\d{3}-\d{7}-\d{2}$">Format incorrect
1.5.5. CustomValidator
L'utilisateur définit lui-même une fonction pour effectuer la validation lorsque les contrôles standards ne peuvent pas assumer ce rôle. Dans ce cas, les propriétés sont un peu différentes :
Dans le cas d'une validation côté client :
• La propriété ClientValidationFunction contient le nom de la fonction
• La fonction doit être sous la forme : Function ValidationPersonnelle (source, arguments)
• la source est l'objet CustomValidator côté client
• arguments est un objet comportant deux propriétés : Value et IsValid
• La propriété Value est la valeur à valider
• La propriété IsValid est un booléen retournant le résultat de la validation
La validation côté client s'effectue avec du code javascript soit entre les balises ad hoc, soit dans un fichier ".js" séparé.
Ce genre de code est bien connu des développeurs javascript :
{
}
Dans le cas d'une validation côté serveur :
Placez le code de validation dans l'événement OnServerValidate
1.5.6. ValidationSummary
Ce contrôle n'est pas un contrôle de validation à proprement parler, il sert à afficher sous différentes formes le résultat de tous les contrôles de validation sur la page aspx si une erreur est survenue. Il est bien évident que vous pouvez l'omettre et gérer vous-même un affichage d'erreur.
Le contrôle ValidationSummary s'affiche dès que la propriété IsValid de la page est à False.
Il interroge les différents contrôles non valides et récupère la valeur de leur propriété ErrorMessage.
Pour afficher le résultat, vous avez les DisplayMode suivants à votre disposition :
• List : simple liste
• BulletList : liste avec puces
• SingleParagraph : les messages d'erreur sont concaténés les uns à la suite des autres, séparés par une virgule
L'emplacement de l'affichage peut s'effectuer de deux manières :
• à l'emplacement du contrôle ValidationSummary : mettre sa propriété ShowSummary = True
• dans une boite de dialogue : mettre sa propriété ShowDialog = True
Il est aussi intéressant de s'arrêter un peu à la propriété ValidationGroup des contrôles utilisateurs. En effet, regrouper certains contrôles sous un même nom dans la propriété ValidationGroup permet de valider d'abord une série de champs puis une autre suivant le résultat de la première validation.
2.1. Introduction
Les applications Web accèdent souvent à des sources de données aux fins de stockage et de récupération de données dynamiques. Vous pouvez écrire du code pour accéder aux données à l'aide de classes de l'espace de (connu sous le nom ) et de l'espace de noms . Il s'agissait de l'approche généralement adoptée dans les versions antérieures d'.
Toutefois, permet également d'exécuter la liaison de données de façon déclarative. Cette liaison n'exige aucun code pour les scénarios de données les plus courants, et notamment :
§ la sélection et l'affichage de données ;
§ le tri, la pagination et la mise en cache de données ;
§ la mise à jour, l'insertion et la suppression de données ;
§ le filtrage de données à l'aide de paramètres d'exécution ;
§ la création de scénarios maître/détails à l'aide de paramètres.
inclut deux types de contrôles serveur qui interviennent dans le modèle de liaison de données déclaratif : les contrôles de source de données et les contrôles liés aux données. Ces contrôles gèrent les tâches sous-jacentes exigées par le modèle Web sans état pour l'affichage et la mise à jour des données dans les pages Web . En conséquence, vous n'êtes pas tenu de connaître tout le déroulement du cycle de vie des demandes de page pour exécuter la liaison de données.
2.2. Contrôles de source de données
Les contrôles de source de données sont des contrôles qui gèrent les tâches de connexion à une source de données et de lecture et d'écriture de données. Les contrôles de source de données ne génèrent pas le rendu d'une interface utilisateur. Au lieu de cela, ils jouent le rôle d'intermédiaires entre un magasin de données particulier (base de données, objet métier ou fichier XML) et d'autres contrôles de la page Web . Les contrôles de source de données offrent des fonctionnalités puissantes de récupération et de modification de données, et notamment en termes de requêtes, de tri, de pagination, de filtrage, de mise à jour, de suppression et d'insertion. comprend les contrôles de source de données suivants :
Contrôle de source de données | Description |
ObjectDataSource | Permet d'utiliser un objet métier ou une autre classe et de créer des applications Web qui s'appuient sur des objets de couche intermédiaire pour gérer des données. |
SqlDataSource | Permet d'utiliser les fournisseurs de données managés , lesquels offrent un accès aux bases de données Microsoft SQL Server, OLE DB, ODBC ou Oracle. |
AccessDataSource | Permet d'utiliser une base de données Microsoft Access. |
XmlDataSource | Permet d'utiliser un fichier XML, ce qui est très utile pour les contrôles serveur hiérarchiques tels que les contrôles TreeViewou Menu. |
SiteMapDataSource | Utilisé avec la navigation de site . |
Les contrôles de source de données peuvent également être étendus pour prendre en charge d'autres fournisseurs d'accès au stockage des données.
2.3. Contrôles liés aux données
Les contrôles liés aux données génèrent le rendu des données en tant que balises au navigateur qui envoie la demande. Un contrôle lié aux données peut se lier à un contrôle de source de données et extraire automatiquement des données au moment opportun dans le cycle de vie de la demande de page. Les contrôles liés aux données peuvent tirer parti des fonctionnalités fournies par un contrôle de source de données, et notamment le tri, la pagination, la mise en cache, le filtrage, la mise à jour, la suppression et l'insertion. Un contrôle lié aux données se connecte à un contrôle de source de données via sa propriété DataSourceID.
comprend les contrôles liés aux données décrits dans le tableau suivant.
Contrôle | Fonctionnement |
AdRotator | Génère le rendu des annonces dans une page en tant qu'images sur lesquelles les utilisateurs peuvent cliquer pour accéder à une URL associée à l'annonce. |
Datalist | Génère le rendu des données dans une table. Le rendu de chaque élément est généré à l'aide d'un modèle d'élément que vous définissez. |
DetailsView | Affiche un seul enregistrement à la fois sous une forme |
Génère le rendu des données dans divers formats de liste. Les contrôles de type liste incluent les contrôles BulletedList, CheckBoxList, DropDownList, ListBoxet RadioButtonList.
tabulaire et permet de modifier, de supprimer et d'insérer
des enregistrements. Vous pouvez également parcourir
plusieurs enregistrements. | |
FormView | Semblable au contrôle DetailsView, mais permet de définir une présentation de formulaire libre pour chaque enregistrement. Le contrôle FormView ressemble au contrôle DataList pour un enregistrement unique. |
GridView | Affiche des données dans un tableau et propose une assistance pour l'édition, la mise à jour, le tri et la pagination des données sans nécessiter de code. |
Menu | Génère le rendu des données dans un menu dynamique hiérarchique qui peut inclure des sous-menus. |
Repeater | Génère le rendu des données dans une liste. Le rendu de chaque élément est généré à l'aide d'un modèle d'élément que vous définissez. |
TreeView | Génère le rendu des données dans une arborescence |
hiérarchique de nœuds qu'il est possible de développer.
Depuis longtemps, les développeurs ont toujours été contraint de dupliquer les sources HTML du design sur chaque page. D’autre solution intermédiaire existait, par exemple l’utilisation des frames en HTML, cependant cette fonction appartient au langage HTML et présente beaucoup de problème, notamment au niveau des emplacements, de plus les frames sont de moins en moins utilisées de nos jours. La fonctionnalité « MasterPage » a longtemps été demandée par les développeurs, elle n’existait toujours pas dans les versions précédentes de l’, grâce au MasterPage vous allez enfin pouvoir séparer les sources du design au code pur. En effet, intégré à la version 2.0, vous pouvez séparer la partie développement du design et développement fonctionnel du site, vous n’avez plus besoin de déployer les sources du design sur chaque page du site.
La MasterPage (extension *.master) contiendra la source (X)HTML du design et des zones d’édition (contentPlaceHolder), permettant ainsi de créer plusieurs page (contentPage) du même design. Il suffit ensuite de modifier les zones d’éditions sur chaque page. Par exemple, si l’on considère que le site de SUPINFO () est en 2.0, une MasterPage est suffisante pour le design, ensuite chaque page fera appel à cette MasterPage dans l’en-tête, et chaque page devra insérer leurs informations spécifiques dans les zones d’éditions imposer dans la MasterPage
Pour créer une MasterPage, faites un clique-droit sur le nom votre WebSite, puis sur « Add a New Item ».
Fig 1.1 Créer un nouvel item
Une fenêtre apparaîtra, il vous suffira de choisir MasterPage et de renommer, si vous le souhaitez, le nom de la MasterPage.
Fig 1.2 Créer un item MasterPage
Vous remarquerez que l’en-tête de la MasterPage contient le mot-clé « Master », à la différence d’une page simple qui contient le mot-clé « Page ».
CodeFile="" Inherits="MasterPage" %>
Il suffit ensuite d’insérer des zones d’éditions (contentPlaceHolder) aux endroits souhaiter grâce aux balise asp:contentPlaceHolder.
Voici un exemple simple de design avec 3 contentPlaceHolder :
Test
body { font-size:14px; font-family:verdana; font-weight:bold; text-align:center; }
|