Ignite UI for Blazor で DataGrid を表示してみる（.NET6 対応）

# Ignite UI for Blazor とは？

Blazor アプリケーションのUI開発を支援するコンポーネントライブラリーです。高速データグリッドやチャート、株価チャート、財務チャート、地理的マップ、複数列コンボボックスをはじめ、業務要件を満たせる60種類以上の高性能なコントロールで Blazor アプリケーション開発の生産性向上を支援します。

# DataGrid を使用したサンプルアプリケーションの作成

今回は、実際に Ignite UI for Blazor を使用して、DataGrid にデータを表示する簡単なサンプルアプリケーションを作成したいと思います。

#### 手順1 - 新規プロジェクトの作成

Visual Studio 2022 を起動し、新しいプロジェクトの作成から Blazor Server アプリテンプレートを選択し、[次へ]をクリックします。
![](https://storage.googleapis.com/zenn-user-upload/49d024723297-20211202.png)

プロジェクト名を入力し、[次へ]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/4091e66f-c1e8-50af-8d9f-fa65fca6676c.png)


フレームワークを選択し、[作成]をクリックします。（今回は.NET6を使用します。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/b6cf5f21-c30c-83b0-8b79-2090e7e367e3.png)


新規プロジェクトが作成されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/21e88a31-67a4-5a1d-e2a4-853d501ff909.png)


#### 手順2 - NuGet パッケージのインストール

メニューバーの[ツール] - [Nugetパッケージマネージャー] - [ソリューションのNugetパッケージの管理]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/44dd3e87-aedf-6c2a-ad95-02284916f8ef.png)


パッケージ マネージャー ダイアログで [参照] タブを開き、IgniteUI.Blazor を検索し、プロジェクトにインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/6cd9596f-2fa7-ff64-328c-1f6c5cfd1844.png)


#### 手順 3 - Ignite UI for Blazor の登録

Pages/\_Layout.cshtml ファイルを変更します。（.NET5までは \_Host.cshtml でしたが、.NET6から \_Layout.cshtml が追加されました。）  

```html
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
```
を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/7595f299-3a33-2a33-6dff-6d59e438f501.png)


Program.cs ファイルを変更します。（Blazor Server では .NET5 までは、Startup.cs がありましたが、.NET6 ではなくなっております。）  
また、.NET6 からはトップレベルステートメントを使用して、Program.cs の内容が簡素化されています。

```C#
using IgniteUI.Blazor.Controls;
// ...

builder.Services.AddScoped(typeof(IIgniteUIBlazor), typeof(IgniteUIBlazor));
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/bccbbc08-a0ac-9550-2611-fb98fa884eba.png)


_Imports.razor に以下を追加しておきます。  

```C#
@using IgniteUI.Blazor.Controls
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/c30f0a1d-0b25-983a-c085-c9cadc2e764c.png)



#### 手順4 - DataGrid でデータの表示

今回は、プロジェクト作成時に最初から作られている FetchData.razor の天気予報のデータを DataGrid で表示したいと思います。  
Table で表示されている一覧を DataGrid に置き換えます。  
IgniteUIBlazor のモジュールを登録し、DataGrid の DataSource として forcasets データを与えてやるだけで、簡単に DataGrid に表示できます。

```C#
@page "/fetchdata"

<PageTitle>Weather forecast</PageTitle>

@using BlazorServerDataGrid.Data
@inject WeatherForecastService ForecastService
@inject IIgniteUIBlazor IgniteUIBlazor;

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <IgbDataGrid Height="100%"
          Width="100%"
          DataSource="forecasts" />
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        IgbDataGridModule.Register(IgniteUIBlazor);
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}
```

実行すると、DataGrid 上にデータが表示されているのが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158398/8d782248-11a8-24bc-b438-e34130cbe72c.png)


# まとめ

Ignite UI for Blazor で DataGrid を表示する方法について、簡単に解説しました。

Ignite UI for Blazor を利用するための、初期設定についても解説しましたので、導入部分で躓いていらっしゃる方も参考にしてください。