Template Page For Blazor Component

Basically I am trying to create a mix of a templated component and a layout.

I want a page layout that I can reuse, and still pass required parameters to. I think a way to do this may be to take advantage of an abstract base class.

This could be solved by my third option if I wanted to do it all through render tree building, but I do not want to do that. I'm okay with the base being built by a render tree (i.e. Option 3), but not the component that inherits from it (i.e. MyGrid.razor)

What I want to do

MyGrid.razor

@page "/mygrid"@inherits GridPage @*or "layout" or whatever works*@<Grid><Column><Column></Grid>@code {    protected overrides string Title => "My Grid"}

GridPage.cs

<header>@Title</header><div>@ChildContent</div>@code {    [Parameter] public string Title { get; set; }    [Parameter] public RenderFragment ChildContent { get; set; }}

Solutions I have tried

1. Layout - GridLayout

<header>@Title</header><div>@Body</div>@code {    [CascadingParameter]    [Parameter] public string Title { get; set; }}

Issue is that you have to remember this param is available and it is not required to implement

2. Template

<GridPageTemplate Title="My Title"><Grid><Column><Column></Grid></GridPageTemplate> 

Issue here is that I would have to wrap my component with the template (not that big of deal, but would rather inherit) and I still don't know which params are required to implement.

3. Abstract base class

public abstract class GridPage : ComponentBase{    protected abstract string Title { get; }    protected override void BuildRenderTree(RenderTreeBuilder builder)    {        builder.OpenRegion(0);        builder.OpenElement(1, "header");        builder.AddContent(2, Title);        builder.CloseElement();        builder.CloseRegion();        builder.OpenElement(3, "div")        builder.OpenRegion(10);        this.BuildRenderTree(builder);        builder.CloseRegion();        builder.Closelement()    }}

Issue is this one doesn't seem to work. I actually thought it would cause it would just take in the component and continue the base render (this.BuildRenderTree(builder);).

Desired outcome

Say you have two grids.. a Students grid and Classes grid. I would want a different grid (and title) for each of them. I want to customize the title and columns for each basically. They would have a common layout markup (what I call GridPage), but MyGrid (either Students or Classes) would be different.

Students.razor

@page "/students"@inherits GridPage<Grid RowType=Student><Column For="StudentName"><Column For="StudentAge"><Column For="StudentHomeRoom"></Grid>@code {    protected overrides string Title => "Students"}

Classes.razor

@page "/classes"@inherits GridPage<Grid RowType=Class><Column For="ClassName"><Column For="ClassTime"></Grid>@code {    protected overrides string Title => "Classes"}

They would both output

<header>Title_here</header><div>Grid_markup_here</div>