如何使用VS 2019创建Blazor组件背后的代码？

Question

我可以创建一个内联组件，例如

<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库。

我在做什么错了？

Answer 1

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

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

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

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

此处有一个与此相关的GitHub问题：https://github.com/aspnet/AspNetCore/issues/5487

Answer 2

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

步骤是：

• 启用实验剃刀： 选项->环境->预览特征->启用实验剃刀 编辑器（需要重启）
• 将光标放在@{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

Answer 3

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

Answer 4

自2019年10月以来，可以使用局部类。因此，今天您可以像这样在代码隐藏文件中命名该类：

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