ASP.NET MVC:显示来自模型的多个图表
ASP.NET MVC: Displaying multiple Charts from Model
我想要一个包含多个图表的网页。图表的数据驻留在我的模型中,我在控制器中创建并传递给视图。但是,我 运行 在视图中创建图表时遇到了麻烦。
Microsoft 创建此 class 以在 MVC 中创建基本图表:
https://msdn.microsoft.com/en-us/library/system.web.helpers.chart%28v=vs.111%29.aspx
它有它的怪癖。例如,如果你想显示多个图表,你需要从视图调用回控制器。 (在 "Displaying Charts Inside a Web Page" 部分中有解释:http://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart)
基本上您需要使用@Url.Action("MakeChart") 作为HTML 图片标签的源代码。但是,如何将视图中的模型传递回控制器以创建图像?如果我尝试通过@Url.Action 传递模型,则该模型是空引用。
哇,我试着按照他们给出的指示去做,但也被难住了。
最后我不得不这样做。
控制器
public ActionResult MakeChart()
{
return this.View(new Employees());
}
public ActionResult ShowChart()
{
return this.View(new Employees());
}
ShowChart.cshtml
@model MyDashboard.Models.Employees
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Chart Example</title>
</head>
<body>
<h1>Chart Example</h1>
<p>
The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
in this page.
</p>
@*<p><img src="MakeChart.cshtml" /> </p>*@
<img src="@Url.Action("MakeChart", new { model = @Model })" />
</body>
</html>
MakeChart.cshtml
@model MyDashboard.Models.Employees
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: @Model.Names,
yValues: @Model.Ids)
.Write();
}
模型 = 员工
public class Employees
{
public string[] Names { get; set; }
public string[] Ids { get; set; }
public Employees()
{
this.Names = new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" };
this.Ids = new[] { "2", "6", "4", "5", "3" };
}
}
结果
我想要一个包含多个图表的网页。图表的数据驻留在我的模型中,我在控制器中创建并传递给视图。但是,我 运行 在视图中创建图表时遇到了麻烦。
Microsoft 创建此 class 以在 MVC 中创建基本图表: https://msdn.microsoft.com/en-us/library/system.web.helpers.chart%28v=vs.111%29.aspx
它有它的怪癖。例如,如果你想显示多个图表,你需要从视图调用回控制器。 (在 "Displaying Charts Inside a Web Page" 部分中有解释:http://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart)
基本上您需要使用@Url.Action("MakeChart") 作为HTML 图片标签的源代码。但是,如何将视图中的模型传递回控制器以创建图像?如果我尝试通过@Url.Action 传递模型,则该模型是空引用。
哇,我试着按照他们给出的指示去做,但也被难住了。
最后我不得不这样做。
控制器
public ActionResult MakeChart()
{
return this.View(new Employees());
}
public ActionResult ShowChart()
{
return this.View(new Employees());
}
ShowChart.cshtml
@model MyDashboard.Models.Employees
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Chart Example</title>
</head>
<body>
<h1>Chart Example</h1>
<p>
The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
in this page.
</p>
@*<p><img src="MakeChart.cshtml" /> </p>*@
<img src="@Url.Action("MakeChart", new { model = @Model })" />
</body>
</html>
MakeChart.cshtml
@model MyDashboard.Models.Employees
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: @Model.Names,
yValues: @Model.Ids)
.Write();
}
模型 = 员工
public class Employees
{
public string[] Names { get; set; }
public string[] Ids { get; set; }
public Employees()
{
this.Names = new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" };
this.Ids = new[] { "2", "6", "4", "5", "3" };
}
}
结果