.NET 8新预览版使用 Blazor 组件进行服务器端呈现(项目体验)

Blazor 是一种在Web浏览器中运行 .NET代码的方法，可以在服务器上对 Blazor 组件进行呈现。这意味着可以使用 C# 和 .NET框架进行服务器端呈现，并将 UI 组件传输到客户端进行交互。

下面是使用 .NET 8 新预览版进行 Blazor 服务器端呈现的完整攻略：

步骤1：安装 .NET 8 SDK 预览版

首先，您需要安装 .NET 8 预览版 SDK。可以从 .NET Core 官网的预览版下载页面上找到最新版本。选择与你开发操作系统相应的版本。安装完成后，可以通过运行以下命令检查是否成功安装：

dotnet --version

输出的版本应该是 .NET Core 8 预览版。

步骤2：创建 Blazor 服务器端呈现项目

要创建 Blazor 服务器端呈现项目，可以使用以下命令：

dotnet new blazorserver

这个命令将在当前目录下创建一个名为 BlazorServer 的项目，其中包含一些示例文件和源代码。接下来，可以使用以下命令运行项目：

cd BlazorServer
dotnet run

这将启动应用程序，并使其在本地开发服务器上运行。在浏览器中访问 https://localhost:5001 或 http://localhost:5000 ，应该可以看到示例页面。

步骤3：使用 Blazor 组件进行服务器端呈现

要使用 Blazor 组件进行服务器端呈现，需要在 Razor 页面中使用组件元素。您可以使用以下示例代码替换 Pages/Index.razor 文件中的示例内容：

@page "/"
<h1>Counter</h1>
<Counter />

在这个示例中，我们创建了一个名称为 Counter 的组件，并在 Razor 页面中使用了它。这使得组件能够呈现在服务器端。

接下来，我们需要创建一个具有计数器逻辑的组件。您可以使用以下示例代码替换 Components/Counter.razor 文件中的示例内容：

<h1>Current count: @currentCount</h1>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在这个示例中，我们创建了一个 Counter 组件，该组件显示当前计数并包含一个点击按钮以增加计数的逻辑。

步骤4：运行应用程序

最后，您可以在本地开发服务器上运行应用程序。在终端中使用以下命令启动应用程序：

dotnet run

应用程序将在本地运行，并在浏览器中打开 https://localhost:5001 或 http://localhost:5000 。您将看到一个计数器组件，您可以单击按钮来增加计数。

示例2：在 Blazor 服务器端呈现项目中使用 Razor 组件

在 Blazor 服务器端呈现项目中，您可以使用 Razor 组件来组织页面级别的结构。这使得可以在不同的 Razor 页面之间共享组件，并使更改和维护页面布局更加容易。

以下示例展示如何在 Blazor 服务器端呈现项目中使用 Razor 组件：

首先，创建一个新的 Razor 组件。可以使用以下命令创建一个新的组件：

dotnet new razorcomponent -n Layout

这将在 Components 文件夹中创建一个名为 Layout 的新 Razor 组件。

接下来，您需要使用以下代码替换 Layout.razor 文件中的内容：

<div class="container">
    <div class="row">
        <div class="col-12">
            <header>
                <NavMenu />
            </header>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <main role="main">
                @Body
            </main>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <footer>
                &copy; 2021 - Blazor Server
            </footer>
        </div>
    </div>
</div>

在这个示例中，我们使用了 NavMenu 和 @Body Razor 组件，这些组件包含在 Layout 组件中。这些组件可以在不同的页面中重复使用。

接下来，打开 Pages/Counter.razor 文件并使用以下代码替换其中的内容：

@page "/counter"

<Layout>
    <h2>Counter</h2>
    <br />
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Current count: @currentCount</h4>
            <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
        </div>
    </div>
</Layout>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在这个示例中，我们使用了 Layout Razor 组件，它将 NavMenu、@Body 和 Footer 组件添加到页面中，并在页面下方放置了计数器组件。

最后，启动应用程序并访问 https://localhost:5001/counter 或者 http://localhost:5000/counter。您将看到一个带有计数器功能的页面，并且包括 NavMenu 和Footer 组件。

这样，您就可以使用 Blazor 组件进行服务器端呈现，并使用 Razor 组件在 Blazor 服务器端呈现项目中定义页面布局。