Ignite UI for Blazor を使用した作業の開始

Ignite UI for Blazor は、最新のデスクトップ ブラウザー対応の高パフォーマンス HTML 5 および TypeScript アプリケーションを構築するために設計された Blazor コンポーネントのコンプリート セットです。

Ignite UI for Blazor は、開発者がモダンなデスクトップ ブラウザー用の最新の高性能アプリケーションを構築できるように設計された Blazor コンポーネントの完全なセットです。

手順 1 - 新しい Blazor プロジェクトの作成

以下の手順では、新しい Blazor プロジェクトを作成する方法を説明します。Ignite UI for Blazor コンポーネントを既存のアプリケーションに追加する場合は、手順 2 に進みます。

1 - Visual Studio 2019 を起動し、スタート ページで [新しいプロジェクトの作成] をクリックします。Blazor App テンプレートを選択し、[次へ] をクリックします。

2 - プロジェクト名と説明を入力し、[作成] をクリックします。

3 - 使用したい Blazor テンプレート (サーバーまたは Web アセンブリ (WASM)) を選択します。

手順 2 - Ignite UI for Blazor NuGet パッケージのインストール

1 - ソリューションまたはプロジェクトを右クリックし、[ソリューションの NuGet パッケージの管理] を選択します。

2 - パッケージ マネージャー ダイアログで [参照] タブを開き、Infragistics パッケージ ソースを選択して IgniteUI.Blazor NuGet パッケージをプロジェクトにインストールします。

Note

トライアル版をお使いの場合、NuGet.org にある IgniteUI.Blazor トライアル版 NuGet パッケージをインストールできます。

Note

Infragistics パッケージソースがない場合、追加するには Infragistics NuGet フィード トピックを参照してください。

手順 3 - Ignite UI for Blazor の登録

1 - 静的ファイルをリンクします。_content/IgniteUI.Blazor/app.bundle.js スクリプトをプロジェクトのデフォルトの Blazor スクリプトの上に追加します。

Web アセンブリ - wwwroot/index.html

<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

サーバー - Pages/_Host.cshtml

<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.server.js"></script>

2 - サービスおよびコンポーネント モジュールの登録

Web アセンブリ - Main メソッドの Program.cs ファイルで AddIgniteUIBlazor メソッドを呼び出します。

public static async Task Main(string[] args)
{
    // ...

    builder.Services.AddIgniteUIBlazor(
        typeof(DataGridModule)
    );
}

サーバー - ConfigureServices メソッドの Startup.cs ファイルで AddIgniteUIBlazor メソッドを呼び出します。

public void ConfigureServices(IServiceCollection services)
{
    // ...

    services.AddIgniteUIBlazor(
        typeof(DataGridModule)
    );
}
Note

この例では、Blazor アプリケーションで使用する DataGridModule を登録します。Ignite UI for Blazor コンポーネントとその機能は、Blazor アプリケーションで正しく動作するためにそれぞれのモジュールを登録する必要があります。詳細については、各コンポーネントのヘルプを参照してください。

3 - _Imports.razorIgniteUI.Blazor.Controls 名前空間を追加します。

@using IgniteUI.Blazor.Controls;

4 - Ignite UI for Blazor コンポーネントを追加します。

<DataGrid DataSource="data" />
</Datagrid>
Note

Ignite UI for Blazor コンポーネントとその機能は、それぞれのモジュールを AddIgniteUIBlazor メソッドに登録する必要があります。詳細については、各コンポーネントのヘルプを参照してください。