ASP.NET Core 中的组件标记帮助程序Component Tag Helper in ASP.NET Core

本文内容

作者：Daniel Roth 和 Luke Latham

若要从页面或视图呈现组件，请使用组件标记帮助器。

以下组件标记帮助器呈现页面或视图中的 Counter 组件：

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

组件标记帮助器还可以将参数传递给组件。请考虑以下 ColorfulCheckbox 组件，该组件设置复选框标签的颜色和大小：

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>
@code {
    [Parameter]
    public bool Value { get; set; }
    [Parameter]
    public int Size { get; set; } = 8;
    [Parameter]
    public string Color { get; set; }
    protected override void OnInitialized()
    {
        Size += 10;
    }
}

Size （int）和 Color （string）组件参数可由组件标记帮助器设置：

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

在页面或视图中呈现以下 HTML：

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

传递带引号的字符串需要显式 Razor 表达式，如前面的示例中 param-Color 所示。string 类型值的 Razor 分析行为不适用于 param-* 属性，因为该属性是 object 类型。

参数类型必须是 JSON 可序列化的，这通常意味着类型必须具有默认构造函数和可设置的属性。例如，你可以在前面的示例中为 Size 和 Color 指定一个值，因为 Size 和 Color 的类型是 JSON 序列化程序支持的基元类型（int 和 string）。

RenderMode 配置组件是否：

• 在页面中预呈现。
• 在页面上呈现为静态 HTML，或者包含从用户代理启动 Blazor 应用所需的信息。

尽管页面和视图可以使用组件，但反过来则不行。组件不能使用视图和页特定的功能，如分部视图和节。若要在组件中通过分部视图使用逻辑，请将分部视图逻辑分解为一个组件。

不支持从静态 HTML 页面呈现服务器组件。

其他资源Additional resources

• ComponentTagHelper
• ASP.NET Core 中的标记帮助程序
• 创建和使用 ASP.NET Core Razor 组件