如何将 C# 对象发送到浏览器以将其作为 JavaScript JSON 对象？答案

【问题标题】：How to send a C# object to the browser to have it as a JavaScript JSON object?如何将 C# 对象发送到浏览器以将其作为 JavaScript JSON 对象？
【发布时间】：2022-01-21 13:15:53
【问题描述】：

我有一个Product 课程。我有一个例子。我想在我的 Razor 页面和浏览器 JavaScript 中都可以访问它。

我的想法是我可以将Product 渲染到页面中并使用JSON.parse 解析它。

Product.cshtml：

@{
    var options = new JsonSerializerOptions
    {
        PropertyNameCaseInsensitive = true,
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
        DictionaryKeyPolicy = JsonNamingPolicy.CamelCase
    };
}
<script>
    var productJson = '@Html.Raw(JsonSerializer.Serialize(product, options))`;

    var product = JSON.parse(productJson); // here I encounter error
</script>

但我的产品有一个名为Description 的字段，在其中我有新的行。因此JSON.parse 方法抱怨：

VM27754:1 Uncaught SyntaxError: Unexpected token
在 JSON 中的位置 246
在 JSON.parse()
在:1:6

我能做什么？如何在我的序列化 JSON 中转义换行符？有没有更好的办法？

【问题讨论】：

请注意，如果您将未引用的 json 打印到 javascript 变量分配，则不需要使用 JSON.parse()。 JSON 缩写代表 Javascript Object Notation
错误信息表明您的 JSON 格式错误。

标签： javascript c# json razor

【解决方案1】：

我认为您的代码不匹配。您应该在控制器中处理模型，然后通过 ViewModel 将对象发送到视图。 View 所做的一切都只是显示数据。这不是过程数据。或者，如果您想使用 javascript 从服务器获取一些数据。我认为在这种情况下使用 API 会更好。这是我的主意。希望对你有所帮助。

谢谢

【讨论】：

【解决方案2】：

您有一个错误，从您的代码中删除“''”并将 Product 实例作为模型发送，并在 stringfying 后使用 parse

@using System.Text.Json
@model Product

@{
   
    var options = new JsonSerializerOptions
    {
        PropertyNameCaseInsensitive = true,
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
        DictionaryKeyPolicy = JsonNamingPolicy.CamelCase
    };
}
<script>

    var model = @Html.Raw(JsonSerializer.Serialize(@Model, @options));
 
  var product =JSON.parse(JSON.stringify(model));

  var productName=product.name; //or product["name"]

</script>

或者您也可以使用标准的 JavaScript 序列化程序来代替 Text.Json

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

【讨论】：