Gráficos ASP.Net: la obtención a través de jQuery en IE 7 hace que la imagen no se cargue
-
05-07-2019 - |
Pregunta
Estoy usando el Controles de gráficos ASP.Net y ASP.Net MVC.
Estoy tratando de mostrar un gráfico en una página, el usuario puede cambiar varios datos asociados con este gráfico y luego presionar un botón que realizará una operación POST y luego devolverá un gráfico recién renderizado. Esto se actualiza a través de jQuery, que carga una vista parcial que contiene el gráfico.
El problema que tengo es que en IE 7 obtengo el icono de la imagen no se pudo encontrar. ¡Extrañamente funciona bien en Firefox!
El proceso de actualización del gráfico:
- Enviar nuevos parámetros en una POST
- La aplicación cambió los parámetros en el objeto gráfico
- El controlador envía el Objeto del gráfico a la Vista parcial, que lo representa como un control
- jQuery luego se carga en esta vista parcial. En IE 7 obtengo el icono de imagen no encontrada.
Aquí está el código utilizado en la Vista parcial para representar el objeto del 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);
}
}
}
¡Salud!
El jQuery que carga estos gráficos es el siguiente:
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");
}
}
Solución
Creo que el problema es cómo se obtiene la imagen. Según el código que publicó, parece que obtiene los datos de la imagen real a través de una descarga ajax y luego inserta los nuevos datos de la imagen en el DOM. Esto podría funcionar para Firefox, pero no para IE (P.S nunca lo intentó tampoco). De todos modos, suponiendo que a IE no le guste esto, sería mejor apuntar la imagen a un controlador de imagen a través del atributo de origen del elemento de imagen. Cuando necesite cambiar la imagen, simplemente cambie los parámetros en la url enviada al controlador, cuando esto cambie IE y Firefox harán una solicitud para la nueva imagen. Por ejemplo:
El HTML
<img src="./chart.aspx?SeriesId=456&ChartId=123&Time=20091021155300" id="chart" />
El de jQuery cuando necesita actualizar el gráfico:
function UpdateChart(chartId, seriesId, time){
$("#chart").attr("src","./chart.aspx?SeriesId="+seriesId+"&ChartId="+chartId+"&Time="+time);
}
Otros consejos
puede escribir un servicio para limpiar imágenes que tienen x días de antigüedad o puede usar #SEQ (maxFiles, minutos) para establecer la caducidad, pero eso no es realmente flexible con los nombres.
Lo hice funcionar cambiando ImageStorageMode a:
Chart1.ImageStorageMode = System.Web.UI.DataVisualization.Charting.ImageStorageMode.UseImageLocation
pero ahora se cuelga en una carpeta. No quiero que una carpeta se obstruya con imágenes ...