初めまして、アキちゃんです。
備忘録をかねてブログを書くことにしました。
本シリーズはBlazor+RadzenのWebアプリシリーズです
それでは早速・・・Let's BlazorServer+Radzen ♪
Lesson.1 プロジェクト作成（BlazorServerApp）
プロジェクト名は BlazorServerApp で、Blazor Server プロジェクト（.Net6）で作成します。
基本デフォルトのまま次へ押しとけば大丈夫ですが一応以下記事にまとめています。
Lesson.2 Radzenの参照の追加
プロジェクトの作成が完了したら公式サイトのGet Startedにならって参照を追加していこうと思います。
Lesson.2-1 インストール
プロジェクト(P)→Nugetパッケージの管理(N)をクリックしNugetパッケージを開き参照で"Radzen"と入力し、一番上に来たRadzen.Blazorをインストールします。
Lesson.2-2 名前空間のインポート
"_Imports.razor" に "@using Radzen.Blazor"を追加します。
Lesson.2-3 テーマの追加
"Pages\_Layout.cshtml"に
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">を追加します。
もしも、Standardなレイアウトが好みの場合は
<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">を追加します。
Lesson.2-4 jsの追加
"Pages\_Layout.cshtml"に
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>を追加します。
Lesson.2-5 コンポーネントを使う
ここは参照の追加には関係ないでいったん飛ばしコンポーネントの確認は後で試そうと思います。
Lesson.2-6 Dialog、Notification、ContextMenu、Tooltipコンポーネントを使う
ここでは使うというよりは上記4つのコンポーネントを今後使うためには、コンテナーにサービスを追加しなければいけないためその追記を行うといった形です。
使わない場合は追加しなくてもよいですがそれぞれ便利なコンポーネントなので取り敢えず追加して良いと思います。
"Program.cs"に
using Radzen;
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();
を追加します。
ここで一度アプリケーションをビルドして成功するか確かめてください。
Lesson.3 コンポーネントを使ってみる
ここまできたら次はコンポーネントを実際に使ってみましょう。
"Pages\Counter.razor"に
using Radzen;
<RadzenButton Click="@ButtonClicked" Text="Click me"></RadzenButton>
void ButtonClicked()
{
currentCount++;
}
を追加します。
そして実行すると・・・
違うボタンが画面上に二つ！どっちをクリックした時もCurrent count: 0がカウントアップされると思います。
同じ表示になればRadzenの導入は完了です。
Lesson.4 あとがき
UIもスタイリッシュで更新頻度が高いことから今、最も注目しているコンポーネントの一つなのでぜひみなさんも使ってみてください
それでは次回更新でまた！
