How to correctly populate a drop down list via ajax and MVC controller

Question

I've searched quite a bit for this answer and can't find much that covers what I need.

I have some data stored in a db table I want to populate certain drop down lists with. On the document.ready I have an AJAX call to the controller requesting the data based on a parameter I send it. The controller returns the data as Json. I'm new to the process of Json so, figuring out what to with it once it returns is where I'm stuck.

I'm able display the data returned from the controller in an alert or console.log when it returns, so I know the right values are there, but I can't figure out how to populate the dropdown list with those values. All the data is, is about 5 to 10 ints. (not returned as ints, I know, but they're things like 65, 70, 2, 10, 11) I've tried some various options and nothing seems to work.

I can static the values in an array and that actually will populate the drop down list. I've tried populating that same array with the returned data, but no success that way. Here is the ajax call:

//Fill symbols drop down list
function returnSymbols(cc) {

var sendData = JSON.stringify({ 'ul': cc });
$.ajax({
    url: '/Trucking/returnSymbols',
    type: 'POST',
    contentType: 'application/json',
    data: sendData,
    success: function (data) {
        //alert('success');
        console.log('success, yes');
        alert(data);
        var numbers = [];
        var obj = jQuery.parseJSON(data);
       /* If I do this and static these, it does work 
          var numbers = [1, 2, 3, 4, 5]  */
        var option = '';
        for (var i = 0; i < numbers.length; i++) {
            option += '<option value="' + numbers[i] + '">' + numbers[i] + '</option>';
        }
        $('#ddlMcalSymbols').append(option); //fill ddl with these values. 

    },
    error: function () {
        //alert('Error');
        console.log('Error');
    }
});

}

To reiterate I have tried things like numbers.push(obj) or even. .push(data), but those aren't working. Since the controller returns a Json value I was under the impression I needed to parse that Json in order to do anything with it. Here is the controller if it helps at all:

    [HttpPost]
    public ActionResult returnSymbols(string ul)
    {
        List<Get_CIF_SymbolsVM> symbols;

        Guid newGuid = Guid.Parse(ul); //parse param as Guid

        using (TruckingDb db = new TruckingDb())
        {
            symbols = db.GetSymbols.ToArray().OrderBy(x => x.RID).Select(x => new Get_CIF_SymbolsVM(x)).ToList();

        }
        var syms = (from s in symbols
                    where s.UniqLineType == newGuid
                    select s.SymbolCode).Distinct();

        return Json(syms, JsonRequestBehavior.AllowGet);
    }

Any help would be greatly appreciated.

EDIT: Updating the process to explain a bit more.

Had some success, but it's still not correct.

Here is the ajax call. I changed just a few items. It brings back the correct data, but it displays all array items as one line. I need each value in the array as a single value in the drop down list.

 var sendData = JSON.stringify({ 'ul': cc });
$.ajax({
    url: '/Trucking/returnSymbols',
    type: 'POST',
    contentType: 'application/json',
    data: sendData,
    success: function (data) {
        //alert('success');
        console.log('success, yes');
        alert(data);
        var numbers = [];
        numbers.push(data);

        var option = '';
       //Added two for loops to show what I've tried. 
       for (var i = 0; i < numbers.length; i++) {
            option += '<option value="' + numbers[i] + '">' + numbers[i] + '</option><br>';
        }
        $('#ddlMcalSymbols').append(option);

       //Tried this option to fill ddl
        for (var i = 0; i < numbers.length; i++) {
            option = '<option value="' + numbers[i] + '">' + numbers[i] + '</option><br>';
            $('#ddlMcalSymbols').append(option);
        }
      //This Jquery foreach only returns one value to the ddl
      $.each(numbers, function (i, value) {
            console.log(value);
            option += '<option value="' + value[i] + '">' + value[i] + '</option>';
        });
        $('#ddlMcalSymbols').append(option); 

    },
    error: function () {
        //alert('Error');
        console.log('Error');
    }
});

It brings back the data, but in the drop down both of the for loops above fill the ddl as one long looking string. "61,62,64,66,70,71,72" .. They don't show up as single select values.

Answer 1

you can do something like this

In action method

[HttpPost]
public ActionResult getCicitesAction(int provinceId)
{
     var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'";

     return Content(String.Join("", cities));
}

The ajax call would be like this:

$("province_dll").change(function(){
    $.ajax({
         url: 'getCitiesController/getCitiesAction',
         type: 'post',
         data: {
               provinceId: provinceIdVar
         }
    }).done(function(response){
         $("cities_dll").html(response);
    }); 

Answer 2

I tried parts of the code, and it seems you are overlooking that the var numbers never acquires values.

I also usually prefer to create jquery objects rather than manually compile html; it is easier to develop this way. The code fails with more detail.

Something on the lines of:

var listEl=$('#ddlMcalSymbols');
for (var key in obj) {
   jQuery('<option value="' + obj[key] + '">' + obj[key] + '</option>').appendTo(listEl);
}

but in better order

Answer 3

Worked out a solution that while it functions, there is some odd behavior with the CSS of it. I'm using a multiselect drop down called bootstrap-select. Has a .js and .css file. I needed to fill the multiselect drop down with values from a db instead of hard-coding them in with the method.

I use a post ajax call to send a parameter to the controller which retrieves the values I need based on it. I don't know if it's the bootstrap-select or a limitation with multiselect, but it did not like displaying the Json data. My ajax call is already parsing the Json, so that wasn't it. After multiple attempts and trials I figured out the only thing that really works is with an int array. When I had the string array it would display everything as either one long string or only one value. Additionally, even now with it working as I would like, I have to reload the page every time I make a change to the .js file i'm working on. That screws up the bootstrap-select.css file. NO IDEA AS TO WHY. What happens is every 3 to 4 page reloads the values are outside the drop down list and smooshed together like a bunch of unreadable text. (See pic above) I press ctrl + shft + R to clear the chromes cached css and it goes back to how it should look and function. Long-winded, but true. Here is my ajax call with some comments, so you can see what I did. I'm sure there may be more elegant and straightforward ways of doing this, but it was an improvement on what I already had. Maybe it will help someone else.

function returnSymbols(cc) {

var sendData = JSON.stringify({ 'ul': cc });
$.ajax({
    url: '/Trucking/returnSymbols',
    type: 'POST',
    contentType: 'application/json',
    data: sendData,
    success: function (data) {
        var num = [];
        var num1 = [];

        //Push all returned values into num array
        $.each(data, function (index, value) {
            num.push(value);
        });
        console.log(num); // console out to ensure values have been pushed

        //convert the string array into an int array
        for (var i in num) {
            num1[i] = parseInt(num[i]);
        }
        console.log(num1); //conosle out to ensure values have parsed correctly
        fillddl(num1); // send int array to fill drop down func
    },
    error: function () {
        //alert('Error');
        console.log('Error');
    }
 });
}

Then the Function to actually send the values to the drop down list. Very similar to what I've found in other methods.

function fillddl(sym) 
{
  var s = '';
  for (var i = 0; i < sym.length; i++) 
  {
    s += '<option value="' + sym[i] + '">' + sym[i] + '</option>';
  }
   $(".ddlMcalSymbols").html(s);
}