生成第一个 Blazor 应用

内容纲要

本地预配向导和预配代理。

若要开始生成 .NET 应用,请下载并安装 .NET SDK (软件开发工具包)。

检查是否已正确安装所有内容

安装完成后,打开新的命令提示符并运行以下命令:

dotnet

如果安装成功,则应该会看到类似于以下内容的输出:

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
-h|--help         Display help.
--info            Display .NET information.
--list-sdks       Display the installed SDKs.
--list-runtimes   Display the installed runtimes.

path-to-application:
The path to an application .dll file to execute.

创建应用

在命令提示符下,运行以下命令以创建应用:

dotnet new blazorserver -o BlazorApp --no-https -f net6.0

此命令创建新 Blazor 应用项目,并将其放置在当前位置内名为 BlazorApp 的新目录中。

导航到由上一条命令创建的新 BlazorApp 目录:

cd BlazorApp

快速查看 BlazorApp 目录的内容。BlazorApp 目录中已经创建了多个文件,为你提供一个可以运行的简单的 Blazor 应用。

  • Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
  • App.razor 为应用的根组件。
  • Pages 目录包含应用的一些示例网页。
  • BlazorApp.csproj 定义应用项目及其依赖项。
  • Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配 5000-5300 之间的端口号并将其保存在此文件上。

请记下 BlazorApp 目录路径,因为教程后面会用到。

运行应用

在命令提示符下,运行以下命令:

dotnet watch

dotnet watch 命令将生成并启动应用,然后在每次更改代码时更新应用。可以选择Ctrl+C,以随时停止应用。

等待应用显示正在侦听 http://localhost:<port number> 并等待浏览器在该地址启动。

转到以下页面后,你已成功运行了第一个 Blazor 应用!

显示的页面由位于 Pages 目录内的 Index.razor 文件定义。其内容如下所示:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

它已包含将其设置为主页的代码,并显示文本“Hello, world!”和“欢迎使用新应用”。它还包括一个 SurveyPrompt 组件,可呈现指向 Blazor 反馈调查的链接。

试用计数器

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

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

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

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

每次选中“单击我”按钮时:

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

添加组件

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

在选择的文本编辑器中打开 Index.razor 文件。Index.razor 文件已经存在,它是在你运行 dotnet new 命令时创建的。它位于之前创建的 BlazorApp 目录内的 Pages 文件夹中。

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

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

<Counter /> 

保存此更改后,dotnet watch 命令会将更改应用到正在运行的应用,以便主页上显示 Counter 组件。

修改组件

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

  • 使用 [Parameter] 属性为 IncrementAmount 添加公共属性。
  • 将 IncrementCount 方法更改为在递增 currentCount 值时使用 IncrementAmount

下面的代码演示了怎样实现此目的。突出显示的行显示更改。

@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,如以下代码中突出显示的行所示:

@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 应用!

给TA打赏
共{{data.count}}人
人已打赏
.Net CoreBlazor

快速了解 ASP.NET Core Blazor

2022-5-11 18:21:11

Blazor

生成 Blazor 待办事项列表应用

2022-6-6 10:39:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索