Comment streamer des images de diagramme en tant que FileResult à partir de la mise à jour des contrôleurs MVC via jQuery Ajax

Question

J'expérimente la méthode de Nic de diffuser des images en tant que FileResult à partir de contrôleurs. CodeProject article.

Je pensais aller encore plus loin et mettre à jour une image via jQuery.
J'ai essayé toutes sortes de façons mais je n'arrive pas à montrer l'image. Dans cet état actuel je vois tous les caractères du PNG, je pense qu'il envoie les données binaires.
Quelqu'un a des idées sur la façon de faire cela?

Vue partielle

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

page

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

Contrôleur

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

La fonction de charge jQuery exp ects pour obtenir le HTML du serveur, mais vous appelez dans une action qui retourne un flux binaire, de sorte que le flux binaire est converti en texte avant qu'il ne soit affiché en HTML.

Vous pouvez réécrire RefreshImage aussi simple que cela:

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

Tout ce que vous devez faire est de mettre à jour la SRC pour l'élément d'image. Je désactiverais également la mise en cache HTTP pour l'action afin que le navigateur ne montre pas une image mise en cache où l'URL est la même (sauf si c'est ce que vous voulez).