Data not being loaded in the Table

-1

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:

    
asked by anonymous 20.07.2018 / 20:53

1 answer

0

Dude, looking at your code what I think is that your chart is loaded dynamically with AJAX but your table below follows the normal mvc flow. The ideal was to load the two the same way, both with AJAX or both with the normal mvc stream going on the server and back.

    
31.07.2018 / 22:46