如何刷新ASP.NET图表在MVC使用jQuery [英] How to refresh asp.net charts in MVC using jQuery
本文介绍了如何刷新ASP.NET图表在MVC使用jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已下载代码并遵循示例来自昆士兰的Guy
I downloaded the code and am following the sample Guy from Queensland
当我点击刷新时如何刷新图表？
以二进制形式返回PNG。
The following code returns the PNG in binary.
<input type="submit" value="Refresh" id="refreshIssueHistory" />
<div id="theImageIssueHistory">
<% Html.RenderPartial("~/Views/Issue/Charts/IssueHistoryImg.ascx"); %></div>
<script type="text/javascript">
$(document).ready(function() {
$("#refreshIssueHistory").click(function() {
RefreshImage();
});
});
function RefreshImage() {
$.ajax({
type: "POST",
url: "/Issue/" + "GetIssuesHistoryChart",
dataType: "html",
data: {
projectId: 2// changing ID here to see if the image changes
},
success: function(v) {
RefreshHistoryImage(v);
},
error: function(v, x, w) {
//Error
}
});
}
function RefreshHistoryImage(v) {
$('div#theImageIssueHistory').load('/Issue/GetIssuesHistoryChart', { projectId: 2 },
function(html) {
$('div#theImageIssueHistory')[0].value = html;
});
}
</script>
IssueHistoryImg.ascx
<img src="/Issue/GetIssuesHistoryChart" alt="My Issues" />
控制器
public FileResult GetIssuesHistoryChart(int? projectId)
{
...
System.IO.MemoryStream imageStream = new System.IO.MemoryStream();
Chart1.SaveImage(imageStream, ChartImageFormat.Png);
return new FileResult("Yo.png", "image/png", imageStream.ToArray());
}
控制器方法工作正常，只有当我单击刷新按钮不会返回我想要的。
The controller method works fine, only when I click the refresh button that it does not return what I want it to.
推荐答案
这是一个挑战，但这里是我做到了。我的关键是在refreshChart（）中添加datetime戳作为AJAX调用的一部分。
It was a challenge, but here is how I did it. The key for me was adding the datetime stamp as part of the AJAX call in refreshChart(). That change defeated any browser or proxy caching that was preventing the chart from updating.
Index.aspx
<script type="text/javascript" language="javascript">
$(document).ready(function() {
refreshChart("#chartAlerts", "/Chart/AlertsChart");
})
.everyTime(60000, function() {
refreshChart("#chartAlerts", "/Chart/AlertsChart");
});
function refreshChart(id, url) {
$(id).fadeTo(1000, 0.15).attr("src", url + "?t=" + new Date().getTime()).fadeTo(1000, 1);
}
</script>
<div class="DashboardBlock" id="block2">
<div class="DashboardBlockHeader"><h2>Alerts Summary</h2></div>
<div class="DashboardBlockContent">
<img id="chartAlerts" alt="" src="" width="460" height="225" />
</div>
</div>
Site.css
.DashboardBlock
{
border:#000000 1px solid;
margin-bottom:3px;
}
.DashboardBlockHeader
{
padding: 3px 10px 3px 10px;
color: #ffffff;
background-image:url(../../Content/images/blockheader_bkg.gif);
background-repeat: no-repeat;
cursor:move;
display:block;
}
.DashboardBlockHeader h2
{
font-size:1.09em;
margin:0px 0 0px 0;
padding:0;
}
.DashboardBlockContent
{
padding:5px 3px 2px 3px;
}
ChartController.cs
$ b
ChartController.cs
public ActionResult AlertsChart()
{
var chart = new Chart()
{
Width = 460,
Height = 225,
ImageType = ChartImageType.Png,
Palette = ChartColorPalette.BrightPastel,
BackColor = Color.WhiteSmoke,
RenderType = RenderType.BinaryStreaming,
BackGradientStyle = GradientStyle.TopBottom,
BackSecondaryColor = Color.White,
AntiAliasing = AntiAliasingStyles.All,
TextAntiAliasingQuality = TextAntiAliasingQuality.High
};
chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
var title = chart.Titles.Add("Main");
title.Text = "Alerts";
title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
title.ShadowOffset = 2;
title.ForeColor = Color.FromArgb(26, 59, 105);
title.Font = new Font("Segoe UI", 10f, FontStyle.Bold);
var area = chart.ChartAreas.Add("ChartArea1");
area.BorderColor = Color.FromArgb(64, 64, 64, 64);
area.BackSecondaryColor = Color.White;
area.BackColor = Color.WhiteSmoke;
area.ShadowColor = Color.Transparent;
area.Area3DStyle.PointDepth = 100;
area.Area3DStyle.PointGapDepth = 100;
area.Area3DStyle.Rotation = 10;
area.Area3DStyle.Enable3D = true;
area.Area3DStyle.Inclination = 40;
area.Area3DStyle.IsRightAngleAxes = false;
area.Area3DStyle.WallWidth = 0;
area.Area3DStyle.IsClustered = false;
area.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
area.AxisY.LabelStyle.Font = new Font("Trebuchet MS", 8.25f, FontStyle.Bold);
area.AxisY.LabelStyle.Format = "$#,##0";
area.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
area.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
area.AxisX.LabelStyle.Font = new Font("Trebuchet MS", 8.25f, FontStyle.Bold);
area.AxisX.LabelStyle.Format = "MM/dd";
area.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
var legend = chart.Legends.Add("Default");
legend.Enabled = true;
legend.IsTextAutoFit = true;
legend.BackColor = Color.Transparent;
legend.Font = new Font("Segoe Condensed", 8f, FontStyle.Regular);
legend.Docking = Docking.Right;
// Load from the database
var history = GetAlertHistory();
if (history.RowCount > 0)
{
chart.DataBindTable(history.DefaultView, AlertHistoryViewSchema.AlertName.FieldName);
chart.Series[0].ChartType = SeriesChartType.Pie;
chart.Series[0].IsValueShownAsLabel = true;
chart.Series[0]["PieLabelStyle"] = "Outside";
chart.Series[0].Font = new Font("Segoe Condensed", 8.25f, FontStyle.Regular);
history = GetAlertHistorySummary();
DateTime lastAlertDate = Convert.ToDateTime(history.GetColumn("LastAlertDate"));
title = chart.Titles.Add(String.Format("Total Alerts: {0:#,##0} Last Alert Date: {1:MM/dd/yyyy h:mm tt}", history.GetColumn("AlertCount"), lastAlertDate));
title.Font = new Font("Segoe Condensed", 10f, FontStyle.Regular);
title.ForeColor = lastAlertDate - DateTime.Now > TimeSpan.FromMinutes(2) ? Color.Red : Color.Black;
}
else
{
chart.Titles.Add("There are no alerts.");
}
var ms = new MemoryStream();
chart.SaveImage(ms, ChartImageFormat.Png);
HttpContext.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
return File(ms.GetBuffer(), @"image/png");
}
private AlertHistoryView GetAlertHistory()
{
var obj = new AlertHistoryView();
obj.DatabaseInstanceName = "Alerts";
string serialData = HttpContext.Cache["_alertHistory"] as string;
if (string.IsNullOrEmpty(serialData))
{
try
{
obj.Query.AddResultColumn(AlertHistoryViewSchema.AlertName);
obj.Aggregate.AlertID.Function = AggregateParameter.Func.Count;
obj.Aggregate.AlertID.Alias = "AlertCount";
obj.Where.Date.Value = DateTime.Now.ToShortDateString();
obj.Where.Date.Operator = WhereParameter.Operand.GreaterThanOrEqual;
obj.Query.AddGroupBy("AlertName");
obj.Query.AddOrderBy("AlertName", WhereParameter.Dir.ASC);
obj.Query.Load();
HttpContext.Cache.Insert("_alertHistory", obj.Serialize(), null, DateTime.Now.AddMinutes(15), Cache.NoSlidingExpiration);
}
catch { }
}
else
{
obj.Deserialize(serialData);
}
return obj;
}
解决方案中使用的其他工具（但与回答问题无关）：
Other tools used in the solution (but irrelevant to answer the question):
- JQuery定时器插件（ http://plugins.jquery.com/project/timer ）
- EasyObjects.NET，我的O / RM从数据库检索数据（ http://www.easyobjects.net ）
- ASP.NET图表控件（显然; ）
这篇关于如何刷新ASP.NET图表在MVC使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
