【Blazor-05】-拆分Razor组件

Posted on In Views: Symbols count in article: 1.7k Reading time ≈ 2 mins.
Blazor系列翻译05-拆分Razor组件

有2种方法可以将Razor组件HTML和C#代码拆分为各自独立的文件。

  1. 部分类方法（partial class）
  2. 基类方法（base class）

单文件

HTML和C#代码都在一个文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

部分类文件

HTML保留在Counter.razor文件中。

1
2
3
4
5
6
7
8
9
// Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

在编译组件时，会生成一个与组件文件同名的类。我们手动创建一个Counter.razor.cs的类文件，并在其中包含@code中的代码

1
2
3
4
5
6
7
8
9
10
11
// Counter.razor.cs

public partial class Counter
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

基类方法

和部分类一样，使用基类方法HTML依旧保留在Counter.razor文件中。

1
2
3
4
5
6
7
8
9
// Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

把C#代码移动到单独的类CounterBase中，你可以将类名命名为任何名称，按照约定应该是组件名称+Base后缀

在示例中，组件名称为Counter，所以基类命名为CounterBase，继承自内置的ComponentBase类。此类位于Microsoft.AspNetCore.Components命名空间中。

最后，在Counter.razor文件中不要忘记包含以下继承指令。

1
@inherits CounterBase
1
2
3
4
5
6
7
8
9
10
11
@page "/counter"

@inherits CounterBase

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
Related Posts