Fill dependent drop down list by using json

Question

I have two drop down list that second one fill by on-change of first one. I using json for ,but it doesn't work. here is my code:

        <div class="col-md-6">
            @Html.LabelFor(model => model.Counterparts.First().Name, new {@class = "control-label"})
            @Html.DropDownListFor(m => m.CounterpartId, new SelectList(Model.Counterparts, "Id", "Name"), "select", new {@id = "SelectDepartment", onchange = "getData();"})
        </div>
     <div class="col-md-6">
            @Html.LabelFor(model => model.Accounts.First().Name, new { @class = "control-label" })
            @Html.DropDownListFor(m => m.AccountId, new SelectList(Model.Accounts, "Id", "Name"), "select", new { @class = "form-control" })

        </div>

       <script type="text/javascript" language="javascript">
            function getData() {

                var e = document.getElementById("SelectDepartment");
                var counterpartid = e.options[e.selectedIndex].value;
                alert('/ProcessCounterpart/GetCounterpartAccounts/' + counterpartid.toString());
                $.getJSON('/ProcessCounterpart/GetCounterpartAccounts/' + counterpartid.toString(), function (data) {
                    alert(data);
                });

            }
        </script>


  public JsonResult GetCounterpartAccounts(int id)
    {

        var accounts = _accountService.GetAllAccountByCounterpartId(id);
        return Json(accounts,JsonRequestBehavior.AllowGet);
    }

@Andrei: It must return accounts that got in GetCounterpartAccounts method and fill in second drop-down, but doesn't work! — user3698913, May 10 '16 at 10:26
Your code currently is not filling up any drop downs, but merely requests json and alerts output. Does that work? Any errors you see? "Doesn't work" is too vague of a description of a problem — Andrei, May 10 '16 at 10:40

score 0 · Answer 1 · edited May 23 '17 at 10:28

I suggest that you research ways on how to implement Cascading DropdownLists in MVC. There are many articles online such as:

Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#

http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/

I'd go the JQuery route though; as it is the easiest one. The idea here is to populate both dropdowns and then use JQuery to hide or disable the options in the Child dropdown (i.e., the second one) based on selection in the Parent (i.e., the first one).

score 0 · Accepted Answer · answered May 10 '16 at 14:35

I would personally suggest to use a selectize plugin. It has onchange event that fires each time you change the drop down. You can also fill options via ajax call which is what are you looking for. Here is an example:

  $("#countriesDropDown").selectize({
         load: function(query, callback) {
               $.get("api/getCountries").done(function (data) {
                     if(data !== '') { callback(data) })
                .fail(function(xmlHttpRequest, textStatus, errorThrown)  {});
         },
         onChange: function(value) { loadCitylistByCountry(value); }
  });

  var $citiesSelectize = $("#citiesDropDown").[0].selectize;
    
  
  function loadCitylistByCountry(value) {
    $citiesSelectize.load(function(callback) {
      $.get("api/getCitiesByCountry?coutryId=" + value).done(function (data) {
                     if(data !== '') { callback(data) })
                .fail(function(xmlHttpRequest, textStatus, errorThrown)  {});
      });
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="countriesDropDown" type="text" />
<input id="citiesDropDown" type="text" />

Please note that this is just an example. This code might not even work. This is to only show you how you can use it. You can go to their site there you will find a lot of examples as well as the api. Hope this will help

Fill dependent drop down list by using json

2 Answers2