Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Vue: 35979|Répondre: 2

[ASP.NET] ASP.NET tutoriel de base de ViewComponent sur l’utilisation de ViewComponent

[Copié le lien]
Publié le 07-02-2021 à 16:18:25 | | | |
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

asp.net mvc utilise la vue locale RenderAction pour charger des données dynamiques
https://www.itsvse.com/thread-4828-1-1.html

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 :

Score

Nombre de participants1MO+1 contribuer+1 Effondrement raison
Fèsse + 1 + 1 Soutenez le propriétaire pour qu’il publie un bon post, et je publierai aussi un bon post !

Voir toutes les notes





Précédent:Attributs d’ombre d’image d’entité de la série EF Core (3) [Réimpression]
Prochain:Le site web utilise le plugin swiper pour implémenter un diaporama d’images (carrousel)
Publié le 12-08-2021 à 10:21:01 |
Répondre pour voir le code ?
 Propriétaire| Publié le 13-08-2023 à 17:55:05 |
Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.

Mail To:help@itsvse.com