Razor 组件：我可以在主布局中创建多个（上游渲染）部分吗？

Question

目前我正在 Blazor Web Assembly 中开发一个项目。在这里，我想创建一个单独的 block/section，我可以在其中呈现来自不同 Blazor 页面的不同 bootstrap 模式。我可以通过创建一个新的布局组件 class，添加一个新的 RenderFragment 属性并继承它来实现吗？

更新1：是否可以创建多个部分（如 asp.net/mvc 剃须刀）？

Answer 1

在寻找我的问题的解决方案期间，我发现 Blazor 页面不呈现上游，但我们可以通过使用 Mr. Steve Sanderson's approach.

实现上游呈现

但是我在我的场景中使用了另一种方法，如下所示：

创建了 class 并作为作用域注入：

public interface IUIBlocks
{
    RenderFragment? ModalsBlock { get; }

    event EventHandler<OnUpdateEventArgs> OnValueUpdate;

    void SetModalsBlock(RenderFragment blockBody);
}

public class UIBlocks : IValueUpdator, IUIBlocks
{
    public RenderFragment? ModalsBlock { get; private set; }

    public event EventHandler<OnUpdateEventArgs> OnValueUpdate;

    public void SetModalsBlock(RenderFragment blockBody)
    {
        ModalsBlock = blockBody;
        OnValueUpdate?.Invoke(this, new OnUpdateEventArgs
        {
            CallerType = GetType(),
            CallingMethod = nameof(SetModalsBlock),
            CallingObject = this
        });
    }
}

在Program.cs中：

builder.Services.AddScoped<IUIBlocks, UIBlocks>();

在 MainLayout.razor 中注入了 UIBlocks 实例并将 ModalsBlock 放置在我想要放置它的地方

@inject IUIBlocks BlocksService
...
</div>
@BlocksService.ModalsBlock
...

现在，创建一个 Razor 组件作为 ModalsBlock：

@inject IUIBlocks Blocks



@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        Blocks.SetModalsBlock(ChildContent);
        if (firstRender)
        {
        }

        return base.OnAfterRenderAsync(firstRender);
    }
}

现在我可以像这样在任何 Razor 组件中使用它：

<_ModalsBlock>
    <div class="modal fade>
    ...
    </div>
</_ModalsBlock>

Razor 组件：我可以在主布局中创建多个（上游渲染）部分吗？

Razor components: Can I create multiple (upstream rendering) sections in the Main layout?

.net-core

razor-pages

blazor

.net-5

blazor-webassembly