C# String Interpolation with HTML Tags - Blazor

Question

In the Blazor framework, can one do string interpolation with HTML tags? For example, I want to run a loop that prints a sentence using different colors, but this does not seem to work (since it does not seem the correct approach).

@page "/HJS"
<h3>HateJS</h3>

<div>
    @foreach(string colorX in colors)
    {
        <p style=$"color:{colorX}">@hateJS</p>
    }
</div>

@code {
    private string hateJS = "I hate JS";
    private string[] colors = { "blue", "red" };
}

If this is not the correct/appropriate approach, then what is it?

Answer 1

I'll give a more extended overview, in case it may be helpful for others.

---

Let's say you have the following variables defined:

var colorEnum = Color.Danger;
var colorString = "red";

var colorStyle = "color: red";
var bgColorStyle = "background-color: yellow";

var classSuccess = "text-success";
var classError = "text-danger";
var classEnd = "text-end";

var customize = true;

var height = 1.5;

Summary

Native attributes	Blazor component parameters
Attribute examples:	Parameter examples:
style (expecting string value)	Style (expecting string value)
class (expecting string value)	Color (not expecting string value)
Value equals variable:	Value equals variable:
style="@colorStyle"	Style="@colorStyle"
class="@classSuccess"	Color="colorEnum"
Value contains variable:	Value contains variable:
style="color: @colorString"	Style="@($"color: {colorString}")"
style="height: @(height)rem"	Style="@($"height: {height}rem")"
class="@classSuccess fs-3 @classEnd"	Style="@($"{colorStyle}; {bgColorStyle}")"
Value equals conditional expression:	Value equals conditional expression:
style="@(customize ? colorStyle : "")"	Style="@(customize ? colorStyle : "")"
class="@(customize ? classError : "")"	Color="@(customize ? colorEnum : null)"
Value contains conditional expression:	Value contains conditional expression:
style="color: @(customize ? colorString : "blue")"	Style="@($"color: {(customize ? colorString : "blue")}")"

Details

For native elements (e.g. <p>, <div>), the @ notation works fine as part of an attribute's value:

<p style="color: @colorString">...</p>
<p style="color: @colorString; background-color: @colorString">...</p>

<p style="@colorStyle">...</p>

If your variable needs to be "concatenated" with a string, the @() notation is needed:

<p style="height: @(height)rem">...</p>

---

For Blazor components (either provided by Blazorise or self-made), the approach is slightly different.

Let's say you've defined a component MyComponent with parameters Color MyColor (enum value). MyComponent will interpret the provided value for MyColor, and therefore, the variable can be used directly:

<MyComponent MyColor="colorEnum" /> // will be interpreted as Color.Danger

If MyComponent's parameter is string MyColor instead, the provided value is interpreted as a string unless you specifically say that it's a variable using the @ notation:

<MyComponent MyColor="@colorString" /> // will be interpreted as "red"
<MyComponent MyColor="colorString" /> // will be interpreted as "colorString"

In such a component parameter, you cannot mix strings and variable values as easily as you can in an element attribute (as in the very first example). For a component parameter, the more complex string interpolation notation @($" { }") needs to be used.

Let's say you have a component parameter MyStyle that is used to set the style attribute inside MyComponent:

<MyComponent MyStyle="@($"color: {colorString}")" />

If you need to include a conditional expression, the { } part needs to be expanded to {( )}:

<MyComponent MyStyle="@($"color: {(count > max ? "red" : "blue")}")" />

As for native elements, when providing the value of an attribute of a component (e.g. the style attribute), you can still use the easy notation, as seen in the firstmost example of this answer:

<MyComponent style="color: @(colorString)" />

(NB: Using attributes on components is not something you can do out of the box; handling that is not covered by this topic.)

Answer 2

The correct approach with minimal amount of coding and without string interpolation, this should be a fine solution

<div>
    @foreach(string colorX in colors)
    {
        <p style="color:@colorX;">@hateJS</p>
    }
</div>