Criei um aplicação muito simples (cadastro de clientes) utilizando ASP.Net MVC 5 + Entityframework 6 (codefirst) + banco de dados MySql. Usando como principal componente o JQuery Bootgrid para manipulação de dados.
Acontece que localmente aplicação funciona perfeitamente, mas ao fazer upload para um provedor (utilizei o hosted.com que é pago e efetuei um teste também no GearHost numa conta gratuita) aplicação sobe normalmente mas o Jquery Bootgrid não mostra dado algum.
Por eliminação fui verificando se o publicação tinha sido feita complemtamente (Ok), se o banco estava conectando (Ok) testei inclusive usando o workbench na minha máquina conectando o banco no provedor (tudo funcionando). Mas não mostra dado algum no Jquery Bootgrid. Segue a minha rotina JS e o index.cshtml da view que carrega o bootrid.
Segue a função JS:
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');
});
}
Agora o index.cshtml da view que mostra os dados:
@{
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>
}
urlListar
funcionar local, mas não funcionar no servidor. – Alisson 7/07/17 às 2:06