Weitere ähnliche Inhalte
Ähnlich wie Module 2 introduction à asp.net web forms (20)
Mehr von Mohammed Amine Mostefai (20)
Module 2 introduction à asp.net web forms
- 2. Développement web avec ASP.NET et Visual Studio 2012
Objectifs du module 2
Présentation du .NET Framework
Introduction à ASP.NET
Création d’applications ASP.NET Web Forms avec VS 2012
Module 2 : Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine
- 3. Développement web avec ASP.NET et Visual Studio 2012
Plan du module 3
Introduction à .NET Framework
Présentation d’ASP.NET
Développement d’applications ASP.NET
Formes web et contrôles orientés serveur
Contrôles ASP.NET
Module 2 : Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine
- 4. Développement web avec ASP.NET et Visual Studio 2012
4
Module 2 : Introduction à ASP.NET Web Forms
Section 1 : Introduction à .NET
Framework
Copyright © 2013, Mostefai Mohammed Amine
- 5. Développement web avec ASP.NET et Visual Studio 2012
Présentation 5
.NET Framework est une plateforme permettant de simplifier le
Module 2 : Introduction à ASP.NET Web Forms
développement d’applications
Il peut s’agir de logiciels Windows, d’applications mobiles, d’applications
web, de services ou des applications Cloud
Basé sur des applications orientées objet dont C#, .NET permet le
développement d’applications indépendantes des périphériques
.NET Framework permet aussi d’intégrer facilement d’autres produits de
Microsoft tels que Sharepoint, IIS ou SQL Server
Section 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
- 6. Développement web avec ASP.NET et Visual Studio 2012
Architecture 6
Windows
Noyau WPF
Forms
Module 2 : Introduction à ASP.NET Web Forms
Systèmes Windows
Classes de base
ASP.NET
Applications
ASP.NET WCF
CLR MVC
ASP.NET Workflow
ADO.NET
MVC Foundation
Linq Parallel FX
Section 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
- 7. Développement web avec ASP.NET et Visual Studio 2012
Technologies .NET Framework 7
Windows
Module 2 : Introduction à ASP.NET Web Forms
WPF Silverlight ASP.NET
Forms
ASP.NET Workflow
WCF ADO.NET
MVC Foundation
Section 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
- 8. Développement web avec ASP.NET et Visual Studio 2012
Visual Studio 8
Visual Studio est l’outil préféré pour le développement d’applications
Module 2 : Introduction à ASP.NET Web Forms
.NET
VS offre des fonctions variées d’édition, de compilation, de conception
d’IHM, de débogage et de gestion du cycle de vie de logiciels
VS existe en plusieurs versions. La version Express est une version
gratuite.
Section 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
- 9. Développement web avec ASP.NET et Visual Studio 2012
9
Module 2 : Introduction à ASP.NET Web Forms
Section 2 : Présentation d’ASP.NET
Copyright © 2013, Mostefai Mohammed Amine
- 10. Développement web avec ASP.NET et Visual Studio 2012
Introduction 10
ASP.NET est une technologie de développement
Module 2 : Introduction à ASP.NET Web Forms
ASP.NET est une évolution de ASP
Contrairement à ASP et PHP, ASP.NET est compilé, pas interprété
Section 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 11. Développement web avec ASP.NET et Visual Studio 2012
Formes Web 11
Une forme web est une page traitée par.NET Framework pour la
Module 2 : Introduction à ASP.NET Web Forms
génération de pages web
Une application web ASP.NET est composé d’une ou de plusieurs formes
web
En plus des balises HTML standard, une forme web peut inclure des
contrôles côté serveur simplifiant la programmation des vues web
ASP.NET supporte les services WCF et peut donc déployer des services
web pouvant être consommés par d’autres applications
Section 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 12. Développement web avec ASP.NET et Visual Studio 2012
Composantes d’une application web 12
Module 2 : Introduction à ASP.NET Web Forms
Formes web Fichiers de Fichiers de Pages maître
code configuration
Services web Ressources
Section 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 13. Développement web avec ASP.NET et Visual Studio 2012
Génération d’une page 13
Com piler la page
Page Non Com pilée ou Mod if iée
Module 2 : Introduction à ASP.NET Web Forms
Invocat ion d'une for m e
w eb OUI
Génér er HTML
Non
Section 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 14. Développement web avec ASP.NET et Visual Studio 2012
Tutoriel 2.1 Création d’une application 14
• Lancer Tutoriel 2.1, Etape 1 – Etape 4
Module 2 : Introduction à ASP.NET Web Forms
Section 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 15. Développement web avec ASP.NET et Visual Studio 2012
Module 2 : Introduction à ASP.NET Web Forms
Section 3 : Développement
d’applications web avec VS 2012
15 Copyright © 2013, Mostefai Mohammed Amine
- 16. Développement web avec ASP.NET et Visual Studio 2012
Procédé de développement d’applications web 16
Module 2 : Introduction à ASP.NET Web Forms
Développement
Conception
et tests
Déploiement
Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
- 17. Développement web avec ASP.NET et Visual Studio 2012
Organisation d’un projet ASP.NET 17
Lors de la création d’une application à partir d’un modèle, VS crée un
Module 2 : Introduction à ASP.NET Web Forms
ensemble de fichiers ou de répertoires qui ont un rôle dans le projet
Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
- 18. Développement web avec ASP.NET et Visual Studio 2012
Tutoriel 2.1 : Dossiers ASP.NET 18
• Lancer Tutoriel 2.1, Etape5
Module 2 : Introduction à ASP.NET Web Forms
Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
- 19. Développement web avec ASP.NET et Visual Studio 2012
Structure d’un projet ASP.NET 19
Nom Type Description
App_Data Répertoire Contient les données de l’application : bases de données,
fichiers XML,…
Module 2 : Introduction à ASP.NET Web Forms
Bin Répertoire Contient les binaires des assemblies générées par le projet
Obj Répertoire Contient les objets intermédiaires générés lors de la
compilation
Properties Répertoire Contient les informations concernant l’assembly
*.aspx Fichier Fichiers de formes web
*.ascx Fichier Fichiers de contrôles web
*.cs Fichier Fichiers de code source
*.config Fichier Fichier de configuration (par défaut web,config)
*.csproj Fichier Fichier de projet
*.sln Fichier Fichier de solution
Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
- 20. Développement web avec ASP.NET et Visual Studio 2012
Structure d’un projet ASP.NET 20
Nom Type Description
*.master Fichier Pages maîtres
Account Répertoires Fichiers nécessaires à l’authentification
Module 2 : Introduction à ASP.NET Web Forms
Scripts Répertoire Sctipts javascript (par exemple bibliothèque Jquery)
Global.asax Fichier Gestion de l’application et de la session
App_Start Répertoire Gestion de l’empaquetage et des fournisseurs
d’authentification
Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
- 21. Développement web avec ASP.NET et Visual Studio 2012
Tutoriel 2.1 : Dossiers ASP.NET 21
• Lancer Tutoriel 2.2, étape 1
Module 2 : Introduction à ASP.NET Web Forms
Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
- 22. Développement web avec ASP.NET et Visual Studio 2012
Module 2 : Introduction à ASP.NET Web Forms
22
Section 4 : Formes Web et
Contrôles Orientés Serveur
Copyright © 2013, Mostefai Mohammed Amine
- 23. Développement web avec ASP.NET et Visual Studio 2012
Anatomie d’une forme web 23
Module 2 : Introduction à ASP.NET Web Forms
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 24. Développement web avec ASP.NET et Visual Studio 2012
La directive « Page » 24
Nom Description
Language Langage de programmation du fichier code behind
AutoEventWireup Indique si les évènements de la page (tels que Page_Load) sont
Module 2 : Introduction à ASP.NET Web Forms
automatiquement appelés. Si la valeur est à « false », il faut affecter les
évènements de la page en redéfinissant la méthode « OnInit ».
Si la valeur est à « True », ASP.NET cherche une méthode dont le nom est
« Page_NomEvenement » et l’affecte à la page.
CodeFile Référence au fichier source correspondant au « code-behind » de la page
Inherits Nom de la classe qui représente la page.
Title Titre de la page
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 25. Développement web avec ASP.NET et Visual Studio 2012
Utilisation de la balise « form » dans les formes web 25
Chaque forme web inclut une balise HTML « form »
Module 2 : Introduction à ASP.NET Web Forms
<form id="form1" runat="server">
L’attribut « runat » indique que le formulaire est traité par le serveur.
ASP.NET utilise les formulaires pour gérer le cycle de vie des pages et
aussi des cycles de postback
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 26. Développement web avec ASP.NET et Visual Studio 2012
Contrôles Orientés Serveur 26
Les contrôles orientés serveur sont des contrôles traités par le serveur
Module 2 : Introduction à ASP.NET Web Forms
Lors de la génération des pages HTML, ces contrôles sont transformés en
balises HTML
Les contrôles ont l’attribut « runat » toujours égal à « server »
La propriété « id » permet d’accéder au contrôle via le code source (code
behind)
Les contrôles conservent leurs états dans un « VIEWSTATE »
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 27. Développement web avec ASP.NET et Visual Studio 2012
Contrôles Orientés Serveur - Exemples 27
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Module 2 : Introduction à ASP.NET Web Forms
<asp:Button ID="Button1" runat="server" Text="Button"
OnClick="Button1_Click" />
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 28. Développement web avec ASP.NET et Visual Studio 2012
Tutoriel 2.1 : Dossiers ASP.NET 28
• Lancer Tutoriel 2.2, étape 2
Module 2 : Introduction à ASP.NET Web Forms
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 29. Développement web avec ASP.NET et Visual Studio 2012
Contrôles HTML Serveur 29
Correspondent directement à des balises HTML
Module 2 : Introduction à ASP.NET Web Forms
Peuvent être manipulés par le « code behind » si l’attribut « runat » a la
valeur « server »
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 30. Développement web avec ASP.NET et Visual Studio 2012
Tutoriel 2.1 : Contrôles HTML Serveur 30
• Lancer Tutoriel 2.2, étape 3
Module 2 : Introduction à ASP.NET Web Forms
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 31. Développement web avec ASP.NET et Visual Studio 2012
Contrôles HTML Serveur - Liste 31
Nom Description
Input (Button) Génère un bouton
Input (Submit) Bouton de validation de formulaire
Module 2 : Introduction à ASP.NET Web Forms
Inout (Text) Zone de texte
Input (Checkbox) Case à cocher
Table Tableau
Select Liste combo
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 32. Développement web avec ASP.NET et Visual Studio 2012
Principaux contrôles orientés serveur - Standard 32
Nom Description
Button Génère un bouton
CheckBox Case à cocher
Module 2 : Introduction à ASP.NET Web Forms
HyperLink Génère un lien hypertexte
Image Génère une image
Label Libellé
ListBox Liste d’éléments
Panel Un panneau qui contient d’autres éléments
RadioButton Bouton radio
LinkButton Lien qui génère un Postback
Table Tableau
AdRotator Effet de diaporama sur plusieurs images
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 33. Développement web avec ASP.NET et Visual Studio 2012
Principaux contrôles orientés serveur - Standard 33
Nom Description
DropDownList Liste combinée
TextBox Zone de texte
Module 2 : Introduction à ASP.NET Web Forms
Literal Affiche un texte statique
Calendar Affiche un calendrier
FileUpload Permet d’uploader des fichiers vers le serveur
Wizard Permet de réaliser des assistants sur plusieurs pages
HiddenField Champ caché
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 34. Développement web avec ASP.NET et Visual Studio 2012
Principaux contrôles orientés serveur - Données 34
Nom Description
Chart Affiche des graphiques
GridView Affichage des données sous forme tabulaire
Module 2 : Introduction à ASP.NET Web Forms
SqlDataSource Accède à une source de données SQL Server
EntityDataSource Accède à une source de données Entity Framework
ListView Affichage des données sous forme de liste
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 35. Développement web avec ASP.NET et Visual Studio 2012
Principaux contrôles orientés serveur - Validation 35
Nom Description
CompareValidator Valide qu’une entrée d’un contrôle est égale à celle d’un autre
contrôle
Module 2 : Introduction à ASP.NET Web Forms
RangeValidator Valide que la valeur entrée appartient à un intervalle donné
RegularExpressionValidator Valide que la valeur entrée est conforme à une certaine expression
régulière
RequiredFieldValidator Valide que la valeur entrée n’est pas vide
ValidationSummary Rappel des messages de validation
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 36. Développement web avec ASP.NET et Visual Studio 2012
Principaux contrôles orientés serveur - Login 36
Nom Description
ChangePassword Redirige l’utilisateur pour changer son mot de passe
CreateUserWizard Assistant de création d’un nouvel utilisateur
Module 2 : Introduction à ASP.NET Web Forms
Login Formulaire d’authentification
LoginName Nom de l’utilisateur connecté
LoginView Affiche les informations en mode connecté ou déconnecté
PasswordRecovery Formulaire de perte de mot de passe
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 37. Développement web avec ASP.NET et Visual Studio 2012
Principaux contrôles orientés serveur - Navigation 37
Nom Description
Menu Menu déroulant
TreeView Arborescence
Module 2 : Introduction à ASP.NET Web Forms
SiteMapPath Carte du site
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 38. Développement web avec ASP.NET et Visual Studio 2012
Etat de vue (ViewState) 38
L’état de vue (VIEWSTATE) permet de sauvegarder l’état des contrôle afin
Module 2 : Introduction à ASP.NET Web Forms
de faciliter leur affichage entre plusieurs postbacks
Le VIEWSTATE peut être désactivé en mettant la propriété
« EnableViewState » à « false »
Pour améliorer les performances, le VIEWSTATE peut être désactivé au
niveau de la page parente et activé individuellement sur les contrôles
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 39. Développement web avec ASP.NET et Visual Studio 2012
Etat de contrôle(ControlState) 39
L’état des contrôles (ControlState) permet le fonctionnement de certains
Module 2 : Introduction à ASP.NET Web Forms
contrôles
Le ViewState concerne le contenu tandis que le ControlState concerne le
comportement du contrôle
L’état du contrôle ne peut pas être désactivé
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 40. Développement web avec ASP.NET et Visual Studio 2012
Propriétés communes des classes 40
Nom Description
ID Identifiant du contrôle, aussi utilisé dans le code behind
BackColor Couleur de fond
Module 2 : Introduction à ASP.NET Web Forms
BorderWidth, BorderStyle et Bordure
BorderColor
Font Police de caractères
ForeColor Couleur
CausesValidation Déclenche la validation
ClientIDMode Détermine comment ASP.NET donne des ids côté client au
contrôle lui permettant d’être manipulé par CSS ou JavaScript
AutoPostback Génère automatiquement un postback
EnableViewState Active ou désactive l’état de vue
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 41. Développement web avec ASP.NET et Visual Studio 2012
Propriétés communes des classes 41
Nom Description
CssClass Classe CSS
Width, Height Dimensions
Module 2 : Introduction à ASP.NET Web Forms
Enabled Active ou désactive le contrôle
Visible Affiche ou cache le contrôle
ReadOnly Indique que le contrôle est en lecture seule
Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
- 42. Développement web avec ASP.NET et Visual Studio 2012
Module 2 : Introduction à ASP.NET Web Forms
42
Section 5 : Contrôles ASP.NET
Copyright © 2013, Mostefai Mohammed Amine
- 43. Développement web avec ASP.NET et Visual Studio 2012
TextBox (Zone de texte) 43
Sert à entrer du texte
Propriété Description
Module 2 : Introduction à ASP.NET Web Forms
Text Contenu de la zone de texte
TextMode Mode d’affichage (prend en charge les nouveaux modes HTML5)
AutoPostback Génère automatiquement un postback après la modification du texte
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 44. Développement web avec ASP.NET et Visual Studio 2012
Button (Bouton) 44
Génère un bouton
Propriété Description
Module 2 : Introduction à ASP.NET Web Forms
Text Contenu du bouton
PostBackUrl URL vers laquelle le postback est redirigé dans le cas où le bouton est cliqué
UseSubmitBehavior Si « true », simule un bouton « submit » qui envoie les données d’un
formulaire
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 45. Développement web avec ASP.NET et Visual Studio 2012
DropDownList (Liste combinée) 45
Génère une liste combinée.
Propriété Description
Module 2 : Introduction à ASP.NET Web Forms
Autopostback Génère un postback à chaque fois qu’un élément est sélectionné
Items Les éléments constituant la liste. Chaque élément est caractérisé par une
valeur (Value) et un texte affiché (Text)
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 46. Développement web avec ASP.NET et Visual Studio 2012
CheckBox (Case à Cocher) 46
Génère une case à cocher. Idéale pour les choix booléens (oui ou non).
Propriété Description
Module 2 : Introduction à ASP.NET Web Forms
Text Texte affiché dans la case à cocher
Checked Indique si le case est cochée ou non
AutoPostBack Génère un postback à chaque fois que la case est cochée ou décochée
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 47. Développement web avec ASP.NET et Visual Studio 2012
RadioButton (Bouton radio) 47
Génère un bouton radio. Idéal pour effectuer un choix unique parmi plus de deux
options.
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Text Texte affiché dans la case à cocher
Checked Indique si le case est cochée ou non
GroupName Groupe auquel appartient le bouton radio. Pour un groupe donné, un seul
bouton radio peut être coché à la fois.
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 48. Développement web avec ASP.NET et Visual Studio 2012
HiddenField (Champ caché) 48
Permet de préserver des informations entre les différents post mais sans avoir à
les afficher dans la page.
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Value Valeur du champ caché
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 49. Développement web avec ASP.NET et Visual Studio 2012
HyperLink (Lien Hypertexte) 49
Génère un lien hypertexte.
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Text Texte du lien
NavigateUrl URL vers laquelle va pointer le lien.
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 50. Développement web avec ASP.NET et Visual Studio 2012
LinkButton (Lien avec Postback) 50
Lien hypertexte qui déclenche des postbacks.
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Text Texte du lien
PostbackUrl Lien de postback
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 51. Développement web avec ASP.NET et Visual Studio 2012
Image (Image) 51
Génère une image.
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
ImageUrl Url du fichier image
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 52. Développement web avec ASP.NET et Visual Studio 2012
Label (Libellé) 52
Génère un libellé.
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Text Contenu du libellé
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 53. Développement web avec ASP.NET et Visual Studio 2012
Label (Libellé) 53
Libellé (génère un span)
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Text Contenu du libellé
AssociatedControlID Contrôle associé (génère un label au lieu de span)
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 54. Développement web avec ASP.NET et Visual Studio 2012
Literal (Texte ou balises de remplacement) 54
Permet d’être remplacé par du texte ou par des balises
Module 2 : Introduction à ASP.NET Web Forms
Propriété Description
Text Contenu du litéral
Section 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
- 55. Développement web avec ASP.NET et Visual Studio 2012
Exercice 55
Exercice 2.1 (Durée 1 h):
Voir énoncé exercice 2.1
Module 2 : Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine