How to use multiple select in mvc 4?

问题:

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?

回答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.

回答2:

as other dudes mentioned, it seems your problem cause is not server-side (razor), it's actually client-side (most probably your Jquery plugin initialization).

probably when the plugin initialization called the html DOM is not generated yet, put your plugin initialization script at the end of the body or inside $(document).ready() and don't forget to take a look at the console to see if there is any errors

happy coding