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 - Ignite UI for Blazor スクリプトをデフォルトの Blazor スクリプトの上に追加します。

Blazor Web アセンブリで wwwroot/index.html ファイルを変更します。

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

Blazor サーバーで Pages/_Host.cshtml ファイルを変更します。

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

2 - AddIgniteUIBlazor メソッドを使用して Ignite UI Blazor コンポーネントのサービス モジュールを登録します。

Blazor Web アセンブリのプロジェクトで Program.cs ファイルを変更します。

using IgniteUI.Blazor.Controls;
// ...

public static async Task Main(string[] args)
{
    // ...
    builder.Services.AddIgniteUIBlazor(typeof(GeographicMapModule));
}

Blazor サーバーのプロジェクトで Startup.cs ファイルを変更します。

using IgniteUI.Blazor.Controls;
// ...

public void ConfigureServices(IServiceCollection services)
{
    // ...
    services.AddIgniteUIBlazor(typeof(GeographicMapModule));
}

オプションで、アプリケーション レベルでモジュールを登録できない場合は、ページの初期化時にモジュールを razor りファイルに登録できます。

@page ...

@using IgniteUI.Blazor.Controls
@inject IIgniteUIBlazor IgniteUIBlazor;

@code 
{

   protected override void OnInitialized()
    {
        base.OnInitialized();
        GeographicMapModule.Register(IgniteUIBlazor);

        ...
    } 
}
Note

この例では、Blazor ラジアル ゲージ コンポーネントを使用するために GeographicMapModule を登録しました。ただし、Blazor アプリケーションで適切に動作するためには、他の Blazor コンポーネントおよびその機能用の追加モジュールを登録する必要があります。必要なモジュールの詳細については、各コンポーネントのトピックを参照してください。

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

@using IgniteUI.Blazor.Controls;

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

<GeographicMap Height="100%" Width="100%" />
</GeographicMap>