尝试在 MVC 5 Razor 页面中实现 bootstrap.chosen

如何解决尝试在 MVC 5 Razor 页面中实现 bootstrap.chosen

我已经在我的网络项目中安装了 bootstrap.chosen 并且正在尝试实现它。

捆绑配置

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

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

_Layout.cshtml

(Top) @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")

(Bottom) @Scripts.Render("~/bundles/jquery")
         @Scripts.Render("~/bundles/bootstrap")
         @RenderSection("scripts",required: false)

在我的剃刀页面中，我有以下内容

@Html.DropDownListFor(model => model.HASSForm.HASS_district_Id,new SelectList(Model.HASSdistricts,"Id","ENGL_NAME"),new { htmlAttributes = new { @class = "form-control chosen-select" } })

在页面底部我有以下内容

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

我希望下拉菜单会显示一个搜索框，但我只能得到常规的下拉列表。

如果有人能帮助我，我将不胜感激。

解决方法

我建议从头开始这个项目，有一个有用的video。

我将示例解决方案推送到 bitbucket。