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

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

所以我尝试了 System.Web.Helpers 命名空间中的 Chart 助手.

根据www.asp/web-pages/tutorials/data/7-displaying-data-in-a-chart

我在 .cshtml 视图中制作图表，但我想将其保留在 ViewModel 中.

没问题，除非我尝试在网站中将其呈现为较小的图像.

我认为最简洁的解决方案是创建一个共享的局部视图来渲染模型中的图形

_graph.cshtml

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

然后在适当的网站中以某种方式呈现这个部分视图.我尝试了几个版本，但似乎无法正常工作.

网站.cshtml

<h2>图上方的一些标题</h2><img src="@Html.Partial("_graph", Model.TheChart)"/>

这不起作用，我不确定如何执行此操作.现在只想到让所有有图表的模型都继承一个暴露图表的接口，让它成为_graph.cshtml的模型.

但不确定这是否使用模型.

有什么意见吗?

解决方案

<h2>图上方的一些标题</h2><img src="@Url.Action("DrawChart")"/>

然后你可以有一个控制器动作:

public ActionResult DrawChart(){MyViewModel 模型 = ...返回视图(模型)；}

和将绘制图表的相应视图(DrawChart.cshtml):

@model MyViewModel@{//TODO:使用模型中的数据绘制图表var myChart = 新图表(宽度:600，高度:400).AddTitle("图表标题").AddSeries(name: "员工",xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },yValues: new[] { "2", "6", "4", "5", "3" }).写();}

和渲染结果:

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

according to www.asp/web-pages/tutorials/data/7-displaying-data-in-a-chart

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

@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

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

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.

Any opinions?

解决方案

<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); }

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(); }

and the rendered result: