在模型的局部视图中显示System.Web.Helpers.Chart

本文介绍了在模型的局部视图中显示System.Web.Helpers.Chart的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我在System.Web.Helpers命名空间中尝试了图表帮助器。

So I was trying out the Chart helpers in the System.Web.Helpers namespace.

根据 www.asp/web-pages/tutorials/data/7-displaying-数据中的图表

我在.cshtml视图中创建图表，但是我想把它保存在ViewModel中。

I make the chart in a .cshtml view but I wanted to keep it in the ViewModel instead.

没有问题，除非我试图在网站中将其渲染为较小的图片。

No problem except for when I'm trying to render it as a smaller image in the website.

我以为最干净解决方案是创建一个共享的局部视图以从模型渲染图形

I thought the cleanest solution would be to create one shared partial view to render graphs from models

_graph.cshtml

_graph.cshtml

@model System.Web.Helpers.Chart @Model.Write()

然后在适当的网站中呈现这个局部视图。我尝试了几个版本，但似乎不能让它工作。

And then render this partial view somehow in the proper websites. I tried a few versions but can't seem to get it to work.

Website.cshtml

Website.cshtml

<div> <h2>Some header above a graph</h2> <img src="@Html.Partial("_graph", Model.TheChart)" /> </div>

这不起作用，我不知道该怎么做。只有想到我可以想到现在是使所有模型与图表继承一个接口，公开图表，并让它是_graph.cshtml的模型。

This doesn't work and I'm not certain how to do this. Only think I can think of now is making all models with charts inherit an Interface that exposes Chart and let that be the model for _graph.cshtml.

<img src="_graph.cshtml" />

但不知道这是否使用模型。

But not sure if the this uses the Model.

任何意见？

推荐答案

<div> <h2>Some header above a graph</h2> <img src="@Url.Action("DrawChart")" /> </div>

，然后您可以有一个控制器操作：

and then you could have a controller action:

public ActionResult DrawChart() { MyViewModel model = ... return View(model); }

和一个相应的视图绘制图表（ DrawChart.cshtml ）：

and a corresponding view that will draw the chart (DrawChart.cshtml):

@model MyViewModel @{ // TODO: use the data from the model to draw a chart var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .AddSeries( name: "Employee", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); }

和渲染结果：

>