Good afternoon,
I would like to know how I can make my list of records be loaded into the table at the same time that the chart is loaded by AJAX, because currently in my model it shows that it has records but they do not appear in the table, imgs to aid in understanding.
EX:
Controller:
private DBConnection banco = new DBConnection();
// GET: TotalSMS
public ActionResult Index()
{
#region "URL"
var e = this.RouteData.Values;
string controllerName = (string)e["controller"];
string actionName = (string)e["action"];
ViewBag.Message = controllerName;
ViewBag.Acao = actionName;
ListaCampanhas();
#endregion
var codCampanha = TempData["codCampanha"];
if (codCampanha == null)
{
return View(banco.Database.SqlQuery<QtdSmsEnviadoPorMes>("SP_CARREGA_GRAFICO_SMS @IDCampanha", new SqlParameter("@IDCampanha", '0')).ToList());
}
else
{
return View(TempData["_list"]);
}
}
public JsonResult GetDados(int campanhaSelecionada)
{
TempData["codCampanha"] = campanhaSelecionada;
var result = banco.Database.SqlQuery<QtdSmsEnviadoPorMes>("SP_CARREGA_GRAFICO_SMS @IDCampanha", new SqlParameter("@IDCampanha", campanhaSelecionada)).ToList();
TempData["_list"] = result;
return Json(result);
}
Class:
public class QtdSmsEnviadoPorMes
{
[Key]
public int QtdEnviados { get; set; }
public int QtdConfirmados { get; set; }
public int QtdNaoConfirmados { get; set; }
public int QtdNaoRecebidos { get; set; }
public int MES { get; set; }
public int ANO { get; set; }
}
SCRIPT:
//Primeiro Load
$("#campanhaTotalSmsEnv").val('');
//Apos a alteração de Campanha
$("#campanhaTotalSmsEnv").change(function () {
var campanhaSelecionada = $("#campanhaTotalSmsEnv option:selected").val();
$.ajax({
dataType: "json",
type: "POST",
url: "/TotalSMS/GetDados",
data: { campanhaSelecionada: campanhaSelecionada },
success: function (dados) {
$(dados).each(function (i) {
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
datasets:
[
{
label: "Enviado",
backgroundColor: 'transparent',
//backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(75, 192,192)',
borderWidth: 3,
data: [
dados[0].QtdEnviados, dados[1].QtdEnviados, dados[2].QtdEnviados, dados[3].QtdEnviados, dados[4].QtdEnviados,
dados[5].QtdEnviados, dados[6].QtdEnviados, dados[7].QtdEnviados, dados[8].QtdEnviados, dados[9].QtdEnviados,
dados[10].QtdEnviados, dados[11].QtdEnviados
],
}, {
label: "Confirmado",
backgroundColor: 'transparent',
//backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 3,
data: [
dados[0].QtdConfirmados, dados[1].QtdConfirmados, dados[2].QtdConfirmados, dados[3].QtdConfirmados, dados[4].QtdConfirmados,
dados[5].QtdConfirmados, dados[6].QtdConfirmados, dados[7].QtdConfirmados, dados[8].QtdConfirmados, dados[9].QtdConfirmados,
dados[10].QtdConfirmados, dados[11].QtdConfirmados
],
},
{
label: "Não Confirmado",
backgroundColor: 'transparent',
//backgroundColor: 'rgb(255, 205, 86,0.3)',
borderColor: 'rgb(255, 205, 86)',// rgb(201, 203, 207)
borderWidth: 3,
data: [
dados[0].QtdNaoConfirmados, dados[1].QtdNaoConfirmados, dados[2].QtdNaoConfirmados, dados[3].QtdNaoConfirmados, dados[4].QtdNaoConfirmados,
dados[5].QtdNaoConfirmados, dados[6].QtdNaoConfirmados, dados[7].QtdNaoConfirmados, dados[8].QtdNaoConfirmados, dados[9].QtdNaoConfirmados,
dados[10].QtdNaoConfirmados, dados[11].QtdNaoConfirmados
],
},
{
label: "Não Recebida",
backgroundColor: 'transparent',
//backgroundColor: 'rgb(255, 99, 132,0.3)',
borderColor: 'rgb(255, 99, 132)', //rgb(228, 33, 33)
borderWidth: 3,
data: [
dados[0].QtdNaoRecebidos, dados[1].QtdNaoRecebidos, dados[2].QtdNaoRecebidos, dados[3].QtdNaoRecebidos, dados[4].QtdNaoRecebidos,
dados[5].QtdNaoRecebidos, dados[6].QtdNaoRecebidos, dados[7].QtdNaoRecebidos, dados[8].QtdNaoRecebidos, dados[9].QtdNaoRecebidos,
dados[10].QtdNaoRecebidos, dados[11].QtdNaoRecebidos
],
},
]
},
// Configuration options go here
options: {
title: {
display: true,
fontSize: 20,
text: "Mês"
}
}
});
});
}
});
});
IMGS: The user will select the campaign type, after selecting automatically I have to load the chart and load the table based on the result of the procedure on top of that campaign.
But currently, only the chart is loading. the information is passed to the Model but it shows nothing!
Model: