如何在JavaScript中访问ViewData里的TestObject以生成下拉列表

要在JavaScript里拿到ViewData中的TestObject，核心思路是把.NET对象序列化成JSON字符串，再在前端转成JavaScript对象来用，具体步骤如下：

1. 在View中把TestObject序列化为JS可识别的对象
   在你的Razor视图里，用Json.Serialize把ViewData里的对象转成JSON，再用@Html.Raw()避免HTML转义，这样JS就能直接解析：

   <script>
       // 替换成你存ViewData时用的键，比如你是ViewData["TestObj"] = testObject，就写"TestObj"
       const testModel = @Html.Raw(Json.Serialize(ViewData["YourTestObjectKey"]));
   </script>
   

   如果你用的是老版本ASP.NET MVC（不是Core），把Json.Serialize换成Json.Encode就行。

2. 用你的JS逻辑生成下拉列表
   现在testModel就是和后端TestObject结构一致的JS对象了，直接替换你原来代码里的data就行：

   // 先确保数据存在，避免报错
   if (testModel?.ExteriorColor?.Data) {
       for (var i = 0; i < testModel.ExteriorColor.Data.length; i++) { 
           $("#Exterior_Color").append(
               $("<option " + (i == 0 ? "selected" : "") + "></option>")
                   .val(`${testModel.ExteriorColor.Data[i].ColorName}, ${testModel.ExteriorColor.Data[i].RgbValue}`)
                   .html(testModel.ExteriorColor.Data[i].ColorName)
           ); 
       }
   }
   

   这里我把字符串拼接换成了模板字符串，可读性更好，你也可以继续用原来的写法。

额外注意点 #

• 确保你的.NET对象的属性都是公共可访问的（你的代码里已经是public了，没问题），不然序列化的时候会忽略这些属性
• 如果对象有循环引用，序列化会失败，你的结构里TestObject→BuildData→List，没有循环，所以不用担心
• 最好加个判断（比如上面的testModel?.ExteriorColor?.Data），防止ViewData里没有数据或者结构不对导致JS报错

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