使用CHOSEN在MVC ASP.Net中可搜索的DropDownList

时间:2019-02-11 08:46:21

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

我的DROPDOWNLIST无法搜索,这是正常的下拉列表。您可以在图像上看到我的create视图。我使用了选择的插件。我将css和js文件添加到_Layout中。它需要任何功能吗?

Create.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 () {

1 个答案:

答案 0 :(得分:0)

您可以像这样指定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)