CODEWITHSUNDEEP
htmlblazorblazor-webassembly
Bhav
Bhav

Reputation: 2207

How to display formatted JSON on a Blazor page?

How can I display JSON cleanly formatted on a Blazor page?

Currently I display the JSON (parsedResult) in a textarea:

<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 />
        <textarea id="results" @bind="parsedResult"></textarea>
    </div>
</div>

Output:

enter image description here

Upvotes: 6

Views: 7163

Answers (1)

Santiago
Santiago

Reputation: 2330

You can do it in this way

@using System.Text.Json

<pre>
    @(JsonSerializer.Serialize(parsedResult, new JsonSerializerOptions() { WriteIndented = true }))
</pre>

Upvotes: 9

Related Questions