kaiovinicius_

Estou montando um Painel para acompanhamento de tickets, nele existem basicamente dois elementos, 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> } Segue o Action GetData(), que envia os dados para montar o gráfico, acredito que a query não seja importante nesse caso, então coloquei essa genérica aí, porque 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); }