Blazor 代码隐藏

Razor 组件通常是在单个 .razor 文件中创作的,这样就存在页面中包含html代码和后台代码（@code标记指定的代码）。如下

<ul> @if (Items!=null) { @foreach (var item in Items) { if (ItemTemplate!=null) { <li>@ItemTemplate(item)</li> } } } </ul> @code { [Parameter] public RenderFragment ? Heading { get; set; } [Parameter] public RenderFragment<TItem> ? ItemTemplate { get; set; } [Parameter] public IEnumerable<TItem> ? Items { get; set; } }

为了使页面更加简洁，也可以使用代码隐藏文件来分隔代码和标记。 若要使用组件文件，请添加与组件文件的文件名匹配，但添加了 .cs 扩展名的 C# 文件 (Counter.razor.cs)。 使用 C# 文件定义组件的基类。 可以根据需要命名基类，但通常将基类命名为与组件类相同的名称，并添加 Base 扩展名 (CounterBase)。 基于组件的类也必须从 ComponentBase 中派生。 然后，在 Razor 组件文件中，添加 @inherits 指令以指定组件的基类 (@inherits CounterBase)。

如定义Counter.razor组件页面

@inherits CounterBase <h1>Counter</h1> <p>Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button>

定义组件对应的代码文件Counter.razor.cs

public class CounterBase : ComponentBase { protected int currentCount = 0; protected void IncrementCount() { currentCount ; } }

注意：组件成员在基类中的可见性必须为 protected 或 public 才能对组件类可见。