Блог

В настоящее время я работаю над проектом в Blazor Web Assembly. Здесь я хочу создать блок / раздел sperate, в котором я могу отображать разные модальности начальной загрузки с разных страниц блейзора. Могу ли я достичь этого, создав новый класс компонентов макета, добавив новое свойство RenderFragment и наследовав от него?

Update1: возможно ли создать несколько разделов (как в asp.net/mvc бритва)?

Во время поиска решения моей проблемы я обнаружил, что Blazor pages не отображает восходящий рендеринг, но мы можем добиться восходящего рендеринга, используя подход мистера Стива Сандерсона.

Но я использовал другой подход для своего сценария, который заключается в следующем:

Создал класс и ввел в качестве области видимости:

 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>