如何将带有注入的剃须刀页面转换为代码隐藏？

Question

我正在修改 [Blazor 提示和技巧][1] 中的一个 blazor 示例

[1]：https://www.youtube.com/watch?v=3duXMxwnkXI 从第 17 分钟开始。

如果您在 Visual Studio 中创建一个名为 BlazorCounter 的新 Blazor 应用，并将生成的 Counter.razor 修改为如下所示：

@page "/counter"
@inject Data.CounterState State

<h1>Counter</h1>

<p>Current count: @State.CurrentCount</p>

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

@code {

    void IncrementCount()
    {
        State.CurrentCount++;
    }
}

然后将以下c#类添加到Data文件夹中 namespace BlazorCounter.Data { public class CounterState { public int CurrentCount { get; set; } } } 最后在 Startup 类的 ConfigureServices 方法末尾添加这一行：

            services.AddScoped<CounterState>();

然后你有一个计数器，它会保留它的状态并且不会在你每次导航到计数器页面时从零开始。

我的问题是：如何将其转换为“代码隐藏”并分离 C# 代码？ 我已将其他剃须刀页面转换为“代码隐藏”，但看不到如何处理 @inject 行。

Answer 1

创建一个 Base 类并使用 [InjectAttribute] 注入服务：

public class MyCounterComponent : ComponentBase
{

    [Inject]
    public virtual CounterState State { get; set; }

    protected void IncrementCount()
    {
        State.CurrentCount++;
    }
}

我还将您的 IncrementCount() 方法从视图文件移动到此类文件。

现在您可以将它与@inherits 指令一起使用：

@page "/counter"
@inherits BlazorApp1.Pages.MyCounterComponent

<h1>Counter</h1>

<p>Current count: @State.CurrentCount</p>

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

更多详情请见Request a service in a component和Use DI in services