如何在 asp.net mvc 中制作可搜索的 DropDownList

Question

我正在做一个 asp.net mvc 项目，我有如下操作：

  public ActionResult RegisterCustomer()
    {
        ViewBagInput();
        ViewBag.ProvinceId = new SelectList(db.Province, "ID", "Title");
        if (User.Identity.Name != null)
        {
            var user = db.Users.SingleOrDefault(u => u.Username == User.Identity.Name);
            Role.RoleTitle = user.Roles.RoleTitle;
            DataLayer.ViewModels.User.FullName = user.FirstName + " " + user.LastName;
        }
        return View();
    }

此操作返回以下视图并将“ViewBag.ProvinceId”发送到此视图（此视图包将省 ID 列表和 ProvinceTitle 发送到此视图，以便在省的 DropDownList 中显示此下拉列表的 Id 为“ProvinceId”）：

@using (Ajax.BeginForm("RegisterCustomer", "Customer", FormMethod.Post, new AjaxOptions()
            {
                OnSuccess = "success",
                UpdateTargetId = "listUsers"

            },
                new { @Id = "theform" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)
                <div class="form-group has-feedback">
                    @Html.EditorFor(model => model.identificationNo, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.identificationNo) } })
                    @Html.ValidationMessageFor(model => model.identificationNo, "", new { @class = "text-danger" })
                </div>

                <div class="form-group has-feedback">
                    @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.FirstName) } })
                    @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                </div>
                <div class="form-group has-feedback">
                    @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.LastName) } })
                    @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                </div>
                  <div class="form-group">
                    @Html.DropDownList("ProvinceId", null, "- choose a province- ", htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.ProvinceId, "", new { @class = "text-danger" })
                </div>

                <div class="form-group has-feedback" id="divcities">
                    @Html.DropDownListFor(model => model.CityId, Enumerable.Empty<SelectListItem>(), "- choose a city -", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.CityId)
                </div>

             }

我在这个视图中有以下 jquery ：

@section Scripts{
<script type="text/javascript">

    $(function() {
        $("#ProvinceId").change(function() {
            debugger;
            $.ajax({
                url: "/Customer/GetCities",
                data: { stateid: $("#ProvinceId").find(":selected").val() },
                type: "Post",
                dataType: "Html",
                success: function(result) {
                    $("#divcities").html(result);
                },
                error: function() {
                    alert("error!");
                }
            });

        });
    });

</script>

此 jquery 调用以下操作：

 public ActionResult GetCities(int stateid)
    {
        ViewBag.CityId = new SelectList(db.City.Where(p => p.ProvinceID == stateid), "ID", "Title");
        return PartialView("CityPartialViewForCustomer");
    }

此操作返回以下部分视图：

    @model DataLayer.ViewModels.CustomerViewModel
<div class="control">
    @Html.DropDownList("CityId", null, "- Choose a City ... -", new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.CityId)
</div>

我的第一个问题是这些占位符不允许我输入这个 DropDownList 和 DropDownListFor，我该如何解决这个问题？ 第二个问题也是最重要的问题是 DropDownList 和 DropDownListFor 不可搜索。我该如何解决？

Answer 1

看看 Select2，它是 jQuery，并为您提供开箱即用的搜索功能： https : //select2.org/data-sources/ajax

Answer 2

我为此添加了两种方法，您可以选择其中任何一种：

1.检查下面选择的jQuery插件。 它更有用，用户友好，并且具有各种漂亮的 UI 结构。

它具有您正在寻找的许多功能。 请通过以下链接了解更多详情

http://harvesthq.github.io/chosen/

2.其他选项是 Select2，它是 jQuery，它将为您提供触手可及的外观和感觉：

https://select2.org

干杯！！