如何在不同文件中拆分 C# 和 HTML 的 Blazor WASM 组件代码？

Question

我有一些 Web 开发的背景，主要是 ASP MVC 和 JavaScript 与 Angular。

目前，我正在学习Blazor WASM，但我有点“困惑”，因为我找不到任何关于如何将以下代码拆分为两个文件的示例。

这是默认模板中一个组件的示例代码：

Counter.razor

@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++;
    }
}

有什么办法可以拆分成 Angular Web 组件吗？.html 和 .ts？在这种情况下 .razor 和 .razor.cs？

Counter.razor - HTML

@page "/counter"

<h1>Counter</h1>

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

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

Counter.razor.cs - C#

@code {
    private int currentCount = 0;

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

我已经在 Angular 中开发了相对复杂的 SPA，在 ASP MVC 中开发了站点，当您的项目很小时，我会说这个解决方案没问题，但我不喜欢在同一个 HTML 页面中混合 JS/C# 代码。过去我遇到过这样一些复杂的情况，变得难以维持。

知道如何拆分吗？谢谢。

Answer 1

是的，您只需要在代码隐藏 .cs 文件中从 ComponentBase 继承，然后在 .razor 文件的顶部继承该类。

c#文件：

public class MyComponent : ComponentBase

剃须刀文件：

@inherits MyComponent

这篇文章有一个更彻底的解释，虽然它是 2018 年的，所以可能有一些过时的部分。https://gunnarpeipman.com/blazor-code-behind/

Answer 2

您可以创建部分类来将代码与 HTML 分开：

[编辑：感谢 Enet 的信息] 如果将文件命名为 [classname].razor.cs，则该文件将成为解决方案资源管理器中的单个对象。今天午饭前我学到了两件事；是时候放慢脚步了。

如果您的 Blazor 项目中有一个名为 Index.razor 的页面（或组件）

编辑：部分类支持需要 .Net Core 3.1（根据 Federico Navarrete）。

在同一目录中创建一个同名的 C# 类。

一开始它不会编译，所以你必须添加“partial”这个词：

public partial class Index
{
    ...
}

我更喜欢将所有代码放在分部类中，因为 .razor 页面没有像 .cs 文件那样的方法和属性下拉菜单。