One line If statement in Razor not working

Question

This statement outputs the the HTML exactly, my intent is for it the be rendered as HTML.

<td>@(part.IsVocal ? "<span class='badge bg-success'>Yes</span>" : "<span class='badge bg-danger'>No</span>") / 
    @(part.IsInstrumental ? "<span class='badge bg-success'>Yes</span>" : "<span class='badge bg-danger'>No</span>")</td>

It renders in the browser as:

<td>
    "<span...."
    " / "
    "<span...."
</td>

So it's rendering them as strings, rather then code.

Q: Are you getting any errors or warnings? In either/both MSVS (compile time) or Chrome Developer Tools? Q: Assuming your page is rendered, have you tried "View Element" in Chrome Developer Tools? What is being rendered from Blazor to the web browser? — paulsm4, May 19 '22 at 18:02

Abdullah Rana · Answer 1 · 2022-05-20T03:21:16.420

1

The better way to do that is:

@if(part.IsVocal)
{
    <span class='badge bg-success'>Yes</span>
}
else
{
    <span class='badge bg-danger'>No</span>
}

and so on..

edited May 20 '22 at 03:21

answered May 19 '22 at 18:45

Abdullah Rana

415
2
10

I don't think this is the right way... Just another way. But alas, the OP did not ask for the right way, but rather how to do that `One line If statement`, meaning the conditional operator. – enet May 19 '22 at 18:58
1

I agree, but I think it's a far more readable way. using the ? : ; might be precise, but it's almost illegible! It often works well in code, but Razor ???? – MrC aka Shaun Curtis May 19 '22 at 22:06
Using if else instead of using ternary operator makes code more manageable I think – Abdullah Rana May 20 '22 at 03:20

enet · Accepted Answer · 2022-05-19T18:38:59.093

Use MarkupString like ther

<td>@(part.IsVocal ? (MarkupString)"<span class='badge bg-success'>Yes</span>" : (MarkupString)"<span class='badge bg-danger'>No</span>") / 
    @(part.IsInstrumental ? (MarkupString)"<span class='badge bg-success'>Yes</span>" : (MarkupString)"<span class='badge bg-danger'>No</span>")</td>

Note that you may use MarkupString in various ways, including getting MarkupString values from properties. You may make your code above shorter and compactor... I just answered your question...

One line If statement in Razor not working

2 Answers2