[C#] Blazor练习2

个人练手笔记,对照官网练习.想学Blazor可以先看官网.

什么是 Razor 组件？

Razor 文件定义了构成部分应用 UI 的组件。Blazor 中的组件类似于 ASP.NET Web Forms 中的用户控件。

如果浏览项目，则会看到大部分文件为 .razor 文件。

在编译时，每个 Razor 组件都内置于 .NET 类中。类包括常见 UI 元素，如状态、呈现逻辑、生命周期方法和事件处理程序。

尝试使用计数器

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

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

可在 Pages/Counter.razor 处找到 Counter 组件的实现。

@page "/counter"

<h1>Counter</h1>

<p>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 组件呈现其内容。

每次选择“单击我”按钮时会出现以下情况：

• 触发点击事件。
• 调用 IncrementCount 方法。
• currentCount 递增。
• 呈现组件来显示更新后的计数。

VS code编辑支持热重载,👍

练习:

1.增加一个计数器页面:

2.添加导航

3.运行效果