将复杂模型绑定到MVC中的下拉列表

Question

I'm trying to bind a model that has two properties - one Int, and one Boolean - to a drop-down list in MVC. The boolean is a discriminator and the integer an ID. It is not possible to split the drop down list in two.

Here is my code so far.

<select class="col-md-3 form-control" name="Model.ID" id="model-select">
    <option value="0" selected>Select an Option</option>
    @foreach (var m in models.OrderBy(x => x.Id))
    {
        <option value="@m.ID" data-discriminator="@m.Discriminator">
            @m.Name
        </option>
    }
</select>

The model looks something like this

class MyModel
{
  int ID { get; set; }
  string Name { get; set; }
  boolean Discriminator { get; set; }
}

The aim is to provide a set of models to the View, then the user can pick one of these. Unfortunately each model has two properties which are used to identify which model was selected in the database - the Id, which mirrors the Id in the database, and the Discriminator. The two types are otherwise incompatible in the database, hence the discriminator. For the sake of design, I only want to have these two in the same drop-down list, as you can only select one at a time anyway.

My idea of a solution was to create 2 hidden fields which would be bound to the model like so

<input type="hidden" name="Model.ID" />
<input type="hidden" name="Model.Discriminator" />

These would be updated via JavaScript and then bound to the model (as far as I know, using names like that will bind it correctly, providing that the destination property on the model passed to the POST is Model in this example).

Are there any other alternatives I could pursue?

EDIT: Also worth noting that this 'Model' is part of a more complex model and is not the only field being POSTed, so if that makes any difference...

Answer 1

A select box is only going to be able to post one thing, and using JavaScript to populate hidden fields, while perhaps a workable solution, seems very brittle. Your best bet would like be creating an intermediary property that you can bind to and include both sets of information as the option value:

public string SelectedThing
{
    get { return string.Format("{0},{1}", ID, Discriminator); }
    set
    {
        if (value != null)
        {
            var parts = value.Split(',');
            if (parts.Length == 2)
            {
                Int32.TryParse(parts[0], out ID);
                Boolean.TryParse(parts[1], out Discriminator);
            }
        }
    }
}

Then you would need to compose your select list in a similar way:

ViewBag.MyModelChoices = myModels.Select(m => new SelectListItem
    {
        Value = string.Format("{0},{1}", m.ID, m.Discriminator),
        Text = m.Name
    });

And finally, you would bind to this new property in your view:

@Html.DropDownListFor(m => m.SelectedThing, ViewBag.MyModelChoices)