Blazor Razorコンポーネントの継承と表示

Question

前提・実現したいこと

BlazorのRazorコンポーネントを利用した継承とメソッドのオーバーライド

該当のソースコード

クラスが次の関係にあるとき、

LayoutComponentBase
└PageComponentBase(独自クラス、LayoutComponentBaseを継承)
└XXXPage(独自クラス、PageComponentBaseを継承)

PageComponentBaseがレイアウトに次の実装を持つ

<div>@Header</div>
<div>@Body</div>
@code{
    public MarkupString Header {get;set;}
    protected override Task OnInitializedAsync()
    {
        Header = GetHeader();
        return base.OnInitializedAsync();
    }

    protected virtual MarkupString GetHeader() => (MarkupString)"";
}

XXXPageがレイアウトに次に実装を持つ

Page "/XXXPage"

<div>aaa</div>
@code{
    protected override MarkupString GetHeader() => $"{this.GetType().Name}";
}

/XXXPageへアクセスしたとき、
期待する結果(ブラウザの表示)は

XXXPage
aaa

ですが
実際は

aaa

です。
XXXPageでoverrideしたメソッドによるHeaderの書き換えが反映されていない理由は何でしょうか？

補足情報（FW/ツールのバージョンなど）

VisualStudio2019 .NET 5 Blazor

Answer 1

まず、XXXPage側に @layoutがありません。この記載がないとPageComponentBaseの@bodyにXXXPageのレイアウトがバインドされません。

@Page "/XXXPage"

@layout PageComponentBase
<div>aaa</div>
@code{
    protected override MarkupString GetHeader() => $"{this.GetType().Name}";
}

これを修正しても表示結果は

aaa

です。正確には、

<div>(PageComponentBaseのHeader)</div>
<div>aaa</div>

です。(PageComponentBaseのHeader) は""なので見た目見えないだけでPageComponentBaseのHeaderは出力されています。XXXPageでオーバーライドしたGetHeaderメソッドの結果はPageComponentBaseのHeaderには反映されません。

これは、LayoutComponentの仕組み上仕方のないことです。

razorページ上で @layout ディレクティブがある場合、記載されているrazorページをベースにページが構成されます。具体的に書くと、

• XXXPage中に @layout PageComponentBase を発見する
• PageComponentBase ページオブジェクトが作成される。
• XXXPageのレンダリングを行う。
• PageComponentBase ページのレンダリングを行う。@BodyにXXXPageのレンダリング結果をバインド。
• 上記の手順でレンダリングしたPageComponentBase ページ が"/XXXPage"としてブラウザに返される

となります。
ここで注目してほしいのは、XXXPage オブジェクトと PageComponentBase オブジェクトが別々に生成されるという点です。
PageComponentBaseのOnInitializedAsyncにブレークポイントを仕掛けて、ローカル変数ウィンドウでthisをチェックすると分かりますが、thisがPageComponentBaseとXXXPageの場合、2回実行されていることが分かります。通常のPageComponentBaseを継承したXXXPageの初期化であればthisがXXXPage側の1回であるはずです。
PageComponentBaseとしてnewされたオブジェクトは継承先の情報を持ちませんので、GetHeaderメソッドはPageComponentBaseに実装されているvirtualな方を実行します。当然、@Headerの中身もPageComponentBase.GetHeaderの返り値です。
一方、XXXPageオブジェクトをnewしたらGetHeaderはオーバーライドしたほうが実行されます。なのでXXXPageオブジェクトのHedaerプロパティは"XXXPage"になっています。
しかし、先述した通り「PageComponentBaseのレンダリング結果の@bodyにXXXPageのレンダリング結果がバインドされて、その結果が /XXXPage として返されるので@Headerの中身はXXXPageとは関係ないものになっているのです。

以上が、XXXPageでoverrideしたメソッドによるHeaderの書き換えが反映されていない理由です。