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.»