Не удается отобразить диаграмму CanvasJS с использованием ASP.NET MVC и Entity Framework - PullRequest
Новая
       11

Не удается отобразить диаграмму CanvasJS с использованием ASP.NET MVC и Entity Framework

0 голосов
/ 04 марта 2019

Я новичок, когда дело доходит до следующих технологий: - ASP.NET MVC - Entity Framework - 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: Неожиданный конец ввода

Рендеринг 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());

Может кто-нибудь что-то увидетьЯ явно не так делаю здесь?

1 Ответ

0 голосов
/ 04 марта 2019

С первого взгляда я предположил, что ваша проблема, по-видимому, возникла из-за этой строки: 

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, из-за неверного синтаксиса было выдано сообщение " Неожиданный конец ввода ".

Вы можете использовать сериализация модели для передачи коллекции 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>
...