Prise en main avec ASP.NET

par Tom FitzMacken

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

Notes

WebMatrix n’est plus recommandé comme 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 des 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 permettant de créer des pages et des sites.

Niveau : Nouveautés de 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 ce qu’elle est pour.
  • Qu’est-ce que WebMatrix est.
  • Comment installer tout.
  • 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 d’abord écrit 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 êtes familiarisé avec :

  • HTML. Aucune expertise approfondie n’est nécessaire. Nous n’expliquerons pas le code HTML, mais nous n’utilisons pas non plus de complexes. Nous fournirons des liens vers des didacticiels HTML où nous pensons qu’ils sont utiles.
  • Feuilles de style en cascade (CSS). Identique à HTML.
  • Idées de base de base de données. Si vous avez utilisé une feuille de calcul pour les données et triées et filtré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 un arrière-plan dans la programmation, juste un intérêt pour elle. 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 didacticiels se déplace initialement lentement pendant que nous mettons de nouveaux programmeurs à la vitesse. Comme nous passons au-delà des premiers tutoriels, cependant, il y aura moins de programmation de base pour expliquer et les choses se déplaceront à un clip plus rapide.

Qu’est-ce dont vous avez besoin ?

Voici ce dont vous aurez besoin :

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

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

pages Web ASP.NET est une infrastructure 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 du code.

Les pages dynamiques vous permettent d’effectuer toutes sortes de choses. Vous pouvez demander à un utilisateur d’entrer une entrée à l’aide d’un formulaire, puis modifier ce que la page affiche ou comment elle ressemble. Vous pouvez prendre des informations à partir d’un utilisateur, l’enregistrer dans une base de données, puis la 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 provenant de ces sources.

Qu’est-ce que WebMatrix ?

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

Vous n’êtes pas obligé 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. Toutefois, WebMatrix rend tout cela très facile, de sorte que ces tutoriels utiliseront WebMatrix tout au long.

À propos de ces didacticiels

Cet ensemble de tutoriels est une introduction à l’utilisation de pages Web ASP.NET. Il existe 9 tutoriels au total dans cet ensemble de didacticiels d’introduction. Il fait partie d’une série de jeux de tutoriels qui vous amène de pages Web ASP.NET novice à créer des sites web réels et professionnels.

Ce premier didacticiel se concentre sur l’affichage des principes fondamentaux de l’utilisation de pages Web ASP.NET. Lorsque vous avez terminé, vous pouvez utiliser des ensembles de didacticiels supplémentaires qui récupèrent l’emplacement où celui-ci se termine et qui explorent les pages web plus en détail.

Nous allons délibérément facilement sur les explications approfondies. Et chaque fois que nous montrons quelque chose, pour ce tutoriel, nous choisissons toujours la façon dont nous pensons être plus facile à comprendre. Les ensembles de tutoriels ultérieurs passent en profondeur et vous montrent des approches plus efficaces ou plus flexibles (également plus amusantes). Toutefois, ces didacticiels vous obligent à comprendre d’abord les principes de base.

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

  • Introduction et installation de tous les éléments. (C’est dans le tutoriel que vous lisez.)
  • Principes 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.

Que allez-vous créer ?

Ce didacticiel est défini et les suivants tournent autour d’un site web où vous pouvez répertorier les films que vous aimez. Vous serez en mesure d’entrer des films, de les modifier et de les répertorier. Voici quelques 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 :

Application Finshed Movie montrant une liste de films

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

Application de film terminée montrant la page Ajouter un film

Les ensembles de tutoriels suivants s’appuient sur cet ensemble et ajoutent des fonctionnalités supplémentaires, telles que le chargement d’images, la possibilité pour les utilisateurs de se connecter, l’envoi de messages électroniques et l’intégration avec les réseaux sociaux.

Voir cette application s’exécutant sur Azure

Voulez-vous voir le site terminé s’exécutant 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.

Bouton de la fonction de déploiement Azure.] (https://azuredeploy.net/?WT.mc_id=deploy_azure_aspnet&repository=https://github.com/tfitzmac/WebPagesMovies)

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.
  • Activez les avantages de l’abonné MSDN : votre abonnement MSDN vous donne des crédits tous les mois que vous pouvez utiliser pour les services Azure payants.

Installation de tout

Vous pouvez tout installer à l’aide de Web Platform Installer à partir de Microsoft. En effet, vous installez le programme d’installation, puis vous l’utilisez pour installer tout le reste.

Pour utiliser des 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 site web ASP.NET, cliquez sur Installer.

ASP.NET site web affichant le bouton « Installer WebMatrix »

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

accepter le terme pour commencer l’installation

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 où vous l’avez enregistré.)

Capture d’écran de la bannière en cours d’exécution du programme de fenêtre du navigateur montrant le bouton Exécuter mis en surbrillance avec un rectangle rouge.

Web Platform Installer s’affiche, prêt à installer WebMatrix. Cliquez sur Installer.

Capture d’écran de Web Platform Installer montrant le programme d’installation de Microsoft Web Matrix avec le bouton Installer mis en surbrillance avec un rectangle rouge.

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é exactement, le processus peut prendre de quelques instants à plusieurs minutes. Sélectionnez J’accepte d’accepter les termes du contrat de licence.

Hello, WebMatrix

Une fois cette opération terminée, 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’êtes pas obligé de vous connecter pour continuer avec ce didacticiel. 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.

Connexion

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

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

Écran de démarrage de WebMatrix

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.

Sélectionner la 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 ».

Fenêtre Démarrage rapide webMatrix avec un modèle de site vide sélectionné

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. Pour plus de simplicité, sélectionnez Ignorer pour contourner la création du site web sur Azure pour l’instant. Plus loin dans cette série, nous publierons le site sur Azure.

créer un site Azure

WebMatrix crée et ouvre le site :

Nouveau site WebPagesMovies ouvert dans WebMatrix

En haut, il existe 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 de l’éditeur et des rapports. En bas, vous verrez parfois une barre de notification pour les messages.

Vous en apprendrez davantage sur WebMatrix et ses fonctionnalités à mesure que vous parcourez ces didacticiels.

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.

Espace de travail de fichier dans WebMatrix

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

Utilisation de la commande « Nouveau » dans le ruban pour créer un 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.

Création d’une page CSHTML nommée HelloWorld.cshtml

Cliquez sur OK.

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

Nouvelle page HelloWorld dans l’éditeur WebMatrix

Comme vous pouvez le voir, la page contient principalement des marques HTML ordinaires, à 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 la page , les noms d’éléments, les attributs et le texte, ainsi que le bloc en haut, sont tous dans des couleurs différentes. Il s’agit de la mise en surbrillance de la syntaxe, ce qui facilite la mise en évidence de tous les éléments. Il s’agit de l’une des fonctionnalités qui facilitent l’utilisation des pages web dans WebMatrix.

Ajoutez du contenu pour les <head> éléments comme <body> dans l’exemple suivant. (Si vous le souhaitez, vous pouvez simplement copier le bloc suivant et remplacer l’intégralité de 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.

Bouton Enregistrer dans la barre d’outils Accès rapide WebMatrix

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.

Exécution d’une page à l’aide du bouton Exécuter dans le ruban WebMatrix

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 avant de pouvoir la tester.) La page s’affiche dans votre navigateur par défaut.

Page « Hello World » s’exécutant dans le navigateur

Notez que lorsque vous testez une page dans WebMatrix, l’URL du navigateur est similaire http://localhost:33651/HelloWorld.cshtml. au nom localhost fait référence à un serveur local, ce qui signifie que la page est servie par un serveur web qui se trouve sur votre propre ordinateur. Comme indiqué, 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 nombre de « canaux » que IIS Express utilise pour ce site web particulier. Le numéro de port est sélectionné au hasard de la plage 1024 à 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 sera presque certainement un nombre différent de 33561.) En utilisant un port différent pour chaque site web, IIS Express pouvez conserver directement les sites auxquels il parle.

Plus tard, lorsque vous publiez votre site sur un serveur web public, vous ne voyez plus localhost 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 davantage 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 pour qu’elle 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 davantage sur la syntaxe Razor dans le tutoriel suivant.

Dans le corps de la page, après l’élément <p>Hello World!</p> , ajoutez les éléments suivants :

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

Ce code obtient la valeur que vous placez 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.

Page « Hello World » s’exécutant dans le navigateur avec un affichage de temps généré dynamiquement

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

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

C’est ce que pages Web ASP.NET à 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 celui que vous avez vu précédemment. 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 intersperser du code avec le code HTML pour produire la sortie dans la page. Lorsque quelqu’un demande une page .cshtml dans le navigateur, ASP.NET traite la page pendant qu’elle est toujours aux mains du serveur web. ASP.NET insère la sortie du code (le cas échéant) dans la page en tant que code HTML. Lorsque le traitement du code est terminé, ASP.NET envoie la page résultante au navigateur. Tout le navigateur obtient jamais html. Voici un diagramme :

Flux conceptuel de la façon dont ASP.NET génère du code HTML dynamiquement

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 dans lesquelles vous pouvez 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 ce jeu de tutoriels et dans les versions suivantes.

Venir à venir suivant

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

Ressources supplémentaires

Créez un site web ASP.NET à partir de zéro. Il s’agit d’un didacticiel spécifiquement sur l’utilisation de WebMatrix (et non pages Web ASP.NET). Il décrit plus en détail certaines des fonctionnalités supplémentaires de WebMatrix que nous ne aborderons pas dans ce jeu de tutoriels.