如何在C#Razor模板中呈现经过修饰的JSON？

我正在尝试使用Razor模板将格式化的JSON呈现为HTML。 我目前正尝试这样做：

<div>
    <pre>
        @JsonHelper.SerializeObject(item.AttributeValue, new Newtonsoft.Json.JsonSerializerSettings() { 
            Formatting = Newtonsoft.Json.Formatting.Indented })
    </pre>
</div>

[
  {
    "_id": "5deeea2ed84c28fb633ecac8",
    "index": 0,
    "guid": "accc7f31-bfc7-4a42-9d76-a6f9f71e6f87",
    "tags": [
      "proident",
      "aute",
      "pariatur",
      "cupidatat",
      "officia",
      "adipisicing",
      "dolor"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Alyson Scott"
      },
      {
        "id": 1,
        "name": "Ratliff Castaneda"
      },
      {
        "id": 2,
        "name": "Bernice Lester"
      }
    ],
    "greeting": "Hello, undefined! You have 6 unread messages.",
    "favoriteFruit": "banana"
  }
]

我假设反斜杠应该是分隔符，应该格式化它？ 我是C#新手，我很确定JSonHelper方法有问题？也许它已经是一根绳子了

无论如何，我希望它在浏览器视图中显示为格式化的JSON，如下所示： 举个例子：

public string PortfolioJson { get; set; }

public async Task<IActionResult> OnGetAsync(int? rid) {
    PortfolioJson = JsonConvert.SerializeObject(item, Newtonsoft.Json.Formatting.Indented);
}

---

我的模型中有一个字符串属性，我将其设置为格式化的JSON字符串

@section Styles {
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css" />
}

<div class="row">
    <pre>
        <code class="json">
@Model.PortfolioJson
        </code>
    </pre>
</div>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();
    </script>
}

公共字符串PortfolioJson{get；set；}
公共异步任务OnGetAsync（int？rid）{
PortfolioJson=JsonConvert.SerializedObject（项，Newtonsoft.Json.Formatting.Indented）；
}

然后在页面上，我只输出它。我还使用JS库漂亮地打印JSON

@节样式{
}

@PortfolioJson模型

@节脚本{ hljs.initHighlightingOnLoad（）； }

---

这似乎没有什么区别。HTML中的输出看起来仍然像我原始文章中的第二个代码块？我在样式表的链接中添加了我忘了在OP中添加的。你试过JS highlight库吗？

@section Styles {
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css" />
}

<div class="row">
    <pre>
        <code class="json">
@Model.PortfolioJson
        </code>
    </pre>
</div>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();
    </script>
}