WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

Model Binding Error Messages の差替 (CORE)

by WebSurfer 2023年1月27日 12:35

先の記事「整数型プロパティの検証、エラーメッセージ (CORE)」の一番下に Model Binding Error Messages をローカライズする方法別途検証してみますと書きました。ローカライズと言うよりは、単に英語のエラーメッセージを日本語に差し替えるだけですが、やってみましたので以下にその方法を述べます。

Model Binding Error Messages 差替

.NET Framework の MVC5 アプリの場合は、先の記事「MVC5 でエラーメッセージが英語」に書いたように、NuGet から日本語のサテライトアセンブリ System.Web.Mvc.resources.dll をインストールするという手段がありますが、ASP.NET Core MVC ではそのような解決策は見つかりません。

自力でコードを書いてローカライズする方法は Stackoverflow の記事 ASP.NET Core Model Binding Error Messages Localization 他に見つかりましたのでそれを参考にしました。

だた、見つけた記事に書いてある方法は、多言語対応のため複数のリソースファイルを作り、それからカルチャに応じてその言語のエラーメッセージの文字列をリソースファイルから取得して、デフォルトのエラーメッセージを書き換えるという少々複雑なことを行っています。

先の記事のエラーメッセージ「The value '2000x' is not valid for 価格2 (int).」と「The value '' is invalid.」を日本語化するだけならコードはかなり簡単になります。リソースファイルを作ってそこからメッセージを取得するということは必要ありません。

それにはどうすればよいかと言うと、Program.cs (.NET 5.0 以前は Startup.cs) の AddControllersWithViews メソッドで DefaultModelBindingMessageProvider を取得し、SetAttemptedValueIsInvalidAccessor, SetValueMustNotBeNullAccessor メソッドを使ってデフォルトのエラーメッセージを差し替えてやります。

具体例は下のコードを見てください。Visual Studio 2022 のテンプレートで作った .NET 7.0 の ASP.NET Core MVC の場合のサンプルです。

builder.Services.AddControllersWithViews(options => { 
    DefaultModelBindingMessageProvider provider = 
        options.ModelBindingMessageProvider;
    provider.SetAttemptedValueIsInvalidAccessor(
        (s1, s2) => $"値 '{s1}' は {s2} に対して無効です。");
    provider.SetValueMustNotBeNullAccessor(
        (s) => $"値 '{s}' は無効です。");
});

上のコードにより、先の記事のデフォルトの英語のエラーメッセージ「The value '2000x' is not valid for 価格2 (int).」と「The value '' is invalid.」がそれぞれ「値 '2000x' は 価格2 (int) に対して無効です。」と「値 '' は無効です。」に書き換えられます。この記事の上の画像がその結果です。

デフォルトの Model Binding Error Messages には、上の AttemptedValueIsInvalid, ValueMustNotBeNull を含めて全部で 11 種類あります。

以下に一覧表を載せておきます。それぞれに SetXxxxxAccessor (Xxxxx は名前) というメソッドが用意されていて、それによりデフォルトのエラーメッセージを差し替えることができます。

名前 デフォルト 原因
AttemptedValueIsInvalid The value '{0}' is not valid for {1}. Exception is of type FormatException or OverflowException, value is known, and error is associated with a property.
ValueMustNotBeNull The value '{0}' is invalid. a null value is bound to a non-Nullable property.
MissingBindRequiredValue A value for the '{0}' parameter or property was not provided. a property with an associated BindRequiredAttribute is not bound.
MissingKeyOrValue A value is required. either the key or the value of a KeyValuePair<Key,TValue> is bound but not both.
MissingRequestBodyRequiredValue A non-empty request body is required. no value is provided for the request body, but a value is required.
NonPropertyAttemptedValueIsInvalid The value '{0}' is not valid. Exception is of type FormatException or OverflowException, value is known, and error is associated with a collection element or parameter.
NonPropertyUnknownValueIsInvalid The supplied value is invalid. Exception is of type FormatException or OverflowException, value is unknown, and error is associated with a collection element or parameter.
NonPropertyValueMustBeANumber The field must be a number. Error message HTML and tag helpers add for client-side validation of numeric formats. Visible in the browser if the field for a float (for example) collection element or action parameter does not have a correctly-formatted value.
UnknownValueIsInvalid The supplied value is invalid for {0}. Exception is of type FormatException or OverflowException, value is unknown, and error is associated with a property.
ValueIsInvalid The value '{0}' is invalid. Fallback error message HTML and tag helpers display when a property is invalid but the ModelErrors have nullErrorMessages.
ValueMustBeANumber The field {0} must be a number. Error message HTML and tag helpers add for client-side validation of numeric formats. Visible in the browser if the field for a float (for example) property does not have a correctly-formatted value.

Tags: , , ,

Validation

整数型プロパティの検証、エラーメッセージ (CORE)

by WebSurfer 2023年1月26日 11:49

.NET 7.0 の ASP.NET Core MVC で、モデルのプロパティが整数型(int, short, long 等)の場合の検証とエラーメッセージに関する注意点を書きます。

検証結果

.NET Framework の MVC5 の場合については先の記事「int 型プロパティの検証、エラーメッセージ (MVC5)」に書きましたのでそちらを見てください。

検証に使ったのは Visual Studio 2022 v17.4.4 のテンプレートで作成した .NET 7.0 の ASP.NET Core MVC アプリです。View には Html ヘルパーではなく入力 Tag ヘルパーを使いました。

Model のプロパティが整数型の場合 (下に載せた Model のコード例では ContractID, Code プロパティ)、Required 属性を付与しなくても、View の入力 Tag ヘルパーから生成される html の input 要素には data-val-required="The xxx field is required." (xxx はプロパティ名) という属性が付与されます。

(プロパティが int? 型のような null 許容型の場合は data-val-required 属性は付与されません。.NET Framework MVC5 の場合に付与された data-val-number という属性は .NET 7.0 ASP.NET Core MVC では付与されません)

View で検証用の JavaScript ファイルが取り込まれるように設定されていると (下に載せた View のコード例では @section Scripts の中のコード)、未入力の場合はクライアント側での検証により data-val-required 属性に設定された "The xxx field is required." というメッセージが表示されます。

これを任意の文字列に書き換えるには、Model の当該プロパティに Required 属性を付与し ErrorMessage に書き換えたい文字列を設定します。そうすると、html の input 要素の data-val-required 属性に設定される文字列が ErrorMessage に置き換わり、検証 NG の場合はそれが表示されます。

未入力の検証については上記の対応だけで特に不都合はないと思います。

しかし、未入力の検証に加えて、数字か否かの検証を行う場合はいろいろ問題があります。それを以下に説明します。

入力 Tag ヘルパーが以下のようになっている場合、html の input 要素の type 属性が "number" となり、ブラウザによる入力の制約と、ASP.NET による検証がかかります。

<input asp-for="Price2" class="form-control"/>

入力の制約はブラウザ依存です。自分が試した限りですが、Edge 109.0.1518.61, Chrome 109.0.5414.120, Opera 94.0.4606.76 では数字と + - . 以外の文字は受け付けなくなります。Firefox 109.0 では何でも入力できてしまいます。

クライアント側での JavaScript による検証はフレームワークに組み込みの jquery.validate.min.js により行われます。数字以外の文字を入力して送信しようとすると、"Please enter a valid number." というエラーメッセージが表示され送信はキャンセルされます。("Please enter a valid number." というエラーメッセージは jquery.validate.min.js にハードコーディングされています。それを書き換えれば日本語化はできます)

問題は、(1) 文字 + - はブラウザは受け付けるが jquery.validate.min.js による検証で NG になるという不整合、(2) エラーメッセージが英語になること、(3) さらにそれを解決するためプロパティに RegularExpression 属性を追加しても無視されることです。

上記 (1) ~ (3) を解決するには、html の input 要素が type="number" ではなく type="text" になるようにします。具体的には、View の当該入力 Tag ヘルパーに以下のように type="text" を追加します。

<input asp-for="Price2" class="form-control" type="text"/>

それにより RegularExpression 属性に設定した正規表現が期待通り動くようになり、検証結果 NG の場合は ErrorMessage に設定したエラーメッセージが表示されるようになります。

以上をまとめると:

  1. 未入力の検証には、Model の当該プロパティに Required 属性を付与し ErrorMessage にエラーメッセージを設定。
  2. 数字か否かの検証には、当該入力 Tag ヘルパーに type="text" を追加して html の input 要素の type 属性が "text" となるようにし、さらに
  3. RegularExpression 属性をプロパティに付与して正規表現を使っての検証を行う。ErrorMessage にエラーメッセージを設定する。

 

以上はクライアント側での検証の話です。

サーバー側での検証の問題は、未入力または整数型にパースできない文字列を送信した場合、Model のプロパティに付与した Required 属性、RegularExpression 属性が働かないことです。上の画像の「価格2 (int)」のエラーメッセージを見てください。

上の画像の例では、クライアント側での検証を無効にして "2000x" という文字列を送信していますが「The value '2000x' is not valid for 価格2 (int).」というエラーメッセージが出ています。RegularExpression 属性に設定したエラーメッセージとは異なっています。

未入力の場合は「The value '' is invalid.」というエラーメッセージが表示されます。やはり Required 属性に設定したエラーメッセージとは異なります。

これは、"2000x" という文字列や空白は int 型にパースできないので、検証属性による検証が行われる前にエラーとなって、そのエラーメッセージが出ているようです。(想像です)

検証属性の ErrorMessage に設定したメッセージが表示されて欲しいのですが、int 型にパースできない文字列が送信された場合は何ともならないようです。ただし、このエラーメッセージを書き換える方法はあります。

ModelStateDictionary に含まれる ModelStateEntry は同じ Key でマージしすると上書きされます。具体例は下の Controller コードの通りです。上の画像の ID (int) のテキストボックスの下のエラーメッセージを書き換えています。

Model

using System.ComponentModel.DataAnnotations;

namespace MvcNet7App.Models
{
    public class Contract
    {
        [Display(Name = "ID (int)")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d+$", ErrorMessage = "数字のみ")]
        public int ContractID { get; set; }

        [Display(Name = "契約日 (DateTime)")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d{4}/\d{2}/\d{2}( \d{1,2}:\d{2}:\d{2})?$",
            ErrorMessage = "yyyy/MM/dd 形式")]
        public DateTime ContractDate { get; set; }

        [Display(Name = "価格 (decimal)")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d{1,5}$", 
            ErrorMessage = "数字 1 ~ 5 文字")]
        public decimal Price { get; set; }

        [Display(Name = "価格2 (int)")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d+$", ErrorMessage = "数字のみ")]
        [Range(100, 10000, 
            ErrorMessage = "{0}は{1}~{2}の間で入力してください。")]
        public int Price2 { get; set; }
    }
}

View

@model MvcNet7App.Models.Contract

@{
    ViewData["Title"] = "ContractEdit";
}

<div class="row">
    <div class="col-md-4">
        <form asp-action="ContractEdit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ContractID" class="control-label"></label>
                <input asp-for="ContractID" class="form-control"/>
                <span asp-validation-for="ContractID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ContractDate" class="control-label"></label>
                <input asp-for="ContractDate" class="form-control" type="text"/>
                <span asp-validation-for="ContractDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" type="text"/>
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price2" class="control-label"></label>
                <input asp-for="Price2" class="form-control" type="text"/>
                <span asp-validation-for="Price2" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{
        // コメントアウトするとクライアント側での検証がかからない
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Controller

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using MvcNet7App.Models;
using System.Diagnostics;

namespace MvcNet7App.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult ContractEdit()
        {
            var model = new Contract 
            { 
                ContractID = 1, 
                ContractDate = DateTime.Now, 
                Price = 1000m, 
                Price2 = 2000
            };

            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult ContractEdit(Contract model)
        {
            if (ModelState.IsValid)
            {
                return RedirectToAction("Index");
            }

            // div asp-validation-summary に表示するために追加
            var newDictionary = new ModelStateDictionary();
            newDictionary.AddModelError("", 
                "ValidationSummary に表示するために追加。");
            ModelState.Merge(newDictionary);

            // エラーメッセージを書き換えることはできる。
            // 同じ Key でマージした方に上書きされる
            ModelStateEntry? state = ModelState["ContractID"];

            if (state != null && state.Errors.Count > 0)
            {
                string msg = state.Errors[0].ErrorMessage;
                if (msg.StartsWith("The value"))
                {
                    // マージすると RawValue が null になるので書き戻すた
                    // めに取得しておく
                    object? value = state.RawValue;

                    var newDictionary2 = new ModelStateDictionary();
                    newDictionary2.AddModelError("ContractID",
                        "書き換え。元は The value '1.0' is not valid for ID (int).");
                    ModelState.Merge(newDictionary2);

                    // RawValue を書き戻す。そうしないと再描画されたとき
                    // 元のユーザー入力が表示されず 0 になってしまう
                    state.RawValue = value;
                }
            }

            return View(model);
        }
    }
}

上に書いた「The value '2000x' is not valid for 価格2 (int).」とか「The value '' is invalid.」は Model Binding Error Messages というそうで、ローカライズする方法があるようです。上のように書き換えるよりローカライズする方が現実的かもしれません。

Stackoverflow の記事 ASP.NET Core Model Binding Error Messages Localization に方法が書いてあるのを見つけました。別途検証してみます。 ⇒ 2022/1/27 追記: 別の記事「Model Binding Error Messages の差替 (CORE)」に書きましたのでそちらを見てください。

Tags: , , , , ,

Validation

Web API に CORS 実装 (CORE)

by WebSurfer 2023年1月21日 22:50

ASP.NET Core Web API に CORS を実装してみました。下の画像は検証のため別プロジェクトの MVC アプリから fetch API を使って Web API に要求を出してデータを取得し表示したものです。

Web API に CORS 実装

開発環境の IIS Express で動かしているのでホストは同じ localhost ですが、ポートが異なるので要求はクロスドメインになります。上の画像では fetch API のメソッドが PUT なので、ブラウザがまずプリフライトリクエストを出し、その応答を見て要求を出してデータを取得しています。

ASP.NET Core の場合はフレームワーク組み込みの CORS 用のミドルウェアが用意されていて、それを Microsoft のドキュメント「ASP.NET Core でクロスオリジン要求 (CORS) を有効にする」に従って有効にします。

(ちなみに、.NET Framework 版の ASP.NET Web アプリでは、先の記事「クロスドメインの WCF サービス」で書いたように自力で実装していました)

具体的には、Visual Studio 2022 のテンプレートでフレームワーク .NET 6.0 で作った ASP.NET Web API アプリであれば、上に紹介した Microsoft のドキュメントの「名前付きポリシーとミドルウェアを使用した CORS」のセクションに従って Program.cs に以下のコードを追加するだけで CORS は有効になります。

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("https://localhost:44343")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

// ・・・中略・・・

app.UseCors(MyAllowSpecificOrigins);

「名前付き」にすると、[EnableCors("{Policy String}")] 属性をコントローラーに付与しないと CORS は有効にならないと思っていたがそうではなかったです。コントローラーには何も付与しなくても上の設定だけで CORS は有効になります。

WithOrigins メソッドに設定した https://localhost:44343 は CORS でのアクセスを許可する要求元です。すべての要求元を許可する AllowAnyOrigin メソッドもあります。詳しくは Microsoft のドキュメント「CorsPolicyBuilder クラス」を見てください。

AllowAnyHeader メソッド、AllowAnyMethod メソッドはプリフライトが必要になる場合は必要です(Any ではなく特定の Header, Method を指定することもできます)。それらが無いとプリフライトの応答ヘッダに、

Access-Control-Allow-Headers
Access-Control-Allow-Methods

・・・が含まれないのでプリフライトの後の要求がブラウザから出ず失敗します。

上の画像のプリフライトリクエストの要求・応答ヘッダを Fiddler でキャプチャした画像を下に貼っておきます。

プリフライトリクエスト

要求側はブラウザの仕事で開発者は何もする必要はありません。プリフライトが必要か否かもブラウザが判断して CORS に必要な要求を出してくれます。

Response Headers の Security の項目は、要求を受けてサーバー側のミドルウェア(上のコード参照)が設定したものです。

参考に検証に使ったコードを下に載せておきます。Windows 10 22H2 の Edge 109.0.1518.61, Chrome 109.0.5414.75, Firefox 109.0, Opera 94.0.4606.65 で確認しました。

Web API

using Microsoft.AspNetCore.Mvc;

namespace WebApi.Controllers
{
    public class Hero
    {
        public int Id { get; set; }
        public string? Name { get; set; }
    }

    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        private List<Hero> heroes = new List<Hero> {
              new Hero {Id = 1, Name = "スーパーマン"},
              new Hero {Id = 2, Name = "バットマン"},
              new Hero {Id = 3, Name = "ウェブマトリクスマン"},
              new Hero {Id = 4, Name = "チャッカマン"},
              new Hero {Id = 5, Name = "スライムマン"}
        };

        // GET: api/values (Read...すべてのレコードを取得)
        [HttpGet]
        public List<Hero> Get()
        {
            return heroes;
        }

        // GET api/values/5 (Read...id 指定のレコード取得)
        [HttpGet("{id}")]
        public Hero Get(int id)
        {
            return heroes[id - 1];
        }

        // POST api/values (Create...レコード追加)
        [HttpPost]
        public List<Hero> Post([FromBody] Hero postedHero)
        {
            heroes.Add(postedHero);
            return heroes;
        }

        // PUT api/values/5 (Update...id 指定のレコード更新)
        [HttpPut("{id}")]
        public List<Hero> Put(int id, [FromBody] Hero postedHero)
        {
            heroes[id - 1].Name = postedHero.Name;
            return heroes;
        }

        // DELETE api/values/5 (Delete...id 指定のレコード削除)
        [HttpDelete("{id}")]
        public List<Hero> Delete(int id)
        {
            heroes.RemoveAt(id - 1);
            return heroes;
        }
    }
}

クライアント側 (MVC の View)

@{
    ViewData["Title"] = "ApiCors";
}

<h1>ApiCors</h1>

<input type="button" value="READ ALL" onclick="apiHeroesGet();" />
<input type="button" value="READ 5" onclick="apiHeroesGet5();" />
<input type="button" value="UPDATE 5" onclick="apiHeroesPut5();" />
<input type="button" value="DELETE 5" onclick="apiHeroesDelete5();" />
<input type="button" value="CREATE 6" onclick="apiHeroesPost();" />

<ul id="heroes"></ul>

@section Scripts {
    <script type="text/javascript">
        //<![CDATA[
        const url = "https://localhost:44371/api/values"; // IIS Express
        //const url = "https://localhost:7216/api/values";    //Kestrel
        const elem = document.querySelector("#heroes");

        const apiHeroesGet = async () => {
            const response = await fetch(url);
            if (response.ok) {
                const data = await response.json();
                elem.innerHTML = "";
                for (let i = 0; i < data.length; i++) {
                    elem.insertAdjacentHTML("beforeend", 
                        `<li>${data[i].id}: ${data[i].name}</li>`);
                }
            } else {
                elem.innerHTML = "失敗";
            }
        };

        const apiHeroesGet5 = async () => {
            const response = await fetch(url + "/5");
            if (response.ok) {
                const data = await response.json();
                elem.innerHTML = "";
                elem.insertAdjacentHTML("beforeend",
                    `<li>${data.id}: ${data.name}</li>`);
            } else {
                elem.innerHTML = "失敗";
            }
        };

        const apiHeroesPut5 = async () => {
            const params = {
                method: "PUT",
                body: '{"Id":5,"Name":"Updated Hero"}',
                headers: { 'Content-Type': 'application/json' }
            }
            const response = await fetch(url + "/5", params);
            if (response.ok) {
                const data = await response.json();
                elem.innerHTML = "";
                for (let i = 0; i < data.length; i++) {
                    elem.insertAdjacentHTML("beforeend",
                        `<li>${data[i].id}: ${data[i].name}</li>`);
                }
            } else {
                elem.innerHTML = "失敗";
            }
        };

        const apiHeroesDelete5 = async () => {
            const params = {
                method: "DELETE"
            }
            const response = await fetch(url + "/5", params);
            if (response.ok) {
                const data = await response.json();
                elem.innerHTML = "";
                for (let i = 0; i < data.length; i++) {
                    elem.insertAdjacentHTML("beforeend",
                        `<li>${data[i].id}: ${data[i].name}</li>`);
                }
            } else {
                elem.innerHTML = "失敗";
            }
        };

        const apiHeroesPost = async () => {
            const params = {
                method: "POST",
                body: '{"Id":6,"Name":"Created Hero"}',
                headers: { 'Content-Type': 'application/json' }
            }
            const response = await fetch(url, params);
            if (response.ok) {
                const data = await response.json();
                elem.innerHTML = "";
                for (let i = 0; i < data.length; i++)
                {
                    elem.insertAdjacentHTML("beforeend", 
                        `<li>${data[i].id}: ${data[i].name}</li>`);
                }
            } else {
                elem.innerHTML = "失敗";
            }
        };

        //]]>
    </script>
}

本題の CORS の実装とは直接関係ないことですが、予想外のことがあったのでそれを書いておきます。

PUT については Web API 側のアクションメソッドの引数に int id が含まれているので、要求 URL に api/values/5 というように id を渡さないと 405 Method Not Allowed、Allow: GET, POST となって失敗します。

何故それで Method Not Allowed となるのか、GET, POST でないとダメと言われるのかは分かりませんが・・・

Tags: ,

Web API

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年3月  >>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar