コンポーネント (Razor コンポーネント)

コードを書いて見る前に少し用語を勉強しておく。
今日の参考資料はこれ。

ASP.NET Core Blazor の概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly

Blazor のアプリはコンポーネント (.razor ファイル) によって構成される。コンポーネントってのは「ページ、ダイアログ、データエントリフォームなどの UI の要素」らしい。

C# コードに HTML マークアップを結合するための Razor 構文で記述する

触ってみる

Before

一部コメントアウトしましたが、サンプルでは文字を表示するだけのシンプルな HTML のコードでした。

Pages\Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<!--<SurveyPrompt Title="How is Blazor working for you?" /> -->

After

Dialog.razor という子コンポーネントのファイルを作成します。
ここでは HTML の div 要素とその中の変数 Title や ChildConponent、onclick 時に呼ばれそうな OnYes 関数の定義などを記述しています。

Pages\Dialog.razor

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

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

// 親子間のコンポーネントの受け渡しに不可欠で名前変更はできない (これや @ChildContent がないと実行時にエラー)
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

この div 要素やボタンを配置してくれそうな子コンポーネント Dialog.razor を親コンポーネント Index.razor で表示します。

Pages\Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<!--<SurveyPrompt Title="How is Blazor working for you?" />-->

<!-- コンポーネントの名前、変数 Title に渡す値など Dialog.razor に渡す値を記述 (関数の引数みたい) -->
<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

何やら表示されました。これが Dialog.razor で記述した箇所ですね。

Yes! ボタンをクリックすると、Dialog.razor で定義した OnYes() 内の Console.WriteLine("Write to the console in C#! 'Yes' button was selected."); が実行され、Console に出力されました。

HTML 表示は以下ですが、blazor.webassembly.js を指定しているくらいです。
blazor.webassembly.js は .NET ランタイム、アプリ、およびアプリの依存関係のダウンロード、アプリを実行するランタイムの初期化を行うようです。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>blazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

今日はここまで。

Blazor WebAssembly を触ってみる - その③コードを少し書いてみる

コンポーネント (Razor コンポーネント)

触ってみる

Before

After