BlazorでHelloWorldする。
本当にめちゃめちゃ簡単。
というか、プロジェクトを作ればHelloWorldが完成してしまう。
だから、ちょっと中身について話さないと、ただのBlazorプロジェクトの作り方というものになってしまう。
ちょっとだけ中身についても解説する。
Visual StudioでBlazorプロジェクトを作る。
ファイル→新しいプロジェクト
Blazorアプリを選択して次へ
プロジェクト名を入力して作成をクリック
作成するをクリックする。
新規プロジェクトが作成される。
デバッグ実行する。(F5を押せばデバッグ実行となる。)
プロジェクトを作成するだけででHello Worldができてしまう。
構成について
左側のメニューはNavMenu.razorで描画されている。HomeやCounterやFetch DataのルーティングはNavLinkコンポーネントを使います。
これは、Microsoft.AspNetCore.Components.Routingの名前空間にあるクラスです。ざっくりいうと、ルーティングしてくれるやつ。
では、さっそく見ていく。
NavLinkコンポーネントをインスタンス化するには、以下のようにHTMLタグのように記述してやればよい。
例えば、Counterのメニューを例に見てみる。
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">NewBlazorApp</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
@code {
bool collapseNavMenu = true;
string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
href=”counter”がルーティング先として定義されている。
これでPagesディレクトリのCounter.razorを呼び出すことができる。
Counter.razor 側には@page “/counter”を書いておく。
NavLinkで実際に生成されるソースは以下
つまり、aタグに変換されるようだ。
<a href="counter" class="nav-link"><!--!-->
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>
実際に一つページを作ってリンクを設置してみる。
まずはPagesディレクトリ配下にNewPage.razorを作成する。
中身はこんな感じ
@page "/newpage"
<h1>This is my NewPage</h1>
<h2>HogeHoge</h2>
次に、SharedディレクトリにあるNavMenu.razorを編集する。
NewPage用のルーティングを設定する。
Fetch dataをコピーしてきてhref部分とspanの後の文字を変更する。
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
@*---------------ここに追加------------------*@
<li class="nav-item px-3">
<NavLink class="nav-link" href="newpage">
<span class="oi oi-list-rich" aria-hidden="true"></span> New Page
</NavLink>
</li>
@*---------------ここまで------------------*@
</ul>
</div>
デバッグで実行してみると
以下のようにちゃんと表示されているはず。