将Blazor代码移到简单示例中

Question

我刚刚开始学习Blazor教程，并试图掌握代码。我有一个剃须刀页面，看起来像这样(来自教程(：

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<!--
This has been moved to the code-behind.
@code {
private int currentCount = 0;
private void IncrementCount() {
currentCount++;
}
}
-->

后面的代码给了我几个错误，说Counter已经定义，IncrementCount已经存在。我的代码如下：

using Microsoft.AspNetCore.Components;
namespace BlazorApp8.Pages {
public partial class CounterCode : ComponentBase {
protected int currentCount = 0;
protected void IncrementCount () {
currentCount++;
}

}
}

我知道我做错了什么，但不确定是什么。有人能帮忙吗？

Answer 1

我得到了。在您的客户端代码中，您必须从您的类继承，如下所示：

@inherits CounterCode   <!-- This is what I missed -->
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Answer 2

我更喜欢用另一种方式创建代码隐藏文件。

在同一目录中创建一个新的类文件Counter.razor.cs。将分部添加到类中。完成！