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);
}
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.