将图表系列从控制器传递到 Razor 视图

本文关键字：Razor 视图 控制器 系列 | 更新日期: 2023-09-27 18:31:24

我唱歌asp.net mvc 4并放置了一个图表。 我想从controller加载它的系列. 我该怎么做？ 请任何人都可以用一段代码解释一下。

索引视图 

@{
var myChart = new Chart(width: 600, height: 400)
    .AddTitle("Chart Title")
    .AddSeries(
        name: "Views",
        xValue: new[] {  "Monday", "Tuesday", "Wendesday", "Thursday", "Friday" },
        yValues: new[] { "2", "6", "4", "5", "3" })
    .AddSeries(
        name: "Downloads",
        xValue: new[] { "Monday", "Tuesday", "Wendesday", "Thursday", "Friday" },
        yValues: new[] { "1", "2", "3", "4", "5" })
        .Write();
}

控制器

    public ActionResult Index()
    {
        return View();
    }

将图表系列从控制器传递到 Razor 视图

这是绝对可能的。让我们首先创建一个新的视图模型来表示图表数据。

public class ChartSeriesData
{
    public string[] XValues { set; get; }
    public string[] YValues { set; get; }
    public string Name { set; get; }
}
public class MyChartData
{
    public List<ChartSeriesData> Series { set; get; }
    public string Name { set; get; }
}

在您的 Action 方法中，创建一个对象，如果 MyChartData 类，设置不同的属性值并将其发送到视图。

public ActionResult MyChart()
{
    var vm= new MyChartData { Name = "MyChartTitle",Series = new List<ChartSeriesData>()};
    vm.Series.Add(new ChartSeriesData
    {
        Name = "View",
        XValues = new[] { "Monday", "Tuesday", "Wendesday", "Thursday", "Friday" },
        YValues = new[] { "2", "6", "4", "5", "3" }}
    );
    vm.Series.Add(new ChartSeriesData
    {
        Name = "Downloads",
        XValues = new[] { "Monday", "Tuesday", "Wendesday", "Thursday", "Friday" },
        YValues = new[] { "1", "2", "6", "5", "3" }
    });
    return View(vm);
}

现在，在您的视图中，该视图被强类型化为我们的MyChartData视图模型，我们将循环访问 Series 属性并调用 AddSeries 方法。

@model ReplaceWithYourNameSpaceHere.MyChartData
@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle(Model.Name);
    foreach (var item in Model.Series)
    {
        myChart.AddSeries(name: item.Name, xValue: item.XValues, yValues: item.YValues);
    }
    myChart.Write();
}

如果要将图表包含在另一个 razor 视图中，可以使用图像标记并将src属性值设置为 MyChart 操作方法。 

<img src="@Url.Action("MyChart","Home")" alt="Some alt text" />

假设MyChart HomeController 中存在操作方法。

相关文章：