如何将下拉列表绑定到ASP.Net MVC C＃中的动态生成的变量

Question

We have an application which uses dynamic custom properties to define attributes/properties of certain entities in the system.

As such, there are some situations where we need to have form fields (usually drop down lists or check box lists) populated dynamically, ideally by specifying the custom property type in the view.

This question is specifically about drop down lists.

This is what we are trying to do:

ViewModel:

public class SearchViewModel
{
    #region Properties

    public Dictionary<string, SelectList> CustomPropertySelectLists { get; set; }
    public Dictionary<string, string> SelectedCustomProperties { get; set; }

    #endregion

    #region Constructors

    public SearchViewModel()
    {
        //Create the SelectedCustomProperties list and pre-populate with a blank item for each CustomPropertyType
        SelectedCustomProperties = new Dictionary<string, string>();
        foreach (CustomPropertyType cpt in Core.GetCustomPropertyTypes())
        {
            SelectedCustomProperties.Add(cpt.CustomPropertyTypeId, string.Empty); 
        }
    }

    #endregion
}

Controller:

public ActionResult Search(int searchId)
{
    var svm = new SearchViewModel();

    //Load selected custom property ids for this search
    if ( searchId > 0 )
    {
        Search s = Core.GetSearch(searchId);
        foreach ( CustomPropertyType cpt in Core.GetCustomPropertyTypes()) )
        {
            int cpid = s.GetBasicSearchCustomPropertyId(cpt.CustomPropertyTypeId);
            if ( cpid > 0 )
            {
                //NB assumes entries already present (i.e. were created in the constructor)
                svm.SelectedCustomProperties[cpt.CustomPropertyTypeId] = cpid.ToString();
            }
        }
    }

    //Load lists of all custom property select lists so the view can just dynamically use whichever ones it wants
    svm.CustomPropertySelectLists = Core.GetSelectListsForAllCustomPropertyTypes();

    return View(svm);
}

And then in the view:

@using (Html.BeginForm())
{
    <fieldset>
        <div class="row">
            <div class="col">
                @Html.DropDownListFor(m => m.SelectedCustomProperties["Sector"], Model.CustomPropertySelectLists["Sector"], "Sector", new { @class = "browser-default" })
            </div>
            <div class="col">
                @Html.DropDownListFor(m => m.SelectedCustomProperties["Location"], Model.CustomPropertySelectLists["Location"], "Location", new { @class = "browser-default" })
            </div>
        </div>
    </fieldset>
}

This all works in terms of populating the dynamically defined drop down lists. We could even dynamically define which drop down lists to render at run time by looping over custom property types which have been defined to appear in certain parts of the system and/or for certain entities using configuration stored elsewhere in the system.

However, the selected value for the drop down lists is not getting picked up, presumably because it is trying to bind to something like m => m.SelectedCustomProperties["Sector"] rather than to a scalar variable property.

I realise that in our ViewModel we could have something like:

public string SelectedCustomPropertyIdSector { get; set; }

Then populate SelectedCustomPropertyIdSector in the controller and then bind to the drop down lists with m => m.SelectedCustomPropertyIdSector , but this would somewhat undermine the dynamic nature of the custom properties in the system as we'd have to be hard coding properties to the ViewModel/Controller depending on the use.

Ideally, we want to be able to write generic, reusable models and controller code which is only concerned with our "CustomProperty" entities in the database, and then have the views specify the specific custom properties to use by referencing the custom property type ids in the view markup (and/or by dynamically deciding which drop down lists to render at run time).

This will only be possible if we can get the DropDownListFor property to bind to something in a dynamically generated list (referenced by custom property type id), rather than a scaler variable as is usually the case, but this doesn't seem to be possible?

Answer 1

I'm relatively new to MVC, but in my experience the Drop Down Lists want to update a well known property of the view model, the scalar SelectedCustomPropertyIdSector you mentioned.

Have you tried including SelectedCustomProperties as a HiddenFor to make sure the list itself gets back to the action after post?

It's possible that it's not working because the view model doesn't remember the list after the page is rendered, and without the scalar variable to attach to that may be the issue.

Answer 2

It looks as if you have a problem with the Model Binding. The Html that is rendered cannot be bound back into the model when you post it.

You might want to take a look at thisblog post http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

I've not bound items to a Dictionary myself, but have to an IEnumerable<Object> . You could try creating a CustomPropertyViewModel

public class CustomPropertyViewModel
{
    public string Filter { get; set; }
    public string SelectedValue { get; set; }
    public SelectList SelectList { get; set; }
}

Your SearchViewModel would contain

IEnumerable<CustomerPropertyViewModel> CustomProperties { get; set; }

and you would render in in the view something like

@for (int i = 0; i < Model.CustomPropeties.Count(); i++)
{
    @Html.HiddenFor(x => Model.CustomProperties[i].Filter
    @Html.DropdownListFor(x => Model.CustomProperties[i].SelectedValue,
        Model.CustomProperties[i].SelectList)
}

Answer 3

You can try to use @Html.DropDownList helper instead of @Html.DropDownListFor

 @Html.DropDownList("Sector", Model.CustomPropertySelectLists["Sector"], "Sector", new { @class = "browser-default" })

This way in the submitted value will be available in Postback action as Request.Form["Sector"]

Then you need to map it to your properties. So something like that should work( I assume that you can write some code to it automatically because you have your custom property names):

SelectedCustomProperties["Sector"] = Request.Form["Sector"]

Edit You can automate dropdown generation and sequential model binding:

@for(var key in Model.CustomPropertySelectLists.Keys)
{
    @Html.DropDownList(key , Model.CustomPropertySelectLists[key], key , new { @class = "browser-default" })
}

in your postback action:

var types = Core.GetCustomPropertyTypes()
foreach(var t in types)
{
    if(Request.Form.ContainsKey(t.CustomPropertyTypeId))
    {
        SelectedCustomProperties[t.CustomPropertyTypeId] = Request.Form[t.CustomPropertyTypeId]
    }
}