RazorPagesでフォームのPOST時にJavaScriptで追加のパラメーターを送信する - ASP.NET Core

RazorPagesでフォームのPOST時にJavaScriptで追加のパラメーターを送信するコードを紹介します。

概要

RazorPagesのフォームでPOSTによる送信をする際に、ページ内で実行したJavaScriptの結果をPOST時のパラメータに含めたい場合があります。
この記事では、RazorPagesのPOST時にJavaScriptのパラメーターを追加するコードを紹介します。

実装方針

いくつかの方針がありますが、シンプルに実装できるHiddenフィールドを利用する方法を紹介します。

実装例

コード

ASP.NET Core アプリケーションのプロジェクトを作成し、以下の RazorPages のファイルを作成します。

JavaScriptHiddenSend.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesJavaScriptPost.Pages.JavaScriptHiddenSendModel
@{
}
<html>
<head>
  <script>
    function PostForm(optionnum) {
      var hidden_input = document.getElementById("option");
      hidden_input.value = optionnum;

      var target = document.getElementById("form1");
      target.method = "post";
      target.submit();
    }
  </script>
</head>
<body>
  <h2>JavaScriptでPOST時にパラメーターを送信する</h2>

  <form id="form1" method="post">
    Input1: <input type="text" id="input_1" asp-for="InputText1" /><br />
    Input2: <input type="text" id="input_2" asp-for="InputText2" /><br />
    Option: <input type="hidden" id="option" asp-for="Option" /><br />

    <a href="javascript:PostForm(1);">POSTで送信する。(1)</a><br />
    <a href="javascript:PostForm(2);">POSTで送信する。(2)</a><br />
    <a href="javascript:PostForm(3);">POSTで送信する。(3)</a><br />
    <a href="javascript:PostForm(4);">POSTで送信する。(4)</a><br />
    <a href="javascript:PostForm(5);">POSTで送信する。(5)</a><br />
  </form>

</body>
</html>

JavaScriptHiddenSend.cshtml.cs

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

namespace RazorPagesJavaScriptPost.Pages
{
  public class JavaScriptHiddenSendModel : PageModel
  {
    [BindProperty]
    public string InputText1 { get; set; }
    [BindProperty]
    public string InputText2 { get; set; }
    [BindProperty]
    public int Option { get; set; }

    public void OnGet()
    {
    }

    public IActionResult OnPost()
    {
      string Result;

      if (3 < Option) {
        Result = InputText1 + InputText2 + Option.ToString();
      }
      else {
        Result = InputText1 + InputText2;
      }

      object value = new { ShowResult = Result };
      return RedirectToPage("Result", value);
    }
  }
}

Program.cs

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

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

解説

RazorPages部分のフォームのコードは以下になります。2つのテキストボックスと1つのhiddenフィールドを用意します。 POSTするリンクを5つ用意します。リンクのクリックによりJavaScriptを実行し、JavaScript内で用意したパラメーターをPOST時に入力フィールドとあわせて送信します。

  <form id="form1" method="post">
    Input1: <input type="text" id="input_1" asp-for="InputText1" /><br />
    Input2: <input type="text" id="input_2" asp-for="InputText2" /><br />
    Option: <input type="hidden" id="option" asp-for="Option" /><br />

    <a href="javascript:PostForm(1);">POSTで送信する。(1)</a><br />
    <a href="javascript:PostForm(2);">POSTで送信する。(2)</a><br />
    <a href="javascript:PostForm(3);">POSTで送信する。(3)</a><br />
    <a href="javascript:PostForm(4);">POSTで送信する。(4)</a><br />
    <a href="javascript:PostForm(5);">POSTで送信する。(5)</a><br />
  </form>

フォームの送信部分は今回はSubmitボタンではなく、JavaScriptで実装します。 JavaScriptでフォームをPOSTするコードの詳細はこちらの記事を参照してください。
JavaScriptで用意したパラメーター opetionnum の値はoption のhiddenフィールドに設定して送信します。

    function PostForm(optionnum) {
      var hidden_input = document.getElementById("option");
      hidden_input.value = optionnum;

      var target = document.getElementById("form1");
      target.method = "post";
      target.submit();
    }

フォームのフィールドに対応するプロパティの実装です。hiddenフィールドの値はOptionプロパティに格納されます。

    [BindProperty]
    public string InputText1 { get; set; }
    [BindProperty]
    public string InputText2 { get; set; }
    [BindProperty]
    public int Option { get; set; }

RazorPagesのPostメソッドの実装部分です。
JavaScriptで渡されたオプションのパラメーターが"3"より大きい場合は、2つの入力文字列を結合した後ろにパラメーターの値を追加します。 3以下の場合は2つの入力文字列を結合した値のみを返します。

    public IActionResult OnPost()
    {
      string Result;

      if (3 < Option) {
        Result = InputText1 + InputText2 + Option.ToString();
      }
      else {
        Result = InputText1 + InputText2;
      }

      object value = new { ShowResult = Result };
      return RedirectToPage("Result", value);
    }