无法获取Hidden Field值：jQuery检索返回类型而非实际JSON数据

我已经把产品列表数据存到了一个hidden字段里，DOM中的字段代码如下：

<input id="ProductList" name="ProductList" type="hidden" value="[{&amp;quot;ProductDetailsID&amp;quot;:303,&amp;quot;Size&amp;quot;:&amp;quot;S&amp;quot;,&amp;quot;Color&amp;quot;:&amp;quot;White&amp;quot;,&amp;quot;SizeID&amp;quot;:9,&amp;quot;ColorID&amp;quot;:11,&amp;quot;MRP&amp;quot;:2,&amp;quot;SellingPrice&amp;quot;:5,&amp;quot;StockQuantity&amp;quot;:5,&amp;quot;ImageCount&amp;quot;:1,&amp;quot;IsDiscountPercent&amp;quot;:&amp;quot;%&amp;quot;,&amp;quot;ProductDiscount&amp;quot;:0,&amp;quot;ProductList&amp;quot;:null}]">

检查浏览器DOM的时候，这个字段显示的是正确的转义后JSON值，但当我用jQuery执行$('#ProductList').val()获取值时，得到的不是预期的JSON字符串，而是：

System.Collections.Generic.List`1[WebYedaz.Models.Data.Product.ProductDetails]

问题根源 #

这是后端没有正确将.NET列表对象序列化为JSON字符串导致的。你在开发者工具里看到的DOM内容可能是浏览器渲染后的转义结果，但实际上后端在渲染页面时，并没有把List<ProductDetails>对象转换成JSON，而是直接调用了对象的ToString()方法——这个方法默认返回的就是对象的完全限定类型名，也就是你看到的那段字符串。

比如在ASP.NET项目中，如果直接把列表对象赋值给hidden字段的Value属性，而没有用序列化工具（比如Newtonsoft.Json的JsonConvert.SerializeObject或者System.Text.Json的JsonSerializer.Serialize）处理，就会出现这种情况。

解决方案 #

1. 后端修正（关键步骤）

在后端代码中，先将产品列表序列化为JSON字符串，再传递给视图的hidden字段：
以ASP.NET MVC为例（使用Newtonsoft.Json）：

// 后端控制器代码
var productDetailsList = GetProductDetails(); // 你的列表获取逻辑
var productListJson = JsonConvert.SerializeObject(productDetailsList);
ViewBag.ProductListJson = productListJson;

然后在视图中渲染hidden字段时，要使用@Html.Raw()避免ASP.NET自动转义JSON中的引号：

<input id="ProductList" name="ProductList" type="hidden" value="@Html.Raw(ViewBag.ProductListJson)" />

2. 前端解析（可选）

当后端正确输出JSON字符串后，前端获取值后可以解析成JavaScript对象来使用：

var rawJson = $('#ProductList').val();
var productList = JSON.parse(rawJson);
console.log(productList); // 此时就能拿到正常的产品列表对象了

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