Lorsque un grand nombre de pages appellent le même résultat de vue, nous pouvons encapsuler le même contenu dans un composant de vue, bien sûr, nous pouvons aussi passer des paramètres au composant de vue et renvoyer le résultat de la réponse, scénarios : classements, formulaires, tableaux, etc. Cet article utilise asp.net base 3.1 pour expliquer comment utiliser le tutoriel des composants de vue ViewComponent.
Affichage des composants
Le composant Vue est similaire à une vue locale, mais plus puissant. Le composant vue n’utilise pas de liaisons de modèle, mais ne s’appuie que sur les données fournies lors de l’appel du modèle. Cet article a été rédigé à l’aide de contrôleurs et de vues, mais le composant vue peut aussi être utilisé avec Razor Pages.
Voir les composants :
- Affichez des blocs au lieu de toute la réponse.
- Inclut la même séparation des préoccupations et des avantages en testabilité que l’on trouve entre les contrôleurs et les vues.
- Cela peut avoir des paramètres et une logique métier.
- Généralement appelé depuis la page de mise en page.
Les composants de la vue peuvent être utilisés partout où vous disposez d’une logique de rendu réutilisable trop complexe pour une vue locale, comme :
- Menu de navigation dynamique
- Nuage de balises (où la base de données est interrogée)
- Panneau de connexion
- Panier de courses
- Articles récemment publiés
- Contenu dans la barre latérale sur un blog typique
- Le panneau de connexion apparaîtra sur chaque page avec un lien pour se déconnecter ou se connecter, selon le statut de connexion de l’utilisateur
Vue partielle
Dans asp.net MVC 5, nous pouvons utiliser une vue locale avec le code suivant :
Méthode d’appel :
ViewComponent est une alternative aux vues locales.
ViewComponent pour commencer
Voir la classe composante :
- L’injection de dépendance de constructeur est entièrement prise en charge
- Pas impliqué dans le cycle de vie du contrôleur, ce qui signifie que vous ne pouvez pas utiliser de filtres dans les composants de la vue
- Sans plus tarder, passons directement au but où nous voulons encapsuler la fonctionnalité composante d’une classification d’une zone urbaine.
Tout d’abord, créez un nouveau dossier « ViewComponents » sous le répertoire du projet et créez un nouveau fichier de classe « RootClassification.cs » avec le code suivant :
Sur la page de vue, nous créons un nouveau dossier « Components » sous le dossier « /Views/Shared » du projet, puis nous créons un nouveau dossier « RootClassification » (c’est l’objet avec la nouvelle classe component que nous avons créée), puis un nouveau fichier « Default.cshtml », dont le code est le suivant :
La structure est la suivante :
Le chemin détaillé est : /Views/Shared/Components/RootClassification/Default.cshtml
Pourquoi construire un tel chemin ? Cela tient à la façon dont fonctionne le composant asp.net Core.
L’exécution recherche la vue par le chemin suivant :
/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name} Le nom de vue par défaut pour le composant view est Default, ce qui signifie que votre fichier view sera généralement nommé Default.cshtml. Lors de la création d’un résultat de composante de vue ou de l’appel d’une méthode View, vous pouvez spécifier un nom de vue différent.
Appelant, nous pouvons appeler où nous devons utiliser le composant, le code est le suivant :
Relance le projet avec le rendu suivant :
|