如何在JavaScript中从Razor模型对象获取JSON对象

Question

在视图模型对象中，以下是属性：

  public IList<CollegeInformationDTO> CollegeInformationlist { get; set; }

在VIEW中，JavaScript代码如下：

   var obj = JSON.stringify('@Model.CollegeInformationlist');
   alert(obj[1].State);  //NOT WORKING, giving string char

      $.each('@Model.CollegeInformationlist', function (i, item) {
    var obj = JSON.stringify(item);
    var r = $.parseJSON(obj);
    alert(r.State);    //just giving undefined.
    });

请指导我如何在JavaScript中获取JSON对象。

- dsi

---

你的 JavaScript 不知道你的 CollegeInformationDTO 类长什么样子。在我上一份工作中，我们在脚本中定义了一个与模型具有相同结构的对象，然后使用 jQuery 的 .map 将模型映射到 JavaScript 对象。此外，请确保您传递给视图的是 JSON 字符串。 - Matt Bodily

你需要将你的Model对象序列化为JSON。你应该创建一个返回该结果的方法（或属性）。 - musefan

你能否分享一些关于这个的资料给我吗？在这里，我写了 var obj = JSON.stringify('@Model.CollegeInformationlist'); 所以，它应该转换为JSON对象并且当明确地写出 .State 属性时能够给出结果，但是它并没有按照这种方式工作。看起来，对象被转换为字符串类型。 - dsi

Answer 1

你可以使用以下内容：

var json = @Html.Raw(Json.Encode(@Model.CollegeInformationlist));

这将输出以下内容（在没有看到您的模型的情况下，我只包含了一个字段，假设@Model.CollegeInformationlist是[{"State":"a state</script>"}]）：

<script>
    var json = [{"State":"a state\x3C/script>"}];   
</script>

请注意，Json.Encode()将输入中的"<"字符替换为"\x3C"。它们在JSON中是等价的，但后者在JavaScript代码中是安全的，而前者则存在XSS漏洞。 工作示例 AspNetCore AspNetCore使用Json.Serialize而不是Json.Encode。

var json = @Html.Raw(Json.Serialize(@Model.CollegeInformationlist));

MVC 5/6

你可以使用Newtonsoft来实现这个功能：

    @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, 
Newtonsoft.Json.Formatting.Indented))

这样可以更好地控制JSON格式，比如缩进、驼峰命名等。

- hutchonoid

---

我找不到JSON参考，出现错误The name 'Json' does not exist in the current context。如果我添加Newtonsoft.Json.，那么Encode也找不到。 - dsi

对于使用AspNetCore的任何人，应该使用Json.Serialize代替Json.Encode。 - TrueWill

对于MVC 5/6的新版本： @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, Newtonsoft.Json.Formatting.Indented)) - Lord Darth Vader

@R2D2，对你的建议进行了一些改进：JsonConvert.SerializeObject(Model, Newtonsoft.Json.Formatting.Indented, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() })，这也确保了序列化后的JSON使用正确的JavaScript驼峰命名法（或者我应该说是camelCase）。 - Al Dass

@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, Newtonsoft.Json.Formatting.Indented)) 对我起作用了。 - smj

Answer 2

在 ASP.NET Core 中，IJsonHelper.Serialize() 返回 IHtmlContent，所以您不需要使用 Html.Raw() 包装它。

应该很简单：

<script>
  var json = @Json.Serialize(Model.CollegeInformationlist);
</script>

- Rob Mensching

Answer 3

在使用代码var json = @Html.Raw(Json.Encode(@Model.CollegeInformationlist));后，您需要使用JSON.parse(JSON.stringify(json))。

- Frederico Martins

---

虽然是小事，但你应该在第二行格式化你的代码段。这个修改太小了，所以它不让我做。 - Michael

为什么要在一起使用 JSON.stringify 和 JSON.parse？这是不必要的，会浪费资源。 - Peter Ivan

有道理。我需要测试一下是否可以不使用JSON.stringify。我认为只需要JSON.parse(@Html.Raw(Json.Encode(@Model.CollegeInformationlist)))就可以了。 有人可以测试一下并让我们知道结果。 但现在我已经使用这种方式，对我来说是有效的。 - Frederico Martins

Answer 4

将对象从控制器传递到视图，将其转换为未编码的标记，并将其解析为JSON。

@model IEnumerable<CollegeInformationDTO>

@section Scripts{
    <script>
          var jsArray = JSON.parse('@Html.Raw(Json.Encode(@Model))');
    </script>
}

- Aryan Firouzian

---

为什么你要在结果外面加引号并紧接着使用JSON.parse？这是不必要的，会浪费资源。 - Peter Ivan

Answer 5

如果您想从模型创建JSON对象，请按照以下步骤进行操作：

  foreach (var item in Persons)
   {
    var jsonObj=["FirstName":"@item.FirstName"]
   }

或者使用Json.Net从您的模型创建json：

string json = JsonConvert.SerializeObject(person);

- M.Azad

Answer 6

以下代码对我有效

var chartD =  JSON.parse(JSON.stringify([@Json.Serialize(@Model)]));

- Lishani