Как транслировать графические изображения в виде FileResult из обновления контроллеров MVC через jQuery Ajax

Question

Я экспериментирую с методом потоковой передачи изображений от Nic в виде FileResult с контроллеров. CodeProject артикул .

Я думал, что сделаю еще один шаг и получу обновление изображения через jQuery.
Я перепробовал все виды способов, но не могу получить изображение для показа. В этом текущем состоянии я вижу все символы PNG, я думаю, что он отправляет двоичные данные.
У кого-нибудь есть идеи, как это сделать?

Частичное представление

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<img src="/Home/GetHistoryChart" alt="My Chart" id="imgHistoryChart" />

Страница

<input id="begindate" type="text" readonly="readonly" style="width:70px;" />
<input id="enddate" type="text" readonly="readonly" style="width:70px;"  />
<input type="submit" value="Refresh" id="refreshHistory" />
<div type="text" id="datepicker"></div>
<div id="theImageHistory">
<% Html.RenderPartial("~/Views/Home/Charts/HistoryImg.ascx"); %></div>
<%--Gets the partial view shown above--%>
</div>

<script type="text/javascript">
$(document).ready(function() {
 $("#refreshHistory").click(function() {
        var fromDate = $("#begindate").val();
        var toDate = $("#enddate").val();
        RefreshImage(fromDate, toDate);
    });
});
function RefreshImage(from, to) {
 $('div#theImageHistory').load('/Home/GetHistoryChart', { fromDate: '8/1/2009', toDate : '8/24/2009' },
    function(html) {
        //$('div#theImageHistory')[0].value = html;
        alert('Do I get here');

    });
}
</script>

Контроллер

public FileResult GetHistoryChart(string? fromDate, string? toDate)
{
 //  code...
 System.IO.MemoryStream imageStream = new System.IO.MemoryStream();
        Chart1.SaveImage(imageStream, ChartImageFormat.Png);
        return new FileResult("Yo.png", "image/png", imageStream.ToArray());
}

Answer 1

Функция загрузки jQuery ожидает получения HTML с сервера, но вы вызываете действие, которое возвращает двоичный поток, поэтому двоичный поток преобразуется в текст, прежде чем он отобразится в виде HTML.

Вы можете переписать RefreshImage так же просто, как это:

function RefreshImage(from, to) {
    $('imgHistoryChart')[0].src = '/Home/GetHistoryChart?' +
                                  'fromDate=' + escape(from) + 
                                  '&toDate=' + escape(to);
}

Все, что вам действительно нужно сделать, это обновить SRC для элемента изображения. Я бы также отключил HTTP-кэширование для этого действия, чтобы браузер не отображал кэшированное изображение, где URL-адрес одинаков (если только это не то, что вам нужно).