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

【问题标题】：Razor components: Can I create multiple (upstream rendering) sections in the Main layout?Razor 组件：我可以在主布局中创建多个（上游渲染）部分吗？
【发布时间】：2021-03-13 07:01:14
【问题描述】：

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

更新1：是否可以创建多个部分（如在 asp.net/mvc razor 中）？

【问题讨论】：

标签： .net-core blazor razor-pages blazor-webassembly .net-5

【解决方案1】：

在寻找我的问题的解决方案的过程中，我发现 Blazor 页面不会向上游渲染，但我们可以使用 Mr. Steve Sanderson's approach 实现上游渲染。

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

创建了一个类并作为作用域注入：

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>

【讨论】：