Module 2 introduction à asp.net web forms

6 717 vues

Publié le

Module 2 de la formation sur ASP.NET : Introduction

Publié dans : Technologie
0 commentaire
10 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 717
Sur SlideShare
0
Issues des intégrations
0
Intégrations
389
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
10
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Module 2 introduction à asp.net web forms

  1. 1. Développement web avecVisual Studio 2012 et ASP.NETModule 2 – Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine
  2. 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 2012Module 2 : Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine
  3. 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.NETModule 2 : Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine
  4. 4. Développement web avec ASP.NET et Visual Studio 2012 4 Module 2 : Introduction à ASP.NET Web Forms Section 1 : Introduction à .NET FrameworkCopyright © 2013, Mostefai Mohammed Amine
  5. 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 ServerSection 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
  6. 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 FXSection 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
  7. 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 FoundationSection 1 : Introduction à .NET Framework Copyright © 2013, Mostefai Mohammed Amine
  8. 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. 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.NETCopyright © 2013, Mostefai Mohammed Amine
  10. 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. 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 applicationsSection 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  12. 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 RessourcesSection 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  13. 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 dune for m e w eb OUI Génér er HTML NonSection 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  14. 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 FormsSection 2 : Présentation d’ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  15. 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. 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éploiementSection 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
  17. 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 projetSection 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
  18. 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 FormsSection 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
  19. 19. Développement web avec ASP.NET et Visual Studio 2012 Structure d’un projet ASP.NET 19Nom Type DescriptionApp_Data Répertoire Contient les données de l’application : bases de données, fichiers XML,… Module 2 : Introduction à ASP.NET Web FormsBin Répertoire Contient les binaires des assemblies générées par le projetObj Répertoire Contient les objets intermédiaires générés lors de la compilationProperties 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 solutionSection 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
  20. 20. Développement web avec ASP.NET et Visual Studio 2012 Structure d’un projet ASP.NET 20Nom Type Description*.master Fichier Pages maîtresAccount Répertoires Fichiers nécessaires à l’authentification Module 2 : Introduction à ASP.NET Web FormsScripts Répertoire Sctipts javascript (par exemple bibliothèque Jquery)Global.asax Fichier Gestion de l’application et de la sessionApp_Start Répertoire Gestion de l’empaquetage et des fournisseurs d’authentificationSection 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
  21. 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 FormsSection 3 : Développement d’applications web avec VS 2012 Copyright © 2013, Mostefai Mohammed Amine
  22. 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 ServeurCopyright © 2013, Mostefai Mohammed Amine
  23. 23. Développement web avec ASP.NET et Visual Studio 2012 Anatomie d’une forme web 23 Module 2 : Introduction à ASP.NET Web FormsSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  24. 24. Développement web avec ASP.NET et Visual Studio 2012 La directive « Page » 24Nom DescriptionLanguage Langage de programmation du fichier code behindAutoEventWireup 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 pageInherits Nom de la classe qui représente la page.Title Titre de la pageSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  25. 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 postbackSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  26. 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. 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. 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 FormsSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  29. 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. 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 FormsSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  31. 31. Développement web avec ASP.NET et Visual Studio 2012 Contrôles HTML Serveur - Liste 31Nom DescriptionInput (Button) Génère un boutonInput (Submit) Bouton de validation de formulaire Module 2 : Introduction à ASP.NET Web FormsInout (Text) Zone de texteInput (Checkbox) Case à cocherTable TableauSelect Liste comboSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  32. 32. Développement web avec ASP.NET et Visual Studio 2012 Principaux contrôles orientés serveur - Standard 32Nom DescriptionButton Génère un boutonCheckBox Case à cocher Module 2 : Introduction à ASP.NET Web FormsHyperLink Génère un lien hypertexteImage Génère une imageLabel LibelléListBox Liste d’élémentsPanel Un panneau qui contient d’autres élémentsRadioButton Bouton radioLinkButton Lien qui génère un PostbackTable TableauAdRotator Effet de diaporama sur plusieurs imagesSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  33. 33. Développement web avec ASP.NET et Visual Studio 2012 Principaux contrôles orientés serveur - Standard 33Nom DescriptionDropDownList Liste combinéeTextBox Zone de texte Module 2 : Introduction à ASP.NET Web FormsLiteral Affiche un texte statiqueCalendar Affiche un calendrierFileUpload Permet d’uploader des fichiers vers le serveurWizard Permet de réaliser des assistants sur plusieurs pagesHiddenField Champ cachéSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  34. 34. Développement web avec ASP.NET et Visual Studio 2012 Principaux contrôles orientés serveur - Données 34Nom DescriptionChart Affiche des graphiquesGridView Affichage des données sous forme tabulaire Module 2 : Introduction à ASP.NET Web FormsSqlDataSource Accède à une source de données SQL ServerEntityDataSource Accède à une source de données Entity FrameworkListView Affichage des données sous forme de listeSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  35. 35. Développement web avec ASP.NET et Visual Studio 2012 Principaux contrôles orientés serveur - Validation 35Nom DescriptionCompareValidator Valide qu’une entrée d’un contrôle est égale à celle d’un autre contrôle Module 2 : Introduction à ASP.NET Web FormsRangeValidator Valide que la valeur entrée appartient à un intervalle donnéRegularExpressionValidator Valide que la valeur entrée est conforme à une certaine expression régulièreRequiredFieldValidator Valide que la valeur entrée n’est pas videValidationSummary Rappel des messages de validationSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  36. 36. Développement web avec ASP.NET et Visual Studio 2012 Principaux contrôles orientés serveur - Login 36Nom DescriptionChangePassword Redirige l’utilisateur pour changer son mot de passeCreateUserWizard Assistant de création d’un nouvel utilisateur Module 2 : Introduction à ASP.NET Web FormsLogin Formulaire d’authentificationLoginName Nom de l’utilisateur connectéLoginView Affiche les informations en mode connecté ou déconnectéPasswordRecovery Formulaire de perte de mot de passeSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  37. 37. Développement web avec ASP.NET et Visual Studio 2012 Principaux contrôles orientés serveur - Navigation 37Nom DescriptionMenu Menu déroulantTreeView Arborescence Module 2 : Introduction à ASP.NET Web FormsSiteMapPath Carte du siteSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  38. 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ôlesSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  39. 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. 40. Développement web avec ASP.NET et Visual Studio 2012 Propriétés communes des classes 40Nom DescriptionID Identifiant du contrôle, aussi utilisé dans le code behindBackColor Couleur de fond Module 2 : Introduction à ASP.NET Web FormsBorderWidth, BorderStyle et BordureBorderColorFont Police de caractèresForeColor CouleurCausesValidation Déclenche la validationClientIDMode Détermine comment ASP.NET donne des ids côté client au contrôle lui permettant d’être manipulé par CSS ou JavaScriptAutoPostback Génère automatiquement un postbackEnableViewState Active ou désactive l’état de vueSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  41. 41. Développement web avec ASP.NET et Visual Studio 2012 Propriétés communes des classes 41Nom DescriptionCssClass Classe CSSWidth, Height Dimensions Module 2 : Introduction à ASP.NET Web FormsEnabled Active ou désactive le contrôleVisible Affiche ou cache le contrôleReadOnly Indique que le contrôle est en lecture seuleSection 4 : Formes Web et Contrôles Orientés Serveur Copyright © 2013, Mostefai Mohammed Amine
  42. 42. Développement web avec ASP.NET et Visual Studio 2012 Module 2 : Introduction à ASP.NET Web Forms 42 Section 5 : Contrôles ASP.NETCopyright © 2013, Mostefai Mohammed Amine
  43. 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 texteSection 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  44. 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 formulaireSection 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  45. 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. 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éeSection 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  47. 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. 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. 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. 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 postbackSection 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  51. 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 imageSection 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  52. 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. 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. 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éralSection 5 : Contrôles ASP.NET Copyright © 2013, Mostefai Mohammed Amine
  55. 55. Développement web avec ASP.NET et Visual Studio 2012 Exercice 55 Exercice 2.1 (Durée 1 h): Voir énoncé exercice 2.1Module 2 : Introduction à ASP.NET Web Forms Copyright © 2013, Mostefai Mohammed Amine

×