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