MVC Multiple DropDownLists from 1 List 2020-03-12 08:04发布 站内问答 / C# 1696 4 5

Question

Background: I have 4 dropdown lists on my page that all use one List of SelectListItem to pull data from. All 4 of these dropdowns will always have the same exact elements in them. Each dropdown has an empty element at the top.

Problem: If I do not select an item from the list that renders 2nd, when the page loads the 2nd list automatically selects the item that is selected in the 1st list. This is because (I think) the list has a SelectListItem where Selected = true, and it just uses that one in the second list.

Is there any way to use one list source for multiple dropdown lists? I don't want to duplicate this list 4 times unless I absolutely have to...

Code:

//this is the list source
public IEnumerable<SelectListItem> PossibleItems { get; set; }

//this is the code on my .cshtml page
@Html.DropDownListFor(x => x.SelectedItem1, Model.PossibleItems)
@Html.DropDownListFor(x => x.SelectedItem2, Model.PossibleItems)
@Html.DropDownListFor(x => x.SelectedItem3, Model.PossibleItems)
@Html.DropDownListFor(x => x.SelectedItem4, Model.PossibleItems)

Answer 1

2 years ago but for anyone who finds this like I did looking for answers Feussy's comment above is the way to go. I'll try to explain why and what I found.

Using the OP example above. A couple conditions must be met in order to see the described behavior.

• x.SelectedItem1 should have a value (say 1).
• x.SelectedItem2 must be NULL. (if it is not a nullable type and just say an INT it will default to 0 and you won't see the behavior)

Put a breakpoint at @Html.DropDownListFor(x => x.SelectedItem1, Model.PossibleItems)

If you look in Model.PossibleItems you will see the list as expected. Let the code continue to the next line. Now if you look at Model.PossibleItems you will see that Html.DropDownListFor has modified your selectlist on the Model rather than just using it! The option for x.SelectedItem1 now has a 'selected' attribute not only in the HTML that goes to the client but in your model as well! This seems like bad behavior on Html.DropDownListFor but it definitely does it.

Now when you hit @Html.DropDownListFor(x => x.SelectedItem2, Model.PossibleItems)

• If x.SelectedItem2 has a value it will set it and you will be fine but....
• If x.SelectedItem2 is null, the second @Html.DropDownListFor just seems to take the altered(by the first DropDownListFor) selectlist as is and your second drop down will have x.SelectedItem1 selected. (because the selectlist itself was altered)

Feussy's answer works because instead of having one selectList on the model that gets reused it is creating separate selectLists that are generated from some List/IEnumerable on the model that gets reused instead.

So the moral of the story is don't reuse a selectList with nullable values because Html.DropDownListFor has no problems altering the thing and won't clear out any selected attributes if the value is NULL.

Hope that was clear.

Answer 2

The code you currently have is the best way to do it, and it should work just as it is. SelectListItem does have a Selected property, but this is most usually set by a SelectList instance. Otherwise, you'd have to manually set this property somewhere on your own. Since you're using IEnumerable<SelectListItem> instead of an instantiated SelectList, all of the items should default to having Selected as false. It's only when Razor renders the DropDownListFor control does you enumerable get turned into an actual SelectList and have its selected value set based on the model. Check your other code and make sure you're not setting the selected status manually anywhere.

FWIW, you don't need to add an empty item manually: the DropDownListFor control has a means to add an empty item to the list.

@Html.DropDownListFor(x => x.SelectedItem1, Model.PossibleItems, string.Empty)

Answer 3

Instead of using a List<SelectListItem>, use a SelectList. Then you can reuse the list of items in DropDownListFor.

Model:

public SelectList PossibleItems { get; set; }

Controller:

var items = new List<SelectListItem>();
model.PossibleItems = new SelectList(items, "Value", "Text");

View:

@Html.DropDownListFor(m => m.Item1, Model.PossibleItems)
@Html.DropDownListFor(m => m.Item2, Model.PossibleItems)

Answer 4

In your list, need to create different SelectList entities for each of the four drop down lists like so:

@Html.DropDownListFor(x => x.SelectedItem1, 
    new SelectList(Model.PossibleItems, "dataValue", "textValue", Model.SelectedItem1))
@Html.DropDownListFor(x => x.SelectedItem2, Model.PossibleItems)
    new SelectList(Model.PossibleItems, "dataValue", "textValue", Model.SelectedItem2))
@Html.DropDownListFor(x => x.SelectedItem3, Model.PossibleItems)
    new SelectList(Model.PossibleItems, "dataValue", "textValue", Model.SelectedItem3))
@Html.DropDownListFor(x => x.SelectedItem4, Model.PossibleItems)
    new SelectList(Model.PossibleItems, "dataValue", "textValue", Model.SelectedItem4))

In this example, "dataValue" and "textValue" are the properties of the SelectListItem object that correspond to your value and text elements of the drop down options.