使用 CHOSEN 在 MVC ASP.Net 中搜索 DropDownList答案

【问题标题】：Searchable DropDownList in MVC ASP.Net using CHOSEN使用 CHOSEN 在 MVC ASP.Net 中搜索 DropDownList
【发布时间】：2019-07-04 17:19:06
【问题描述】：

我的 DROPDOWNLIST 不可搜索，它是正常的下拉列表。您可以在图像上看到我对创建的看法。我使用了选择的插件。我将 css 和 js 文件添加到 _Layout。需要什么功能吗？

创建.cshtml

 @model StockControl.Models.EntityFramework.IncomingProduct

    @{
        ViewBag.Title = "Create";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <h2>Add new product</h2>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.materialId, "Material Name", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                    @Html.DropDownList("materialId", null, htmlAttributes: new { @class = "form-control chosen" })
                    @Html.ValidationMessageFor(model => model.materialId, "", new { @class = "text-danger" }) 
            </div>
        </div>
}   
    @section scripts{
    <script>
        $(function () {
            $(".chosen").chosen();
        });
    </script>
    }

_Layout.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
        <link href="~/Content/chosen.min.css" rel="stylesheet" />
</head>
<body>
    @Html.Partial("_Navbar")
    <div class="container">
        @RenderBody()
    </div>

    @RenderSection("scripts", false)
    <script src="~/Scripts/chosen.jquery.min.js"></script>
</body>
</html>

View of create

提前致谢。

Errors(At create 109 is $(function () {

【问题讨论】：

标签： asp.net asp.net-mvc model-view-controller

【解决方案1】：

您可以像这样指定chosen 类：

 @Html.DropDownList("materialId", null, htmlAttributes: new { @class = "form-control chosen" })

另外，请确保您在 Layout.cshtml 中引用了 chosen 插件。使用浏览器开发工具检查任何 javascript 错误，方法是按浏览器上的 F12 键，然后刷新页面

更新

在 RenderSection("scripts") 之前包含 jquery 和选择的插件引用

 <script src="~/Scripts/jquery.min.js"></script>
 <script src="~/Scripts/chosen.jquery.min.js"></script>
 @RenderSection("scripts", false)

【讨论】：

您是否检查过开发者工具是否有任何错误？此外，检查下拉 html 以确保呈现 chosen css 类。
$("#chosen").chosen(); 应该是 $(".chosen").chosen();，因为您在下拉列表中添加了 chosen 类而不是 id。
我更新了，但还是不行。当我点击 F12 时，我还在我的问题中添加了错误
错误$ is not defined可能是由于缺少jquery库或由于jquery库引用引起冲突。我注意到在您的_Layout.cshtmt 中您没有 jQuery 库引用，因此请包含它。检查更新的答案
非常感谢！！完成。