从控制器传递图表系列的Razor视图 [英] Passing Chart Series from Controller to Razor View

问题描述

我唱ü asp.net mvc的4 ，并放置在视图的图表。我想从控制器加载其系列产品。我该怎么办呢？请任何人都可以用一张code的解释。

索引视图

  @ {
VAR myChart =新图（宽度：600，高度：400）
    .AddTitle（图表标题）
    .AddSeries（
        名称：视图，
        xValue：新[] {星期一，星期二，星期三，星期四，星期五}，
        yValues​​：新[] {2，6，4，5，3}）
    .AddSeries（
        名称：下载，
        xValue：新[] {星期一，星期二，星期三，星期四，星期五}，
        yValues​​：新[] {1，2，3，4，5}）        。写（）;
}
 

控制器

 公众的ActionResult指数（）
    {
        返回查看（）;
    }
 

解决方案

这是绝对可能的。让我们通过创建一个新的视图模型重新present图表数据开始。

 公共类ChartSeriesData
{
    公共字符串[] {XValues​​设置;得到; }
    公共字符串[] {YValues​​设置;得到; }
    公共字符串名称{设置;得到; }
}公共类MyChartData
{
    公开名单＆LT; ChartSeriesData＆GT;系列{设置;得到; }
    公共字符串名称{设置;得到; }
}
 

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

 公众的ActionResult MyChart（）
{
    VAR VM =新MyChartData {名称=MyChartTitle系列=新的List＆LT; ChartSeriesData＆GT;（）};
    vm.Series.Add（新ChartSeriesData
    {
        NAME =查看，
        XValues​​ =新[] {星期一，星期二，星期三，星期四，星期五}，
        YValues​​ =新[] {2，6，4，5，3}}
    ）;    vm.Series.Add（新ChartSeriesData
    {
        NAME =下载，
        XValues​​ =新[] {星期一，星期二，星期三，星期四，星期五}，
        YValues​​ =新[] {1，2，6，5，3}
    }）;
    返回查看（VM）;
}
 

现在在你看来，这是强类型为我们的 MyChartData 视图模型，我们将遍历的系列财产，并调用 AddSeries 方法。

  @model ReplaceWithYourNameSpaceHere.MyChartData
@ {
    VAR myChart =新图（宽度：600，高度：400）
        .AddTitle（Model.Name）;    的foreach（在Model.Series VAR项）
    {
        myChart.AddSeries（名称：item.Name，xValue：item.XValues​​，yValues​​：item.YValues​​）;
    }    myChart.Write（）;
}
 

如果您想在另一剃刀查看图表，你可以使用一个图像标记，并设置的src 属性值为MyChart操作方法。

 ＆LT; IMG SRC =@ Url.Action（MyChart，家），ALT =一些替代文本/＆GT;
 

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

I am u sing asp.net mvc 4 and placed a chart on view. i want to load its series from controller. how can i do that ? please can anyone explain it with piece of code.

Index View

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

Controller

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

解决方案

It is absolutely possible. Let's start by creating a new view model to represent the chart data.

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

And in your Action method, create an object if the MyChartData class, Set the different property values and send it to the view.

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

Now in your view ,which is strongly typed to a our MyChartData view model, we will iterate through the Series property and call the AddSeries method.

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

If you want to include the chart in another razor view, you can use an image tag and set the src attribute value to MyChart action method.

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

Assuming MyChart action method exists in HomeController.

这篇关于从控制器传递图表系列的Razor视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！