Migration de MVC vers Blazor

ASP.NET Core MVC reste un choix solide pour la création d'applications Web, mais que se passe-t-il si vous souhaitez commencer à utiliser Blazor pour certains de vos projets? Comment migrer de MVC vers Blazor et quels pièges devez-vous surveiller en cours de route?

Un processus répétable pour la migration de MVC vers Blazor

Si vous prévoyez de prendre une application MVC existante et de tout migrer ( ou des parties) de celui-ci à Blazor, la clé est de le décomposer en étapes plus petites; il vous sera beaucoup plus facile de migrer une application si vous le faites par étapes.

Une approche durable consiste à migrer une vue à la fois.

Supposons que vous vouliez prendre cette page de liste d'utilisateurs et la migrer de MVC à Blazor:

Voici comment je l'aborderais:

1. Copiez le balisage de la vue existante de son fichier .cshtml dans un ] .razor file.
2. Dans la section @code du nouveau composant, déclarez une propriété Model du même type que celle à laquelle la vue fait actuellement référence. [19659009] Migrez le code de remplissage et de retour du modèle (du contrôleur vers le composant).

1. Copier le balisage de vue existant dans un composant

Lorsque vous implémentez une fonctionnalité dans MVC, vous créez généralement une vue.

Cette vue représente généralement une page entière dans votre application.

Lorsqu'une personne accède à votre site MVC et demande une page, sa demande est transmise à ASP.NET, qui trouve le contrôleur approprié et appelle l'action du contrôleur.

MVC localise la vue appropriée, traite votre rasoir balisage et génère du code HTML, qui est ensuite renvoyé sous forme de réponse HTTP au navigateur.

Voici à quoi pourrait ressembler notre vue Liste des utilisateurs dans une application MVC.

Index.cshtml

 @model MVCToBlazor.Controllers .UserListModel

 < table   class  =  " table table-striped "  > 
     < thead > 
     < tr > 
         < e >  Nom  </  th > 
         < e >  Rôle  </  th > 
         < e >  Dernière connexion  </  th > 
         < th >  Connexions (30 derniers jours)  </  th > 
     </  tr > 
     </  thead > 
     < tbody > 
    @foreach (utilisateur var dans Model.Users)
    {
         < tr > 
             < td >  @ user.Name  </  td > 
             < td >  @ user.Role  </  td > 
             < td >  @ user.LastLogin  </  td > 
             < td >  @ user.RecentLoginCount  </  td > 
         </  tr > 
    }
     </  tbody > 
 </  tableau > 

Avec Blazor, les choses sont un peu différentes. Plutôt que de penser en termes de pages entières, vous pouvez à la place créer des composants plus petits qui peuvent être composés ensemble pour former une fonctionnalité / page plus grande.

Cependant, si vous migrez une vue existante, j'éviterais d'essayer de le décomposer en composants plus petits à ce stade; il est préférable de mettre en marche la version de Blazor avant de faire trop de changements.

Nous pouvons facilement prendre le balisage de la liste des utilisateurs existant et le déplacer dans un nouveau composant.

UserList.razor

 @ page "/ users"

 < table   class  =  " table table-striped "  > 
     < thead > 
     < tr > 
         < e >  Nom  </  th > 
         < e >  Rôle  </  th > 
         < e >  Dernière connexion  </  th > 
         < th >  Connexions (30 derniers jours)  </  th > 
     </  tr > 
     </  thead > 
     < tbody > 
    @foreach (utilisateur var dans Model.Users)
    {
         < tr > 
             < td >  @ user.Name  </  td > 
             < td >  @ user.Role  </  td > 
             < td >  @ user.LastLogin  </  td > 
             < td >  @ user.RecentLoginCount  </  td > 
         </  tr > 
    }
     </  tbody > 
 </  tableau > 

Lorsque vous faites cela avec votre propre balisage de vue, vous constaterez peut-être que tout se déplace de manière transparente vers le nouveau composant, mais vous trouverez parfois quelque chose qui ne fonctionne pas dans un composant Razor.

Les éléments à surveiller sont Concepts spécifiques à MVC comme les références à des vues partielles, etc.

Si vous rencontrez une vue partielle, vos meilleures options sont soit:

• Créer un composant équivalent (pour la vue partielle)
• Prendre le balisage du vue partielle et intégration dans ce composant pour le moment

Dans tous les cas, la clé est de supprimer les parties spécifiques à MVC afin que vous puissiez continuer à avancer avec la migration; il est vraiment avantageux de prendre la voie qui semble la plus simple à ce stade.

2. Référencez le modèle

À ce stade, vous ne pouvez toujours pas tester votre nouveau composant car il vous manque le modèle!

Votre version MVC renvoie probablement un modèle à côté de la vue.

UserController.cs

 public  IActionResult  Index  () 
 {
UserListModel userListModel  =  _userService .  ListAll  () ; 
	 return   View  ( userListModel [194590]) ; 
} 

Nous n'avons pas de contrôleur dans notre version Blazor; à la place, nous avons le composant lui-même.

Nous pouvons déclarer une instance de ce modèle directement dans le composant.

UserList.razor

 @page "/ users"
@utilisation de MvcToBlazor.Shared

 < table   class  =  " table table-striped "  > 
     < thead > 
     < tr > 
         < e >  Nom  </  th > 
         < e >  Rôle  </  th > 
         < e >  Dernière connexion  </  th > 
         < th >  Connexions (30 derniers jours)  </  th > 
     </  tr > 
     </  thead > 
     < tbody > 
    @foreach (utilisateur var dans Model.Users)
    {
         < tr > 
             < td >  @ user.Name  </  td > 
             < td >  @ user.Role  </  td > 
             < td >  @ user.LastLogin  </  td > 
             < td >  @ user.RecentLoginCount  </  td > 
         </  tr > 
    }
     </  tbody > 
 </  tableau > 

@code {

    modèle UserListModel privé;

    Tâche async de remplacement protégé OnInitializedAsync ()
    {
        Model = new UserListModel ();
    }

}

Dans un instant, nous allons remplir ce modèle à partir du service utilisateur, comme nous l'avons fait dans MVC, mais il vaut d'abord la peine de discuter de cette ligne:

 @using MvcToBlazor.Shared

Lors de la migration de MVC vers Blazor, cela vous facilite la vie si vous pouvez déplacer vos modèles dans un projet partagé.

De cette façon, les projets MVC et Blazor peuvent les référencer.

Votre meilleur choix est de créer un nouveau projet partagé qui cible .NET Standard. Choisissez la version de .NET Standard compatible avec votre nouveau Blazor et les projets MVC existants.

Consultez le tableau de compatibilité officiel pour voir de quelle version il s'agit.

Une fois que vous avez déplacé vos modèles dans un projet partagé, votre application MVC existante peut toujours les référencer, mais aussi votre nouvelle application Blazor (comme dans notre exemple).

il suffit de remplir une instance codée en dur du modèle…

 protected   override   async  Task  OnInitializedAsync  () 
 {
Model  =   new   UserListModel  () ; 
} 

C'est une étape utile pour vérifier que tout est compilé et exécuté. Si vous le souhaitez, vous pouvez également coder en dur certaines données de test ici, pour vous assurer que tout semble correct.

Une fois que vous êtes satisfait que le balisage ressemble à ce à quoi vous vous attendiez, l'étape suivante consiste à introduire le véritable appeler pour récupérer les données.

3. Migrer la logique métier / le code d'accès aux données

C'est là que les choses varient selon que vous utilisez Blazor WASM ou Blazor Server.

Blazor Server

Si vous utilisez Blazor Server, vous devriez être en mesure de référencer directement le même service que vous utilisez dans votre projet MVC.

Vous pouvez déplacer vos services vers le projet partagé, ainsi que tous les autres services et classes dépendants.

Une fois là, vous pouvez les référencer directement dans le composant. [19659004] UserList.razor

 @page "/ utilisateurs"
@utilisation de MvcToBlazor.Shared


@inject UserService UserService

 @code  {
	 private  UserListModel Model ; 

     protected   override   async  Task  OnInitializedAsync  () 
     {
        Modèle  =  UserService .  ListAll  () ; 
    } 
} 

Remarque, vous devrez enregistrer vos dépendances dans le projet Blazor.

Par exemple, si votre application MVC enregistre UserService (afin qu'il puisse être injecté dans les contrôleurs), vous devrez faire de même pour l'application Blazor, mais cette fois dans son Program.cs .

 public   static   async  Task  Main  ( string  []  args ) 
 {


builder .  Services .  AddScoped  < UserService >   () ; 
	
	 wait  builder .  Build  () .  RunAsync  () ; 
} 

Blazor WASM

Si vous migrez vers Blazor WASM, le scénario le plus probable est que vous souhaitiez exposer vos fonctions d'accès logique / données existantes via une API Web ASP.NET.

En effet, vos services doivent encore s'exécuter sur un serveur, pour accéder à des ressources telles que des bases de données, etc. Si vous placez une API au-dessus de ce service, vous pouvez l'appeler depuis le navigateur (dans ce cas en utilisant Blazor WASM).

Vous devrez créer un contrôleur d'API Web et une action qui, à son tour, invoquera UserService pour récupérer les données.

Une fois que vous l'avez en place, vous pouvez appeler cette API via HTTP à partir de votre composant Blazor.

Vous allez d'abord besoin d'injecter un inst ance de HttpClient .

UserList.razor

 @page "/ users"
@utilisation de MvcToBlazor.Shared

@inject HttpClient HttpClient

Puis appelez-le à partir de la méthode OnInitializedAsync de votre composant.

 @code  {
     private  UserListModel Model ; 

     protected   override [19659258] async  Tâche  OnInitializedAsync  () 
     {
        Model  =   wait  HttpClient .  GetFromJsonAsync  < UserListModel >   ( "api / users"  ]) ; 
    } 
} 

Un point important ici: comme vous encapsulez essentiellement votre service existant dans une API, vous n'avez pas besoin de le déplacer vers le projet partagé. [19659004] En fait, cela serait une très mauvaise idée pour Blazor WASM car ce projet partagé sera regroupé et distribué au navigateur lorsque les utilisateurs accèderont à votre application.

Si vous y mettez tous vos services, ils seront déployés au navigateur! Probablement pas ce que vous recherchez!

Blazor Server ne rencontre pas ce problème car l'application (y compris les services) réside sur le serveur et n'est jamais expédiée vers le navigateur.

Étapes suivantes

C'est tout pour la migration! Vous disposez désormais d'un composant Blazor équivalent à votre vue MVC, qui récupère les mêmes données dans le même modèle.

À certains égards, les vues MVC et les composants Blazor sont similaires. Ils utilisent tous les deux le langage de création de modèles Razor et une grande partie de leur syntaxe est partagée.

Comme nous l'avons vu avec cet exemple, la migration de vues entières de MVC vers Blazor peut être relativement simple.

La plus grande différence entre les deux en fait réside dans la façon dont vous en venez à penser à la création de votre interface utilisateur.

Au cœur du passage de MVC à Blazor se trouve le passage à «penser en composants».

Dans de nombreux cas, vous pouvez décomposer votre interface utilisateur en plus petites

Donc, commencez certainement par une ou deux vues simples pour créer un élan, mais pour les points bonus une fois que vous avez migré quelques vues, prenez un regardez votre application avec des yeux neufs et voyez si vous pouvez identifier des parties de l'interface utilisateur qui pourraient être extraites en composants séparés.

Si vous pouvez les localiser et les extraire, vous commencerez vraiment à profiter de certains des éléments de Blazor. points forts:

• R réduisez le code dupliqué / standard (pour des éléments tels que les boutons et d'autres éléments que vous voulez voir et vous comporter de manière cohérente sur tout votre site).
• Séparez le code complexe / détaillé (pour qu'il soit plus facile à lire / comprendre).
• Réduisez le quantité de «pièces mobiles» dans une partie donnée de votre application (les petits composants qui font une seule chose sont plus faciles à utiliser que des vues pleines de balisage conditionnel / imbriqué).