質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Razor

RazorはASP.NET Web PagesとASP.NET MVCで使われているビュー・エンジンです。HTMLマークアップとC#またはVisual Basicのコードに対応しています。マークアップとコードの間の切り替えは"@"で記されています。

継承

継承(インヘリタンス)はオブジェクト指向プログラミングに存在するシステムです。継承はオブジェクトが各自定義する必要をなくし、継承元のオブジェクトで定義されている内容を引き継ぎます。

Q&A

0回答

1251閲覧

Blazor:継承されたRazorコンポーネントの描画について

SqrtTan

総合スコア1

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Razor

RazorはASP.NET Web PagesとASP.NET MVCで使われているビュー・エンジンです。HTMLマークアップとC#またはVisual Basicのコードに対応しています。マークアップとコードの間の切り替えは"@"で記されています。

継承

継承(インヘリタンス)はオブジェクト指向プログラミングに存在するシステムです。継承はオブジェクトが各自定義する必要をなくし、継承元のオブジェクトで定義されている内容を引き継ぎます。

0グッド

0クリップ

投稿2021/04/20 04:09

前提・実現したいこと

Razorの独自基底コンポーネントを継承したコンポーネントをレンダリングしたい。

前提として、RazoeBaseLibがあり
RazoeBaseLibはRazorコンポーネントのクラスライブラリで、
次に示す、ツリー構造のようなコンポーネント群からなります。

RazorMainViewBase └RazorSceneObjectBase ├RazorViewObjectBase ├RazorViewObjectBase … └RazorViewObjectBase RazorMainViewBaseは1つのRazorSceneObjectBaseをプロパティとして公開しており、 RazorSceneObjectBaseは複数のRazorViewObjectBaseをDictionaryとしてもっています。

RazorMainViewBase

1@Layout LayoutBaseComponent 2 3@if(CurrentScene != null) 4{ 5 <RazorSceneObjectBase @ref="CurrentScene"/> 6} 7 8@code { 9 [Parameter] 10 public RazorSceneObjectBase CurrentScene {get;set;} 11}

RazorSceneObjectBase

1@inherits RazorViewObjectBase 2@foreach(var key in Props.Keys) 3{ 4 <div style="@Style"> 5 <RazorViewObjectBase @ref="Props[key]"/> 6 </div> 7} 8 9@code { 10 public Dictionary<string, RazorViewObjectBase> Props {get; internal set;} = new(); 11 12 protected void AddProp(string key, RazorViewObjectBase o){ 13 Props[key] = o; 14 } 15}

RazorImageObjectBase

1@inherits RazorViewObjectBase 2 3<img src="@ImageUri"/> 4 5@code { 6 public string ImageUri {get;set;} 7}

RazorViewObjectBase

1@inherits LayoutBaseComponent 2@Body 3 4@code { 5 public string Style {get;set;} = ""; 6}

発生している問題・エラーメッセージ

次のように派生コンポーネントを作成したときに、実際のインスタンスではなく基底のコンポーネントが表示されます。

該当のソースコード

WelcomeView

1public class WelcomeView : RazorMainViewBase { 2 protected override void OnParametersSet() 3 { 4 base.OnParametersSet(); 5 CurrentScene = new WelcomeScene(); 6 } 7

WelcomeScene

1public class WelcomeScene : RazorSceneObjectBase { 2 protected override void OnParametersSet() 3 { 4 base.OnParametersSet(); 5 Style = "background-color : red;"; 6 var newImageItem = new WelcomeItem(); 7 newImageItem.ImageUri = ".Assets/hoge.png"; 8 AddProp(newImageItem); 9 } 10} 11

WelcomeItem

1public class WelcomeItem : RazorImageObjectBase { 2 3}

試したこと

上記状態から、
<WelcomeView />
を呼び出したとき、
WelcomeViewのCurrentSceneのインスタンスはViewSceneではなくRazorSceneObjectBaseとなっており、Styleも適用されず <div style></div> となります。

派生したコンポーネントを、基底クラスのレンダリングから呼び出すことはできますでしょうか?

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

.net3.1
Blazor(web assembly application)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問