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 colorString = "blue";
var colorSetting = "color: green";
var colorEnumValue = Color.Red;
var height = 1.5;

---

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

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

If the whole value of the attribute is defined in a variable, you may use the simple @ notation:

<p style="@colorSetting">...</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="colorEnumValue" /> // will be interpreted as Color.Red

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 "blue"
<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 (eg 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 answer to my question, as "Astrid E. ( https://stackoverflow.com/users/17213526/astrid-e )" pointed out in the comments, is to either make it as:

<p style="color:@(colorX)">@hateJS</p>

Or:

<p style="@($"color:{colorX}")">@hateJS</p>

Answer 3

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>