シンプルな Razor Pages Webアプリケーションを作成する
ASP.NET Core を利用して、シンプルな Razor Pages Webアプリケーションを作成するコードや手順を紹介します。
概要
ASP.NET Core Webアプリケーションでページを記述する方法の一つとしてRazor Pagesという仕組みがあります。この記事ではRazor Pagesを利用してページを記述する手順を紹介します。
プログラム
事前準備:プロジェクトの作成
はじめに、ASP.NET Core Web アプリケーションを作成します。ASP.NET Core Webアプリケーションの作成手順は
こちらの記事を参照してください。
Razor ページの作成
Razorページを作成するにあたりRazorページを格納するフォルダを作成します。ソリューションエクスプローラーのプロジェクトのノードをクリックして選択します。右クリックしてポップアップメニューを表示し、[追加]メニューの[新しいフォルダー]の項目をクリックします。
フォルダーが作成されます。
フォルダー名を"Pages"に設定します。Razorページを格納するフォルダは"Pages"とする決まりなのでほかの名前にはしないでください。
ソリューションエクスプローラーで作成されたフォルダをクリックして選択します。右クリックしてポップアップメニューを表示し[追加]メニューの[Razor ページ]の項目をクリックします。
[新規スキャフォールディング アイテムの追加]ダイアログが表示されます。
中央のRazorページの種類から[Razor ページ]の項目をクリックして選択します。選択後、ウィンドウ右下の[追加]ボタンをクリックします。
[Razor ページの追加]ダイアログが表示されます。
[Razor ページ名]のフィールドに値を入力します。今回は"Test"とします。また[レイアウトページを使用する]のチェックボックスを外します。設定ができたら、ダイアログ右下の[追加]ボタンをクリックします。
ソリューションエクスプローラーのPagesフォルダ内にRazorページの "Test.cshtml" ファイルが追加されます。また、Razorページのモデルクラスとなる "Test.cshtml.cs" ファイルも合わせて作成されます。
コード
下記のコードを記述します。
.NET Core3 / .NET 5 の場合
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 SimpleBlazorPages
{
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();
}
// 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.MapRazorPages();
});
}
}
}
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 SimpleBlazorPages
{
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>();
});
}
}
.NET 6 の場合
.NET6 の場合は、Startup.csとProgram.csを1つのコードで記述するテンプレートが作成されます。
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.MapRazorPages();
app.Run();
RazorPage のコード
@page
@model SimpleBlazorPages.Pages.TestModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<body>
テストページです。
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace SimpleBlazorPages.Pages
{
public class TestModel : PageModel
{
public void OnGet()
{
}
}
}
解説
Startup.cs
Razorページを利用するため、アプリケーション起動直後にRazorページのサービス読み込みをします。ConfigureServices()メソッドに記述した
services.AddRazorPages(); によりRazorPagesが利用可能になります。
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
}
Razorページへのルーティングは、UseEndpointsメソッド内の MapRazorPages() メソッドで実行されます。エンドポイントの機能を利用するため、UseRouting() メソッドを呼び出し、UseEndPointsメソッドを実装します。エンドポイントの実装の詳細は
こちらの記事も参照してください。
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
Program.cs
今回は生成されたコードそのままです。追加の記述はしません。
Test.cshtml
Test.cshtmlはページの表示内容が確認できるよう「テストページです。」の文字を追加しています。
Test.cshtml.cs
今回は生成されたコードそのままです。追加の記述はしません。
実行結果
プロジェクトを実行します。アプリケーションルートは実装されていないため、404 Not Found エラーが表示されます。
(アプリケーションルートURL)/Test URLにアクセスします。Test.cshtmlのRazorページが設置されているため、/Test URLが Test.cshtmlのRazorページにルーティングされ、Test.cshtmlのページ内容が表示されます。
ASP.NET Core Webアプリケーションで、シンプルなRazorページを表示できました。
次のステップ
ページに配置したボタンをクリックすると処理を実行するプログラムの作成については
こちらの記事を参照してください。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
