ASP.Net MVC application with Jquery Bootgrid does not load data

Question:

I created a very simple application (customer registration) using ASP.Net MVC 5 + Entityframework 6 (codefirst) + MySql database. Using as main component the JQuery Bootgrid for data manipulation.

It turns out that locally the application works perfectly, but when uploading to a provider (I used hosted.com which is paid and I also did a test on GearHost on a free account) the application goes up normally but the Jquery Bootgrid doesn't show any data.

By elimination I was checking if the publication had been done completely (Ok), if the bank was connecting (Ok) I even tested using the workbench on my machine connecting the bank to the provider (everything working). But it doesn't show any data in Jquery Bootgrid. It follows my JS routine and the index.cshtml of the view that loads the bootrid.

Here is the JS function:

    function Configuracao() {

    var traducao = {
        infos: "Exibindo {{ctx.start}} Até {{ctx.end}} de {{ctx.total}} registros",
        loading: "Carregando, isso pode levar alguns segundos...",
        noResults: "Não há dados para exibir",
        refresh: "Atualizar",
        search: "Pesquisar"
    };


    var grid = $("#tbGridPrincipal").bootgrid(
         {
             ajax: true,
             url: urlListar,
             labels: traducao,
             searchSettings: {
                 delay: 100,
                 characters: 3
             },

             formatters: {
                 "acoes": function (column, row) {

                     return "<a href='#' class='btn btn-info btn-sm' data-acao='Details' data-row-id = '" + row.IDCliente + "'>" +
                               "<span class='glyphicon glyphicon-list'></span>" + "</a>" +
                            "<a href='#' class='btn btn-warning btn-sm' data-acao='Edit' data-row-id = '" + row.IDCliente + "'>" +
                               "<span class='glyphicon glyphicon-edit'></span>" + "</a>" +
                            "<a href='#' class='btn btn-danger btn-sm' data-acao='Delete' data-row-id = '" + row.IDCliente + "'>" +
                               "<span class='glyphicon glyphicon-trash'></span>" + "</a>";

                 }
             }, // Tratar os campos data que vem no formato incorreto
             converters: {
                 datetime: {
                     from: function (value) { return moment(value); },
                     to: function (value) { return moment(FormatJsonDateToJavaScriptDate(value)).format("DD/MM/YYYY"); }
                 }
             }
         });

    grid.on("loaded.rs.jquery.bootgrid", function () {
        grid.find("a.btn").each(function (index, elemento) {
            var botaoDeAcao = $(elemento);
            var acao = botaoDeAcao.data("acao");
            var idEntidade = botaoDeAcao.data("row-id");

            botaoDeAcao.on("click", function () {
                abrirModal(acao, idEntidade);
            });
        });
    });

    $("a.btn").click(function () {
        var acao = $(this).data("action");
        abrirModal(acao);
    });
}

    function FormatJsonDateToJavaScriptDate(value) {
    var pattern = /Date\(([^)]+)\)/;
    var results = pattern.exec(value);
    var dt = new Date(parseFloat(results[1]));
    return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
}

function abrirModal(acao, parametro) {
    var url = "/{ctrl}/{acao}/{parametro}/";

    url = url.replace("{ctrl}", controller);
    url = url.replace("{acao}", acao);

    if (parametro != null) {
        url = url.replace("{parametro}", parametro);
    }
    else {
        url = url.replace("{parametro}", "");
    }

    $("#conteudoModal").load(url, function () {
        $("#minhaModal").modal('show');
    });
}

Now the index.cshtml of the view that shows the data:

 @{
    ViewBag.Title = "Index";
}

<h2>Lista de Clientes</h2>

<p>
    <a href="#" class="btn btn-success" data-action="Create">
        <span class="glyphicon glyphicon-plus"></span> 
        Novo Cliente
    </a>
</p>


<div class="btn-group">
    <button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> Exporta Dados</button>
    <ul class="dropdown-menu " role="menu">
        <li><a href="#" onClick="$('#tbGridPrincipal').tableExport({ type: 'csv', escape: 'false', tableName: 'ClientesCSV' });"> <img src='~/img/csv.png' width='24'> CSV</a></li>
        <li><a href="#" onClick="$('#tbGridPrincipal').tableExport({ type: 'txt', escape: 'false', tableName: 'ClientesTXT' });"> <img src='~/img/txt.png' width='24'> TXT</a></li>
        <li class="divider"></li>
        <li><a href="#" onClick="$('#tbGridPrincipal').tableExport({ type: 'excel', escape: 'false', tableName: 'ClientesXLS' });"> <img src='~/img/xls.png' width='24'> XLS</a></li>
        <li class="divider"></li>
        <li><a href="#" onClick="$('#tbGridPrincipal').tableExport({ type: 'pdf', pdfFontSize: '7', escape: 'false', tableName: 'ClientesPDF' });"> <img src='~/img/pdf.png' width='24'> PDF</a></li>
    </ul>
</div>  



<table id="tbGridPrincipal" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="NomeCliente" data-order="asc">Nome Cliente</th>
            <th data-column-id="DataAniversario" data-converter="datetime">Data Aniversário</th>
            <th data-column-id="Manequim" data-type="numeric">Manequim</th>
            <th data-column-id="NomeParente">Nome Pai/Mãe</th>
            <th data-column-id="Email">Email</th>
            <th data-column-id="TelFixo">Telefone</th>
            <th data-column-id="TelCelular">Celular</th>
            <th data-formatter="acoes">Ações</th>
        </tr>
    </thead>
</table>


<!-- Modal -->
<div class="modal fade" id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div id="conteudoModal"></div>
            </div>
        </div>
    </div>
</div>


@section scripts{        
    <script src="~/Scripts/projeto/ControlarGrid.js"></script>

    <script type="text/javascript">

        var controller = "Clientes";
        var urlListar = "@Url.Action("ListarClientes")";

        $(document).ready(Configuracao);
    </script>        
}

Answer:

I managed to find my error. Actually the problem wasn't in ajax or bootgrid, the problem is that, because I'm using a provider and the application is running on that provider, the database is also local on this server, so my connection string had to point to Localhost (bank server) and not use the address for external access.

Sergio Nunes

Scroll to Top
AllEscort