iPentec.com / Doc / C# / ASP.NET Core / Razor Pages

RazorPagesでページ内に複数のサブミットボタンを設置する - ASP.NET Core

RazorPagesでページ内に複数のサブミットボタンを設置するコードを紹介します。

概要

一般的なHTMLのフォームでは、formタグで記述したフォームに対してサブミットボタンを1つ配置します。
しかし、複雑なアプリケーションではサブミットボタンを複数設置ししたい場合があります。この記事では、Razor Pagesで複数のサブミットボタンをページに配置して、ボタンごとの処理を実装するコードを紹介します。

実装

Razor Pagesで複数のサブミットボタンを配置する場合は、asp-page-handler属性を利用し、ボタンごとに異なるページハンドラを設定します。
サブミットボタンをクリックするとフォームの method で設定された方式でページにアクセスします。
methodがpostの場合は、OnPost(ページハンドラ名)のメソッドが呼び出され、methodがgetの場合は、OnGet(ページハンドラ名)のメソッドが呼び出されます。

プログラム例

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

コード

以下のページを作成します。

Pages/MultiButton01.cshtml

@page
@model RazorPagesMultiButton.Pages.MultiButton01Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
  <head>
    
  </head>
  <body>
    <form method="post">
      <input type="text" asp-for="FormValue"/><br/>
      <input type="submit" asp-page-handler="Handle1" value="POST1"/><br/>
      <input type="submit" asp-page-handler="Handle2" value="POST2"/><br/>
      <input type="submit" asp-page-handler="Handle3" value="POST3"/><br/>
      <input type="submit" asp-page-handler="Handle4" value="POST4"/><br/>
      <input type="submit" asp-page-handler="Handle5" value="POST5"/><br/>
    </form>
    <hr/>
    <p>@Model.Output</p>

  </body>
</html>

Pages/MultiButton01.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesMultiButton.Pages
{
  public class MultiButton01Model : PageModel
  {
    [BindProperty]
    public string FormValue { get; set; }

    public string Output { get; set; }

    public void OnGet()
    {
    }

    public void OnPostHandle1()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 2);
    }

    public void OnPostHandle2()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 3);
    }

    public void OnPostHandle3()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 4);
    }

    public void OnPostHandle4()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 5);
    }

    public void OnPostHandle5()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 6);
    }
  }
}

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

app.UseRouting();
app.MapRazorPages();
app.Run();

解説

Razor Pageのフォームタグ内にテキストボックスを1つ、サブミットボタンを5つ配置しています。
asp-page-handler 属性を追加し、それぞれのボタンごとにページハンドラを設定します。
今回の例では、POST3 のボタンをクリックすると、ページモデルの OnPostHandle3() メソッドが呼び出される動作となります。

  <form method="post">
    <input type="text" asp-for="FormValue"/><br/>
    <input type="submit" asp-page-handler="Handle1" value="POST1"/><br/>
    <input type="submit" asp-page-handler="Handle2" value="POST2"/><br/>
    <input type="submit" asp-page-handler="Handle3" value="POST3"/><br/>
    <input type="submit" asp-page-handler="Handle4" value="POST4"/><br/>
    <input type="submit" asp-page-handler="Handle5" value="POST5"/><br/>
  </form>

ページモデルクラスでは、BindProperty属性を持つFormValue プロパティを定義します。
FormValue プロパティをフォームのテキストボックスのasp-for属性に設定し、テキストボックスの入力を受け取る実装をします。詳細はこちらの記事を参照してください。
また、ページに結果を出力するためのOutputプロパティを宣言します。

  public class MultiButton01Model : PageModel
  {
    [BindProperty]
    public string FormValue { get; set; }

    public string Output { get; set; }

    /* 略 */
  }
}

OnPost(ハンドラ名) メソッドの実装部分です。Razor Page側で、Handle1 ～ Handle5 を設定したため、OnPostHandle1～OnPostHandle5 のメソッドを実装しています。
テキストボックスに入力された文字列を整数に変換し、押されたボタンごとに異なる数を掛けたものを結果としてページに出力しています。

  public class MultiButton01Model : PageModel
  {
    /* 略 */

    public void OnPostHandle1()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 2);
    }

    public void OnPostHandle2()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 3);
    }

    public void OnPostHandle3()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 4);
    }

    public void OnPostHandle4()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 5);
    }

    public void OnPostHandle5()
    {
      int value = Convert.ToInt32(FormValue);
      Output = string.Format("出力:{0:d}", value * 6);
    }
  }
}