_Imports.razor ファイルを作成して @using を集約する
_Imports.razor ファイルを作成して @using を集約する方法を紹介します。
概要
こちらの記事では、razorファイルそれぞれに@using ディレクティブを記述し必要な参照を追加しました。 ASP.NET Coreでは _Imports.razor ファイルを作成すると、各razorファイルに_Imports.razor ファイルに記述した内容を埋め込むことができます。
例
こちらの記事のプロジェクトでは、App.razor と Index.razor ファイルは下記の記述です。
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<LayoutView>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@page "/"
@using Microsoft.AspNetCore.Components.Web
<h3>Index</h3>
<div>
<button class="" @onclick="ButtonClick">Button1</button>
<p>@messageText</p>
</div>
@code {
string messageText;
void ButtonClick()
{
messageText = "My Button Clicked";
}
}
このプロジェクトで、_Imports.razorファイルを作成すると下記の記述にできます。
_Imports.razor ファイルの追加
_Imports.razorを追加します。ソリューションエクスプローラーのプロジェクトノードをクリックして選択します。右クリックしてポップアップメニューを表示します。ポップアップメニューの[追加]の[新しい項目]をクリックします。
[新しい項目の追加]ダイアログボックスが表示されます。中央のファイル一覧のリストから[Razor コンポーネント]をクリックして選択します。
ダイアログ下部の[名前]テキストボックスに "_Imports.razor" と入力します。入力後ダイアログボックス右下の[追加]ボタンをクリックします。
_Imports.razor ファイルがソリューションに追加されます。
_Imports.razor の記述
_Imports.razorファイルを記述します。下記のコードを記述します。
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
_Imports.razorの@usingディレクティブを記述しましたので、ほかのrazorファイルの@usingディレクティブは不要になります。
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<LayoutView>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@page
@namespace SimpleButton.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
<base href="~/" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
プロジェクトがビルドでき実行できることを確認します。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
