FR -4MDN- ASP NET - Module 1 - PPT - v1...
Transcript of FR -4MDN- ASP NET - Module 1 - PPT - v1...
www.supinfo.com
Copyright © SUPINFO. All rights reserved
ASP.NET 2.0
Applications Web
Campus-Booster ID : 697
Objectifs de ce module
� Découvrir le fonctionnement d’ASP.NET 2.0
� Apprendre à développer des applications web simples
� Comprendre la configuration des applications web
En suivant ce module vous allez :
ASP.NET 2.0 – Applications Web
Plan du module
� Introduction à ASP.NET 2.0 .
� Contrôles serveur .
� Framework de page .
� Fichiers de configuration .
Voici les parties que nous allons aborder :
ASP.NET 2.0 – Applications Web
Introduction à ASP.NET 2.0
Découvrir le développement d’applications Web
ASP.NET 2.0 – Application Web
Plan de la partie
� Généralités
� Traitement des requêtes
� Notion de code-behind
� ASP.NET et Visual Studio
� Compilation
� Cycle de vie
� Objets ASP.NET
Voici les chapitres que nous allons aborder :
Introduction à ASP.NET 2.0
GénéralitésIntroduction à ASP.NET 2.0
Objectifs d’ASP.NET 2
� Créer des applications web
� Haute productivité
� Créer facilement des applications fonctionnelles
� Respecter les standards
� Offrir une sécurité élevée
� Améliorer les performances et l’évolutivité
GénéralitésIntroduction à ASP.NET 2.0
Principes d’ASP.NET 2
� Programmation évènementielle
� Se rapproche de la programmation Winforms
� Programmation orientée objets
� Eléments graphiques = objets
� Types de fichiers
� .aspx : page web ASP.NET; compilée pour renvoyer du code HTML
� .ascx : Contrôle utilisateur ASP.NET
� .asmx : Service web ASP.NET
� On parle de WebForms
Traitement des requêtesIntroduction à ASP.NET 2.0
Principes d’ASP.NET 2
� Traitement d’une requête classique
HTTP TRAITEMENTClient
(Navigateur)Serveur avec
application web1- Requête : http://labo-
dotnet.com
5- Réponse HTML
2- Réception de la requête
3- Composition de la réponse
4- Renvoi de la réponse
� Inséré dans la page .aspx(code-inline)
� Contenu dans un autre fichier (code-behind)
� Fichier d’extension .aspx.cs (ou .vb)
� Précisé dans la page .aspx via la directive @Page
� Classe partielle
Le code de traitement des événements peut être :
Introduction à ASP.NET 2.0
Notion de code-behind
ASP.NET et Visual StudioIntroduction à ASP.NET 2.0
� Programmation pratiquement identique aux WinForms
� Editeur graphique intuitif : drap&drop de contrôles
� Possibilité de débuguer une application (pas à pas)
� Disponibilité d’outils performants tels que l’explorateur de serveurs
Utilisation de Visual Studio 2005 avec ASP .NET 2
ASP.NET et Visual StudioIntroduction à ASP.NET 2.0
� File > New > Web Site…
Procédure à suivre pour créer une nouvelle WebForm :
ASP.NET et Visual StudioIntroduction à ASP.NET 2.0
TemplateChoix du type d’application
Choix du langagede programmation .NET
Chemin du fichierType de stockageSysteme de fichier, HTTP, ou FTP
Options de création d’une WebForm
ASP.NET et Visual StudioIntroduction à ASP.NET 2.0
SolutionRegroupement de
projets
Répertoire de donnéesBases de données
WebForm par défautFichier aspx et code-behind
Solution explorer
ProjetExample
ASP.NET et Visual StudioIntroduction à ASP.NET 2.0
Contrôles de validation
Contrôles de donnéesContrôlesserveurstandards
Contrôles de login
Contrôles HTML
Contrôles de navigation
ContrôlesWebParts
Boites à outils
CompilationIntroduction à ASP.NET 2.0
� Héritage et compilation d’une page ASP.NET 2
Classe partielle générée à partir du fichier .aspx
Classe partielle contenant le code-behind
System.Web.UI.Page
Fusionné en une seule classe qui dérive de Page
Compilé par ASP .NET à l’exécution
MaClasse.dll
Cycle de vieIntroduction à ASP.NET 2.0
Etapes par lesquelles passe une page lors d’une requête
Etapes Rôle
Construction
Initialisation
Restaurationdes états
Chargementde la page
Rendu
Appel des constructeurs
Initialise le traitement de la requête
Restaure les états des contrôles de la page
Validation des contrôles et postback
Génération du code HTML
FinalisationLibération des ressources non managées
Cycle de vieIntroduction à ASP.NET 2.0
� Ces étapes correspondent à des événements
� Il est possible d’agir sur ces étapes
� En redéfinissant certaines méthodes
� En s’abonnant à certains de ces événements
� Exemple : La méthode Page_Load()
protected void Page_Load(object sender, EventArgs e)
{//Code to execute at the page //loading
}
Objets ASP.NET Introduction à ASP.NET 2.0
� Server
� Request
� Response
� Cookie
� Session
� Application
Il existe différents objets que vous pouvez utiliser dans votre code :
Objets ASP.NET Introduction à ASP.NET 2.0
� L’objet Server permet d’effectuer certaines actions en rapport avec le serveur
� Redirection
� Transformations d’URLs Web en UrlsSystème de fichiers
� …
L’objet Server :
Objets ASP.NET Introduction à ASP.NET 2.0
� Contient les informations envoyées par le navigateur Web lorsqu’il envoie une requête au serveur Web.
� Méthode POST : Request.Forms["id_ou_nom"]
� Méthode GET : Request.QueryString["id_ou_nom"]
L’objet Request :
Objets ASP.NET Introduction à ASP.NET 2.0
� L’objet Response
� Constitue la réponse envoyée par le serveur au client
� L’objet Cookies
� Permet la création de la manipulation de Cookies
� L’objet Session
� Permet de stocker et manipuler des objets en rapport avec une session (Navigateur web)
Autres objets :
Objets ASP.NET Introduction à ASP.NET 2.0
� Stocke et manipule des objets accessibles àpartir de n’importe quelle session
Application["NbUsers"] = 1;
L’objet Application :
Plan de la partie
� Généralités
� Présentation de quelques contrôles
� Interaction client/serveur
� Le principe de PostBack
� Validation de contrôles
Voici les chapitres que nous allons aborder :
Contrôles serveur
GénéralitésContrôles serveur
� Contrôles serveur : objets ASP.NET permettant de générer du code HTML
� Dérivent de System.Web.UI.Control
� Lèvent des événements
� Ex: Clic sur un bouton
� Attribut runat="server"
� Exemple, le contrôle Label :
<asp:Labe l ID="MyLabel" runat="server" Text="Some Text" />
GénéralitésContrôles serveur
� Chaque contrôle peut contenir d’autres contrôles
� Une page ASP.NET est une arborescence de contrôles
Page
MyLabel MyPanel MyButton
MyLabel2 MyTextBox
� Accès aux contrôles enfant grâce à la propriétéControls
Présentation de quelques contrôlesContrôles serveur
� Affiche du texte
� Contrôle non éditablepar l’utilisateur
� Exemple :
Le label
<asp:Label ID=“Label1”runat=“server” Text=“Some Text”/>
Présentation de quelques contrôlesContrôles serveur
� Zone de saisie de texte
� Peut être récupéréedans le code-behind
� Résultats :
TextBox
<asp:TextBox ID=“TextBox1”runat=“server” />
this.TextBox1.Text
<asp:TextBox ID=“TextBox1”runat=“server” />
Présentation de quelques contrôlesContrôles serveur
� Ne génere pas de code HTML autre que celuicontenu dans sapropriété text
Contrôle literal
<asp:Literal ID=“MyLiteral”Text=“<b>Some HTML code</b>” runat=“server” />
Présentation de quelques contrôlesContrôles serveur
� Liste de choix déroulante :
� Résultat :
Le DropDownList
<asp:DropDownList ID=“MyDropDownList” runat=“server”><asp:ListItem>France</asp:ListItem><asp:ListItem>Germany</asp:ListItem><asp:ListItem>USA</asp:ListItem>
</asp:DropDownList>
Interaction Client/ServeurContrôles serveur
� Sauvegarde de l’état des contrôles d’une page d’unerequête à l’autre :
� A la charge du développeur
� Fastidieux à mettre en oeuvre
Avant ASP.NET
� L’état est sauvegardé automatiquement
� Comment est-ce possible ?
Depuis ASP.NET
ViewState ControlState
Interaction Client/ServeurContrôles serveur
� Contrôle HTML invisible
� Nommé __VIEWSTATE
� Attribut value
Le ViewState
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRY0ry0izIl8gQMHzdkijEJAN6bNQ==" />
Interaction Client/ServeurContrôles serveur
� Existe depuis ASP.NET 2.0
� Permet de gérerséparément les états de certains contrôles
� Est stocké dans unesous section du ViewState
� Réduit le problème de taille du ViewState
Le ControlState
Le principe de PostBackContrôles serveur
� Postback
� Déclenche une action côtéserveur
� Lance l’exécution des méthodes abonnées (C#, VB.NET, …)
� Abonnement dans le code aspx ou dans le code-behind
� Non-Postback
� Ne déclenche pas d’action côté serveur
� Envoyé au serveur lors du prochain PostBack
Deux types d’événements
Le principe de PostBackContrôles serveur
� Le comportement d’un contrôle non-postback est modifiable grâce à la propriété autopostback
� Propriété IsPostBack
protected void Page_Load(object sender, EventArgs e){
if (!Page.IsPostBack){
this.MyDropDownList.Items.AddRange(new ListItem[] {
new ListItem("Alsace"), new ListItem("Paris"), new ListItem("Valencienne")});
}}
Validation des contrôlesContrôles serveur
� Contrôles de validation :
� Permettent de valider la saisie des utilisateurs
� Héritent de BaseValidator
� Propriété ControlToValidate
� La validation peut se faire en deux étapes :
� Sur le client (javascript)
� Sur le serveur (code-behind)
�Appel de la méthode Page.Validate()
�Se fait après le chargement de la page (Load)
� Propriété EnableClientScript
Validation des contrôlesContrôles serveur
� La propriété Page.IsValid, permet de savoir si les données saisies sont valident
� Le booléen n’est renseigné qu’après l’appel à la méthode Page.Validate()
� Cinq contrôles :
� RequiredFieldValidator
� CompareValidator
� RangeValidator
� RegularExpressionValidator
� CustomValidator
Validation des contrôlesContrôles serveur
� Exemple : RequiredFieldValidator
<asp:TextBox ID="TxtNom" runat="server" /><asp:RequiredFieldValidator
ID="MyRequiredFieldValidator"runat="server"ErrorMessage="Vous devez saisir un nom."ControlToValidate="TxtNom"/>
� ErrorMessage : Message à afficher lorsqu’une erreur survient
� ControlToValidate : Contrôle que le validateur doit valider
� Résultat :
Validation des contrôlesContrôles serveur
� Le CustomValidator nécessite :
� Une fonction Javascript pour la validation côtéclient :
<script type="text/javascript">function EstPair_ClientValid(source, args) {
if (args.Value % 2 == 0)args.IsValid = true;
elseargs.IsValid = false;
}</script>
Validation des contrôlesContrôles serveur
� Le CustomValidator nécessite :
� Le code ASP pour utiliser la fonction JavaScript
<asp:TextBox ID="TxtNom" runat="server" /><asp:CustomValidator ID="CustomValidator1"
runat="server" ControlToValidate="TxtNom"ErrorMessage="Veuillez entrer un nombre pair"ClientValidationFunction="EstPair_ClientValid">
</asp:CustomValidator>
Validation des contrôlesContrôles serveur
� Et une méthode dans le code-behind pour la validation côté serveur :
void EstPair_ServerValid(object source,ServerValidateEventArgs e)
{e.IsValid = false;int temp;if (Int32.TryParse(e.Value, out temp)){
if (temp % 2 == 0)e.IsValid = true;
}}
Validation des contrôlesContrôles serveur
� Code ASP pour utiliser le code-behind dans la validation côté serveur :
� Résultat :
<asp:TextBox ID="TxtNom" runat="server" /><asp:CustomValidator ID="CustomValidator1"
runat="server" ControlToValidate="TxtNom"ErrorMessage="Veuillez entrer un nombre pair"OnServerValidate="EstPair_ServerValid" />
Validation des contrôlesContrôles serveur
� ValidationSummary
� Permet de centraliser les messages d’erreur à un endroit
Le contrôle ValidationSummary affiche le message d’erreur contenu dans la propriété « ErrorMessage » uniquement, tandis que le message affiché dans les contrôles de validation peut être renseigné dans la propriété « Text »
� Groupe de validation
� Permet de ne pas déclencher toutes les validations à chaque évènement
� Il suffit d’ajouter un attribut ValidationGroupcontenant le nom du groupe au contrôles de validation ainsi qu’aux contrôles à valider
Plan de la partie
� Les MasterPages
� Style, Skin, Themes
Voici les chapitres que nous allons aborder :
Framework de page
Les MasterPagesFramework de page
� Beaucoup de parties graphiques reviennent sur un même site
� Si une partie change, il faudrait la modifier dans toutes les pages
� Nécessité de factoriser les éléments redondants
Les MasterPagesFramework de page
� Une MasterPage c’est :
� Un fichier ASP.NET particulier (.master)
� Un squelette de WebForm
� Exemple de MasterPage dans le Designer Visual Studio
Les MasterPagesFramework de page
� Élément ContentPlaceHolder :
� Zone définissant la partie « personnalisable »par les Web Formutilisant la MasterPage
<asp:contentplaceholder id="MyContentPlaceHolder" runat="server" />
Les MasterPagesFramework de page
� Utiliser une MasterPage dans une Web Form
� Préciser dans la directive @Page
<%@ Page Language="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"CodeFile="Home.aspx.cs"Inherits="Home" %>
� Éléments Content (autant que le nombre de ContentPlaceHolder de la MasterPage)
<asp:Content ID="MyContent" ContentPlaceHolderID="MyContentPlaceHolder" Runat="Server">
</asp:Content>
Les MasterPagesFramework de page
� Il est possible d’intéragir avec les éléments d’une MasterPage à partir d’une webform l’utilisant
� Il faut que l’élément soit public
� Objet Master
� Méthode FindControl
((Label)Master.FindControl("LblAccessible")).Text = "Some text";
Style, Skin, ThèmesFramework de page
� Il est possible d’utiliser les styles HTML
� Propriété CssClass
� Exemple :
� Fichier CSS
.TextBoxes{
border: 5px;}
� Code ASP.NET
<asp:TextBox ID="MyTextBox" runat="server" CssClass="TextBoxes" />
Style, Skin, ThèmesFramework de page
Thème – Ensemble de styles applicables à un ensemble de pages ASP.NET. Ils sont matérialisés par un répértoire.
Style, Skin, ThèmesFramework de page
� Un répertoire de Thème :
� Porte le nom du thème
� Contient des fichiers .skin et .css
� Est situé dans le répertoire /App_Theme
� Un fichier .skin contient des balises ASP.NET limitées à certaines propriétés
� Exemple :
<asp:TextBox height="200px" runat="server" /><asp:Label Font-Bold="true" />
Style, Skin, ThèmesFramework de page
� Configuration d’un Thème pour une page ASP.NET
� Directive @Page
� Attribut Theme
<%@ Page Language ="C#"AutoEventWireup ="true"CodeFile =Home.aspx.csInherits ="Home"Theme="NomDuTheme" %>
Fichiers de configuration
Comprendre la configuration d’applications web
ASP.NET 2.0 – Applications Web
Plan de la partie
� Généralités
� Structure du fichier
� Organisation des fichiers
Voici les chapitres que nous allons aborder :
Fichiers de configuration
GénéralitésFichiers de configuration
� Fichier de configuration
� Factorise la configuration des différents éléments d’un site
� Permettent entre autre de configurer :
� Le débugage
� La gestion du cache
� Les chaînes de connexion
� Ajouter des paramètres personnalisés
Structure du fichierFichiers de configuration
� Exemple de fichier de configuration
� Section <system.web> obligatoire
<?xml version="1.0" encoding="utf-8"?><configuration>
<appSettings/><connectionStrings/><system.web>
<compilation debug="false" /><authentication mode="Windows" />
</system.web></configuration>
Structure du fichierFichiers de configuration
� Élément de configuration personnalisée
…<appSettings>
<add key="CaptainAge" value="42" /></appSettings>…
� Elément <add />
� Key : nom de l’attribut
� Value : valeur de l’attribut
� Récupération de la valeur dans le code behind :
ConfigurationManager.AppSettings["CaptainAge"];
Organisation des fichiersFichiers de configuration
� Différents fichiers
� Répertoire du framework
� Machine.config
� Répertoire racine
� Web.Config
� Répertoire de l'application
� Web.Config
� Dans n'importe quel sous répertoire
� Web.Config
Organisation des fichiersFichiers de configuration
Machine
Répertoire Racine
Répertoire Application
Sous répertoire
Validation des contrôles
Optimiserl’affichageavec les
MasterPage
Créer unepage web avec Visual Studio
Configurerune
application web
Résumé du module
Utilisation des contrôlesserveur
ASP.NET 2.0 – Applications Web
Pour aller plus loin…
Modules de coursPublications
Sites web
http://msdn.microsoft.com/
Coach ASP.NET
- ASP.NET 2.0 avancé
- Sécurité des applications web
- Web Services ASP.NET 2.0
Conférences
Webcasts
Si vous voulez approfondir vos connaissances :
www.asp.net
Pratique de .NET 2 et C# 2
Patrick Smacchia
ASP.NET 2.0 – Applications Web