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);
    }

由于我已经调试并且正是我想要的，所以数组创建完美。

然后我通过@ Model.Data将它们传递到Chart.js图的视图中，但是在控制台上出现错误，并且该图不显示。

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

这是我在控制台上看到的错误： Error on console

Reporting:188 Uncaught SyntaxError: Unexpected token ]

第188行是与@ Model.Data相关的行

var datos = System.Int32[];

非常感谢您。

Answer 1

如果要将视图模型属性用于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 2

要将服务器端数组传递到客户端数组变量中，可以将客户端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 3

在这里，JavaScript和C＃的组合很少见。
通常，您将从WebAPI端点获取数据。

最简单（最小）的解决方法是

 // in the controller
 vm.Data = JsonConvert.Serialize( DataReporting(vm));
 vm.Labels = JsonConvert.Serialize(LabelReporting(vm));

您将必须使数据和标签具有简单的string属性。

 // in the View
 var datos =  JSon.Parse(@Model.Data);
 var etiquetas = JSon.Parse(@Model.Labels );

请注意，这未经测试。

Answer 4

就像在chart.js here is link for documentation of 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函数将其转换为数组

将数据从模型导入视图中时出现错误，我无法解决

4 个答案: