Razor页面返回JSON更新Chart.js时AJAX新增数据集报错如何解决？

问题根因 #

你的报错核心是后端重复序列化了返回结果，导致前端AJAX拿到的res是JSON字符串，不是可直接使用的JavaScript对象，往datasets数组里插入字符串自然会触发类型错误。
具体来说，你在C#后端先手动用JsonConvert.SerializeObject(ds)把对象转成了JSON字符串，再把这个字符串传给JsonResult，而JsonResult本身会自动对传入的对象做一次JSON序列化，最终返回给前端的就是两次序列化后的字符串结果，不是结构化的数据集对象。

修复方案 #

方案1（推荐，改后端） #

删除手动序列化的代码，直接把数据集对象传给JsonResult即可：

public IActionResult OnGetAlgoCBChecked(string sName)
{
    chartDataset ds = new chartDataset();
    ds.label = sName;
    ds.borderWidth = 1;
    ds.borderColor = "rgba(255,99,132,1)";
    ds.backgroundColor= "rgba(255,99,132,1)";
    ds.data.Add(new chartData { x = "2020-01-11", y = 12 });
    ds.data.Add(new chartData { x = "2020-01-12", y = 100 });
    ds.data.Add(new chartData { x = "2020-01-13", y = 2 });
    ds.data.Add(new chartData { x = "2020-01-14", y = 122 });
    ds.data.Add(new chartData { x = "2020-01-16", y = 20 });
    ds.data.Add(new chartData { x = "2020-01-19", y = 2 });

    // 删掉手动序列化代码，直接返回对象
    return new JsonResult(ds);
}

同时建议把chartDataset类里的data字段改为属性，避免部分序列化框架无法正确读取字段值：

public class chartDataset
{
    public string label { get; set; }
    // 改为带get/set的属性，初始化逻辑保留
    public List<chartData> data { get; set; } = new List<chartData>();
    public int borderWidth { get; set; }
    public string borderColor { get; set; }
    public string backgroundColor { get; set; }
}

方案2（临时改前端，不推荐） #

如果不方便修改后端代码，可以在前端拿到返回值后手动转成JS对象：

success: function (res) {
    // 先把JSON字符串转成对象再传入
    addDataToChart(JSON.parse(res));
}

内容的提问来源于stack exchange，提问作者Erik