使用Ajax Asp.Net MVC C#更新DIV
使用Ajax Asp.Net MVC C#更新DIV
提问于 2018-01-10 01:16:26
我正在设置一个票证跟踪面板，基本上有两个东西，4个字段和1个图表。我想定期更新它们，我已经尝试过了：
<meta http-equiv="refresh" content="10" />但是，这将重新加载整个页面，并执行刷新。我需要的是在不刷新的情况下重新加载字段和图表。从我在互联网上找到的信息来看，我可以用AJAX做到这一点，但我不知道怎么做，因为我还在从开发开始。
@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>
}这是操作GetData ()的代码，我认为查询在这种情况下并不重要，所以我把这个泛型放在那里，因为我的很大：
[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);
}
} 下面是Action Index ()，它发送要在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);
}回答 1
Stack Overflow用户
发布于 2018-01-10 01:39:31
您可以使用AJAX完成此操作，如下所示：
@section scripts {
<!-- Script que carrega as informacoes do grafico-->
<script>
$(document).ready(function (){
setTimeout(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); //(1 sec) last parameter is in milliseconds.
});
</script>
}有关setTimeout的更多信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48173467
复制相关文章
相似问题
腾讯云开发者
