SelectList issue (Selected value)

Question

I have several DDL in a Modal Bootstrap (5) and those DDL binding with a Viewbag from the Controller, Like this:

(Controller)

ViewBag.StateID = new SelectList(db.State, "StateID", "StateDesc", events.StateID);
ViewBag.CountryID = new SelectList(db.Country, "CountryID", "CountryDesc",events.CountryID);
ViewBag.HotelID = new SelectList(db.Hotel, "HotelID", "HotelDesc", events.HotelID);
ViewBag.AirportID = new SelectList(db.Airport, "AirportID", "AirportDesc", events.AirportID);
ViewBag.AirlineID = new SelectList(db.Airline, "AirlineID ", "AirlineDesc", events.AirlineID);

My view work perfectly fine and populate the DDL and show the selected item if my code declaration is this:

(View)

@Html.DropDownList("AirlineID", String.Empty)

(Javascript)

<script type="text/javascript">
    $('#AirlineID').attr('class', 'chosen-select form-control required');
    $('#AirportID').attr('class', 'chosen-select form-control required');
    $('#StateID').attr('class', 'chosen-select form-control required');
    $('#CountryID').attr('class', 'chosen-select form-control required');
    $('#HotelID').attr('class', 'chosen-select form-control required');
</script>

but, If my code is declared from this way, the Selected item don't appear or Show:

@Html.DropDownList("AirportID", (IEnumerable<SelectListItem>)ViewBag.AirportID, String.Empty, new { @class = "chosen-select form-control required" })

I use chosen-select class

Why is that? Missing Declaration or Code? Wrong code?

Thanks you

Answer 1

You cannot use the same name for both the property your binding to and the SelectList

@Html.DropDownList("CountryID", (IEnumerable<SelectListItem>)ViewBag.CountryID, ...)

means you binding to a property named CountryID but in you case, CountryID is a SelectList not a value type (and a <select> element can only be bound to a value type.

Internally the method generates a collection of <option> elements and sets the value attribute and text. As it does so, it checks the value of the property your binding to. If the value of the property matches the value of the option then the selected="selected" attribute is rendered. In your case CountryID is not a int value which matches one of the StateID values your generating in the options so selected="selected" is never set on any option because the value of CountryID is "System.Web.Mvc.SelectList" (not "1" or "2" etc)

Setting the last parameter of the SelectList constructor is simply ignored when your binding to a property.

You can make this work by specifying null as the second parameter, meaning the helper falls back to using the SelectList as the first parameter.

@Html.DropDownList("CountryID", null, String.Empty, new { @class = "chosen-select form-control required" })

However the recommended approach is to use a view model, for example

public class MyViewModel
{
  [Display(Name = "Country")]
  [Required(ErrorMessage = "Please select a country")]
  public int CountryID { get; set; }
  public SelectList CountryList { get; set; }
}

and in the GET method, initialize an instance or the view model, map your data model properties to it and assign the SelectList properties. Then in the view, use the strongly typed html helpers to bind to your model properties.

@Html.LabelFor(m => m.CountryID)
@Html.DropDownListFor(m => m.CountryID, Model.CountryList, "-Please select-", new { @class="..." })
@Html.ValidationMessageFor(m => m.CountryID)