ASP.NETでBlazor Radzen を使ってみる

ASP.NET CoreでBlazor(ブレイザー)を試してみました。
その際に、
Blazor向けのUIフレームワークであるRadzen Blazor Componentsなる便利なものが
あるようなので一緒に試してみました。

プロジェクトを作成して、Radzenを使えるようにするまでの方法です。
Visual Studio Community 2019 for Macで動作確認をしています。

プロジェクト作成

新しいプロジェクトのテンプレートから「Blazorサーバーアプリ」を選択します。

今回は簡単な確認用なので認証なしで作成します。

まずは動かしてみます。

Blazorで「Hello, world!」です。アプリが無事に動きました！

NuGetでパッケージ追加

次に、Radzen Blazor Componentsを使えるように設定します。
NuGetを使って「Radzen.Blazor」を追加します。

ファイル修正

プロジェクトフォルダのルートにある「_Imports.razor」にRadzen.blazorの参照を追記します。

@using Radzen.Blazor

次は、CSSです。
Pagesフォルダにある「_Host.cshtml」のheadに追記します。

    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    <script src="_content/BlazorInputFile/inputfile.js"></script>

最終確認

簡単なコードを貼り付けてRadzenが動くか確認してみます。
Pagesフォルダにある「Index.razor」を修正します。

<div class="row">
    <div class="col-md-6">
        <h3>Simple login</h3>
        <RadzenCard>
            <RadzenLogin AllowRegister="false" AllowResetPassword="false" />
        </RadzenCard>
    </div>
</div>

そして実行結果です。
f:id:Heinlein:20201026094947p:plain
貼り付けたコードは RadzenLoginタグだけです。
このタグが一つだけで、UsernameとPasswordのテキストボックスと
Loginのボタンまで出力されました。
ものすごく簡単にログイン画面が実現できてしまいました。