[PDF] Cours présentation ASP.NET | Cours informatique

(1)

Introduction à ASP.NET avec C#

Pour commencer, nous allons parler de la technologie ASP.NET et de ce qu'il faut savoir pour créer un site Web. Ensuite, nous verrons ensemble comment télécharger et installer les outils nécessaires pour pouvoir suivre ce cours dans les meilleurs

conditions.

En soit, créer un site Web est loin d'être difficile. Il nous faut pour cela connaître le fonctionnement d'un site Web. Cela tombe bien, c'est ce que nous allons apprendre dans ce chapitre.

Allez, prenons une grande inspiration et plongeons dans le vaste océan de ASP.NET !

Qu'est-ce que ASP.NET

Nous allons commencer par un petit cours de prononciation. ASP.NET se prononce à la française "a-ès-pé dot-nette" ou à l'anglaise "ey-és-pi dot-nette". À vous de choisir. D'ou vient ASP.NET et qu'est-ce que c'est ?

ASP.NET est une technologie crée par Microsoft permettant la réalisation d'un site Web. Cette technologie est liée au framework .NET, crée aussi par Microsoft, d'ou le .NET après ASP.

ASP (Active Server Page) est la première technologie de Microsoft pour créer des sites Web, elle a vu le jour en 1996. Les avantages de cette technologie étaient mutliples :

 Facile d'utilisation pour les débutants ;  Etre interactif.

Cependant, ASP a été rapidemment remplacé par ASP.NET. De cette technologie, ASP, est né ASP.NET. L'intégration du framework .NET et des dernières mise à jour ont permis à ASP.NET d'être largement plus utilisé que ASP. Nous avons accès à plusieurs outils, principalement :

 Un outil de développement ;  De diverses technologies ;  Du C#.

L'outil de développement

Lorsque l'on utilise un langage comme le C#, nous travaillons avec un outil appelé Visual Studio. Vous le connaissez surement, c'est un environnement de développement intégré qui va fournir tous les outils nécessaires au développement d'une application Windows ou d'un site Web.

(2)

Les technologies

En technologies, nous avons le framework .NET et ASP.NET. Le framework .NET, je ne vous le présente plus : grâce à lui, nous pouvons accéder à une large gamme de fonctionnalités telles que la création de contrôles, l'accès aux données, des classes déstinées au développement Windows. ASP.NET se patche au framework .NET, il va procurer des outils, des contrôles et des classes toutes prêtent spécialement destinées au développement de sites Web.

Le C#

Le C# est le langage qui va nous permettre de développer notre site Web. A la base, c'est un langage de programmation crée par Microsoft et qui permet de construire toute sorte d'applications (Windows, jeux, mobiles). Il se couple parfaitement avec le framework .NET. Nous utiliserons ce langage tout au long de ce cours.

Vu que nous avons déjà développé un minimum en C#, ce cours devrait être accessible pour nous tous.

Fonctionnement d'un site Web

Nous visitons tous des sites Web, d'ailleur rien que le fait de lire ce cours en fait partie. En tant que futurs développeurs Web, vous devez connaître le fonctionnement d'un site Web. L'avantage, c'est que ça reste simple.

Alors un site Web c'est quoi ? C'est tout simplement un ensemble de fichiers situés dans un serveur. Les fichiers sont des fichiers sources (C# par exemple) et des fichiers de vues (ce que vous voyez). L'assemblage de ces fichiers forme pour le visiteur une page Web.

Il y a deux acteurs dans le fonctionnement d'un site Web : le serveur et le visiteur. Un serveur est un ordinateur qui va sans cesse fonctionner (24 heures sur 24, 7 jours sur 7) afin d'héberger les fichiers composants le site Web.

Le visiteur, c'est l'utilisateur du site. Par exemple, lorsque vous naviguez

sur http://fr.openclassrooms.com, votre navigateur envoie une requête au serveur et celui-ci vous retourne une page Web. Une requête est une demande, vous demandez à afficher le contenu d'une page Web. Cela se fait principalement avec la barre située en haut de votre navigateur.

(3)

barre d'adresse d'un navigateur C'est un dialogue entre nous (visiteur) et le serveur. Ce dialogue est plus

communément appelé "requête HTTP" (HyperText Transfer Protocol). HTTP désigne simplement la communication entre un navigateur et un serveur Web.

fonctionnement d'un site Web

Toutes les images, les ressources d'un site Web sont présentent sur le serveur. Le serveur est un ordinateur distant. Cependant, développer en ASP.NET est gratuit. Visual Studio propose des outils permettant d'émuler un serveur pour faire fonctionner nos sites Web directement chez nous.

Les bons outils pour utiliser ASP.NET

Pour coder avec ASP.NET, il nous faut des outils adaptés. Nous allons utiliser du C# mêlé avec de l'ASP.NETpour créer facilement nos site Web. Je vous ai parlé plus haut d'un outil appelé Visual Studio, distribué par Microsoft et de qualité.

Visual Studio Express pour le Web

Visual Studio est une suite logiciel permettant de développer avec un bon nombre de technologies (C#, Windows Phone, Windows 8, Web). Nous trouvons plusieurs versions de ce logiciel, notamment la version professionnelle qui coûte une certaine somme.

Devons-nous payer pour utiliser ASP.NET ?

Heureusement, non. La version de Visual Studio que nous allons utiliser dans ce cours est dite "Express", ce qui signifie qu'elle est gratuite. Une version Express de Visual Studio est une version allégée, elle propose tout de même un bon nombre d'outils. C'est suffisant pour suivre ce cours et pour faire pas mal de choses.

Peut-être possédez-vous déjà une version professionnelle de Visual Studio ? Dans ce cas, vous pouvez passer la partie "Installation". De mon côté, le cours ainsi que les captures d'écran utiliseront la version Express.

(4)

Passons maintenant à la suite : l'installation !

Installer Visual Studio Express pour le Web

La dernière version de notre outil de développement est Visual Studio Express 2013 pour le Web. Nous pouvons le télécharger en nous rendant directement sur cette page : http://www.microsoft.com/fr-fr/download/details.aspx?id=40747.

télécharger Visual Studio pour le Web Choisissez le type d'installation :

 exe : l'installation se fera via un programme d'installation exécutable ;  iso : Un fichier .iso représente une image d'un CD (ou d'un DVD), ici le

CD de l'installation de Visual Studio.

Une fois le téléchargement terminé, il n'y a plus qu'à passer à la suite. Vous lancez le programme d'installation et arrivez à la première page.

(5)

Installation de Visual Studio Express pour le Web

Sur cette page, on nous propose une case à cocher ainsi que le répertoire d'installation. Nous devons accepter les termes du contrat de licence et enfin cliquer

sur Suivant pour continuer l'installation.

Une nouvelle page apparaît. Elle indique la progression de l'installation et le taux de transfert du téléchargement des composants. Notons que cela peut prendre un peu de temps, armez-vous de patiente. Comme à la figure suivante.

(6)

Il ne nous reste plus qu'à attendre la fin du téléchargement et de l'installation. Une fois cela terminé, nous possédons désormais notre outil pour créer des sites Web !

(7)

Redémarrons notre ordinateur pour pouvoir commencer. A noter que durant

l'installation, Visual Studio a installé un outil appelé SQL Server 2012 (aussi dans sa version Express) : c'est ce qu'on appelle SGBD (Système de Gestion de Base de Données). Cet outil va nous permettre de communiquer avec une base de données, c'est grâce à SQL Server que vous pourrez enregistrer la liste des membres de votre site, les messages postés sur le forum, etc.

Découverte de l'interface

Nous pouvons maintenant démarrer Visual Studio Express pour le Web. En passant, sachez que ce dernier est un IDE (environnement de développement intégré) qui rassemble les fonctions de conception, édition de code, compilation et débogage. Lors du premier lancement, vous constatez qu'un petit temps de chargement apparaît : le logiciel configure l'interface pour la première fois.

(8)

À noter qu’il peut vous proposer à tout moment de vous enregistrer pour pouvoir utiliser le logiciel indéfiniment. C’est une étape obligatoire sous 30 jours sinon vous ne pourrez plus continuer à utiliser Visual Studio. Rassurez-vous, c’est complètement gratuit et rapide. Suivez la procédure et en retour, vous aurez un numéro de série qui vous permettra d’utiliser pleinement Visual Studio Express pour le Web.

Nous voici donc sur la page d'accueil (ou de démarrage) du logiciel. Elle est assez pratique dans le sens ou elle nous fournit des informations utiles (dernières mises à jour) et liste nos projets de sites récents.

Page de démarrage

Pour commencer, nous allons configurer Visual Studio Express pour le Web. Allez dans le menu Outils > Options... Ensuite, dans la fenêtre qui s'affiche, allez dans la branche Général de Concepteur HTML et enfin cochez Activer le concepteur

HTML et Démarrer les pages en mode Design. Cette manipulation va nous permettre

de travailler de manière efficace avec nos pages Web. Redémarrez Visual Studio Express pour le Web.

(9)

Options de Visual Studio Express pour le Web

Ensuite, allez dans le menu Outils > Personnaliser et cochez la case Standard. Cela a pour effet d'activer la barre d'outils standard de Visual Studio Express pour le Web, nous reviendrons plus tard sur l'utilité des autres barres d'outils disponibles. Cette action ne nécessite pas de redémarrage.

(10)

Ajout de la barre d'outils standard

La barre d'outils

Je vais récapituler les boutons présents qui nous seront utiles lors de la conception de nos sites Web.



Boutons suivant et précédent : Visual Studio Express pour le Web fournit un navigateur Web directement integré à l'outil. Ce qui permet de visiter des sites Web directement dans l'interface de travail. Vous l'aurez deviné, ces boutons servent respectivement à naviguer à la page précédente et suivante.



(11)



Ouvrir un fichier : permet l'ouverture dans Visual Studio Express pour le Web d'un fichier ou d'un projet de site Web.



Enregistrer les éléments sélectionnées. 

Enregistrer tout. 

Annuler et rétablir : pour revenir en arrière ou rétablir une opération. 

Démarrer : exécute le site Web en mode débogage. 

Afficher dans le navigateur : permet de visualiser une page du site Web dans votre navigateur favori.



Rechercher dans les fichiers.

Tous ces boutons ne nous serons pas forcément utiles, mais autant les connaître. Pour appréhender l'interface, nous allons créer un nouveau projet de site Web.

Créer un nouveau site Web

Nous allons maintenant créer un nouveau site Web pour découvrir l'interface de développement. Pour ce faire, trois solutions s'offrent à nous : cliquer directement sur Nouveau Site Web... dans la page de démarrage, se rendre dans le

(12)

Créer un nouveau site Web

Cliquons sur l'icône correspondante Site Web ASP.NET vide pour démarrer un nouveau site Web. Choisissez un répertoire d'emplacement du site Web sur votre ordinateur, en lui donnant un nom (écrire le nom de votre site Web à la fin du chemin).

chemin et nom du site Web

Vous pouvez laisser le nom par défaut (ici WebSite1), ce projet ne sera pas utilisé. Cliquez ensuite sur « OK », et vous voici dans un nouveau projet de site Web ! Pour garnir le site, nous allons ajouter un élément. Directement sur le nom du site, faisons clique droit, puis Ajouter > Ajouter un nouvel élément... Dans la fenêtre qui s'ouvre, sélectionnez Web Form et cliquez sur Ajouter.

(13)

ajout d'un nouvel élément

Web Form Vous remarquez que beaucoup plus de choses s'offrent à nous.

(14)

Projet site Web ASP.NET

Analysons l'environnement de développement.

L'espace de travail

C'est l'outil que nous allons le plus utiliser pour créer nos sites Web. En effet, c'est ici que nous allons créer nos pages Web et écrire du code en C#.

(15)

L'espace de travail, notre outil principal

L'explorateur de solutions

A notre droite, l'explorateur de solutions. C'est une fenêtre importante car elle

récapitule l'arborescence de notre site Web. Nous pouvons voir tous les fichiers et les dossiers composants notre site Web, pour le moment nous n'avons que deux fichiers : Default.aspx et Web.config.

(16)

La boîte à outils

Accessible via le menu Affichage > Boîte à outils ou le raccourci

clavier Ctrl+ Alt+ Xest d'une très grande utilité. Elle va nous faciliter la création des pages Web en proposant des contrôles pour la partie graphique de notre site Web.

Boîte à outils

La fenêtre de propriétés

Dans cette fenêtre, nous pourrons éditer et visualiser les propriétés des objets dans Visual Studio. Page exemple, pour un contrôle ou d'un fichier source en C#. Cette fenêtre se met automatiquement à jour.

(17)

Fenêtre des propriétés Ci-dessus, nous pouvons voir les propriétés de la page Default.aspx.

Voici donc pour les fenêtres principales utilisées au cours d'un projet de site Web, nous serons amenés à en découvrir d'autres tout au long de ce cours.

A noter que vous pouvez déplacer et redimensionner les fenêtre de l'environnement de travail à votre guise. N'hésitez pas à vous familiariser avec votre nouvel outil de travail.

Ma première page avec ASP.NET

Après cette petite découverte de ASP.NET et de l'environnement de développement, nous allons immédiatement pratiquer. Nous allons créer notre première page Web et ce, en douceur.

Ce chapitre nous permettra de nous initier au monde ASP.NET sans difficulté. N’ayez pas peur si vous avez des questions à la fin de ce chapitre ou si vous avez l’impression que nous n’avons pas tout vu.

Création du site Web

Empressons-nous de créer un nouveau site Web. Choisissez un site Web ASP.NET vide et donnez lui un nom, je l'appelerai Hello World.

(18)

Création d'un site Web ASP.NET

Un projet par défaut se crée, contenant uniquement deux

fichiers Web.config et Web.Debug.config. Ce sont des fichiers de configurations.

arborescence du nouveau site Web

(19)

Ces fichiers contiennent des informations sur notre site Web, par exemple la version du framework .NET utilisée.

Place à l'action ! Nous allons tester notre site Web. Démarrons l’application par défaut générée en appuyant sur F5 ou en cliquant sur le bouton dans la barre d'outils. Votre navigateur par défaut démarre et ouvre une page dont l’adresse ressemble à http://localhost:2096/. Il y a déjà du contenu dans cette page.

Démarrage du site Web

Notons l'adresse de notre site Web. http désigne le protocol utilisé (HTTP) et localhost désigne l’adresse de la machine où est hébergé le serveur web, en

l’occurrence il s’agit de notre machine locale, accessible via l’alias localhost. Visual Studio Express pour le Web génère un numéro de port (ici 2096) pour permettre à notre site Web de s'exécuter avec notre serveur.

(20)

Notez que pour le moment, ce site n'est disponible que chez vous. En effet, Visual Studio le fait fonctionner sur un serveur local, pour envoyer son site sur le Web il faudra passer par quelques manipulations que nous découvrirons dans ce cours. Pour fermer notre site Web, il faut revenir dans Visual Studio et cliquer sur le bouton Arrêter le débogage.

Ajouter une page Web

Lorsque nous avons exécuté notre site Web, nous avions une erreur du type :

Erreur HTTP 403.14 - Forbidden

En d'autres termes, Visual Studio Express pour le Web nous a fait comprendre que l'on essayait d'accéder à une ressource qui ne nous appartient pas. Lorsque le visiteur tente d'accéder à une page ou une ressource qui ne lui ai pas réservé, le serveur renvoie une erreur 403.

Mais pourquoi nous avons cette erreur ?

La réponse est simple : notre site Web est vide. Il n'y a pas de pages de contenu, comment voulez-vous visiter un site Web sans pages ? Nous allons donc ajouter une page Web à notre site. Cliquez droit sur le nom de notre site Web et ajoutez un nouvel élément.

Ajout d'un nouvel élément

Sur la fenêtre, il y a plusieurs choix avec différents modèles. Sélectionnez Web Form puis laissez le nom par défaut (Default.aspx).

(21)

Ajouter une page Web

Une Web Form représente une page Web pour un site. Elle porte

(22)

Visual Studio Express pour le Web nous a généré une Web Form

C'est sur cette page Web Form que nous allons travailler. Nous travaillons

directement sur le design de notre page. A gauche de cette page, nous avons la boîte à

outils, outils que nous allons déposer sur notre page. En clair, nous allons

directement dessiner sur cette page. C'est la partie graphique de la conception de notre site.

Nous pouvons déjà effectuer des modifications, car pour le moment cette page est un peu... vide. Avec la souris, placez le curseur directement dans le bloc appelé div :

(23)

On place le curseur dans la zone div

Et commencons par ajouter du texte avec le clavier, écrivez ce que bon vous semble. Appuyez sur la touche Entrée pour placer un saut de ligne.

On écrit du texte sur notre page

Et si je veux du texte en gros, en gras et en bleu ?

Ne précipitons pas les choses. Nous verrons comment faire cela prochainement.

Manipuler les premiers objets

Nous pouvons écrire du texte sur notre pae, c'est bien. Maintenant, nous allons apprendre à rajouter des objets dedans. Ces objets sont appelés contrôles. La boîte à outils regorge de contrôles en tout genre.

Les contrôles de la boîte à outils

Les contrôles sont classés en onglets. Les plus utilisés sont présents dans

l'obglet Standard. Pour ce faire, je vais vous laisser vous amuser avec les objets : prenez-les en cliquant dessus, puis faites-les glisser jusqu'à la fenêtre sans relâcher le clic.

Par exemple, faisons glisser deux contrôles l'un après l'autre :  Un champ de text (Textbox)

 Un Bouton (Button)

(24)

Voici ce que vous devez obtenir

C'est vraiment enfantin !

Utiliser les propriétés

Après avoir utilisé la boîte à outils, nous allons modifier les propriétés des contrôles que nous avons glissé. Visual Studio Express pour le Web va nous macher

énormément le travail grâce à la fenêtre Propriétés. Les propriétés vont agir sur la partie design de notre page.

Une grosse partie des contrôles disponibles dans la boîte à outils sont des classes qui font partie de l'espace de noms WebControls . Par exemple, le contrôle Bouton pourrait être représenté par la classe suivante.

Le contrôle Bouton est représenté par une classe

Mais cela est caché pour nous, développeur. Nous n'avons qu'à utiliser un contrôle en le plaçant sur une page. La page de propriétés va nous permettre de modifier les

propriétés définies dans la classe du contrôle utilisé. Par exemple, sélectionnez

(25)

Les propriétés de notre bouton Le mot en gras (Button1) est le nom de votre contrôle. Ce nom est défini dans la propriété (ID). Dans le code, c'est grâce à l'ID d'un contrôle que l'on peut le

reconnaître, un ID est un identifiant unique. Il est impossible d'avoir deux boutons sur une page ayant pour ID Button1 par exemple. Changeons l'ID de ce contrôle : je vais l'appeler Btn_valider.

Lorsque vous utilisez un contrôle, prenez la bonne habitude de le renommer : les IDs seront plus explicites pour vous et pour votre équipe si vous travaillez en groupe. D'ailleurs, une bonne convention de nommage serait : nom du contrôle + "_" +

fonction du contrôle. J'utiliserai cette convention tout au long de ce cours, vous en

prendrez vous aussi l'habitude.

Cliquez sur la case correspondante pour lui assigner une propriété. Dans le cas de notre bouton, vous le voyez à droite, j'ai modifié sa propriété Size de font, qui veut dire en anglais « police » et j'ai modifié également sa propriété Text, pour lui changer sa valeur.

(26)

modification de la valeur des propriétés

C'est comme si au sein de la classe Button les propriétés étaient modifiées. Btn_valider.Text = "Cliquez ici !";

Btn_valider.ID = "Btn_valider";

Btn_valider.Font.Size = 15;

Amusant, non ?

Tester notre page Web

Démarrons à nouveau notre application web. Nous n’avons cette fois-ci plus d’erreur et nous pouvons voir un magnifique rendu sur la page web :

(27)

Affiche de notre Hello World

Cette fois ci, notre site Web démarre sur la page Default.aspx. Ecrivez un peu de texte dans le champ de texte et cliquez sur le bouton, la page Web est actualisé et le champ de texte est toujours rempli par notre saisie. A part ça, il ne s'est rien passé car nous n'avons pas dit au bouton ce qu'il devait faire.

Ce qui se passe

Pour terminer notre Hello World, nous allons programmer quelque chose qui va se passer si le visiteur clique sur le bouton.

Manipuler les propriétés des contrôles en C#

Pour mener à bien notre page Web, rajoutons un contrôle de type Label sous le champ de texte (TextBox) : pressez la touche Entréedu clavier et faite glisser un contrôle Label. Un Label est une zone de texte.

Ensuite, renommez le champ de texte (TextBox) : mettez sa propriété ID à Txt_saisie et renommez le label : ID prend la valeur Lbl_resultat.

Ajout d'une zone de texte

Voilà pour la partie "graphique". Maintenant, nous allons passer à la partie "logique". Nous allons accéder au code C# de la page Web : double cliquez sur une partie vide de la page (en dehors du bloc div !). Vous atterrissez côté code C#.

(28)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

} }

La classe _Default générée représente la page sur laquelle nous travaillons. Elle hérite de la classe Page . Cette classe est très simple car elle ne possède qu'une seule méthode Page_Load . Cette méthode est appelé à chaque fois que la page est

rafraichie. Elle est vide, donc elle ne fait pas grand chose.

Pour notre exemple, nous souhaitons qu'il se passe quelques chose au moment ou l'utilisateur clique sur le bouton. Il faut donc rajouter une méthode qui va traiter cette action, un méthode liée au bouton Btn_valider. Pour la créer, il y a deux manières : l'écrire, mais comme cela cache certains mécanismes complexes on ne va pas vous prendre la tête pour le moment, ou le générer automatiquement grâce à notre IDE. Laissons Visual Studio Express pour le Web faire le boulot : retournez sur la page Default.aspx et cette fois double cliquez sur le bouton Btn_valider. Une méthode est rajoutée à la classe de notre page.

protected void Btn_valider_Click(object sender, EventArgs e)

{

(29)

Cette fois-ci la méthode Btn_valider_Click sera appelé à chaque fois que le visiteur va cliquer sur le bouton Btn_valider. Il faut maintenant décrire ce que nous souhaitons faire dans cette méthode. Nous allons modifier la propriétés Text du Label

(Lbl_resultat) en affichant ce que le visiteur a saisie dans le champ de texte (Txt_saisie).

Alors, comment attribuer les propriétés ? C'est très simple, il faut tout d'abord dire sur quelle page on travaille, ici c'est la fenêtre actuelle appelée this en C#. Ensuite, il faut le lier au reste, utilisons donc le caractère « . » : nous allons donc accéder aux objets et contrôles de cette page. Ici une liste s'affiche à nous, c'est tout ce que l'on peut utiliser avec l'objet this . Spécifions autre chose : nous voulons accéder à notre Label, donc on tape son nom : Lbl_resultat.

Visual Studio Express pour le Web auto-complète

Appuyez sur Tabpour compléter. Nous voulons changer la propriété Text de Lbl_resultat, donc accédons à la propriété text, pareil que précédemment, il nous affiche déjà le reste. Maintenant que nous avons accès à notre propriété, nous allons lui donner une valeur, avec le symbole "=". Nous allons donc l'assigner, et attribuons-lui une valeur texte comme par exemple la valeur de la propriété Text du champ de texte (Txt_saisie) et ce de la même manière :

protected void Btn_valider_Click(object sender, EventArgs e)

{

this.Lbl_resultat.Text = "Vous avez saisie : " + this.Txt_saisie.Text;

}

Voilà, lançons le site pour essayer : saisissez quelque chose dans le champ de texte et cliquez sur le bouton, et là miracle !

Le message s'affiche

Nous avons réussi à créer notre première page Web fonctionnelle. Cependant, je vous ai caché un grand nombre de choses que nous aurons l'occasion de découvrir dans le prochain chapitre. Ce chapitre nous a permis de voir qu'il est très simple de prendre en

(30)

main le développement d'un site Web avec ASP.NET et C#. Voilà pour cette première prise en main d’ASP.NET. Nous avons pu faire un classique Hello World finalement sans avoir à faire grand-chose.

En résumé

 On crée un projet site Web ASP.NET pour pouvoir créer un site Web avec C#.

 Les contrôles sont disponibles dans la boîte à outils, ils nous permettent de concevoir notre interface.

 La feuille de style (design) est la fenêtre dans laquelle on conçoit l'interface graphique.

 Les contrôles disponibles dans la boîte à outils sont des classes dont nous pouvons accéder aux propriétés.

 Il y a plusieurs façons pour modifier les propriétés d'un contrôle : par la fenêtre des propriétés ou via directement le C#.

 En C#, la page sur laquelle nous travaillons est représenté par une classe héritant de la super classe Page .

 Grâce au double-clique sur la page ou les contrôles, nous pouvons accéder aux méthodes gérant les évènements.

Travailler avec les Web Forms

Dans le chapitre précédent, nous avons pu nous initier aux Web Forms. Nous avons vu qu'il était facile de pouvoir construire une page Web et que nous pouvons

facilement travailler avec le C#. Cependant, nous avons un peu manié à l'aveugle sans comprendre le véritable rouage d'un site Web. Ce chapitre est l'occasion pour nous de voir ce qui se cache derrière ces fameuses Web Forms !

Les différents points de vue sur une Web Form

Jusqu'à mainetant, nous avons manié une Web Form comme tel : écriture de texte et glissage de contrôles définis dans la boîte à outils. Pour réaliser un site Web

performant, il ne faut pas se limiter à cela. Nous allons voir ce qu'il se passe lorsque nous dessinons notre page Web.

Visual Studio Express pour le Web nous offre différents points de vue pour construire une page Web :

 via le concepteur graphique ;

 via un langage de balisage permettant de construire des interfaces graphiques pour le Web.

Jusqu'à maintenant, nous avons utilisé le concepteur graphique pour créer notre interface graphique. Retournez sur notre projet "Hello World" et ouvrez notre page Default.aspx.

(31)

Le concepteur Web Form

En bas à gauche du concepteur, il y a trois boutons :

Les différents angles de vue

Ces boutons nous permettent de passer entre le mode Design et le mode Source. Nous connaissons bien la vue par défaut : Design ou nous pouvons visionner directement les modifications apportées à la page. C'est l'angle de vue le plus intuitif pour le débutant.

Maintenant, nous allons nous intéresser à un angle de vue différent : le mode Source. Cliquez sur le bouton. Cette fois-ci Visual Studio Express pour le Web nous affiche quelque chose de bien différent.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

(32)

</head>

<body>

<div>

Bienvenue sur mon site Web !<br />

Ceci est ma première page avec ASP.NET, alors soyez indulgent ! :)<br />

<br />

<asp:TextBox ID="Txt_saisie" runat="server"></asp:TextBox>

<asp:Button ID="Btn_valider" runat="server" Font-Size="15pt" OnClick="Btn_valider_Click" Text="Cliquez ici !" />

<br />

<asp:Label ID="Lbl_resultat" runat="server" Text="Label"></asp:Label>

</div>

</form>

</body>

</html>

C'est un langage de description appelé HTML (HyperText Markup Language) ; il permet de décrire une page Web.

(33)

le HTML décrit une page de vue

Malgré l'apparence, le HTML est un langage extrêmement simple, à la portée de tous. Ce n'est pas un langage de programmation, mais bien un langage de description. Ce qui signifie que son rôle est de décrire une page Web.

Le dernier angle de vue est la vue Fractionner. Cet angle de vue est bien pratique, notamment si vous n'êtes pas à l'aise avec le HTML car il permet de fusionner vue Design et vue Source et se présente ainsi dans Visual Studio Express pour le Web.

(34)

La vue fractionnée

Lorsque vous cliquez sur les éléments en mode Design, le code correspondant en mode Source est surligné. Visual Studio Express pour le Web est un outil puissant, et nous pouvons le voir ici avec les différents choix proposés pour construire nos pages Web.

Comprendre le langage de description de page Web : le HTML

Lorsque l'on crée un site Web avec ASP.NET, nous avons besoin d'utiliser du HTML. Sans HTML, pas de pages Web, pas de pages Web, pas de site Web. Je vais ici vous présenter les bases nécessaires à l'utilisation du HTML. A force de pratiquer, vous serez de plus en plus à l'aise. Si vous voulez approfondir un peu ce sujet, n’hésitez pas

(35)

à vous plonger dans ce

cours http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3 sur le site d'OpenClassrooms.

Une page Web est en fait un fichier HTML comprenant des balises qui décrivent cette page. Une balise est une valeur entourée deux caractères, < et >, qui décrivent le contenu sémantique de la donnée. Par exemple :

<p>Bonjour, je suis du texte dans un paragraphe.</p>

La balise<p> délimite un paragraphe en HTML. Tout comme dans un livre, un paragraphe contient du texte, voire des photos, etc. Nous pouvons placer n'importe quel valeur entre les symboles "<" et ">". Par exemple, la balise <video> permet d'inclure une vidéo sur la page Web, par contre la balise <nom> est aussi une balise de description, mais non reconnu par le HTML. On ne met pas n’importe quoi dans ces balises. HTML possède une série de balises pré-définies pour décrire la structure d’un document. Nous avons vu ci-dessus la balise <p> qui délimite un paragraphe. Pour comprendre, nous allons créer un fichier HTML dans notre site. Ajoutons un nouvel élément au projet et cette fois sélectionnons Page HTML. Je la

nommerai Cours.html.

La différence entre une page Web Form et page HTML est que la Web Form propose une interaction avec le langage C# et le framework .NET tandis que la page HTML ne fait qu'afficher du contenu HTML. Ici, nous allons utiliser que du HTML donc nous choisirons page HTML.

(36)

Ajout d'un fichier HTML

Le fichier généré contient la structure la plus basique d'un fichier HTML. <!DOCTYPE html>

<head>

(37)

</head>

<body>

</body>

</html>

Tout document HTML doit respecter cette structure. La première ligne <!DOCTYPE html> indique simplement que le fichier utilise HTML. Vous remarquerez que les balises HTML s'imbriquent, ce qui signifie qu'une balise en contient une autre, etc. Ensuite, la balise <html> est le noeud racine du document : c'est au sein de cette balise que sera décrite la page.

Une balise peut contenir des attributs permettant de donner des informations sur la donnée. Les attributs sont entourés de guillemets " et " et font partie de la balise. Par exemple, dans la balise <html> nous voyons l'attribut xmlns qui a pour valeur une adresse Web.

Au sein de la balise <html> nous trouvons deux balises principales

: <head> et <body> . Dans la balise <title> nous trouverons certaine informations sur le site Web, comme le titre de la page tandis que dans la balise <body> nous trouverons la description de la page. Dans le chapitre précédent, lorsque nous avons glissé des contrôles sur la page, ces derniers se sont en fait placé dans la

balise <body> .

Par exemple, plaçons un paragraphe de texte sur notre page. Il faut donc utiliser la balise <p> dans le corps de la page HTML, <body> .

<body>

<p>Bonjour et bienvenue sur mon site.</p>

<p>Cette page est ma page d'accueil.</p>

<p>Il n'y a pas grand chose pour le moment.</p>

</body>

Puis donnons un titre à notre page, nous allons l'appeler Ma super page !. Pour ce faire, nous allons placer la valeur du titre au sein de la balise <title> dans l'en-tête HTML, <head> .

<title>Ma super page !</title>

(38)

Une page en HTML

Dans un corps de page, avec HTML nous pouvons trouver :

 Mettre des titres de différents niveaux (de très important à peu important) ;  Créer des listes ;

 Placer des liens ;  Utiliser des tableaux ;

 Mettre en forme un formulaire.

Regardons de plus près ces éléments. Ils constituent les bases du HTML. Vous aurez ensuite l'occasion de découvrir de nouvelles balises plus loin dans le cours.

Les titres

La balise <h>permet de placer un titre dans une page. Il y a 6 niveaux d'importances pour les titres en HTML. Par exemple :

<h1>Titre très important</h1>

<h2>Titre important</h2>

<h3>Titre moyennement important</h3>

...

<h6>Titre très peu important</h6>

Attention à ne pas confondre titre défini avec la balise <title> et titre dans la page défini avec la balise <h> .

Plus un titre est important, plus la taille de la police sera importante.

Les listes

En HTML, les listes à puces sont très utilisées. Une liste à puces permet l'affichage de données les unes à la suite des autres.

<p>Pour créer un site Web avec ASP.NET, il nous faut principalement :</p>

(39)

<li>Contrôles</li>

</ul>

<ul> est une balise qui englobe la liste. <li> est une balise qui ajoute un objet à la liste.

Les liens

Que serait un site Web sans liens ? Pas grand chose ! Les liens permettent de naviguer entre les pages Web. Un lien peut rediriger vers une page de notre site ou vers une page d'un site exterieur.

Principe des liens dans une page Web Regardez le schéma ci-dessus. Notre site Web (encadré en noir) possède deux pages (Default.apsx et Inscription.aspx). Dans la page Default.aspx, nous pouvons trouver un lien qui mène à la page Inscription.aspx de notre site (pour créer un compte sur le site) et un lien extérieur qui mène vers la page d'accueil de OpenClassRooms. Mais ce n'est pas tout, nous pourrions imaginer que la page Inscription.aspx possède aussi des liens vers une autre page ou vers Default.aspx (pour retourner à l'accueil). De plus, OpenClassRooms propose de nombreux liens vers les tutoriels, les forums, la boutique, etc.

Toujours aussi simple de créer un lien en HTML grâce à la balise <a> .

<p>Aller à la page <a href="page2.html">page 2</a> !</p>

<p>J'apprends le HTML avec <a

href="http://fr.openclassrooms.com">OpenClassRooms</a>.</p>

Cette balise prend un attribut nommé href, il permet de cibler l'adresse sur laquelle nous sommes redirigé lorsque nous cliquons sur le lien. Entre les balise

d'ouverture <a> et de fermeture </a> , nous avons le texte du lien. Le texte du lien est généralement affiché en bleu.

(40)

Les liens en HTML

Les tableaux en HTML

Un tableau en HTML n'a rien à voir avec la notion de tableaux en C#. En HTML, un tableau fait référence à l'organisation de données dans des cases, comme sous Word.

Un tableau

Un tableau en HTML se fait à l'aide de la balise <table> . Tout ce qui est compris entre <table> et </table> appartient au tableau. Mais attention, ce n'est pas tout ! Un tableau possède des colonnes et les lignes. Ci-dessus, notre tableau fait 3 lignes par 3 colonnes. Le HTML fournit des balises spéciales pour délimiter les lignes et les colonnes :  <tr> : ligne  <td> : colonne Par exemple : <table> <tr> <td>X</td> <td>O</td> <td>X</td> </tr> <tr> <td>O</td> <td>X</td> <td>O</td>

(41)

</tr> <tr> <td>O</td> <td>O</td> <td>X</td> </tr> </table>

Créer un tableau de trois lignes sur trois colonnes pour représenter un jeu de morpion.

Organisation d'un tableau en HTML

Vous remarquerez que le HTML ne dessine pas de bordure pour un tableau, les éléments sont juste organisés sémantiquement.

Les formulaires

Comme son nom l'indique, un formulaire va intéragir avec le visiteur pour que celui-ci rentre des données le concernant. Un formulaire de base sur un site Web est la page de connexion.

(42)

formulaire de connexion OpenClassRooms

Un formulaire se compose principalement : de champs de texte, de cases à cocher et d'un bouton pour valider. En HTML, un formulaire va se situer dans une

balise <form> .

<form>

Contenu du formulaire

</form>

Tout comme avec ASP.NET, le HTML possède une série de contrôles. A retenir les principaux :

Zone de texte <label>valeur</label> Champ de texte <input type="text" /> Case à cocher <input type="checkbox" /> Bouton de validation <input type="submit" />

La balise <input> définit un contrôle HTML, l'attribut type spécifie le type de contrôle utilisé (champ de texte, case, etc.). Le formulaire de connexion à OpenClassRooms pourrait donner en HTML :

<body>

<h2>Connexion</h2>

<form>

<label>Nom d'utilisateur</label>

(43)

<br />

<br />

<label>Connexion automatique</label>

<a href="#">Mot de passe oublié ?</a>

<br />

</form>

</body>

Si nous l’affichons (en ouvrant la page HTML correspondante dans un navigateur), nous obtenons :

Un formulaire de connexion en HTML

Nous pouvons y saisir des valeurs comme je l’ai fait. Mais lorsque vous cliquerez sur le bouton Connexion, la page va seulement se recharger. Pour se connecter à un site Web, il faut un langage de programmation qui puisse dialoguer avec le serveur, le C#. Le HTML ne fait que décrire l'interface, il ne permet pas de vérifier le nom

(44)

D'ailleurs, nous retrouvons des propriétés comme l'ID (sur les deux champs de texte et la case à cocher). De manière général, sur une page Web Form, les contrôles ne sont pas gérés par le HTML mais par un langage de balisage (comme le HTML) pour ASP.NET. Les contrôles ASP.NET commence par :

<asp:

De plus, ASP.NET propose un attribut spécial : runat="server"

qui s'ajoute à n'importe quelle balise HTML ou ASP.NET pour dire à l'ordinateur : "Cette balise va intéragir avec le serveur (le C#)". Nous reviendrons dessus bientôt. Travailler directement avec le code HTML ou avec le mode Design, à vous de choisir. Pour commencer, je vous conseillerai de passer en mode Fractionner pour voir

comment cela fonctionne. A force de pratique, vous vous habituerez petit à petit à la syntaxe du HTML. Visual Studio Express pour le Web fournit des outils pour construire rapidemment des éléments graphiques.

Côté C# : comprendre la notion d'événements

Un deuxième point important dans les Web Forms est la notion d'événement. Nous allons pratiquer en même temps pour saisir la notion d'événement. A notre site Hello World, ajoutez une Web Form. Je l'appelerai Evenements.aspx.

Visual Studio Express pour le Web nous génère une page Web Form vide. Dorénavant, je passerai en vue Fractionnée, je vous conseille d'en faire de même. Chaque page Web Form possède une classe. On appelle cela le code-behind (behind qui se traduit par "en-arrière") pour désigner la partie logique qui se cache derrière la partie graphique. Pour y accéder, il y a deux solutions :

 Utiliser la vue design ;

 Utiliser l'explorateur de solutions.

En utilisant la vue design, il suffit pour nous de double-cliquer sur la partie body de la page. En utilisant l'explorateur de solutions, il faut dérouler (avec la flèche à gauche) l'arborescence de notre Web Form, le code-behind se situe dans un fichier portant le nom de notre page et l'extension .cs (c'est un fichier source C#).

Petite remarque au passage, si vous regardez de plus près le fichier ASPX qui contient le code de la vue, vous porterez attention à la toute première ligne :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Evenements.aspx.cs" Inherits="Evenements" %>

Cette ligne n'est pas du HTML mais un pseudo-code utilisé avec ASP.NET (que nous découvrirons bientôt). L'attribut CodeFile indique à la page quel fichier C# représente le code-behind. Cette ligne donne également des informations sur le langage utilisé (C#) et le nom de la classe (attribut Inherits).

(45)

accéder au code-behind via le mode Design

accéder au code-behind via l'explorateur de solutions

Dans le code, nous trouvons déjà une méthode de classe : Page_Load. C'est en réalité un événement. Une événement se déclenche lorsqu'il est appelé, il y a différentes façons d'appeler un événement : un clic, une touche, une ouverture, une fermeture, le passage de la souris, etc. Page_Load, lui s'active lorsque la page est chargée.

public partial class Evenements : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

(46)

} }

Un évènement ressemble fortement à la déclaration d'une méthode de classe. ASP.NET est un environnement événementiel, ce qui signifie que notre code sera basé sur les évènements.

Un événement est déclaré en protected . En effet, notre classe Evenements hérite de la classe Page définit dans le framework .NET : cette classe représente une page Web Form. Dans la classe Page, les événements sont déjà définis et sont déclarés

en protected . C'est pourquoi, lorsque dans notre classe de page, nous redéfinissons le comportement d'un évènement.

La portée protected permet de rendre des variables/propriétés/méthodes/évènements inaccessibles depuis un autre objet tout en le rendant accessible depuis des classes filles.

Dans notre classe, le nom de l'évènement est Page_Load. Page représente la page courante et Load est le nom de l'évènement. ASP.NET adopte un nommage pour les évènements :

Nom du Contrôle + "_" + Nom de l'évènement

Continuons, nous avons entre parenthèses les arguments de cet événement. Ils sont obligatoires pour que l'évènement puisse fonctionner car ils contiennent beaucoup d'informations dont nous pourrons nous servir. Le sender désigne le contrôle utilisé (ici, c'est la page entière), e est de type EventArgs. EventArgs est une classe de base pour les classes qui contiennent des données d'événement.

Créer un événement

Glissons un contrôle bouton sur notre page (Button) à l'aide de la boîte à outil. Placez ce bouton dans le bloc <div> de la page.

Vous pouvez glisser le contrôle dans le code HTML. Ce qui devrait donner :

(47)

Ajout d'un bouton sur la page

Au moment ou nous avons glissé le bouton, le code suivant s'est rajouté :

<asp:Button ID="Button1" runat="server" Text="Button" />

A noter qu'en HTML, <div> est une balise qui crée un "bloc" dans une page. Maintenant, changeons l'ID de ce bouton. Pour cela, deux solutions : passer par la fenêtre propriétés (dans ce cas, Prenez attention à bien sélectionner le contrôle) ou directement par l'éditeur HTML.

(48)

Changer l'ID du bouton via la fenêtre propriétés

Changer l'ID du bouton via le code

Vous pouvez aussi changer la propriété Text du contrôle pour changer le texte écrit dans le bouton.

Changer la propriété Text du bouton

Bon, retournons à nos moutons : les événements. Ajoutez un contrôle champ de texte (TextBox) à côté de notre bouton Btn_Evenement, nommez-la Txt_Recoit.

Notre page

Comme pour générer l'événement Page_Load, double-cliquons sur notre bouton ! L'événement est automatiquement généré.

(49)

{

}

Le double-clic sur un objet côté design crée son événement le plus courant ; pour un bouton : le clic, pour une textbox : le changement de texte, etc.

D'ailleurs, retournons dans le code de la vue de la page, nous pouvons voir que Visual Studio Express pour le Web a ajouté un attribut à notre <asp:Button> .

<asp:Button ID="Btn_Evenement" runat="server" Text="Mon beau bouton" OnClick="Btn_Evenement_Click" />

L'attribut OnClick pour associer au bouton notre méthode d'événement

Btn_Evenement_Click. Tout comme la méthode d'événement, l'attribut respecte un nommage :

On + nom de l'événement

L'attribut pointe vers une méthode d'événement

Maintenant, définissons un comportement lorsque l'événement sera levé. Nous allons écrire du texte dans la TextBox (avec sa propriété Text !).

protected void Btn_Evenement_Click(object sender, EventArgs e)

{

this.Txt_Recoit.Text = "Bouton cliqué !";

}

Testons notre page : avant, rien, après le clic, le message s'affiche. Nous avons réussi !

Accéder aux différents événements d'un contrôle

C'est bon, la notion d'événement commence à rentrer. Jusqu'à là, nous avions l'habitude de double cliquer directement sur un contrôle pour accéder à son événement par défaut. Cependant, un contrôle en possède bien plus !

(50)

Retournons dans le fichier de mise en page Web Form, intéressons-nous au code HTML, dans la ligne du bouton après OnClick="Btn_Evenement_Click" entrez un espace et saisissez les caractères 'On'. Voici la liste d'événements de l'objet qui s'ouvre, comme à la figure suivante.

L'auto-complétion des événements pour le bouton

A gauche des éléments de la liste, nous pouvons voir le symbole éclair, ce qui signifie pour Visual Studio Express pour le Web que l'élément associé est un événement. Le contrôle bouton possède sept événements. Choisissons l'événement Load, qui (je pense que vous l'avez compris) se déclenche lorsque la page est chargé.

Saisissez ensuite le symbole '='. Visual Studio Express pour le Web nous propose encore quelque chose :

Création de la méthode d'événement Cette fois-ci c'est pour créer la méthode d'événement dans le code-behind. Ue liste nous est proposée avec des méthodes existantes : celle de l'événement Load de la page et celle de l'événement Clic du bouton. Comme nous cherchons à créer une méthode d'événement spécifique à notre bouton, nous allons choisir <Créer un événement>. La méthode est ensuite généré.

L'événement a été créé

Nous allons colorier le bouton en bleu. Avec la propriété BackColor du bouton. Rajoutons cette ligne dans la méthode d'événement :

protected void Btn_Evenement_Load(object sender, EventArgs e)

(51)

this.Btn_Evenement.BackColor = System.Drawing.Color.CornflowerBlue;

}

Ce qui donne lorsque nous visitons la page Web :

L'événement Load du bouton

Notre bouton a maintenant deux événements. Sachez que nous pouvons aussi accéder à la liste des événements depuis le mode design : il faut séléctionner le contrôle voulu, allez dans la fenêtre des propriétés et cliquer sur le symbole "éclair".

Accéder aux événements depuis la fenêtre propriétés

En cliquant simplement sur le nom de l'événement, Visual Studio Express pour le Web vous fournit une description, en français, dans un cadre gris sous la fenêtre des propriétés.

(52)

La description d'un événement

Si l'événement vous convient, il vous faut alors double cliquer dans la zone à droite du nom de l'événement pour générer la méthode.

Mise en forme d'une page avec les Web Forms

Visual Studio Express pour le Web nous propose des outils pour mettre en forme notre page Web, autant en abuser. Ces outils sont disponible grâce à une barre d'outils. Cette barre d'outils n'est pas disponible directement, il faut aller dans les options pour l'activer. Pour ce faire, allez dans le menu Outils > Personnaliser... et cochez la case Mise en forme.

(53)

On active une barre d'outils de mise en forme

Cette action active une barre d'outils en haut de Visual Studio Express pour le Web. Barre d'outils de mise en forme

La major partie des nouveaux boutons réalise la même action qu'un simple éditeur de texte, par exemple B pour mettre en gras, I pour mettre en italique, U pour souligner, etc. Cette barre d'outils permet de mettre en forme une page Web sans passer par le HTML de base, cependant je vous conseille fortement de regarder le code généré pour pouvoir travailler en HTML par la suite.

La liste déroulante, comme sur la photo ci-dessous, propose d'insérer des éléments HTML directement sur la page tel qu'un titre, une liste, ect.

(54)

Insérer graphiquement des éléments HTML

Pour nous entrainer, nous allons ajouter une nouvelle Web Form. Appelez-là Ma_Vue.aspx. Placez-vous en mode Fractionner. Le curseur se positionne automatiquement dans le bloc <div> . Saisissez, avec le clavier "Bienvenue sur

Planet Gamers".

Pour ce cours, j'ai décidé de réaliser un site Web entier et fonctionnel. Ce site s'appelera Planet Gamers, j'en parlerai dans un prochain chapitre.

A l'aide de la souris, sélectionnez le texte que nous venons de rentrer. Ensuite, cliquez sur la liste déroulante Format du bloc de la barre à outils (celle avec écrit (Aucun)) et sélectionnez Titre 1 <h1>.

(55)

Le texte est formaté en titre de niveau 1

Automatiquement, Visual Studio Express pour le Web a transformé le texte sélectionné en titre de niveau 1 (h1). Notez que nous aurions pu aussi le faire directement dans le code ASPX.

Ensuite, plaçons le curseur au bout du titre h1 (dans le mode Design) et pressons la touche Entrée. Cela a pour effet d'insérer un nouveau paragraphe <p> à la suite du titre <h1> . Saisissez le texte comme sur la capture ci-dessous.

Lorsque vous appuyez sur la touche Entrée cela a pour effet d'insérer un nouveau paragraphe sur la page.

(56)

Ajout de texte

Mettons en forme le texte, comme ajouter des liens, de la couleur et rendre important certains morceaux de texte.

Ajouter un lien

Sélectionnez le texte voulu et cliquez sur le bouton Convertir en lien hypertexte . Dans la fenêtre qui s'affiche vous avez le choix : de rentrer une adresse Web existante (on parle d'URL) ou sélectionnez une page de notre projet.

(57)

Insérer un lien hypertexte

Notre lien va nous mener à la page d'accueil, donc la page actuelle (Ma_Vue.aspx). Cliquez sur le bouton Parcourir... et sélectionnez la page adéquate.

Sélection d'une page de notre projet Ce qui génère :

<p><a href="Ma_Vue.aspx">Planet Gamers</a> ...

Vous l'aurez compris : pour insérer graphiquement des balises HTML dans un paragraphe, il nous suffit de séléctionner la zone à mettre en forme et de cliquer sur un bouton correspondant dans la berre d'outils Mise en forme. Essayez de mettre en

(58)

gras certains bouts de texte, avec le bouton . Pareil pour la couleur, avec le bouton Couleur de premier plan (ou il faut ensuite sélectionner la couleur

désirée). Ce qui donne chez moi :

Aperçu de notre page

Le lien est représenté par la balise <a> et la mise en importance par la balise

<strong>. Concernant la couleur, nous reviendrons dessus dans un prochain chapitre. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ma_Vue.aspx.cs"

Inherits="Ma_Vue" %>

<!DOCTYPE html>

.auto-style1 { color: #0066FF; }

</style>

(59)

<body>

<div>

<h1>Bienvenue sur Planet Gamers</h1>

<p><a href="Ma_Vue.aspx">Planet Gamers</a> est un site Web communautaire basé sur l'univers des <span class="auto-style1">jeux vidéos</span>.</p>

<p>Vous souhaitez présenter un jeu, donner une critique ou tout simplement

<strong>discuter</strong> ? Planet Gamers est fait pour vous !</p>

<p>Nous vous proposons <strong>articles</strong>, <strong>vidéos</strong>

et <strong>forums</strong>. N'hésitez pas à participer à la vie de cette communauté.</p>

</div>

</form>

</body>

</html>

Pour finir ce chapitre, je vais vous montrer l'insertion de tableaux et de listes au sein de votre page. Pour la pratique, restez sur la page actuelle (Ma_Vue.aspx) ou créez une nouvelle Web Form.

Placez-vous dans le bloc div. Alez ensuite dans le menu Tableau de Visual Studio Express pour le Web, puis cliquez sur Insérer un tableau.

(60)

Insérer un tableau HTML

Une multitudes d'options nous sont proposées : la taille, la disposition, les bordures, etc. Pour cet exemple, seul deux paramètres vont porter notre attention : le nombre de lignes et de colonnes. Pour rappel, une ligne est le côté horizontal du tableau, tandis que la colonne est le côté vertical. Ici, j'insère un tableau de 3 lignes sur 2 colonnes.

Notre tableau

Vous pouvez redimensionner, via le mode Design, la largeur des colonnes et ses lignes du tableau à l'aide du curseur de la souris. Dans chaque cases du tableau, nous pouvons ajouter du texte, glisser des contrôles, etc...

(61)

La première colonne du tableau est remplie

Maintenant la deuxième colonne. Nous allons respectivement placer, de haut en bas : une liste non-ordonnée, une liste ordonnée et un contrôle quelconque.

Pour bouger de case en case dans le tableau, utilisez la touche TAB du clavier. Ensuite, ajoutons une liste à puces (dite non-ordonnée). Dans le menu Format, sélectionnnez Puces et numéros...

Ajouter une liste HTML

Choisissez votre modèle de Puces et valisez par OK. Pour remplir une liste en mode Design, tapez ce que vous voulez et utilisez Entrée pour ajouter un nouvel élément. Le principe est le même avec les listes numérotées (dite ordonnée). Dans la dernière case du tableau (en bas à droite) glissez un contrôle calendrier (Calendar). Notre tableau devrai au final ressembler à ceci :

(62)

Le tableau finalisé

Testez la page dans votre navigateur (Ctrl + F5) pour admirer le rendu. Regardons le code HTML généré dans Visual Studio Express pour le Web : le tableau correspond à la balise <table> et les listes sont représentés par <ul> (liste à puces)

et <ol> (liste numérotée).

Résumé

 Visual Studio Express pour le Web propose trois angles de vues pour mettre en forme une page Web : Design, Fractionné et Source.  Une page en ASP.NET est un mélange de code HTML et de code

spécifique à ASP.NET.

 Le HTML (HyperText Markup Language) est un langage de description. Il est constitué de balises pour décrire l'interface d'une page Web.

 Les événements peuvent être écoutés sur des objets différents : page principale, composant graphique, pointeur de souris, etc.

 Un événement permet d'exécuter une action lorsqu'il est "levé".  Les événements varient en fonction des contrôles, un contrôle possède

plusieurs événement.

 Visual Studio Express pour le Web nous offre plusieurs outils pour mettre en forme graphiquement une page, ce qui permet de gagner du temps (cependant, il est nécessaire de connaître le HTML : le mode de vue Fractionner peut vous être utile pour regarder ce qui est généré).