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>
}