Partager via


Introduction à ASP.NET MVC 3 (C#)

par Rick Anderson

Notes

Une version mise à jour de ce didacticiel est disponible ici qui utilise ASP.NET MVC 5 et Visual Studio 2013. Il est plus sécurisé, beaucoup plus simple à suivre et présente plus de fonctionnalités.

Ce tutoriel vous apprend les principes de base de la création d’une application web MVC ASP.NET à l’aide de Microsoft Visual Web Developer 2010 Express Service Pack 1, qui est une version gratuite de Microsoft Visual Studio. Avant de commencer, vérifiez que vous avez installé les prérequis listés ci-dessous. Vous pouvez tous les installer en cliquant sur le lien suivant : Programme d’installation de plateforme web. Vous pouvez également installer individuellement les prérequis à l’aide des liens suivants :

Si vous utilisez Visual Studio 2010 au lieu de Visual Web Developer 2010, installez les prérequis en cliquant sur le lien suivant : Conditions préalables de Visual Studio 2010.

Un projet Visual Web Developer avec du code source C# est disponible pour accompagner cette rubrique. Téléchargez la version C#. Si vous préférez Visual Basic, basculez vers la version Visual Basic de ce didacticiel.

Contenu

Vous allez implémenter une application de liste de films simple qui prend en charge la création, l’édition et la liste des films à partir d’une base de données. Voici deux captures d’écran de l’application que vous allez générer. Il comprend une page qui affiche une liste de films à partir d’une base de données :

MoviesWithVariousSm

L’application vous permet également d’ajouter, de modifier et de supprimer des films, ainsi que d’afficher des détails sur des films individuels. Tous les scénarios de saisie de données incluent la validation pour garantir l’exactitude des données stockées dans la base de données.

Capture d’écran de l’application de liste de films qui prend en charge la création de montage et de liste de films à partir d’une base de données.

Compétences

Vous apprendrez les compétences suivantes :

  • Comment créer un projet MVC ASP.NET.
  • Comment créer des vues et des contrôleurs MVC ASP.NET.
  • Comment créer une base de données à l’aide du paradigme Entity Framework Code First.
  • Comment récupérer et afficher des données.
  • Comment modifier des données et activer la validation des données.

Mise en route

Commencez par exécuter Visual Web Developer 2010 Express (« Visual Web Developer » en abrégé) et sélectionnez Nouveau projet dans la page Démarrer .

Visual Web Developer est un IDE ou un environnement de développement intégré. Tout comme vous utilisez Microsoft Word pour écrire des documents, vous allez utiliser un IDE pour créer des applications. Dans Visual Web Developer, il existe une barre d’outils en haut montrant les différentes options disponibles. Il existe également un menu qui fournit une autre façon d’effectuer des tâches dans l’IDE. (Par exemple, au lieu de sélectionner Nouveau projet dans la page Démarrer , vous pouvez utiliser le menu et sélectionner Fichier>Nouveau projet.)

Capture d’écran de Visual Web Developer 2010 Express pour commencer.

Création de votre première application

Vous pouvez créer des applications en utilisant Visual Basic ou Visual C# comme langage de programmation. Sélectionnez Visual C# à gauche, puis ASP.NET application web MVC 3. Nommez votre projet « MvcMovie », puis cliquez sur OK. (Si vous préférez Visual Basic, basculez vers la version Visual Basic de ce didacticiel.)

Capture d’écran du nouveau projet pour créer votre première application en utilisant Visual Basic ou Visual C Sharp comme langage de programmation.

Dans la boîte de dialogue Nouveau projet ASP.NET MVC 3 , sélectionnez Application Internet. Cochez Utiliser le balisage HTML5 et laissez Razor comme moteur d’affichage par défaut.

Capture d’écran du nouveau fournisseur de services . Boîte de dialogue Projet N E T M V C 3 pour sélectionner Application Internet.

Cliquez sur OK. Visual Web Developer a utilisé un modèle par défaut pour le projet MVC ASP.NET que vous venez de créer. Vous disposez donc d’une application qui fonctionne maintenant sans rien faire ! Il s’agit d’un simple projet « Hello World ! » et c’est un bon endroit pour commencer votre application.

Capture d’écran de Visual Web Developer qui a utilisé un modèle par défaut pour le fournisseur de services . N E T M V C que vous avez créé.

Dans le menu Déboguer, sélectionnez Démarrer le débogage.

Capture d’écran du menu Déboguer pour sélectionner Démarrer le débogage.

Notez que le raccourci clavier pour démarrer le débogage est F5.

F5 permet à Visual Web Developer de démarrer un serveur web de développement et d’exécuter votre application web. Visual Web Developer lance ensuite un navigateur et ouvre la page d’accueil de l’application. Notez que la barre d’adresse du navigateur indique localhost et non quelque chose comme example.com. En effet localhost , pointe toujours vers votre propre ordinateur local, qui dans ce cas exécute l’application que vous venez de créer. Lorsque Visual Web Developer exécute un projet web, un port aléatoire est utilisé pour le serveur web. Dans l’image ci-dessous, le numéro de port aléatoire est 43246. Lorsque vous exécutez l’application, vous verrez probablement un autre numéro de port.

Capture d’écran de Visual Web Developer qui lance un navigateur et ouvre la page d’accueil des applications.

Ce modèle par défaut vous donne deux pages à visiter et une page de connexion de base. L’étape suivante consiste à modifier le fonctionnement de cette application et à en apprendre un peu plus sur ASP.NET MVC dans le processus. Fermez votre navigateur et nous allons modifier du code.