Trying to get a dropdown working in asp.net core

Question

I am trying to get a dropdown working in asp.net core but it doesnt even appear to like the first list that its supposed to populate staff memebers with. I have a table called activity header with a foreignkey field staff id linked to a staff table.

First here is the code I am trying from this tutorial

public IEnumerable<SelectListItem> GetStaff()
{
        List <SelectListItem> staff = _db.Staff.AsNoTracking();

            List <SelectListItem> selectListItems = _db.Staff.AsNoTracking()
                .OrderBy(n => n.FirstName)
                    .Select(n =>
                    new SelectListItem
                    {
                        Value = n.StaffID.ToString(),
                        Text = n.FirstName.ToString() + " " + n.LastName.ToString()
                    }).ToList();
            var stafftip = new SelectListItem()
            {
                Value = null,
                Text = "--- select staff memeber---"
            };
            staff.Insert(0, stafftip );
            return new SelectList(staff, "Value", "Text");

}

My Class for activity header

 public class ActivityHeader
 { 
    // other fields removed for brevity

    [Required]        
    [Display(Name = "Staff")]
    public int StaffId { get; set; }
    public IEnumerable<Staff> Staff { get; set; }
 }

My staff class here which should link to the other table with the staff id

public class Staff
{
    [Key]
    public int StaffID { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }
    public int DepartmentId { get; set; }

    public string StaffNumber { get; set; }
    public virtual IEnumerable<Staff> Staff { get; set; }
 }

This is my html for my view which is inside a bootstrap popup.

<div class="col-sm-3">
     <label for="inputPostalCode">SOP</label>
   <div class="form-group">
     @Html.LabelFor(x => Model.Staff, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-5">
       @Html.DropDownListFor(x => Model.StaffId, new SelectList(Model.Staff, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country" })
     @Html.ValidationMessageFor(x => x.StaffId, "", new { @class = "text-danger" })
  </div>
 </div>
</div>

What i expect to see is a html drop down with the results from staff but linked to activity head with staff id.

But it doesn't appear to like this list for some reason. Exact error is

Answer 1

I see there are few mistakes in your DropDownList implementation:

Number #1 :

If you want if no item is selected from DropDownList then null value for the select list will be passed then don't need to set DropDownList level text as follows:

var stafftip = new SelectListItem()
{
            Value = null,
            Text = "--- select staff memeber---"
};
staff.Insert(0, stafftip );

Rather simply your GetStaff() method as follows:

public SelectList GetStaff()
{
     var staffList = _db.Staff.Select(s => new
     {
           Value = s.StaffID,
           Text = s.FirstName + " " + s.LastName
     }).ToList();

    return new SelectList(staffList, "Value", "Text");
}

Now in your model classes, replace public virtual IEnumerable<Staff> Staff { get; set; } public virtual IEnumerable<Staff> Staff { get; set; } public virtual IEnumerable<Staff> Staff { get; set; } with public SelectList Staff { get; set; } public SelectList Staff { get; set; }

Then in the view:

@Html.DropDownListFor(x => Model.StaffId, Model.Staff,"Select Staff", htmlAttributes: new { @class = "form-control", id = "Country" })

Number #2:

If you want, if no item is selected from DropDownList then default (0 or anything) value for the select list will be passed then write your GetStaff() method as follows:

public IEnumerable<SelectListItem> GetStaff()
{
    List<SelectListItem> staffSelectListItems = _db.Staff.OrderBy(n => n.FirstName)
                                   .Select(n => new SelectListItem
                                   {
                                       Value = n.StaffID.ToString(),
                                          Text = n.FirstName.ToString() + " " + n.LastName.ToString()
                                   }).ToList();

    var defaultSelection = new SelectListItem()
    {
                Value = "0",
                Text = "Select Staff Member",
                Selected = true // <-- this is obligatory
    };
    staffSelectListItems.Insert(0, defaultSelection);
    return staffSelectListItems;
}

Then in the view:

@Html.DropDownListFor(x => Model.StaffId,(List<SelectListItem>)Model.Staff, htmlAttributes: new { @class = "form-control", id = "Country" })

Hope it will now work for you!

Answer 2

public IEnumerable<SelectListItem> GetStaff()
{
    List <SelectListItem> selectListItems = _db.Staff.AsNoTracking()
         .OrderBy(n => n.FirstName)
         .Select(n =>
            new SelectListItem
                 {
                     Value = n.StaffID.ToString(),
                     Text = n.FirstName.ToString() + " " + n.LastName.ToString()
                 }).ToList();
    var stafftip = new SelectListItem()
       {
          Value = null,
          Text = "--- select staff memeber---"
       };

   selectListItems.Insert(0, stafftip );
   return new SelectList(selectListItems, "Value", "Text");        
}

You were trying to assign an IQueryable to a List which wasn't going to work. I have removed that line and fixed your use of the selectlist as staff is not needed.