MVC Framework - Première application

Lançons-nous et créons notre première application MVC à l'aide de vues et de contrôleurs. Une fois que nous aurons une petite expérience pratique sur le fonctionnement d'une application MVC de base, nous apprendrons tous les composants et concepts individuels dans les chapitres suivants.

Créer la première application MVC

Step 1- Démarrez votre Visual Studio et sélectionnez Fichier → Nouveau → Projet. Sélectionnez Web → Application Web ASP.NET MVC et nommez ce projet commeFirstMVCApplicatio. Sélectionnez l'emplacement commeC:\MVC. Cliquez sur OK.

Step 2- Cela ouvrira l'option Modèle de projet. Sélectionnez Modèle vide et Afficher le moteur en tant que rasoir. Cliquez sur OK.

Maintenant, Visual Studio créera notre premier projet MVC comme indiqué dans la capture d'écran suivante.

Step 3- Nous allons maintenant créer le premier contrôleur dans notre application. Les contrôleurs ne sont que de simples classes C #, qui contiennent plusieurs méthodes publiques, appelées méthodes d'action. Pour ajouter un nouveau contrôleur, cliquez avec le bouton droit sur le dossier Contrôleurs dans notre projet et sélectionnez Ajouter → Contrôleur. Nommez le contrôleur HomeController et cliquez sur Ajouter.

Cela créera un fichier de classe HomeController.cs sous le dossier Controllers avec le code par défaut suivant.

using System; 
using System.Web.Mvc;  

namespace FirstMVCApplication.Controllers { 
   
   public class HomeController : Controller { 
      
      public ViewResult Index() { 
         return View(); 
      }  
   } 
}

Le code ci-dessus définit essentiellement une méthode publique Index dans notre HomeController et renvoie un objet ViewResult. Dans les étapes suivantes, nous allons apprendre à renvoyer une vue à l'aide de l'objet ViewResult.

Step 4- Nous allons maintenant ajouter une nouvelle vue à notre contrôleur domestique. Pour ajouter une nouvelle vue, cliquez avec le bouton droit sur le dossier de vue et cliquez sur Ajouter → Vue.

Step 5- Nommez la nouvelle vue comme index et View Engine comme Razor (SCHTML). Cliquez sur Ajouter.

Cela ajoutera un nouveau cshtml fichier dans le dossier Views / Home avec le code suivant -

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

Step 6 - Modifiez le contenu du corps de la vue ci-dessus avec le code suivant -

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

Step 7- Lancez maintenant l'application. Cela vous donnera la sortie suivante dans le navigateur. Cette sortie est rendue en fonction du contenu de notre fichier View. L'application appelle d'abord le contrôleur qui à son tour appelle cette vue et produit la sortie.

À l'étape 7, la sortie que nous avons reçue était basée sur le contenu de notre fichier View et n'avait aucune interaction avec le contrôleur. En faisant un pas en avant, nous allons maintenant créer un petit exemple pour afficher un message de bienvenue avec l'heure actuelle en utilisant une interaction de View et Controller.

Step 8- MVC utilise l'objet ViewBag pour transmettre des données entre Controller et View. Ouvrez HomeController.cs et modifiez la fonction Index avec le code suivant.

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

Dans le code ci-dessus, nous définissons la valeur de l'attribut Greeting de l'objet ViewBag. Le code vérifie l'heure actuelle et renvoie le message Good Morning / Afternoon en conséquence à l'aide de l'instruction return View (). Notez qu'ici, la salutation n'est qu'un exemple d'attribut que nous avons utilisé avec l'objet ViewBag. Vous pouvez utiliser n'importe quel autre nom d'attribut à la place de Message d'accueil.

Step 9 - Ouvrez Index.cshtml et copiez le code suivant dans la section body.

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

Dans le code ci-dessus, nous accédons à la valeur de l'attribut Greeting de l'objet ViewBag en utilisant @ (qui serait défini à partir du contrôleur).

Step 10- Exécutez à nouveau l'application. Cette fois, notre code exécutera d'abord le Controller, définira le ViewBag, puis le restituera à l'aide du code View. Voici la sortie.