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

It turns out that locally application works perfectly, but when uploading to a provider (I used the Hosted.com that gets paid and I also ran a test on Gearhost on a free account) application goes up normally but Jquery Bootgrid does not show any given.

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 on the provider (everything running). But it does not show any data in Jquery Bootgrid. It follows my JS routine and the view index.cshtml which loads the bootrid.

Follows 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 view index.cshtml 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 1

I was able to figure out my mistake. Actually the problem was not in ajax or bootgrid, the problem is that, because it is using a provider and the application is running on this provider, the database is also located on this server, so my Connection string had to point to the Localhost (bank server) and not use the address for external access.

Sergio Nunes