Question

控制器：

public FileResult CreateChart()
{
        Chart chart = new Chart
        {
            ImageType = ChartImageType.Jpeg,
            ImageStorageMode = ImageStorageMode.UseImageLocation,
            Width = new Unit(600),
            Height = new Unit(400)
        };
        chart.Series.Add("Years");
        chart.Series.Add("Months");
        chart.Legends.Add("Test");
        Series seriesDetail = new Series
        {
            Name = "Result Chart",
            IsValueShownAsLabel = false,
            Color = Color.FromArgb(198, 99, 99),
            ChartType = SeriesChartType.Bar,
            BorderWidth = 2
        };

        foreach (var result in CurrentMember.Section.Filters)
        {
            DataPoint point = new DataPoint
            {
                AxisLabel = result.Id.ToString(CultureInfo.InvariantCulture),
                YValues = new[] { double.Parse(result.Id.ToString(CultureInfo.InvariantCulture)) }
            };
            seriesDetail.Points.Add(point);
        }
        seriesDetail.ChartArea = "Result Chart";

        System.IO.MemoryStream ms = new System.IO.MemoryStream();
        chart.SaveImage(ms, ChartImageFormat.Png);
        return new FileContentResult(ms.GetBuffer(), @"image/png");

}

部分视图：

主视图：

@Ajax.ActionLink("Press me","CreateChart", "Reports",new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "dataTable"
    })

<div style="overflow-x: auto; direction: rtl; overflow-x: auto;" id="dataTable">

</div>

Ajax请求：

 $('div#dataTable').load('/reports/createchart/', 
   function(html) {
       $("#imgHistoryChart")[0].src = "/reports/createchart/";

   });

结果：

�PNG  IHDRX�r5�sRGB���gAMA���a pHYs���o�d�IDATx^��1à�7ݙ� *��,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�b�,��`� &X1�� @L�R���4��$ߡIEND�B`�

问题：如何修复它，我能够看到Image而不是这个？

Answer 1

为什么使用AJAX链接？重点是什么？一个简单的锚可以很好地完成工作：

@Html.ActionLink("Press me", "CreateChart", "Reports", null, new { id = "showChart" })

然后在单独的javascript文件中订阅点击处理程序，并将src元素的<img>属性指向您希望图表显示到控制器操作的位置：

$(function() {
    $('#showChart').click(function() {
        $('#imgHistoryChart').attr('src', this.href);
        return false;
    });
});

此外，您尚未显示此imgHistoryChart的内容，但它应该是<img>元素。

如何通过Ajax请求呈现图表？

1 个答案: