FR -4MDN- ASP NET - Module 1 - PPT - v1 0easydata.e-monsite.com/medias/files/module-1-introduction.pdf · Objectifs de ce module Découvrir le fonctionnement d’ASP.NET 2.0 Apprendre

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 :


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 :


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

Traitement des requêtesIntroduction à ASP.NET 2.0

Schéma processus : Requête / 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 :


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


� File > New > Web Site…

Procédure à suivre pour créer une nouvelle WebForm :


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


SolutionRegroupement de

projets

Répertoire de donnéesBases de données

WebForm par défautFichier aspx et code-behind

Solution explorer

ProjetExample


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

Démonstration


ASP.NET et Visual Studio

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 :


� 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 :


� 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 :


� 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 :


� Stocke et manipule des objets accessibles àpartir de n’importe quelle session

Application["NbUsers"] = 1;

L’objet Application :

Pause réflexion sur la partie 1

Avez-vous des questions ?


Contrôles serveur

Créer des pages web simples


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


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”/>


� 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” />


� 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” />


� 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


� Contrôle HTML invisible

� Nommé __VIEWSTATE

� Attribut value

Le ViewState

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRY0ry0izIl8gQMHzdkijEJAN6bNQ==" />


� 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


� 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


� 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 :


� 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>


� 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>


� 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;

}}


� 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" />


� 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



Contrôles serveur

Framework de Page

Structurer les pages web


Plan de la partie

� Les MasterPages

� Style, Skin, Themes


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


� Une MasterPage c’est :

� Un fichier ASP.NET particulier (.master)

� Un squelette de WebForm

� Exemple de MasterPage dans le Designer Visual Studio


� Élément ContentPlaceHolder :

� Zone définissant la partie « personnalisable »par les Web Formutilisant la MasterPage

<asp:contentplaceholder id="MyContentPlaceHolder" runat="server" />


� 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>


� 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";

Démonstration


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" />


Thème – Ensemble de styles applicables à un ensemble de pages ASP.NET. Ils sont matérialisés par un répértoire.


� 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" />


� 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" %>



Framework de Pages

Fichiers de configuration

Comprendre la configuration d’applications web


Plan de la partie

� Généralités

� Structure du fichier

� Organisation des fichiers



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


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


Félicitations

Vous avez suivi avec succès le module de cours n°1


Fin

� Pratiquez

� Consultez le cours ASP .NET Avancé

ASP.NET – Applications Web

Documents

FR -4MDN- ASP NET - Module 1 - PPT - v1 0easydata.e-monsite.com/medias/files/module-1-introduction.pdf · Objectifs de ce module Découvrir le fonctionnement d’ASP.NET 2.0 Apprendre