C# 字符串插值與 HTML 標簽 - Blazor

Question

在 Blazor 框架中，可以使用 HTML 標簽進行字符串插值嗎？ 例如，我想運行一個循環，使用不同的 colors 打印一個句子，但這似乎不起作用（因為它似乎不是正確的方法）。

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

---

對於原生元素（例如<p> 、 <div> ）， @( )符號作為屬性值的一部分可以正常工作：

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

如果屬性的整個值都定義在變量中，您可以使用簡單的@表示法：

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

---

對於Blazor 組件（由 Blazorise 提供或自制），方法略有不同。

假設您已經使用參數Color MyColor （枚舉值）定義了一個組件MyComponent 。 MyComponent將解釋為MyColor提供的值，因此可以直接使用該變量：

<MyComponent MyColor="colorEnumValue" /> // will be interpreted as Color.Red

如果MyComponent的參數是string MyColor ，則提供的值將被解釋為string ，除非您使用@表示法明確說明它是一個變量：

<MyComponent MyColor="@colorString" /> // will be interpreted as "blue"
<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 2

正如評論中指出的“Astrid E. ( https://stackoverflow.com/users/17213526/astrid-e )”，我的問題的答案是：

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

或者：

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

Answer 3

編碼最少且沒有字符串插值的正確方法，這應該是一個很好的解決方案

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