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.
`` 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.
@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.
@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.
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.
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 SelectedListItems { ; 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 ratings = ratingControlValues
.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>
$ (document) .ready ( function () {
$ ( '# @uniqueId '). [barrage(19659056)'
[
] theme: 'bars-@Model.RatingControlType'
onSelect: function [19659057] (valeur) {
alert ( 'Indice sélectionné:' + value + 'id-value:' [19659023] +
@ 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