none
Error al cargar ddl anidado con jquery - ajax - C# RRS feed

  • Pregunta

  • Hola a todos! estoy teniendo un problema al cargar un combo anidado con jquery y ajax. Mi código es el siguiente:

    Head de mi webform:

        <script>
            $(document).ready(function () {
                $("[id$=ddlAreaServicio]").change(function () {
                    cargarDDLTipoReclamo();
                })
            });
        </script>


    Acá, tomo el id del primer ddl ya cargado y lo envío a la funcion ajax para que me cargue el siguiente ddl:

    function cargarDDLTipoReclamo() {
        var dat = { IDAreaServicio: $("[id$=ddlAreaServicio]").val() };
        $.ajax({
            data: JSON.stringify(dat),
            type: "POST",
            async: true,
            url: "http://localhost:49795/WebServiceDC.svc/cargarDDLTipoReclamo",
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                if (data.d.length == 0) return;
    
                var ddl = $('#ddlTipoReclamo');
                ddl.empty();
                ddl.append($("<option></option>").val(0).html("Seleccione Tipo de Reclamo..."));
    
                var data = JSON.parse(data.d);
                $.each(data, function (key, value) {
                    ddl.append($("<option></option>").val(value.tipRec_IDTipoReclamo).html(value.tipRec_nombre));
                });
                ddl.prop('value', 0);
            },
            error: function (XHR, textStatus, errorThrown) {
                alert(textStatus + ": " + errorThrown);
            }
        });
    }

    Dentro de éste método, llamo al método cargarDDLTipoReclamo que tengo en mi Webservice:

            [OperationContract]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public string cargarDDLTipoReclamo(long IDAreaServicio)
            {
                try
                {
                    clsTipoReclamo objClsTipoReclamo = new clsTipoReclamo();
                    var lstTipoReclamo = objClsTipoReclamo.ListarTipoReclamo(IDAreaServicio);
    
                    JavaScriptSerializer jsSer = new JavaScriptSerializer();
                    return jsSer.Serialize(lstTipoReclamo);
                }
                catch (Exception ex)
                {
                    return ex.ToString();
                }
            }

    De aquí, llamo al método ListarTipoReclamo que tengo en mi capa de Negocio:

            public class DDLTipoReclamo
            {
                public Int64 tipRec_IDTipoReclamo { get; set; }
                public string tipRec_nombre { get; set; }
            }
    
            public List<DDLTipoReclamo> ListarTipoReclamo(long IDAreaServicio)
            {
                try
                {
                    using (BDGestionReclamosEntities BD = new BDGestionReclamosEntities())
                    {
                        var iqListarTipoReclamo = from x in BD.TipoReclamo
                                                  where x.tipRec_IDAreaServicio == IDAreaServicio
                                                  orderby x.tipRec_nombre
                                                  select new DDLTipoReclamo
                                                  {
                                                      tipRec_IDTipoReclamo = x.tipRec_IDTipoReclamo,
                                                      tipRec_nombre = x.tipRec_nombre
                                                  };
    
                        return iqListarTipoReclamo.ToList<DDLTipoReclamo>();
                    }
                }
                catch (Exception ex)
                {
                    return null;
                }
            }

    Lo que obtengo es el siguiente error:

    Failed to load http://localhost:49795/WebServiceDC.svc/cargarDDLTipoReclamo: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:13468' is therefore not allowed access.

    En mi MasterPage tengo las referencias correspondientes:

    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>DigitalClaim</title>
        <!-- MIS CSS-->
        <link href="css/miEstilo.css" rel="stylesheet" />
        <link href="css/Funciones.css" rel="stylesheet" />
        <link href="css/Grilla.css" rel="stylesheet" />
        <!-- Bootstrap core CSS-->
        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Custom fonts for this template-->
        <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Page level plugin CSS-->
        <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
        <!-- Custom styles for this template-->
        <link href="css/sb-admin.css" rel="stylesheet" />
        <!-- Jquery -->
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script src="js/cargasDDL.js"></script>
        <!-- Bootstrap Javascript-->
        <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
        <!-- MIS JS -->
        <script type="text/javascript" src="js/miJS.js"></script>
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>

    ¿Alguna idea de como resolver esto? gracias por su atención! Saludos


    • Editado AguFortini jueves, 20 de septiembre de 2018 1:12
    jueves, 20 de septiembre de 2018 1:06

Respuestas

  • Buenas,

    El error te esta indicando que el CORS esta deshabilitado y se rechaza la conexión.

    Te dejo un link en el que tienes algunas ideas para solucinarlo:

    No 'Access-Control-Allow-Origin' header is present on the requested resource

    Atte


    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.

    jueves, 20 de septiembre de 2018 7:16
  • No soy un experto en problemas con CORS, pero he indagado un poco, y creo que te puede faltan indicarle las headers en la llamada ajax

    function cargarDDLTipoReclamo() {
        var dat = { IDAreaServicio: $("[id$=ddlAreaServicio]").val() };
        $.ajax({
            data: JSON.stringify(dat),
            type: "POST",
            async: true,
            url: "http://localhost:49795/WebServiceDC.svc/cargarDDLTipoReclamo",
            dataType: 'json',
            headers: {
               'Access-Control-Allow-Origin':'*.*'},  
            contentType: "application/json",
            success: function (data) {
                if (data.d.length == 0) return;
    
                var ddl = $('#ddlTipoReclamo');
                ddl.empty();
                ddl.append($("<option></option>").val(0).html("Seleccione Tipo de Reclamo..."));
    
                var data = JSON.parse(data.d);
                $.each(data, function (key, value) {
                    ddl.append($("<option></option>").val(value.tipRec_IDTipoReclamo).html(value.tipRec_nombre));
                });
                ddl.prop('value', 0);
            },
            error: function (XHR, textStatus, errorThrown) {
                alert(textStatus + ": " + errorThrown);
            }
        });
    }

    Prueba y nos comentas

    Atte


    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.

    jueves, 20 de septiembre de 2018 15:50
  • Si,en principio si parece bien...

    voy a hacer una pregunta absuda.. tienes el metodo con el decorador 

    [WebMethod]

    Para que se exponga correctamente?

    Atte


    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.

    jueves, 20 de septiembre de 2018 17:25
  • [OperationContract]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    [WebMethod]// --> Aqui en la firma del metodo
    public string cargarDDLTipoReclamo(long IDAreaServicio)
    {
        try
        {
            clsTipoReclamo objClsTipoReclamo = new clsTipoReclamo();
            var lstTipoReclamo = objClsTipoReclamo.ListarTipoReclamo(IDAreaServicio);
    
            JavaScriptSerializer jsSer = new JavaScriptSerializer();
            return jsSer.Serialize(lstTipoReclamo);
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }
    }

    Atte

    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.


    viernes, 21 de septiembre de 2018 11:21

Todas las respuestas

  • Buenas,

    El error te esta indicando que el CORS esta deshabilitado y se rechaza la conexión.

    Te dejo un link en el que tienes algunas ideas para solucinarlo:

    No 'Access-Control-Allow-Origin' header is present on the requested resource

    Atte


    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.

    jueves, 20 de septiembre de 2018 7:16
  • Hola Jorge! gracias por tu respuesta. Agregué el codigo que especifica el enlace en web.config de mi webservice y ahora me aparece el siguiente error:

    Failed to load resource: the server responded with a status of 400 (Bad Request) :49795/WebServiceDC.svc/cargarDDLTipoReclamo:1

    Failed to load http://localhost:49795/WebServiceDC.svc/cargarDDLTipoReclamo: Response for preflight does not have HTTP ok status. frmRegistrarReclamo.aspx:1

    Sigo con la búsqueda y espero tu respuesta! Saludos

    • Editado AguFortini jueves, 20 de septiembre de 2018 15:30
    jueves, 20 de septiembre de 2018 15:11
  • No soy un experto en problemas con CORS, pero he indagado un poco, y creo que te puede faltan indicarle las headers en la llamada ajax

    function cargarDDLTipoReclamo() {
        var dat = { IDAreaServicio: $("[id$=ddlAreaServicio]").val() };
        $.ajax({
            data: JSON.stringify(dat),
            type: "POST",
            async: true,
            url: "http://localhost:49795/WebServiceDC.svc/cargarDDLTipoReclamo",
            dataType: 'json',
            headers: {
               'Access-Control-Allow-Origin':'*.*'},  
            contentType: "application/json",
            success: function (data) {
                if (data.d.length == 0) return;
    
                var ddl = $('#ddlTipoReclamo');
                ddl.empty();
                ddl.append($("<option></option>").val(0).html("Seleccione Tipo de Reclamo..."));
    
                var data = JSON.parse(data.d);
                $.each(data, function (key, value) {
                    ddl.append($("<option></option>").val(value.tipRec_IDTipoReclamo).html(value.tipRec_nombre));
                });
                ddl.prop('value', 0);
            },
            error: function (XHR, textStatus, errorThrown) {
                alert(textStatus + ": " + errorThrown);
            }
        });
    }

    Prueba y nos comentas

    Atte


    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.

    jueves, 20 de septiembre de 2018 15:50
  • Probe y no, sigue el mismo error, es correcta la sintaxis? 

    headers: {'Access-Control-Allow-Origin':'*.*'}, 


    jueves, 20 de septiembre de 2018 16:53
  • Si,en principio si parece bien...

    voy a hacer una pregunta absuda.. tienes el metodo con el decorador 

    [WebMethod]

    Para que se exponga correctamente?

    Atte


    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.

    jueves, 20 de septiembre de 2018 17:25
  • Si te referís a mi método en el Webservice.. lo tengo así:

            [OperationContract]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public string cargarDDLTipoReclamo(long IDAreaServicio)
            {
                try
                {
                    clsTipoReclamo objClsTipoReclamo = new clsTipoReclamo();
                    var lstTipoReclamo = objClsTipoReclamo.ListarTipoReclamo(IDAreaServicio);
    
                    JavaScriptSerializer jsSer = new JavaScriptSerializer();
                    return jsSer.Serialize(lstTipoReclamo);
                }
                catch (Exception ex)
                {
                    return ex.ToString();
                }
            }

    ¿Dónde insertarías ese [WebMethod]?. Ya intenté de reemplazarlo por:

    [OperationContract]

    y de eliminar 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    Pero el problema persiste... 



    • Editado AguFortini jueves, 20 de septiembre de 2018 23:26
    jueves, 20 de septiembre de 2018 17:46
  • [OperationContract]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    [WebMethod]// --> Aqui en la firma del metodo
    public string cargarDDLTipoReclamo(long IDAreaServicio)
    {
        try
        {
            clsTipoReclamo objClsTipoReclamo = new clsTipoReclamo();
            var lstTipoReclamo = objClsTipoReclamo.ListarTipoReclamo(IDAreaServicio);
    
            JavaScriptSerializer jsSer = new JavaScriptSerializer();
            return jsSer.Serialize(lstTipoReclamo);
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }
    }

    Atte

    Jorge Turrado Ferrero

    Mis repositorios en GitHub
    Ranking GitHub Euskadi
    Ranking GitHub Alava

    No olvides votar mi comentario si te ha ayudado y marcarlo como respuesta si ha sido la solución, con eso ayudas a mejorar mi reputación en la comunidad y a identificar la respuesta a la gente que tenga el mismo problema.


    viernes, 21 de septiembre de 2018 11:21