Atualizar Elementos sem Refresh na Página

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

 

[Lucas Phillip]

Mas você não falou qual erro está acontecendo. 

Baseado apenas no seu código, assumindo que tudo esteja correto, está faltando colocar para atualizar a cada 10 segundos.

Seu JS deveria estar parecido com algo assim:

setInterval(function(){ 
	$.get(...);
}, 10000); // 1000 é 1 segundo