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

Question

我正在修改 [Blazor 提示和技巧][1]

中的一个 blazor 示例

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

如果在Visual Studio中新建一个名为BlazorCounter的Blazor App，并修改生成的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++;
    }
}

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

            services.AddScoped<CounterState>();

那么您就有了一个计数器，它会保留其状态并且不会在您每次导航到“计数器”页面时都从零开始。

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

Answer 1

创建基础 class 并使用 [InjectAttribute]:

注入服务

public class MyCounterComponent : ComponentBase
{

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

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

我还将您的 IncrementCount() 方法从视图文件移至此 class 文件。

现在您可以将它与 @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 and Use DI in services

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

How do I convert a razor page with an injection to a code-behind?

dependency-injection

code-behind

razor

asp.net-core

blazor