Visual Studio および Ignite UI for Blazor を使用して Blazor Web App アプリケーションを作成する手順を説明します。この記事では、使用する Interactive render mode は「Server」で、”Interactive location” は「Per page/component」を設定しています。
なお、Ignite UI for Blazor のインストール方法についてはこちらにございますので本記事では割愛いたします。
1. Ignite UI for Blazor サービスを登録
Program.cs ファイルを開き、builder.Services.AddIgniteUIBlazor() 関数を呼び出して Ignite UI for Blazor サービスを登録します。
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddIgniteUIBlazor();
var app = builder.Build();
2. 名前空間を追加
_Imports.razor ファイルに IgniteUI.Blazor.Controls 名前空間を追加します。
@using IgniteUI.Blazor.Controls
3a. スタイルシートを追加
Components/App.razor ファイルの <head> 要素にスタイルシートを追加します。
<head>
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>
3b. body 要素に CSS クラスを追加
Ignite UI for Blazor のスタイル定義が正しく適用されるようにするために、Components/App.razor ファイルの <body> 要素に、以下のとおり “ig-typography” と “ig-scrollbar” の 2 つの CSS クラスを追加します。
...
<body class="ig-typography ig-scrollbar">
...
3c. スクリプト参照を追加
Ignite UI for Blazor の機能を正しく動作させるために、以下のとおりJavaScript ファイル “_content/IgniteUI.Blazor/app.bundle.js” を読み込む <script> 要素を追加します。
<body class="ig-typography ig-scrollbar">
....
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>
3d. rendermode 属性を追加
“Interactive location” を「Per page/component」に設定した場合、rendermode が未指定となっており、静的 Web アプリケーションとして構築されています。下記のように rendermode=”InteractiveServer” を追加することで、プロジェクトが動的に動作する対話型の Web アプリケーションとして動作し、Ignite UI for Blazor コンポーネント製品も正常に動作するようになります。
<head>
....
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
....
</body>
</html>
Ignite UI for Blazor コンポーネントの追加
Razor ページに Ignite UI for Blazor コンポーネントの追加します。
<IgbCard style="width:350px">
<IgbCardMedia>
<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
</IgbCardMedia>
<IgbCardHeader>
<h4>Jane Doe</h4>
<h6>Professional Photographer</h6>
</IgbCardHeader>
<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
Photography is a way of feeling, of touching,
of loving. What you have caught on film is captured forever...
it remembers little things, long after you have
forgotten everything.</IgbCardContent>
<IgbCardActions>
<IgbButton>More Info</IgbButton>
</IgbCardActions>
</IgbCard>
Blazor Web App アプリケーションをビルドして実行します。
