DropDownList To be Selected on Edit using ViewModel

Question

I'm trying to populate the edit view with data which has dropdownlists using ViewModel . The data populates but the Dropdownlists are not selected as per the data.

Have checked similar issues in SO like [SO1][1] , SO2 , SO3 but not able to resolve . Know it might be something silly I'm missing but unable to find.

Code: Viewmodel:

 public class ProductVM
    {
        public int ID { get; set; }
        [Required]
        [DisplayName("Product Name")]
        public string ProductName { get; set; }

        public int SupplierID { get; set; }
        public IEnumerable<SelectListItem> Suppliers { get; set; }
        public Supplier Supplier { get; set; }

        public int UnitID { get; set; }
        public IEnumerable<SelectListItem>  Units { get; set; }
        public Unit Unit { get; set; }

        public int ItemCategoryID { get; set; }
        public IEnumerable<SelectListItem> Categories { get; set; }
        [DisplayName("Categories")]
        public ItemCategory ItemCategory { get; set; }
     }
Controller Edit :
  public ActionResult Edit(int id)
        {
            var productVM = GetProductById(id);


            return View(productVM);
        }
 private ProductVM GetProductById(int id)
        {
            Product product = db.Products.Find(id);

            var productVM = new ProductVM();


           var suppliers = new SelectList(db.Suppliers, "ID", "SupplierName", product.SupplierID);
            productVM.Suppliers = suppliers.ToList();

            var categories = new SelectList(db.ItemCategories, "ID", "Name", product.ItemCategoryID);
            productVM.Categories = categories.ToList();

  var units = new SelectList(db.Units, "ID", "Name", product.UnitID);
            productVM.Units = units.ToList();
        }

View :

<div class="form-group">
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
            </div>
        </div>


        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.SupplierID, "SupplierID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                @Html.DropDownListFor(u => u.SupplierID, Model.Suppliers, "--Select--")

                @Html.ValidationMessageFor(model => model.SupplierID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UnitID, "UnitID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(u => u.UnitID, (IEnumerable<SelectListItem>)Model.Units, "--Select--")
                @Html.ValidationMessageFor(model => model.UnitID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ItemCategoryID, "ItemCategoryID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(u => u.ItemCategoryID, (IEnumerable<SelectListItem>)Model.Categories, "--Select--")
                @Html.ValidationMessageFor(model => model.ItemCategoryID, "", new { @class = "text-danger" })
            </div>
        </div>

Appreciate any help. Thanks in advance. [1]: Binding Viewmodel Property to dropdown selected item in razor

to-dropdown-selected-item-in-razor

Are you saying you want the dropdownlists to load with values already selected? Like with this question for example: https://stackoverflow.com/questions/27901175/how-to-get-dropdownlist-selectedvalue-in-controller-in-mvc — MUlferts, Sep 16 '17 at 17:24

adiga · Answer 1 · 2017-09-16T19:53:53.873

Whatever you set in the selectedValue parameter in the SelectList is going to be ignored. Why? Because you have a strongly typed view and you are binding SupplierID property of ProductVM to the dropdown. In your GetProductById method, you are not actually populating the productVM.SupplierID, UnitID and ItemCategoryID. So they will have the default int value, 0.

So you can change you method to this:

private ProductVM GetProductById(int id)
{
    Product product = db.Products.Find(id);

    var productVM = new ProductVM
    {
        // No need to pass the 4th parameter "selectedValue" in SelectList. 
        Suppliers = new SelectList(db.Suppliers, "ID", "SupplierName"),
        Categories = new SelectList(db.ItemCategories, "ID", "Name"),
        Units = new SelectList(db.Units, "ID", "Name"),

        // Populate these properties
        SupplierID = product.SupplierID,
        ItemCategoryID = product.ItemCategoryID,
        UnitID = product.UnitID
    };

    return productVM ;
}

The optional selectedValue parameter is usually used when we're not using strongly typed views. If you were to change your View to the following, then your dropdown would have pre selected the value:

@Html.DropDownList("Supplier", Model.Suppliers, "--Select--")

Thanks adiga for your time and the clear explanation – user2695433 Sep 17 '17 at 05:47 — user2695433, Sep 17 '17 at 05:47

score 1 · Accepted Answer · answered Sep 16 '17 at 17:33

You would want to set an initial value into your selected values in the controller before passing the model to the view if you want the dropdownlists to load with a pre-selected value. For example:

public ActionResult Edit(int id)
{
    var productVM = GetProductById(id);
    //Set your pre-determined values here and they will show up on the view once binded
    productVM.SupplierID = 1;
    productVM.UnitID = 1;
    productVM.ItemCategoryID  = 1;

    return View(productVM);
}

This question does a great job of breaking that process down: How to get DropDownList SelectedValue in Controller in MVC

DropDownList To be Selected on Edit using ViewModel

2 Answers2