无法使用 ASP.NET MVC 和实体框架呈现 CanvasJS 图表

Question

我是以下技术的初学者： - ASP.NET MVC - 实体框架 - JavaScript（在本例中为 CanvasJS）

我正在尝试根据我在解决方案中创建的数据模型呈现图表。我正在关注这里的教程（适应我自己的目的）https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/how-to/asp-net-mvc-charts-data-entity-database/ 并且我已经完成了以下操作。

• 通过 EF 创建了我的数据模型
• 将数据从我的控制器传递到我的视图
• 试图在视图 CSHTML 中呈现图表

但是，图表不呈现。当我使用 Chrome 调试时，Javascript 显示“结果”是我的强类型模型，但这一定是不正确的，因为错误是 Uncaught SyntaxError: Unexpected end of input

渲染的Javascript如下：

<h2>StoreView - Testing this for store group P777S001</h2>
<hr />
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="text-info">Here are some examples of sales data via Entity Framework</div>

        </div>
        <div class="col-md-6">
            <div id="chartContainer"></div> 
        </div>
    </div>
</div>
<script type="text/javascript">
    var result = System.Collections.Generic.List`1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable];
    var datapoints = [];
    for (var i = 0; i < result.length; i++) {
        datapoints.push({ label: result[i].x, y: result[i].y });
    }

    $(function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            zoomEnabled: true,
            animationEnabled: true,
            title: { text: "Line chart" },
            data: [{
                type: "line",
                dataPoints: dataPoints,
            }]
        });
        chart.render();
    });
</script>

我使用以下代码将其传递给视图（它是原型设计，因此代码混乱道歉）

控制器：

    string _servername = $"P{store}S001";
    var sales = insite.InSiteStoreSalesSummaryTables.Where(s => s.ServerName == _servername && s.daily_sales_figure > 0);
    //var storeEntries = db.StoreSystemInformations.Where(s => s.StoreNumber == store);

    if (sales == null)
    {
        return HttpNotFound();
    }
    ViewBag.TestValue = $"Testing this for store group {_servername}";
    return View(sales.ToList());

谁能看到我在这里明显做错了什么？

Answer 1

乍一看，我认为您的问题似乎是因为这行：

var result = System.Collections.Generic.List`1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable];

我认为您将 list 直接传递给旨在创建 JS 数组的 JS 定义，但 Razor 返回 List<InSiteDashboard.Models.InSiteStoreSalesSummaryTable> 集合的完全限定名称，因为 Razor 在视图中隐式调用 ToString() 而不是迭代它。

由于 List``1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable] 未被识别为 JS 标识符或属性，因此由于语法无效而引发了“Unexpected end of input”消息。

您可以使用model serialization 将List<T> 集合作为JS 数组传递，如下例所示（假设您有@model IEnumerable<InSiteStoreSalesSummaryTable> 或@model List<InSiteStoreSalesSummaryTable> 暗示的模型指令return View(sales.ToList())）：

// standard way
var result = JSON.parse('@Html.Raw(Json.Encode(Model))');

// using Newtonsoft.Json library
var result = JSON.parse('@Html.Raw(JsonConvert.SerializeObject(Model))');

这里是脚本的一个示例实现：

@model IEnumerable<InSiteStoreSalesSummaryTable>

<!-- other HTML elements, skipped for brevity -->

<script>
    var result = JSON.parse('@Html.Raw(Json.Encode(Model))');
    var datapoints = [];
    for (var i = 0; i < result.length; i++) {
        datapoints.push({ label: result[i].x, y: result[i].y });
    }

    $(function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            zoomEnabled: true,
            animationEnabled: true,
            title: { text: "Line chart" },
            data: [{
                type: "line",
                dataPoints: dataPoints,
            }]
        });
        chart.render();
    });
</script>