Tutoriel 5.1–Validation

L’objectif de ce tutoriel (module 5) est d’utiliser les contrôles de validation afin de valider l’inscription d’un développeur à un site. Les informations suivantes doivent être validées : le nom et le prénom sont obligatoires. L’Age doit être numérique et compris entre 18 et 50. Les mails et téléphones doivent respecter le format nécessaire et le langage de programmation doit être soit C# soit C++. Etape 1 – Ajouter les contrôles de validation au formulaire Le but du tutoriel est de permettre à des développeurs de s’inscrire. Le développeur doit fournir les informations suivantes : Nom (obligatoire), Prénom (obligatoire), Age (entre 18 et 50), Langage (C# ou C++), Son mail et son numéro de téléphone portable. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « TestValidation » dans la zone « Nom » Cliquez sur OK Cliquez sur le bouton droit sur le projet « TestValidation » Ajoutez une nouvelle forme appelée « Default.aspx » Ouvrez « Default.aspx » en mode conception Faites glisser un label dans la page et affectez « Nom : » à la propriété « Text » de ce libellé A côté du libellé, glissez une zone de texte et affectez « txtNom » à la propriété « ID » Faites glisser un « RequiredFieldValidator » à côté de « txtNom » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre nom », ControlToValidate= « txtNom » et CssClass= « validationError », Display= « Dynamic ») Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Prénom : » à la propriété « Text » de ce libellé A côté du libellé, glissez une zone de texte et affectez " txtPrenom " à la propriété " ID " Faites glisser un « RequiredFieldValidator » à côté de « txtPrenom » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre prénom », ControlToValidate= « txtPrenom » et CssClass= « validationError », Display= « Dynamic ») Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Age : » à la propriété « Text » de ce libellé A côté du libellé, glissez une zone de texte et affectez « txtAge » à la propriété « ID » Faites glisser un « RequiredFieldValidator » à côté de « txtAge » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre age », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Faites glisser un « CompareValidator » à côté de « RequiredFieldValidator » que vous venez d’ajouter avec les propriétés suivantes : (ErrorMessage = « L’âge doit être une valeur numérique», ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Affectez « DataTypeCheck » à la propriété « Operator » du CompareValidator que vous venez d’ajouter Affectez « Integer » à la propriété « Type » du CompareValidator que vous venez d’ajouter Faites glisser un « RangeValidayor » à côté de « CompareValidator » avec les propriétés suivantes : (ErrorMessage = « L’age doit être inclus entre 18 et 50 », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Affectez « 18 » et « 50 » respectivement aux propriétés « Minimum » et « Maximum » du RangeValidator que vous venez d’ajouter Affectez « Integer » à la propriété « Type » du « RangeValidator » que vous venez d’ajouter Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Langage : » à la propriété « Text » de ce libellé A côté du libellé, glissez une zone de texte et affectez « txtLanguage » à la propriété « ID » Faites glisser un « CustomValidator » à côté de « txtLanguage » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer un langage correct », ControlToValidate= « txtLanguage » et CssClass= « validationError », Display= « Dynamic ») Double-cliquez sur le « CustomValidator », VS génère l’évènement de validation et génère automatiquement l’évènement ServerValidate Modifiez le code de l’évènement comme suit : protected void CustomValidator1_ServerValidate1(object source, ServerValidateEventArgs args) { args.IsValid = (args.Value == "C#") || (args.Value == "C++"); } Ouvrez la page « Default.aspx » en mode source Dans la section d’entête (avant la balise body), insérez le code JavaScript suivant : <script type="text/javascript"> function ClientValidationHandler(source, args) { args.IsValid = (args.Value == "C#") || (args.Value == "C++"); } </script> Ouvrez « Default.aspx » en mode conception Cliquez sur le « CustomValidator » que vous venez d’ajouter Dans la propriété « ClientValidationFunction » entrez « ClientValidationHandler » Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Mail : » à la propriété « Text » de ce libellé A côté du libellé, glissez une zone de texte et affectez « txtMail » à la propriété « ID » 7. Faites glisser un « RequiredFieldValidator » à côté de « txtMail » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre mail », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic ») Faites glisser un « RegularExpressionValidator » à côté du dernier « RequiredValidator » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer un mail correct », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic ») Dans la fenêtre de propriétés, Cliquez sur la propriété « ValidationExpression », remarquez le bouton avec les pointillés Cliquez sur le bouton avec pointillés, la fenêtre suivante apparaît : Sélectionnez « Adresse Mail » Cliquez sur « OK » Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « N° Mobile : » à la propriété « Text » de ce libellé A côté du libellé, glissez une zone de texte et affectez « txtMobile » à la propriété « ID » Faites glisser un " RegularExpressionValidator " à côté du dernier " RequiredValidator " avec les propriétés suivantes : (ErrorMessage = " Veuillez entrer un numéro correct ", ControlToValidate= " txtMobile " et CssClass= " validationError ", Display= " Dynamic ") Au début de la page, ajoutez un contrôle de type « ValidationSummary » Entrez « validationSummary » dans la propriété « CssClass » du « ValidationSummary » Ajoutez un saut de ligne et un bouton à la fin de la page Le code de la page devrait être équivalent à celui-ci :   <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="validationSummary" /> <br />       <asp:Label ID="Label1" runat="server" Text="Nom : "></asp:Label>   <asp:TextBox ID="txtNom" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNom" Display="Dynamic" ErrorMessage="Veuillez entre le nom" CssClass="validationError"></asp:RequiredFieldValidator> <br /> <asp:Label ID="Label2" runat="server" Text="Prénom : "></asp:Label> <asp:TextBox ID="txtPrenom" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPrenom" Display="Dynamic" ErrorMessage="Veuillez entrer le prénom" CssClass="validationError"></asp:RequiredFieldValidator> <br /> <asp:Label ID="Label3" runat="server" Text="Age : "></asp:Label> <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="Veuillez donner votre age" CssClass="validationError"></asp:RequiredFieldValidator> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="L'age doit être une valeur numérique" Operator="DataTypeCheck" Type="Integer" CssClass="validationError"></asp:CompareValidator> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" ErrorMessage="L'age doit être 18 et 50" MaximumValue="50" MinimumValue="18" Type="Integer" CssClass="validationError"></asp:RangeValidator> <br /> <asp:Label ID="Label4" runat="server" Text="Langage : "></asp:Label> <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>   <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" OnServerValidate="CustomValidator1_ServerValidate1" ClientValidationFunction="ClientValidationHandler" ControlToValidate="txtLanguage" CssClass="validationError">Veuillez entrer un langage correct</asp:CustomValidator>   <br /> <asp:Label ID="Label5" runat="server" Text="Mail : "></asp:Label> <asp:TextBox ID="txtMail" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RequiredFieldValidator">Veuillez entrer le mail</asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Veuillez entrer un mail valide</asp:RegularExpressionValidator> <br /> <asp:Label ID="Label6" runat="server" Text="N° Mobile : "></asp:Label> <asp:TextBox ID="txtMobile" runat="server"></asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtMobile" CssClass="validationError" ErrorMessage="Veuillez entrer un numéro correct" ValidationExpression="^0(5|6|7)(\d{8})$"></asp:RegularExpressionValidator>   <br />   <asp:Button ID="Button1" runat="server" Text="Button" /> Etape 2 : Installer les paquets nécessaires à la validation côté client avec JQuery L’objectif de cette étape est d’installer les paquets « JQuery » et « AspNet.ScriptManager.JQuery » qui sont nécessaire à mettre en place la validation côté client. Dans le menu cliquez sur « Outils –> Gestionnaire de Paquets –> Console du Gestionnaire de Paquets » La fenêtre ci-dessous s’affiche : Dans la console, entrez « Install-Package JQuery » Une fois le paquet JQuery installé, entrez « Install-Package AspNet.ScriptManager.JQuery » Les paquets installés permettent de gérer la validation côté client avec JQuery Etape 3 : Ajouter du style aux composants de la validation L’objectif de cette étape est d’ajouter les règles CSS nécessaires à afficher les informations de validation en rouge et avec une taille de texte légèrement plus petite. Dans le projet, créer une feuille de style appelée « Site.css » Changez le code du CSS comme suit : body { font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif; }   input { margin : 2px; }   .validationError { font-size: 0.8em; color: red; }   .validationSummary { margin : 5px; padding : 5px; background-color : red; color : white; }   .validationSummary ul { list-style : none; }   Appliquez le style « Site.css » à la forme « Default.aspx » Exécutez l’application en appuyant sur « F5 » Pour télécharger le code cliquez ici

Tutoriel 4.2–Utilisation des pages maitre.

L’objectif de ce tutoriel (module 4) est d’apprendre à utiliser les pages maitres pour uniformiser les pages d’une application web. Pour ce, nous créerons trois pages web dont la page d’accueil avec une structure à deux niveaux en utilisant les pages maitre imbriquées. Etape 1 – Créer une page maître Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « TestMaster » dans la zone « Nom » Cliquez sur OK Cliquez sur le bouton droit sur « TestMaster » dans l’explorateur de solutions Sélectionnez « Ajouter un nouvel élément » Dans le modèle sélectionnez « Page Maître » Dans la zone « Nom », entrez « Main » Appuyez sur OK Ouvrez la page maître en mode source Vérifiez que VS l’a créée avec la directive « Master » au lieu de « Page » <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="TestMaster.Main" %> Vérifiez que VS a inséré deux conteneurs (ContentPlaceHolder) dans la page maître Insérez une balise de type entête (Header) juste avant le second conteneur avec la classe CSS «header » Entourez le deuxième conteneur dans une div avec la classe « content » <form id="form1" runat="server"> <header class="header"> </header> <div class="content"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> Ouvrez la page maître en mode conception Ajoutez un menu dans l’entête en glissant un menu à partir de la boîte à outils Dans la zone de propriétés du menu, cliquez sur « Items » Ajoutez deux éléments « Page 1 » et « Page 2 » Dans l’élément « Page 2 », ajoutez deux sous-éléments, « Page 2.1 » et « Page 2.2 » Cliquez sur OK Modifiez la page maître en mode source comme suit : <form id="form1" runat="server"> <header class="header"> <asp:Menu ID="Menu1" runat="server" CssClass="siteMenu" ForeColor="White" Orientation="Horizontal"> <DynamicHoverStyle BackColor="#FFFFB0" ForeColor="#666666" /> <Items> <asp:MenuItem Text="Page 1" Value="Page 1" NavigateUrl="~/Default.aspx"></asp:MenuItem> <asp:MenuItem Text="Page 2" Value="Page 2"> <asp:MenuItem Text="Page 2.1" Value="Page 2.1" NavigateUrl="~/Page21.aspx"></asp:MenuItem> <asp:MenuItem Text="Page 2.2" Value="Page 2.2" NavigateUrl="~/Page22.aspx"></asp:MenuItem> </asp:MenuItem> </Items> <LevelMenuItemStyles> <asp:MenuItemStyle BackColor="#990000" Font-Underline="False" HorizontalPadding="10px" ItemSpacing="20px" VerticalPadding="10px" /> <asp:MenuItemStyle BackColor="#990000" Font-Underline="False" HorizontalPadding="10px" ItemSpacing="20px" VerticalPadding="10px" /> </LevelMenuItemStyles> <LevelSelectedStyles> <asp:MenuItemStyle BackColor="#FFFFB0" Font-Underline="False" ForeColor="Gray" /> <asp:MenuItemStyle BackColor="#FFFFB0" Font-Underline="False" ForeColor="#666666" /> </LevelSelectedStyles> <StaticHoverStyle BackColor="#FFFFB0" ForeColor="#666666" /> </asp:Menu> </header> <div class="content"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> Dans le projet, ajoutez une feuille de style appelée « Site.css » Modifiez le CSS comme suit : body { padding: 0; margin: 0; font-family: 'Gill Sans' , 'Gill Sans MT' , Calibri, 'Trebuchet MS' , sans-serif; background-color: #808080; }   .header { min-height: 75px; background-color: #115E66; }   .siteMenu { margin-top : 65px; }   div.content { padding : 15px; }   div.lateralBar { background-color: #99CCFF; margin : 5px; width : 160px; height : 140px; float : left; }   div.innerContent { padding : 15px; float : left; }   div.clear { clear : both; } Ouvrez la page maître en mode conception Faites glisser la feuille de style sur la page maître afin d’appliquer les styles Dans l’explorateur de solutions, cliquez pour ajouter un nouvel élément au projet « TestMaster » Dans le modèle, choisissez « Forme Web » utilisant une page maître Entrez default dans la zone « Nom » Apparaît ensuite une boîte de sélection de la page maître à appliquer. Sélectionnez « Main » Cliquez ensuite sur « OK » Ouvrez Default.aspx en mode source Vérifiez que la directive « Page » contient une autre propriété appelée « MasterPageFile » <%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMaster.Default" %> Ouvrez « Default.aspx » en mode conception Entrez « Bienvenue dans la page 1 dans la page principale Exécutez pour voir Etape 2 : Création de pages maîtres imbriquées L’objectif de cette étape est de créer un deuxième niveau de navigation en utilisant les pages maître imbriquées. Dans l’explorateur de solutions, ajoutez un nouvel élément au projet « TestMaster » Sélectionnez « Page Maître Imbriquée » dans le modèle Dans la zone « Nom » entrez « Child » Cliquez sur OK Ouvrez la page « Child » en mode source Vérifiez que la directive est « Master » et que cette directive possède une propriété « MasterPageFile » <%@ Master Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Child.master.cs" Inherits="TestMaster.Child" %> Dans le deuxième composant « Content » ajoutez trois « div » avec les classes « lateralBar », « innerContent » et « clear » respectivement Modifiez le code comme suit : <div class="lateralBar"> <ul> <li> Sous-Menu 1 </li> <li> Sous-Menu 2 </li> </ul> </div> <div class="innerContent"> </div> <div class="clear"></div> Ouvrez la page maître Child en mode conception A partir de la boîte à outils, faites glisser un composant « ContentPlaceHolder » à l’intérieur de la div « innerContent » Créez une forme web de contenu « Page21 » avec pour page maître « Child » Insérez « Bienvenue dans la page 2.1 » dans cette page De la même façon, créer une forme web de contenu « Page22 » avec le message « Bienvenue dans la page 2.2 » Exécutez en appuyant sur « F5 » Pour télécharger le code, cliquez ici

Tutoriel 4.1 - Navigation et Passage d’information

L’objectif de ce tutoriel, premier du module 4, est de voir les différents mécanismes permettant de naviguer entre des pages et de passer des informations entre ces pages. Les différents mécanismes serviront à afficher une liste de film, à modifier des films, à mettre à jour et à supprimer des films. Etape 1 – Créer une application ASP.NET vide et faire un lien entre deux pages L’objectif de cette étape est de montrer comment naviguer entre deux pages en utilisant le composant « HyperLink ». Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « Navigation » dans la zone « Nom » Cliquez sur OK Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet puis sélectionnez : Ajout à Forme Web Dans la zone nom, entrez « Default » Ajoutez une autre forme appelée « Liste » Ouvrez « Default.aspx » en mode conception Ajoutez un contrôle « HyperLink » dans la page Dans la propriété « Text » entrez « Liste » Cliquez sur la propriété « NavigateUrl » puis sur le bouton « Parcourir » Sélectionnez la page « List.aspx » Cliquez sur « OK » Exécutez l’application Examinez comment le lien permet de rediriger vers une autre page   Etape 2 : Ajout de traitements de modification et de suppression dans le service de films L’ancienne version de la bibliothèque ne disposait pas de fonctions d’ajout ou de suppression de films. L’objectif de cette étape est d’intégrer ces fonctions. Dans l’explorateur de solutions, cliquez sur le bouton droit sur la solution (pas le projet) Cliquez avec le bouton droit puis sélectionnez, « Ajouter un Projet Existant » Parcourir afin de trouver le projet « Bibliotheque » utilisé précédemment Cliquez sur le projet « Navigation » puis ajouter une classe globale d’application « Global.asax » Dans le projet « Navigation », ajoutez une référence vers le projet « Bibliotheque » Modifiez « Global.asax » comme suit : protected void Application_Start(object sender, EventArgs e) { ServicesDonnees.SetFilmService(new FilmService()); } Ouvrez le fichier « IFilmService.cs » dans le projet « Bibliotheque » et modifiez le comme suit : public interface IFilmService { /// <summary> /// ajoute un film /// </summary> /// <param name="f"></param> void Add(Film f);   /// <summary> /// supprimer un film /// </summary> /// <param name="f"></param> void Delete(Film f);   /// <summary> /// renvoie un film à partir de son numéro /// </summary> /// <param name="numero"></param> /// <returns></returns> Film GetFilm(int numero);   /// <summary> /// renvoie tous les films /// </summary> /// <returns></returns> IEnumerable<Film> GetAll(); } Ouvrez la classe « FilmService » et modifiez-la comme suit : public class FilmService : IFilmService { private List<Film> _liste = new List<Film>();   public FilmService() { // ajout d'exemple AjouterFilm(1, "Avatar", 2011); AjouterFilm(2, "Salt", 2011); AjouterFilm(3, "The Dark Knight Rises", 2012); AjouterFilm(4, "Alien", 1979); }   private void AjouterFilm(int numero, string titre, int annee) { var film = new Film(numero, titre, annee); _liste.Add(film); }   public Film GetFilm(int numero) { return _liste.FirstOrDefault(e => e.Numero == numero); }   public IEnumerable<Film> GetAll() { return _liste; }   public void Add(Film f) { _liste.Add(f); }     public void Delete(Film f) { _liste.Remove(f); } } Appuyez sur « F6 » pour vérifier que le code compile correctement. Etape 3 : Affichage de la liste des films L’objectif de cette étape est d’afficher la liste des films existants sous forme de tableau. Ça permettra entre autre de manipuler le composant « Table ». Ouvrez la forme « List.aspx » en mode conception et ajoutez un label avec l’id « lblMessage » et une table comme suit : <form id="form1" runat="server">   <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label> <asp:Table ID="Table1" runat="server"> </asp:Table>   </form> Modifiez l’évènement « PageLoad » de la page « List » comme suit : Appuyez ensuite sur « F5 » pour vérifier que ça exécute correctement protected void Page_Load(object sender, EventArgs e) { lblMessage.Visible = false; var row = new TableRow(); var cell = new TableCell(); cell.Text = "Num"; row.Cells.Add(cell); cell = new TableCell(); cell.Text = "Titre"; row.Cells.Add(cell); cell = new TableCell(); cell.Text = "Année"; row.Cells.Add(cell); cell = new TableCell(); row.Cells.Add(cell); cell.Text = "Détails"; Table1.Rows.Add(row); foreach (Film f in ServicesDonnees.FilmService.GetAll()) { row = new TableRow(); cell = new TableCell(); cell.Text = f.Numero.ToString(); row.Cells.Add(cell); cell = new TableCell(); cell.Text = f.Titre; row.Cells.Add(cell); cell = new TableCell(); cell.Text = f.Annee.ToString(); row.Cells.Add(cell); cell = new TableCell(); var link = string.Format("Edit.aspx?mode=edit&numero={0}", f.Numero); cell.Text = string.Format("<a href=\"{0}\">Modifier", link); row.Cells.Add(cell); Table1.Rows.Add(row); } }   Etape 4 : Création de la page d’édition de films L’objectif de cette étape est de créer une page permettant de modifier ou d’ajouter des films. Pour connaître le mode en cours (insertion ou modification), on utilise la variable « mode » qui est transmise sous forme de chaine de requête avec l’URL. En mode modification, le film à modifier est connu en utilisant la chaîne de requête « numero ». Les différents messages seront transmis à la page d’accueil en utilisant les variables de session. Dans le projet « Navigation » ajoutez une page qui s’appelle « Edit.aspx » Insérez des contrôles dans Edit.aspx de façon à pouvoir ajouter ou modifier un film comme suit : <form id="form1" runat="server"> <div>   <asp:Label ID="lblMessage" runat="server" Text="Label" ForeColor="#FF3300"></asp:Label><br />   <asp:Label ID="Label1" runat="server" Text="Numéro :"></asp:Label> <asp:TextBox ID="txtNumero" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label2" runat="server" Text="Titre : "></asp:Label> <asp:TextBox ID="txtTitre" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label3" runat="server" Text="Annee :"></asp:Label> <asp:TextBox ID="txtAnnee" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" Text="Enregistrer" /> </div>   </form>     Modifiez l’évènement « Page_Load » de la page « Edit.aspx » comme suit : protected void Page_Load(object sender, EventArgs e) { lblMessage.Visible = false; var editMode = Request.QueryString["mode"]; Session["message"] = null; Film film = null; if (editMode == "edit") { var numero = int.Parse(Request.QueryString["numero"]); film = ServicesDonnees.FilmService.GetFilm(numero); } if (!IsPostBack) { if (editMode == "edit") { // afficher le fim txtNumero.Text = film.Numero.ToString(); txtTitre.Text = film.Titre; txtAnnee.Text = film.Annee.ToString(); } } else { try { if (editMode == "add") film = new Film(); film.Numero = int.Parse(txtNumero.Text); film.Titre = txtTitre.Text; film.Annee = int.Parse(txtAnnee.Text); if (editMode == "add") { ServicesDonnees.FilmService.Add(film); Session["message"] = "Film ajoute avec succes"; } else Session["message"] = "Film modifié avec succes"; Response.Redirect("List.aspx");   } catch { lblMessage.Text = "Veuillez vérifiez vos données"; lblMessage.Visible = true; } } La page vérifie qu’elle est en mode édition ou ajout en examinant la variable de requête « mode » Si elle est en mode « modification », elle récupère l’id du film à modifiez en examinant la chaîne de requête « numero » puis affiche les informations de ce film En mode postback, selon on est en mode ajout ou modification, la page ajoute ou modifie la film puis redirige vers la page « List » Si l’opération s’est bien déroulée, la page « Edit » communique un message vers la page « List » en utilisant la propriété « Session » Appuyez sur « F6 » pour vérifier que le code compile Ouvrez la page « List.aspx » comme suit : <form id="form1" runat="server">   <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label> <asp:Table ID="Table1" runat="server"> </asp:Table> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Edit.aspx?mode=add">Ajout</asp:HyperLink> <br /> <asp:TextBox ID="txtEdit" runat="server"></asp:TextBox> <asp:Button ID="btnSupprimer" runat="server" PostBackUrl="~/Delete.aspx" Text="Supprimer" /> </form> Ouvrez le fichier code behind « List.aspx.cs » Insérez le code suivant juste après la première instruction de la méthode if (Session["message"] != null) { lblMessage.Text = Session["message"].ToString(); lblMessage.Visible = true; Session["message"] = null; } Exécutez l’application en appuyant sur F5 et vérifiez que l’application peut ajouter et supprimer des films et que les messages de succès s’affichent correctement. Etape 5 : Communication entre pages en utilisant « PostbackUrl » L’objectif de cette étape est d’implémenter la suppression qui est gérée par une autre page. On utilise la propriété « PostbackUrl » et « PreviousPage » pour passer à la page de suppression les informations concernant le film à supprimer. Ouvrez la page « List.aspx » en mode source Vérifiez la propriété « PostBackUrl » du bouton « supprimer » <asp:Button ID="btnSupprimer" runat="server" PostBackUrl="~/Delete.aspx" Text="Supprimer" /> Dans le projet « Navigation », ajoutez une forme web appelée « Delete.aspx » Changez l’évènement Page_Load de cette page comme suit : protected void Page_Load(object sender, EventArgs e) { var page = PreviousPage as List; if (page == null) { Session["message"] = "erreur"; Response.Redirect("List.aspx"); return; } var textBox = page.FindControl("txtEdit") as TextBox; int numero; if (!int.TryParse(textBox.Text, out numero)) { Session["message"] = "entrez une valeur numérique"; Response.Redirect("List.aspx"); } else { var film = ServicesDonnees.FilmService.GetFilm(numero); if (film == null) { Session["message"] = "Film non trouvé"; Response.Redirect("List.aspx"); } else { ServicesDonnees.FilmService.Delete(film); Session["message"] = "Film supprimé avec succès"; Response.Redirect("List.aspx"); } } } Vérifiez l’utilisation de la propriété « PreviousPage » La valeur du numéro du film est récupérée en utilisant la méthode « FindControl » Exécutez l’application en appuyant sur « F5 » Vérifiez que la suppression d’un film se déroule bien et qu’un message apparait. Etape 6 : Intégration des contrôles utilisateur L’objectif de cette étape est de réutiliser un contrôle utilisateur dans le but d’éviter la redondance du code. Comme exemple, chacune des pages du site contiendra un contrôle permettant à l’utilisateur d’ajouter un commentaire. Dans l’explorateur de solutions, ajoutez un nouvel élément Dans le modèle, choisissez « Contrôle Utilisateur Web » Dans la zone « Nom », entrez « CommentsControl »   Ouvrez le contrôle en mode source Vérifiez qu’il y a une directive « Control » à la place de la directive « Page » Ajoutez un label et une zone de texte multiligne dans le contrôle comme suit : <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CommentControl.ascx.cs" Inherits="Navigation.CommentControl" %> <asp:Label ID="Label1" runat="server" Text="Votre commentaire :"></asp:Label> <br /> <asp:TextBox ID="TextBox1" runat="server" Rows="4" TextMode="MultiLine" Width="338px"></asp:TextBox> Ouvrez « List.aspx » en mode conception Par un glisser déposer, glissez « CommentsControl » à la fin de la page Vérifiez que Visual Studio a ajouté la directive « Register » au début du fichier, en dessous de la directive « Control » <%@ Register src="CommentControl.ascx" tagname="CommentControl" tagprefix="uc1" %> Vérifiez dans le code, qu’un composant CommentsControl a été ajouté comme suit : <uc1:CommentControl ID="CommentControl1" runat="server" /> Vérifiez que la page « List.aspx » ressemble à ceci :   De la même façon, ajoutez un contrôle « CommentsControl » dans la page « Edit.aspx » Vérifiez l’exécution et l’intégration du contrôle en cliquant sur « F5 »   Pour télécharger le source, cliquez ici

Tutoriel 3.1–Intégration de traitements

L’objectif de ce tutoriel du module 3 est de voir comment intégrer les traitements dans les applications ASP.NET. Etape 1 – Créer une application ASP.NET vide Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « ProgrammationWeb » dans la zone « Nom » Cliquez sur OK Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet puis sélectionnez : Ajout à Forme Web Dans la zone nom, entrez « Default » Cliquez sur OK La forme web est affichée en mode source Appuyez sur « F7 » pour accéder au code behind Constatez le code généré comme suit : public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {   } } Dans l’explorateur de solutions, développer Default.aspx Remarquez la présence des fichiers : « Default.aspx.cs » et « Defaut.aspx.designer.cs » Ouvrez « Default.aspx.designer.cs » et examinez son contenu Revenez sur « Default.aspx » et ajoutez un « Label » Re-Vérifiez le contenu du fichier « Default.aspx.designer.cs » Remarquez que la classe « Default » est partielle et qu’elle est étalée sur deux fichier (code behind et designer). public partial class Default {   /// <summary> /// form1 control. /// </summary> /// <remarks> /// Auto-generated field. /// To modify move field declaration from designer file to code-behind file. /// </remarks> protected global::System.Web.UI.HtmlControls.HtmlForm form1;   /// <summary> /// Label1 control. /// </summary> /// <remarks> /// Auto-generated field. /// To modify move field declaration from designer file to code-behind file. /// </remarks> protected global::System.Web.UI.WebControls.Label Label1; } Supprimez le « label » qui vient d’être ajouté Etape 2 : Ajout d’une bibliothèque de classes L’objectif de cette étape est de créer une bibliothèque de classe contenant plusieurs classes métier dont « Film » et « FilmService ». En utilisant « FilmService », l’utilisateur pourra accéder et chercher des films. Dans l’explorateur de solutions, cliquez sur la solution (pas le projet) avec le bouton droit Sélectionnez Ajout –> Nouveau Projet Dans le modèle, choisissez « Bibliothèque de classes » Dans la zone « Nom » entrez « Bibliotheque » Cliquez sur « OK » La solution est maintenant composée de deux projets au lieu d’un seul Remarquez la présence de la classe « Class1 » créée par défaut Depuis l’explorateur de solutions, supprimez le fichiers Class1 Dans l’explorateur de solutions, cliquez sur « Bibliotheque » avec le bouton droit puis cliquez « Ajout » à « Classe » Dans la zone « Nom » entrez « Film » Cliquez sur OK Dans le fichier Film.cs, remplacez la classe « Film » comme suit : public class Film {   public Film() { }   public Film(int numero, string titre, int annee) { this.Numero = numero; this.Annee = annee; this.Titre = titre; }   public int Numero { get; set; }   public int Annee { get; set; }   public string Titre { get; set; }   } Compilez en appuyant sur « F6 », vérifiez qu’il n’y a pas d’erreurs Dans l’explorateur de solutions, cliquez sur le bouton droite sur « Bibliotheque » Cliquez sur « Ajouter »à « Nouvel Elément » Choisissez le modèle « Interface » Dans la zone « Nom », entrez « IFilmService » Cliquez sur « OK » Remplacez le code de « IFilmService » comme suit :   public interface IFilmService { /// <summary> /// renvoie un film à partir de son numéro /// </summary> /// <param name="numero"></param> /// <returns></returns> Film GetFilm(int numero);   /// <summary> /// renvoie tous les films /// </summary> /// <returns></returns> IEnumerable<Film> GetAll(); } Ajoutez une classe au projet « Bibliotheque » appelée « FilmService » Modifiez cette classe de façon à ce qu’elle hérite de l’interface « IFilmService » Remarquez le SmartTag bleu s’affichant en dessous de « IFilmService » Cliquez sur le « SmartTag » puis sélectionnez « Implémenter IFilmService» Modifiez la classe « FilmService » comme suit : public class FilmService : IFilmService { private List<Film> _liste = new List<Film>();   public FilmService() { // ajout d'exemple AjouterFilm(1, "Avatar", 2011); AjouterFilm(2, "Salt", 2011); AjouterFilm(3, "The Dark Knight Rises", 2012); AjouterFilm(4, "Alien", 1979); }   private void AjouterFilm(int numero, string titre, int annee) { var film = new Film(numero, titre, annee); _liste.Add(film); }   public Film GetFilm(int numero) { return _liste.FirstOrDefault(e => e.Numero == numero); }   public IEnumerable<Film> GetAll() { return _liste; } } Vérifiez que le code compile en appuyant sur le bouton « F6 ». Etape 3 : Ajout du « Global.asax » et utilisation de la bibliothèque de classes L’objectif de cette étape est de configurer le service de films dans l’initialisation de l’application en utilisant « Global.asax ». Dans le projet « Bibliotheque », ajoutez une classe appelée « ServicesDonnees » Modifiez la classe ServiceDonnees comme suit : Vérifiez que le code compile en appuyant sur « F6 » public static class ServicesDonnees { public static void SetFilmService(IFilmService instance) { FilmService = instance; }   public static IFilmService FilmService { get; private set; } } Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet « ProgramationWeb » Sélection Ajouter à Nouvel Elément Choisissez le modèle « Classe Globale d’Application » Cliquez sur « OK » Dans l’explorateur de solutions, cliquez sur le bouton droit sur le noeau « Références » se trouvant dans le projet « ProgrammationWeb » Sélectionnez « Ajouter une référence » Dans le panneau à gauche, cliquez sur « Solution » Cochez le projet « Bibliotheque » Appuyez sur « OK » Les classes de « Bibliotheque » sont désormais utilisables dans l’application web Dans l’explorateur, double-cliquez sur « Global.asax » Placez le curseur dans la méthode « Application_Start » Tapez « ServicesDonnees » Remarquez le SmartTag qui apparaît, cliquez sur le SmartTag Sélectionnez « using Bibliotheque » Remarquez que « Bibliotheque » a été ajouté à la liste des « using » au début du fichier Modifiez le fichier comme suit : Vérifiez que le code compile en appuyant sur « F6 » public class Global : System.Web.HttpApplication {   protected void Application_Start(object sender, EventArgs e) { ServicesDonnees.SetFilmService(new FilmService()); }   protected void Session_Start(object sender, EventArgs e) {   }   protected void Application_BeginRequest(object sender, EventArgs e) {   }   protected void Application_AuthenticateRequest(object sender, EventArgs e) {   }   protected void Application_Error(object sender, EventArgs e) {   }   protected void Session_End(object sender, EventArgs e) {   }   protected void Application_End(object sender, EventArgs e) {   } } Etape 4 : Cycle de vie d’une page L’objectif de cette étape est d’utiliser l’évènement « Page_Load » dans les deux situations : en mode normal pour initialiser la page et en mode « Postback » pour chercher le numéro entré dans la zone de texte. Ouvrez Default.aspx en mode conception Faites glisser une zone de texte, un bouton, un label et un autre bouton et arrangez-les comme suit : <form id="form1" runat="server"> <div>   <asp:Label ID="Label1" runat="server" Text="Numéro :"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="btnChercher" runat="server" Text="Chercher" /> <br /> <asp:Label ID="lblMessage" runat="server" ForeColor="Red" Text="LabelMessage"></asp:Label> <br /> <asp:Button ID="btnDetails" runat="server" OnClick="btnDetails_Click" Text="Détails" UseSubmitBehavior="False" Visible="False" /> <br />   </div> </form>   Modifiez Page_Load comme suit : lblMessage.Visible = false; btnDetails.Visible = false; if (IsPostBack) { int numero; if (int.TryParse(TextBox1.Text, out numero)) { var film = ServicesDonnees.FilmService.GetFilm(numero); if (film != null) { btnDetails.Text = "Détails sur le film " + numero.ToString(); btnDetails.Visible = true; } else ShowMessage("film non trouvé"); } else ShowMessage("Veuillez entrer une valeur numérique correcte"); } Ajoutez la méthode ShowMessage comme suit : private void ShowMessage(string message) { lblMessage.Text = message; lblMessage.Visible = true; } Exécutez en appuyant sur « F5 » Etape 5 : Contrôles Orientés Serveur L’objectif de cette étape est de gérer les actions des utilisateurs de l’application en implémentant des évènements des contrôles orientés serveur. Ajouter un panneau à la fin de la forme « Default.aspx » Ajoutez des labels de la façon suivante : <asp:Panel ID="PanelInfo" runat="server"> <asp:Label ID="Label3" runat="server" Text="Numéro : "></asp:Label> <asp:Label ID="lblNumero" runat="server" Text="Label"></asp:Label> <br /> <asp:Label ID="Label4" runat="server" Text="Titre : "></asp:Label> <asp:Label ID="lblTitre" runat="server" Text="Label"></asp:Label> <br /> Année : <asp:Label ID="lblAnnee" runat="server" Text="Label"></asp:Label> </asp:Panel> Changez la méthode Page_Load comme suit : protected void Page_Load(object sender, EventArgs e) { lblMessage.Visible = false; btnDetails.Visible = false; PanelInfo.Visible = false; if (IsPostBack) { int numero; if (int.TryParse(TextBox1.Text, out numero)) { var film = ServicesDonnees.FilmService.GetFilm(numero); if (film != null) { btnDetails.Text = "Détails sur le film " + numero.ToString(); btnDetails.Visible = true; lblNumero.Text = numero.ToString(); lblAnnee.Text = film.Annee.ToString(); lblTitre.Text = film.Titre.ToString(); } else ShowMessage("film non trouvé"); } else ShowMessage("Veuillez entrer une valeur numérique correcte"); } } Doublez-cliquez sur le bouton « détails » Dans l’évènement généré, entrez le code suivant : protected void btnDetails_Click(object sender, EventArgs e) { PanelInfo.Visible = true; } Exécutez en appuyant sur F5 Pour télécharger le code source : cliquez ici

Tutoriel 2.2 : Création d’une application ASP.NET vide

L’objectif de ce deuxième tutoriel du module 2 est de découvrir la structure d’une application ASP.NET à partir d’un modèle vide. Il s’agit aussi de voir la différence entre les contrôles ASP.NET serveur et les contrôles HTML serveur. Etape 1 – Créer une application ASP.NET vide L’objectif de cette étape est de découvrir la création d’applications avec un modèle vierge. Il s’agit aussi de découvrir les propriétés « Request » et « Response » permettant de lier la page aux requêtes et réponses http. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « DeuxiemeApp » dans la zone « Nom » Cliquez sur OK Examinez le contenu du projet   Dans l’explorateur de solution, cliquez sur le projet « DeuxiemeApp » avec le bouton droit puis sélectionnez « Ajouter un nouvel élément » Sélectionnez « Forme web » dans le modèle Entrez « Default.aspx » dans la zone nom Cliquez sur le bouton « Ajouter » Ouvrez « Default.aspx » en mode conception En utilisant la boîte à outils, Insérez une zone de texte dans la « div » inclue dans la page En utilisant la boîte à outils, insérez un bouton après la zone de texte Double-cliquez sur le bouton Insérez le code suivant dans l’évènement de clic : protected void Button1_Click(object sender, EventArgs e) { TextBox1.Text = "Formation"; } Modifiez la méthode Page_Load comme suit : protected void Page_Load(object sender, EventArgs e) { var url = Request.RawUrl; if (IsPostBack) Response.Write(url + " en mode postback"); else Response.Write(url + " en mode normal"); } Etape 2 : Comparaison entre les balises HTML et les contrôles serveur L’objectif de cette étape est de comparer le code HTML généré avec les balises contenues dans la forme web. Relancez l’application Examinez le code source de la page Etape 3 : Ajout de contrôles HTML Serveur L’objectif de cette étape est de découvrir les contrôles HTML et d’y accéder à partir du code en changeant l’attribut « runat ». Fermez la fenêtre du navigateur Ouvrez « Default.aspx » en mode conception Faites glisser un contrôle de type « Input (Button) » juste après le bouton qui existe Changez la propriété « id » en « monBouton » Basculez en mode code Changer le code du nouveau bouton comme suit en mettant à jour son attribut « runat » : <input id="monBouton" type="button" value="button" runat="server" /> Basculez vers le code behind en appuyant sur F7 Modifiez « Page_Load » comme suit : protected void Page_Load(object sender, EventArgs e) { var url = Request.RawUrl; monBouton.Value = "Test"; if (IsPostBack) Response.Write(url + " en mode postback"); else Response.Write(url + " en mode normal"); } Exécutez l’application en appuyant sur « F5 »  Pour télécharger le code : Tutoriel 2.2.zip (28,72 kb)

Tutoriel 2.1 : Création d’une application ASP.NET à partir d’un modèle

Ceci est le premier des deux tutoriaux du module 2. Son objectif est de créer une application ASP.NET à partir du modèle fourni par Visual Studio 2012. Etape 1 – Créer une application ASP.NET L’objectif de cette étape est de créer une application ASP.NET à partir du modèle fourni avec Visual Studio. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET Entrez « PremiereApp » dans la zone « Nom » Cliquez sur OK Examinez le contenu du projet Etape 2 : Exécution L’objectif de cette étape est de découvrir le comportement de l’application en exécution sur le navigateur. Exécutez l’application en appuyant sur « F5 »  Etape 3 : Découverte des Contrôles ASP.NET L’objectif de cette étape est de découvrir les contrôles ASP.NET dans la boîte à outils de Visual Studio. Fermez la fenêtre du navigateur Ouvrez le fichier « Default.aspx » en mode conception Examinez les différents contrôles dans la boîte à outils Etape 4 : Utilisation d’un contrôle serveur L’objectif de cette étape est d’ajouter un contrôle ASP.NET à une page existante, d’affecter des propriétés et de coder un évènement. Ouvrez la page « Contact.aspx » en mode conception Pointez le curseur à la fin puis appuyez sur « entrée » Remarquez la création d’un nouveau paragraphe « <p> » Par un glisser-déposer, insérez un composant « Libellé » dans le nouveau paragraphe Entrez votre nom dans la propriété « Text » Ajoutez un bouton après le libellé Entrez le texte « Changer » dans la propriété « Text » du bouton Double-cliquez le bouton Entrez le code suivant dans l’évènement généré ensuite exécutez l’application protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } Etape 5 : Examination des répertoires du projet L’objectif de cette étape est d’examiner la structure des répertoires d’un projet ASP.NET. Dans l’explorateur de solutions cliquez sur le bouton droit sur le projet Sélectionnez « Ouvrir dans l’explorateur de fichiers » Examinez l’arborescence des répertoires dans l’explorateur Windows Pour télécharger le code :  Tutoriel 2.1.zip (1,97 mb)

Création d’un site web statique avec Visual Studio 2012 (Tutoriel 1.1)

L’objectif de ce tutoriel est de créer un site web statique avec Visual Studio. Le site sera composé d’une page HTML, une feuille de style CSS et d’un fichier Javascript. Ce tutoriel est relatif au module “introduction à ASP.NET et Visual Studio 2012” Etape 1 – Lancer Visual Studio L’objectif de cette étape est de se familiariser avec la création de site web sous VS 2012. Lancer VS 2012 Choisir Fichier -> Nouveau -> Site Web Choisir le modèle « site web ASP.NET vide » Choisir l’emplacement du site (répertoire) Cliquez sur OK Etape 2 – Création d’une page web L’objectif de cette étape est de créer des pages HTML avec Visual Studio et d’y ajouter des balises HTML. Cliquez sur le menu « Fichierà Nouveau à Fichier » Dans les modèles, choisissez « Page HTML » Dans le nom entrez « index.html » Cliquez sur OK Dans l’éditeur, tapez le code suivant entre <body> et </body> <p>Bienvenue à la <span id="mot">formation</span> ASP.NET et de développement web</p> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } En utilisant la barre d’outils, glissez un « div » juste après la balise fermante </p> Dans la fenêtre de propriétés, entrez « footer» dans la zone « ID » <div id="footer"></div>   Etape 3 : Modification de la page en mode « Conception » L’objectif de cette étape est d’apprendre à modifier les pages HTML en utilisant le designer de Visual Studio. Basculez en mode conception de « Index.html » en appuyant sur le bouton « Conception » de l’éditeur Ajoutez les mots suivants : « et de développement web » à la fin du paragraphe   Etape 4 – Création de fichiers CSS et Javascript Cliquez sur Fichierà Nouveau à Fichier Dans les modèles, choisissez feuille de style Dans la zone nom, entrez « Site.css » Cliquez sur le bouton OK Entrez le code suivant dans le fichier CSS : body { }   span#mot { color : red; }   div#footer { margin 5; min-height : 40px; background-color : green; } Enregistrez le fichier Par un glisser-déposer, faites glisser le fichier CSS à partir de l’explorateur de solutions sur le fichier HTML et remarquez comment le style a été appliqué sur la page   Cliquez sur Fichier à Nouveau à Fichier Dans le modèle, choissez « Javascript » Dans la zone nom, entrez « MyScript.JS » Dans l’éditeur tapez le code suivant : function sayHello(me) { alert('hello ' + me); } Ouvrez le fichier « Index.html » en mode source Faites un glisser déposer du fichier « MyScript.js » vers « index.html » (entre les balises HEAD » Modifiez le code HTML comme suit : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="Site.css" rel="stylesheet" type="text/css" /> <script src="MyScript.js"></script> </head> <body> <p> Bienvenue à la <span id="mot" onclick="sayHello(‘Votre nom);">formation</span> ASP.NET et de développement web </p> <div id="footer"></div> </body> </html> Cliquez sur le bouton « Exécuter » Etape 5 : Débogage L’objecif de cette étape est d’utiliser les fonctions de débogage de Visual Studio afin de créer un point d’arrêt sur un script JavaScript et d’évaluer une variable dans une fonction JavaScript. Fermez la fenêtre du site Ouvrez MyScript.js Insérez un point d’arrêt sur l’instruction « alert » en double-cliquant sur la barre latérale   Exécutez le site en appuyant sur « F5 » Appuyez sur le texte « formation » Remarquez VS qui se met en mode « debogage » et renvoie sur le fichier « MyScript.js »   Faites passer la sourir sur la variable « me » Vérifiez que cette variable correspond à la valeur passée lors de l’appel Appuyez sur F5 pour continuer l’exécution Fermez la fenêtre du site Pour télécharger le code source, cliquez ici.

Développement d’applications de bases de données avec ASP.NET, Module 6

Un module bien important qui montre l’utilisation des différentes technologies .NET permettant de connecter des applications .NET à une application ASP.NET. à noter que la base de données AdventureWorks est nécessaire pour les tutoriaux. Tutoriaux associés : Tutoriel 6.1 : Connexion aux bases de données en utilisant ADO.NET Tutoriel 6.2 : Connexion à une base de données en utilisant Entity Framework Tutoriel 6.3 : Connexion des contrôles aux bases de données