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

目次

ASP.NET Core Razor Pagesアプリケーションでタグヘルパーを使わずに実装する - ASP.NET Core

ASP.NET Core Razor Pagesアプリケーションでタグヘルパーを使わずに実装するコードを紹介します。

概要

ASP.NET Core Razor Pagesでは通常タグヘルパを利用してアプリケーションを実装しますが、 タグヘルパを利用せずにアプリケーションを実装したいケースも稀にあります。
この記事では、タグヘルパを利用しないで、ASP.NET Core Razor Pagesを実装するコードを紹介します。

例:Post処理 (ボタンのみ)

コード

ASP.NET Core アプリケーションを作成し、以下のページ、コードを記述します。
ButtonNoTagHelper01.cshtml
@page
@model SimpleButton.Pages.ButtonNoTagHelperModel
@{
}
<!DOCTYPE html>
<html>
<head>
  <title>Button1</title>
</head>
<body>
  <div>Button Demo</div>
  <form method="post">
    @Html.AntiForgeryToken()
    <input type="submit" value="Button1" />
  </form>
  <p>@Model.OutputMessage</p>
</body>
</html>
ButtonNoTagHelper01.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleButton.Pages
{
  public class ButtonNoTagHelperModel : PageModel
  {
    public string OutputMessage { get; set; }

    public void OnGet()
    {
    }

    public void OnPost()
    {
      OutputMessage = "POSTされました。";
    }
  }
}
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

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

解説

@Html.AntiForgeryToken() を記述することでタグヘルパーを利用せずにクロスサイト要求偽造のトークンを埋め込みます。 詳しくはこちらの記事も参照してください。
それ以外の部分では、通常のRazor Pagesと同様のコードになります。

実行結果

プロジェクトを実行し (アプリケーションルートURL)/ButtonNoTagHelper01 のURLにアクセスします。
下図のページが表示されます。[Button1]ボタンをクリックします。


クリックするとPOST処理が実行され、ページ遷移しPOSTされた旨のメッセージが表示されます。

例:Post処理 (ボタンのみ) クロスサイト要求偽造を無効にする方法

先の例では、@Html.AntiForgeryToken() を記述して、クロスサイト要求偽造トークンを埋め込みましたが、 別の方法として、クロスサイト要求偽造トークンを無効にする方法もあります。

コード

ASP.NET Core アプリケーションを作成し、以下のページとコードを記述します。
ButtonNoTagHelper02.cshtml
@page
@model SimpleButton.Pages.ButtonNoTagHelper02Model
@{
}
<!DOCTYPE html>
<html>
<head>
  <title>Button2</title>
</head>
<body>
  <div>Button Demo</div>
  <form method="post" asp-antiforgery="false" >
    <input type="submit" value="Button1" />
  </form>
  <p>@Model.OutputMessage</p>
</body>
</html>
ButtonNoTagHelper02.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleButton.Pages
{
  [IgnoreAntiforgeryToken]
  public class ButtonNoTagHelper02Model : PageModel
  {
    public string OutputMessage { get; set; }

    public void OnGet()
    {
    }

    public void OnPost()
    {
      OutputMessage = "POSTされました。";
    }
  }
}

解説

formタグで偽造防止トークンを明示的に無効にします。asp-antiforgery 属性を追加し "false" の値を設定します。
  <form method="post" asp-antiforgery="false" >
    <input type="submit" value="Button1" />
  </form>

また、ページモデルクラスに IgnoreAntiforgeryToken 属性を記述します。
  [IgnoreAntiforgeryToken]
  public class ButtonNoTagHelper02Model : PageModel
  {
    /* 中略 */
  }

実行結果

プロジェクトを実行し、(アプリケーションルートURL)/ButtonNoTagHelper02 にアクセスします。


[Button1]をクリックします。ページが切り替わり "POSTされました。" のメッセージが表示されます。

例:BindProperty がある場合のPost処理

入力フィールドがあり、BindPropertyがある場合の例です。

コード

ButtonNonTagHelper01.cshtml
@page
@model SimpleButtonBindProperty.Pages.ButtonNonTagHelperModel
@{
}
<!DOCTYPE html>

<html>
<head>
  <title>Button</title>
</head>
<body>
  <div>Button Demo</div>
  <form method="post">
    @Html.AntiForgeryToken()
    Code:<input id="textbox1" type="text" name="Code"/><br/>
    Name:<input id="textbox2" type="text" name="Name" /><br />
    Check:<input id="checkbox1" type="checkbox" name="Check"/><br />
    <input type="submit" value="Button1" />
  </form>
</body>
</html>
ButtonNonTagHelper01.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleButtonBindProperty.Pages
{
  public class ButtonNonTagHelperModel : PageModel
  {
    [BindProperty]
    public string Code { get; set; }

    [BindProperty]
    public string Name { get; set; }

    [BindProperty]
    public string Check { get; set; }


    public void OnGet()
    {

    }

    public IActionResult OnPost()
    {
      return RedirectToPage("/ButtonNonTagHelperResult01", new { pcode = Code, pname = Name, pcheck = Check });
    }

  }
}
ButtonNonTagHelperResult01.cshtml
@page
@model SimpleButtonBindProperty.Pages.ButtonNonTagHelperResult01Model
@{
}
<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Button</title>
</head>
<body>
  <div>Button Demo</div>
  <div>Code : @Model.Code</div>
  <div>Name : @Model.Name</div>
  <div>Code : @Model.Check</div>
</body>
</html>
ButtonNonTagHelperResult01.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleButtonBindProperty.Pages
{
  public class ButtonNonTagHelperResult01Model : PageModel
  {
    public string Code { get; set; }
    public string Name { get; set; }
    public bool Check { get; set; }

    public void OnGet(string pcode, string pname, string pcheck)
    {
      Code = pcode;
      Name = pname;
      Check = pcheck;
    }

  }
}

解説

入力ページの Formタグ部分です。今回は、@Html.AntiForgeryToken() を記述して、 タグヘルパーを利用せずに偽造防止トークンを挿入しています。
BindPropertyを利用する場合は、通常はタグヘルパーを読み込み、asp-for 属性を記述しますが、タグヘルパーを利用しない場合は、 name属性にプロパティ名を記述します。
  <form method="post">
    @Html.AntiForgeryToken()
    Code:<input id="textbox1" type="text" name="Code"/><br/>
    Name:<input id="textbox2" type="text" name="Name" /><br />
    Check:<input id="checkbox1" type="checkbox" name="Check"/><br />
    <input type="submit" value="Button1" />
  </form>

OnPostでBindPropertyの値を受け取り、ButtonNonTagHelperResult01 にリダイレクトします。
タグヘルパーを利用して、asp-for を利用した場合は、チェックボックスのプロパティはbool型を設定できますが、 タグヘルパーを利用しない場合は、bool型では正しく値を受け取れないため、string型で取得する必要があります。
public IActionResult OnPost()
{
  return RedirectToPage("/ButtonNonTagHelperResult01", new { pcode = Code, pname = Name, pcheck = Check });
}

ButtonNonTagHelperResult01ページで、パラメーターの値をページに表示します。
  public void OnGet(string pcode, string pname, string pcheck)
  {
    Code = pcode;
    Name = pname;
    Check = pcheck;
  }


<body>
  <div>Button Demo</div>
  <div>Code : @Model.Code</div>
  <div>Name : @Model.Name</div>
  <div>Code : @Model.Check</div>
</body>

実行結果

プロジェクトを実行し、(アプリケーションルートURL)/ButtonNonTagHelper01 にアクセスします。下図のページが表示されます。


テキストボックスとチェックボックスに値を設定します。今回は下図の値としました。設定後[Button1]をクリックします。


ボタンをクリックすると、同ページに対してPOSTし、その後(アプリケーションルートURL)/ButtonNonTagHelperResult01 ページにリダイレクトされます。 リダイレクト先のページで先ほどテキストボックスやチェックボックスに入力した値が表示されることが確認できます。
チェックボックスがチェックされている場合、チェックボックスの値は "on" の文字列になります。


別の文字列を入力して[Button1]をクリックします。


テキストボックスに入力した内容が結果のページに表示されます。なお、チェックボックスにチェックがついていない場合、受け取った値は空の文字列になります。


タグヘルパーを使わずにBindPeropertyのPOST処理を実装できました。

例:クラスオブジェクトのBindProperty がある場合のPost処理

コード

以下のRazorPagesを作成します。
ButtonNonTagHelper02.cshtml
@page
@model SimpleButtonBindProperty.Pages.ButtonNonTagHelper02Model
@{
}
<!DOCTYPE html>

<html>
<head>
  <title>Button</title>
</head>
<body>
  <div>Button Demo</div>
  <form method="post">
    @Html.AntiForgeryToken()
    Code:<input type="text" id="textbox1" name="data.Code"/><br/>
    Name:<input type="text" id="textbox2" name="data.Name" /><br />
    Check:<input type="checkbox" id="checkbox1" name="data.Check" /><br />
    <input type="submit" value="Button1" />
  </form>
</body>
</html>
ButtonNonTagHelper02.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleButtonBindProperty.Pages
{
  public class ButtonNonTagHelper02Model : PageModel
  {
    [BindProperty]
    public SimpleNoTagHelperModel data { get; set; }

    public void OnGet()
    {
    }

    public IActionResult OnPost()
    {
      return RedirectToPage("/ButtonNonTagHelperResult02", new { pcode = data.Code, pname = data.Name, pcheck = data.Check });
    }

  }
}
ButtonNonTagHelperResult02.cshtml
@page
@model SimpleButtonBindProperty.Pages.ButtonNonTagHelperResult02Model
@{
}
<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Button</title>
</head>
<body>
  <div>Button Demo</div>
  <div>Code : @Model.data.Code</div>
  <div>Name : @Model.data.Name</div>
  <div>Check: @Model.data.Check</div>
</body>
</html>
ButtonNonTagHelperResult02.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SimpleButtonBindProperty.Pages
{
  public class ButtonNonTagHelperResult02Model : PageModel
  {
    public SimpleNoTagHelperModel data { get; set; }

    public void OnGet(string pcode, string pname, string pcheck)
    {
      data = new SimpleNoTagHelperModel();
      data.Code = pcode;
      data.Name = pname;
      data.Check = pcheck;
    }
  }
}
SimpleNoTagHelperModel.cs
namespace SimpleButtonBindProperty
{
  public class SimpleNoTagHelperModel
  {
    public string Name { get; set; }
    public string Code { get; set; }
    public string Check { get; set; }
  }
}

解説

入力ページの Formタグ部分です。今回は、@Html.AntiForgeryToken() を記述して、 タグヘルパーを利用せずに偽造防止トークンを挿入しています。
BindPropertyを利用する場合は、通常はタグヘルパーを読み込み、asp-for 属性を記述しますが、タグヘルパーを利用しない場合は、 name属性にプロパティ名を記述します。今回はクラスオブジェクトのプロパティを指定するため、(クラスオブジェクト名).(プロパティ名) の形式で記述しています。
  <form method="post">
    @Html.AntiForgeryToken()
    Code:<input type="text" id="textbox1" name="data.Code"/><br/>
    Name:<input type="text" id="textbox2" name="data.Name" /><br />
    Check:<input id="checkbox1" type="checkbox" name="data.Check" /><br />
    <input type="submit" value="Button1" />
  </form>

OnPostでBindPropertyの値を受け取り、ButtonNonTagHelperResult02 にリダイレクトします。
タグヘルパーを利用して、asp-for を利用した場合は、チェックボックスのプロパティはbool型を設定できますが、 タグヘルパーを利用しない場合は、bool型では正しく値を受け取れないため、string型で取得する必要があります。
  public IActionResult OnPost()
  {
    return RedirectToPage("/ButtonNonTagHelperResult02", new { pcode = data.Code, pname = data.Name, pcheck = data.Check });
  }

ButtonNonTagHelperResult02ページで、パラメーターの値をページに表示します。
  public void OnGet(string pcode, string pname, bool pcheck)
  {
    data.Code = pcode;
    data.Name = pname;
    data.Check = pcheck;
  }


<body>
  <div>Button Demo</div>
  <div>Code : @Model.data.Code</div>
  <div>Name : @Model.data.Name</div>
  <div>Code : @Model.data.Check</div>
</body>

実行結果

プロジェクトを実行し、(アプリケーションルートURL)/ButtonNonTagHelper02 のURLにアクセスします。 下図のページが表示されます。


テキストボックスに値を入力します。今回は Codeの欄に"CD101"、Nameの欄に"らくだキャラメル"を入力します。
入力後[Button1]をクリックします。


ボタンをクリックするとPOST処理が実行され、リダイレクトにより、(アプリケーションルートURL)/ButtonNonTagHelperResult02 ページが表示されます。
入力した値がページに表示されることが確認できます。チェックボックスにチェックがない場合は、値は空の文字列になります。


別の値を入力して、[Button1]をクリックします。


入力した値が結果ページに表示されます。チェックボックスにチェックがついている場合は、値は"on"の文字列になります。

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2022-11-07
作成日: 2022-07-29
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.