ASP.NET MVC中HighCharts饼图JSON转义字符问题求助

这个问题的核心是Razor视图引擎会自动对输出的字符串进行HTML编码，导致你从ViewData取出的JSON字符串被加上外层引号，内部双引号也被转义成\"，最终HighCharts无法识别这种格式的字符串。

快速解决方案 #

你只需要在视图中使用Html.Raw()方法输出原始JSON内容，避免Razor自动编码：

1. 在Action方法中正确序列化数据
   首先在Controller的Action里，用JSON序列化工具（比如Newtonsoft.Json的JsonConvert.SerializeObject）把数据对象序列化为标准JSON字符串：

   using Newtonsoft.Json;
   
   public ActionResult CruiseControlChart()
   {
       // 构造饼图数据对象
       var chartData = new List<dynamic>
       {
           new { name = "Bouwend", y = 0 },
           new { name = "Failed", y = 12 },
           new { name = "Succes", y = 19 }
       };
       // 序列化为JSON字符串存入ViewData
       ViewData["data"] = JsonConvert.SerializeObject(chartData);
       ViewData["charttitle"] = "你的图表标题";
       ViewData["eldestbuildtime"] = "最早构建时间";
       return View();
   }
   

2. 在视图中输出原始JSON
   把原来的data: (@ViewData["data"])替换成Html.Raw()包裹的形式：

   series: [{
       colorByPoint: true,
       data: @Html.Raw(ViewData["data"])
       // 删掉重复的data属性，避免JavaScript语法错误
   }]
   

另一种更简洁的写法（直接传递对象） #

你也可以在Action里直接把数据对象存入ViewData，再在视图中完成序列化：

• Action中：

  ViewData["data"] = chartData; // 直接存对象，不提前序列化
  

• View中：

  data: @Html.Raw(Json.Encode(ViewData["data"]))
  

注意事项 #

• 你当前视图代码里有两个data:属性，这会导致JavaScript语法错误，一定要删掉其中一个（保留通过ViewData传递的那个）。
• 确保JSON格式符合标准：用双引号包裹键和字符串值（HighCharts对JSON格式要求严格，标准JSON使用双引号而非单引号）。

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