ASP.NET MVC页面中Chart.js饼图无法填充且数值显示undefined问题求助

嗨，我看了你的代码，很快就发现问题所在啦——JavaScript里引用的属性名和C#序列化后的属性名大小写不匹配！

你在C#里定义的GradeSummary类属性是LetterGrade和TotalCount（首字母大写的PascalCase风格），但在前端JS代码里，你却用了小写开头的g.letterGrade和g.totalCount来取数据。而Newtonsoft.Json默认序列化时会保留C#属性的原大小写，所以前端根本找不到对应的属性，自然就返回undefined，饼图也就没数据了。

给你两个简单的解决办法：

方法一：直接修改JS里的属性名（最快） #

把脚本里的属性名改成和C#一致的大写开头：

const data = {
    labels: gradeData.map(g => g.LetterGrade), // 改成LetterGrade
    datasets: [{
        label: 'Grade Distribution',
        data: gradeData.map(g => g.TotalCount), // 改成TotalCount
        backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
        hoverOffset: 4
    }]
};

方法二：配置Json序列化为驼峰命名（更规范的前端风格） #

如果你习惯前端用驼峰命名，可以修改序列化代码，让Newtonsoft.Json输出小写开头的属性名：

let gradeData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.GradeSummary, 
    new Newtonsoft.Json.JsonSerializerSettings { 
        ContractResolver = new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver() 
    }));

这样序列化后属性名就变成letterGrade和totalCount，你原来的JS代码就不用改了。

另外给你个调试小技巧：遇到这种数据绑定问题，打开浏览器的开发者工具（F12），在控制台里输入console.log(gradeData)，看看序列化后的实际数据结构，就能一眼看出属性名到底是啥，快速定位问题~

备注：内容来源于stack exchange，提问作者dan134111