Selectlist binding for multiple rows of data in asp.net mvc

Question

I have an issue where I have a list of objects:

List<MenuProduct> MenuProducts;

Where the MenuProduct consists of:

public class MenuProduct
{
    public int MenuProductID { get; set; }
    public int LoginID { get; set; }
    public int ContractTypeID { get; set; }
    public int? ContractID { get; set; }
    public string Title { get; set; }
    public decimal? Factor { get; set; }
    public int OrderNum { get; set; }
    public System.DateTime DateCreated { get; set; }
    public int UserCreated { get; set; }
    public decimal DiscountedRate { get; set; }
    public decimal? JointFactor { get; set; }
}

And the (partial) model:

  public List<MenuProduct> MenuProducts { get; set; }
  public SelectList ContractTypes { get; set; }
  public SelectList Contracts { get; set; }

And I am binding them in the view like this:

 @for (int i = 0; i < Model.MenuProducts.Count(); i++)
    {
       <tr>
           <td>@Html.TextBoxFor(x => x.MenuProducts[i].Title, new { @class = "form-control" })</td>
           <td>@Html.TextBoxFor(x => x.MenuProducts[i].Factor, new { @class = "form-control" })</td>
           <td>@Html.TextBoxFor(x => x.MenuProducts[i].JointFactor, new { @class = "form-control" })</td>
           <td>@Html.DropDownListFor(x => x.MenuProducts[i].ContractTypeID, Model.ContractTypes, new { @class = "form-control" })</td>
           <td>@Html.DropDownListFor(x => x.MenuProducts[i].ContractID, Model.Contracts, new { @class = "form-control" })</td>               
       </tr>
     }

The issue that I am having is that when the data is loaded, because I am using shared lists for Contracts and ContractTypes, the SelectLists are never selected with the proper values.

If I move each item to a partial view like this:

@for (int i = 0; i < Model.MenuProducts.Count(); i++)
    {
        @Html.RenderPartial("_MenuProductItemPartialView", new MenuProductItemModel() { Item = Model.MenuProducts[i], ContractTypes = Model.ContractTypes, Contracts = Model.Contracts})            
    }

With this model:

  public MenuProduct Item { get; set; }
  public SelectList ContractTypes { get; set; }
  public SelectList Contracts { get; set; }

The values in the select lists are correct, but then I can't have a button on the outer page that updates all the rows at once - at least, I don't know how to do that.

So my question is: how do I get the select lists to work the first way (where I can post back the List<MenuProduct>) OR how do I collect all of the updated data from each partial the second way? Because there could be data that has changed from any row or many rows.

score 3 · Accepted Answer · answered Aug 30 '17 at 18:39

3

You can construct a SelectList on the fly for each row with your selected value and it should work.

@Html.DropDownListFor(x => x.MenuProducts[i].ContractTypeID, new SelectList(Model.ContractTypes, "Value", "Text", Model.MenuProducts[i].ContractTypeID), new { @class = "form-control" })

answered Aug 30 '17 at 18:39

stephen.vakil

3,492
1
18
23

While this question is technically a duplicate (I didn't find that one when searching), your answer is direct and to the point and IMO easier to understand. – Barry Franklin Aug 31 '17 at 12:11

Selectlist binding for multiple rows of data in asp.net mvc

1 Answers1