Dropdownlist With Java Script

I hope developers can support me, I have minimal experience in the use of java script. After investigating and several attempts, I was able to load a dropdownlist with data from a

Solution 1:

If I understand your question correctly, I think you need to name the fields of the object you are creating with the Linq expression, so that it would look something like this:

[HttpPost]
    public ActionResult GetAsentamiento(string CP)
    {
        var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP selectnew { id = p.IdCodigoPostal, value = p.Asentamiento}).ToList();
        SelectList lista = new SelectList(drop2);
        ViewBag.lista = lista;
        return Json(ViewBag.lista);
    }

Here are a few examples: https://code.msdn.microsoft.com/LINQ-to-DataSets-09787825#SelectAnonymousTypes1

Then you could access those fields from you javascript with data[i].id and data[i].value. I hope this helps.

Solution 2:

I suspect your issue is around pulling the data from the API result. You're setting the a new property in the ViewBag, then returning the ViewBag property. This really shouldn't be required, and you should instead just return your list, list so (Note: and SelectItemList has a property called "Items" which contains all items you've added):

 [HttpPost]
        public ActionResult GetAsentamiento(string CP)
        {
            var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP selectnew { p.IdCodigoPostal,p.Asentamiento}).ToList();
            SelectList lista = new SelectList(drop2);
            return Json(lista.Items);
        }

This should return just a nice list of ListItems. You could also just change your jQuery to loop through the items property, like so:

<script>functionFillOption() {
        varCP = $('#txtCP').val();
        $.ajax({
            type: "Post",
            url: "/Home/GetAsentamiento",
            data: { CP: CP },
            dataType: 'json',
            success: function (data) {
                $("#Asentamientos").empty();
                for (var i = 0; i < data.Items.length; i++) {
                    $('#Asentamientos').append('<option value=' + data.Items[i].Value + '>' + data.Items[i].Text + '</option > ');
                }
            }
        });
    }
</script>

Solution 3:

Thanks to all, the code works as follows

Controller

 [HttpPost]
    public ActionResult GetAsentamiento(string CP)
    {
        var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP selectnew { Value = p.IdCodigoPostal, Text= p.Asentamiento }).ToList();
        SelectList lista = new SelectList(drop2);
        return Json(lista.Items);
    }

Script

<script>functionFillOption() {
    varCP = $('#txtCP').val();
    $.ajax({
        type: "Post",
        url: "/Home/GetAsentamiento",
        data: { CP: CP },
        dataType: 'json',
        success: function (data) {
            $("#Asentamientos").empty();
            for (var i = 0; i < data.length; i++) {
                $('#Asentamientos').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option > ');
            }
        }
    });
}