ASP.Net Core MVC Ajax json response

Question

I have created a view where when the user selects 2 of the dropdown lists values, an AJAX method is kicked off to populate an additional dropdown list's values

The callback triggers, however I cannot work with the response.

I am probably doing more than one thing wrong, so any help would be greatly appreciated. I am very new to Asp.Net core mvc

My Controller code (simplified - parameters are being used and are working):

public IActionResult GetCodes(string location, string xType)
{
    return Json(new Dictionary<string, string> {
    { "","" },
    { "Option1","120" },
    { "Option2","123" }
    });        
}

My jquery script on the view:

var ddl1val = $("#Location :selected").val().toLowerCase();
var ddl2val = $("#xType:selected").val().toLowerCase();
$.ajax({
    type: "GET",
    url: "/Ppl/GetCodes",          
    dataType: 'json',
    data: { location: ddl1val, xtype: ddl2val},
    success: function (data) {
        $("#ddlOptions").empty();

        var ops = '<option value=""></option>';

        alert(data); //returns [object Object]
        alert(data.Key); //returns undefined???

        //I need this to work
        for (var i = 0; i < data.length; i++) {
            ops += '<option value="' + data[i].Key + '">' + data[i].Value + '</option>';
        $("#ddlOptions").html(ops);
    }
}

console.log(data) shows:

{"": "", Option1: "120", Option2: "123"}

I am not restricted to use JSON return, but it is lighter than xml, so I would prefer using it

I cannot work with the response. Please show us an example response — LeBoucher
– LeBoucher, Commented Sep 25, 2019 at 9:22
console.log(data) shows {"": "", Option1: "120", Option2: "123"} — Arkaine80
– Arkaine80, Commented Sep 25, 2019 at 9:27

Rory McCrossan · Accepted Answer · 2019-09-25 09:33:19Z

2

Serialising a Dictionary<> to JSON will result in an object like this in your JS:

{
  "": "",
  "Option1": "120",
  "Option2": "123"
}

As such you should not use a for loop to enumerate it. As you're using jQuery you can use $.map() instead. Also note that you don't need to add the empty option as you include that in the response from the MVC endpoint. You also don't need to call empty() as you're overwriting the HTML of the select completely. Try this:

var data = {
  "": "",
  "Option1": "120",
  "Option2": "123"
}

// inside the success callback:
var ops = $.map(data, function(v, k) {
  return '<option value="' + v + '">' + k + '</option>';
});
$("#ddlOptions").html(ops);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlOptions"></select>

edited Sep 25, 2019 at 9:33

answered Sep 25, 2019 at 9:28

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arkaine80 Over a year ago

Thanks this works perfectly. I guess I need to learn how to use JSON properly

Collectives™ on Stack Overflow

ASP.Net Core MVC Ajax json response

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related