mvc harvest選中多選下拉列表

Question

我遵循了Rick Anderson的例子，但是我無法使其工作。我有原始的多選框，但沒有收穫選擇多選。

查看：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, new { htmlAttributes = new { @class = "form-control chosen-select", style="width:350px;" } }) 

視野下的是我的javascript：

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
<script type="text/javascript"> 
    $('.datepicker').datepicker(); 
    $(".chosen-select").chosen(); 
</script> 
} 

這是我列入BundleConfig.cs腳本：

public static void RegisterBundles(BundleCollection bundles) 
{ 
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
       "~/Scripts/jquery-{version}.js", 
       "~/Scripts/chosen.jquery.js" 
       )); 

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
       "~/Scripts/jquery.validate*")); 

    // Use the development version of Modernizr to develop with and learn from. Then, when you're 
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
       "~/Scripts/modernizr-*")); 

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
       "~/Scripts/bootstrap.js",      
       "~/Scripts/bootstrap-datepicker.js", 
       "~/Scripts/respond.js")); 

    bundles.Add(new StyleBundle("~/Content/css").Include(
       "~/Content/bootstrap.css", 
       "~/Content/datepicker.css", 
       "~/Content/chosen.css", 
       "~/Content/site.css")); 
} 

控制器：

private MultiSelectList GetClearances(string[] selectedValues) 
{ 
    return new MultiSelectList(db.Clearances.Where(c => c.Active == true), "ClearanceID", "ClearanceName", selectedValues); 
} 

// GET: CardKeys/Create 
public ActionResult Create() 
{ 
    ViewBag.Clearanceslist = GetClearances(null); 
    return View(); 
} 

我還想念什麼？

Answer 1

使100％確定對chosen.jquery.js腳本的引用是在參考jQuery腳本之後進行的，否則您選擇的插件將無法正常工作。

如果您的佈局很複雜並且由很多部分組成，我建議您通過瀏覽器開發工具或打開頁面的源代碼來檢查它。

另外請確保jQuery腳本沒有被多次加載。

---

，我會做的另一件事就是改變視圖代碼如下：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, new { @class = "form-control chosen-select", style="width:350px;" }) 

你有沒有在你的版本檢查所呈現的HTML？ 事情是這樣的：

<select htmlAttributes="{ class = form-control chosen-select, style = width:350px; }" id="Clearances" multiple="multiple" name="Clearances"> 
... 
</select> 

jQuery將不會用這種HTML的正確獲取的元素。

Answer 2

您已經在捆綁配置中正確地將文件添加到了捆綁包中，但您實際上在哪裏調用該捆綁包？

嘗試如下

@section Scripts { 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 

<script type="text/javascript"> 
$('.datepicker').datepicker(); 
$(".chosen-select").chosen(); 
</script> 
} 

Answer 3

事實證明，它無關的腳本，包括改變它。但是HTML渲染在這條線是有問題的：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, new { htmlAttributes = new { @class = "form-control chosen-select", style="width:350px;" } }) 

這條線會顯示HTML這樣的，這將導致無法正確工作選擇：

<select htmlAttributes="{ class = form-control chosen-select, style = width:350px; }" id="Clearances" multiple="multiple" name="Clearances"> 

後，我把它改爲：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, htmlAttributes : new { @class = "form-control chosen-select", style="width:350px;" }) 

現在，它完美的作品。