如何使用jQuery刷新MVC中的asp.net图表_Jquery_Asp.net Mvc_Charts

如何使用jQuery刷新MVC中的asp.net图表

jquery asp.net-mvc charts

如何使用jQuery刷新MVC中的asp.net图表,jquery,asp.net-mvc,charts,Jquery,Asp.net Mvc,Charts,我下载了代码并遵循示例单击“刷新”时如何刷新图表？下面的代码以二进制形式返回PNG <input type="submit" value="Refresh" id="refreshIssueHistory" /> <div id="theImageIssueHistory"> <% Html.RenderPartial("~/Views/Issue/Charts/IssueHistoryImg.ascx"); %></div> <scr

我下载了代码并遵循示例

单击“刷新”时如何刷新图表？

下面的代码以二进制形式返回PNG

<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>

控制器方法工作正常，只有当我单击“刷新”按钮时，它才不会返回我希望它返回的内容。

这是一个挑战，但我是这样做的。对我来说，关键是在refreshChart（）中添加日期时间戳作为AJAX调用的一部分。该更改使阻止图表更新的浏览器或代理缓存失效

Index.aspx

<img src="/Issue/GetIssuesHistoryChart" alt="My Issues" />

<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>

ChartController.cs

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

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

解决方案中使用的其他工具（但与回答问题无关）：

JQuery计时器插件（）
EasyObjects.NET，用于从数据库检索数据的我的O/RM（）
ASP.NET图表控件（显然；）

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