1

The controller´s method:

[HttpGet]
public ActionResult GetItem()
{
    List<SelectListItem> drop = new List<SelectListItem>
    {
        new SelectListItem{Value="Superman",Text="Superman"},
        new SelectListItem{Value="Batman",Text="Batman"},
        new SelectListItem{Value="Wonderwoman",Text="Wonderwoman"}
    };
    return Json(drop);
}

The HTML´s select:

<select id="ddlCustomers"></select>

The AJAX´s call:

var ddlCustomers = $("#ddlCustomers");
ddlCustomers.empty().append('<option selected="selected" value="0" disabled = "disabled">loading.........</option>');
$.ajax({
    type: "GET",
    url: "/Usuario/GetItem",
    dataType: 'JSON',
    contentType: "application/json",
    success: function (data) {
        alert(data);
        for (var i = 0; i < data.length; i++) {
            $('#ddlCustomers').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option > ');
        }
    }
});

It´s hitting the controller but returning/populating the select as UNDEFINED.

Any helps ? Thank you!

please note: this is a WEB APP not WEB API.

Improve this question
2
  • 1
    Have you checked the response of the ajax call ? In chrome you can press F12, in order developer tools to appear. Then refresh your page and at the Network tab you should see the ajax call request and response. What the response contains ? Commented Nov 17, 2018 at 14:21
  • @Christos the response contains: [{disabled: false, group: null, selected: false, text: "Superman", value: "Superman"},…] 0: {disabled: false, group: null, selected: false, text: "Superman", value: "Superman"} 1: {disabled: false, group: null, selected: false, text: "Batman", value: "Batman"} 2: {disabled: false, group: null, selected: false, text: "Wonderwoman", value: "Wonderwoman"} Commented Nov 17, 2018 at 14:30

2 Answers 2

Reset to default
0

JS is case sensitive, try

$('#ddlCustomers').append('<option value=' + data[i].value + '>' + data[i].text + '</option > ');
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Based on the response you get, you should change this:

'<option value=' + data[i].Value + '>' + data[i].Text + '</option > '

with this:

'<option value=' + data[i].value + '>' + data[i].text + '</option > '

By the way you don't have to select HTML element with id ddlCustomer in each step of your for loop. You can use ddlCustomers variable who holds a reference to the element you want to append the options you have

 for (var i = 0; i < data.length; i++) {
     ddlCustomers.append('<option value=' + data[i].value + '>' + data[i].text + '</option > ');
 }
Improve this answer

5 Comments

Thank you, it´s working now! You´re the man! Anyway, is there a better and safety approach ?
@BerBar you are welcome. I am glad that I helped. It's ok.
is this GET method and call the safety way avoiding be used by third parties?
Nope, if someone check the network traffic, as you debugged the problem using developer tools, fairly easily would see the corresponding call. Then by using the corresponding absolute URL http(s)://domainname/Usuario/GetItem would fetch the corresponding data. Apparently, we are speaking for users we see your application in a public network. If you deploy your application in a private network and allow access only to resources in this network, this can be done only from users inside this private network.
I see the point. I will do a ressearch regarding this matter. Thank you once again!