data-placeholder in MVC3

I ran into an interesting problem this evening with a very quick fix. I’m using the very neat chosen Javascript plugin (link) to add some aesthetic and functional sugar to a website’s existing dropdowns.

Anyhow, adding default text support (e.g. “Please choose an option”) to a multiple select dropdown is achievable using data-placeholder like this:

<select data-placeholder="Choose a country..." style="width:350px;" multiple class="chzn-select"">

Problem is, I am using ASP.NET MVC’s helper syntax to create my dropdownlists and “data-placeholder” is invalid syntax due to the dash character. The following does not work:

@Html.DropDownListFor(m => m.SelectedProductIDs, Model.AvaliableProducts.ToSelectList("ID","Name"), new { @class = "chzn-select", data-placeholder="Please select a product" })

Happily, Microsoft pulled a rabbit out of the hat and as of MVC3 underscores in html attribute properties are automatically converted to dashes, meaning that this:

@Html.DropDownListFor(m => m.SelectedProductIDs, Model.AvaliableProducts.ToSelectList("ID","Name"), new { @class = "chzn-select", data_placeholder="Please select a product" })

will generate something like this, with the place_holder converted to place-holder

<select class="chzn-select chzn-done" data-placeholder="Please select a product" id="SelectedProductIDs" name="SelectedProductIDs" style="display: none; ">