ASP.NET Core 入门

本教程演示如何使用 .NET CLI 创建、运行和修改 ASP.NET Core Blazor Web App 。 Blazor 是一个 .NET 前端 Web 框架，支持在单个编程模型中同时支持服务器端呈现和客户端交互性。

你将了解如何：

Prerequisites

在 下载 .NET 时获取并安装最新的 .NET SDK。

创建 Blazor Web App

将命令 shell 打开到示例应用的合适位置，并使用以下命令创建命令 Blazor Web App。 该 -o|--output 选项为项目创建文件夹并命名项目 BlazorSample：

dotnet new blazor -o BlazorSample

运行应用

使用以下命令将目录更改为 BlazorSample 文件夹：

cd BlazorSample

该 dotnet watch 命令运行应用，并将默认浏览器打开到应用的登陆页面：

dotnet watch

使用应用的边栏导航，访问“计数器”页，可在其中选择 Click me 按钮来递增计数器。

更改应用

使浏览器保持打开状态，并加载“计数器”页。 通过使用 dotnet watch 命令来运行应用，你可以对应用的标记和代码进行更改，而无需重新生成应用以反映浏览器中的更改。

Counter Razor呈现计数器网页的组件位于Components/Pages/Counter.razor项目中。 Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。

在文本编辑器中打开 Counter.razor 文件，记录下几行有意思的代码，这些代码用于渲染内容并使组件的计数器功能正常工作。

Components/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"

页面的标题由 <PageTitle> 标记设置：

<PageTitle>Counter</PageTitle>

显示 H1 标题：

<h1>Counter</h1>

一个段落元素（<p>）显示当前的计数，该计数存储在一个名为currentCount的变量中：

<p role="status">Current count: @currentCount</p>

按钮（<button>）允许用户增加计数器，此操作在单击按钮时会执行一个名为 IncrementCount 的 C# 方法。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

该 @code 块包含组件执行的 C# 代码：

• 计数器变量 currentCount 是用初始值为零建立的。
• 定义 IncrementCount 方法。 每次调用该方法时，方法中的代码都会递增 currentCount 变量。

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

让我们更改 IncrementCount 方法中计数器的增量。

更改行，以便每次调用 currentCount 时，IncrementCount 都会递增 10：

- currentCount++;
+ currentCount += 10;

保存文件。

保存文件后，正在运行的应用就会自动更新，因为你使用了 dotnet watch 该命令。 返回到浏览器中的应用，然后选择“计数器”页面中的 Click me 按钮。 见证计数器现在如何从其现有值为 1 到 11 的值递增。 每次选择按钮时，值都会递增 10。

关闭应用

执行以下步骤：

• 关闭浏览器窗口。
• 若要关闭应用，请在命令行界面中按 Ctrl+C 。

Congratulations! 你已成功完成本教程。

Next steps

在本教程中，你将学习到如何：

本教程介绍如何使用 .NET CLI 创建并运行 ASP.NET Core Web 应用。

有关 Blazor 教程，请参阅 ASP.NET Core Blazor 教程。

你将了解如何：

Prerequisites

在 下载 .NET 时获取并安装最新的 .NET SDK。

创建 Razor Pages 应用

将命令 shell 打开到示例应用的合适位置，并使用以下命令创建 Razor Pages 应用。 该 -o|--output 选项为项目创建文件夹并命名项目 RazorPagesSample：

dotnet new webapp -o RazorPagesSample

运行应用

使用以下命令将目录更改为 RazorPagesSample 文件夹：

cd RazorPagesSample

该 dotnet watch 命令运行应用，并将默认浏览器打开到应用的登陆页面：

dotnet watch

更改应用

在文本编辑器中打开 Pages/Index.cshtml 文件。

使用“Welcome”问候语的行后，添加以下行以显示本地系统日期和时间：

<p>The time on the server is @DateTime.Now</p>

保存更改。

保存文件后，正在运行的应用就会自动更新，因为你使用了 dotnet watch 该命令。

刷新浏览器中的页面以查看结果：

关闭应用

若要关闭应用，请执行以下作：

• 关闭浏览器窗口。
• 在命令行界面中按 Ctrl+C 。

Congratulations! 你已成功完成本教程。

Next steps

在本教程中，你将学习到如何：