Приложение Asp.Net MVC, использующее Jquery Bootgrid, не показывает никаких результатов.

Question

Я создал очень простое приложение (клиент), используя ASP.Net MVC 5 + Entityframework 6 (codefirst) + база данных MySql. Использование в качестве основного компонента JQuery Bootgrid для манипулирования данными.

Оказывается, что локально приложение работает отлично, но при загрузке в интернет-провайдера (я использовал платную учетную запись hosted.com и также провел тест на GearHost в бесплатной учетной записи) приложение работает нормально, но Jquery Bootgrid не показывает никаких данных,

Затем я начал проверять, во-первых, полностью ли опубликованы приложения (ОК), во-вторых, подключалась ли база данных (ОК), я даже протестировал с помощью рабочей среды на своем локальном ПК, соединяющей базу данных на ISP (все работает нормально). Но пока он не показывает никаких данных в Jquery Bootgrid. Вот моя подпрограмма JS и index.cshtml для представления, которое загружает загрузочную сетку.

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');
    });
}

Index.cshtml:

@{
    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

Виноват! Проблема была не в загрузочной сетке или ajax. Дело в том, что я должен был установить строку подключения с помощью ServerName = localhost, как только приложение будет размещено на том же адресе, что и база данных, поэтому доступ будет локальным, а не удаленным. Изменение ServerName в моей строке подключения решило проблему.