-1

Boa Tarde,

Gostaria de saber como posso fazer minha lista de registros ser carregada na tabela no mesmo momento que o gráfico é carregado por AJAX, porque atualmente no meu model mostra que tem registros porém não aparecem na tabela(View), segue as cods/imgs para ajudar na compreensão.

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: O Usuário selecionará o tipo da campanha, após selecionar automaticamente tenho que carregar o gráfico e carregar a tabela baseado no resultado da procedure em cima daquela campanha.

Porém atualmente, apenas o gráfico esta sendo carregado. as informações são passadas para o Model porém não mostra nada ! inserir a descrição da imagem aqui

Model: inserir a descrição da imagem aqui

7
  • Qual é o nome desse plugin mesmo que vc tá usando?
    – Sam
    Commented 20/07/2018 às 19:17
  • @sam é o charts.js Commented 20/07/2018 às 19:25
  • Essa tabela faz parte do plugin ou apenas os gráficos? Tipo, vc está criando a tabela por conta própria ou ela é criada pelo plugin juntamente com os gráficos?
    – Sam
    Commented 20/07/2018 às 21:32
  • São Separados, um Método pra cada @sam Commented 23/07/2018 às 13:52
  • Se não me falha a memória o TempData[""] é apagado logo após ser lido... Commented 23/07/2018 às 18:53

1 Resposta 1

0

Cara, olhando seu código o que me parece é que o seu gráfico é carregado dinamicamente com AJAX porém a sua tabela abaixo segue o fluxo normal do mvc. O ideal era carregar os dois da mesma forma, os dois com AJAX ou os dois com o fluxo normal do mvc indo no servidor e voltando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .