ASP.NET Core MVC アプリケーションに、Web Components のグリッドコンポーネントであるIgcGridComponent を組み込む手順をご紹介します。
前提条件
この手順ではライセンス版の Ignite UI for Web Components を使用します。あらかじめ以下の手順を完了し、Infragistics のプライベートフィードへのアクセスを有効にしてください。
https://kb.jp.infragistics.com/?p=10609
手順
1. npm の初期化
コマンドプロンプトまたは PowerShell で、.csproj ファイルのあるフォルダに移動し、以下のコマンドを実行します。
npm init -y
実行後、フォルダ内にpackage.json ファイルが生成されます。
2. Ignite UI Web Components パッケージのインストール
以下のコマンドを実行して、グリッドに必要なパッケージをインストールします。
npm install @infragistics/igniteui-webcomponents-grids
3. Vite のセットアップ
npm パッケージは Web アプリケーションから直接参照できないため、バンドルツールを使用してバンドル化する必要があります。ここでは Vite を使用します。
Vite のインストール
npm install -D vite
vite.config.js の作成
.csproj ファイルと同じフォルダに、以下の内容で vite.config.js を作成します。
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
build: {
outDir: path.resolve(__dirname, "wwwroot/dist"),
emptyOutDir: true,
rollupOptions: {
input: path.resolve(__dirname, "main.js"),
output: {
entryFileNames: "app.js",
format: "es",
assetFileNames: "assets/[name].[ext]"
}
}
}
});
main.js を入力ファイルとして受け取り、バンドル処理を行った結果を app.js として wwwroot/dist フォルダに出力します。アセット（CSS・画像など）は wwwroot/dist/assets/ に格納されます。
main.js の作成
同じフォルダに以下の内容で main.js を作成します。IgcGridComponent に必要なモジュールをインポートする内容です。
import "@infragistics/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css"; import "@infragistics/igniteui-webcomponents-grids/grids/combined.js";
ビルドの実行
以下のコマンドを実行してビルドを行います。
npx vite build
ビルドが完了すると、wwwroot/dist/ フォルダが生成され、その直下に以下のファイルが出力されます。
- app.js — バンドル済み JavaScript
- assets/main.css — バンドル済みスタイルシート
4. データモデルの作成
IgcGridComponent に表示するデータのモデルクラスを作成します。
public class GridModel
{
public IQueryable<RowData>? GridData { get; set; }
}
public class RowData
{
public string? Id { get; set; }
public int Value1 { get; set; }
public int Value2 { get; set; }
public int Value3 { get; set; }
}
5. コントローラーの実装
Controllers/HomeController.cs で、グリッド表示用のサンプルデータを生成してビューに渡します。
public class HomeController : Controller
{
public IActionResult Index()
{
var random = new Random();
var gridData = new List<RowData>();
for (var i = 0; i < 15; i++)
{
gridData.Add(new()
{
Id = "item" + i,
Value1 = random.Next(0, 1000),
Value2 = random.Next(0, 1000),
Value3 = random.Next(0, 1000),
});
}
var model = new GridModel
{
GridData = gridData.AsQueryable(),
};
return View(model);
}
}
6. ビューの実装
Views/Home/Index.cshtml に以下を記述します。
@using System.Text.Json
@using NetCoreMVC_IgcGrid.Models
@model GridModel
<igc-grid id="grid1" width="600px" height="400px">
<igc-column field="Id"></igc-column>
<igc-column field="Value1"></igc-column>
<igc-column field="Value2"></igc-column>
<igc-column field="Value3"></igc-column>
</igc-grid>
<script type="module" src="~/dist/app.js"></script>
<script>
const gridData = JSON.parse('@Html.Raw(JsonSerializer.Serialize(Model.GridData))');
const grid = document.querySelector("#grid1");
grid.data = gridData;
</script>
7. スタイルシートの適用
Views/Shared/_Layout.cshtml の head 内に以下を追加し、IgcGridComponent にスタイルが適用されるようにします。
<head>
.....
<link rel="stylesheet" href="~/dist/assets/main.css" />
</head>
