为多个页面定义一次 HTML 和 Blazor 组件

Question

I want to split my code to be as reusable as possible.

Lets consider I have this structure:

I have a base class for a page called FormBasePage which inherits from ComponentBase

This class holds a property for an identifier

public int Identifier { get; set;}

Now I have two other pages which inherit from my FormBasePage lets call them ProductForm and CustomerForm .

In both files I want to display the identifier in the heading just like:

<h2>@Identifier</h2>

To achive this now, I'll need to repeat this line in both files. This might be OK for a single line of code but lets think I'm having some sort of modals which are being used by all the page and just display a different name based on my identifier, eg a modal to confirm a deletion.

Is there any way to provide some HTML or Blazor Components within my FormBasePage and insert the content around it?

For example:

1. Content from FormBasePage (Header)
2. Content from either ProductForm or CustomerForm
3. Content from FormPageBase (Footer)

Answer 1

ComponentBase isn't designed to handle wrappers. You have two alternatives.

Build a wrapper component

Build a component that contains your code, add it to each page and add your content as it's ChildContent .

BaseWrapper.razor

<div class="bg-secondary text-white p-3 b-2">
    @this.ChildContent
</div>

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

And then:

@page "/"

<PageTitle>Index</PageTitle>

<BaseWrapper>
    <h1>Hello, world!</h1>

    Welcome to your new app.

    <SurveyPrompt Title="How is Blazor working for you?" />
<BaseWrapper>

Build a new Wrapper Base Component

This is more advanced as you need a full blooded replacement for ComponentBase .

This is mine: I use it principally in Edit/Display/List Forms. It does a few things differently such as condenses the lifecycle methods and doesn't automatically implement UI event rendering. It's intended to be leaner and meaner on resources than ComponentBase . There are lots of comments to explain the code.

Whether you wish to implement something like this will depend on your C# skills and Blazor experience.

First the base component:

/// ============================================================
/// Author: Shaun Curtis, Cold Elm Coders
/// License: Use And Donate
/// If you use it, donate something to a charity somewhere
/// ============================================================

namespace YourNameSpace;

/// <summary>
/// Base minimum footprint component for building simple wrapper Components
/// Note there is no No automatic event rendering
/// </summary>
public abstract class UIWrapperBase : IComponent
{
    protected RenderFragment renderFragment;
    protected internal RenderHandle renderHandle;
    protected bool hasPendingQueuedRender = false;
    protected internal bool hasNeverRendered = true;
    protected bool hide;
    protected bool initialized;

    /// <summary>
    /// Content to render within the component
    /// </summary>
    [Parameter] public RenderFragment? ChildContent { get; set; }

    /// <summary>
    /// Parameter to control the display of the component
    /// </summary>
    [Parameter] public bool Hidden { get; set; } = false;

    /// <summary>
    /// This is the Wrapper Content where we define the wrapper content
    /// Use @Content for the child content
    /// </summary>
    protected abstract RenderFragment? Wrapper { get; }

    // This is where we capture the content from the child component
    // The Blazor compiler overrides BuildRenderTree with this content
    protected RenderFragment? Content => (builder) => this.BuildRenderTree(builder);

    /// <summary>
    /// CTor
    /// caches a copy of the Render code
    /// Detects if the component shoud be rendered and if not doesn't render any content
    /// </summary>
    public UIWrapperBase()
    {
        this.renderFragment = builder =>
        {
            hasPendingQueuedRender = false;
            hasNeverRendered = false;
            var hide = this.hide | this.Hidden;

            if (hide)
                return;

            if (this.Wrapper is not null)
            {
                this.Wrapper(builder);
                return;
            }

            BuildRenderTree(builder);
        };
    }

    /// <summary>
    /// Default Render method required by Razor to compile the Razor markup to.
    /// </summary>
    /// <param name="builder"></param>
    protected virtual void BuildRenderTree(RenderTreeBuilder builder) { }

    /// <summary>
    /// Method to queue the component Render Fragment onto the Renderer's Render Queue
    /// Only adds it if there are no other copies already queued
    /// </summary>
    protected void StateHasChanged()
    {
        if (hasPendingQueuedRender)
            return;

        hasPendingQueuedRender = true;
        renderHandle.Render(renderFragment);
    }

    /// <summary>
    /// StateHasChanged Method that is invoked on the UI Thread
    /// Do not call through InvokeAsync, it already does it.
    /// </summary>
    protected void InvokeStateHasChanged()
        => renderHandle.Dispatcher.InvokeAsync(StateHasChanged);

    /// <summary>
    ///  IComponent implementation
    ///  Gets and saves the provided RenderHandle
    /// </summary>
    /// <param name="renderHandle"></param>
    public void Attach(RenderHandle renderHandle)
        => this.renderHandle = renderHandle;

    /// <summary>
    /// Method that can be overridden by child components
    /// Equivalent to OnInitialized{Async}/OnParametersSet{Async} all rolled up into a single method
    /// Return false to prevent a Render.
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns>True to call StateHasChanged</returns>
    protected virtual ValueTask<bool> OnParametersChangedAsync(bool firstRender)
        => ValueTask.FromResult(true);

    /// <summary>
    ///  IComponent implementation
    /// Called by the Renderer at initialization and whenever any of the requested Parameters change
    /// </summary>
    /// <param name="parameters"></param>
    /// <returns></returns>
    public async Task SetParametersAsync(ParameterView parameters)
    {
        parameters.SetParameterProperties(this);

        var dorender = await this.OnParametersChangedAsync(!initialized)
            || hasNeverRendered
            || !hasPendingQueuedRender;

        if (dorender)
            this.StateHasChanged();

        this.initialized = true;
    }
}

And our defined wrapper:

@inherits UIWrapperBase

@*@implements IHandleAfterRender*@
@*@implements IHandleEvent*@

@code {
    protected override RenderFragment Wrapper => (__builder) =>
    {
        <div class="bg-secondary text-white p-3 b-2">
        @this.Content
        </div>
    };

    // example using the replacement for OnInitialized/OnParametersSet
    protected override ValueTask<bool> OnParametersChangedAsync(bool firstRender)
    {
        // Do whatever lifecycle stuff you want to
        return ValueTask.FromResult(true);
    }

    // uncomment if you want single render UI events
    // Also uncomment @implements IHandleEvent at the top of the page
    //public async Task HandleEventAsync(EventCallbackWorkItem callback, object? arg)
    //{
    //    await callback.InvokeAsync(arg);
    //    StateHasChanged();
    //}

    // uncomment if you want double render UI events as in ComponentBase
    // Also uncomment @implements IHandleEvent at the top of the page
    //public async Task HandleEventAsync(EventCallbackWorkItem callback, object? arg)
    //{
    //    var task = callback.InvokeAsync(arg);
    //    if (task.Status != TaskStatus.RanToCompletion && task.Status != TaskStatus.Canceled)
    //    {
    //        StateHasChanged();
    //        await task;
    //    }
    //    StateHasChanged();
    //}


    // Uncomment of you want OnAfterRenderAsync
    // Also uncomment @implements IHandleAfterRender at the top of the page
    //private bool _hasCalledOnAfterRender;
    //public Task OnAfterRenderAsync()
    //{
    //    var firstRender = !_hasCalledOnAfterRender;
    //    _hasCalledOnAfterRender |= true;

    //    // your code here

    //    return Task.CompletedTask;
    //}
}

And finally Index:

@page "/"
@inherits MyWrapper

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

This is what it looks like: