none
Como puedo utilizar un archivo JS en c# RRS feed

  • Pregunta

  • Buenos días, tengo un problema para cargar un archivo JS dentro de una pagina aspx (trabaja con bootstrap)  que esta anidada en una pagina maestra, ya que no logro referenciar o que al cargar la pagina en cuestión(Agenda.aspx) me traiga el JS (ListaEmpresasAgenda.js), al ejecutar, me muestra los encabezados de la columnas, pero no me trae la data que esta en ese JS con Ajax. Actualmente tengo el siguiente código:

            protected void Page_Load(object sender, EventArgs e)
            {
                ClientScript.RegisterClientScriptInclude("ListaEmpresasAgenda", "js/ListaEmpresasAgenda.js");
            }

    pasa por esa instrucción pero no logro ejecutar el JS. Tambien veo en al consola del chrome que no tiene errores.

    Agradezco la ayuda que me puedan brindar. Saludos, David.

    miércoles, 2 de octubre de 2019 11:30

Respuestas

  • Como estas Leandro, lleve el codigo de JS a la pagina (Agenda.aspx):

                                

    <%@ Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="Agenda.aspx.cs" Inherits="Coloso.Agenda" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <!-- <p> CONTENIDO DE AGENDA </p> -->
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">Listado de empresas </h3>
                    </div>
                    <div class="box-body table-responsive">
                        <table id="tbl_Empresas" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th> ID </th>
                                    <th> Empesa </th>
                                    <th> Direccion</th>
                                    <th> Contacto </th>
                                    <th> Cargo </th>
                                    <th> Telefono </th>
                                    <th> Movil </th>
                                    <th> Fax </th>
                                    <th> Email </th>
                                    <th> Cuit </th>
                                    <th> Categoria </th>
                                    <th> Rubro </th>
                                </tr>
                            </thead>
                            <tbody id="bbl_body_table">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function addRowDT(data) {
                var tabla = $("#tbl_Empresas").dataTable();
                for (var i = 0; i < data.length; i++) {
                    tabla.fnAddData([
                        data[i].ID,
                        data[i].Empresa,
                        data[i].Dire_calle + " " + data[i].Dire_nro + " " + data[i].Dire_dtoPiso + " (" + data[i].CP + ") - " + data[i].Localidad + ", " + data[i].Pcia,
                        data[i].Contacto,
                        data[i].Cargo,
                        data[i].Telefono,
                        data[i].Movil,
                        data[i].Fax,
                        data[i].Email,
                        data[i].Cuit,
                        data[i].Categoria,
                        data[i].Rubro
                    ])
                }

                function sendDataAjax() {
                    $.ajax({
                        type: "POST",
                        url: "Agenda.aspx/ListarEmpresasAgenda",
                        data: {},
                        contentType: 'application/json; charset=utf-8',
                        error: function (xhr, ajaxOptions, thrownError) {
                            console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
                        },
                        success: function (data) {
                            console.log(data);
                            addRowDT(data.d);
                        }
                    });
                }

                sendDataAjax();
            }
        </script>
    </asp:Content>

    Esto debería levantar una función (ListarEmpresasAgenda) que tengo en el code behind:

            [WebMethod]
            public static List<Empresas> ListarEmpresasAgenda()
            {
                List<Empresas> Lista = null;
                try
                {
                    Lista = Empresa_BLL.getInstance_empresaBLL().listarEmpresas_BLL();
                }
                catch (Exception ex)
                {

                    Lista = null;
                }

                return Lista;
            }
        }

    Te adjunto el resultado, como podes ver, nunca trae los datos de la base para cargar las columnas:

    Gracias por la ayuda

    miércoles, 2 de octubre de 2019 20:59
  • Efectivamente, DataTable no es una función "intrínseca" de jQuery. Presumo que es algún extensor que estás cargando a través de alguna librería. Asegúrate de que la librería que lo contiene la has añadido en la página después de jQuery pero antes del código desde donde la llamas. Me imagino que estarás usando el plugin de https://datatables.net/ o alguno otro similar.
    • Marcado como respuesta D4V1D R3C4 martes, 8 de octubre de 2019 14:25
    martes, 8 de octubre de 2019 6:47

Todas las respuestas

  • ¿Has probado a examinar desde el navegador el código fuente de la página enviada por el servidor (usa la F12)?

    Esto posiblemente te dé una buena pista a cerca de qué puede estar pasando. Por ejemplo, puede ser que te lo esté cargando después de ejecutar la línea que tiene que llamarlo, o algo similar. Al ver el código de la página debería poderse detectar el problema.

    miércoles, 2 de octubre de 2019 12:29
  • hola

    Porque tienes que agregar el .js usando codigo servidor ? porque no defines primero el js en el html para ver que lo reconozco

    puede que no este armando la url relativa de forma correcto, quizas debas usar el ../js/

    o sea esa carpeta js debe estar al mismo nivel que el aspx para que funcione

    Ademas deberias usar el

    ScriptManager.RegisterClientScriptInclude Method

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 2 de octubre de 2019 14:21
  • Como estas Leandro, lleve el codigo de JS a la pagina (Agenda.aspx):

                                

    <%@ Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="Agenda.aspx.cs" Inherits="Coloso.Agenda" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <!-- <p> CONTENIDO DE AGENDA </p> -->
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">Listado de empresas </h3>
                    </div>
                    <div class="box-body table-responsive">
                        <table id="tbl_Empresas" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th> ID </th>
                                    <th> Empesa </th>
                                    <th> Direccion</th>
                                    <th> Contacto </th>
                                    <th> Cargo </th>
                                    <th> Telefono </th>
                                    <th> Movil </th>
                                    <th> Fax </th>
                                    <th> Email </th>
                                    <th> Cuit </th>
                                    <th> Categoria </th>
                                    <th> Rubro </th>
                                </tr>
                            </thead>
                            <tbody id="bbl_body_table">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function addRowDT(data) {
                var tabla = $("#tbl_Empresas").dataTable();
                for (var i = 0; i < data.length; i++) {
                    tabla.fnAddData([
                        data[i].ID,
                        data[i].Empresa,
                        data[i].Dire_calle + " " + data[i].Dire_nro + " " + data[i].Dire_dtoPiso + " (" + data[i].CP + ") - " + data[i].Localidad + ", " + data[i].Pcia,
                        data[i].Contacto,
                        data[i].Cargo,
                        data[i].Telefono,
                        data[i].Movil,
                        data[i].Fax,
                        data[i].Email,
                        data[i].Cuit,
                        data[i].Categoria,
                        data[i].Rubro
                    ])
                }

                function sendDataAjax() {
                    $.ajax({
                        type: "POST",
                        url: "Agenda.aspx/ListarEmpresasAgenda",
                        data: {},
                        contentType: 'application/json; charset=utf-8',
                        error: function (xhr, ajaxOptions, thrownError) {
                            console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
                        },
                        success: function (data) {
                            console.log(data);
                            addRowDT(data.d);
                        }
                    });
                }

                sendDataAjax();
            }
        </script>
    </asp:Content>

    Esto debería levantar una función (ListarEmpresasAgenda) que tengo en el code behind:

            [WebMethod]
            public static List<Empresas> ListarEmpresasAgenda()
            {
                List<Empresas> Lista = null;
                try
                {
                    Lista = Empresa_BLL.getInstance_empresaBLL().listarEmpresas_BLL();
                }
                catch (Exception ex)
                {

                    Lista = null;
                }

                return Lista;
            }
        }

    Te adjunto el resultado, como podes ver, nunca trae los datos de la base para cargar las columnas:

    Gracias por la ayuda

    miércoles, 2 de octubre de 2019 20:59
  • Como estas Alberto, lo extraño es que cuando lo reviso con el navegador no lanzo ningún error, es como si la llamada al JS no se ejecutara:

    viernes, 4 de octubre de 2019 11:10
  •  lo extraño es que cuando lo reviso con el navegador no lanzo ningún error

    Sí, pero no lo revises así, eso no nos aporta ninguna información que no tuviéramos ya de antemano. Lo importante es examinar desde el navegador el HTML que le ha llegado (usa las herramientas F12). Ahí es donde veremos qué es lo que le ha inyectado el servidor. De esa manera tal vez podamos deducir por qué no lo está ejecutando.

    viernes, 4 de octubre de 2019 12:22
  • Alberto te adjunto una imagen donde fui "buceando" dentro del HTML, espero que sea lo que mencionas:

    Por lo que puedo advertir el script es cargado por el navegador (js/ListaEmpresasAgenda.js), la idea inicial es que debajo del <tbody id="bbl_body_table"> cargara los campos que deberia traer el JS:

    function addRowDT(data) {
        var tabla = $("#tbl_Empresas").dataTable();
        for (var i = 0; i < data.length; i++) {
            tabla.fnAddData([
                data[i].ID,
                data[i].Empresa,
                data[i].Dire_calle + " " + data[i].Dire_nro + " " + data[i].Dire_dtoPiso + " (" + data[i].CP + ") - " + data[i].Localidad + ", " + data[i].Pcia,
                data[i].Contacto,
                data[i].Cargo,
                data[i].Telefono,
                data[i].Movil,
                data[i].Fax,
                data[i].Email,
                data[i].Cuit,
                data[i].Categoria,
                data[i].Rubro
            ])
        }

        function sendDataAjax() {
            $.ajax({
                type: "POST",
                url: "Agenda.aspx/ListarEmpresasAgenda",
                data: {},
                contentType: 'application/json; charset=utf-8',
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
                },
                success: function (data) {
                    console.log(data.d);
                    addRowDT(data.d);
                }
            });
        }

        sendDataAjax();

    nuevamente gracias por la ayuda!

    David

    viernes, 4 de octubre de 2019 21:33
  • Vale, creo que ya lo veo: Hay un problema con el anidamiento de las llaves dentro de tu <script>. La llamada final a sendDataAjax(); está dentro de la llave que cierra el addRowDT. Por eso no se ejecuta. Esa llave tendrías que estar antes del function sendDataAjax().

    No tiene nada que ver con el hecho de que el script lo estés inyectando en la página mediante RegisterClientScriptInclude; esto funciona bien tal como se puede ver en la captura que has hecho con F12.

    sábado, 5 de octubre de 2019 9:16
  • Gracias Alberto tenias razón, en ambas cosas, la ejecución del script la hace directo, lo mismo con la llave, se había quedado todo dentro y no ejecutaba nada. ahora tengo un error al momento de ejecutar el Ajax:


    que podra ser?

    Gracias por todo!

    David

    sábado, 5 de octubre de 2019 11:53
  • "$ is not defined" significa que no tienes cargada la librería jQuery, o que la cargas más abajo en la página, más tarde que tu script.

    Revisa tu código, y si no está cargada, añádela en la cabecera. Si está, pero se encuentra al pie, entonces hay dos opciones: una es "subirla" a la cabecera, y la otra es mover tu javascript a una ubicación que quede por debajo de donde cargas jQuery.

    sábado, 5 de octubre de 2019 14:19
  • Gracias Alberto, al parecer tengo un problema ahora con la funcion DataTable:

    Ya que no logro poder usarla y mostrar los datos que traigo con Ajax.

    Nuevamente gracias por la ayuda.

    David

    lunes, 7 de octubre de 2019 21:47
  • Efectivamente, DataTable no es una función "intrínseca" de jQuery. Presumo que es algún extensor que estás cargando a través de alguna librería. Asegúrate de que la librería que lo contiene la has añadido en la página después de jQuery pero antes del código desde donde la llamas. Me imagino que estarás usando el plugin de https://datatables.net/ o alguno otro similar.
    • Marcado como respuesta D4V1D R3C4 martes, 8 de octubre de 2019 14:25
    martes, 8 de octubre de 2019 6:47
  • Gracias Alberto, como podrás ver ya esta en linea la librería:

    Ahora declara que fnAddData no es una función, pero esta dentro de la libreria por lo que pude investiguar, es como si no estuviera referenciada.

    Gracias!

    martes, 8 de octubre de 2019 14:07
  • Gracias Alberto, encontre que esa función quedo discontinuada en las nuevas versiones de DataTable. Gracias por la ayuda, ya pude mostrar el listado.
    martes, 8 de octubre de 2019 14:25