使用 Blazor 利用 ASP.NET Core 生成第一个 Web 应用

Windows Linux macOS

试用计数器

在正在运行的应用中，通过单击左侧边栏中的“计数器”选项卡导航到“计数器”页。然后应显示以下页面:

“计数器”页提供“单击我”按钮，用于增加页面上显示的计数。

选择“单击我”按钮，在不刷新页面的情况下递增计数。若要在网页中递增计数器，通常需要编写 JavaScript，但对于 Blazor，你可以使用 C#。

可以在 Components/Pages 目录内的 Counter.razor 文件处找到 Counter 组件的实现。

Components/Pages/Counter.razor
@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 为递增。
  • 呈现该组件以显示更新的计数。
继续