如何正确解码使用 Html.Raw(Json.Encode(Model)) 编码的 JSON 字符串？答案

【问题标题】：How to properly decode a JSON string encoded using Html.Raw(Json.Encode(Model))?如何正确解码使用 Html.Raw(Json.Encode(Model)) 编码的 JSON 字符串？
【发布时间】：2013-07-12 22:06:36
【问题描述】：

我正在将一些模型数据编码成这样的 html 元素：

@Html.Raw(Json.Encode(Model));

返回的 json 字符串如下所示：

{"TestList":[{"FrequencyType":"1X","GCDs":"585.6","Identifier":"6144","SeqNo":9306,"SeqNoSpecified":true,"TSeqNo":8314,"TSeqNoSpecified":true,"TestDescr":"HBsAg"},{"FrequencyType":"1X","GCDs":"585.6","Identifier":"6124","SeqNo":9295,"SeqNoSpecified":true,"TSeqNo":8315,"TSeqNoSpecified":true,"TestDescr":"HCV Ab"},{"FrequencyType":"1X","GCDs":"585.3","Identifier":"6","SeqNo":9729,"SeqNoSpecified":true,"TSeqNo":8309,"TSeqNoSpecified":true,"TestDescr":"HD Monthly LS"}],"Frequency":[{"Key":"ANNUAL","Value":"Annually"},{"Key":"BIMONTH","Value":"Bi-Monthly"},{"Key":"BIWEEK","Value":"Bi-Weekly"},{"Key":"MON","Value":"Monthly"},{"Key":"1X","Value":"One Time"},{"Key":"QTR","Value":"Quarterly"},{"Key":"SMAN","Value":"Semi-Annual"},{"Key":"WEEK","Value":"Weekly"}]};

当我尝试使用 JSON.parse 解析这个时，我得到一个错误：

arrayTestList = [];
var jsonTestList = $('#TestList').text();
jsonTestList = JSON.stringify(jsonTestList);
arrayTestList = JSON.parse(jsonTestList);
alert(arrayTestList.TestList[0]); // <===== this line is failing

Unable to get value of the property '0': object is null or undefined

如何将此jsonTestList 字符串转换为javascript 数组，以便可以正确访问arrayTestList 的元素？

编辑：

抱歉，我忘了提及我的编辑。基本上上面的javascript代码在部分视图2中。我对模型进行json编码的代码在另一个部分视图1中。从PV 2，我无法访问PV 1的模型对象，所以我只是将内容转储到div 标签，这样我就可以访问这个列表 TestList 元素。

【问题讨论】：

请注意，使用Html.Raw 是危险的。如果你的 json 对象的字段没有被清理，你就有可能受到 XSS 攻击。例如。将您的 TestDescr 属性之一设置为“
”（假设您的 json 写在 div 元素中）。当它被输出时，它将关闭你的开始 div 元素，然后浏览器会将以下脚本标记解释为 html dom 的一部分并运行其中的任何内容。

标签： javascript jquery asp.net-mvc json razor

【解决方案1】：

尝试删除此行：

jsonTestList = JSON.stringify(jsonTestList);

jsonTestList 已经是 JSON 字符串了

【讨论】：

如果我删除包含 JSON.stringify 的行，我会得到 0x800a03f6 - Microsoft JScript runtime error: Invalid character。

【解决方案2】：

问题现已解决。

我得到了一个无效字符，但无法立即识别是哪个字符导致了问题。我发现我的 JSON 字符串无效，因为 Json.Encode 方法输出的尾随分号。我验证了 JSON 字符串 @http://jsonlint.com。

删除该分号后，json 字符串将作为 JavaScript 数组填充到 arrayTestList 对象中。

现在就可以了，正如上面两个答案中提到的那样，不需要JSON.stringify。

var arrayTestList = [];
var jsonTestList = $('#TestList').text().replace(";","");
arrayTestList = JSON.parse(jsonTestList);
alert(arrayTestList.TestList[0]);

【讨论】：

【解决方案3】：

您为什么使用Json.Encode？同样在您的代码中，为什么要先编写冗余代码，而您使用的是JSON.stringify 和JSON.parse 相同的对象。

jsonTestList = JSON.stringify(jsonTestList);
arrayTestList = JSON.parse(jsonTestList);

根据我的理解，只有Html.Raw 可以工作

在 JavaScript 中

var jsonObject = @Html.Raw(Model.TestList); //Here you will get JavaScript Object
var jsonTestList =  jsonObject.TestList;

【讨论】：

只使用 Html.Raw 给了我模型对象的类型，而不是其中的数据。
@Animesh，哦！你已经从@Html.Raw(Json.Encode(Model.TestList)); 编辑到@Html.Raw(Json.Encode(Model));，你能告诉我们你想在 JavaScript 中实现什么吗？也许有更好的方法来实现它。
为了更清楚，我已经编辑了这个问题。对此感到抱歉。