Доступ к массивам данных из метода c # внутри JavaScript внутри файла .cshtml - PullRequest
Новая
       7

Доступ к массивам данных из метода c # внутри JavaScript внутри файла .cshtml

0 голосов
/ 27 октября 2018

Я новичок в создании веб-страниц, поэтому столкнулся с некоторыми проблемами при взаимодействии между бэкэндом и веб-интерфейсом.В настоящее время я хочу показать простую диаграмму (для этого я использую chart.js) с данными, которые я вычисляю в отдельном методе c #.

Мой метод c # выглядит следующим образом: 

using System;
using System.Linq;

namespace Programm.Logic
{
    public class DoSomethingIntelligent
    {    
        public int[] GetRandomData(int number)
        {
            int Min = 0;
            int Max = 20;
            Random randNum = new Random();
            int[] data = Enumerable
                .Repeat(0, number)
                .Select(i => randNum.Next(Min, Max))
                .ToArray();

            return data;
        }
    }
}

Теперь я создаю диаграмму в стиле моего файла .cshtml.До сих пор данные жестко закодированы, но я хотел бы создать данные описанным выше способом (GetRandomData()).Как мне это сделать?Я попытался: 

@Model.GetRandomData(6);

, но это выдает «System.Int32 []».Даже если бы это сработало, я бы не стал разбирать эти данные на графике.Мой файл .cshtml выглядит так: 

@model Programm.Logic.DoSomethingIntelligent

<!DOCTYPE html>

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>My Chart.js Chart</title>
</head>

<body>

    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        let myChart = document.getElementById('myChart').getContext('2d');

        let thisChart = new Chart(myChart, {
            type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
            data: {
                labels: ['1', '2', '3', '4', '5', '6'],
                datasets: [{
                    label: 'test',
                    data: [
                        617594,
                        181045,
                        153060,
                        106519,
                        105162,
                        95072
                    ]
                }]
            }
        });

    </script>


</body>
</html>

Большое спасибо!

1 Ответ

0 голосов
/ 27 октября 2018

, но когда я пытаюсь распечатать @ Model.GetRandomData (6), он показывает "System.Int32 []"

Вы получите что-то подобное, упомянутое выше, когда вы попробуете код, подобныйthis. 

var data = @Model.GetRandomData(6);

Razor будет отображать вывод, как показано ниже, если вы проверите источник просмотра страницы. 

 var data = System.Int32[];

Это происходит потому, что ваш метод GetRandomData возвращает intмассив и когда бритва пытается выполнить ваш код C #, он в основном вызывает ToString(), который возвращает тип.

Если вы хотите получить массив, сгенерированный вашим методом C #, в массив JavaScript, вам нужноСериализовать вывод метода.

Ниже должно работать. 

var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.GetRandomData(6)));
let myChart = document.getElementById('myChart').getContext('2d');

let thisChart = new Chart(myChart, {
    type: 'bar', 
    data: {
        labels: ['1', '2', '3', '4', '5', '6'],
        datasets: [{
            label: 'test',
            data: data
        }]
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...