Razor Pagesのフォームでテキストボックスに入力できる文字列の長さを制限するコードを紹介します。
概要
RazorPagesのフォームでテキストボックスに入力できる文字列の長さを宣言したい場合があります。
RazorPagesの場合はコントロールのasp-forに割り当てたプロパティに
StringLength属性を追加すると、テキストボックスに入力できる文字列の長さを制限できます。
書式
記述例
プログラム例
ASP.NET Coreアプリケーションを作成します。
コード
@page
@model RazorPagesValidation.Pages.TextBoxStringLengthModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
<head></head>
<body>
<h2>テキストボックスの最大文字列長を設定するデモ</h2>
<form method="post">
<input type="text" asp-for="inputText"/>
<input type="submit" value="Exec" />
</form>
<p>@Model.MessageText</p>
</body>
</html>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
namespace RazorPagesValidation.Pages
{
public class TextBoxStringLengthModel : PageModel
{
[BindProperty]
[StringLength(5)]
public string inputText { get; set; }
public string MessageText { get; set; }
public void OnGet()
{
}
public void OnPost()
{
MessageText = "処理は成功しました。:" + inputText;
}
}
}
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();
解説
Razor PageではFormタグによるフォームを記述します。フォーム内にはテキストボックスとサブミットボタンを配置します。
<form method="post">
<input type="text" asp-for="inputText"/>
<input type="submit" value="Exec" />
</form>
フォームの外にメッセージを表示する枠を配置します。メッセージの値はページモデルクラスの MessageText プロパティを設定します。
<p>@Model.MessageText</p>
ページモデルクラスでは、テキストボックスの入力を受け取る
inputTextプロパティと、メッセージ出力の
MessageTextプロパティを実装します。
inputTextプロパティには、
[StringLength(5)] を記述します。この属性により、inputTextプロパティの最大文字数が5文字となります。
[BindProperty]
[StringLength(5)]
public string inputText { get; set; }
public string MessageText { get; set; }
サブミットボタンをクリックしてPOST処理をした場合は
OnPost()メソッドが呼び出され、メッセージとテキストボックスに入力した値が画面に表示されます。
public void OnPost()
{
MessageText = "処理は成功しました。:" + inputText;
}
実行結果
プロジェクトを実行します。Webブラウザが起動しますので、
(アプリケーションルートURL)/TextBoxStringLength にアクセスします。
下図のページが表示されます。
テキストボックスに文字列を入力します。
5文字入力できますが、5文字以上は入力できません。
[Exec]ボタンをクリックするとPOST処理が実行され、テキストボックスに入力した文字列が、ページに表示されます。
生成したHTMLのコードを確認します。
テキストボックスのinputタグに
maxlength="5" 属性が設定されており、5文字までしかテキストボックスに入力できない動作になっています。
<html>
<head></head>
<body>
<h2>テキストボックスの最大文字列長を設定するデモ</h2>
<form method="post">
<input type="text" data-val="true" data-val-length="The field inputText must be a string with a maximum length of 5."
data-val-length-max="5" data-val-required="The inputText field is required." id="inputText" maxlength="5" name="inputText" value="" />
<input type="submit" value="Exec" />
<input name="__RequestVerificationToken" type="hidden"
value="CfDJ8ELAudx6v3hEgLYollrn_zltjqOYoSWLg72_aKA0b8-1VRlH_Csc6Q_njI44ojpw_-q4plgiGVLazXYv2_pF4d4We08Y6ZooWpsK53uMWzWva1GmRbnzMuJV7nA9Uba-_ydD1TKPu7thpd_qIuzJFVQ" /></form>
<p></p>
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-06-16
作成日: 2022-06-15
