时间戳

首页 > 解决方案 > 如何将 C# 和 HTML 的 Blazor WASM 组件代码拆分到不同的文件中？

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

问题描述

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

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

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

反剃刀

@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# 代码。我过去曾遇到过一些像这样的复杂情况，并且很难维护。

知道如何拆分它吗？谢谢。

标签： c#razorblazorblazor-client-side

解决方案

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

c#文件：

public class MyComponent : ComponentBase

剃须刀文件：

@inherits MyComponent

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

推荐阅读