javascript - 从 MVC 中的自定义 View 模型在 Razor 页面上使用 JavaScript 创建 JSON 对象数组？

Question

我正在尝试在我的脚本中填充该数组(稍后将用于使用 D3.JS 绘制图表)。根据this post ，我应该使用下面的语法。但是，它不起作用，因为我在急切的行上收到错误，显示 Uncaught ReferenceError: WebSite is not Defined，其中 WebSite 是数据(我猜是这样，因为它是我的项目的名称)。

<script>
  var data = new Array();
  @foreach (var piece in @Model.DataPieces)
  {
    @:data.push(@piece);
  }
</script>

我很确定它与piece的数据类型有关，因为以下更改使其可以工作(至少不会产生一堆错误)。我从 piece 对象中挑选出各个字段，并将它们作为新对象插入数组中。

<script>
  var data = new Array();
  @foreach (var piece in @Model.DataPieces)
  {
    @:data.push({'cat': '@piece.Category', 'key': '@piece.Key', 'val': '@piece.Value'});
  }
</script>

这很不方便，容易出错，并且每次模型更改时都需要重构分配。如何避免这种方法并能够在分配时自动创建 JSON 对象，如第一个示例所示？

Razor 页面的 View 模型声明如下。

namespace WebSite.Models
{
  public class DrillDataViewModel
  {
    public List<DataPiece> DataPieces { get; set; }

    public class DataPiece
    {
      public string Category { get; set; }
      public string Key { get; set; }
      public int Value { get; set; }
    }
  }
}

Answer 1

行@:data.push(@piece);将被写入输出HTML作为

data.push(<the result of calling ToString() on @piece>);

您需要将 @piece 替换为将被评估为您想要的 JSON 的内容。这应该有效:

@:data.push(@Html.Raw(Json.Encode(piece)));

或者您可以一次输出整个数组:

var data = @Html.Raw(Json.Encode(Model.DataPieces));