如何使用 VS 2019 创建“代码隐藏”Blazor 组件？答案

【问题标题】：How to create "Code Behind" Blazor Components with VS 2019?如何使用 VS 2019 创建“代码隐藏”Blazor 组件？
【发布时间】：2019-09-30 08:29:10
【问题描述】：

我可以创建一个类似的内联组件

<h1>@foo</h1>

@functions {

    string foo = "foo";
}

但是，当我创建 Foo.razor 时，只包含：

<h1>@foo</h1>

而Foo.razor.cs 包含：

namespace MyApp.Client.Components {
    public class Foo: ComponentBase {

        public string foo;
    }
}

我明白了：

Error   CS0101  The namespace 'MyApp.Client.Components' already contains a definition for 'Foo'

我正在使用最新的 VS 2019 和 Blazor 库。

我做错了什么？

【问题讨论】：

标签： blazor

【解决方案1】：

自 2019 年 10 月起，可以使用部分类。所以今天你可以像这样在代码隐藏文件中命名类：

public partial class Foo : ComponentBase
{
    protected override Task OnInitializedAsync()
    {
        // do stuff
    }
}

如果您将类文件命名为 Foo.razor.cs，它将出现在解决方案资源管理器中的 Foo.razor razor 文件下。

【讨论】：

如果你的类是通用的，你需要在 .razor 文件中添加@typeparam T。

【解决方案2】：

更新：现在可以这样做：https://stackoverflow.com/a/59470941/1141089

目前，“代码隐藏”和 .razor 视图不能共享相同的名称。

因此，当您拥有Foo.razor.cs 和Foo.razor 时，它会被视为同一个文件，因此会导致冲突。

暂时的解决方法：将您的 Foo.razor.cs 重命名为 FooBase.cs（或其他名称）。

然后在您的Foo.razor 中添加@inherits FooBase

这里有一个 GitHub 问题：https://github.com/aspnet/AspNetCore/issues/5487

【讨论】：

这个答案已经过时了。查看@Knelis 的回答

【解决方案3】：

在使用实验 Razor 的 Vs2019 v 16.8.4 中，新选项“提取块以隐藏代码”

步骤如下：

启用实验剃刀： Option->Environment -> Preview Feature-> Enable expermintal Razor 编辑器（需要重启）
将光标放在 @{code} 上或按 Control + 。 //点
下拉菜单显示“提取块到代码后面”
点击“提取块到代码后面”
然后 Vs2019 将代码提取到并排创建的新 *.razor.cs 文件中例如 counter.razor 组件的“Counter.razor.cs”。

生成的类样本：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Lab2.Pages
{
    public partial class Counter
    {
        private int currentCount = 0;

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

注意：生成的部分类不继承自 ComponentBase

【讨论】：

【解决方案4】：

我不喜欢用文字来解释方法，而是想像。

【讨论】：