razor 代码命名规则

内容纲要

razor 页面字段属性命名规则

组件被调用

一个组件如果允许外部传递参数，需要使用 [Parameter] 修饰属性和大写命名。

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }
}

如果一个 A 组件被另一个 B 组件调用，即 B -> A，允许 A 将一个属性的值变化同步到 B 中，则 A 需要对字段设置回调。

A 组件代码：

    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }
    // 修改 Year 的值
    private async Task UpdateYearFromChild()
    {
        await YearChanged.InvokeAsync(r.Next(1950, 2021));
    }

注意，修改 Year 的值不能直接修改属性，因为这样不会同步到 B 组件中，需要使用 YearChanged 这个回调。

回调方式的属性命名是 {属性名称}Changed。

B 组件使用 @bind-{属性名称} 的方式绑定该属性：

<A @bind-Year="year" />

@code{
 private int year = 1979;
}

组件中的参数

一个组件的私有字段，不需要使用 _ 开头，使用小写开头的形式即可。

即使需要使用 @bind- 绑定字段到子组件，也是使用小写开头的字段，不需要使用属性也不需要使用 _ 开头，如下面的几个示例。

<PasswordEntry @bind-Password="password" />

<p>
    <code>password</code>: @password
</p>

@code {
    private string password = "Not set";
}

@code {
    private bool showPassword;
    private string? password;
    private string? validationMessage;

    [Parameter]
    public string? Password { get; set; }
}

@page "/parameter-parent-2"

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new();

    private string GetTitle()
    {
        return "From Parent method";
    }

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}

但是 RenderFragment 类型修饰的字段，使用大写开头：

@RenderWelcomeInfo

<p>Render the welcome content a second time:</p>

@RenderWelcomeInfo

@code {
    private RenderFragment RenderWelcomeInfo = @<p>Welcome to your new app!</p>;
}

如果字段表示的是一个组件类型或 RenderFragment 类型，需要使用大写开头的形式。

必须传递的参数

如果 A 组件被其他组件调用，需要设置调用时强制给某个属性设置值，可以使用 [EditorRequired]。

[Parameter]
[EditorRequired]
public string? Title { get; set; }

注入的对象

注入的对象，使用大写开头的命名：

@inject ILogger<HandleSelect1> Logger

[Inject]
protected IDataAccess DataRepository { get; set; }

[Inject]
private IExampleService ExampleService { get; set; } = default!;

@page "/time-travel"
@inject ITimeTravel TimeTravel1
@inherits OwningComponentBase

<h1><code>OwningComponentBase</code> Example</h1>

<ul>
    <li>TimeTravel1.DT: @TimeTravel1?.DT</li>
    <li>TimeTravel2.DT: @TimeTravel2?.DT</li>
</ul>

@code {
    private ITimeTravel? TimeTravel2 { get; set; }

    protected override void OnInitialized()
    {
        TimeTravel2 = ScopedServices.GetRequiredService<ITimeTravel>();
    }
}