コンポーネントにコンテンツを渡す

Blazor

■RenderFragment

　・コンポーネントにHTMLなどのコンテンツを渡すことを可能とするもの。

　・コンポーネント側Codeでは、RenderFragment型で、コンテンツを受け取る

　　パラメータを定義

　・コンポーネント側razorでは、受け取ったコンテンツを表示したい場所に、

　　@フラグメント名と定義する。

 　・コンポーネント呼び出し時、対象のコンポーネントタグ内で、

　　対象のRenderFragment名でタグを切り、そのタグ内で引き渡すHTMLを書く。

　　

<Component側 Code部>

[Parameter]
public RenderFragment Content1{ get; set; }
[Parameter]
public RenderFragment Content2 { get; set; }

 

<Component側 razor部>

<div>

    <p>@Content1</p>  

    <p>@Content2</p>

</div>

 

<Component呼び出し側>

<Component名 Title = "パラメータをコンポーネントに渡す">
    <Content1>
        <a href="https://yahoo/co.jp">Content1に表示</a>　///Content1にaタグが生成される
    </Content1>
    <Content2>
        <a href="https://Google/com">Content2に表示</a>
    </Content2>
</Component>

 

Component間のデータ授受(属性スプラッティング)

Blazor

コンポーネントに複数のパラメータを一括で渡すことができる。

(＊)ただし、一つのコンポーネントに渡せるパラメータのまとまりは一種だけ。

・CaptureUnmatchedValues属性を定義し、Dictionary型でパラメータを定義する。

 

■Component側(パラメータを受ける側)

・Code側

　[Parameter(CaptureUnmatchedValues = true)]
        public Dictionary<string, object> パラメータ名{ get; set; }

 

・Razor側

　<input id="test" @attributes ="パラメータ名" />

 

■コンポーネント呼び出し側

<コンポーネント @attributes ="パラメータ名" />
@code{
    public Dictionary<string, object> パラメータ名{ get; set;}

        = new Dictionary<string, object>
    {
        { "maxlength", "5" },
        { "placeholder", "ここに入力してください..." },
        { "size", "50" }
    };
}

Task,async,await

c# Blazor

■Task

・処理したい仕事のまとまり：Task(＝複数のメソッド)を保持して、

　それを実行開始するもの。手順書。

・Task.Runは、Taskのインスタンス化と実行を同時にするもの。

・Task.Runは内部のメソッドを非同期で実行開始だけするもの。

　よって、処理が終わる前に即座に次の処理に進む。

　var task = Task.Run( () =>

　{

　　MethodA();

　　MethodB();

　});

 

■async

・メソッドやTaskの宣言時に付ける文言。

　付けたメソッドを「非同期メソッド」という。

・つけると、メソッド内でawaitを使えるようになるだけ。

 

■await

・非同期で実行されるTaskやメソッドの終了を待つ。

　終了を待つので、非同期処理の実行結果を受け取り処理することが

　できる。

(ex)

　var returnValue = await Task.Run( () => GetNameMethod()) ;　

   Task.RunでGetNameMethodを実行し、その実行が終わるのを待ち、

　returnValue変数に結果をセットしている。

 

■戻り値

　Taskの実行結果の戻り値を呼び出し元に返す場合

　そのメソッドの引数の型は、Task<T>になる。

　例えば、Stringのリストを返すGetNameMethodを非同期で実行する場合

　以下のようになる。

　     public async Task<IEnumerable<String>> GetNameByStringList()
        {
            return await Task.Run( () => this.GetNameMethod()) ;
        }

 

　

DIのやりかた

Blazor

①Program.csのMainメソッド内にDIするクラス名を設定。

　ex)builder.Services.AddScoped<クラス名>();

 

②DI先となるコンポーネント(XX.razor)の行頭で、以下の通りInjectする。

　@inject クラス名 変数名

 

③使用する際は、this.変数名.xxxで使用。

 

(*)InjectするクラスのUsing句は、コードビバインド側ではなく、

　HTML側に書く必要がある。

　ex)

　@using Solution名.Client.DIするクラス名
　@inject DIするクラス名 変数名;

　<div>～

 

子Componentから親への受渡まとめ

Blazor

基本的に、以下の2のやり方だけやっていればよいのではないか？

 

■子側

　子側はやり方は一つだけ。

　①[Parameter]属性付きでEventCallbackを定義する。

　②渡したいタイミングで、定義したイベントを起こす。

 

　①

　　[Parameter]
        public EventCallback<渡す値の型> イベント名{ get; set; }

　②

　　private void イベント起こすメソッド(){

　　　イベント名.InvokeAsync(this.Result);

　　}

■親側

　親側は2通りある。

　1.戻り値として直接値を受け取る

　2.イベントを購読する

 

　1.戻り値を受け取る

　　①コンポーネントを呼ぶ時、パラメータに@bind-イベント名=戻値名>

　　　<コンポーネント名 Weight ="@Weight"
　　　　　Height ="@Height" @bind-Result="Result" />

　　このやり方の場合、自動でバインドされる為、子で渡された後

　　何か処理を挟む余地はない。

　　また子のイベント名を、変数名+Changedにしなければならない。

 

　2.イベントを購読する

　　①コンポーネントを呼ぶ時、子のイベント名=紐付先親メソッド名とする。

　　②紐付先親メソッド名で、引数に渡される値の型を持たせる。

　　<コンポーネント 子イベント名="親メソッド名" />

　　private void 親メソッド名(子が渡す値の型 子イベントの引数名)
        {
        }