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”发送到此视图（此视图包将ProvinceID的省名列表发送到此视图，以在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");
    }

，此操作将在partialview下面返回：

    @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

干杯 !!

如何在ASP.NET MVC中制作可搜索的DropDownList

2 个答案: