PRÉSENTATION D'ASP.NET WEB PAGES

Cette série de tutoriels vous présentent une autre vision d'ASP.NET Web Pages (version 2 et plus) et la syntaxe Razor, un Framework léger pour créer des sites Web dynamiques. Il présente aussi WebMatrix, un outil pour créer des pages et des sites.

Niveau : débutant en ASP.NET Web Pages.

Compétences supposés : HTML, les bases des feuilles de style en cascade (CSS).

• qu'est-ce que la technologie ASP.NET Web Pages et ses utilités ;
• qu'est-ce que WebMatrix ;
• comment tout installer ;
• comment créer un site Web en utilisant WebMatrix.

Fonctionnalités/technologies abordées :

• Microsoft Web Platform Installer ;
• WebMatrix ;
• Pages .cshtml.

À l'origine Mike Pope a écrit ce tutoriel. Tom fitzMacken l'a mis à jour pour Microsoft WebMatrix3.

Version des logiciels utilisés dans le tutoriel :

• ASP.NET Web Pages (Razor 2) ;
• WebMatrix 3.

Nous supposons que vous êtes familier avec :

• HTML. Aucune connaissance approfondie n'est requise. Nous n'expliquerons pas HTML, mais nous n'utilisons rien de compliqué. Nous vous fournirons des liens de tutoriels HTML lorsque nous penserons que cela sera utile ;
• les feuilles de style en cascade (CSS) comme avec HTML ;
• une connaissance de base des bases de données. Si vous avez utilisé des feuilles de calcul (tableur) pour les données, trié et filtré les données, c'est un niveau de connaissance que nous supposons généralement suffisant pour suivre ce tutoriel.

Nous supposons aussi que vous êtes intéressé pour apprendre la programmation de base. ASP.NET Web Pages utilise un langage appelé C#. Vous n'avez pas besoin d'expérience de programmation mais juste de vous y intéresser. Si vous avez déjà écrit un JavaScript dans une page web, vous avez suffisamment de prérequis.

Notez que si vous êtes familiarisé avec la programmation, vous pourriez trouver que ce tutoriel présente les bases lentement alors que nous avançons à une vitesse adaptée aux programmeurs novices. Lorsque nous aurons passé les premiers tutoriels, il y aura une programmation moins simple à expliquer et les choses avanceront à un rythme plus rapide.

Voici ce dont vous aurez besoin :

• d’un ordinateur qui fonctionne sous Windows 8, Windows 7, Windows Server 2008, ou Windows Server 2012 ;
• d’une connexion internet active ;
• des privilèges administrateur (requis pour les processus d'installation).

ASP.NET Web Pages est un framework que vous pouvez utiliser pour créer des pages web dynamiques. Une simple page web HTML est statique ; son contenu est défini par des balises HTML fixes qui sont dans la page. Les pages dynamiques, comme celles que vous créez avec ASP.NET Web Pages, vous permettent de créer le contenu de la page à la volée, en utilisant le code.

Les pages dynamiques vous permettent de faire toutes sortes de choses. Vous pouvez demander à un utilisateur une saisie en utilisant un formulaire et changer l'affichage de la page ou ce à quoi elle ressemble. Vous pouvez prendre des informations données par un utilisateur, les sauvegarder dans une base de données et les lister plus tard. Vous pouvez envoyer un mail depuis votre site. Vous pouvez interagir avec un autre service sur le web (par exemple, un service de cartographie) et fournir des pages qui intègrent des informations depuis ces sources.

WebMatrix est un outil qui intègre un éditeur de page web, un utilitaire de base de données, un serveur web pour tester les pages, et des fonctionnalités pour publier votre site web sur internet. WebMatrix est gratuit, il est facile à installer et à utiliser. (Il fonctionne aussi pour les pages HTML simple, ainsi que pour d'autres technologie comme PHP.)

Vous n'avez pas forcement besoin d'utiliser WebMatrix pour travailler avec ASP.NET Web Pages. Vous pouvez créer des pages en utilisant un éditeur de texte, par exemple, et tester celles-ci en utilisant un serveur auquel vous avez accès. Cependant, WebMatrix permet tout cela très facilement, aussi WebMatrix serra utilisé tout au long de ces tutoriels.

Ces tutoriels se positionnent comme une introduction sur comment utiliser ASP.NET Web Pages. Il y a neuf tutoriels au total dans cette série. Ils font partie d'une série de tutoriels qui vous apporte, en tant que novice sur ASP.NET Web Pages, la partie création réelle de sites web ayant un aspect professionnel.

Cette première série de tutoriels est ciblée pour vous montrer les bases permettant de travailler avec ASP.NET Web Pages. Quand vous serez prêt, vous pourrez travailler avec d'autres séries de tutoriels supplémentaires qui reprennent là où celui-ci se termine et qui explorent les pages web de façon plus approfondie.

Nous avons délibérément avancé doucement sur les explications détaillées. Et chaque fois que nous montrons quelque chose, dans cette série de tutoriels, nous avons toujours choisi la façon de présenter que nous pensions le plus facile à comprendre. Plus tard dans d'autres séries de tutoriels vous irez en approfondissant et vous verrez des approches plus efficaces et plus souples (aussi plus amusantes). Mais ces tutoriels exige de votre part de d'abord connaître les bases.

La série de tutoriels que vous commencez juste couvre les fonctionnalités suivantes d'ASP.NET Web pages :

• une introduction et prise en main de toute l'installation, (c'est dans le tutoriel que vous êtes en train de lire) ;
• les bases de programmation d'ASP.NET Web Pages ;
• la création d'une base de données ;
• la création et l'utilisation d'un formulaire de saisie utilisateur ;
• l’ajout, la mise à jour et la suppression de données dans la base de données.

Cette série de tutoriels et les suivants s'articule autour d'un site web où vous pourrez lister les films que vous aimez. Vous serez en mesure de saisir des films, de les éditer et de les lister. Voici deux exemples de pages que vous créerez dans cette série de tutoriels. Le premier montre la page de liste des films que vous allez créer :

Et voici la page qui vous permet d'ajouter un nouveau film à votre site :

Les tutoriels suivants celui-ci construisent et ajoutent plus de fonctionnalités, comme le chargement d'images, l’ouverture d’une session, l'envoi de mails, et l'intégration de médias sociaux.

Ok, alors commençons.

Vous pouvez tout installer en utilisant la plate-forme d'installation Web de Microsoft. En effet, vous implémentez le programme d'installation, puis vous l'utilisez pour installer tout le reste.

Pour utiliser des pages web, vous devez avoir la dernière version de Windows XP avec le pack SP3 installé, ou Windows Server 2008, ou une version ultérieure.

Sur la page Web Pages du site ASP.NET, cliquez sur install.

Vous êtes invité à accepter les termes de la licence et la déclaration de confidentialité avant d'installer WebMatrix.

Cliquez sur Run pour démarrer l'installation. (Si vous souhaitez enregistrer le programme d'installation, cliquez sur Save, puis exécutez le programme d'installation depuis le dossier où vous l'avez enregistré.)

La plate-forme d'installation Web apparaît, prête pour installer WebMatrix. Cliquez sur Install.

Le processus d'installation détermine ce qu'il faut installer sur votre ordinateur et démarre le processus. Selon ce qui doit être exactement installé, le processus peut durer plusieurs minutes. Sélectionnez I Accept pour accepter les termes de la licence.

Quand c'est fait, le processus d'installation peut lancer Webmatrix automatiquement. S'il ne le peut pas, dans Windows, dans le menu Start, lancez Microsoft WebMatrix.

Lorsque vous lancez WebMatrix pour la première fois, vous avez la possibilité de vous connecter avec un compte Microsoft. Avec votre connexion, vous recevrez dix sites Web gratuits à travers Windows Azure. Vous n'avez pas besoin de vous connecter maintenant pour continuer avec ce tutoriel. Si vous ne vous connectez pas maintenant, vous aurez toujours la possibilité de le faire plus tard. La dernière rubrique (ToDo lien dernier article) de cette série de tutoriels couvre le déploiement de votre site web sur Windows Azure ; par conséquent, vous aurez besoin de vous connecter pour terminer cette rubrique.

À ce point, soit vous vous connectez avec votre compte Microsoft, soit vous sélectionnez Not Now dans le coin en bas à droite.

Pour commencer, vous allez créer un site web vide et ajouter une page. Plus tard dans un tutoriel de cette série vous apprendrez à créer un site web avec un des modèles intégrés.

Dans la fenêtre de démarrage, cliquez sur New.

Les modèles sont des fichiers et des pages précompilés de différents types de sites web. Pour voir tous les modèles disponibles par défaut, sélectionnez l'option galerie de modèles (Template Gallery).

Dans la fenêtre Quick Start, sélectionnez Empty Site dans le groupe ASP.NET et nommez-e nouveau site « WebPagesMovies ».

Cliquez sur Next.

Si vous vous êtes connecté avec votre compte Microsoft, vous aurez la possibilité de créer le site sur Windows Azure. Un nom par défaut WebPagesMovies.azurewebsites.net est suggéré, basé sur le nom de votre site. Cependant le point d'exclamation indique que ce nom n'est pas valable sur Windows Azure. Pour simplifier, sélectionnez Skip pour passer la création du site web sur Windows Azure maintenant. Plus tard dans cette série, nous publierons le site sur Windows Azure.

WebMatrix crée et ouvre le site :

En haut, il y a une barre d'outil d'accès rapide et un ruban. En bas à gauche, vous voyez le sélecteur d'espace de travail ou vous pouvez basculer entre les tâches (Site, Files, Databases, reports). Sur la droite le volet de contenu pour l'éditeur et les rapports. En bas vous pourrez voir occasionnellement une barre de notification pour les messages.

Vous en apprendrez plus sur WebMatrix et ces fonctionnalités à mesure que vous avancerez dans ces tutoriels.

Pour commencer à vous familiariser avec WebMatrix et ASP.NET Web Pages, vous allez créer une page simple.

Dans le sélecteur d'espace de travail, sélectionnez Files. Cet espace de travail vous permet de travailler avec les fichiers et les dossiers. Le volet gauche montre la structure de fichier de votre site. Le ruban change pour montrer les tâches relatives aux fichiers.

Dans le ruban cliquez sur la flèche en dessous New et puis cliquez sur New File.

WebMatrix affiche une liste de types de fichiers. Sélectionnez CSHTML et dans la zone Name saisissez « HelloWorld ». Une page CSHTML est une page ASP.NET Web Pages.

Cliquez sur OK.

WebMatrix crée la page et l'ouvre dans l'éditeur.

Comme vous pouvez le voir, la page contient principalement le balisage HTML ordinaire, à l'exception d'un bloc en haut qui ressemble à ceci :

@{

}

C'est pour ajouter du code, comme vous le verrez bientôt.

Notez que les différentes parties de cette page — les noms des éléments, attributs et textes, ainsi que le bloc en haut — sont de couleurs différentes. C'est ce que l'on appelle la coloration syntaxique, qui rend la lecture plus facile afin que tout reste clair. C'est une des caractéristiques qui facilite le travail avec les pages web dans WebMatrix.

Ajouter du contenu pour les éléments <head> et <body> comme dans l'exemple suivant. (Si vous voulez, vous pouvez simplement copier le bloc suivant et remplacer tout ce qui existe dans la page par ce code.)

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

Dans la barre d'outils d'accès rapide ou dans le menu File, cliquez sur Save.

Dans l'espace de travail Files, faites un clic-droit sur la page HelloWorld.cshtml et cliquez sur Launch in browser.

WebMatrix démarre un serveur web (IIS Express) que vous pouvez utiliser pour tester les pages sur votre ordinateur. (Sans IIS Express dans WebMatrix, vous devrez publier votre page sur un serveur web quelque part avant de le tester.) La page est affichée dans votre navigateur par défaut.

Remarquez que lorsque vous testez une page dans WebMatrix, l'URL dans le navigateur est quelque chose comme http://localhost:33651/HelloWorld.cshtml. Le nom localhost référence le serveur local, ce qui signifie que la page est présentée par un serveur web sur votre propre ordinateur. Mentionnons que WebMatrix inclue un serveur web nommé IIS Express qui s'exécute quand vous lancez une page.

Le nombre après localhost (par exemple localhost:33651) fait référence à un numéro de port sur votre ordinateur. C'est le numéro du « canal » qu'IIS Express utilise pour ce site web en particulier. Le numéro de port est sélectionné au hasard dans l'intervalle 1024 à 65536 lorsque vous créez votre site, et il est différent pour chaque site que vous créez. (Lorsque vous testerez votre site, le numéro de port sera certainement un nombre différent de 33561.) En utilisant un port différent pour chaque site web, IIS Express peut s'adresser directement à votre site web.

Plus tard, quand vous publiez votre site sur un serveur web public, vous ne verrez plus localhost dans l'URL. À ce point, vous verrez une URL plus typique du genre http://myhostingsite/mywebsite/helloworld.cshtml, quelle que soit la page. Vous en apprendrez plus sur la publication d'un site plus loin dans cette série de tutoriels.

Fermez le navigateur et revenez à la page dans WebMatrix.

Ajoutez une ligne dans le bloc de code afin qu'il ressemble au code suivant :

@{
   var currentDateTime = DateTime.Now;
}

Il sagit d'un peu de code Razor. C'est probablement évident qu'il obtient la date et l'heure courante et place cette valeur dans une variable nommé currentDateTime. Vous pourrez en savoir plus sur la syntaxe Razor dans le tutoriel suivant.

Dans le corps de la page, après l'élément <p>Hello World!<p>, ajoutez le code suivant :

<p>Right now it's @currentDateTime</p>

Ce code prend la valeur que vous avez placée dans la variable currentDateTime en haut et l'insère dans la balise de la page.

Exécutez la page de nouveau (WebMatrix sauvegarde les changements pour vous avant d'exécuter la page). Cette fois vous voyez la date et l'heure dans la page.

Attendez un moment puis actualisez la page dans le navigateur. La date et l'heure sont mises à jour.

Dans le navigateur, regardez la source de la page. Elle ressemble au code de balisage suivant :

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Notez que le bloc @{ } n'est pas présent. Notez également que la date et l'heure sont représentées par une chaîne de caractères (1/18/2012 2:49:50 PM ou équivalent), pas @currentDateTime comme vous avez dans une page .cshtml. Ce qui c'est passé c'est que lorsque vous exécutez la page, ASP.NET traite tout le code (vraiment très peu dans ce cas) qui est marqué avec @. Le code produit la sortie, et elle a été insérée dans la page.

Ce que vous avez vu, lorsque vous lisez le contenu web dynamique qu'a produit ASP.NET Web Pages, vous donne une idée des possibilités d’ASP.NET Web Page. La page que vous venez de créer contient les mêmes balises HTML que vous avez vues avant. Elle peut aussi contenir le code qui rend performantes toutes sortes de tâches. Dans cet exemple, elle a réalisé la tâche triviale d'obtenir la date et l'heure. Comme vous l'avez vu, vous pouvez alterner le code avec le balisage HTML pour produire la sortie dans la page. Lorsque quelqu'un demande une page .cshtml dans le navigateur, ASP.NET traite la page même si elle est encore au sein du serveur web. ASP.NET insère le code en sortie (le cas échéant) dans la page comme balisage HTML. Lorsque le traitement du code est fait, ASP.NET envoie la page résultante dans le navigateur. Tout ce que le navigateur obtient est du balisage HTML. Voici un schéma :

L'idée est simple, mais il y a beaucoup de tâches intéressantes que le code peut effectuer, et il y a de nombreux cas intéressants avec lesquels vous pouvez ajouter du contenu HTML dynamique dans une page. Les pages .cshtml ASP.NET, comme n'importe quelle page HTML, peuvent également inclure du code qui s'exécute dans le navigateur lui-même (le code JavaScript et Jquery). Vous allez explorer toutes ces choses dans cette série de tutoriels et dans les suivants.

Dans le prochain tutoriel de cette série, vous explorerez un peu plus la programmation ASP.NET Web Pages.

Mike Pope — Mike Pope est un programmeur auteur, créateur de l'équipe chargée du suivi du contenu sur la plate-forme Web et Outils Microsoft.

Tom FitzMacken — Tom FitzMacken est un auteur senior dans la programmation, créateur et membre de l'équipe chargée du du contenu sur la plate-forme Web et Outils.

XVII-A. Remerciements▲

XVII-B. Sources▲