如何在Blazor页面上格式化显示JSON数据？

当前你通过textarea展示JSON的方式缺乏格式化，可读性差。可以通过以下方式优化：

方案一：原生方式实现格式化展示（无需第三方组件） #

1. 后端生成格式化的JSON字符串 #

在OnParseClicked方法中，序列化对象时启用缩进格式，确保parsedResult是带换行和缩进的JSON：

using System.Text.Json;

private void OnParseClicked()
{
    // 替换为你实际解析得到的对象
    var parsedObject = /* 你的解析逻辑结果 */;
    
    parsedResult = JsonSerializer.Serialize(parsedObject, new JsonSerializerOptions
    {
        WriteIndented = true, // 启用缩进格式化
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase // 可选，按需调整命名规则
    });
}

2. 前端用<pre>标签替换textarea #

<pre>标签会自动保留文本的换行和缩进，比textarea更适合展示格式化后的JSON。同时添加样式保持表单控件的视觉风格：

<div class="col-lg-12 noSidePadding" id="parser" data-bind="visible: ParserVisible">
    <h3>Parser</h3>
    <div>
        <EditForm Model=@TLogMessageRequestDto>
            <div class="form-group">
                <label for="lblMessage">Message:</label>
                <textarea class="form-control textAreaSize" id="source" @bind="inputMessage" rows="5"></textarea>
                <input type="submit" id="upload" class="btn btn-primary" @onclick="OnParseClicked" value="Parse"/>
            </div>
        </EditForm>
    </div>
    <br />
    <div>
        <label for="results">Results:</label><br />
        <pre class="form-control" style="min-height: 200px; overflow-y: auto;">@parsedResult</pre>
    </div>
</div>

3. 可选：优化显示样式 #

添加自定义CSS让JSON展示更美观：

pre.form-control {
    font-family: monospace;
    white-space: pre-wrap; /* 自动换行过长的JSON行 */
    background-color: #f8f9fa;
}

方案二：使用第三方组件（支持编辑场景） #

如果需要支持格式化后的JSON编辑，可以使用Blazor生态的第三方组件，比如BlazorMonaco（集成VS Code编辑器）或BlazorJsonEditor，这类组件自带JSON格式化、语法高亮功能，适合复杂场景。

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