Module 2 introduction à asp.net web forms

Développement web avec
Visual Studio 2012 et ASP.NET

Module 2 – Introduction à ASP.NET Web Forms

Copyright © 2013, Mostefai Mohammed Amine

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


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



4
Module 2 : Introduction à ASP.NET Web Forms

Section 1 : Introduction à .NET
Framework



Présentation 5

 .NET Framework est une plateforme permettant de simplifier le

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


Architecture 6

Windows
Noyau WPF
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



Technologies .NET Framework 7

Windows

WPF Silverlight ASP.NET
Forms

ASP.NET Workflow
WCF ADO.NET
MVC Foundation



Visual Studio 8

 Visual Studio est l’outil préféré pour le développement d’applications

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



9

Section 2 : Présentation d’ASP.NET



Introduction 10

 ASP.NET est une technologie de développement

 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


Formes Web 11

 Une forme web est une page traitée par.NET Framework pour la

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



Composantes d’une application web 12

Formes web Fichiers de Fichiers de Pages maître
code configuration

Services web Ressources



Génération d’une page 13

Com piler la page
Page Non Com pilée ou Mod if iée

Invocat ion d'une for m e
w eb OUI

Génér er HTML

Non



Tutoriel 2.1 Création d’une application 14

• Lancer Tutoriel 2.1, Etape 1 – Etape 4




Section 3 : Développement
d’applications web avec VS 2012

15 Copyright © 2013, Mostefai Mohammed Amine


Procédé de développement d’applications web 16

Développement
Conception
et tests

Déploiement

Section 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine


Organisation d’un projet ASP.NET 17

 Lors de la création d’une application à partir d’un modèle, VS crée un

ensemble de fichiers ou de répertoires qui ont un rôle dans le projet



Tutoriel 2.1 : Dossiers ASP.NET 18

• Lancer Tutoriel 2.1, Etape5



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,…

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



Structure d’un projet ASP.NET 20

Nom Type Description
*.master Fichier Pages maîtres
Account Répertoires Fichiers nécessaires à l’authentification

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




• Lancer Tutoriel 2.2, étape 1




22
Section 4 : Formes Web et
Contrôles Orientés Serveur



Anatomie d’une forme web 23

Section 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine


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

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



Utilisation de la balise « form » dans les formes web 25

 Chaque forme web inclut une balise HTML « form »

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



Contrôles Orientés Serveur 26

 Les contrôles orientés serveur sont des contrôles traités par le serveur

 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 »



Contrôles Orientés Serveur - Exemples 27

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button"
OnClick="Button1_Click" />



Contrôles HTML Serveur 29

 Correspondent directement à des balises HTML

 Peuvent être manipulés par le « code behind » si l’attribut « runat » a la
valeur « server »



Tutoriel 2.1 : Contrôles HTML Serveur 30




Contrôles HTML Serveur - Liste 31

Nom Description
Input (Button) Génère un bouton
Input (Submit) Bouton de validation de formulaire

Inout (Text) Zone de texte
Input (Checkbox) Case à cocher
Table Tableau
Select Liste combo



Principaux contrôles orientés serveur - Standard 32

Nom Description
Button Génère un bouton
CheckBox Case à cocher

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



Principaux contrôles orientés serveur - Standard 33

Nom Description
DropDownList Liste combinée
TextBox Zone de texte

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é



Principaux contrôles orientés serveur - Données 34

Nom Description
Chart Affiche des graphiques
GridView Affichage des données sous forme tabulaire

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



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

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



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

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



Principaux contrôles orientés serveur - Navigation 37

Nom Description
Menu Menu déroulant
TreeView Arborescence

SiteMapPath Carte du site



Etat de vue (ViewState) 38

 L’état de vue (VIEWSTATE) permet de sauvegarder l’état des contrôle afin

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



Etat de contrôle(ControlState) 39

 L’état des contrôles (ControlState) permet le fonctionnement de certains

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é



Propriétés communes des classes 40

Nom Description
ID Identifiant du contrôle, aussi utilisé dans le code behind
BackColor Couleur de fond

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



Propriétés communes des classes 41

Nom Description
CssClass Classe CSS
Width, Height Dimensions

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




42
Section 5 : Contrôles ASP.NET



TextBox (Zone de texte) 43

 Sert à entrer du texte
Propriété Description

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


Button (Bouton) 44

 Génère un bouton

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



DropDownList (Liste combinée) 45

 Génère une liste combinée.

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)



CheckBox (Case à Cocher) 46

 Génère une case à cocher. Idéale pour les choix booléens (oui ou non).

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



RadioButton (Bouton radio) 47

 Génère un bouton radio. Idéal pour effectuer un choix unique parmi plus de deux
options.

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.



HiddenField (Champ caché) 48

 Permet de préserver des informations entre les différents post mais sans avoir à
les afficher dans la page.

Value Valeur du champ caché



HyperLink (Lien Hypertexte) 49

 Génère un lien hypertexte.

Text Texte du lien
NavigateUrl URL vers laquelle va pointer le lien.



LinkButton (Lien avec Postback) 50

 Lien hypertexte qui déclenche des postbacks.

Text Texte du lien
PostbackUrl Lien de postback



Image (Image) 51

 Génère une image.

ImageUrl Url du fichier image



Label (Libellé) 52

 Génère un libellé.

Text Contenu du libellé



Label (Libellé) 53

 Libellé (génère un span)

Text Contenu du libellé
AssociatedControlID Contrôle associé (génère un label au lieu de span)



Literal (Texte ou balises de remplacement) 54

 Permet d’être remplacé par du texte ou par des balises

Text Contenu du litéral



Exercice 55

Exercice 2.1 (Durée 1 h):
Voir énoncé exercice 2.1


Module 2 introduction à asp.net web forms

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Module 2 introduction à asp.net web forms (20)

Plus de Mohammed Amine Mostefai (20)

Dernier (7)

Module 2 introduction à asp.net web forms