Sélectionnez Tag Helper dans ASP.NET Core MVC

Dans cet article, nous explorons les aides de balises: ce qu'elles sont, lesquelles sont intégrées, sélectionnez l'assistant de balise, définissez les options sélectionnées, désactivez les options et les groupes d'options à l'aide d'un exemple simple.
Introduction
, nous allons en apprendre davantage sur les tag helpers . Cet article traite des sujets suivants.
- Qu'est-ce qu'un assistant de balise ?
- Que sont les assistants de balise intégrés ?
- Comment utiliser les aides de balises intégrées ] select tag helper ?
- Comment définir l'option sélectionnée?
- Comment regrouper les options?
- Comment désactiver l'option ou le groupe?
- Conclusion
Qu'est-ce qu'un Tag Helper ?
Un assistant de balise permet au code côté serveur d'aider à créer et à rendre des éléments HTML dans des fichiers Razor. Voici les éléments suivants: les aides de balises nous fournissent:
- Expérience de développement HTML-friendly
- Le support IntelliSense pour la création de balises HTML et Razor
- Possibilité de produire un code plus robuste, fiable et maintenable en utilisant uniquement des informations disponible sur le serveur
Voici le balisage Razor pour l'étiquette:
< label asp-for = " UserModel.Name " > </ label >
Il génère le code HTML suivant pour le libellé:
< label for = " UserModel_Name " > Name </ label >
Que sont les assistants de balise intégrés ?
Voici les assistants de balise intégrés dans ASP.NET Core:
- Balise d'ancrage
- Balise de cache
- Balise de composant
- Balise de cache distribué
- Balise d'environnement
- Balise de formulaire
- Balise d'action de formulaire
- Aide de balise d'image
- Aide de balise d'entrée
- Aide de balise d'étiquette
- Balise de lien
- Balise partielle
- Balise de script
- Sélectionner une balise
- Balise Textarea
- Balise de message de validation
- Balise récapitulative de validation
Comment utiliser la balise intégrée Sélectionnez Tag Helper ?
Il génère une liste déroulante basée sur les propriétés de votre modèle en utilisant l'élément HTML select . Le menu déroulant est basé sur deux choses. Le premier est sélectionnez et le second est l'option qui contient la liste des options. L'alternative pour cela est HTML helper, c'est-à-dire Html.DropDownListFor et Html.ListBoxFor .
Voici l'exemple de code pour une liste déroulante HTML:
< sélectionnez id = " voitures " >
< option valeur = " mercedes " > Mercedes </ option [19659020]>
< option valeur = " audi " > Audi </ option [19659020]>
</ sélectionnez >
Sortie: Le code ci-dessus montre simplement la liste déroulante HTML avec deux options, Mercedes et Audi .
Le asp-for spécifie le nom de la propriété de modèle pour l'élément select et asp-items pour les éléments option . Par exemple, dans le code ci-dessous, nous allons voir comment utiliser la liste Select Tag Helper à l'aide du langage de programmation . Dans cet exemple, nous avons créé un viewmodel nommé LanguageViewModel avec deux propriétés: une pour asp-for de type string et l'autre pour asp- éléments de type SelectListItem :
HTML:
< select asp-for = " Language " asp-items = " Model.Languages " > </ select >
C # :
public class LanguageViewModel
{
public string Language { get ; set ; [19659102]}
public List < SelectListItem > Languages { get ; } = nouveau Liste < SelectListItem >
{
nouveau Sele ctListItem { Value = "CS" Text = "C #" }
new [19659094] SelectListItem { Value = "JS" Text = "JavaScript" }
nouveau SelectListItem { Value = "TS" Text = "TypeScript" } [19659111]} ;
}
C #: La méthode d'action Controller crée l'objet de LanguageViewModel et l'a transmis à la vue.
public IActionResult Index ()
{
var model = new LanguageViewModel () ;
return [19659151] Afficher ( model ) ;
}
Sortie:
Vous trouverez ci-dessous le code généré automatiquement pour Sélectionnez Tag Helper .
HTML:
< select ] id = " Langue " nom = " Langue " > [19659030]
< option valeur = " CS " > C # </ option [19659020]>
< option valeur = " JS " > JavaScript </ option [19659020]>
< option valeur = " TS " > TypeScript </ option [19659020]>
</ sélectionnez >
Comment définir l'option sélectionnée?
Dans l'exemple précédent, nous avons vu qu'il affiche C # comme élément sélectionné par défaut car le premier élément de la liste est sélectionné par défaut. Si nous voulons sélectionner un élément différent du premier, nous pouvons définir comme code ci-dessous:
C #:
public IActionResult Index ()
{[19659096] var model = new LanguageViewModel () ;
model . Language = "TS" ;
return View ( model ) ;
}
Sortie: Dans la sortie ci-dessous, vous pouvez voir que TypeScript est sélectionné par défaut car nous avons défini la valeur de la propriété model Language sur TS – ce n'est rien d'autre que
Voici le code généré automatiquement pour Sélectionnez Tag Helper avec l'élément sélectionné par défaut.
HTML: Dans le code ci-dessous, vous pouvez voir que l'attribut selected est ajouté pour la valeur de l'option TS .
< select id = " Langue " nom = " Langue " >
< option valeur = " CS " > C # </ option [19659020]>
< option valeur = " JS " > JavaScript </ option [19659020]>
< option selected = " selected " value = " TS " > Option TypeScript </ >
</ sélectionnez >
Comment grouper les options?
Dans cet article, nous avons utilisé l'exemple Langages de programmation pour afficher la liste des langues dans une liste déroulante. Maintenant, nous voulons afficher la liste déroulante avec des regroupements d'options, comme Front-end et Back-end langages de programmation.
Pour ce faire, nous allons utiliser la propriété Option Group de la liste déroulante, c'est-à-dire l'élément HTML optgroup . Nous avons la propriété Group dans SelectListItem de type SelectListGroup – voyons comment l'utiliser.
C #: J'ai modifié notre LanguageViewModel comme ci-dessous.
public class LanguageViewModel { private static SelectListGroup _backEndGrp { get ; } [19659107] = nouveau SelectListGroup () { Name = "Back-end" } ; private static SelectListGroup _frontEndGrp { get ; } = new SelectListGroup () { Nom = "Front-end" } ; public string Language { get ; ] set ; } public List < SelectListItem > Languages { get ; } = new List < SelectListItem > { new SelectListItem { Value = "CS" Text = "C #" Group = _backEndGrp } new SelectListItem { Value = "JAVA" Texte = "Java" Groupe = _backEndGrp } nouveau [19659094] SelectListItem { Value = "JS" Text = "JavaScript" Group = _frontEndGrp } nouveau SelectListItem { Value = "TS" Texte = "TypeScript" Groupe = _frontEndGrp } } ; } [19659139] Sortie: Dans ce qui suit, vous pouvez voir le regroupement des options par Back-end et Front-end langages de programmation.
![]()
Voici le code généré automatiquement pour Sélectionnez Tag Helper avec Group Option .
HTML: Dans le code ci-dessous, vous pouvez voir le L'élément optgroup est ajouté pour le groupement d'options Back-end et Front-end .
< select id = [19659020] " Langue " nom = " Langue " > < optgroup label = " Back-end " > < option valeur = " CS " > C # </ option [19659020]> < option valeur = " JAVA " > Java </ option [19659020]> </ optgroup > < optgroup label = " Front-end " > < option valeur = " JS " > JavaScript </ option [19659020]> < option selected = " selected " value = " TS " > Option TypeScript </ > </ optgroup > </ sélectionnez >
Comment désactiver une option ou un groupe?
Si nous voulons désactiver une option ou un groupe d'options particulier, la propriété Disabled de type bool est disponible dans les deux classes SelectListItem et SelectListGroup . La propriété est de type bool donc n'accepte que les valeurs true ou false et la valeur par défaut est false . Voyons comment utiliser cette propriété et désactiver une option ou un groupe d'options.
C #: J'ai désactivé l'option Java et les options de groupe Front-end pour la sélection. [19659092] public
class LanguageViewModel
{
private static SelectListGroup _backEndGrp { get ; } = [19659093] nouveau SelectListGroup () { Name = "Back-end" } ;
private static SelectListGroup _frontEndGrp { get ; } = new SelectListGroup () { Name = "Front-end" Disabled = true } ;public string Language { get ; set ; } [19659290] public List < SelectListItem > Languages { get ; } = new List < SelectListItem >
{
new SelectListItem { Value = "CS" Texte = "C #" Group = _backEndGrp }
new SelectListItem { Valeur = "JAVA" Text = "Java" Group = _backEndGrp Disabled = true }
new SelectListItem { Value = "PY" Texte = "Python" Groupe = _backEndGrp }
nouveau Sel ectListItem { Value = "JS" Text = "JavaScript" Group = _frontEndGrp }
nouveau SelectListItem { Value = "TS" Text = [19659115] "TypeScript" Group = _frontEndGrp }
} ;
}
Output: Ci-dessous vous pouvez voir l'option Java et les options de groupe Front-end sont désactivées pour la sélection, avec le texte en gris.
Ci-dessous le code généré automatiquement pour Sélectionnez Tag Helper avec la propriété Disabled .
HTML: Dans le code ci-dessous, vous pouvez voir que l'attribut disabled est ajouté pour Front-end regroupement d'options et l'option Java .
< select id = " Language " name = " Language " [19659020]> < optgroup label = " Back-end " > < option selected = " selected " value = " CS " > C # </ option > < option disabled = " disabled " value = " JAVA " > Option Java </ > < option valeur = " PY " > Python </ option [19659020]> </ optgroup > < optgroup disabled = " disabled " label = " Front-end " > < option valeur = " JS " > JavaScript </ option [19659020]> < option valeur = " TS " > TypeScript </ option [19659020]> </ optgroup > </ sélectionnez >
Vous pouvez également télécharger cet exemple de ici .
Conclusion
Dans cet article, nous avons discuté de ce que Tag Helpers Les sont des Tag Helpers intégrés le Select Tag Helper définissant les options sélectionnées, désactivant les options et les groupes d'options à l'aide d'un exemple simple. Si vous avez des suggestions ou des questions concernant cet article, veuillez me contacter.
«Apprenez-le, partagez-le.»
Source link