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

3

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

It happens that locally application works perfectly, but when uploading to a provider (I used hosted.com that is paid and I also tested on GearHost in a free account) application usually goes up but Jquery Bootgrid does not show any given

By deletion I was checking if the publication had been done (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 does not show any data in Jquery Bootgrid. Here is my JS routine and the index.cshtml of the view that loads the bootrid.

Follow 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>        
}
    
asked by anonymous 04.07.2017 / 14:46

1 answer

1

I was able to figure out my error. 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 bank 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

    
10.07.2017 / 00:56