3

espero puedan ayudarme con este problema. Lo que quiero lograr es llenar un dropDownList dependiendo de la selección de otro que cargo en el page_load, estoy usando un servicio rest para hacer la carga de datos y lenguaje C#.

El primer DropDownList lo cargo de esta manera en el Page_Load

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            var url = "http://localhost:8090/Galenos/webresources/especialidadController/getData";
            var webRest = new WebClient();
            var content = webRest.DownloadString(url);


            DataContractJsonSerializer dj = new DataContractJsonSerializer(typeof(Especialidad[]));
            using (var ms = new MemoryStream(Encoding.Unicode.GetBytes(content)))
            {
                //var p = (prevision)dj.ReadObject(ms);
                Especialidad[] p = (Especialidad[])dj.ReadObject(ms);

                foreach (Especialidad x in p)
                {
                    ListItem pv = new ListItem(x.nombre, x.id.ToString());
                    especialidades.Items.Add(pv);
                }
            }
        }
        catch (SerializationException ex)
        {


        }
        catch (Exception ex)
        {

        }
    }

Busque algo en internet y para llenar el segundo DropDownList use este código JavaScript

$(document).ready(function () {
$("#especialidades").change(function () {

    alert("change");
    $.ajax({
        type: "GET",
        url: "http://localhost:8090/Galenos/webresources/usuarioController/getMedico",
        data: "{esp: '" + $('#especialidades').val() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
             alert("entra");
            var models = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
            $("#medicos").get(0).options.length = 0;

            for (var i = 0; i < models.length; i++) {
                var val = models[i].rut;
                var text = models[i].nombre;
                $("#medicos").get(0).options[$("#medicos").get(0).options.length] = new Option(text, val);

            }
        },
        error: function (response) {
            if (response.length != 0)
                alert("error"+response);
        }
    });
});

});

Pero no funciona, no me carga el segundo DropDownList, la url del servicio rest si funciona, por que cuando pongo en el explorador me retorna el json con los datos de los medicos

El código asp de la declaración de los DropDownList es este

<label for="especialidades">Especialidad medica :</label>
        <asp:DropDownList ID="especialidades" ClientIDMode=Static  runat="server"></asp:DropDownList>
    <br/>
    <label for="medicos">Medico :</label>
        <asp:DropDownList ID="medicos" ClientIDMode=Static  runat="server"></asp:DropDownList>
    <br />

Si existe otra forma de hacer esta carga de datos estaría bien para mi igual, no necesariamente tiene que ser con Ajax, es solo que lei que la mejor forma seria así, pero no conozco como funciona muy bien esto

2 respuestas 2

1

Probe esta parte del código y funciona, entonces el problema es que no se esta disparando el evento change del primer DropdownList o que no esta recuperando los datos. Esto lo puedes testear muy fácilmente.

Saludos,

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script>
    var response = {
        d: [
            {
                rut: '12',
                nombre: 'Jorge'
            }
        ]

    };

    alert("entra");
    var models = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
    $("#medicos").get(0).options.length = 0;

    for (var i = 0; i < models.length; i++) {
        var val = models[i].rut;
        var text = models[i].nombre;
        $("#medicos").get(0).options[$("#medicos").get(0).options.length] = new Option(text, val);

    }
</script>
4
  • El evento de change si se ejecuta por que puse un alert cuando se ejecuta la función y si me sale, ahora como pruebo que se están recuperando los datos? por ejemplo escribo esto en el explorador localhost:8090/Galenos/webresources/usuarioController/getMedico/… y me sale [{"activo":"","esMedica":0,"fono":0,"nombre":"Gregory","prevision_id":0,"rut":"12345678-9","sexo":"","valHono":0}] eso es que recupero datos? o no? y ahora mirando bien no se que sera la "d" de response.d la borré pero igual me sale el error Commented el 25 may. 2017 a las 5:34
  • ve a la linea var models = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d; Luego pon un console.log(models); y valida en chrome o firefox con las herramientas para desarrolladores en la consola si aparece el json. En formato json, no texto Commented el 25 may. 2017 a las 5:36
  • También despues de esa linea puedes hacer un alert(models[0].rut); si no te aparece el primer rut, hay problema con el json, no está llegando en el formato correcto. Debes revisar que se envie en el servidor como json. Commented el 25 may. 2017 a las 5:43
  • me sale este error XMLHttpRequest cannot load localhost:8090/Galenos/webresources/usuarioController/getMedico?{esp:%20%2720%27}. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:63983' is therefore not allowed access. The response had HTTP status code 400. Se supone que en {esp:%20%2720%27} deberia salir solo un numero 20 o no? por que ese es el id de la especialidad que estoy seleccionando Commented el 25 may. 2017 a las 5:52
1

Al final lo que me resulto fue pasar la variable a la url

 url: "http://localhost:8090/Galenos/webresources/usuarioController/getMedico/" + $('#especialidades').val(),

borré la linea

data: "{esp: '" + $('#especialidades').val() + "'}",

y use un chrome sin seguridad o algo así.. no entendí bien eso, se llama CORS, seguí las instrucciones de aquí https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

No sé si es la mejor solución pero funcionó para mi

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.