シンプルな ASP.NET Blazor アプリケーションを作成する
非常にシンプルなASP.NET Blazorアプリケーションを作成する手順を紹介します。
概要
ASP.NET CoreではWebFormアプリケーションはサポートされなくなり、ASP.NET MVC または Razor Pages, Blazor アプリケーションのいずれかを選択する必要があります。次バージョンの .NET 5 でもASP.NET WebForm アプリケーションはサポートされないため、いずれかの仕組みに移行する必要があります。
.NET Framework を利用すれば、引き続き ASP.NET WebFormを利用できますが、.NET Framework 4.8以後のバージョンアップの予定はないため、
徐々にフレームワークの主流は.NET Core, .NET 5, .NET 6 に移行していくと思われます。
この記事では、C#を利用して、シンプルなASP.NET Blazor アプリケーションの作成手順を紹介します。
手順 (.NET 6)
ASP.NET Core の空のプロジェクトの作成
ASP.NET Core Webアプリケーションの空のプロジェクトを作成します。手順は
こちらの記事を参照してください。
Program.cs ファイルの変更
Blazorアプリケーションとして実行するため、Program.cs ファイルのコードを変更します。
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () => "Hello World!");
app.Run();
AddRazorPages() AddServerSideBlazor() を追加します。また、
UseStaticFiles() UseRouting() を追加します。
UseStaticFilesはこの段階では追加しなくても動作しますが、UIの応答を実装する段階では必ず必要になるため、この段階から追加しておきます。
エンドポイントの設定で
MapBlazorHub() .MapFallbackToPage() を追加します。
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/index");
});
app.Run();
Pagesフォルダの追加
アプリケーションで表示するページを格納するフォルダを作成します。
ソリューションエクスプローラーのプロジェクトのノードで右クリックしポップアップメニューを表示します。
[追加]のサブメニューの[新しいフォルダ]の項目をクリックします。
フォルダが作成されますので、 "Pages" の名称にします。
ソリューションエクスプローラーで作成したフォルダを選択し右クリックします。
ポップアップメニューの[追加]のサブメニューの[新しい項目の追加]の項目をクリックします。
フォールバックページの作成
下図の[新しい項目の追加]ダイアログが表示されます。中央のファイルの種類の一覧リストの[Razor ページ - 空]の項目をクリックして
選択します。ファイル名は Index.cshtml とします。
補足
[Razorページ - 空]を選択するとモデルを実装するC#のコードファイルが作成されますが、
このファイルは必須ではないため、[Razor ビュー]の項目を選択して Index.cshtml ファイルのみを作成する手順でも動作します。
ファイルが追加できました。
Index.cshtmlのファイル編集
追加したフォールバックページのindex.cshtml ファイルを変更します。
@page
@model SimpleBlazorAppNET6.Pages.IndexModel
@{
}
HTMLページのタグを追記し、"Hello Blazor App World" の文字をページに記載します。
@page
@model SimpleBlazorAppNET6.Pages.IndexModel
@{
}
<html>
<head>
</head>
<body>
<p>Hello Blazor App World!</p>
</body>
</html>
プロジェクトの実行
プロジェクトを実行します。下図のページが表示されます。フォールバックページが表示される動作を確認できます。
次の手順
ページは表示できましたが、フォールバックページが表示できたのみで、Blazorアプリケーションらしい挙動はまだありません。
続いて、ルーティングコンポーネントを追加し、Razorコンポーネントが表示できるようにします。
詳細は
こちらの記事を参照してください。
手順 (.NET Core / .NET 5)
プロジェクトの作成
Visual Studioを起動します。
[ファイル]メニューの[新規作成]の[プロジェクト]の項目をクリックします。[新しいプロジェクトの作成]ダイアログが表示されます。
ダイアログの検索ボックスで "ASP.NET Core" で検索します。プロジェクトテンプレートの "ASP.NET Core Web アプリケーション" の項目をクリックして選択します。選択後ウィンドウ右下の[次へ]ボタンをクリックします。
プロジェクト名の設定画面が表示されます。プロジェクト名とプロジェクトの保存パスを設定します。設定ができたらウィンドウ右下の[作成]ボタンをクリックします。
[新しい ASP.NET Core Web アプリケーション作成]の画面が表示されます。今回はテンプレートの[空]をクリックして選択します。選択ができたらウィンドウ右下の[作成]ボタンをクリックします。
ASP.NET Coreプロジェクトが作成されます。
プロジェクト作成直後は下記の Program.cs ファイルと Startup.cs ファイルが作成されています。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
namespace MiniBlazorApp
{
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace MiniBlazorApp
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/", async context =>
{
await context.Response.WriteAsync("Hello World!");
});
});
}
}
}
コードの変更
ASP.NET Core アプリケーションをBlazorアプリケーションに変更するため、Startup.cs ファイルのコードを変更します。
下記に変更します。ConfigureServices メソッドに services.AddRazorPages(), services.AddServerSideBlazor() を追加します。また、 app.UseEndpoints のコードを変更します。
endpoints.MapFallbackToPage("/index"); のコードによりアプリケーションを起動すると、index ページにアクセスする動作になります。index ページはPagesディレクトリに配置した index.cshtml ページになります。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace MiniBlazorApp
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/index");
});
}
}
}
ページ(フォールバックページ)の追加
ページを格納するフォルダを作成します。ソリューションエクスプローラでプロジェクトのノードを右クリックし、ポップアップメニューの[追加]メニューの[新しいフォルダ]の項目をクリックします。
フォルダが作成されますので "Pages" の名称にします。
続いて、ページを作成します。ソリューションエクスプローラでプロジェクトのノードを右クリックし、ポップアップメニューの[追加]メニューの[新しい項目]の項目をクリックします。
[新しい項目の追加]ダイアログが表示されます。中央のファイルの種類一覧の[Razor ページ]の項目をクリックして選択します。また、ダイアログ下部の[名前]欄のテキストボックスに "index.cshtml" を入力します。設定ができたら、ダイアログ右下の[追加]ボタンをクリックします。
補足
[Razorページ]を選択するとモデルを実装するC#のコードファイルが作成されますがこのファイルは必須ではないため、[Razor ビュー]の項目を選択して Index.cshtml ファイルのみを作成する手順でも動作します。
Pagesフォルダ内に index.cshtml ファイルが作成されます。
index.cshtmlファイルを編集し下記の記述にします。
@page
@model MiniBlazorApp.Pages.IndexModel
@{
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Hello Blazor App World!</p>
</body>
</html>
プロジェクトの実行
上記のプロジェクトを実行します。index.cshtml のページが表示され、ページに記述した "Hello Blazor App World!" の文字がページに表示されていることが確認できます。
非常に単純な、Blazor Web アプリケーションを作成できました。
次の手順
ルーティングコンポーネントを追加し、Razorコンポーネントが表示できるようにします。詳細は
こちらの記事を参照してください。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
