How can I get the text of a selected option with ASP.NET MVC?

Question

I have a form in an ASP.NET MVC project which has a select drop down list akin to the following:

<select>
  <option value="ee5711b9-ec86-4378-a975-ae10a4ebedbc">Volvo Account</option>
  <option value="0dc0e9d8-2245-43de-81a9-5b94c19646fa">Saab Account</option>
  <option value="f9a05ef6-9ca6-4eeb-9e04-79726a62b38c">Mercedes Account</option>
  <option value="1c5c2e43-06d6-4b7d-916a-231be535a608">Audi Account</option>
</select>

In a later page in the project I need to do something with the GUID identifier, but first I need to prompt the user for confirmation. Obviously the GUID is useless to them and they'd like to see the friendlier name (i.e., "Volvo Account").

But when I drill into the FormCollection values, all I can get is the value, not the text of the selected option This makes sense given the design goals, but how can I also POST over the text value?

I can think of some workarounds (setting a hidden field with JavaScript, doing a lookup after the fact with the GUID and the same method by which I populated this, etc.) but is there any intrinisc way to do this I'm missing?

Answer 1

There's no intrinsic way to do this, JavaScript is really your best option.

Add an "onchange" event handler to your SELECT that sets the value of a hidden input to the display value of the selected OPTION.

Answer 2

I usually handle Drop Downs / Select Boxes in MVC with a static property within a Collection class in Models.

Example:

using System.Collections.Generic;

namespace SomeProject.Models
{
    public class Collections
    {
        public static Dictionary<string, string> AccountType = new Dictionary<string, string>
        {
            { "", "" },
            { "ee5711b9-ec86-4378-a975-ae10a4ebedbc", "Volvo Account" },
            { "0dc0e9d8-2245-43de-81a9-5b94c19646fa", "Saab Account" },
            { "f9a05ef6-9ca6-4eeb-9e04-79726a62b38c", "Mercedes Account" },
            { "1c5c2e43-06d6-4b7d-916a-231be535a608", "Audi Account" }
        };
    }
}

Then I would render the DropDown in the View like:

<%= Html.DropDownList("AccountType", new SelectList(SomeProject.Models.Collections.AccountType, "Key", "Value", Convert.ToString(ViewData["AccountType"])), "", new { tabindex = "3", @class = "dropdown" }) %>

Now that Collection is available to your entire application. You can grab whatever user-friendly name you'd like via:

SomeProject.Models.Collections.AccountType[ViewData["AccountType"]]

You could even render the collection out to the View if you desire.

Hope that helps.

Answer 3

Using hidden fields:

<select>
    <option value="ee5711b9-ec86-4378-a975-ae10a4ebedbc">Volvo Account</option>
    <option value="0dc0e9d8-2245-43de-81a9-5b94c19646fa">Saab Account</option>
    <option value="f9a05ef6-9ca6-4eeb-9e04-79726a62b38c">Mercedes Account</option>
    <option value="1c5c2e43-06d6-4b7d-916a-231be535a608">Audi Account</option>
</select>
...
<input type="hidden" name="Options[0].Key" value="ee5711b9-ec86-4378-a975-ae10a4ebedbc" />
<input type="hidden" name="Options[0].Value" value="Volvo Account" />
<input type="hidden" name="Options[1].Key" value="0dc0e9d8-2245-43de-81a9-5b94c19646fa" />
<input type="hidden" name="Options[1].Value" value="Saab Account" />
...

Controller:

public ActionResult SomeAction(..., IDictionary<string, string> options)
{
    string selectedValue = ...;
    string selectedText = options[selectedValue];
}