Как сделать DropDownList с возможностью поиска в asp.net mvc

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» этому представлению (этот viewbagотправляет список providID 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. Он более полезен, удобен для пользователя и имеет отличную структуру пользовательского интерфейса.

Он имеет множество функций, которые вы ищете. Пожалуйста, перейдите по следующей ссылке для более подробной информации

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

2. Другой вариант - это Select2, это jQuery, и он даст вам привлекательный вид:

https://select2.org

Ура !!