时间戳

首页 > 解决方案 > Razor 组件：我可以在主布局中创建多个（上游渲染）部分吗？

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

问题描述

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

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

标签： .net-coreblazorrazor-pagesblazor-webassembly.net-5

解决方案

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

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

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

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>

推荐阅读