@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.

@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
        currentCount++;
在浏览器中对于 /counter 的请求(由位于顶部的 @page 指令指定)导致 Counter 组件呈现其内容。@rendermode 指令为组件启用交互式服务器呈现，以便它可以处理来自浏览器的用户界面事件。
每次选中“单击我”按钮时:
    
已触发 onclick 事件。
    
调用 IncrementCount 方法。
    
currentCount 为递增。
    
呈现该组件以显示更新的计数。
每个 razor 文件都会定义一个可重复使用的 UI 组件。
    
在 Visual Studio 中打开 Home.razor 文件。Home.razor 文件已存在，并且是在创建项目时创建的。它位于之前创建的 BlazorApp 目录内的 Components/Pages 文件夹中。
    
在选择的文本编辑器中打开 Home.razor 文件。Home.razor 文件已经存在，它是在你运行 dotnet new 命令时创建的。它位于之前创建的 BlazorApp 目录内的 Components/Pages 文件夹中。
通过在 Home.razor 文件末尾添加 <Counter /> 元素，向应用主页添加 Counter。
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
    
重新运行应用以查看更改。然后，Counter组件将显示在主页上。
    
保存此更改后，dotnet watch 命令会将更改应用到正在运行的应用，以便主页上显示 Counter 组件。
    
使用 [Parameter] 属性为 IncrementAmount 添加公共属性。
    
将 IncrementCount 方法更改为在递增 currentCount 值时使用 IncrementAmount。
下面的代码演示了怎样实现此目的。突出显示的行显示更改。
Components/Pages/Counter.razorCopy
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    [Parameter]
    public int IncrementAmount { get; set; } = 1;
    private void IncrementCount()
        currentCount += IncrementAmount;
在 Home.razor 中，更新 <Counter> 元素以添加 IncrementAmount 属性，该属性会将增量更改为 10，如以下代码中突出显示的行所示:
Components/Pages/Home.razorCopy
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
    
通过单击“热重载”按钮将更改应用到应用程序。Home 组件现在具有自己的计数器，每次选择“单击我”按钮时，该计数器会递增 10，如下图所示。/counter 处的 Counter 组件(Counter.razor)将继续按 1 递增。
    
Home 组件现在具有自己的计数器，每次选择“单击我”按钮时，该计数器会递增 10，如下图所示。/counter 处的 Counter 组件(Counter.razor)将继续按 1 递增。
恭喜你已生成并运行首个 Blazor 应用!
现在，你已掌握基础知识，请继续使用 Microsoft Learn 上的 Blazor 自助学习模块构建第一个 Blazor 应用，你将在其中生成一个待办事项列表应用。
        Microsoft Learn: 生成 Blazor 待办事项列表应用