Razor Code Naming Conventions

内容目录

Razor Page Field Naming Conventions

Component Invocation

When a component allows external parameters to be passed, properties must be decorated with [Parameter] and utilize Pascal case naming.

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

If component A is invoked by another component B, i.e., B -> A, and A needs to synchronize a property value change back to B, then A must set up a callback for the field.

A component code:

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

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }
    
    // Modify the value of Year
    private async Task UpdateYearFromChild()
    {
        await YearChanged.InvokeAsync(r.Next(1950, 2021));
    }

Note that the value of Year must not be modified directly. This will not synchronize with component B; instead, use the YearChanged callback.
The naming convention for callback properties is {PropertyName}Changed.

Component B binds this property using the @bind-{PropertyName} syntax:

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

@code{
 private int year = 1979;
}

Component Parameters

A component's private fields do not need to use a leading _, and should instead use camel case.

Even when binding fields to child components with @bind-, the fields should be in lowercase without using properties or a leading _, as in the following examples.

<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";
    }
}

However, fields of type RenderFragment should start with an uppercase letter:

@RenderWelcomeInfo

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

@RenderWelcomeInfo

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

If a field represents a component type or a RenderFragment type, it should start with an uppercase letter.

Required Parameters

If component A is invoked by other components and a particular property must be assigned a value at the time of invocation, it can be marked with [EditorRequired].

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

Injected Objects

Injected objects should use uppercase naming:

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