Razor Pagesで動的なページを表示する - ASP.NET Core

Razor Pagesで動的なページを表示するコードを紹介します。

概要

こちらの記事ではシンプルなRazor Pagesを作成してページを表示できました。この記事ではRazor Pageでロジックを処理して、動的なページを表示するコードや手順を紹介します。

プログラム

事前準備

こちらの記事を参照してASP.NET Core Webアプリケーションを作成します。

Razor Pages の作成

プロジェクトのPagesフォルダ内にRazorPageを作成します。今回は"SimpleOutput.cshtml" ファイルを作成します。ファイル作成の手順はこちらの記事を参照して下さい。

コード

Startup.cs, SimpleOutput.cshtml, SimpleOutput.cshtml.cs ファイルのコードを編集します。
Startup.cs
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();
      });
    }
  }
}
SimpleOutput.cshtml
@page
@model SimpleRazorPages.Pages.SimpleOutputModel
@{
    Layout = null;

}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SimpleOutput</title>
</head>
<body>
    <p>Razorページです</p>
    <p>@Model.outputText</p>
</body>
</html>
SimpleOutput.cshtml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleRazorPages.Pages
{
  public class SimpleOutputModel : PageModel
  {
    public string outputText { get; set; }

    public void OnGet()
    {
      outputText = "Webアプリケーションからの出力です。:"+DateTime.Now.ToString("HH:mm:ss");
    }
  }
}

解説

Startup.cs

ConfigureServices メソッドに services.AddRazorPages(); を記述しRazor Pages の機能が利用できる状態にします。また、Configure メソッドに UseRouting(); の記述とUseEndPointsの記述をします。UseEndPoints内でendpoints.MapRazorPages();を呼び出しRazorPagesのルーティングを有効にします。

SimpleOutput.cshtml

Razorページを編集します。「Razorページです」の文字列を記述します。また、@Model.outputText を記述します。この記述によりModelクラスの outputTextプロパティの値をページ内に表示できます。

SimpleOutput.cshtml.cs

Razorページにアクセスがあると OnGetメソッドが呼び出されます。OnGetメソッド内で outputText プロパティに「Webアプリケーションからの出力です。」の文字列と現在時刻を代入します。Razorページの@Model.outputText部分に「Webアプリケーションからの出力です。」と現在時刻が表示されます。

実行結果

プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。アプリケーションルートのURLはルーティング先が無いためNot Foundのエラーが表示されます。


Webブラウザで (アプリケーションルートのURL)/SimpleOutput URLにアクセスします。下図のページが表示されます。SimpleOutput.cshtmlのRazorページが表示されます。また、コード部分で実装している「Webアプリケーションからの出力です。」と現在時刻がページに表示されています。


Razorページで動的なページを表示できました。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2020-02-04
作成日: 2019-11-04
iPentec all rights reserverd.