SNunes SNunes - 3 years ago 82
jQuery Question

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

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

It turns out that locally application works perfectly, but when uploading to a internet service provider (I used hosted.com paid account and I also ran a test on GearHost in a free account) application goes up normally but Jquery Bootgrid does not show any data.

I then started checking, first if the applications had been publiched completely (Ok), second if the database was connecting (Ok) I even tested using the workbench on my local pc connecting the database on ISP (everything works fine). But yet it does not show any data in Jquery Bootgrid. Here is my JS routine and the index.cshtml for view that loads the bootrid.

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 Source

My bad! The problem was not bootgrid, or ajax. The thing is that I was supposed to set the connection string with ServerName = localhost once the app is hosted in the same address as the datbase, so the access is local not remote. Changing the ServerName in my connection string solved the problem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download