Bind a Razor select to a Dictionary from VewData

Question

I'm writing a web-app with .NET Core MVC (dotnet version 1.0.4).

I want to pass a Dictionary<string, string> in a ViewData object from controller to view and bind it to <select> element.

This is a result that I want to get:

And I tried two ways to achieve it.

1st way

Controller's code

Dictionary<string, string> animals = new Dictionary<string, string>();
animals.Add("1", "cat");
animals.Add("2", "dog");
animals.Add("3", "bunny");

ViewData["animals"] = new SelectList(animals);

Views's code

<select asp-for="Animal_id" asp-items="(SelectList)@ViewData["animals"]" class="form-control"></select>

That gives me this result

2nd way

Controller's code

Dictionary<string, string> animals = new Dictionary<string, string>();
animals.Add("1", "cat");
animals.Add("2", "dog");
animals.Add("3", "bunny");

ViewData["animals"] = new SelectList(animals.Select(r => new SelectListItem
{
    Text = r.Key,
    Value = r.Value
}));

Views's code

The same.

That gives me this result:

Apparently, something I don't understand about this concept, although I feel like I'm on a right track. Can you please help me - what needs to be done in order to get the result from my first picture (<option>s with values)?

Answer 1

You using the overload of the SelectList constructor where the parameter is IEnumerable. That overload calls the .ToString() method of each item in your collection, and because they are complex objects, you get the results your seeing. That overload is really only useful if your collection was IEnumerable<string>.

You need to use the overload that accepts arguments for the dataValueField and dataTextField which defines the properties to be used for the options value and display text.

Dictionary<string, string> animals = new Dictionary<string, string>();
animals.Add("1", "cat");
animals.Add("2", "dog");
animals.Add("3", "bunny");

ViewData["animals"] = new SelectList(animals, "Key", "Value");

Note also in your 2nd example, you have already generated an IEnumerable<SelectListItem> To use new SelectList(...) to create an identical IEnumerable<SelectListItem> from the first one is pointless extra ovehead and it can just be

ViewData["animals"] = animals.Select(r => new SelectListItem
{
    Text = r.Key,
    Value = r.Value
}));

and in the view asp-items="(IEnumerable<SelectListItem>)@ViewData["animals"]"

Answer 2

With your current code, you are creating a SelectList but not specifying what should be the data value field and data text field (of the collection you are using).

You can use the SelectList overload which takes those 2 params.

ViewData["animals"] = new SelectList(animals.Select(r => new SelectListItem
{
    Value = r.Key.ToString(),
    Text = r.Value
}),"Value","Text");

But that is unnecessary code we are executing. You alreay are creating a list of SelectListItem (to pass to SelectList).You should simply use that collection to build the select element.

var animals = new Dictionary<string, string>();
animals.Add("1", "cat");
animals.Add("2", "dog");
animals.Add("3", "bunny");

ViewData["animals"] = animals.Select(r => new SelectListItem
{
    Value = r.Key.ToString(),
    Text = r.Value
});

And in your view

<select asp-for="SomePropertyName" 
                    asp-items="@(ViewData["animals"] as IEnumerable<SelectListItem>)">

</select>

If you use ViewBag instead of ViewData, You do not need the explicit casting.

ViewBag.AnimalList= animals.Select(r => new SelectListItem
{
    Value = r.Key.ToString(),
    Text = r.Value
});

and

<select asp-for="Name" asp-items="@ViewBag.AnimalList">
</select>