Question

我有一个控制器，在调用时会创建一个filecontentresult，但是当我尝试将其设置为图像源时，图像不会显示。我已经使用firebug进行调试，并且已经看到某些内容返回到视图，但看起来它认为它没有效。

控制器

  [HttpPost]
    public ActionResult BespokeAnalysis(MemberModel model)
    {

        if (ModelState.IsValid)
        {
            var CostVariations = CostVariationRepository.GetAll();
            if (model.SelectedYears != null && model.SelectedTypes != null && model.SelectedCostTypes != null)
            {
                var variations = CostVariations.Where(m => model.SelectedYears.Contains(m.Year));
                variationresults = variations.Where(m => model.SelectedTypes.Contains(m.CategoryId)).ToList();
                selectedtypes = model.SelectedCostTypes.ToList();

            }
        }

return Json(new { chartUrl = Url.Action("CreateChart", "Member", new { chartType = SeriesChartType.Column, selectedtypes = selectedtypes, variationresults = variationresults }) });
    }

剧本：

  $(function () {
        $('form').submit(function () {

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) { 

                      $('#result').html(
                            $('<img/>', {
                                src: result.chartUrl,
                                alt: 'this is a super chart'
                            })
                        );

                    }
                });
                return false;

        });
    });

观点：

          <div id="slideleft" class="tslide">
          <div id="result"></div>
          <img id="image" src="" alt="none"/>
          @using (Html.BeginForm())
          {
          <div class="inner"><a href="#" class="toggle">Parameters</a>
             <div class="dropdowntoggle">
                <div class="buttonnarrow">Select</div>
                <div class="ui-widget-content">
                    @Html.CheckBoxListFor(model => model.SelectedSectors, new MultiSelectList(Model.Sectors, "Id", "Name", Model.SelectedSectors))                          
                </div>
             </div>
              </div>
             <input type="submit" value="Create" onfocus="this.blur()" class="createbutton"/>
          </div>
          }
       </div> 

   </div>

返回ActionResult的方法

    public ActionResult CreateChart(SeriesChartType chartType)
    {
        Chart chart = new Chart();
        chart.Width = 700;
        chart.Height = 400;
        chart.BackColor = Color.FromArgb(211, 223, 240);
        chart.BorderlineDashStyle = ChartDashStyle.Solid;
        chart.BackSecondaryColor = Color.White;
        chart.BackGradientStyle = GradientStyle.TopBottom;
        chart.BorderlineWidth = 1;
        chart.Palette = ChartColorPalette.BrightPastel;
        chart.BorderlineColor = Color.FromArgb(26, 59, 105);
        chart.RenderType = RenderType.BinaryStreaming;
        chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
        chart.AntiAliasing = AntiAliasingStyles.All;
        chart.TextAntiAliasingQuality = TextAntiAliasingQuality.Normal;



        foreach (var type in selectedtypes)
        {
            switch (type)
            {
                case 1:
                    foreach (var result in variationresults)
                    {
                        Dictionary<string, double> retVal = new Dictionary<string, double>();
                        retVal.Add("Stuff1", Math.Round(result.Stuff1, 3, MidpointRounding.ToEven));
                        chart.Series.Add(CreateSeries(retVal, result.Description + type, Color.Lavender, chartType));
                    }
                    break;
                case 2:
                    foreach (var result in variationresults)
                    {
                        Dictionary<string, double> retVal = new Dictionary<string, double>();
                        retVal.Add("Stuff2", Math.Round(result.Stuff2, 3, MidpointRounding.ToEven));
                        chart.Series.Add(CreateSeries(retVal, result.Description + type, Color.Aqua, chartType));
                    }
                    break;
                case 3:
                    foreach (var result in variationresults)
                    {
                        Dictionary<string, double> retVal = new Dictionary<string, double>();
                        retVal.Add("Stuff3", Math.Round(result.Stuff3, 3, MidpointRounding.ToEven));
                        chart.Series.Add(CreateSeries(retVal, result.Description + type, Color.Azure, chartType));
                    }
                    break;
                case 4:
                    foreach (var result in variationresults)
                    {
                        Dictionary<string, double> retVal = new Dictionary<string, double>();
                        retVal.Add("Stuff4", Math.Round(result.Stuff4, 3, MidpointRounding.ToEven));
                        chart.Series.Add(CreateSeries(retVal, result.Description + type, Color.Bisque, chartType));
                    }
                    break;
                    default:
                    foreach (var result in variationresults)
                    {
                        Dictionary<string, double> retVal = new Dictionary<string, double>();
                        retVal.Add("Crew Other", Math.Round(result.Crew_Other, 3, MidpointRounding.ToEven));
                        chart.Series.Add(CreateSeries(retVal, result.Description + type, Color.Lavender, chartType));
                    }
                    break;
            }


        }

        chart.ChartAreas.Add(CreateChartArea());

        using (var ms = new MemoryStream())
       {
           chart.SaveImage(ms, ChartImageFormat.Png);
           ms.Seek(0, SeekOrigin.Begin);

           return File(ms.ToArray(), "image/png", "Variations.png");
       }                      
    }

任何帮助将不胜感激。

Answer 1

你的问题中有太多不必要的噪音。我将尝试简化一些事情，并举例说明如何使用此Chart类。

我首先编写一个自定义的ActionResult，它将Chart呈现给响应，而不是使用一些丑陋的MemoryStreams（顺便说一下，你是更直接的处理，在将它传递给FileResult之前也不会在开始时移动类）：

public class ChartResult : ActionResult
{
    private readonly Chart chart;
    public ChartResult(Chart chart)
    {
        this.chart = chart;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        var httpContext = context.RequestContext.HttpContext;
        var response = httpContext.Response;
        response.ContentType = "image/png";
        chart.SaveImage(response.OutputStream, ChartImageFormat.Png);
    }
}

接下来我们可以有一个控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult GetChartUrl()
    {
        return Json(new { chartUrl = Url.Action("Chart") });
    }

    [OutputCache(Duration = 0, Location = OutputCacheLocation.None)]
    public ActionResult Chart()
    {
        var chart = BuildChart();
        return new ChartResult(chart);
    }

    private Chart BuildChart()
    {
        Chart chart = new Chart();
        chart.Width = 700;
        chart.Height = 400;

        var series = new Series("Some stuff")
        {
            ChartType = SeriesChartType.Line,
            ChartArea = "MyArea"
        };
        for (int i = 0; i < 100; i++)
        {
            series.Points.AddXY(i, 3 * i);
        }
        chart.Series.Add(series);
        chart.ChartAreas.Add("MyArea");
        return chart;
    }
}

最后一个观点：

@using (Html.BeginForm("GetChartUrl", null))
{
    <button type="submit">Submit this form using AJAX and show chart dynamically</button>
}

<script type="text/javascript">
    $('form').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#image').html(
                    $('<img/>', {
                        src: result.chartUrl,
                        alt: 'this is a super chart'
                    })
                );
            }
        });
        return false;
    });
</script>

<div id="image"></div>

FileContentResult不在视图中显示图像

1 个答案: