Blazor Web App に Ignite UI for Blazor を登録

  • 公開日:
  • 最終更新日:

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. スクリプト参照を追加

Blazor および Ignite UI for Blazor の機能を正しく動作させるために、以下のスクリプトを に追加します。

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

3c. 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 アプリケーションをビルドして実行します。

製品について

Ignite UI for Blazor

JavaScriptの代わりにC#でのWebアプリケーション開発を可能にしたBlazor。Ignite UI for Blazorは、BlazorアプリケーションのUI開発を支援するコンポーネントライブラリーです。
» 製品ページはこちら