如何在 JavaScript 中使用模型数据：ASP.NET Core

Question

我有一个对象列表，其中包含标记位置的纬度和经度。 当我尝试将对象列表保存到 javascript var 中并在 for 循环中读取它时，它什么也不做。我不知道哪里出错了。 我试图做的是将列表转换为数组，但即使这样也无济于事。我检查了 Model.Asparaguses 的值，它很好，所以这不是这里的问题。

这是我的 ViewModel：

public class FieldViewModel
{
    public Field Field { get; set; }
    public object[] ChartData { get; set; }
    public Asparagus[] Asparaguses { get; set; }
}

在我看来，这是我的 .js 代码：

<script>
asparaguses = @Html.Raw(Json.Serialize(Model.Asparaguses));
</script>

这是我的外部 .js 代码：

var asparaguses;

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 51.25202200, lng: 5.710260 },
        zoom: 15
    });

    for (var i = 0; i < asparaguses.length; i++) {
        // Create a marker and set its position.
        var marker = new google.maps.Marker({
            map: map,
            position: { lat: asparaguses[i].Lat, lng: asparaguses[i].Long }
        });
    }
};

编辑：

在我的控制台中出现此错误：

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in 属性 lat：不是数字

当我记录芦笋数组时，我得到以下输出：

芦笋：[object Object],[object Object],[object Object],[object 对象],[对象对象],[对象对象]

当我记录 1 个芦笋的纬度和经度值时，我看到它们是“未定义的”。但是怎么做呢？

Answer 1

（官方回答来源于我的评论）

通过控制台提供变量的内容后，问题变得清晰起来。根据 .NET 的编码和样式规则，您在模型中定义的属性以 CamelCase 上方的形式编写。

然而，JavaScript 使用较低的 camelCase 表示法。所以当你在上面的CamelCase强行引用你的属性时，它会导致undefined。

因此，通过更改以较低的camelCase 表示法对您的属性所做的所有引用，您的问题应该得到解决。

TLDR

在引用属性/字段时使用较低的camelCase 表示法。

Answer 2

我认为您可以添加 JSONProperty 注释（使用 Newtonsoft.JSON），而不是更改为 c# 类的 Viewmodel 中的驼峰式大小写，这会在像这样序列化之前自动将字段的大小写转换为 jsonproperty 中的名称

public class FieldViewModel
{
   [JsonProperty(PropertyName="field")]
   public Field Field { get; set; }

   [JsonProperty(PropertyName="chartData")]
   public object[] ChartData { get; set; }

   [JsonProperty(PropertyName="asparaguses")]
   public Asparagus[] Asparaguses { get; set; }
}

或者，您可以使用 ContractResolver 将所有字段转换为正确的大小写。查看链接CamelCaseContractResolver了解更多信息