使用 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" };
}

如果这不是 correct/appropriate 方法，那么它是什么？

Answer 1

正如评论中指出的“Astrid E. (https://whosebug.com/users/17213526/astrid-e)”，我的问题的答案是：

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

或者：

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

Answer 2

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

假设您定义了以下变量：

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;

总结

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")}")"`

详情

对于 原生元素 （例如 <p>、<div>），@ 符号作为属性值的一部分可以正常工作：

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

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

如果您的变量需要与字符串“连接”，则需要 @() 表示法：

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

对于 Blazor 组件（由 Blazorise 或 self-made 提供），方法略有不同。

假设您使用参数 Color MyColor（枚举值）定义了组件 MyComponent。 MyComponent 将解释为 MyColor 提供的值，因此可以直接使用该变量：

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

如果 MyComponent 的参数改为 string MyColor，则提供的值将被解释为 string，除非您使用 @ 符号明确说明它是一个变量:

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

在这样的组件参数中，您不能像在元素属性中那样轻松地混合字符串和变量值（如第一个示例）。对于组件参数，需要使用更复杂的字符串插值表示法@($" { }")。

假设您有一个组件参数 MyStyle，用于在 MyComponent 中设置 style 属性：

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

如果需要包含条件表达式，{ }部分需要扩展为{( )}:

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

对于原生元素，当提供组件的属性的值时（例如 style 属性），您仍然可以使用简单的表示法，如在这个答案的第一个例子中看到：

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

（注意：在组件上使用属性不是开箱即用的事情；本主题不涉及处理。）

Answer 3

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

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

使用 HTML 标签的 C# 字符串插值 - Blazor

C# String Interpolation with HTML Tags - Blazor

c#

string-interpolation

blazor

总结

详情