One, Download harvest chosen from GitHub
https://github.com/harvesthq/chosen/
Second, in the page reference
@using (Html.BeginForm ()) {<fieldset> <legend>multi-select demo</legend> <divclass="Editor-field">@Html. ListBox ("countries", viewbag.countrieslist asMultiselectlist,New{@class="Chzn-select", Data_placeholder="Choose Countries ..." }) <p> <input type="Submit"Value="Save"/> </p> </div> </fieldset>}<script src="@Url. Content ("~/scripts/chosen.jquery.js")"></script><link href="@Url. Content ("~/content/chosen.css")"Rel="stylesheet"Type="Text/css"/><script> $(". Chzn-select"). Chosen ();</script>
View Code
Third, Controller code
[HttpGet] PublicActionResult multiselectcountries () {viewbag.countrieslist= Getcountries (New string[] {"1","2" }); returnView (); } [HttpPost] Publicactionresult multiselectcountries (formcollection form) {viewbag.youselected= form["countries"]; stringSelected = form["countries"]; Viewbag.countrieslist= Getcountries (selected. Split (',')); returnView (); } PrivateMultiselectlist Getcountries (string[] selectedvalues) {List<Country> countries =NewList<country> { NewCountry () {Id =1, name="states" }, NewCountry () {Id =2, name="Canada" }, NewCountry () {Id =3, name="UK" }, NewCountry () {Id =4, name=" China" }, NewCountry () {Id =5, name="Japan" } }; return NewMultiselectlist (Countries,"Id","Name", selectedvalues); }
View Code
JQuery Plugin Serials (1)---Harvest Chosen