Load select via ajax

Question

I am trying to load a select via ajax, following as I am doing: HTML:

<select id="cbplanos" class="form-control"></select>

Controller Code:

public async Task<IActionResult> Load()
    {
        var lista = _context.PlanosServicos
        .Select(x => new { x.Id, x.Descricao });

        return Json(new { Resultado = lista });

}

And here’s the AJAX code:

function ListarItens() {
    var url = "/PessoasServicos/Load";

    $.ajax({
        type: "get",
        url: "/PessoasServicos/Load",
        data: { tipos: $("#cbplanos").val() },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            var selectbox = $('#cbplanos');
            $.each(data, function (i, d) {
                selectbox.append('<option value="' + d.Id + '">' + d.Descricao + '</option>');
            });
        }
    });
}

But he’s not bringing me values. What I’m going through wrong?

Answer 1

When you pass the Json new Upshot, the field that will have the values of the list. Just do it this way:

public async Task<IActionResult> Load()
{
    var resultado = _context.PlanosServicos
    .Select(x => new { x.Id, x.Descricao });

    return Json(resultado);    
}

In the script:

function ListarItens() {
    var url = "/PessoasServicos/Load";
    var selectbox = $('#cbplanos');
    selectbox.html("<option value='0'>Selecione</option>");
    $.ajax({
        type: "get",
        url: url,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (data) {

            $.each(data, function (i, d) {
                selectbox.append('<option value="' + d.id + '">' + d.descricao + '</option>');
            });
        }
    });
}