Blazor 代码隐藏（blazor 操作dom）

Razor 组件通常是在单个 .razor 文件中创作的,这样就存在页面中包含html代码和后台代码（@code标记指定的代码）。如下

    @if (Items!=null)
    {
        @foreach (var item in Items)
        {
            if (ItemTemplate!=null)
            {
                @ItemTemplate(item)
            }
        }
    }


@code {
    [Parameter]
    public RenderFragment ? Heading { get; set; }

    [Parameter]
    public RenderFragment ? ItemTemplate { get; set; }

    [Parameter]
    public IEnumerable ? Items { get; set; }
}

为了使页面更加简洁，也可以使用代码隐藏文件来分隔代码和标记。 若要使用组件文件，请添加与组件文件的文件名匹配，但添加了 .cs 扩展名的 C# 文件 (Counter.razor.cs)。 使用 C# 文件定义组件的基类。 可以根据需要命名基类，但通常将基类命名为与组件类相同的名称，并添加 Base 扩展名 (CounterBase)。 基于组件的类也必须从 ComponentBase 中派生。 然后，在 Razor 组件文件中，添加 @inherits 指令以指定组件的基类 (@inherits CounterBase)。

如定义Counter.razor组件页面

@inherits CounterBase

Counter

Current count: @currentCount

Click me

定义组件对应的代码文件Counter.razor.cs

public class CounterBase : ComponentBase
{
    protected int currentCount = 0;

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

注意：组件成员在基类中的可见性必须为 protected 或 public 才能对组件类可见。