Javascript FileContentResult未在视图中显示图像
我有一个控制器,当调用它时,它会创建一个filecontentresult,但是当我尝试将它设置为图像源时,图像不会显示。我曾经使用firebug进行调试,看到一些东西返回到视图中,但它似乎认为它是无效的 控制器Javascript FileContentResult未在视图中显示图像,javascript,jquery,asp.net-mvc,asp.net-mvc-4,Javascript,Jquery,Asp.net Mvc,Asp.net Mvc 4,我有一个控制器,当调用它时,它会创建一个filecontentresult,但是当我尝试将它设置为图像源时,图像不会显示。我曾经使用firebug进行调试,看到一些东西返回到视图中,但它似乎认为它是无效的 控制器 [HttpPost] public ActionResult BespokeAnalysis(MemberModel model) { if (ModelState.IsValid) { var CostVa
[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;
});
});
$(函数(){
$('form')。提交(函数(){
$.ajax({
url:this.action,
类型:this.method,
数据:$(this).serialize(),
成功:函数(结果){
$('#result').html(
$('
观点:
@使用(Html.BeginForm())
{
挑选
@CheckBoxListFor(model=>model.SelectedSectors,新的MultiSelectList(model.Sectors,“Id”,“Name”,model.SelectedSectors))
}
方法返回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");
}
}
public ActionResult CreateChart(serieChartType chartType)
{
图表=新图表();
图表宽度=700;
图表高度=400;
chart.BackColor=Color.FromArgb(211223240);
chart.BorderlineDashStyle=ChartDashStyle.Solid;
chart.BackSecondaryColor=Color.White;
chart.BackGradientStyle=GradientStyle.TopBottom;
chart.BorderlineWidth=1;
chart.palete=ChartColorPalette.BrightPastel;
chart.BorderlineColor=Color.FromArgb(26,59,105);
chart.RenderType=RenderType.BinaryStreaming;
chart.BorderSkin.SkinStyle=BorderSkinStyle.Emboss;
chart.antialasing=antialasingstyles.All;
chart.TextAntiAliasingQuality=TextAntiAliasingQuality.Normal;
foreach(选定类型中的变量类型)
{
开关(类型)
{
案例1:
foreach(变量结果中的var结果)
{
Dictionary retVal=新字典();
retVal.Add(“Stuff1”,Math.Round(result.Stuff1,3,middpointrounding.ToEven));
chart.Series.Add(CreateSeries(retVal,result.Description+type,Color.Lavender,chartType));
}
打破
案例2:
foreach(变量结果中的var结果)
{
Dictionary retVal=新字典();
retVal.Add(“Stuff2”,Math.Round(result.Stuff2,3,middpointrounding.ToEven));
chart.Series.Add(CreateSeries(retVal,result.Description+type,Color.Aqua,chartType));
}
打破
案例3:
foreach(变量结果中的var结果)
{
Dictionary retVal=新字典();
retVal.Add(“Stuff3”,Math.Round(result.Stuff3,3,middpointrounding.ToEven));
chart.Series.Add(CreateSeries(retVal,result.Description+type,Color.Azure,chartType));
}
打破
案例4:
foreach(变量结果中的var结果)
{
Dictionary retVal=新字典();
retVal.Add(“Stuff4”,Math.Round(result.Stuff4,3,middpointrounding.ToEven));
chart.Series.Add(CreateSeries(retVal,result.Description+type,Color.Bisque,chartType));
}
打破
违约:
foreach(变量结果中的var结果)
{
Dictionary retVal=新字典();
retVal.Add(“Crew-Other”,Math.Round(result.Crew_-Other,3,middpointrounding.ToEven));
chart.Series.Add(CreateSeries(retVal,result.Description+type,Color.Lavender,chartType));
}
打破
}
}
添加(CreateChartArea());
使用(var ms=new MemoryStream())
{
SaveImage(ms,chartmageformat.Png);
Seek女士(0,SeekOrigin.Begin);
返回文件(ms.ToArray(),“image/png”,“Variations.png”);
}
}
任何帮助都将不胜感激。您的问题中有太多不必要的杂音。我将尝试简化问题,并举例说明如何使用此图表类
首先,我将编写一个定制的ActionResult,将图表呈现给响应,而不是使用一些难看的MemoryStream(在将其传递给FileResult
类之前,您正在处理这些内存流,也不会在开始时移动它们):
接下来我们可以有一个控制器:
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;
}
}
公共类HomeController:控制器
{
公共行动结果索引()
{
返回视图();
}
[HttpPost]
公共操作结果GetChartUrl()
{
返回Json(新的{chartUrl=Url.Action(“Chart”)});
}
[OutputCache(持续时间=0,位置=OutputCacheLocation.None)]
公共行动结果表()
{
var chart=BuildChart();
返回新的ChartResult(图表);
}
私有图表BuildChart()
{
图表=新图表();
图表宽度=700;
图表高度=400;
var系列=新系列(“一些东西”)
{
ChartType=SerieChartType.Line,
ChartArea=“MyArea”
};
对于(int i=0;i<100;i++)
{
系列点AddXY(i,3*i);
}
图表.系列.添加(系列);
图表。图表区域。添加(“MyArea”);
收益表;
}
}
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>