Prise en main avec ASP.NET

par Tom FitzMacken

Pour le développement de nouvelles applications web, nous recommandons Razor Pages. Pour plus d’informations, consultez Prise en main des pages Razor.

Notes

WebMatrix n’est plus recommandé en tant qu’environnement de développement intégré pour pages Web ASP.NET. Utilisez Visual Studio ou Visual Studio Code.

Cette aide et cette application vous donnent une vue d’ensemble de pages Web ASP.NET (version 2 ou ultérieure) et de la syntaxe Razor, une infrastructure légère pour la création de sites web dynamiques. Il présente également WebMatrix, un outil de création de pages et de sites.

Niveau : nouveau dans pages Web ASP.NET.
Compétences supposées : HTML, feuilles de style en cascade de base (CSS).

Ce que vous allez apprendre dans le premier tutoriel de l’ensemble :

• Ce que pages Web ASP.NET technologie est et à quoi elle sert.
• Qu’est-ce que WebMatrix.
• Comment tout installer.
• Comment créer un site web à l’aide de WebMatrix.

Fonctionnalités/technologies abordées :

• Microsoft Web Platform Installer.
• Webmatrix.
• Pages .cshtml

Mike Pope a écrit à l’origine ce tutoriel. Tom FitzMacken l’a mis à jour pour Microsoft WebMatrix 3.

Versions logicielles utilisées dans le tutoriel

• pages Web ASP.NET (Razor) 2
• WebMatrix 3

Que devez-vous savoir ?

Nous partons du principe que vous connaissez :

• HTML. Aucune expertise approfondie n’est requise. Nous n’expliquerons pas html, mais nous n’utilisons pas non plus quelque chose de complexe. Nous fournirons des liens vers des tutoriels HTML dans lesquels nous pensons qu’ils sont utiles.
• Feuilles de style en cascade (CSS). Identique à html.
• Idées de base de données. Si vous avez utilisé une feuille de calcul pour les données et trié et filtré les données, c’est le niveau d’expertise que nous supposons généralement pour cet ensemble de tutoriels.

Nous partons également du principe que vous êtes intéressé par l’apprentissage de la programmation de base. pages Web ASP.NET utiliser un langage de programmation appelé C#. Vous n’avez pas besoin d’avoir de l’expérience en programmation, juste un intérêt pour celle-ci. Si vous avez déjà écrit un code JavaScript dans une page web, vous avez beaucoup d’arrière-plan.

Notez que si vous êtes familiarisé avec la programmation, vous constaterez peut-être que cet ensemble de tutoriels se déplace initialement lentement tandis que nous mettons les nouveaux programmeurs à jour. Cependant, à mesure que nous passons au-delà des premiers tutoriels, il y aura moins de programmation de base à expliquer et les choses se déplaceront à un clip plus rapide.

De quoi avez-vous besoin ?

Voici ce dont vous aurez besoin :

• Un ordinateur exécutant Windows 8, Windows 7, Windows Server 2008 ou Windows Server 2012.
• Une connexion Internet en direct.
• Privilèges d’administrateur (requis pour le processus d’installation).

Qu’est-ce que pages Web ASP.NET ?

pages Web ASP.NET est un framework que vous pouvez utiliser pour créer des pages web dynamiques. Une page web HTML simple est statique; son contenu est déterminé par le balisage HTML fixe qui se trouve dans la page. Les pages dynamiques comme celles que vous créez avec pages Web ASP.NET vous permettent de créer le contenu de la page à la volée, à l’aide de code.

Les pages dynamiques vous permettent d’effectuer toutes sortes de choses. Vous pouvez demander une entrée à un utilisateur à l’aide d’un formulaire, puis modifier ce que la page affiche ou à quoi elle ressemble. Vous pouvez prendre des informations d’un utilisateur, les enregistrer dans une base de données, puis les répertorier ultérieurement. Vous pouvez envoyer des e-mails à partir de votre site. Vous pouvez interagir avec d’autres services sur le web (par exemple, un service de mappage) et produire des pages qui intègrent des informations à partir de ces sources.

Qu’est-ce que WebMatrix ?

WebMatrix est un outil qui intègre un éditeur de page web, un utilitaire de base de données, un serveur web pour les pages de test et des fonctionnalités de publication de votre site web sur Internet. WebMatrix est gratuit et facile à installer et à utiliser. (Il fonctionne également pour les pages HTML simples, ainsi que pour d’autres technologies comme PHP.)

Vous n’avez pas besoin d’utiliser WebMatrix pour travailler avec pages Web ASP.NET. Vous pouvez créer des pages à l’aide d’un éditeur de texte, par exemple, et tester des pages à l’aide d’un serveur web auquel vous avez accès. Cependant, WebMatrix rend tout cela très facile, de sorte que ces tutoriels utiliseront WebMatrix tout au long.

À propos de ces tutoriels

Cet ensemble de tutoriels est une introduction à l’utilisation de pages Web ASP.NET. Il y a 9 tutoriels au total dans cet ensemble de tutoriels d’introduction. Il fait partie d’une série d’ensembles de tutoriels qui vous emmènent de pages Web ASP.NET novice à la création de sites web réels et professionnels.

Ce premier ensemble de tutoriels se concentre sur la présentation des bases de l’utilisation de pages Web ASP.NET. Lorsque vous avez terminé, vous pouvez utiliser des ensembles de tutoriels supplémentaires qui se terminent là où celui-ci se termine et qui explorent les pages web plus en profondeur.

Nous allons délibérément facilement sur les explications approfondies. Et chaque fois que nous montrons quelque chose, pour cet ensemble de tutoriels, nous choisissons toujours la façon dont nous pensons qu’il est le plus facile à comprendre. Les ensembles de tutoriels ultérieurs vont plus en profondeur et vous montrent des approches plus efficaces ou plus flexibles (également plus amusantes). Mais ces tutoriels nécessitent que vous compreniez d’abord les principes de base.

L’ensemble de tutoriels que vous venez de commencer couvre les fonctionnalités suivantes de pages Web ASP.NET :

• Présentation et obtention de tout installé. (C’est dans le tutoriel que vous lisez.)
• Notions de base de la programmation pages Web ASP.NET.
• Création d’une base de données.
• Création et traitement d’un formulaire d’entrée utilisateur.
• Ajout, mise à jour et suppression de données dans la base de données.

Qu’allez-vous créer ?

Cet ensemble de tutoriels et les suivants tournent autour d’un site web où vous pouvez lister les films que vous aimez. Vous pourrez entrer des films, les modifier et les répertorier. Voici quelques-unes des pages que vous allez créer dans cet ensemble de tutoriels. La première affiche la page de description des films que vous allez créer :

Voici la page qui vous permet d’ajouter de nouvelles informations de film à votre site :

Les ensembles de tutoriels suivants s’appuient sur cet ensemble et ajoutent d’autres fonctionnalités, telles que le chargement d’images, la possibilité de se connecter, l’envoi d’e-mails et l’intégration aux réseaux sociaux.

Voir cette application en cours d’exécution sur Azure

Voulez-vous voir le site terminé s’exécuter en tant qu’application web active ? Vous pouvez déployer une version complète de l’application sur votre compte Azure en cliquant simplement sur le bouton suivant.

Vous avez besoin d’un compte Azure pour déployer cette solution sur Azure. Si vous n’avez pas encore de compte, vous disposez des options suivantes :

• Ouvrez un compte Azure gratuitement : vous obtenez des crédits que vous pouvez utiliser pour tester les services Azure payants, et même après leur utilisation, vous pouvez conserver le compte et utiliser des services Azure gratuits.
• Activer les avantages des abonnés MSDN : votre abonnement MSDN vous donne des crédits chaque mois que vous pouvez utiliser pour les services Azure payants.

Installation de tout

Vous pouvez tout installer à l’aide du programme d’installation de plateforme web de Microsoft. En effet, vous installez le programme d’installation, puis vous l’utilisez pour installer tout le reste.

Pour utiliser pages web, vous devez disposer d’au moins Windows XP avec SP3 installé, ou Windows Server 2008 ou version ultérieure.

Dans la page Pages web du ASP.NET site web, cliquez sur Installer.

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

Cliquez sur Exécuter pour démarrer l’installation. (Si vous souhaitez enregistrer le programme d’installation, cliquez sur Enregistrer , puis exécutez le programme d’installation à partir du dossier dans lequel vous l’avez enregistré.)

Le programme d’installation de plateforme web s’affiche, prêt à installer WebMatrix. Cliquez sur Installer.

Le processus d’installation détermine ce qu’il doit installer sur votre ordinateur et démarre le processus. Selon ce qui doit être installé, le processus peut prendre de quelques instants à plusieurs minutes. Sélectionnez J’accepte pour accepter les termes du contrat de licence.

Hello, WebMatrix

Une fois terminé, le processus d’installation peut lancer WebMatrix automatiquement. Si ce n’est pas le cas, dans Windows, dans le menu Démarrer , lancez Microsoft WebMatrix.

Lorsque vous lancez WebMatrix pour la première fois, vous avez la possibilité de vous connecter à Microsoft Azure avec votre compte Microsoft. En vous connectant, vous recevrez 10 applications web gratuites via Azure. Ces applications web gratuites offrent un moyen pratique de tester vos applications. Si vous n’avez pas encore de compte Azure, mais que vous disposez d’un abonnement MSDN, vous pouvez activer vos avantages d’abonnement MSDN. Sinon, vous pouvez créer un compte d’essai gratuit en quelques minutes. Pour plus d’informations, consultez Essai gratuit Azure.

Vous n’avez pas besoin de vous connecter immédiatement pour poursuivre ce tutoriel. Si vous ne vous connectez pas maintenant, vous aurez toujours la possibilité de vous connecter ultérieurement. La dernière rubrique de cette série de tutoriels explique comment déployer votre site web sur Azure ; par conséquent, vous devez vous connecter pour terminer cette rubrique.

À ce stade, connectez-vous avec votre compte Microsoft ou sélectionnez Pas maintenant dans le coin inférieur droit.

Pour commencer, vous allez créer un site web vide et ajouter une page. Dans un tutoriel ultérieur de cet ensemble, vous allez jouer avec l’un des modèles de site web intégrés.

Dans la fenêtre d’accueil, cliquez sur Nouveau.

Les modèles sont des fichiers et des pages prédéfinis pour différents types de sites web. Pour afficher tous les modèles disponibles par défaut, sélectionnez l’option Galerie de modèles.

Dans la fenêtre Démarrage rapide , sélectionnez Site vide dans le groupe ASP.NET et nommez le nouveau site « WebPagesMovies ».

Cliquez sur Suivant.

Si vous vous êtes connecté à votre compte Microsoft, vous aurez la possibilité de créer le site sur Azure. En fonction du nom de votre site, le nom par défaut de WebPagesMovies.azurewebsites.net est suggéré ; toutefois, le point d’exclamation indique que ce nom n’est pas disponible sur Windows Azure. Par souci de simplicité, sélectionnez Ignorer pour contourner la création du site web sur Azure. Plus loin dans cette série, nous publierons le site sur Azure.

WebMatrix crée et ouvre le site :

En haut, il y a une barre d’outils Accès rapide et un ruban. En bas à gauche, vous voyez le sélecteur d’espace de travail dans lequel vous basculez entre les tâches (Site, Fichiers, Bases de données, Rapports). Sur la droite se trouve le volet de contenu pour l’éditeur et pour les rapports. Et en bas, vous verrez parfois une barre de notification pour les messages.

Vous en apprendrez plus sur WebMatrix et ses fonctionnalités au fil de ces tutoriels.

Création d’une page web

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

Dans le sélecteur d’espace de travail, sélectionnez l’espace de travail Fichiers . Cet espace de travail vous permet d’utiliser des fichiers et des dossiers. Le volet gauche affiche la structure de fichiers de votre site. Le ruban change pour afficher les tâches liées aux fichiers.

Dans le ruban, cliquez sur la flèche sous Nouveau , puis sur Nouveau fichier.

WebMatrix affiche une liste de types de fichiers. Sélectionnez CSHTML, puis dans la zone Nom , tapez « HelloWorld ». Une page CSHTML est une page pages Web ASP.NET.

Cliquez sur OK.

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

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

@{ 

}

C’est pour ajouter du code, comme vous le verrez sous peu.

Notez que les différentes parties de la page (les noms d’éléments, les attributs et le texte, ainsi que le bloc en haut) sont toutes dans des couleurs différentes. C’est ce qu’on appelle la mise en surbrillance syntaxique, ce qui facilite la lisibilité de tout. Il s’agit de l’une des fonctionnalités qui facilite l’utilisation des pages web dans WebMatrix.

Ajoutez du contenu pour les <head> éléments et <body> , comme dans l’exemple suivant. (Si vous le souhaitez, vous pouvez simplement copier le bloc suivant et remplacer toute la page existante 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 Accès rapide ou dans le menu Fichier , cliquez sur Enregistrer.

Test de la page

Dans l’espace de travail Fichiers , cliquez avec le bouton droit sur la page HelloWorld.cshtml , puis cliquez sur Lancer dans le navigateur.

WebMatrix démarre un serveur web intégré (IIS Express) que vous pouvez utiliser pour tester des pages sur votre ordinateur. (Sans IIS Express dans WebMatrix, vous devrez publier votre page sur un serveur web quelque part pour pouvoir la tester.) La page s’affiche dans votre navigateur par défaut.

Notez que lorsque vous testez une page dans WebMatrix, l’URL dans le navigateur est semblable http://localhost:33651/HelloWorld.cshtml. au nom localhost fait référence à un serveur local, ce qui signifie que la page est prise en charge par un serveur web qui se trouve sur votre propre ordinateur. Comme indiqué précédemment, WebMatrix inclut un programme de serveur web nommé IIS Express qui s’exécute lorsque 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. Il s’agit du numéro du « canal » que IIS Express utilise pour ce site web particulier. Le numéro de port est sélectionné au hasard entre 1024 et 65536 lorsque vous créez votre site, et il est différent pour chaque site que vous créez. (Lorsque vous testez votre propre site, le numéro de port est presque certainement différent de 33561.) En utilisant un port différent pour chaque site web, IIS Express pouvez déterminer avec lesquels de vos sites il parle.

Plus tard, lorsque vous publiez votre site sur un serveur web public, localhost n’apparaît plus dans l’URL. À ce stade, vous verrez une URL plus classique comme http://myhostingsite/mywebsite/HelloWorld.cshtml ou quelle que soit la page. Vous en apprendrez plus sur la publication d’un site plus loin dans cette série de tutoriels.

Ajout de code Server-Side

Fermez le navigateur et revenez à la page dans WebMatrix.

Ajoutez une ligne au bloc de code afin qu’il ressemble au code suivant :

@{
   var currentDateTime = DateTime.Now;
}

Il s’agit d’un peu de code Razor. Il est probablement clair qu’il obtient la date et l’heure actuelles et place cette valeur dans une variable nommée currentDateTime. Vous en apprendrez 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 ce qui suit :

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

Ce code obtient la valeur que vous avez placée dans la currentDateTime variable en haut et l’insère dans le balisage de la page. Le @ caractère marque le code pages Web ASP.NET dans la page.

Réexécutez la page (WebMatrix enregistre les modifications pour vous avant d’exécuter la page). Cette fois, vous voyez la date et l’heure dans la page.

Patientez quelques instants, puis actualisez la page dans le navigateur. L’affichage de la date et de l’heure est mis à jour.

Dans le navigateur, examinez la source de la page. Elle se présente comme le 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 en haut n’est pas là. Notez également que l’affichage de la date et de l’heure affiche une chaîne réelle de caractères (1/18/2012 2:49:50 PM ou autre), contrairement @currentDateTime à ce que vous aviez dans la page .cshtml . Ce qui s’est passé ici, c’est que lorsque vous avez exécuté la page, ASP.NET traité tout le code (très peu dans ce cas) qui a été marqué avec @. Le code produit une sortie et cette sortie a été insérée dans la page.

C’est ce que pages Web ASP.NET est à propos de

Lorsque vous lisez que pages Web ASP.NET produit du contenu web dynamique, ce que vous avez vu ici est l’idée. La page que vous venez de créer contient le même balisage HTML que vous avez déjà vu. Il peut également contenir du code qui peut effectuer toutes sortes de tâches. Dans cet exemple, il a effectué la tâche triviale d’obtenir la date et l’heure actuelles. Comme vous l’avez vu, vous pouvez entrelacer du code avec le code HTML pour produire une sortie dans la page. Lorsque quelqu’un demande une page .cshtml dans le navigateur, ASP.NET traite la page alors qu’elle est toujours entre les mains du serveur web. ASP.NET insère la sortie du code (le cas échéant) dans la page au format HTML. Lorsque le traitement du code est terminé, ASP.NET envoie la page résultante au navigateur. Tout ce que le navigateur obtient est HTML. Voici un diagramme :

L’idée est simple, mais il existe de nombreuses tâches intéressantes que le code peut effectuer, et il existe de nombreuses façons intéressantes d’ajouter dynamiquement du contenu HTML à la page. Et ASP.NET pages .cshtml , comme n’importe quelle page HTML, peut également inclure du code qui s’exécute dans le navigateur lui-même (code JavaScript et jQuery). Vous allez explorer toutes ces choses dans cet ensemble de tutoriels et dans les suivants.

À venir

Dans le tutoriel suivant de cette série, vous explorez un peu plus pages Web ASP.NET la programmation.

Ressources supplémentaires

Créez un site web ASP.NET à partir de zéro. Il s’agit d’un tutoriel qui porte spécifiquement sur l’utilisation de WebMatrix (et non pages Web ASP.NET). Il aborde un peu plus en détail certaines des fonctionnalités supplémentaires de WebMatrix que nous n’aborderons pas dans cet ensemble de tutoriels.

Next