how to fill 2nd combobox with asp.net mvc ajax

Question

I am using aspnet MVC 5 in Visual Studio 2014.1 I have a combobox that is filled with data from the database:

ViewBag.Brans = new SelectList(db.Brans.OrderBy(m => m.Ad), "No", "Ad");
@Html.DropDownList("Brans", null, htmlAttributes: new { @class = "form-control" })

Then i have another combobox. and i want to fill that combobox after i select an option from first combo. Its like selecting country from the first combo. then cities will appear in the second one.

Does any of you know how to do this?

mvc cascading dropdownlist

user3559349
– user3559349

2014-12-19 11:16:56 +00:00
Commented Dec 19, 2014 at 11:16 — user3559349
– user3559349, Commented Dec 19, 2014 at 11:16
stackoverflow.com/questions/25008617/…

SBirthare
– SBirthare

2014-12-19 11:18:09 +00:00
Commented Dec 19, 2014 at 11:18 — SBirthare
– SBirthare, Commented Dec 19, 2014 at 11:18

fly_ua · Accepted Answer · 2014-12-19 11:20:43Z

One of the options is to to make Ajax request to action which will return your list items

  public virtual JsonResult GetCountryStates()
        {
            return Json(
                new
                {
                    new List<SelectListItem>() {YOUR ITEMS HERE}
                });
        }

Then in your Ajax callback body put code like that

function (data) {
                //var selValue;

                data = $.map(data, function (item, a) {
                    if (item.Selected) {
                        selValue = item.Value;
                    }
                    return "<option value=\"" + item.Value + "\" " + (item.Selected ? "selected" : "") + ">" + item.Text + "</option>";
                });
                $('statesSelect').html(data.join(""));
                $('statesSelect').val(selValue);
            },

kishan Thakar · Accepted Answer · 2014-12-19 12:16:26Z

0

@fly_ua : Good way of populating depending dropdown But what if we post form and on selected value we fetch next dropdown data from our controller and again reload the form? This might be the secure way rather than doing AJAX call.

answered Dec 19, 2014 at 12:16

kishan Thakar

1111 silver badge6 bronze badges

1 Comment

fly_ua Over a year ago

Hi Kishan, Possibly yes, but in my case you are already authenticated in members section and all Actions in MVC contains [Authoroze] and Role check. So as i wrote - this is only one of the possible ways.

kishan Thakar · Accepted Answer · 2014-12-19 12:34:52Z

0

$('#@Html.Encode(Html.IdFor(x => x.YourProperty))')on("Change", function (event) {
    event.preventDefault();
    var id = $(this).val();

    $.ajax({
        url: '@Url.Action("ActionName", "ControllerName")',
        type: "GET",
        data: {
            id: id,
        },
        success: function (result) {
            $('#@Html.Encode(Html.IdFor(x => x.SecondDropDownProperty))').html(result)
        }
    });
});

create one view with dropdown and rendor razor JSON with this view

By doing this you will create generic dependent dropdown list.

answered Dec 19, 2014 at 12:34

kishan Thakar

1111 silver badge6 bronze badges

Collectives™ on Stack Overflow

how to fill 2nd combobox with asp.net mvc ajax

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related