生成一个简单 Blazor 应用，20231015

生成一个简单 Blazor 应用

纪录自己学习的过程，以后回头再看看，自己已经走了那么远的路…

创建应用

1. 启动 Visual Studio 并选择“创建新项目”。
2. 在“创建新项目”窗口中，在搜索框中键入 Blazor，然后按 Enter。
3. 选择“Blazor Server 应用”模板并选择“下一步”。
4. 在“配置新项目”窗口中，输入 BlazorApp 作为项目名称，然后选择“下一步”。
5. 在“其他信息”窗口中，如果尚未选择，则在“框架”下拉列表中选择“.NET 7.0 (标准期限支持)”，然后单击“继续”按钮。
   
   下面的是目录结构
   

• Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
• App.razor 为应用的根组件。
• Pages 目录包含应用的一些示例网页。
• BlazorApp.csproj 定义应用项目及其依赖项，且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。
• Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。

运行应用

• 单击 Visual Studio 调试工具栏中的“https”按钮(绿色箭头)以运行应用。
  
• 应用运行后，可以通过单击“热重载”按钮将代码更改应用到正在运行的应用
  
• 可通过单击顶部工具栏中的“停止”按钮随时停止应用
  
  首次在 Visual Studio 中运行 Web 应用时，它将设置用于通过 HTTPS 托管应用的开发证书，然后提示你信任该证书。建议同意信任该证书。证书将仅用于本地开发，如果没有证书，大多数浏览器都会对网站的安全性进行投诉。

等待应用在浏览器中启动。转到以下页面后，你已成功运行第一个 Blazor 应用!

显示的页面由位于 Pages 目录内的 Index.razor 文件定义。其内容如下所示:
下面展示一些 内联代码片。

//Pages/Index.razor
@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

试用计数器

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

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

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

//Pages/Counter.razor
@page "/counter"

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

每次选中“*Click me”按钮时:

• 已触发 onclick 事件。
• 调用 IncrementCount 方法。
• currentCount 为递增。
• 呈现该组件以显示更新的计数。

添加组件

每个 razor 文件都会定义一个可重复使用的 UI 组件。

在 Visual Studio 中打开 Index.razor 文件。Index.razor 文件已存在，并且是在创建项目时创建的。它位于之前创建的 BlazorApp 目录中的 Pages 文件夹中。

通过在 Index.razor 文件末尾添加 <Counter /> 元素，向应用主页添加 Counter。

//Pages/Index.razor
@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />

单击“热重载”按钮，以将更改应用到正在运行的应用。然后 Counter 组件将出现在主页上。

修改组件

组件参数使用特性或子内容指定，这允许在子组件上设置属性。在 Counter 组件上定义参数，以指定每次点击按钮时的增量:

使用 [Parameter] 属性为 IncrementAmount 添加公共属性。
将 IncrementCount 方法更改为在递增 currentCount 值时使用 IncrementAmount。
下面的代码演示了怎样实现此目的。突出显示的行显示更改。

\\Pages/Counter.razor
@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>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;
    }
}

在 Index.razor 中，更新 <Counter> 元素以添加IncrementAmount 属性，该属性会将增量更改为 10，如以下代码中突出显示的行所示:

//Pages/Index.razor
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter IncrementAmount="10" />

通过单击“热重载”按钮将更改应用与应用。Index 组件现在具有自己的计数器，每次选择“Click me”按钮时，该计数器会递增 10，如下图所示。/counter 处的 Counter 组件(Counter.razor)将继续按 1 递增。

恭喜你已生成并运行首个 Blazor 应用!