お米 is ライス

C#やらUnityやらを勉強していて、これはメモっといたほうがええやろ、ということを書くつもりです

ASP.NET Core 3.0でRazorコンポーネントを使う方法

Razorコンポーネントとは

Windows Formsでいうコントロールみたいなものだと思う。
詳しくはこのページに書いてある。
docs.microsoft.com

Razorコンポーネントの作成

例えばHoge.razorというファイルを作成して次のように書く

@code
{
    [Parameter]
    public string Text { get; set; }
}

//テキストボックスで表示
<input type="text" @bind="Text" />

こうすることでHogeというコンポーネントが作られたことになる。
[Parameter]という属性を付けた変数はこのコンポーネントを使用するときに外部からアクセスすることができる。
このコンポーネントは外部からTextという値に代入された文字列をテキストボックスに表示して編集できるようにしている。

Razorコンポーネントの使用

作成したHogeというコンポーネントを使用するには以下のようにすればよい。

@{
    //適当な文字列のリスト
    var texts = new List<string>();
    for(var i = 0;i < 5;i++)
    {
        texts.Add(i.ToString());
    }
}

@foreach(var text in texts)
{
    //Hogeというコンポーネントを使って文字列を入れたテキストボックスを表示
    <Hoge Text="text" />
}

見ればわかる通り、作成したRazorコンポーネントのファイル名を普通のHTMLタグと同じ感じで書くことでRazorコンポーネントを使うことができる。

ASP.NET Core 3.0ではこういう風にしてWEBアプリケーションを作っていくことになるのだと思う。
ちゃんと試したわけではないので多々間違っているところもあると思うが許してほしい。