Blazor笔记-Directives

更新记录#

注意：非教程。纯笔记，日常查询用的。需要教程的小伙伴找几本书看看即可哈哈，有Vue基础的话非常快，概念都是通的。非工作需要不建议深入学习Blazor，深入Vue吧，用的多，哈哈。

完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html

点击查看

2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

Intro#

In Blazor, directives are powerful features that enable you to add additional behavior to a Razor Component on your website. With Blazor's built-in directives, you can manage various aspects of user interactions. These directives can be grouped into three types:

• Compiling.
• DOM interaction.
• Utilities.

Compiling directives#

Blazor provides compiling directives that manipulate how a Razor Component is compiled. These directives include:

@inherits    Specify the base class for a component
@namespace   Specify the namespace for a component
@implements  Specify the interface for a component
@preservewhitespace  Remove all redundant white spaces from an element
@typeparam     Specify a generic class for a component
@layout        Specify the layout for a component

DOM interaction directives#

@attributes    Attach a dictionary of attributes to the element
@on<event>     Attach the event handlers to the element's event
@bind-<attribute>:<event>    Create a 2-ways binding to an element attribute
@key      Set a unique identifier for an element
@ref      Refer the element to an C# instance
@code     Add C# code that defines the component's logic, state, and behavior

@attributes#

@attributes directive attaches a dictionary of attributes to an element, as demonstrated in the code.

<div @attributes="Attributes">Inspect me to see my attributes.</div>

@code {
    Dictionary<string, object> Attributes { get; set; } = new()
    {
        { "example-string", "Blazor School" },
        { "example-int", 10 },
        { "example-object", new
            {
                date = DateTime.Now
            }
        }
    };
}

Blazor will render the HTML tag with the specified attributes:

<div example-string="Blazor School" example-int="10" example-object="{ date = 2/21/2022 8:34:57 PM }">Inspect me to see my attributes.</div>

Utilities directives#

Directive identifier	Description	Type
@<C#-keyword>, @{<C# Code>},@(<C# Code>)	Inject C# code to HTML template	Utilities
@inject		Inject an instance into a component	Utilities
@page		Specify the route and parameter to a component	Utilities
@section	Define a section, not available for Razor Component. Not commonly used in Blazor.	N/A
@functions	Deprecated, use @code instead	N/A