Импорт данных из модели в представление приводит к ошибке, которую я не могу решить

Question

У меня есть модель:

public class ReportViewModel
{
    public int[] Data { get; set; }
    public string[] Labels { get; set; }
}

Затем в контроллере я получаю данные и метки и сохраняю их на модели, которая будет отправлена ​​на просмотр:

[HttpGet]
    public async Task<IActionResult> Report()
    {

        ReportingViewModel vm = new ReportingViewModel();
        vm.Data = DataReporting(vm);
        vm.Labels = LabelReporting(vm);
        return View(vm);
    }

Массивы созданы идеально, потому что я отладил и это именно то, что я хочу.

Затем я передаю их представлению в график Chart.js через @ Model.Data, но на консоли появляется ошибка, и график не отображается.

<div id="container" class="align-items-center" style="width:75%; margin: 0 auto" ;>
    <canvas id="myChart" width="682" height="340"></canvas>
    <script>
        var colorbarra = Array(78).fill('rgba(54, 162, 235, 0.2)');
        var colorborde = Array(78).fill('rgba(54, 162, 235, 1)');
        var datos = @Model.Data;
        var etiquetas = @Model.Labels ;
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: etiquetas,
                datasets: [{
                    label: 'Nº de Custodios subidos',
                    data: datos,
                    backgroundColor: colorbarra,
                    borderColor: colorborde,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
</div>

Это ошибка, которую я получаю на консоли: Ошибка на консоли

Reporting:188 Uncaught SyntaxError: Unexpected token ]

А строка 188 - это строка, связанная с @ Model.Data

var datos = System.Int32[];

Заранее большое спасибо.

Answer 1

Чтобы передать массив на стороне сервера в переменную массива на стороне клиента, вы можете использовать функцию JSON.parse() на стороне клиента с Json.Encode():

var datos = JSON.parse(@Html.Raw(Json.Encode(Model.Data));
var etiquetas = JSON.parse(@Html.Raw(Json.Encode(Model.Labels));

Или, если у вас есть пакет Newtonsoft.Json, выследует попробовать использовать метод JsonConvert.SerializeObject():

var datos = JSON.parse(@Html.Raw(JsonConvert.SerializeObject(Model.Data));
var etiquetas = JSON.parse(@Html.Raw(JsonConvert.SerializeObject(Model.Labels));

Если массив передается напрямую, как @Model.Data, будет неявно вызван ToString(), что приведет к полному определению имени типа массиваназначаться вместо содержимого сериализованного массива.

Answer 2

Если вы хотите использовать свойства представления моделей в javascript, вам нужно конвертировать его следующим образом:

var datos = JSON.stringify(@Model.Data);
var etiquetas = JSON.stringify(@Model.Labels);

Или вы можете использовать

var datos = @Html.Raw(Json.Serialize(@Model.Data));
var etiquetas = @Html.Raw(Json.Serialize(@Model.Labels));

Answer 3

Как показано в документации к chart.js , здесь есть ссылка на документацию по chart.js . Вы должны указать набор данных и метку в формате массива.

Попробуйте использовать передачу ienumerable для передачи модели ввид, который будет влиять конвертировать в массив.Вашему классу должно понравиться это

public class ReportViewModel { 
   public innumerable<data> cData { get; set; } 
   public innumerable<label> cdata { get; set; }
}

А ваш класс для данных и метки должен быть определен в пространстве имен модели Модель данных:

Public class data{
    Public int value{get;set;}
}

Модель метки

Public class label{
    Public string name{get;set;}
}

И с учетом этого вам необходимо импортировать модель, которую необходимо передать из контроллера, и вы можете использовать ее напрямую, а используя механизм бритвы, вы можете преобразовать ее также в массив во время выполнения с помощью функции toarray