2. Algorithm
  3. javascript - How can Make a searchable DropDownList in asp.net mvc - Stack Overflow

javascript - How can Make a searchable DropDownList in asp.net mvc - Stack Overflow

admin2025-04-19  0

I'm doing an asp mvc project and I have an action as below:

  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();
    }

this action returns the below view and sends the "ViewBag.ProvinceId" to this view(this viewbag sends the list of provinceID an ProvinceTitle to this view for showing in DropDownList for province that the Id of this dropdown is "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>

             }

And I have below jquery in this view :

@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>

This jquery calls below action:

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

and this action returns below 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>

My first problem is that these place holders won't let me to type in this DropDownList and DropDownListFor and how can I solve this problem? The second problem and most important problem is that the DropDownList and DropDownListFor are not searchable.How can I solve this?

I'm doing an asp mvc project and I have an action as below:

  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();
    }

this action returns the below view and sends the "ViewBag.ProvinceId" to this view(this viewbag sends the list of provinceID an ProvinceTitle to this view for showing in DropDownList for province that the Id of this dropdown is "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>

             }

And I have below jquery in this view :

@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>

This jquery calls below action:

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

and this action returns below 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>

My first problem is that these place holders won't let me to type in this DropDownList and DropDownListFor and how can I solve this problem? The second problem and most important problem is that the DropDownList and DropDownListFor are not searchable.How can I solve this?

  • javascript
  • c#
  • jquery
  • asp-mvc
Share Improve this question edited Jul 4, 2019 at 19:35 SalShah asked Jul 3, 2019 at 7:32 SalShahSalShah 431 gold badge2 silver badges8 bronze badges 2
  • Please do via jquery. refer this : stackoverflow./questions/17900527/… – Kalpesh Boghara Commented Jul 3, 2019 at 7:35
  • There is a very good plugin called MagicSearch that uses JQuery to achieve what you want. I have posted the answer here on how to use this plugin: stackoverflow./questions/53111915/… – Rahul Sharma Commented Jul 3, 2019 at 7:40
Add a ment  | 

2 Answers 2

Reset to default 1

Have a look at Select2, it's jQuery and gives you search capability out of the box: https://select2/data-sources/ajax

I have added two ways for this you can choose any one of them :

1. Check the below chosen plugin for jQuery. Its more useful, user friendly and has vary nice UI structure.

It has the many feature which you are looking for. Please go through the following link for more details

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

2. Other option is Select2, it's jQuery and it will provide you the reach look and feels:

https://select2

Cheers !!

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745066660a283028.html

javascriptHow can Make a searchable DropDownList in aspnet mvcStack Overflow

最新回复(0)