razor 代码命名规则

2022年9月15日 1086点热度 0人点赞 0条评论
内容纲要

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>();
    }
}

无论是直接注入,还是手动从 IOC 中获取,注入的对象都使用大写开头的命名,如上面的 TimeTravel2

痴者工良

高级程序员劝退师

文章评论