MVC Framework - Guide rapide

le Model-View-Controller (MVC) est un modèle architectural qui sépare une application en trois composants logiques principaux: le model, la vue et le contrôleur. Chacun de ces composants est conçu pour gérer des aspects de développement spécifiques d'une application. MVC est l'un des frameworks de développement Web standard les plus fréquemment utilisés pour créer des projets évolutifs et extensibles.

Composants MVC

Voici les composants de MVC -

Modèle

Le composant Modèle correspond à toute la logique liée aux données avec laquelle l'utilisateur travaille. Cela peut représenter les données transférées entre les composants View et Controller ou toute autre donnée liée à la logique métier. Par exemple, un objet Client récupérera les informations client de la base de données, les manipulera et mettra à jour ses données dans la base de données ou les utilisera pour rendre les données.

Vue

Le composant View est utilisé pour toute la logique d'interface utilisateur de l'application. Par exemple, la vue Client comprendra tous les composants de l'interface utilisateur tels que les zones de texte, les listes déroulantes, etc. avec lesquels l'utilisateur final interagit.

Manette

Les contrôleurs agissent comme une interface entre les composants de modèle et de vue pour traiter toute la logique métier et les demandes entrantes, manipuler les données à l'aide du composant de modèle et interagir avec les vues pour rendre la sortie finale. Par exemple, le contrôleur client gérera toutes les interactions et entrées de la vue client et mettra à jour la base de données à l'aide du modèle client. Le même contrôleur sera utilisé pour visualiser les données du Client.

ASP.NET MVC

ASP.NET prend en charge trois modèles de développement majeurs: pages Web, formulaires Web et MVC (Model View Controller). Le framework ASP.NET MVC est un framework de présentation léger et hautement testable qui est intégré aux fonctionnalités ASP.NET existantes, telles que les pages maîtres, l'authentification, etc. Dans .NET, ce framework est défini dans l'assembly System.Web.Mvc. La dernière version de MVC Framework est 5.0. Nous utilisons Visual Studio pour créer des applications ASP.NET MVC qui peuvent être ajoutées en tant que modèle dans Visual Studio.

Fonctionnalités ASP.NET MVC

ASP.NET MVC fournit les fonctionnalités suivantes -

  • Idéal pour développer des applications complexes mais légères.

  • Fournit un cadre extensible et enfichable, qui peut être facilement remplacé et personnalisé. Par exemple, si vous ne souhaitez pas utiliser le moteur de vue Razor ou ASPX intégré, vous pouvez utiliser tout autre moteur de vue tiers ou même personnaliser les moteurs existants.

  • Utilise la conception basée sur les composants de l'application en la divisant logiquement en composants Modèle, Vue et Contrôleur. Cela permet aux développeurs de gérer la complexité des projets à grande échelle et de travailler sur des composants individuels.

  • La structure MVC améliore le développement piloté par les tests et la testabilité de l'application, car tous les composants peuvent être conçus en fonction de l'interface et testés à l'aide d'objets fictifs. Par conséquent, ASP.NET MVC Framework est idéal pour les projets avec une grande équipe de développeurs Web.

  • Prend en charge toutes les vastes fonctionnalités ASP.NET existantes, telles que l'autorisation et l'authentification, les pages maîtres, la liaison de données, les contrôles utilisateur, les appartenances, le routage ASP.NET, etc.

  • N'utilise pas le concept de l'état d'affichage (qui est présent dans ASP.NET). Cela aide à créer des applications, qui sont légères et donnent un contrôle total aux développeurs.

Ainsi, vous pouvez considérer MVC Framework comme un framework majeur basé sur ASP.NET fournissant un large ensemble de fonctionnalités supplémentaires axées sur le développement et les tests basés sur des composants.

Dans le dernier chapitre, nous avons étudié le flux d'architecture de haut niveau de MVC Framework. Voyons maintenant comment se déroule l'exécution d'une application MVC lorsqu'il y a une certaine demande du client. Le diagramme suivant illustre le flux.

Diagramme de flux MVC

Étapes du flux

Step 1 - Le navigateur client envoie la demande à l'application MVC.

Step 2 - Global.ascx reçoit cette demande et effectue le routage en fonction de l'URL de la demande entrante à l'aide des objets RouteTable, RouteData, UrlRoutingModule et MvcRouteHandler.

Step 3 - Cette opération de routage appelle le contrôleur approprié et l'exécute à l'aide de l'objet IControllerFactory et de la méthode Execute de l'objet MvcHandler.

Step 4 - Le contrôleur traite les données à l'aide de Model et appelle la méthode appropriée à l'aide de l'objet ControllerActionInvoker

Step 5 - Le modèle traité est ensuite transmis à la vue, qui à son tour restitue la sortie finale.

Les formulaires Web MVC et ASP.NET sont des modèles de développement interdépendants mais différents, selon les besoins de l'application et d'autres facteurs. À un niveau élevé, vous pouvez considérer que MVC est un cadre d'application Web avancé et sophistiqué conçu en tenant compte de la séparation des préoccupations et de la testabilité. Les deux cadres ont leurs avantages et leurs inconvénients en fonction des exigences spécifiques. Ce concept peut être visualisé à l'aide du diagramme suivant -

Diagramme MVC et ASP.NET

Tableau de comparaison

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.

Maintenant que nous avons déjà créé un exemple d'application MVC, comprenons la structure des dossiers d'un projet MVC. Nous allons créer un nouveau projet MVC pour apprendre cela.

Dans votre Visual Studio, ouvrez Fichier → Nouveau → Projet et sélectionnez Application ASP.NET MVC. Nommez-le commeMVCFolderDemo.

Cliquez sur OK. Dans la fenêtre suivante, sélectionnez Application Internet comme modèle de projet et cliquez sur OK.

Cela créera un exemple d'application MVC comme indiqué dans la capture d'écran suivante.

Note- Les fichiers présents dans ce projet proviennent du modèle par défaut que nous avons sélectionné. Ceux-ci peuvent changer légèrement selon les différentes versions.

Dossier des contrôleurs

Ce dossier contiendra toutes les classes de contrôleur. MVC requiert que le nom de tous les fichiers du contrôleur se termine par Controller.

Dans notre exemple, le dossier Controllers contient deux fichiers de classe: AccountController et HomeController.

Dossier Modèles

Ce dossier contiendra toutes les classes Model, qui sont utilisées pour travailler sur les données d'application.

Dans notre exemple, le dossier Models contient AccountModels. Vous pouvez ouvrir et consulter le code de ce fichier pour voir comment le modèle de données est créé pour la gestion des comptes dans notre exemple.

Dossier Views

Ce dossier stocke les fichiers HTML liés à l'affichage de l'application et à l'interface utilisateur. Il contient un dossier pour chaque contrôleur.

Dans notre exemple, vous verrez trois sous-dossiers sous Vues, ​​à savoir Compte, Accueil et Partagé qui contient des fichiers html spécifiques à cette zone d'affichage.

Dossier App_Start

Ce dossier contient tous les fichiers nécessaires au chargement de l'application.

Par exemple, le fichier RouteConfig est utilisé pour acheminer l'URL entrante vers le contrôleur et l'action corrects.

Dossier de contenu

Ce dossier contient tous les fichiers statiques, tels que css, images, icônes, etc.

Le fichier Site.css à l'intérieur de ce dossier est le style par défaut appliqué par l'application.

Dossier Scripts

Ce dossier stocke tous les fichiers JS du projet. Par défaut, Visual Studio ajoute MVC, jQuery et d'autres bibliothèques JS standard.

Le composant 'Modèle' est responsable de la gestion des données de l'application. Il répond à la demande de la vue et il répond également aux instructions du contrôleur pour se mettre à jour.

Les classes de modèle peuvent être créées manuellement ou générées à partir d'entités de base de données. Nous allons voir de nombreux exemples de création manuelle de modèles dans les prochains chapitres. Ainsi dans ce chapitre, nous allons essayer l'autre option, c'est-à-dire générer à partir de la base de données afin que vous ayez une expérience pratique sur les deux méthodes.

Créer des entités de base de données

Connectez-vous à SQL Server et créez une nouvelle base de données.

Exécutez maintenant les requêtes suivantes pour créer de nouvelles tables.

CREATE TABLE [dbo].[Student]( 
   [StudentID]      INT           IDENTITY (1,1) NOT NULL, 
   [LastName]       NVARCHAR (50) NULL, 
   [FirstName]      NVARCHAR (50) NULL, 
   [EnrollmentDate] DATETIME      NULL, 
   PRIMARY KEY CLUSTERED ([StudentID] ASC) 
)  

CREATE TABLE [dbo].[Course]( 
   [CourseID] INT           IDENTITY (1,1) NOT NULL, 
   [Title]    NVARCHAR (50) NULL, 
   [Credits]  INT           NULL, 
   PRIMARY KEY CLUSTERED ([CourseID] ASC) 
)  

CREATE TABLE [dbo].[Enrollment]( 
   [EnrollmentID] INT IDENTITY (1,1) NOT NULL, 
   [Grade]        DECIMAL(3,2) NULL, 
   [CourseID]     INT NOT NULL, 
   [StudentID]    INT NOT NULL, 
   PRIMARY KEY CLUSTERED ([EnrollmentID] ASC), 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Course_CourseID] FOREIGN KEY ([CourseID]) 
   REFERENCES [dbo].[Course]([CourseID]) ON DELETE CASCADE, 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Student_StudentID] FOREIGN KEY ([StudentID]) 
   REFERENCES [dbo].[Student]([StudentID]) ON DELETE CASCADE 
)

Générer des modèles à l'aide d'entités de base de données

Après avoir créé la base de données et configuré les tables, vous pouvez continuer et créer une nouvelle application vide MVC. Cliquez avec le bouton droit sur le dossier Modèles de votre projet et sélectionnez Ajouter → Nouvel élément. Ensuite, sélectionnez ADO.NET Entity Data Model.

Dans l'assistant suivant, choisissez Générer à partir de la base de données et cliquez sur Suivant. Définissez la connexion à votre base de données SQL.

Sélectionnez votre base de données et cliquez sur Tester la connexion. Un écran similaire au suivant suivra. Cliquez sur Suivant.

Sélectionnez Tables, vues et procédures et fonctions stockées. Cliquez sur Terminer. Vous verrez la vue du modèle créée comme indiqué dans la capture d'écran suivante.

Les opérations ci-dessus créeraient automatiquement un fichier modèle pour toutes les entités de la base de données. Par exemple, la table Student que nous avons créée aboutira à un fichier modèle Student.cs avec le code suivant -

namespace MvcModelExample.Models { 
   using System; 
   using System.Collections.Generic; 
     
   public partial class Student { 
      
      public Student() { 
         this.Enrollments = new HashSet(); 
      } 
     
      public int StudentID { get; set; } 
      public string LastName { get; set; } 
      public string FirstName { get; set; } 
      public Nullable EnrollmentDate { get; set; } 
      public virtual ICollection Enrollments { get; set; } 
   } 
}

Les contrôleurs Asp.net MVC sont responsables du contrôle du flux d'exécution de l'application. Lorsque vous faites une demande (signifie demander une page) à l'application MVC, un contrôleur est chargé de renvoyer la réponse à cette demande. Le contrôleur peut effectuer une ou plusieurs actions. L'action du contrôleur peut renvoyer différents types de résultats d'action à une demande particulière.

Le contrôleur est responsable du contrôle de la logique de l'application et agit en tant que coordinateur entre la vue et le modèle. Le contrôleur reçoit une entrée des utilisateurs via la vue, puis traite les données de l'utilisateur à l'aide du modèle et transmet les résultats à la vue.

Créer un contrôleur

Pour créer un contrôleur -

Step 1 - Créez une application vide MVC, puis cliquez avec le bouton droit sur le dossier Controller dans votre application MVC.

Step 2- Sélectionnez l'option de menu Ajouter → Contrôleur. Après la sélection, la boîte de dialogue Ajouter un contrôleur s'affiche. Nommez le contrôleur commeDemoController.

Un fichier de classe Controller sera créé comme indiqué dans la capture d'écran suivante.

Créer un contrôleur avec IController

Dans MVC Framework, les classes de contrôleur doivent implémenter l'interface IController à partir de l'espace de noms System.Web.Mvc.

public interface IController {
   void Execute(RequestContext requestContext);
}

C'est une interface très simple. La seule méthode, Execute, est appelée lorsqu'une demande est ciblée sur la classe de contrôleur. MVC Framework sait quelle classe de contrôleur a été ciblée dans une demande en lisant la valeur de la propriété de contrôleur générée par les données de routage.

Step 1- Ajoutez un nouveau fichier de classe et nommez-le DemoCustomController. Modifiez maintenant cette classe pour hériter de l'interface IController.

Step 2 - Copiez le code suivant dans cette classe.

public class DemoCustomController:IController { 
   
   public void Execute(System.Web.Routing.RequestContext requestContext) { 
      var controller = (string)requestContext.RouteData.Values["controller"]; 
      var action = (string)requestContext.RouteData.Values["action"]; 
      requestContext.HttpContext.Response.Write( 
      string.Format("Controller: {0}, Action: {1}", controller, action)); 
   } 
}

Step 3 - Exécutez l'application et vous recevrez la sortie suivante.

Comme vu dans les chapitres d'introduction initiaux, View est le composant impliqué dans l'interface utilisateur de l'application. Ces vues sont généralement liées à partir des données du modèle et ont des extensions telles que html, aspx, cshtml, vbhtml, etc. Dans notre première application MVC, nous avions utilisé Views with Controller pour afficher les données à l'utilisateur final. Pour rendre ces contenus statiques et dynamiques dans le navigateur, MVC Framework utilise des moteurs d'affichage. Les moteurs de visualisation sont essentiellement une implémentation de syntaxe de balisage, qui est responsable du rendu du HTML final dans le navigateur.

MVC Framework est livré avec deux moteurs de vue intégrés -

Razor Engine- Razor est une syntaxe de balisage qui active le code C # ou VB côté serveur dans les pages Web. Ce code côté serveur peut être utilisé pour créer du contenu dynamique lorsque la page Web est en cours de chargement. Razor est un moteur avancé par rapport au moteur ASPX et a été lancé dans les versions ultérieures de MVC.

ASPX Engine- ASPX ou le moteur Web Forms est le moteur d'affichage par défaut inclus dans MVC Framework depuis le début. L'écriture d'un code avec ce moteur est similaire à l'écriture d'un code dans ASP.NET Web Forms.

Vous trouverez ci-dessous de petits extraits de code comparant à la fois Razor et le moteur ASPX.

Le rasoir

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

Parmi ces deux, Razor est un moteur de visualisation avancé car il est livré avec une syntaxe compacte, des approches de développement pilotées par les tests et de meilleures fonctionnalités de sécurité. Nous utiliserons le moteur Razor dans tous nos exemples car il s'agit du moteur View le plus utilisé.

Ces moteurs de visualisation peuvent être codés et implémentés dans les deux types suivants:

  • Fortement typé
  • Typé dynamique

Ces approches sont similaires respectivement à la liaison précoce et à la liaison tardive dans lesquelles les modèles seront liés à la vue de manière forte ou dynamique.

Vues fortement typées

Pour comprendre ce concept, créons un exemple d'application MVC (suivez les étapes des chapitres précédents) et ajoutez un fichier de classe Controller nommé ViewDemoController.

Maintenant, copiez le code suivant dans le fichier du contrôleur -

using System.Collections.Generic; 
using System.Web.Mvc;  

namespace ViewsInMVC.Controllers { 
   
   public class ViewDemoController : Controller { 
      
      public class Blog { 
         public string Name; 
         public string URL; 
      }  
      
      private readonly List topBlogs = new List { 
         new Blog { Name = "Joe Delage", URL = "http://tutorialspoint/joe/"}, 
         new Blog {Name = "Mark Dsouza", URL = "http://tutorialspoint/mark"}, 
         new Blog {Name = "Michael Shawn", URL = "http://tutorialspoint/michael"} 
      };  
      
      public ActionResult StonglyTypedIndex() { 
         return View(topBlogs); 
      }  
      
      public ActionResult IndexNotStonglyTyped() { 
         return View(topBlogs); 
      }   
   } 
}

Dans le code ci-dessus, nous avons deux méthodes d'action définies: StronglyTypedIndex et IndexNotStonglyTyped. Nous allons maintenant ajouter des vues pour ces méthodes d'action.

Cliquez avec le bouton droit sur la méthode d'action StonglyTypedIndex et cliquez sur Ajouter une vue. Dans la fenêtre suivante, cochez la case "Créer une vue fortement typée". Cela activera également les options de modèle de classe de modèle et d'échafaudage. Sélectionnez l'option Liste du modèle d'échafaudage. Cliquez sur Ajouter.

Un fichier View similaire à la capture d'écran suivante sera créé. Comme vous pouvez le noter, il a inclus la classe de modèle Blog de ViewDemoController en haut. Vous pourrez également utiliser IntelliSense dans votre code avec cette approche.

Vues typées dynamiques

Pour créer des vues typées dynamiques, cliquez avec le bouton droit sur l'action IndexNotStonglyTyped et cliquez sur Ajouter une vue.

Cette fois, ne cochez pas la case "Créer une vue fortement typée".

La vue résultante aura le code suivant -

@model dynamic 
            
@{ 
   ViewBag.Title = "IndexNotStonglyTyped"; 
}

<h2>Index Not Stongly Typed</h2>  
<p> 
   <ul> 
      
      @foreach (var blog in Model) { 
         <li> 
            <a href = "@blog.URL">@blog.Name</a> 
         </li>    
      } 
   
   </ul> 
</p>

Comme vous pouvez le voir dans le code ci-dessus, cette fois, il n'a pas ajouté le modèle de blog à la vue comme dans le cas précédent. En outre, vous ne pourrez pas utiliser IntelliSense cette fois car cette fois la liaison sera effectuée au moment de l'exécution.

Les vues fortement typées sont considérées comme une meilleure approche car nous savons déjà quelles données sont transmises en tant que modèle, contrairement aux vues typées dynamiques dans lesquelles les données sont liées au moment de l'exécution et peuvent entraîner des erreurs d'exécution, si quelque chose change dans le modèle lié.

Les mises en page sont utilisées dans MVC pour fournir une apparence cohérente sur toutes les pages de notre application. C'est la même chose que la définition des pages maîtres mais MVC fournit quelques fonctionnalités supplémentaires.

Créer des mises en page MVC

Step 1 - Créez un exemple d'application MVC avec une application Internet comme modèle et créez un dossier Contenu dans le répertoire racine de l'application Web.

Step 2- Créez un fichier de feuille de style nommé MyStyleSheet.css dans le dossier CONTENT. Ce fichier CSS contiendra toutes les classes CSS nécessaires pour une conception de page d'application Web cohérente.

Step 3 - Créez un dossier partagé sous le dossier Afficher.

Step 4- Créez un fichier MasterLayout.cshtml sous le dossier Shared. Le fichier MasterLayout.cshtml représente la mise en page de chaque page de l'application. Cliquez avec le bouton droit sur le dossier partagé dans l'Explorateur de solutions, puis accédez à Ajouter un élément et cliquez sur Afficher. Copiez le code de disposition suivant.

Code de mise en page

<!DOCTYPE html> 

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
      <title>@ViewBag.Title - Tutorial Point</title> 
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon" />
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")" />
   </head> 
   
   <body> 
      <header> 
         
         <div class = "content-wrapper"> 
            <div class = "float-left"> 
               <p class = "site-title"> 
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p> 
            </div> 
            
            <div class = "float-right">
               <nav> 
                  <ul id = "menu"> 
                     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul> 
               </nav> 
            </div> 
         </div> 
      
      </header>
      <div id = "body"> 
         @RenderSection("featured", required: false) 
         <section class = "content-wrapper main-content clear-fix"> 
            @RenderBody() 
         </section> 
      </div>
      
      <footer>
         <div class = "content-wrapper">
            <div class = "float-left"> 
               <p>© @DateTime.Now.Year - Tutorial Point</p> 
            </div> 
         </div> 
      </footer>
   
   </body>
</html>

Dans cette mise en page, nous utilisons une méthode d'assistance HTML et d'autres méthodes définies par le système, regardons donc ces méthodes une par une.

  • Url.Content()- Cette méthode spécifie le chemin de tout fichier que nous utilisons dans notre code de vue. Il prend le chemin virtuel comme entrée et renvoie le chemin absolu.

  • Html.ActionLink()- Cette méthode rend les liens HTML qui renvoient à l'action d'un contrôleur. Le premier paramètre spécifie le nom d'affichage, le deuxième paramètre spécifie le nom de l'action et le troisième paramètre spécifie le nom du contrôleur.

  • RenderSection() - Spécifie le nom de la section que nous voulons afficher à cet emplacement dans le modèle.

  • RenderBody() - Rend le corps réel de la vue associée.

Step 5 - Enfin, ouvrez le fichier _ViewStart.cshtml dans le dossier Views et ajoutez le code suivant -

@{ 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}

Si le fichier n'est pas présent, vous pouvez créer le fichier avec ce nom.

Step 6 - Exécutez l'application maintenant pour voir la page d'accueil modifiée.

Le routage ASP.NET MVC permet l'utilisation d'URL qui décrivent les actions de l'utilisateur et sont plus facilement comprises par les utilisateurs. Dans le même temps, le routage peut être utilisé pour masquer des données qui ne sont pas destinées à être montrées à l'utilisateur final.

Par exemple, dans une application qui n'utilise pas le routage, l'utilisateur verrait l'URL comme http: //myapplication/Users.aspx? Id = 1 qui correspondrait au fichier Users.aspx dans le chemin de mon application et l'ID d'envoi comme 1 , En général, nous ne souhaitons pas montrer ces noms de fichiers à notre utilisateur final.

Pour gérer les URL MVC, la plate-forme ASP.NET utilise le système de routage, qui vous permet de créer n'importe quel modèle d'URL de votre choix et de les exprimer de manière claire et concise. Chaque route dans MVC contient un modèle d'URL spécifique. Ce modèle d'URL est comparé à l'URL de la demande entrante et si l'URL correspond à ce modèle, il est utilisé par le moteur de routage pour traiter davantage la demande.

Format d'URL de routage MVC

Pour comprendre le routage MVC, considérez l'URL suivante -

http://servername/Products/Phones

Dans l'URL ci-dessus, Produits est le premier segment et Téléphone est le deuxième segment qui peut être exprimé dans le format suivant -

{controller}/{action}

Le framework MVC considère automatiquement le premier segment comme le nom du contrôleur et le deuxième segment comme l'une des actions à l'intérieur de ce contrôleur.

Note- Si le nom de votre contrôleur est ProductsController, vous ne mentionneriez les produits que dans l'URL de routage. Le framework MVC comprend automatiquement le suffixe Controller.

Créer un itinéraire simple

Les itinéraires sont définis dans le fichier RouteConfig.cs qui se trouve sous le dossier de projet App_Start.

Vous verrez le code suivant dans ce fichier -

public class RouteConfig { 
   
   public static void RegisterRoutes(RouteCollection routes) { 
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
      
      routes.MapRoute( 
         name: "Default", 
         url: "{controller}/{action}/{id}", 
         defaults: new { controller = "Home", action = "Index", 
            id = UrlParameter.Optional } 
      ); 
   } 
}

Cette méthode RegisterRoutes est appelée par le Global.ascx au démarrage de l'application. La méthode Application_Start sous Global.ascx appelle cette fonction MapRoute qui définit le Controller par défaut et son action (méthode à l'intérieur de la classe Controller).

Pour modifier le mappage par défaut ci-dessus selon notre exemple, modifiez la ligne de code suivante -

defaults: new { controller = "Products", action = "Phones", id = UrlParameter.Optional }

Ce paramètre choisira le ProductsController et appellera la méthode Phone à l'intérieur. De même, si vous avez une autre méthode telle que l'électronique dans ProductsController, l'URL de celle-ci serait -

http://servername/Products/Electronics

Dans ASP.NET MVC, les contrôleurs définissent des méthodes d'action et ces méthodes d'action ont généralement une relation un-à-un avec les contrôles de l'interface utilisateur, comme cliquer sur un bouton ou un lien, etc. Par exemple, dans l'un de nos exemples précédents, le UserController classe contenait les méthodes UserAdd, UserDelete, etc.

Cependant, nous souhaitons souvent effectuer une action avant ou après une opération particulière. Pour atteindre cette fonctionnalité, ASP.NET MVC fournit une fonctionnalité permettant d'ajouter des comportements avant et après action sur les méthodes d'action du contrôleur.

Types de filtres

Le framework ASP.NET MVC prend en charge les filtres d'action suivants -

  • Action Filters- Les filtres d'action sont utilisés pour implémenter une logique qui est exécutée avant et après l'exécution d'une action de contrôleur. Nous examinerons les filtres d'action en détail dans ce chapitre.

  • Authorization Filters - Les filtres d'autorisation sont utilisés pour implémenter l'authentification et l'autorisation pour les actions du contrôleur.

  • Result Filters- Les filtres de résultat contiennent une logique qui est exécutée avant et après l'exécution d'un résultat de vue. Par exemple, vous souhaiterez peut-être modifier un résultat de vue juste avant que la vue ne soit rendue dans le navigateur.

  • Exception Filters- Les filtres d'exception sont le dernier type de filtre à exécuter. Vous pouvez utiliser un filtre d'exception pour gérer les erreurs générées par les actions de votre contrôleur ou par les résultats des actions du contrôleur. Vous pouvez également utiliser des filtres d'exception pour consigner les erreurs.

Les filtres d'action sont l'un des filtres les plus couramment utilisés pour effectuer un traitement de données supplémentaire, ou pour manipuler les valeurs de retour ou pour annuler l'exécution d'une action ou pour modifier la structure de la vue au moment de l'exécution.

Filtres d'action

Les filtres d'action sont des attributs supplémentaires qui peuvent être appliqués à une section de contrôleur ou à l'ensemble du contrôleur pour modifier la manière dont une action est exécutée. Ces attributs sont des classes .NET spéciales dérivées de System.Attribute qui peuvent être attachées à des classes, des méthodes, des propriétés et des champs.

ASP.NET MVC fournit les filtres d'action suivants -

  • Output Cache - Ce filtre d'action met en cache la sortie d'une action de contrôleur pendant une durée spécifiée.

  • Handle Error - Ce filtre d'action gère les erreurs générées lors de l'exécution d'une action de contrôleur.

  • Authorize - Ce filtre d'action vous permet de restreindre l'accès à un utilisateur ou à un rôle particulier.

Maintenant, nous allons voir l'exemple de code pour appliquer ces filtres sur un exemple de contrôleur ActionFilterDemoController. (ActionFilterDemoController n'est utilisé qu'à titre d'exemple. Vous pouvez utiliser ces filtres sur n'importe lequel de vos contrôleurs.)

Cache de sortie

Example - Spécifie la valeur de retour à mettre en cache pendant 10 secondes.

public class ActionFilterDemoController : Controller { 
   [HttpGet] 
   OutputCache(Duration = 10)] 
   
   public string Index() { 
      return DateTime.Now.ToString("T");  
   } 
}

Erreur de traitement

Example - Redirige l'application vers une page d'erreur personnalisée lorsqu'une erreur est déclenchée par le contrôleur.

[HandleError] 
public class ActionFilterDemoController : Controller { 
   
   public ActionResult Index() { 
      throw new NullReferenceException(); 
   }  
   
   public ActionResult About() { 
      return View(); 
   } 
}

Avec le code ci-dessus, si une erreur se produit pendant l'exécution de l'action, il trouvera une vue nommée Error dans le dossier Views et rendra cette page à l'utilisateur.

Autoriser

Example - Autoriser uniquement les utilisateurs autorisés à se connecter à l'application.

public class ActionFilterDemoController: Controller { 
   [Authorize] 
   
   public ActionResult Index() { 
      ViewBag.Message = "This can be viewed only by authenticated users only"; 
      return View(); 
   }  
   
   [Authorize(Roles="admin")] 
   public ActionResult AdminIndex() { 
      ViewBag.Message = "This can be viewed only by users in Admin role only"; 
      return View(); 
   } 
}

Avec le code ci-dessus, si vous essayez d'accéder à l'application sans vous connecter, une erreur similaire à celle illustrée dans la capture d'écran suivante sera générée.

Dans le premier chapitre, nous avons appris comment les contrôleurs et les vues interagissent dans MVC. Dans ce tutoriel, nous allons faire un pas en avant et apprendre à utiliser les modèles et à créer une application avancée pour créer, modifier, supprimer. et consultez la liste des utilisateurs dans notre application.

Créer une application MVC avancée

Step 1- Sélectionnez Fichier → Nouveau → Projet → Application Web ASP.NET MVC. Nommez-le comme AdvancedMVCApplication. Cliquez sur OK. Dans la fenêtre suivante, sélectionnez Modèle comme application Internet et View Engine comme Razor. Observez que nous utilisons un modèle cette fois au lieu d'une application vide.

Cela créera un nouveau projet de solution comme indiqué dans la capture d'écran suivante. Puisque nous utilisons le thème ASP.NET par défaut, il est livré avec des exemples de vues, de contrôleurs, de modèles et d'autres fichiers.

Step 2 - Générez la solution et exécutez l'application pour voir sa sortie par défaut, comme illustré dans la capture d'écran suivante.

Step 3- Ajouter un nouveau modèle qui définira la structure des données des utilisateurs. Cliquez avec le bouton droit sur le dossier Modèles et cliquez sur Ajouter → Classe. Nommez-le UserModel et cliquez sur Ajouter.

Step 4 - Copiez le code suivant dans le fichier UserModel.cs nouvellement créé.

using System; 
using System.ComponentModel; 
using System.ComponentModel.DataAnnotations; 
using System.Web.Mvc.Html;  

namespace AdvancedMVCApplication.Models { 
   public class UserModels { 
   
      [Required] 
      public int Id { get; set; } 
      [DisplayName("First Name")] 
      [Required(ErrorMessage = "First name is required")] 
      public string FirstName { get; set; }  
      [Required] 
      public string LastName { get; set; } 
         
      public string Address { get; set; } 
         
      [Required] 
      [StringLength(50)] 
      public string Email { get; set; } 
         
      [DataType(DataType.Date)] 
      public DateTime DOB { get; set; } 
          
      [Range(100,1000000)] 
      public decimal Salary { get; set; } 
   } 
}

Dans le code ci-dessus, nous avons spécifié tous les paramètres du modèle utilisateur, leurs types de données et leurs validations tels que les champs obligatoires et la longueur.

Maintenant que notre modèle utilisateur est prêt à contenir les données, nous allons créer un fichier de classe Users.cs, qui contiendra des méthodes pour afficher les utilisateurs, ajouter, modifier et supprimer des utilisateurs.

Step 5- Cliquez avec le bouton droit sur Modèles et cliquez sur Ajouter → Classe. Nommez-le comme Utilisateurs. Cela créera la classe users.cs dans Models. Copiez le code suivant dans la classe users.cs.

using System; 
using System.Collections.Generic; 
using System.EnterpriseServices;  

namespace AdvancedMVCApplication.Models { 
   
   public class Users { 
      public List UserList = new List();  
      
      //action to get user details 
      public UserModels GetUser(int id) { 
         UserModels usrMdl = null;  
         
         foreach (UserModels um in UserList) 
            
            if (um.Id == id) 
               usrMdl = um; 
               return usrMdl; 
      }  
      
      //action to create new user 
      public void CreateUser(UserModels userModel) { 
         UserList.Add(userModel); 
      }  
      
      //action to udpate existing user 
      public void UpdateUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               usrlst.Address = userModel.Address; 
               usrlst.DOB = userModel.DOB; 
               usrlst.Email = userModel.Email; 
               usrlst.FirstName = userModel.FirstName; 
               usrlst.LastName = userModel.LastName; 
               usrlst.Salary = userModel.Salary; 
               break; 
            } 
         } 
      }  
      
      //action to delete exising user 
      public void DeleteUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               UserList.Remove(usrlst); 
               break; 
            } 
         } 
      } 
   } 
}

Une fois que nous aurons notre UserModel.cs et Users.cs, nous ajouterons des vues à notre modèle pour afficher les utilisateurs, ajouter, modifier et supprimer des utilisateurs. Commençons par créer une vue pour créer un utilisateur.

Step 6 - Cliquez avec le bouton droit sur le dossier Vues et cliquez sur Ajouter → Afficher.

Step 7 - Dans la fenêtre suivante, sélectionnez le nom de la vue comme UserAdd, View Engine as Razor et cochez la case Créer une vue fortement typée.

Step 8- Cliquez sur Ajouter. Cela créera le code CSHML suivant par défaut, comme indiqué ci-dessous -

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "UserAdd"; 
}

<h2>UserAdd</h2>  

@using (Html.BeginForm()) { 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Email)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Email) 
         @Html.ValidationMessageFor(model => model.Email) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Create" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   
   @Scripts.Render("~/bundles/jqueryval") 
}

Comme vous pouvez le voir, cette vue contient les détails de vue de tous les attributs des champs, y compris leurs messages de validation, leurs étiquettes, etc. Cette vue ressemblera à ce qui suit dans notre application finale.

Semblable à UserAdd, nous allons maintenant ajouter quatre autres vues ci-dessous avec le code donné -

Index.cshtml

Cette vue affichera tous les utilisateurs présents dans notre système sur la page Index.

@model IEnumerable<AdvancedMVCApplication.Models.UserModels>  

@{ 
   ViewBag.Title = "Index"; 
}  

<h2>Index</h2>  

<p> 
   @Html.ActionLink("Create New", "UserAdd") 
</p>  

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Address) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Email) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.DOB) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Salary) 
      </th> 
   
      <th></th>  
   </tr>  
   
   @foreach (var item in Model) { 
      <tr> 
         <td>
            @Html.DisplayFor(modelItem => item.FirstName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.LastName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Address) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Email) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.DOB) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Salary) 
         </td> 
    
         <td> 
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
            @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
            @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
         </td> 
      </tr> 
   } 
</table>

Cette vue ressemblera à ce qui suit dans notre application finale.

Details.cshtml

Cette vue affichera les détails d'un utilisateur spécifique lorsque nous cliquons sur l'enregistrement de l'utilisateur.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Details"; 
}  

<h2>Details</h2>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName)
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
    
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
  
</fieldset>  
<p>
   @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) | 
   @Html.ActionLink("Back to List", "Index") 
</p>

Cette vue ressemblera à ce qui suit dans notre application finale.

Edit.cshtml

Cette vue affichera le formulaire d'édition pour éditer les détails d'un utilisateur existant.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Edit"; 
}  

<h2>Edit</h2>  
@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      @Html.HiddenFor(model => model.Id)  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Email) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Email) 
         @Html.ValidationMessageFor(model => model.Email) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Save" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   @Scripts.Render("~/bundles/jqueryval") 
}

Cette vue ressemblera à ce qui suit dans notre application.

Delete.cshtml

Cette vue affichera le formulaire pour supprimer l'utilisateur existant.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Delete"; 
} 

<h2>Delete</h2>  
<h3>Are you sure you want to delete this?</h3>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary)
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
</fieldset>  

@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   
   <p> 
      <input type = "submit" value = "Delete" /> | 
      @Html.ActionLink("Back to List", "Index") 
   </p> 
}

Cette vue ressemblera à ce qui suit dans notre application finale.

Step 9- Nous avons déjà ajouté les modèles et les vues dans notre application. Maintenant, nous allons enfin ajouter un contrôleur pour notre vue. Cliquez avec le bouton droit sur le dossier Contrôleurs et cliquez sur Ajouter → Contrôleur. Nommez-le UserController.

Par défaut, votre classe Controller sera créée avec le code suivant -

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using AdvancedMVCApplication.Models;  

namespace AdvancedMVCApplication.Controllers {  
   
   public class UserController : Controller { 
      private static Users _users = new Users(); 
      
      public ActionResult Index() { 
         return View(_users.UserList); 
      } 
   } 
}

Dans le code ci-dessus, la méthode Index sera utilisée lors du rendu de la liste des utilisateurs sur la page Index.

Step 10 - Cliquez avec le bouton droit sur la méthode Index et sélectionnez Créer une vue pour créer une vue pour notre page d'index (qui listera tous les utilisateurs et fournira des options pour créer de nouveaux utilisateurs).

Step 11- Ajoutez maintenant le code suivant dans le UserController.cs. Dans ce code, nous créons des méthodes d'action pour différentes actions utilisateur et renvoyons les vues correspondantes que nous avons créées précédemment.

Nous ajouterons deux méthodes pour chaque opération: GET et POST. HttpGet sera utilisé lors de la récupération des données et de leur rendu. HttpPost sera utilisé pour créer / mettre à jour des données. Par exemple, lorsque nous ajoutons un nouvel utilisateur, nous aurons besoin d'un formulaire pour ajouter un utilisateur, qui est une opération GET. Une fois que nous avons rempli le formulaire et soumis ces valeurs, nous aurons besoin de la méthode POST.

//Action for Index View  
public ActionResult Index() { 
   return View(_users.UserList); 
}  

//Action for UserAdd View 
[HttpGet] 
public ActionResult UserAdd() { 
   return View(); 
}  

[HttpPost] 
public ActionResult UserAdd(UserModels userModel) { 
   _users.CreateUser(userModel); 
   return View("Index", _users.UserList); 
}  

//Action for Details View 
[HttpGet] 
public ActionResult Details(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Details() { 
   return View("Index", _users.UserList); 
}  

//Action for Edit View 
[HttpGet] 
public ActionResult Edit(int id) { 
   return View(_users.UserList.FirstOrDefault(x=>x.Id==id)); 
} 

[HttpPost] 
public ActionResult Edit(UserModels userModel) { 
   _users.UpdateUser(userModel); 
   return View("Index", _users.UserList); 
} 
        
//Action for Delete View 
[HttpGet] 
public ActionResult Delete(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Delete(UserModels userModel) { 
   _users.DeleteUser(userModel); 
   return View("Index", _users.UserList); 
} sers.UserList);

Step 12 - La dernière chose à faire est d'aller dans le fichier RouteConfig.cs dans le dossier App_Start et de changer le contrôleur par défaut en User.

defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }

C'est tout ce dont nous avons besoin pour que notre application avancée soit opérationnelle.

Step 13- Lancez maintenant l'application. Vous pourrez voir une application comme indiqué dans la capture d'écran suivante. Vous pouvez exécuter toutes les fonctionnalités d'ajout, d'affichage, d'édition et de suppression d'utilisateurs comme nous l'avons vu dans les captures d'écran précédentes.

Comme vous le savez peut-être, Ajax est un raccourci pour JavaScript et XML asynchrones. Le MVC Framework contient un support intégré pour Ajax discret. Vous pouvez utiliser les méthodes d'assistance pour définir vos fonctionnalités Ajax sans ajouter de code dans toutes les vues. Cette fonctionnalité de MVC est basée sur les fonctionnalités de jQuery.

Pour activer la prise en charge AJAX discrète dans l'application MVC, ouvrez le fichier Web.Config et définissez la propriété UnobtrusiveJavaScriptEnabled dans la section appSettings à l'aide du code suivant. Si la clé est déjà présente dans votre application, vous pouvez ignorer cette étape.

<add key = "UnobtrusiveJavaScriptEnabled" value = "true" />

Après cela, ouvrez le fichier de mise en page commun _Layout.cshtmlfichier situé sous le dossier Views / Shared. Nous ajouterons ici des références aux bibliothèques jQuery en utilisant le code suivant -

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script> 

<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>

Créer une application Ajax discrète

Dans l'exemple qui suit, nous allons créer un formulaire qui affichera la liste des utilisateurs du système. Nous allons placer une liste déroulante avec trois options: Admin, Normal et Invité. Lorsque vous sélectionnez l'une de ces valeurs, il affichera la liste des utilisateurs appartenant à cette catégorie en utilisant une configuration AJAX discrète.

Step 1 - Créez un fichier Model.cs et copiez le code suivant.

using System;  

namespace MVCAjaxSupportExample.Models { 
   
   public class User { 
      public int UserId { get; set; } 
      public string FirstName { get; set; } 
      public string LastName { get; set; } 
      public DateTime BirthDate { get; set; } 
      public Role Role { get; set; } 
   }  
   
   public enum Role { 
      Admin, 
      Normal, 
      Guest 
   } 
}

Step 2 - Créez un fichier Controller nommé UserController.cs et créez deux méthodes d'action à l'intérieur de celui-ci en utilisant le code suivant.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web.Mvc; 
using MVCAjaxSupportExample.Models;  

namespace MVCAjaxSupportExample.Controllers {
   
   public class UserController : Controller { 
      
      private readonly User[] userData = 
      { 
         new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin}, 
         new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin}, 
         new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal}, 
         new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal}, 
         new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest} 
      }; 
      
      public ActionResult Index() { 
         return View(userData); 
      } 
      
      public PartialViewResult GetUserData(string selectedRole = "All") { 
         IEnumerable data = userData; 
         
         if (selectedRole != "All") { 
            var selected = (Role) Enum.Parse(typeof (Role), selectedRole); 
            data = userData.Where(p => p.Role == selected); 
         } 
         
         return PartialView(data); 
      }  
      
      public ActionResult GetUser(string selectedRole = "All") { 
         return View((object) selectedRole); 
      } 
   } 
}

Step 3- Créez maintenant une vue partielle nommée GetUserData avec le code suivant. Cette vue sera utilisée pour afficher la liste des utilisateurs en fonction du rôle sélectionné dans la liste déroulante.

@model IEnumerable<MVCAjaxSupportExample.Models.User> 

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.BirthDate) 
      </th> 
      <th></th> 
   </tr>  

   @foreach (var item in Model) { 
   <tr> 
      <td> 
         @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.LastName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.BirthDate) 
      </td> 
      
      <td> 
         
      </td> 
   </tr> 
}  
</table>

Step 4- Créez maintenant un View GetUser avec le code suivant. Cette vue obtiendra de manière asynchrone les données de l'action GetUserData du contrôleur créé précédemment.

@using MVCAjaxSupportExample.Models 
@model string 

@{ 
ViewBag.Title = "GetUser"; 

AjaxOptions ajaxOpts = new AjaxOptions { 
UpdateTargetId = "tableBody" 
}; 
} 

<h2>Get User</h2> 
<table> 
   <thead>
      <tr>
         <th>First</th>
         <th>Last</th>
         <th>Role</th>
      </tr>
   </thead> 
   
   <tbody id="tableBody"> 
      @Html.Action("GetUserData", new {selectedRole = Model }) 
   </tbody> 
</table>  

@using (Ajax.BeginForm("GetUser", ajaxOpts)) { 
   <div> 
      @Html.DropDownList("selectedRole", new SelectList( 
      new [] {"All"}.Concat(Enum.GetNames(typeof(Role))))) 
      <button type="submit">Submit</button> 
   </div> 
}

Step 5 - Enfin, modifiez les entrées Route.config pour lancer le contrôleur utilisateur.

defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

Step 6 - Exécutez l'application qui ressemblera à la capture d'écran suivante.

Si vous sélectionnez Admin dans la liste déroulante, il ira chercher tous les utilisateurs de type Admin. Cela se produit via AJAX et ne recharge pas la page entière.

Bundling et Minificationsont deux techniques d'amélioration des performances qui améliorent le temps de chargement des requêtes de l'application. La plupart des principaux navigateurs actuels limitent le nombre de connexions simultanées par nom d'hôte à six. Cela signifie qu'à la fois, toutes les demandes supplémentaires seront mises en file d'attente par le navigateur.

Activer le regroupement et la minification

Pour activer le regroupement et la minification dans votre application MVC, ouvrez le fichier Web.config dans votre solution. Dans ce fichier, recherchez les paramètres de compilation sous system.web -

<system.web>
   <compilation debug = "true" />
</system.web>

Par défaut, vous verrez le paramètre de débogage défini sur true, ce qui signifie que le regroupement et la minification sont désactivés. Définissez ce paramètre sur false.

Regroupement

Pour améliorer les performances de l'application, ASP.NET MVC fournit une fonctionnalité intégrée permettant de regrouper plusieurs fichiers en un seul fichier, ce qui améliore les performances de chargement de la page en raison du nombre réduit de requêtes HTTP.

Le regroupement est un simple groupe logique de fichiers pouvant être référencés par un nom unique et chargés avec une seule requête HTTP.

Par défaut, BundleConfig de l'application MVC (situé dans le dossier App_Start) est livré avec le code suivant -

public static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

Le code ci-dessus regroupe essentiellement tous les fichiers CSS présents dans le dossier Content / themes / base dans un seul fichier.

Minification

La minification est une autre technique d'amélioration des performances dans laquelle elle optimise le javascript, le code css en raccourcissant les noms des variables, en supprimant les espaces blancs inutiles, les sauts de ligne, les commentaires, etc. Cela réduit à son tour la taille du fichier et aide l'application à se charger plus rapidement.

Minification avec Visual Studio et l'extension Web Essentials

Pour utiliser cette option, vous devrez d'abord installer l'extension Web Essentials dans votre Visual Studio. Après cela, lorsque vous cliquerez avec le bouton droit sur un fichier css ou javascript, il vous montrera l'option de créer une version minifiée de ce fichier.

Ainsi, si vous avez un fichier css nommé Site.css, il créera sa version minifiée en tant que Site.min.css.

Désormais, la prochaine fois que votre application s'exécutera dans le navigateur, elle regroupera et minimisera tous les fichiers css et js, améliorant ainsi les performances de l'application.

Dans ASP.NET, la gestion des erreurs est effectuée à l'aide de l'approche standard try catch ou à l'aide d'événements d'application. ASP.NET MVC est fourni avec une prise en charge intégrée de la gestion des exceptions à l'aide d'une fonctionnalité appelée filtres d'exception. Nous allons apprendre deux approches ici: une avec la substitution de la méthode onException et une autre en définissant les filtres HandleError.

Remplacer la méthode OnException

Cette approche est utilisée lorsque nous voulons gérer toutes les exceptions dans les méthodes Action au niveau du contrôleur.

Pour comprendre cette approche, créez une application MVC (suivez les étapes décrites dans les chapitres précédents). Maintenant, ajoutez une nouvelle classe Controller et ajoutez le code suivant qui remplace la méthode onException et lève explicitement une erreur dans notre méthode Action -

Maintenant, créons une vue commune nommée Errorqui sera montré à l'utilisateur lorsqu'une exception se produit dans l'application. Dans le dossier Views, créez un nouveau dossier appelé Shared et ajoutez une nouvelle View nommée Error.

Copiez le code suivant dans le fichier Error.cshtml nouvellement créé -

Si vous essayez d'exécuter l'application maintenant, cela donnera le résultat suivant. Le code ci-dessus rend la vue d'erreur lorsqu'une exception se produit dans l'une des méthodes d'action de ce contrôleur.

L'avantage de cette approche est que plusieurs actions au sein du même contrôleur peuvent partager cette logique de gestion des erreurs. Cependant, l'inconvénient est que nous ne pouvons pas utiliser la même logique de gestion des erreurs sur plusieurs contrôleurs.

Attribut HandleError

L'attribut HandleError est l'un des filtres d'action que nous avons étudiés dans le chapitre Filtres et filtres d'action. HandleErrorAttribute est l'implémentation par défaut de IExceptionFilter. Ce filtre gère toutes les exceptions déclenchées par les actions, les filtres et les vues du contrôleur.

Pour utiliser cette fonctionnalité, activez tout d'abord la section customErrors dans web.config. Ouvrez le web.config et placez le code suivant dans system.web et définissez sa valeur sur On.

<customErrors mode = "On"/>

Nous avons déjà créé la vue d'erreur dans le dossier partagé sous Vues. Cette fois, changez le code de ce fichier View en suivant, pour le taper fortement avec le modèle HandleErrorInfo (qui est présent sous System.Web.MVC).

@model System.Web.Mvc.HandleErrorInfo 

@{ 
Layout = null; 
} 
  
<!DOCTYPE html> 
<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Error</title> 
   </head> 
   
   <body> 
      <h2> 
         Sorry, an error occurred while processing your request.  
      </h2> 
      <h2>Exception details</h2> 
      
      <p> 
         Controller: @Model.ControllerName <br> 
         Action: @Model.ActionName 
         Exception: @Model.Exception 
      </p> 
   
   </body> 
</html>

Placez maintenant le code suivant dans votre fichier de contrôleur qui spécifie l'attribut [HandleError] dans le fichier de contrôleur.

using System; 
using System.Data.Common; 
using System.Web.Mvc;  

namespace ExceptionHandlingMVC.Controllers { 
   [HandleError] 
   public class ExceptionHandlingController : Controller { 
      
      public ActionResult TestMethod() { 
         throw new Exception("Test Exception"); 
         return View(); 
      } 
   } 
}

Si vous essayez d'exécuter l'application maintenant, vous obtiendrez une erreur similaire à celle illustrée dans la capture d'écran suivante.

Comme vous pouvez le voir, cette fois l'erreur contient plus d'informations sur le contrôleur et les détails liés à l'action. De cette manière, HandleError peut être utilisé à n'importe quel niveau et entre les contrôleurs pour gérer de telles erreurs.