L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Pourquoi vous devriez utiliser View Components dans ASP.NET Core
Découvrez pourquoi vous devez utiliser les composants de vue – et non les vues partielles – dans vos projets ASP.NET Core avec cet exemple pratique.
Pourquoi utiliser les composants de vue et non les vues partielles? La principale raison est que lors de l'insertion d'une vue partielle dans une page de rasoir, tous les ViewData associés à la vue appelante sont automatiquement associés à la vue partielle. Cela signifie qu'une vue partielle peut se comporter de manière très différente sur une page de rasoir et sur une autre. Avec View Components, vous contrôlez ce qui est partagé avec vos composants View.
Les composants View sont nouveaux pour ASP.NET Core et sont conçus pour faire tout ce qu'une vue partielle dans les versions précédentes d'ASP.NET et plus encore. Les composants de vue sont des objets complètement autonomes qui rendent systématiquement le HTML à partir d'une vue de rasoir. Ils sont générés à partir d'une classe C # dérivée de la classe de base ViewComponent et sont généralement associés à un fichier Razor pour générer le balisage. Tout comme les contrôleurs ASP.NET MVC, les composants View sont facilement testables, car ils peuvent être écrits sans aucun effet secondaire, ce qui signifie moins de bogues.
Si vous souhaitez suivre, tout le code source utilisé dans cet article est hébergé sur GitHub à l'adresse suivante:
https://github.com/pkellner/progress-telerik-blog-viewcomponent
Pour ceux qui sont plus enclins à la vision, une vidéo de huit minutes est également disponible et montre les étapes décrites dans cet article.
Création d'un composant de vue à partir de zéro
Pour cet article, je vais utiliser Visual Studio 2017 pour créer un site Web ASP.NET Core 2.1. Je pourrais tout aussi facilement utiliser les outils de ligne de commande (dotnet) pour créer l'application sur Windows ou Mac, mais j'ai choisi d'utiliser Visual Studio.
La première étape consiste à créer un nouveau site Web ASP.NET Core 2.1.
Pour le type d'application Web, nous allons choisissez "Application Web", qui créera un site simple et agréable en utilisant les nouvelles pages ASP.NET Core Razor.
La structure de répertoires pour nous contient un répertoire appelé "Pages" et en cela, nous allons créer un nouveau dossier dans lequel nous allons créer un nouveau composant View (qui est vraiment le but de cet article).
Dans cet article, nous allons développer un composant View très utile pouvant être utilisé à plusieurs reprises dans une page pour effectuer des évaluations. Parce qu'un composant View a généralement à la fois un fichier C # et un Razor View Page, créons un nouveau répertoire dans notre répertoire Components appelé RatingControl, et dans ce répertoire, créez deux fichiers: RatingControlViewCompon ent.cs et Default.cshtml.
Il existe plusieurs façons de créer un contrôle de vue basé sur les attributs et les conventions de dénomination. Dans notre cas, je vais juste créer explicitement le mien, qui dérive de la classe ViewComponent, il a un constructeur vide et une méthode Invoke avec un seul paramètre. Contrairement aux pages Razor classiques appelées à partir d'un contrôleur et prenant en entrée les paramètres du modèle, les composants View sont appelés directement en appelant la méthode de classe Invoke ou InvokeAsync, avec des valeurs. Vous pouvez penser à ces valeurs en tant que modèle.
Ci-dessous, notre composant View simple passe simplement un paramètre unique lorsqu'il est appelé (ratingControlType), puis transmet ce paramètre en tant que modèle à la vue Razor default.shtml.
`` RatingControlViewComponent.cs
utilisant Microsoft.AspNetCore.Mvc;
espace de noms WebApp .Pages.Components.RatingControl
{19459016]
public classe RatingControlViewComponent:
ViewComponent
[
public RatingControlViewComponent ()
[
public IViewComponentResult
Invoke ( string ratingControlType)
[
] retour Vue ( "Par défaut" notationControlType);
}
} `` `
Le fichier Razor View, Default.cshtml, ne contient que deux lignes. La première ligne indique que le type de modèle transmis est simplement une chaîne et la deuxième ligne rend cette chaîne encapsulée dans un h2.
@model string
] < h2 > @ Model </ h2 >
Utilisation de notre composant View sur une page de rasoir avec InvokeAsync
À ce stade, nous avons un composant de vue complet. Pour que ce composant de vue fasse quelque chose pour nous, nous pouvons le mettre sur une page de rasoir. J'ai créé une nouvelle page de vue Razor appelée RatingDemoInvokeAsync, illustrée ici dans l'explorateur de solutions.
Le fichier utilise la méthode Component InvokeAsync fait référence au nom du composant View avec son premier paramètre, et pour obtenir des paramètres dans cette méthode, attend une classe anonyme comme second paramètre. En fait, nous utilisons simplement les fonctionnalités de Razor. Le signe "@" bascule la page de vue du rasoir sur C # , alors ce qui suit est juste le code C #. Voici le classement complet RatingDemoInvokeAsync.cshtml.
@page
@model WebApp.Pages.RatingDemoInvokeAsyncModel
@ {
Layout = null;
}
< html >
< tête >
< meta nom = "viewport" contenu = "width = device-width" />
< titre > starsdemo1 </ titre >
</ tête >
< >
< h1 > RatingDemoInvokeAsync </ h1 >
@await Component.InvokeAsync ("RatingControl",
nouveau {
ratingControlType = "1to10"
)
</ corps >
</ html [19659057]>
`` `
La sortie de l'exécution de cette page affiche simplement la chaîne "1to10" avec l'en-tête RatingDemoInvokeAsync. C'est parce que tout ce que fait notre composant View rend la chaîne qui y est passée.
Dans notre prochaine section, je regarderai beaucoup méthode plus propre pour invoquer un composant View, c'est-à-dire qu'au lieu d'utiliser C # au milieu de notre page Razor View, nous pouvons utiliser notre propre élément HTML, également appelé Tag Helper.
Utilisation de notre composant View sur un rasoir Page avec des helpers de balises
Voyons d'abord comment utiliser un tag helper pour appeler notre composant de vue modifie notre page de rasoir. J'ai créé une nouvelle page de rasoir, RatingDemoTagHelper.cshtml.
@page 19659002] @model WebApp.Pages.RatingDemoTagHelperModel
@ {
Layout = null; ]
}
@addTagHelper *, WebApp
]
< html >
< tête >
< meta nom = "viewport" contenu = "width = device-width" />
< titre > RatingDemoTagHelper </ titre >
</ tête >
< corps >
< h1 > RatingDemoTagHelper </ h1 >
< vc: contrôle-cote rating-control- type = "1to10" >
</ vc: contrôle de classification >
</ corps >
</ html >
Tout ce que j'ai fait est ajouté la ligne 6, @addTagHelper, qui dit essentiellement que l'utilisation de Tag Helpers est définie n'importe où dans mon assembly .NET actuel. Ensuite, je peux référencer le contrôle de classement comme je le fais dans le corps de ce code HTML avec le préfixe vc de Tag Helper pour View Component. Le nom est juste le nom de mon composant View épelé dans le boîtier Kabob en tant que contrôle de classement. Au lieu d'utiliser une classe anormale comme nous l'avons fait avec la méthode invoke dans la section précédente, nous pouvons simplement passer la chaîne au composant View avec un attribut HTML, également dans le cas Kabob, appelé type de contrôle de notation. [19659003] La beauté ici est que nous n'avons pas eu à apporter de modifications à notre composant View pour que Tag Helpers fonctionne. Ils travaillent juste! Bien sûr, exécuter la page nous donne le même résultat qu'auparavant, mais nous avons changé le HTML interne h1 en RatingDemoTagHelper.
View Component to Life
Jusqu'à présent, nous n'avons pas créé de composant View View. Nous avons seulement créé un composant qui rend ce qui y est passé. Ce n'est pas très utile. construire un contrôle utile dans le monde réel Plutôt que de partir de zéro, utilisons cet excellent contrôle d'évaluation sous licence MIT qui utilise jQuery et Bootstrap.
https://github.com/antennaio/jquery-bar-rating
Je ne vais pas vous ennuyer avec les détails, mais j'ai essentiellement apporté ce projet dans mon projet ASP.NET Core Visual Studio en copiant dans certains CSS et JavaScript à la base du projet web wwwroot, comme indiqué ici.
J'ai créé un Ra zor view page qui n'est que du HTML statique dérivé de l'exemple du référentiel jquery-bar-rating. Ce fichier est Pages / RatingDemoRawHtml.cshtml et a beaucoup de code qui ressemble à ceci:
L'exécution de la page nous montre plusieurs types de notation pris en charge.
Notre objectif sera de remplacer le code de la balise select par un composant View qui gère tout le rendu des options HTML. gère les JavaScript et jQuery nécessaires. C'est-à-dire que lorsque vous avez terminé, au lieu du code HTML brut ci-dessus, nous aurons un code HTML qui ressemble à ceci (qui se trouve dans le fichier pages / RatingDemoComplete.cshtml).
Notez que ceci montre trois types de classification différents," 1to10 "," movie "et" pill ". J'ai également inclus une propriété rating-control-id-value que nous n'avons pas vue auparavant. En général, lorsque nous implémentons un contrôle de classification, nous souhaitons que notre contrôle soit en mesure de revenir à un point de terminaison côté serveur pour mettre à jour les données lorsque l'utilisateur clique ou modifie une évaluation (souvent un appel Ajax). vous permet de transmettre un identifiant unique au contrôle (généralement transmis en tant que variable de rasoir), par exemple si vous parcourez des sessions de conférence et que vous souhaitez savoir quel contrôle de classement est associé à quelle session, le contrôle de classement -id-value pourrait être utilisé pour passer l'ID de session.
Lorsque nous exécutons cette page (Pages / RatingDemoCompl ete.cshtml), nous voyons trois types d'évaluation (dans mon exemple, je n'ai codé que pour ces trois types, bien que le projet de base github, jquery-bar-rating, prenne en charge six types).
Nous avons vu la page Razor qui rend ceci, mais d'où vient-elle? Eh bien, la réponse évidente est le composant de visualisation mis à jour. Examinons ce code et parlons de ce qu'il fait.
en utilisant Microsoft.AspNetCore.Mvc;
en utilisant Microsoft.AspNetCore.Mvc.Rendering;
utilisant Microsoft.Extensions.Configuration;
utilisant System.Collections.Generic;
utilisant System.Linq;
utilisant WebApp.Models;
WebApp.Pages.Components.RatingControl
{
public classe RingControlModel
[
public Liste ; set ; }
public chaîne de caractères RatingControlType { get ; set ; }
public chaîne de caractères RatingControlValue { get ; set ; }
public int RatingControlIdValue { get ; ensemble interne ; }
}
public classe RatingControlViewComponent: ViewComponent
[
privé [19659030] readonly RatingControlOptions _ratingControlOptions;
public RatingControlViewComponent (IConfiguration config)
] [
_ratingControlOptions = nouveau RatingControlOptions
{
[19459] 019] RatingControlType = config [ "RatingControlType" ]
RatingControlInitialValue1to10 = config [ "RatingControlInitialValue1to10" [19659057]]
RatingControlInitialValuePill = config [ "RatingControlInitialValuePill" ]
RatingControlInitialValueMovie = config [ "RatingControlInitialValueMovie" ]
}
}
public IViewComponentResult Invoke ( chaîne de caractères ratingControlType, int ratingControlIdValue)
{
var ratingControlValues = nouveau Liste < chaîne > ();
var ratingControlInitialValue = "" ;
si (ratingControlType == "pill" ) 19659002] {19459016]
_ratingControlOptions.RatingControlValuesPill.ForEach (a => ratingControlValues.Add (a));
ratingControlInitialValue = _ra tingControlOptions.RatingControlInitialValuePill;
else si ( ratingType de contrôle == "1to10" )
[
_ratingControlOptions.RatingControlValues1to10.ForEach (a => ratingControlValues.Add (a));
ratingControlInitialValue = _ratingControlOptions.RatingControlInitialValue1to10;
}
sinon si (ratingControlType == " film ")
{19459016]
_ratingControlOptions.RatingControlValuesMovie.ForEach (a => ratingControlValues.Add (un ));
ratingControlInitialValue = _ratingControlOptions.RatingControlInitialValueMovie;
}
Liste
.Sélectionnez (myValue = > neuf SelectListItem
{
Valeur = myValue,
Text = myValue,
Selected = myValue .Equals (ratingControlInitialValue)
). ToList ();
RingControlModel ringControlModel = nouveau RingControlModel
[
[19659292] SelectedListItems = ratings,
RatingControlType = ratingControlType,
[1 9659292] RatingControlValue = ratingControlInitialValue,
RatingControlIdValue = ratingControlIdValue
};
retour Vue (ringControlModel);
}
}
}
Remarquez tout d'abord que nous avons injecté le programme config informations dans le constructeur de contrôle sur la ligne 23. C'est-à-dire que nous extrayons les données de configuration de notre fichier appsettings.json. De cette façon, nous n’avons pas besoin d’ajouter explicitement du code à notre méthode d’appel pour extraire ces données. Vous trouverez ci-dessous notre fichier appsettings.json qui remplace simplement le type de contrôle par défaut ainsi que les valeurs initiales des trois types de notation.
{
"RatingControlType" : "1to10" // Type par défaut
"RatingControlInitialValue1to10" : " 6 "
" RatingControlInitialValueMovie ": " Good "
"RatingControlInitialValuePill" : "C"
"Logging" : [
"LogLevel" : {
"Default" [19659057]: "Warning"
}
},
"AllowedHosts" : "*"
}
Dans notre méthode Invoke, à partir de la ligne 34, nous avons simplement créer nos options pour notre tag de sélection en fonction de nos données de configuration. Je ne vais pas passer en revue tous les détails ici car il n'est pas important de comprendre les composants de View, mais n'hésitez pas à revoir le code dans GitHub (le référentiel mentionné en haut de cet article contient tout le code de travail). 19659011] Le dernier élément est le Pages / Composants / RatingControl / Default.cshtml, comme indiqué ici.
@model RingControlModel
@ {
var uniqueId = Guid.NewGuid (). ToString ( "N" );
} [19659002]
<select id = "@ uniqueId"
asp- pour = "@ Model.RatingControlValue"
asp-items = "@ Model.SelectedListItems"
rating-control-id-value=@Model.RatingControlIdValue>
[19659063]
La première page de cette vue de composant, à la ligne 3, crée un identifiant unique à affecter au contrôle de classification. Il continue ensuite à exécuter le même jQuery que celui utilisé par le référentiel jquery-bar-rating pour ajouter des fonctionnalités à un élément html select standard. Vous pouvez voir le jQuery sur la ligne 13 exécutant la méthode "barrating ()" sur le contrôle de sélection. Cette méthode appelle des styles et ajoute la gestion des événements nécessaire pour que notre vue des composants soit à la fois esthétique et fonctionnelle.
Je réalise que j'ai laissé beaucoup de détails sur le fonctionnement du code jquery-bar-rating. Le véritable objet de cet article concerne la façon dont View Components fonctionne et comment les intégrer dans votre code. Cette évaluation de code à barres est juste un bon exemple de travail que vous pouvez étudier vous-même. Il montre un exemple réel, vous pouvez modéliser votre code après plutôt que simplement un exemple simple "bonjour monde" qui peut souvent être difficile à étendre.
N'hésitez pas à poster des commentaires ci-dessous ou des questions si vous en avez. J'adore les nouvelles fonctionnalités d'ASP.NET Core. Les composants View et les Tag Helpers ne sont que deux des nouvelles fonctionnalités qui facilitent grandement notre vie en tant que développeurs Web.
Vous pouvez en apprendre davantage sur l'utilisation des tags Tag Help dans vos projets ASP.NET ici et Si vous recherchez un ensemble de composants d'interface utilisateur pour vous aider à créer vos applications ASP.NET Core, n'oubliez pas de consulter Interface utilisateur Telerik pour ASP.NET Core . Vous pouvez commencer aujourd'hui avec un essai gratuit de de 30 jours .
Les commentaires sont désactivés en mode aperçu.
Source link