MVC Framework - Vues

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 d'affichage 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 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é.