Blazor non-base class inheritance

Question

Consider a simple blazor component MyText

<p>@Title</p>

public partial class MyText
{
    [Parameter] public string Title { get; set; }
}

In page I use it as: <MyText Title="Abc" />

Now I would like to extend this component but do not want to change it, rather derive it by a new component MyTextEx and add another parameter. Something like:

@inherits MyText

<!-- Show base component something like: --!>
@base

<p>@Message</p>

public partial class MyTextEx
{
    [Parameter] public string Message { get; set; }
}

What I could not find how to display the base component's content? So it is rendered as:

<p>@Title</p>
<p>@Message</p>

Note this is a simplified example and my base component has a lot of parameters, events and hoping for virtual methods which could be overridden by extended/derived component. I'm trying to avoid composition like approach in razor file for base component because AFAIK I have to again populate it with parameters:

@inherits MyText

<MyText Title="@Title" />

<p>@Message</p>

I was able to find inheritance examples with base/abstract components, but could not find inheritance with final components.

Any idea how to achieve this?

Thanks, Csaba

Henk Holterman · Accepted Answer · 2020-05-23 09:40:58Z

13

@inherits MyText

<!-- Show base component like: --!>
@RenderBase()

<p>@Message</p>

@code 
{    
    // Message etc ...

    RenderFragment RenderBase() => builder => base.BuildRenderTree(builder);    
}

answered May 23, 2020 at 9:40

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stuart Hemming Over a year ago

FWIW, I've just tried this in VS 2019 with .Net Core 3.1 on a Blazor wasm app and it wouldn't compile complaining that RenderBase does not exist in the current context, however, the solution offered by @sw1337 (below) does

Henk Holterman Over a year ago

Renderbase is a method declared inside @code. So you must have mistyped something.

Stuart Hemming Over a year ago

Henk, that's because I'm dumber than a very, VERY dumb thing! :-( Sorry to have disturbed. :-)

tobias Over a year ago

can we manage from base this @RenderBase method?

sw1337 · Accepted Answer · 2020-08-20 05:06:10Z

4

A more direct alternative to the accepted answer:

@inherits MyText

<!-- Show base component something like: --!>
@{ base.BuildRenderTree(__builder); }

<p>@Message</p>

public partial class MyTextEx
{
    [Parameter] public string Message { get; set; }
}

answered Aug 20, 2020 at 5:06

sw1337

1,0279 silver badges15 bronze badges

3 Comments

Stuart Hemming Over a year ago

Whilst I've been able to make the rendering of the base class work, I've not been able to implement the partial class part of your suggestion. As written, the definition of the class just renders as text.

Ola Berntsson Over a year ago

This "hack" works in most simple use cases but fails silently (and maddeningly) in certain scenarios where the call to base.BuildRenderTree(__builder) is wrapped in other component tags. I suspect other components might wreck the __builder reference somehow. I couldn't tell you why, but the accepted answer worked where this one didn't.

Conman_123 Over a year ago

@OlaBerntsson your comment just saved me from going insane! Thank you! I would say it doesn't work because when it is wrapped in other component tags it means it is being rendered in a RenderFragment by the parent component (which is rendered later when the __builder builder is already finished).

Collectives™ on Stack Overflow

Blazor non-base class inheritance

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related