Blazorを勉強しながらメモ。

Blazorの特徴

.NETでインタラクティブなクライアントWeb UIを作る。
JavaScriptの代わりにC#でリッチなUIを作る。 ↑これがメイン。
サーバーサイドもクライアントサイドも.NETで。
razor構文を使えるよ。一つのファイル内でマークアップとC#を使える。インテリセンスの恩恵を受けられる。
DOMに対する変更のみが適用される。ページまるごと更新ではない。

コンポーネントと、その埋め込み

Razorページには他のRazorページをコンポーネントとして埋め込める。コンポーネントごとに作っておいて、一つのページ内で呼び出して使える。

Razorページの名前をタグとして記述するだけ。

IndexページにCounterページとFetchDataページを埋め込むなら以下のようにする。

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

@*<SurveyPrompt Title="How is Blazor working for you?" />*@

<Counter />
<FetchData />

他ページの埋め込み

同じフォルダ内であれば、そのRazorファイル名をタグとして記述するだけで使える。別のフォルダだったら？

RazorページにParameter属性をつけて変数を宣言しておくと、ページ埋め込み時にその変数に値を設定できる。わーお。例えば、Index.razorページに以下のようにSurveyPromptページを、Titleプロパティに「How is Blazor working for you?」という文字列を渡して、開くとする。

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

このとき、SurveyPromptページでは、以下のように TitleプロパティにParameter属性をつけている。

<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
    <strong>@Title</strong>

    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2086020">brief survey</a>
    </span>
    and tell us what you think.
</div>

@functions {
    // Demonstrates how a parent component can supply parameters
    [Parameter] string Title { get; set; }
}

では、別のフォルダにある場合は？

その場合は、Razorページ内で@usingディレクティブを使う。

例えば、プロジェクト直下にComponentsフォルダを作って、その中にRazorページを置いた場合、@usingディレクティブを使ってそのフォルダを指定すると、その中のRazorページを名前のタグで呼び出せる。

Razorページの作り方

新しいページを追加するときはとりあえずクラスファイルを追加して、名前をhoge.razorとすればよい。で、中身を全部消してRazorページの内容を書く。

データバインディング

タグにbind属性をつける。 bind="@name"みたいな。 nameはコードブロック内で宣言されたプロパティ。

コードビハインド的な書き方

ロジック部分を別ファイル、別クラスに記述しておく。
そのクラスはComponentBaseクラスを継承しておく。
Razorファイルから利用するプロパティやメソッドはpublicにしておく。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;

namespace Blazor.ViewModels
{
    public class IndexViewModel : ComponentBase
    {
        public string greeting { get; set; } = "Hello, world!";
        public string currentDateTime { get; set; } = "???";

        public void GetDateTime()
        {
            this.currentDateTime = DateTime.Now.ToString("yyyy/MM/dd hh:mm:ss");
        }

    }
}

Razorファイル側ではそのクラスへの参照を記述する。@inheritsディレクティブを使って。

@page "/"
@inherits Blazor.ViewModels.IndexViewModel

<h1>@greeting</h1>

Welcome to your new app.

@*<SurveyPrompt Title="How is Blazor working for you?" />*@

<Counter IncrementAmount="10" />
<FetchData />

<button class="btn btn-primary" onclick="@GetDateTime">Get Current Time</button>
<label>@currentDateTime</label>