Fermer

janvier 28, 2021

Sélectionnez Tag Helper dans ASP.NET Core MVC8 minutes de lecture



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:

 Dans une liste déroulante de langues âges C #, JavaScript et TypeScript, C # est mis en surbrillance.

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

 Cette fois, TypeScript apparaît dans la fenêtre comme langue sélectionnée par défaut

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. 

 Liste déroulante affiche le groupe Gras Retour- fin avec C # et Java en dessous, puis groupe en gras Front-end avec JavaScript et TypeScript en dessous. TypeScript est mis en surbrillance.

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

0 Partages