在Razor视图中插入图表会从生成的HTML中删除所有其他内容，断开浏览器链接仪表板，在浏览器中禁用源视图

Question

我在Razor View中插入了图表。在此之前它已正确显示。

我已插入此图表：

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

    @*}*@
</div>

之后，网站中只有可见内容是此图表，生成的视图看起来像这样（其他一切都消失了）。

我无法在浏览器中打开网站的源代码（仅限F12），也使浏览器链接仪表板失去与浏览器的连接。

如何将此图表显示为Razor视图中的任何其他元素？

Answer 1

我的解决方案是创建一个单独的视图，在其中放置图表代码，然后调用一个控制器方法，该方法将视图作为图像源返回。例如：

查看内容（您想要图表的视图）：

...code...
<!--Graph-->
<img src='@Url.Action("ChartMain", "Subject")'/>
...rest of code...

控制器方法：

public ActionResult ChartMain()
{
    //*****Your data*****//
    ViewBag.Data = data;
    ViewBag.Names = names;
    return View();
}

查看ChartMain的内容：

@{
       var myChart = new Chart(width: 600, height: 400)
       .AddTitle("Chart Title")
       .AddSeries(
          name: "Employee",
          xValue:  @ViewBag.Names,
          yValues: ViewBag.Names)
       .Write();
     }