Razor Pages でボタンクリックで処理を実行するシンプルなページを作成する - ASP.NET Core

Razor Pages でボタンクリックで処理を実行するシンプルなページのコードを紹介します。

概要

Razor Pagesの動作を確認するため、ボタンのクリックで処理を実行する非常にシンプルなページを作成します。
プロジェクトの作成手順はこちらの記事を参照して下さい。

プログラム

事前準備

ASP.NET Core Web アプリケーションを作成します。

コード

下記のコードを準備します。

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 SimpleButton
{
  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();
      });
    }
  }
}

ページのコード

/Pages/Button.cshtml

@page "/Button"
@model SimpleButton.ButtonModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
  Layout = null;
}
<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Button1</title>
</head>
<body>
  <div>Button Demo</div>
  <form method="post">
    <input type="submit" value="Button1" />
  </form>
</body>
</html>

/Pages/Button.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 SimpleButton
{
  public class ButtonModel : PageModel
  {
    public IActionResult OnGet()
    {
      return Page();
    }

    public IActionResult OnPost()
    {
      return Redirect("/ButtonComplete");
    }
  }
}

/Pages/ButtonResult.cshtml

@page "/ButtonComplete"
@model SimpleButton.ButtonResultModel
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>ButtonResult</title>
</head>
<body>
  <div>ボタンがクリックされました。</div>
</body>
</html>

/Pages/ButtonResult.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 SimpleButton
{
    public class ButtonResultModel : PageModel
    {
        public void OnGet()
        {

        }
    }
}

作成したファイルとソリューションエクスプローラーでの配置は下図となります。

解説

Startup.csはRazor Pagesのための記述をします。ConfigureServices メソッド内のservices.AddRazorPages();の追記や、Configureメソッド内の app.UseRouting(); app.UseEndpoints(); の記述を追加します。
/Pages/Button.cshtml にはページにSubmitボタンを配置します。Postで送信するボタンになります。(今回は送信する情報はありませんが)
/Pages/Button.cshtml.cs にはボタンのPost時に対応する処理を記述します。OnPostメソッドでページに対するPOST処理の動作を実装できます。今回のコードでは下記のコードを記述しており、RedirectメソッドでURLのリダイレクトを実行します。

    public IActionResult OnPost()
    {
      return Redirect("/ButtonComplete");
    }

/Pages/ButtonResult.cshtml はボタンがクリックされたことを画面に表示するページです。メッセージのテキストをページに記載しています。ページモデルクラスにはなにも実装していません。

/Button ページを表示し、ボタンをクリックすると、ボタンがクリックされたことを示すメッセージが記述されている /ButtonComplete ページに遷移する動作になります。