Gráficos do ASP.NET - Obter via jQuery no IE 7 faz com que a imagem não carregue
-
05-07-2019 - |
Pergunta
Estou usando o Controles de gráficos do ASP.NET e asp.net MVC.
Estou tentando ter um gráfico exibido em uma página, o usuário pode alterar vários dados associados a este gráfico e pressionar um botão que executará uma operação pós e retornará um gráfico recém -renderizado. Isso é atualizado via jQuery, que carrega uma visualização parcial que contém o gráfico.
O problema que estou tendo é que, no IE 7, recebo a imagem não foi possível encontrar o ícone. Bizarramente, funciona bem no Firefox!
O processo de atualização do gráfico:
- Envie novos parâmetros em uma postagem
- Aplicativo Os parâmetros alterados no objeto do gráfico
- O controlador envia um objeto de gráfico para visualização parcial que o torna como um controle
- O jQuery então carrega nesta visualização parcial. No IE 7, recebo a imagem que não encontra o ícone.
Aqui está o código usado na visão parcial para renderizar o objeto do gráfico:
if (Model.Chart != null)
{
Model.Chart.Page = this.Page;
System.Web.UI.DataVisualization.Charting.Chart Chart1 = Model.Chart;
using (HtmlTextWriter writer = new HtmlTextWriter(this.Response.Output))
{
try
{
Chart1.ImageType = System.Web.UI.DataVisualization.Charting.ChartImageType.Jpeg;
Chart1.RenderControl(writer);
}
catch (Exception ex)
{
writer.WriteEncodedText(ex.Message);
}
}
}
Felicidades!
O jQuery que carrega esses gráficos é o seguinte:
function PostWidgetDataOverride(ChartID) {
$.ajax({
url: "/Home/GetChart",
type: "POST",
dataType: "HTML",
data: { ChartID: ChartID, SeriesID: $('.SeriesID').val(), ParameterDefaults: $('.parameterDefault').serialize(), Time: getTimeStamp() },
success: UpdateChart
});
}
function UpdateChart(ChartContent) {
$("#widgetConfig").dialog("close");
var existingChart = CheckIfWidgetIsOnPage($(ChartContent).attr("id"))
if (existingChart !== undefined) {
existingChart.fadeOut("slow", function() { existingChart.replaceWith(ChartContent); }).fadeIn("slow");
}
else {
$(ChartContent).appendTo($("#dashboardArea")).fadeIn("slow");
}
}
Solução
Eu acho que o problema é como você obtém a imagem. A partir do código que você postou, parece que você está recebendo os dados da imagem real por meio de um download de Ajax e inserindo os novos dados da imagem no DOM. Isso pode funcionar para o Firefox, mas não para o IE (PS nunca tentou). De qualquer forma, assumindo que o IE não gosta disso, seria melhor apontar a imagem em um manipulador de imagem através do atributo de origem do elemento de imagem. Quando você precisa alterar a imagem, basta alterar os parâmetros no URL enviado ao manipulador, quando isso altera o IE e o Firefox farão uma solicitação para a nova imagem. Por exemplo:
O html
<img src="./chart.aspx?SeriesId=456&ChartId=123&Time=20091021155300" id="chart" />
O JQuery quando você precisa atualizar o gráfico:
function UpdateChart(chartId, seriesId, time){
$("#chart").attr("src","./chart.aspx?SeriesId="+seriesId+"&ChartId="+chartId+"&Time="+time);
}
Outras dicas
Você pode escrever um serviço para limpar imagens com x dias ou pode usar #seq (maxfiles, minutos) para definir o vencimento, mas isso não é realmente flexível com a nomeação.
Eu consegui funcionar alterando o ImageStorageMode para:
Chart1.ImageStorageMode = System.Web.UI.DataVisualization.Charting.ImageStorageMode.UseImageLocation
Mas agora fica em uma pasta. Eu não quero uma pasta entupindo com imagens ...