入力値が範囲内であるかチェック

この例では境界値(2 と 99) は入力可能です。

RangeValidation.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.validation
{
    public class RangeValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("数量")]
        [Range(2, 99, ErrorMessage = "{0}は {1} から {2} の範囲で入力してください。")]
        public int? Count { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine($"エラーなし。{Count}");
        }
    }
}

→ Debug.WriteLineが表示される場所

RangeValidation.cshtml

@page
@model WorkStandard.Pages.validation.RangeValidationModel

<form method="post">
    <div class="mb-3">
        <label asp-for="Count"></label>
        <input asp-for="Count" class="form-control" />
        <span asp-validation-for="Count" class="text-danger"></span>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

主なCSSクラスの効果

• mb-3 下に少し余白(margin)を設けます。→ 余白
• form-control inputをBootstrapの外観にします。→ フォーム
• text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
• btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

この例は .NET 8(2023年)以上で動作します。

この例では 2 や 59.9 は OK で、60 はエラーになります。

RangeExclusiveValidation.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.validation
{
    public class RangeExclusiveValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("重量")]
        [Range(2D, 60D, MaximumIsExclusive = true, ErrorMessage = "{0}は {1} 以上 {2} 未満を入力してください。")]
        public double? Weight { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine($"エラーなし。{Weight}");
        }
    }
}

→ Debug.WriteLineが表示される場所

メモ：下限の方を排他的する(つまり、2はNGで、2.1はOKにする)にはMinimumIsExclusive = true を指定します。

RangeExclusiveValidation.cshtml

@page
@model WorkStandard.Pages.validation.RangeExclusiveValidationModel

<form method="post">
    <div class="mb-3">
        <label asp-for="Weight"></label>
        <input asp-for="Weight" class="form-control" />
        <span asp-validation-for="Weight" class="text-danger"></span>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

主なCSSクラスの効果

• mb-3 下に少し余白(margin)を設けます。→ 余白
• form-control inputをBootstrapの外観にします。→ フォーム
• text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
• btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

RangeDateValidation.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.validation
{
    public class RangeDateValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("生年月日")]
        [DataType(DataType.Date)]
        [Range(typeof(DateTime), "1900/1/1", "2099/12/31", ErrorMessage = "{0} は {1:yyyy/M/d} から {2:yyyy/M/d} の範囲で入力してください。")]
        public DateTime? BirthDate { get; set; } = DateTime.Now;

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine($"エラーなし。{BirthDate}");
        }
    }
}

→ Debug.WriteLineが表示される場所

RangeDateValidation.cshtml

@page
@model WorkStandard.Pages.validation.RangeDateValidationModel

<form method="post">
    <div class="mb-3">
        <label asp-for="BirthDate"></label>
        <input asp-for="BirthDate" class="form-control" />
        <span asp-validation-for="BirthDate" class="text-danger"></span>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

主なCSSクラスの効果

• mb-3 下に少し余白(margin)を設けます。→ 余白
• form-control inputをBootstrapの外観にします。→ フォーム
• text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
• btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン