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

Question

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

目前，我正在学习 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 Components中进行拆分吗？ .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

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

c＃文件：

public class MyComponent : ComponentBase

剃刀文件：

@inherits MyComponent

本文有更详尽的解释，尽管它来自2018年，所以可能有些过时了。 https://gunnarpeipman.com/blazor-code-behind/

Answer 2

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

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

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

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

在同一目录中用相同的名称创建一个C＃类。

起初它不会编译，因此您必须添加“ partial”一词：

public partial class Index
{
    ...
}

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