Como puedo utilizar un archivo JS en c#

Question

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.

Answer 1

¿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.

Answer 2

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

Answer 3

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

Answer 4

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:

Answer 5

 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.

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

"$ 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.

Answer 10

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

Answer 11

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.

Answer 12

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!

Answer 13

Gracias Alberto, encontre que esa función quedo discontinuada en las nuevas versiones de DataTable. Gracias por la ayuda, ya pude mostrar el listado.