ASP.NET core 6 Blazor Server AntDesignを使用する

作成日 2022.02.02
更新日 2022.02.07
ASP.NET Core
ASP.NET Core

ASP.NET core 6 Blazor Serverで、アリババが開発したUIフレームワークである「AntDesign」を使用する手順を記述してます。.NETのバージョンは6を使用してます。

1. 環境
2. プロジェクト作成
3. AntDesign追加
4. AntDesign使用
5. サービス登録
6. App.razor
7. CSSとJS追加
8. ボタン追加

環境

OS windows10 pro
IDE Visual Studio 2022
.NET 6
Sql Server 2019

プロジェクト作成

ここでは、「Blazor Server アプリ」を選択してプロジェクトを作成してます。

任意の名前でプロジェクトを作成します。
※ここでは「BlazorApp1」という名前で作成してます。

「.NET6.0」を選択して「作成」ボタンを押下します。

AntDesign追加

パッケージマネージャーから、AntDesignを追加します。

「ツール」 > 「NuGet パッケージマネージャー」 > 「パッケージマネージャーコンソール」を選択します。

「AntDesign」を追加します。

PM> Install-Package -ProjectName BlazorApp1 -Id AntDesign

AntDesign使用

「_Imports.razor」を開いて、

以下を追加します。

@using AntDesign

サービス登録

サービスに登録しておきます。「Program.cs」に以下を追加します。

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
// 追加
builder.Services.AddAntDesign();

App.razor

「App.razor」に「AntContainer」タグを追加します。


    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
<AntContainer />

CSSとJS追加

「Pages」配下にある「Layout.cshtml」に「CSS」と「JS」を追加します。

以下を追加しておきます。

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

「Layout.cshtml」画像

ボタン追加

ボタンだけ追加してみます。

「Pages」配下にある「Index.razor」にボタンを追加して表示してみます。

以下のように変更します。

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<div>
    <Button Type="@ButtonType.Primary">Primary</Button>
    <Button>Default</Button>
    <Button Type="@ButtonType.Dashed">Dashed</Button>
    <Button Type="@ButtonType.Text">Text</Button>
    <Button Type="@ButtonType.Link">Link</Button>
</div>

デバックするとボタンが追加されていることが確認できます。