Asp.Net 使用 Jquery Bootgrid 的 MVC 应用程序未显示任何结果

Question

我使用 ASP.Net MVC 5 + Entityframework 6 (codefirst) + MySql 数据库创建了一个非常简单的应用程序（客户）。使用 JQuery Bootgrid 作为主要组件进行数据操作。

事实证明，本地应用程序运行良好，但是当上传到互联网服务提供商时（我使用 hosted.com 付费帐户，我还运行在免费帐户中对 GearHost 进行了测试）应用程序正常启动，但 Jquery Bootgrid 不显示任何数据。

然后我开始检查，首先是应用程序是否已完全公开（好），其次是数据库是否正在连接（好）我什至在我的本地电脑上使用 workbench 测试了连接 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

我的错！问题不在于 bootgrid 或 ajax。问题是，一旦应用程序托管在与数据库相同的地址中，我应该使用 ServerName = localhost 设置连接字符串，因此访问是本地的而不是远程的。更改我的连接字符串中的 ServerName 解决了问题。

Asp.Net 使用 Jquery Bootgrid 的 MVC 应用程序未显示任何结果

Asp.Net MVC Application using Jquery Bootgrid does not show any results

mysql

jquery

entity-framework-6

asp.net-mvc-5

jquery-bootgrid