使用 HTML 标记的 C# 字符串内插 - Blazor

Question

在 Blazor 框架中，可以使用 HTML 标记进行字符串内插吗？例如，我想运行一个循环，使用不同的颜色打印一个句子，但这似乎不起作用(因为它似乎不是正确的方法)。

@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" };
}

如果这不是正确/适当的方法，那是什么？

Answer 1

我将提供更扩展的概述，以防对其他人有所帮助。

---

假设您定义了以下变量：

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;

总结

属性示例：值等于变量：值包含变量：值等于条件表达式值包含条件表达式

本机属性	Blazor 组件参数
参数示例：
style(期望string值)	Style(期望string值)
class(期望string值)	Color(不期望string值)
值	等于变量：
style="@colorStyle"	Style="@colorStyle"
class="@classSuccess"	Color="colorEnum"
值	包含变量：
style="color: @colorString"	Style="@($"color: {colorString}")"
style="height: @(height)rem"	Style="@($"height: {height}rem")"
class="@classSuccess fs-3 @classEnd"	Style="@($"{colorStyle}; {bgColorStyle}")"
：值等于条件	表达式：
style="@(customize ? colorStyle : "")"	Style="@(customize ? colorStyle : "")"
class="@(customize ? classError : "")"	Color="@(customize ? colorEnum : null)"
：值包含条件	表达式：
style="color: @(customize ? colorString : "blue")"	Style="@($"color: {(customize ? colorString : "blue")}")"

正确的方法，最少的编码量，没有字符串插值，这应该是一个很好的解决方案

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

正如"Astrid E. (https://stackoverflow.com/users/17213526/astrid-e)"在评论中指出的那样，我的问题的答案是要么将其设为：

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

或：

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