Exercices 1 : première application Web
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveau site Web.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET vide.
4. Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.
5. Par exemple, tapez le nom de dossier C:\Exemple.
6. Dans la liste Langage, cliquez sur Visual C# pour sélectionner le langage de programmation que vous utiliserez dans l'ensemble du projet Web.
7. Cliquez sur OK.
8. Dans l'explorateur de solution, un click-droit sur le site Web site, et en suite cliquer sur Ajouter un nouvel élément.
9. La boîte de dialogue Ajouter un nouvel élément s'affiche.
10. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
11. Cliquez sur l’onglet HTML du formulaire, ajoutez les contrôles HTML suivants sur le formulaire :
Une zone de texte Input (Text) : TextBox1 Un bouton Input (Button) : Button1 Un label : Label1
12. Nous allons essayer de faire en sorte que lorsque l’utilisateur clique sur le bouton, le label soit mis à jour avec le contenu de la zone de texte.
13. Basculez en mode HTML et ajoutez la mention runat=server dans les trois contrôles :
<input id="Text1" type="text" runat="server" /> <input id="Button1" type="button" value="button" runat="server"/><br /> <div id="Label1" runat="server">Label </div>
14. Notez que nous aurions pu modifier ces propriétés par l’interface de Design en sélectionnant chacun des contrôles et en modifiant les propriétés souhaitées dans la fenêtre de propriétés.
15. Double-cliquez sur le bouton. Nous nous retrouverons maintenant dans
l’événement Click de ce bouton :
<head runat="server"> <title></title> <script language="javascript" type="text/javascript"> <!-- function Button1_onclick() { } // --> </script> </head>
16. Insérer le code suivant :
function Button1_onclick() { Label1.innerText = form1.Text1.value; }
17. Compilez le projet Web par le menu Générer / Régénérer la solution
18. Exécutez le formulaire en effectuant un click droit sur Default1.aspx dans l’explorateur de solution et en choisissant Afficher dans le navigateur.
19. Testez le fonctionnement du formulaire.
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveau site Web.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET vide.
4. Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.
5. Par exemple, tapez le nom de dossier C:\Exemple.
6. Dans la liste Langage, cliquez sur Visual C# pour sélectionner le langage de programmation que vous utiliserez dans l'ensemble du projet Web.
7. Cliquez sur OK.
8. Dans l'explorateur de solution, un click-droit sur le site Web site, et en suite cliquer sur Ajouter un nouvel élément.
9. La boîte de dialogue Ajouter un nouvel élément s'affiche.
10. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
11. Cliquez sur l’onglet HTML du formulaire, ajoutez les contrôles HTML suivants sur le formulaire :
Une zone de texte Input (Text) : TextBox1 Un bouton Input (Button) : Button1 Un label : Label1
12. Nous allons essayer de faire en sorte que lorsque l’utilisateur clique sur le bouton, le label soit mis à jour avec le contenu de la zone de texte.
13. Basculez en mode HTML et ajoutez la mention runat=server dans les trois contrôles :
<input id="Text1" type="text" runat="server" /> <input id="Button1" type="button" value="button" runat="server"/><br /> <div id="Label1" runat="server">Label </div>
14. Notez que nous aurions pu modifier ces propriétés par l’interface de Design en sélectionnant chacun des contrôles et en modifiant les propriétés souhaitées dans la fenêtre de propriétés.
15. Double-cliquez sur le bouton. Nous nous retrouverons maintenant dans
l’événement Click de ce bouton :
<head runat="server"> <title></title> <script language="javascript" type="text/javascript"> <!-- function Button1_onclick() { } // --> </script> </head>
16. Insérer le code suivant :
function Button1_onclick() { Label1.innerText = form1.Text1.value; }
17. Compilez le projet Web par le menu Générer / Régénérer la solution
18. Exécutez le formulaire en effectuant un click droit sur Default1.aspx dans l’explorateur de solution et en choisissant Afficher dans le navigateur.
19. Testez le fonctionnement du formulaire.
0 Comments