0

Estou montando um Painel para acompanhamento de tickets, nele existem basicamente duas coisas, 4 campos e 1 gráfico. Gostaria de atualiza-los periodicamente, tentei com

<meta http-equiv="refresh" content="10" />

No entanto, isso recarrega toda a página, gerando aquela famosa piscada. O que eu preciso é recarregar os campos e o gráfico sem esse refresh (piscada). Pelo que encontrei na internet, posso fazer isso com o AJAX, porém não sei como, ainda estou iniciando com o desenvolvimento.

Para não ficar um código muito grande, a seguir segue minha página com apenas 1 campo, e o gráfico:

@using System.Data
@model DataSet

@{ ViewBag.Title = "Home Page";}


<!-- container-fluid -->
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">
                Tickets AGP
            </h2>
        </div>
    </div>
    <!-- /Page Heading -->


    <!-- Campos -->
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-tasks fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">

                            <div class="huge">

                                @foreach (DataRow row in Model.Tables[1].Rows)
                                {

                                    if (@row["status"].Equals("Aberto - Aguardando Aprovação"))
                                    {
                                        @row["quantidade_status"]
                                    }
                                }

                            </div>
                            <div>Aguardando Aprovação</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Campos -->


    <!-- Gráficos Morris Charts -->
    <div class="row">

        <div class="col-lg-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Atendimento AGP</h3>
                </div>
                <div class="panel-body">
                    <div id="morris-bar-agp"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /container-fluid -->

@section scripts {

    <!-- Script que carrega as informacoes do grafico-->
    <script>

    $(document).ready(function (){

        $.get('@Url.Action("GetData", "Home")', function (data) {
            console.log(data);


            Morris.Bar({

                element: 'morris-bar-agp',
                xkey: 'admAtribuido',
                ykeys: ['quantidade_admAtribuido'],
                labels: ['Tickets Atendidos'],
                barRatio: 0.4,
                xLabelAngle: 10,
                gridTextSize: 12,
                gridTextColor: '#000',
                hideHover: 'auto',
                resize: true,
                data: data
            });

            $(window).trigger('resize');
            $('svg').height(650);

            });
    });

    </script>
}

[EDIT] Segue o Action GetData(), acredito que a query não seja importante nesse caso, então coloquei essa genérica aí, pq a minha é muito grande:

[HttpGet]
    public JsonResult GetData()
    {

        DataSet ds = new DataSet();
        using (SqlConnection con = new SqlConnection("Data Source=xxx.xx.xxx.xxx;Initial Catalog=XXX;User ID=xxxxxx;Password=xxxxx"))
        {

         string query = select * from table

         using (SqlCommand cmd = new SqlCommand(query))
         {
                cmd.Connection = con;
                using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                {
                    sda.Fill(ds);
                }

            }
            var json = Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[2]);

            var obj = Newtonsoft.Json.JsonConvert.DeserializeObject(json, (new[] { new { admAtribuido = "", quantidade_admAtribuido = 0 } }).GetType());

            return Json(obj, JsonRequestBehavior.AllowGet);
        }
    } 

Segue a Action Index() que envia os dados dos campos para serem recuperados na View:

public ActionResult Index()
    {
        DataSet ds = new DataSet();

        using (SqlConnection con = new SqlConnection("Data Source=xxx.xx.xxx.xxx;Initial Catalog=XXX;User ID=xxxxxx;Password=xxxxxx"))
        {
            query select * from table

        using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.Connection = con;
                using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                {

                    sda.Fill(ds);
                }
            }
        }

        return View(ds);
    }
2
  • Coloca junto à pergunta, sua action GetData(). Você precisa ter uma action que retorne apenas os dados relevantes ao conteúdo que você precisa atualizar e de preferência em Json. Commented 9/01/2018 às 11:40
  • Opa, irei colocar, mas esta assim msm como vc falou, retornando um JSON somente com as informações que preciso.... Commented 9/01/2018 às 11:47

1 Resposta 1

0

Você pode utilizar a função SetInterval do javascript, que fará com que seu código repita de tempos em tempos conforme definido.

setInterval(function(){
    $.get('@Url.Action("GetData", "Home")', function (data) {
                console.log(data);


                Morris.Bar({

                    element: 'morris-bar-agp',
                    xkey: 'admAtribuido',
                    ykeys: ['quantidade_admAtribuido'],
                    labels: ['Tickets Atendidos'],
                    barRatio: 0.4,
                    xLabelAngle: 10,
                    gridTextSize: 12,
                    gridTextColor: '#000',
                    hideHover: 'auto',
                    resize: true,
                    data: data
                });

                $(window).trigger('resize');
                $('svg').height(650);

                });
        });
}, 1000);

A assinatura da função está definida como setInterval(function, milliseconds);, no exemplo, o código dentro do parâmetro function irá executar de mil em mil milissegundos, o que seria de 1 em 1 segundo.

Veja um exemplo no site da w3schools

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 .