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

Question

这个问题在这里已经有了答案:





Developing Blazor Razor component in VS with dual screens

(1 个回答)


去年关闭。




我有一些 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

Razor 文件:

@inherits MyComponent

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