2

He realizado un servicio rest realizado con C# con petición ajax con combo box, pero este a su vez no muestra datos, la cual tengo un objeto html 5 como objeto combo box la cual debe llenar datos de una ciudad, pero esta no muestra las ciudades que realice en el servicio rest, esa muestra como no definido en el objeto del combo box, la sintaxis undefined, anexo código fuente


            <div class="form-group has-feedback">

                <label>Ciudad</label>
                <select class="form-control" id="Ciudad" name="Ciudad" onchange="ValidarExisteCiudad()">
                    <option>Seleccione ...</option>
                    <option> </option>
                </select>

            </div>

function ValidarExisteCiudad() {
    var existeUsuario;   


        $.ajax({
            type: 'GET',
            url: "CargaCiudad",
            async: false,
            dataType: "json",
            success: function (data) {


                $.each(data, function (key, registro) {
                    $("#Ciudad").append('<option value=' + registro.IdCiudad + '>' + registro.Nombre + '</option>');
                });
            },  
            error: function (data) {
                alertify('Error.' + data.error.message);
                existeUsuario = false;
            }
        });

    return existeUsuario;

}

 [HttpGet]
        [AllowAnonymous]
        public async Task<IActionResult> CargaCiudad()
        {
            List<Cuidad> Items = await drHelpPrueba.Cuidad.ToListAsync();
            int Count = Items.Count();
            return Json(new { Items, Count });
        }

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

3
  • Creo que un dropdownlistfor te puede ayudar a simplificar tus select si usas mvc Commented el 18 jul. 2019 a las 7:07
  • te da undefined porque no existe el atributo IdCiudad puedes agregar tu JSON? Commented el 18 jul. 2019 a las 16:44
  • @NicolasOñate en .Net Core el uso de html helpers ya no es recomendado (aunque todavía se puede usar). Ahora es con un select/option con su propiedad asp-items="tu_select_list".
    – KodiakMx
    Commented el 18 jul. 2019 a las 16:46

2 respuestas 2

2

Tu ciclo each está buscando en data directamente, cuando tu lista está en los items de data (data.items). Por lo que con este cambio debería de funcionar:

$.each(data.items, function (index, value) {
     $("#Ciudad").append('<option value=' + value.idCiudad + '>' + value.nombre + '</option>');
});

*nota: fíjate en el cambio en el nombre de la propiedad de nombre también. Tú lo tenías con mayúscula inicial y debe de ser con minúscula.

0

También puede solucionar mediante el siguiente código

 [HttpGet]
        [AllowAnonymous]
        public async Task<IActionResult> CargaCiudad()
        {
            List<Cuidad> Items = await drHelpPrueba.Cuidad.ToListAsync();
            List<SelectListItem> ciudad = new List<SelectListItem>();

            for (int i = 0; i < Items.Count; i++)
            {
                ciudad.Add(new SelectListItem
                {
                    Value = Convert.ToString(Items.ToList()[i].IdCiudad),
                    Text = Items.ToList()[i].Nombre
                });
            }

            return Json(ciudad);

        }

JavaScript

function ValidarExisteCiudad() {
    var existeUsuario;   

    var ddlCiudad = $("#Ciudad");
        $.ajax({
            type: 'GET',
            url: "CargaCiudad",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                existeUsuario = true;
                ddlCiudad.empty().append('<option selected="selected" value="0">Seleccione ...</option>');
                $.each(data, function () {
                   ddlCiudad.append($("<option></option>").val(this['Value']).html(this['Text']));
                });
            },  
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
                existeUsuario = false;
            }
        });

    return existeUsuario;

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.