c# - MVC 图表仅显示文本流

Question

我正在尝试将某种仪表板放入我的 MVC 应用程序中，但我无法让它正确呈现图表。它似乎只是显示字节流而不是图像。

在我的 Index 主页面上，我有一个按钮，该按钮将发回 Controller 以获取数据(本例中为示例数据)，然后更新结果部分。

DataPoint.cs

public class DataPoint
{
    public DateTime DateMark { get; set; }
    public int Count { get; set; }
}

Index.cshtml

@model IEnumerable<ChartTest.Models.DataPoint>

@using (Ajax.BeginForm("Generate", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "results" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <div class="panel-group">
            <div class="panel panel-danger">
                <div class="panel-heading" style="background-color: #80929C; color: #F6E0C7">
                    <div class="row">

                        <!-- Stuff to get user request information removed -->

                        <div class="col-xs-12 col-sm-1">
                            <div class="row">
                                <div class="col-sm-12" style="vertical-align: bottom">
                                    <input type="submit" value="Generate" class="btn btn-danger pull-right" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel-group" style="background-color: transparent; border: none; margin-top: 20px">
            <div class="panel panel-danger" style="background-color: transparent; border: none">
                <div class="panel-heading" style="background-color: #80929C; color: #F6E0C7">

                    <div id="results">

<!-- RESULTS WILL BE PLACED HERE WHEN BUTTON PRESSED -->

                    </div>
                </div>
            </div>
        </div>
    </div>
}

Chart.cshtml

@model IEnumerable<ChartTest.Models.DataPoint>

@{
    var key = new Chart(width: 600, height: 400)
                      .AddTitle("My Data")
                      .AddSeries("Default",
                                 xValue: Model, xField: "DateMark",
                                 yValues: Model, yFields: "Count")
                      .Write();
}

HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Generate()
    {
        List<Models.DataPoint> results = new List<Models.DataPoint>();

        //
        // Go get the data here and add to the `results` list
        //

        return PartialView("Chart", results);
    }
}

这是渲染的内容

Answer 1

问题是 Chart 不是 MVC 的一部分，而是网页的一部分。它们不会轻易合并，因为图表只是将原始图像数据写入您的 View 。

This article by Scott Mitchell提供有关如何将网页元素集成到 MVC 项目中的指南。

您基本上必须将图 TableView 包装在另一个操作中，然后将其插入到仅包含图像标签的 View 中

<img src="@Url.Action("GetChart")" />