How to use multiple select in mvc 4?

Question

I want to use multiple select in Chosen. I have Skill model like,

public class Skill 
    {
        public int Id { get; set; }
        public string Name { get; set; }        
    }

This works in my application:

    <select data-placeholder="Choose a Country..." class="chzn-select" multiple >
           <option value=""></option>
           <option value="United States">United States</option>
           <option value="Albania">Albania</option>
           <option value="Algeria">Algeria</option>
   </select>

I want to replace Countries data with my data. In controller i write:

        var list = MyService.LoadAllSkills();
        ViewBag.Skills = new MultiSelectList(list, "Id", "Name");

In view:

@Html.ListBox("Name", ViewBag.Skills as MultiSelectList,
              new { @class = "chzn-select" } )

View result of @Html.ListBox() and @Html.DropDownList() is not like <select>

I get so result:

But, I want to get result as

How can I change Chosen sample?

Answer 1

The only difference I can see between the hardcoded example (which you stated that is working) and the one you generate with the ListBox helper is the absence of the data-placeholder attribute. So:

@Html.ListBox(
    "Countries", 
    ViewBag.Skills as MultiSelectList,
    new { @class = "chzn-select", data_placeholder = "Choose a Country..." } 
)

This should at least generate the same markup as what you said is working. If it doesn't work then probably you haven't setup the plugin correctly or you have some other javascript errors. Read the documentation of the plugin about how it should be setup.