Plan ASP.NET ASP.NET MVC ASP.NET ASP.NET. 1. Développement

Transcription

1 Plan ASP.NET ASP.NET MVC Lionel Seinturier Université de Lille 1 2. Contrôles 2.1 Contrôles élémentaires 2.3 Programmation de contrôles Lionel.Seinturier@univ-lille1.fr 19/1/15 ASP.NET 1 Lionel Seinturier ASP.NET 2 Lionel Seinturier Active Server Pages (ASP) ASP.NET ASP vs ASP.NET ASP.NET du code Java embarqué dans une page HTML mêmes principes JSP, PHP les fichiers.aspx sont stockés sur le serveur (comme des docs) ils sont désignés par une URL le chargement de l'url provoque l'exécution de l'asp côté serveur Client IE Firefox Serveur CLR prog.aspx ASP.NET 3 Lionel Seinturier 2 3.NET évolution des ASP pour prendre en compte.net extension.asp (.aspx pour ASP.NET) ASP : VBScript ou JScript ASP.NET : VB, C#, langages.net ASP: interprété/non typé ASP.NET : compilé/typé ASP.NET vs JSP modèle de programmation similaire ++ ASP.NET = composants graphiques (contrôles) ASP.NET vs servlet pas d'équivalent de l'api servlet dans le monde ASP.NET en interne, les ASP.NET sont traduites en classes et compilées ASP.NET 4 Lionel Seinturier

2 Illustration du fonctionnement <H1>Table des factorielles</h1> <% int i,fact; for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) { Response.Write( i + "! =" + fact + "<BR>" ); %> invocation! exécution côté serveur Principe de fonctionnement <H1>Table des factorielles</h1> <% int i,fact; for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) { Response.Write( i + "! =" + fact + "<BR>" ); %> ce qui est renvoyé au client <H1>Table des factorielles</h1> 1! = 1<BR> 2! = 2<BR> 3! = 6<BR> du code C# résultat = HTML généré via l'objet prédéfini Response ASP.NET 5 Lionel Seinturier ASP.NET 6 Lionel Seinturier Principe de fonctionnement Principe de fonctionnement plusieurs zones <%... %> possibles dans une même ASP.NET exécutées dans leur ordre de définition une classe générée pour chaque ASP.NET ne change pas tant que le fichier.aspx n'est pas modifié instanciée pour traiter une requête pas de persistence de l'instance (objet) entre 2 invocations besoin : conserver de l'information " déclarer des attributs static ASP.NET 7 Lionel Seinturier ASP.NET 8 Lionel Seinturier

3 Méthodes et variables d'instance Entre les balises <script runat="server"> et </script> <H1>Compteur</H1> <script runat="server"> static int compteur = 0; int GetCompteur() { return compteur++; </script> <H1> <% Response.Write(GetCpt()); %> </H1> Exemple 1ère invocation 2ème invocation ASP.NET 9 Lionel Seinturier ASP.NET 10 Lionel Seinturier Balise <script> Les objets implicites Le code peut être défini dans un fichier externe <H1>Compteur</H1> <script runat="server" src="url" /> <H1> <% Response.Write(GetCpt()); %> </H1> Objets prédéclarés utilisables dans le code Request la requête qui a provoqué le chargement Response la réponse à la requête de chargement Session suivi de session pour un même client Session.Add( string name, object value ) Session[string name] Application espace de données partagé entre toutes les ASP.NET idem Session Directive Import <%@ Import Namespace = "..."> using Cache données gardées en cache par le serveur Server information sur le serveur, inclusion, délégation de pages Trace générer des traces d'exécution ASP.NET 11 Lionel Seinturier ASP.NET 12 Lionel Seinturier

4 Récupération des données d'un formulaire Propriété Params de l'objet prédéfini Request! retourne le texte saisi! ou null si le nom de paramètre n'existe pas <FORM ACTION=" METHOD=POST> Nom <INPUT NAME="nom"> <P> Prénom <INPUT NAME="prenom"> <P> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise à zéro"> </FORM> Récupération des données d'un formulaire <H1>Exemple de résultat</h1> Bonjour <% Response.Write( Request.Params.Get("prenom") ); %> <% Response.Write( Request.Params.Get("nom") ); %> clic ASP.NET 13 Lionel Seinturier ASP.NET 14 Lionel Seinturier Inclusion de pages ASP.NET 4 Délégation de page aggrégation des résultats fournis par plusieurs page! meilleure modularité! meilleure réutilisation Méthode Server.Execute ASP.NET ASP.NET 1 ASP.NET 2 ASP.NET 3 ASP.NET 5 Une page peut déléger le traitement d'une requête à une autre! prise en compte complète de la requête par la page déléguée Méthode Server.Transfer Tout ce qui est après Transfer est ignoré <H1>ASP.NET principale</h1> <% Server.Execute(" inc.aspx "); %> Fichier inc.aspx <H1>ASP.NET incluse</h1> <H1>ASP.NET principale</h1> <% Server.Transfer(" transf.aspx "); %> URL URL ASP.NET 15 Lionel Seinturier ASP.NET 16 Lionel Seinturier

5 Gestion des erreurs Erreur d'exécution du code ex. : NullReferenceException, DivideByZeroException,! dans tous les cas, erreur récupérée dans le navigateur client 2 possibilités Exemple de gestion d'erreur <H1>Pourvu...!!</H1> <% Random r = new Random(); double h = (double)r.next(); int hasard = (int) (h/int32.maxvalue*5); %> <H1> <% Response.Write(12/hasard); %> </H1> Si hasard = 0 page d'erreur par défaut conserver la page par défaut construite par le serveur Web en concevoir une adaptée aux besoins particuliers de l'application ASP.NET 17 Lionel Seinturier ASP.NET 18 Lionel Seinturier Exemple de gestion d'erreur Gestion des traces <%@ Page Language="c#" ErrorPage="err.aspx" %> <H1>Pourvu...!!</H1> <% Random r =... %> <H1> <%... (12/hasard) %> </H1> Si hasard = 0 page d'erreur err.aspx <h1>le 0 est sorti!!</h1> debugger contrôler/inspecter le déroulement d'une appli web! à la main : Response.Write : lourd, long à enlever pour passer en prod. Objet prédéfini Trace System.Web.TraceContext Trace.Write(string message) Trace.Write(string categorie, string message) Trace.Write(string categorie, string message, Exception e) idem méthode Warn : les messages apparaissent en rouge dans les traces ASP.NET 19 Lionel Seinturier ASP.NET 20 Lionel Seinturier

6 Activation des traces Page Trace="true" %> Exemple factorielle À chaque itération : Trace.Write( "i=" + i + " / fact=" + fact ); ASP.NET 21 Lionel Seinturier Les objets prédéfinis ASP.NET Request.Params la requête qui a provoqué le chargement System.Web.HttpRequest les paramètres de la requêtes.rawurl l'url complète.filepath le chemin du fichier dans l'url /foobar/c2/webform1.aspx.physicalpath le chemin ϕ du fichier sur disque c:\inetput\wwwroot\foobar\c2\webform1.aspx.physicalapplicationpath la racine de l'application c:\inetput\wwwroot\foobar\.headers les en-têtes de la requête HTTP.UserHostName l'@ du client.userhostaddress l'ip du client.userlanguages les préférences du client en terme de langues.cookies lecture d'un cookie ASP.NET 22 Lionel Seinturier Les objets prédéfinis ASP.NET Response la réponse à une requête System.Web.HttpResponse.ContentType le type MIME du contenu retourné au client (text/html, image/gif, ).Cache gestion de la politique de cache de la réponse (date expiration).setcookie positionnement d'un cookie chez le client Les objets prédéfinis ASP.NET Session gestion d'une session client System.Web.SessionState.HttpSessionState Fonctionne comme une table de hachage indicée Session["key"] = object object res = Session["key"] // null si la clé n'existe pas object res = Session[int] le i-ème élément de la session Session.Count le # d'éléments dans la session Session.GetEnumerator() un itérateur sur toutes les éléments de la session Session.Remove("key") Session.RemoveAt(int) Session.RemoveAll() Session créée lors de la 1ère visite d'un client (Session.IsNewSession vaut true) Session.Timeout délai d'inactivité (en minutes) au delà duquel la session expire ASP.NET 23 Lionel Seinturier ASP.NET 24 Lionel Seinturier

7 Les objets prédéfinis ASP.NET Application espace de données partagé par tous les clients System.Web.HttpApplicationState Fonctionne comme une table de hachage indicée Application["key"] = object object res = Application["key"] // null si la clé n'existe pas object res = Application[int] le i-ème élément de la session Application.Count le # d'éléments dans la session Application.GetEnumerator() un itérateur sur toutes les éléments de la session Application.Remove("key") Application.RemoveAt(int) Application.RemoveAll() Les objets prédéfinis ASP.NET Cache espace de données partagé par tous les clients par rapport Application : peut avoir une durée de vie limitée System.Web.Caching.Cache Server informations sur le server System.Web.HttpServerUtility ASP.NET 25 Lionel Seinturier ASP.NET 26 Lionel Seinturier Plan Philosophie ASP.NET 2. Contrôles 2. Contrôles 2.1 Contrôles élémentaires 2.3 Programmation de contrôles Séparer rendu graphique traitement 2 fichiers.aspx le code de présentation et celui des contrôles fichier XTHML (HTML 4.0 formulé en XML) Web form.aspx.cs,.aspx.vb, fichier dit codebehind classe contenant les traitements ASP.NET 27 Lionel Seinturier ASP.NET 28 Lionel Seinturier

8 Les contrôles 2. Contrôles Les contrôles existant par défaut 2. Contrôles Composants graphiques pour l écriture de pages ASP.NET pour agir avec l'utilisateur : lui présenter de l'information pour réagir aux actions de l'utilisateur : déclencher des traitements utilisation en drag-and-drop dans VS pour la conception page web analogue atelier conception IHM en client lourd classe / objet propriétés : les caractéristiques d'affichage (ex. Text pour un TextBox) événements : réactions (clic, frappe, changement, ) autant d'objets par page que de contrôles "déposés" sur la page interaction avec la page interaction avec les objets rendu HTML de la page à partir de l'état des objets toutes les balises HTML standards (<input> <img> <p> ) composants supplémentaires fournis par MS (redondants avec HTML mais + évolués) affichage : Label, Image, Panel, Tabel bouton : Button, Hyperlink, ImageButton, LinkButton saisie : TextBox, CheckBox, RadioButton, FileUpload, liste : ListBox, DropDownList, validation : CompareValidator, RequiredFieldValidator, RangeValidator, divers : Calendar données : DataList, GridView, DetailsView login. + de nouveaux contrôles peuvent être programmés par l utilisateur ASP.NET 29 Lionel Seinturier ASP.NET 30 Lionel Seinturier Exemple 2.1 Contrôles élémentaires Exemple 2.1 Contrôles élémentaires Contrôles TextBox et Button Contrôles TextBox et Button Fichier WebForm1.aspx <%@ Page Language="c#" CodeFile="WebForm1.aspx.cs" Inherits="WebForm1" %> <html> <body> <form id="form1" runat="server"> <asp:textbox ID="MyTextBox" runat="server" /> <asp:button ID="MyButton" runat="server" OnClick="MyButton_Click" /> </form> </body> Fichier WebForm1.aspx.cs demo >> ASP.NET 31 Lionel Seinturier public partial class WebForm1 : System.Web.UI.Page { public void MyButton_Click(object sender, System.EventArgs e) { MyTextBox.Text = "Hello world!"; ASP.NET 32 Lionel Seinturier

9 Contrôle TextBox Propriétés principales 2.1 Contrôles élémentaires ID : identificateur unique (propriété présente pour tous les contrôles) Text : le texte affiché MaxLength : taille max du texte TextMode : SingleLine MultiLine Password ReadOnly : false true Columns : le nombre de colonnes Rows : le nombre de lignes (MultiLine) BackColor, BorderColor, ForeColor : couleurs BorderStyle, BorderWidth, Font : affichage Événement principal TextChanged : le texte change (méthode de réaction OnTextChanged) Association page - code 2.1 Contrôles élémentaires 1ère solution :.aspx + codebehind + association (On ) déclarée dans.aspx 2ème solution : sans codebehind définir le code des méthodes de traitements des événements dans le fichier.aspx entre des balises <script runat="server"> et </script>! 1 seul fichier à gérer, moins modulaire 3ème solution :.aspx + codebehind + association (On ) déclarée dans codebehind ne pas utiliser l'attribut OnClick dans le fichier.aspx ajouter un gestionnaire d'événement sur le bouton dans le code C# en redéfinissant la méthode exécutée lors du chargement (OnInit)! couplage moins fort entre le fichier.aspx et le codebehind! plus difficile à manipuler, moins intuitif ASP.NET 33 Lionel Seinturier ASP.NET 34 Lionel Seinturier Contrôle GridView présentation d'information sous forme de tableau édition, suppression pager automatique tri Exemple d'utilisation édition des données d'une table SQL! associé à un contrôle DataSource Contrôle DataSource source des données à afficher SqlDataSource : un SGBD (SQL Server, ) AccessDataSource : un fichier Access XmlDataSource : un fichier XML ObjectDataSource : des objets (C#, VB, ) Définition d une SqlDataSource une connection string (~ chemin d accès aux données) 4 commandes SQL : SELECT, INSERT, DELETE, UPDATE ASP.NET 35 Lionel Seinturier ASP.NET 36 Lionel Seinturier

10 Exemples Contrôle GridView Exemple de DataSource <asp:sqldatasource ID="SqlDataSource1" runat="server" ConnectionString="Driver={SQL Server;server=localhost;database=master" ProviderName="System.Data.Odbc" SelectCommand="SELECT * FROM [foo]" DeleteCommand="DELETE FROM [foo] WHERE [nom] =?" InsertCommand="INSERT INTO [foo] ([nom], [age]) VALUES (?,?)" UpdateCommand="UPDATE [foo] SET [age] =? WHERE [nom] =?"> </asp:sqldatasource> Exemple de GridView <asp:gridview ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="nom" AutoGenerateColumns="True" AllowPaging="True" PageSize="4" AllowSorting="True" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"> </asp:gridview> demo >> ASP.NET 37 Lionel Seinturier Propriétés principales ID AllowPaging, AllowSorting AutoGenerateColumns AutoGenerateDeleteButton (idem Edit, Select) Rows : les lignes affichées dans le GridView SelectedIndex : l'indice de la ligne sélectionnée ex. utilisation : GridView1.Rows[GridView1.SelectedIndex].Cells[0].Text EditIndex, PageIndex Événements principaux RowUpdating : juste avant de mettre à voir une ligne RowUpdated : après avoir mis à jour une ligne idem SelectedIndexChanging/ed, Sorting/ed, RowDeleting/ed, PageIndexChanging/ed ASP.NET 38 Lionel Seinturier Contrôle DetailsView présentation sous forme de fiches même action que GridView (édition, suppression) action supplémentaire : ajout action manquante : sélection Exemple <asp:detailsview ID="DetailsView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="nom" AutoGenerateRows="true" AutoGenerateEditButton="True" AutoGenerateDeleteButton="True" AutoGenerateInsertButton="True" AllowPaging="True" > </asp:detailsview> demo >> ASP.NET 39 Lionel Seinturier ASP.NET 40 Lionel Seinturier

11 2.3 Programmation de contrôles Contrôles définis par l'utilisateur (Web User Control) factorisation de code HTML et de scripts fichier.ascx <table><tr> <td><asp:textbox id="jour" runat="server" /></td><td>/</td> <td><asp:textbox id="mois" runat="server" /></td><td>/</td> <td><asp:textbox id="annee" runat="server" /></td> <script language="c#" runat="server"> public string Jour { // les propriétés du contrôle get { return jour.text; set { jour.text=value; /* idem Mois, Annee */ </script> </tr></table> 2.3 Programmation de contrôles Contrôles définis par l'utilisateur <%@ Register TagPrefix préfixe XML pour le contrôle TagName identifiant du contrôle Src URL du fichier.ascx <%@ Register TagPrefix="foo" TagName="bar" Src="Date.ascx" %> <html><body> <form runat="server"> <foo:bar id="jma" runat="server" /> <asp:label id="label" runat="server" /> <asp:button id="button" text="go!" runat="server" onclick="click" /> </form> <script runat="server"> void Click(object sender, System.EventArgs e) { Label.Text = JMA.Jour; </script></body></html> ASP.NET 41 Lionel Seinturier ASP.NET 42 Lionel Seinturier Contrôles définis par l'utilisateur 2.3 Programmation de contrôles 2.3 Programmation de contrôles Contrôles définis par l'utilisateur une classe est générée pour chaque contrôle (ex : Date_ascx) instanciée lorsqu'on l'utilise <foo:bar id="jma" runat="server" /> Alternativement peut être instanciée par programme LoadControl("Date.ascx") ajoutée dynamiquement à une page clic ASP.NET 43 Lionel Seinturier <script runat="server"> void Page_Load() { Control dt = LoadControl("Date.ascx"); ((Date_ascx)dt).Jour = 12; Frm.Controls.Add(dt); </script> <form id="frm" runat="server">... ASP.NET 44 Lionel Seinturier

12 2.3 Programmation de contrôles Autre façon de définir des contrôles utilisateur étendre System.Web.UI.WebControls.WebControl redéfinir CreateChildControls Avantage : le contrôle peut-etre défini à l'aide d'un DOM HTML! on ne se préoccupe pas d'écrire le code HTML public class MyWebControl : WebControl { protected override void CreateChildControls() { Table tbl = new Table(); TableRow row = new tablerow(); TableCell cell = new TableCell(); TextBox box = new TextBox(); box.id = "jour"; cell.controls.add(box); row.cells.add(cell); table.rows.add(row); Controls.Add(table); ASP.NET 45 Lionel Seinturier Plan 2. Contrôles 2.1 Contrôles élémentaires 2.3 Programmation de contrôles ASP.NET 46 Lionel Seinturier Model View Controller Contrôleur 1978 Smalltalk Xerox PARC nombreux langages et frameworks Web (Ruby on Rails, JSF, Spring, etc.) principe de séparation des préoccupations (separation of concerns) modèle, vue et contrôleur dans des domaines séparés qui peuvent ou pas correspondre à des classes, méthodes, packages, etc. pas de règles conventions reçoit les requêtes des clients renvoie les réponses contient des méthodes correspondant à des actions qui sont mis en relation avec une vue qui intéragissent avec le modèle récupère des données dans le modèle les renvoie à l'utilisateur via une vue ASP.NET 47 Lionel Seinturier ASP.NET 48 Lionel Seinturier

13 Contrôleur Contrôleur hérite de System.Web.Mvc.Controller suffixe Controller une méthode par action URL d'invocation en fonction du nom de la méthode public class HelloWorldController : Controller { public string Greet() { return "Hello World!"; Controller fournit le mécanisme qui reçoit/renvoie la requête HTTP la décode recherche la méthode à invoquer en fonction de l'url possibilité de déclarer des paramètres public class HelloWorldController : Controller { public string Greet( string id ) { return "Hello World "+id; en général les contrôleurs retournent une vue public ActionResult Index( int id ) { Compte compte = db.comptes.find(id); return View(compte); ASP.NET 49 Lionel Seinturier ASP.NET 50 Lionel Seinturier Vue Vue ASP.NET ou Razor Razor : syntaxe HTML avec du code C# (ou VB) pour définir des vues fichier.cshtml HTML var hello = "Hello world at "; var time = DateTime.Now; var msg = hello + int i=0 ; i < 10 ; i++ ) { <li>@i</li> </ul> simplifie l'écriture des pages par rapport à.aspx avec <%... %> Razor fournit un objet utilitaire simplifie notamment la génération de formulaire d'édition de la fiche","edit") // génère un lien HTML vers l'action Edit du contrôleur associé à la vue // équivalent à <a href="/.../edit">modifier voir par exemple pour plus d'informations sur la syntaxe ASP.NET 51 Lionel Seinturier ASP.NET 52 Lionel Seinturier

14 Transmission de données entre contrôleur et vue Modèle object ViewBag object dynamique, pas de champ prédéfini champs définis en fonction des besoins public class HomeController : Controller { public ActionResult TestData() { ViewBag.Time = DateTime.Now; ViewBag.Foo = "Bar"; return View(); Vue <h2>testdata View</h2> <h3>il est <h3>foo classe définissant les données métier de l'application une propriété par donnée classe additionnelle héritant de System.Data.Entity.DbContext using System.Data.Entity; public class Compte { public int Id { get; set; public string Titulaire { get; set; public double Solde { get; set; public class CompteDbContext : DbContext { public DbSet<Compte> Comptes { get; set; demo >> ASP.NET 53 Lionel Seinturier ASP.NET 54 Lionel Seinturier Modèle Route opérations courantes effectuées par les vues sur DbContext (voir Entity Framework) CompteDbContext db = new CompteDbContext(); db.comptes.tolist(); // liste des comptes Compte compte = db.comptes.find(42); // recherche d'un compte Compte compte = new { Id=42, Titulaire="Bob", Solde=123 ; db.comptes.add(compte); db.savechanges(); // ajout d'un compte Compte compte = db.comptes.find(42); compte.solde += 100; db.savechanges(); // modification d'un compte Compte compte = db.comptes.find(42); db.comptes.remove(compte); db.savechanges(); // suppression d'un compte la 4ème composante de MVC permet d'aiguiller les requêtes HTTP vers un contrôleur particulier /App_Start/RouteConfig.cs méthode static RegisterRoute public class RouteConfig { public static void RegisterRoute { routes.maproute( "Product", // nom de la route "product/{action/{id", // pattern URL new { controller="product", action="index", id="" ); routes.maproute( "Default", "{controller/{action/{id", new { controller="home", action="index", id="" ); ASP.NET 55 Lionel Seinturier ASP.NET 56 Lionel Seinturier

15 Route Ressources en ligne alternativement directement à l'aide d'annotations sur le contrôleur technique dite attribute routing [RoutePrefix("reviews")] public class ReviewsController : Controller { [Route] // accès via public ActionResult Index() {... nombreuses tutoriel introduction/getting-started [Route("{reviewId")] // /reviews/42 public ActionResult Show( int reviewid ) {... [Route("{reviewId/edit")] // /reviews/99/edit public ActionResult Edit( int review ) {... ASP.NET 57 Lionel Seinturier ASP.NET 58 Lionel Seinturier