Select Tag Helper in ASP NET Core MVC

Question

I need some help with the select tag helper in ASP NET Core   I have a list of employees that I m trying to bind to a select tag helper  My employees are in a List lt Employee gt  EmployeesList and selected value will go into EmployeeId property  My view model looks like this   public class MyViewModel      public int EmployeeId   get  set       public string Comments   get  set       public List lt Employee gt  EmployeesList  get  set        My employee class looks like this   public class Employee      public int Id   get  set       public string FullName   get  set        My question is how do I tell my select tag helper to use the Id as the value while displaying FullName in the drop down list    lt select asp-for  EmployeeId  asp-items         gt    I d appreciate some help with this  Thanks

User · Answer

You can use below code for multiple select    lt select asp-for  EmployeeId   multiple  multiple  asp-items   ViewBag Employees  gt       lt option gt Please select lt  option gt   lt  select gt    You can also use    lt select id  EmployeeId  name  EmployeeId   multiple  multiple  asp-items   ViewBag Employees  gt       lt option gt Please select lt  option gt   lt  select gt

User · Answer

Using the Select Tag helpers to render a SELECT element  In your GET action  create an object of your view model  load the EmployeeList collection property and send that to the view   public IActionResult Create         var vm   new MyViewModel        vm EmployeesList   new List lt Employee gt                new Employee   Id   1  FullName    Shyju             new Employee   Id   2  FullName    Bryan               return View vm       And in your create view  create a new SelectList object from the EmployeeList property and pass that as value for the asp-items property    model MyViewModel  lt form asp-controller  Home  asp-action  Create  gt        lt select asp-for  EmployeeId               asp-items    new SelectList Model EmployeesList  Id   FullName     gt           lt option gt Please select one lt  option gt       lt  select gt        lt input type  submit   gt    lt  form gt    And your HttpPost action method to accept the submitted form data    HttpPost  public IActionResult Create MyViewModel model           check model EmployeeId         to do   Save and redirect     Or  If your view model has a List lt SelectListItem gt  as the property for your dropdown items   public class MyViewModel       public int EmployeeId   get  set        public string Comments   get  set        public List lt SelectListItem gt  Employees   set  get        And in your get action   public IActionResult Create         var vm   new MyViewModel        vm Employees   new List lt SelectListItem gt                new SelectListItem  Text    Shyju   Value    1            new SelectListItem  Text    Sean   Value    2              return View vm       And in the view  you can directly use the Employees property for the asp-items    model MyViewModel  lt form asp-controller  Home  asp-action  Create  gt        lt label gt Comments lt  label gt       lt input type  text  asp-for  Comments   gt        lt label gt Lucky Employee lt  label gt       lt select asp-for  EmployeeId  asp-items   Model Employees   gt           lt option gt Please select one lt  option gt       lt  select gt        lt input type  submit   gt    lt  form gt    The class SelectListItem belongs to Microsoft AspNet Mvc Rendering namespace   Make sure you are using an explicit closing tag for the select element  If you use the self closing tag approach  the tag helper will render an empty SELECT element   The below approach will not work   lt select asp-for  EmployeeId  asp-items   Model Employees    gt    But this will work    lt select asp-for  EmployeeId  asp-items   Model Employees  gt  lt  select gt      Getting data from your database table using entity framework  The above examples are using hard coded items for the options  So i thought i will add some sample code to get data using Entity framework as a lot of people use that   Let s assume your DbContext object has a property called Employees  which is of type DbSet lt Employee gt  where the Employee entity class has an Id and Name property like this  public class Employee      public int Id   set  get       public string Name   set  get        You can use a LINQ query to get the employees and use the Select method in your LINQ expression to create a list of SelectListItem objects for each employee   public IActionResult Create         var vm   new MyViewModel        vm Employees   context Employees                            Select a   gt  new SelectListItem                                     Value   a Id ToString                                  Text   a Name                                                         ToList        return View vm       Assuming context is your db context object  The view code is same as above   Using SelectList  Some people prefer to use SelectList class to hold the items needed to render the options   public class MyViewModel       public int EmployeeId   get  set        public SelectList Employees   set  get        Now in your GET action  you can use the SelectList constructor to populate the Employees property of the view model  Make sure you are specifying the  dataValueField and dataTextField parameters   public IActionResult Create         var vm   new MyViewModel        vm Employees   new SelectList GetEmployees    Id   FirstName        return View vm     public IEnumerable lt Employee gt  GetEmployees            hard coded list for demo          You may replace with real data from database to create Employee objects     return new List lt Employee gt                new Employee   Id   1  FirstName    Shyju             new Employee   Id   2  FirstName    Bryan               Here I am calling the GetEmployees method to get a list of Employee objects  each with an Id and FirstName property and I use those properties as DataValueField and DataTextField of the SelectList object we created  You can change the hardcoded list to a code which reads data from a database table   The view code will be same    lt select asp-for  EmployeeId  asp-items   Model Employees   gt       lt option gt Please select one lt  option gt   lt  select gt    Render a SELECT element from a list of strings   Sometimes you might want to render a select element from a list of strings  In that case  you can use the SelectList constructor which only takes IEnumerable lt T gt   var vm   new MyViewModel    var items   new List lt string gt    Monday    Tuesday    Wednesday    vm Employees   new SelectList items   return View vm     The view code will be same   Setting selected options  Some times you might want to set one option as the default option in the SELECT element  For example  in an edit screen  you want to load the previously saved option value   To do that  you may simply set the EmployeeId property value to the value of the option you want to be selected   public IActionResult Create         var vm   new MyViewModel        vm Employees   new List lt SelectListItem gt                new SelectListItem  Text    Shyju   Value    11            new SelectListItem  Text    Tom   Value    12            new SelectListItem  Text    Jerry   Value    13              vm EmployeeId   12      Here you set the value     return View vm       This will select the option Tom in the select element when the page is rendered   Multi select dropdown  If you want to render a multi select dropdown  you can simply change your view model property which you use for asp-for attribute in your view to an array type   public class MyViewModel       public int   EmployeeIds   get  set        public List lt SelectListItem gt  Employees   set  get        This will render the HTML markup for the select element with the multiple attribute which will allow the user to select multiple options    model MyViewModel  lt select id  EmployeeIds  multiple  multiple  name  EmployeeIds  gt       lt option gt Please select one lt  option gt       lt option value  1  gt Shyju lt  option gt       lt option value  2  gt Sean lt  option gt   lt  select gt    Setting selected options in multi select  Similar to single select  set the EmployeeIds property value to the an array of values you want   public IActionResult Create         var vm   new MyViewModel        vm Employees   new List lt SelectListItem gt                new SelectListItem  Text    Shyju   Value    11            new SelectListItem  Text    Tom   Value    12            new SelectListItem  Text    Jerry   Value    13              vm EmployeeIds  new int     12 13          return View vm       This will select the option Tom and Jerry in the multi select element when the page is rendered   Using ViewBag to transfer the list of items  If you do not prefer to keep a collection type property to pass the list of options to the view  you can use the dynamic ViewBag to do so  This is not my personally recommended approach as viewbag is dynamic and your code is prone to uncatched typo errors   public IActionResult Create                ViewBag Employees   new List lt SelectListItem gt                new SelectListItem  Text    Shyju   Value    1            new SelectListItem  Text    Sean   Value    2              return View new MyViewModel         and in the view   lt select asp-for  EmployeeId  asp-items   ViewBag Employees  gt       lt option gt Please select one lt  option gt   lt  select gt    Using ViewBag to transfer the list of items and setting selected option  It is same as above  All you have to do is  set the property  for which you are binding the dropdown for  value to the value of the option you want to be selected   public IActionResult Create                ViewBag Employees   new List lt SelectListItem gt                new SelectListItem  Text    Shyju   Value    1            new SelectListItem  Text    Bryan   Value    2            new SelectListItem  Text    Sean   Value    3               vm EmployeeId   2      This will set Bryan as selected      return View new MyViewModel         and in the view   lt select asp-for  EmployeeId  asp-items   ViewBag Employees  gt       lt option gt Please select one lt  option gt   lt  select gt    Grouping items  The select tag helper method supports grouping options in a dropdown  All you have to do is  specify the  Group property value of each SelectListItem in your action method   public IActionResult Create         var vm   new MyViewModel         var group1   new SelectListGroup   Name    Dev Team         var group2   new SelectListGroup   Name    QA Team          var employeeList   new List lt SelectListItem gt                  new SelectListItem     Value    1   Text    Shyju   Group   group1            new SelectListItem     Value    2   Text    Bryan   Group   group1            new SelectListItem     Value    3   Text    Kevin   Group   group2            new SelectListItem     Value    4   Text    Alex   Group   group2              vm Employees   employeeList      return View vm       There is no change in the view code  the select tag helper will now render the options inside 2 optgroup items

User · Answer

I created an Interface and a  lt options gt  tag helper for this  So I didn t have to convert the IEnumerable lt T gt  items into IEnumerable lt SelectListItem gt  every time I have to populate the  lt select gt  control   And I think it works beautifully     The usage is something like    lt select asp-for  EmployeeId  gt       lt option value    gt Please select    lt  option gt       lt options asp-items   Model EmployeesList    gt   lt  select gt    And to make it work with the tag helper you have to implement that interface in your class   public class Employee   IIntegerListItem      public int Id   get  set       public string FullName   get  set        public int Value   return Id       public string Text  return FullName           These are the needed codes   The interface   public interface IIntegerListItem       int Value   get        string Text   get        The  lt options gt  tag helper    HtmlTargetElement  options   Attributes    asp-items    public class OptionsTagHelper   TagHelper       public OptionsTagHelper IHtmlGenerator generator                Generator   generator              HtmlAttributeNotBound      public IHtmlGenerator Generator   get  set          HtmlAttributeName  asp-items        public object Items   get  set         public override void Process TagHelperContext context  TagHelperOutput output                output SuppressOutput               Is this  lt options   gt  element a child of a  lt select  gt  element the SelectTagHelper targeted          object formDataEntry          context Items TryGetValue typeof SelectTagHelper   out formDataEntry            var selectedValues   formDataEntry as ICollection lt string gt           var encodedValues   new HashSet lt string gt  StringComparer OrdinalIgnoreCase           if  selectedValues    null  amp  amp  selectedValues Count    0                        foreach  var selectedValue in selectedValues                                encodedValues Add Generator Encode selectedValue                                     IEnumerable lt SelectListItem gt  items   null          if  Items    null                        if  Items is IEnumerable                                var enumerable   Items as IEnumerable                  if  Items is IEnumerable lt SelectListItem gt                       items   Items as IEnumerable lt SelectListItem gt                   else if  Items is IEnumerable lt IIntegerListItem gt                       items     IEnumerable lt IIntegerListItem gt  Items  Select x   gt  new SelectListItem     Selected   false  Value     IIntegerListItem x  Value ToString    Text     IIntegerListItem x  Text                     else                     throw new InvalidOperationException string Format  The  2  was unable to provide metadata about   1   expression value   3   for  lt options gt                               lt options gt                             ForAttributeName                           nameof IModelMetadataProvider                            For Name                               else                               throw new InvalidOperationException  Invalid items for  lt options gt                                foreach  var item in items                                bool selected    selectedValues    null  amp  amp  selectedValues Contains item Value      encodedValues Contains item Value                   var selectedAttr   selected    selected  selected                          if  item Value    null                      output Content AppendHtml    lt option value   item Value    selectedAttr  gt  item Text  lt  option gt                     else                     output Content AppendHtml    lt option gt  item Text  lt  option gt                                       There may be some typo but the aim is clear I think  I had to edit a little bit

User · Answer

In Get   public IActionResult Create         ViewData  Tags     new SelectList  context Tags   Id    Name        return View        In Post   var selectedIds  Request Form  Tags      In View     lt label gt Tags lt  label gt   lt select  asp-for  Tags   id  Tags  name  Tags  class  form-control  asp-items  ViewBag Tags  multiple gt  lt  select gt

User · Answer

You can also use IHtmlHelper GetEnumSelectList          Summary             Returns a select list for the given TEnum                Type parameters           TEnum             Type to generate a select list for                Returns             An System Collections Generic IEnumerable 1 containing the select list for the            given TEnum                Exceptions           T System ArgumentException             Thrown if TEnum is not an System Enum or if it has a System FlagsAttribute      IEnumerable lt SelectListItem gt  GetEnumSelectList lt TEnum gt    where TEnum   struct

User · Answer

My answer below doesn t solve the question but it relates to   If someone is using enum instead of a class model  like this example   public enum Counter        Display Name    Number 1        No1   1       Display Name    Number 2        No2   2       Display Name    Number 3        No3   3     And a property to get the value when submiting   public int No   get  set      In the razor page  you can use Html GetEnumSelectList lt Counter gt    to get the enum properties    lt select asp-for  No  asp-items   Html GetEnumSelectList lt Counter gt     gt  lt  select gt    It generates the following HTML    lt select id  No  name  No  gt       lt option value  1  gt Number 1 lt  option gt       lt option value  2  gt Number 2 lt  option gt       lt option value  3  gt Number 3 lt  option gt   lt  select gt

[c#] Select Tag Helper in ASP.NET Core MVC

Examples related to c#

Examples related to asp.net-core

Examples related to asp.net-core-mvc

Examples related to tag-helpers