如何在不同的文件中拆分 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 中开发了站点，当你的项目很小的时候，我认为这个解决方案是可以的，但我不喜欢混合JS/C# 代码在同一 HTML 页面中。我过去遇到过一些像这样的复杂情况，并且变得难以维护。

知道如何拆分吗？谢谢

Answer 1

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

c# 文件：

public class MyComponent : ComponentBase

剃须刀文件：

@inherits MyComponent

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

Answer 2

您可以创建部分 classes 以将代码与 HTML:

分开

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

如果您在名为 Index.razor

的 Blazor 项目中有一个页面（或组件）

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

在同目录下创建同名的C#class

一开始编译不了，所以要加partial:

public partial class Index
{
    ...
}

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

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

How to split Blazor WASM components code of C# and HTML in different files?

c#

razor

blazor

blazor-client-side