JQuery Plugin serials (1)--- Harvest Chosen
一、Download harvest chosen from github
https://github.com/harvesthq/chosen/
二、在页面引用
@using (Html.BeginForm()) { <fieldset> <legend>Multi-Select Demo</legend> <div class="editor-field"> @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList , 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>
三、Controller code
[HttpGet] public ActionResult MultiSelectCountries() { ViewBag.Countrieslist = GetCountries(new string[] { "1","2" }); return View(); } [HttpPost] public ActionResult MultiSelectCountries(FormCollection form) { ViewBag.YouSelected = form["Countries"]; string selected = form["Countries"]; ViewBag.Countrieslist = GetCountries(selected.Split(‘,‘)); return View(); } private MultiSelectList GetCountries(string[] selectedValues) { List<Country> countries = new List<Country> { new Country() { Id = 1, Name= "United States" }, new Country() { Id = 2, Name= "Canada" }, new Country() { Id = 3, Name= "UK" }, new Country() { Id = 4, Name= "China" }, new Country() { Id = 5, Name= "Japan" } }; return new MultiSelectList(countries, "Id", "Name", selectedValues); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。