Как обновить asp.net диаграммы в MVC с помощью JQuery

Я скачал код и я следую образца Guy from Queensland Как обновить asp.net диаграммы в MVC с помощью JQuery

Как я могу обновить график, когда я нажимаю Обновить?

Следующий код возвращает 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>

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

Метод контроллер работает отлично, только при нажатии на кнопку обновления, что она не возвращает то, что я хочу это к.

источник

2009-08-07 Picflight

Это был вызов, но вот как я это сделал. Ключ для меня заключался в добавлении штампа даты и времени в качестве части вызова AJAX в refreshChart(). Это изменение побеждало любое кеширование браузера или прокси, которое препятствовало обновлению диаграммы.

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

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

Другие инструменты U СЕПГ в растворе (но не имеет значение для ответа на вопрос):

JQuery плагин таймер (http://plugins.jquery.com/project/timer)
EasyObjects.NET, мой O/RM для извлечения данных из базы данных (http://www.easyobjects.net)
ASP. NET управления диаграммами (очевидно;)

источник

2010-02-19 02:36:56 mgnoonan

Как обновить asp.net диаграммы в MVC с помощью JQuery

ответ

Смежные вопросы