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

Posted 2023-03-21

【中文标题】在 MVC 5 Razor 页面中实现 bootstrap.chosen

【英文标题】：Tring to implement bootstrap.chosen in MVC 5 Razor Page

【发布时间】：2021-08-16 05:57:57

【问题描述】：

我已经在我的 web 项目中安装了 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>

我希望下拉菜单可以通过搜索框呈现，但我只能得到常规的下拉列表。

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

【参考方案1】：

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

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