无法使用ASP.NET MVC和Entity Framework呈现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创建了我的数据模型
• 将数据从我的Controller传递到我的View
• 尝试在View CSHTML中呈现图表

但是，图表不会呈现。当我使用Chrome调试时，Javascript显示“结果”是我的强类型模型，但这必须是错误的，因为错误是未捕获的语法错误：意外的输入结束

渲染的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>

我使用以下代码将其传递给View（它的原型设计因此代码是凌乱的道歉）

控制器：

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

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

由于List``1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable]未被识别为JS标识符或属性，因此由于语法无效而抛出了“意外的输入结束”消息。

您可以使用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>