.NET Framework の ASP.NET MVC5 アプリケーションでは AjaxHelper（Ajax.BeginForm, Ajax.ActionLink など）と Microsoft の Ajax ライブラリ jquery.unobtrusive-ajax.js を利用して、Ajax で部分ビューを呼び出してページ内の指定の場所に表示するなどのことが、JavaScript / jQuery のコードを書かなくても容易にできるようになっています。

同じことが ASP.NET Core 3.1 MVC でもできるだろうと思っていましたがダメでした。

MVC5 であれば、先の記事「MVC5 で AjaxHelper が働かない」で書きましたように NuGet から Microsoft.jQuery.Unobtrusive.Ajax をインストールすれば、AjaxHelper を使って目的が果たせます。

ところが、ASP.NET Core 3.1 MVC では、まず AjaxHelper が使えないようです。また、NuGet で Microsoft.jQuery.Unobtrusive.Ajax をインストールしても、肝心の jquery.unobtrusive-ajax.js が wwwroot に配置されません。（LibMan を使えということのようですが jquery.unobtrusive-ajax.js は登録されてないようです）

そこを無理やり(?) jquery.unobtrusive-ajax.js を使って Ajax で部分ビューを呼び出してページ内の指定の場所に表示するにはどうするかを以下に書きます。

(1) まず、jquery.unobtrusive-ajax.js を入手して以下の画像のように wwwroot 下のフォルダに配置します。

(2) 外部スクリプトファイル jQuery.js と上記 (1) の jquery.unobtrusive-ajax.js がダウンロードされるよう、View に script 要素を設定します。必ず jQuery.js が先に来るようにしてください。

_Layout.cshtml を使っていれば jQuery.js は設定されるようになっているので、View には jquery.unobtrusive-ajax.js だけ追加されるように設定すれば良いはずです。

(3) View のコードの form 要素に以下の属性を追加します。

data-ajax="true" data-ajax-mode="replace" data-ajax-update="#result"

その意味は jquery.unobtrusive-ajax.js を使って ajax で要求を出し、返ってきた応答で id が result の要素の中身を書き換えるということです。属性の説明については以下の記事が詳しいので参考にしてください。

Using jQuery Unobtrusive AJAX in ASP.NET Core Razor Pages

Controller と View のサンプルコードを以下に書いておきます。使っているのは Microsoft が提供する Northwind サンプルデータベースの Customers テーブルです。

その CompanyName をドロップダウンリストに表示し、ユーザーが選択してボタンをクリックすると指定した Customers のレコードの詳細を、部分ビューを呼び出して、それを指定した場所（下の View のコードで言うと <div id="result"></div> の中）に書き出すものです。

Controller / Action Method

using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace MvcCoreApp.Controllers
{
  public class AjaxController : Controller
  {
    private readonly NorthwindContext _context;

    public AjaxController(NorthwindContext context)
    {
      _context = context;
    }

    // jquery.unobtrusive-ajax.js の助けを借りて
    // 部分ビューで詳細 Customer データを表示
    public IActionResult Index()
    {
      // 全部取得すると長すぎるので Take(10) した
      var list = _context.Customers.Take(10);
      ViewData["customers"] =
        new SelectList(list, "CustomerId", "CompanyName");
      return View();
    }

    // 部分ビュー用のアクションメソッド
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Details(string customerid)
    {
      if (string.IsNullOrEmpty(customerid))
      {
        return NotFound();
      }

      var customer = _context.Customers.Find(customerid);

      if (customer == null)
      {
        return NotFound();
      }

      return PartialView(customer);
    }
  }
}

View (Index.cshtml)

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

<h1>Index</h1>

<form asp-action="Details" asp-controller="Ajax" 
      data-ajax="true" data-ajax-mode="replace" 
      data-ajax-update="#result" method="post">

    <select id="customerid" name="customerid" 
            asp-items="@ViewBag.customers">
    </select>

    <input type="submit" value="詳細表示" />

</form>

<div id="result"></div>

@section Scripts {
  <script src="...フォルダ.../jquery.unobtrusive-ajax.js">
  </script>

部分ビュー (Details.cshtml)

@model MvcCoreApp.Customers

<div>
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.CustomerId)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.CustomerId)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.CompanyName)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.CompanyName)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.ContactName)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.ContactName)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.ContactTitle)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.ContactTitle)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Address)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Address)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.City)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.City)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Region)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Region)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.PostalCode)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.PostalCode)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Country)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Country)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Phone)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Phone)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Fax)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Fax)
        </dd>
    </dl>
</div>

jquery.unobtrusive-ajax.js は ASP.NET Core MVC ではサポートされてないような気がしますが、上記のようにすれば一応使えます。

jquery.unobtrusive-ajax.js を使わなくても同等のことは jQuery ajax を使ってできます。それについては別の記事「jQuery ajax で部分ビューの呼出・表示」を見てください。

ASP.NET MVC アプリケーションでモデルのプロパティにまたがるユーザー入力の検証に用いる CustomValidation 属性の実装方法を備忘録として書いておきます。

個々のプロパティのユーザー入力の検証には、下のサンプルコードの例のように Required, StringLength, Range などのデータアノテーション属性を利用するのが便利です。

加えて、上の画像のように苗字が佐藤の場合は年齢が 20 歳以上でなければならないという条件（例としてあまり適切ではないかもしれませんが）を付けたい場合はどうするかという話です。

その目的に使えるのが CustomValidation 属性です。プロパティにまたがる検証を行い、検証結果 NG の場合は新しい ModelState ディクショナリにエラーを追加して、既存の ModelState ディクショナリにマージするという操作を行います。（他に IValidatableObject を継承したカスタムモデルを使う方法もあります。それについては別の記事「IValidatableObject を継承したカスタムモデル」を見てください）

CustomValidation 属性には、パラメータとしてデータ型とメソッド名を指定します。データ型はこの属性を付与するモデルの型とします。メソッドは下のサンプルコードのシグネチャを持つ public static メソッドとします。

CustomVaidation 属性をモデルに付与する場合とプロパティに付与する場合とではコードが異なりますので注意してください。下のサンプルコードで、前者がモデルに付与する場合で、後者かプロパティに付与する場合です。

// 下の using 句は ASP.NET Core の場合。.NET Framework
// の MVC5 の場合は若干異なるので注意。namespace 以下
// のコードは Core / .NET Framework 同じになる。
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using System.Globalization;

namespace MvcCoreApp.Models
{
  // モデルレベル
  [CustomValidation(typeof(CustomValidationModel2), 
                           "ValidateNameAndAge")]
  public class CustomValidationModel2
  {
    public int PersonId { set; get; }

    [Display(Name = "名前")]
    [Required(ErrorMessage = "{0} は必須入力")]
    [StringLength(20, ErrorMessage = 
      "{0} は {2} から {1} 文字の範囲", MinimumLength = 2)]
    public string Name { set; get; }

    [Display(Name = "メールアドレス")]
    [Required(ErrorMessage = "{0} は必須入力")]
    [EmailAddress(ErrorMessage = 
        "有効な Email 形式ではありません")]
    public string Mail { set; get; }

    [Display(Name = "年齢")]
    [Required(ErrorMessage = "{0} は必須入力")]
    [Range(0, 200, ErrorMessage = 
        "{0} は {1} から {2} の範囲")]
    public int Age { set; get; }

    // 以下のシグネチャを持つ public static メソッド:
    // public static ValidationResult ValidateNameAndAge(
    //                     CustomValidationModel2 model)
    // または
    public static ValidationResult ValidateNameAndAge(
                             CustomValidationModel2 model, 
                             ValidationContext context)
    {
      if (model == null)
      {
        throw new NullReferenceException();
      }

      if (model.Name.StartsWith("佐藤") && model.Age < 20)
      {
        return new ValidationResult(
            "佐藤さんは二十歳以上でなければなりません");     
      }
      else
      {
        return ValidationResult.Success;
      }            
    }
  }

  // プロパティレベル
  public class CustomValidationModel3
  {
    public int PersonId { set; get; }

    [Display(Name = "名前")]
    [Required(ErrorMessage = "{0} は必須入力")]
    [StringLength(20, ErrorMessage = 
      "{0} は {2} から {1} 文字の範囲", MinimumLength = 2)]
    public string Name { set; get; }

    [Display(Name = "メールアドレス")]
    [Required(ErrorMessage = "{0} は必須入力")]
    [EmailAddress(ErrorMessage = 
        "有効な Email 形式ではありません")]
    public string Mail { set; get; }

    [Display(Name = "年齢")]
    [Required(ErrorMessage = "{0} は必須入力")]
    [Range(0, 200, ErrorMessage = 
        "{0} は {1} から {2} の範囲")]
    [CustomValidation(typeof(CustomValidationModel3), 
        "ValidateNameAndAge")]
    public int Age { set; get; }

    // 引数 age には年齢が int 型の値として代入される
    public static ValidationResult ValidateNameAndAge(int age,
                                 ValidationContext context)
    {
      var model = 
        context.ObjectInstance as CustomValidationModel3;
      if (model == null)
      {
        throw new NullReferenceException();
      }

      if (model.Name.StartsWith("佐藤") && age < 20)
      {
        return new ValidationResult(
            "佐藤さんは二十歳以上でなければなりません");
      }
      else
      {
        return ValidationResult.Success;
      }
    }
  }
}

この記事の画像はプロパティレベルの場合で、エラーメッセージもプロパティレベルで表示されています。モデルレベルの場合はエラーメッセージはサマリーに表示されます。

ASP.NET Core 3.1 MVC アプリケーションでカスタムモデルバインダを利用するコードを備忘録として書いておきます。（注：.NET Framework の MVC ではありません）

先の記事「カスタムモデルバインダ (MVC5)」で .NET Framework の MVC5 のカスタムモデルバインダのコードを書きましたが、それと同じ機能を ASP.NET Core 3.1 MVC で実装してみます。

モデルバインド機能だけでなく、先の MVC5 版の記事と同様に、ユーザー入力の検証とエラーメッセージの表示ができるようにしました。

カスタムモデルバインダが継承するインターフェイスは Microsoft.AspNetCore.Mvc.ModelBinding 名前空間に属する IModelBinder Interface となります。MVC5 用と名前は同じですが中身が異なることに注意してください。

実装するのは BindModelAsync(ModelBindingContext) という Task を返す非同期メソッドになります。

加えて、ヘルパーメソッドで使っている GetValue(key) メソッドが返す ValueProviderResult は MVC5 と Core で名前は同じながら別物で、Core 用は ValueProviderResult 構造体となります。ユーザーから POST されてきた値は FirstValue プロパティを使って文字列として取得します。

Model, カスタムモデルバインダ、Controller のサンプルコードを以下にアップしておきます。上の画像を表示したものです。View のコードはスキャフォールディング機能を使って自動生成できるので割愛します。

モデルとカスタムモデルバインダ

モデルのコードは MVC5 用と全く同じです。カスタムモデルバインダのコードは上に述べた点が異なりますが、他は MVC5 用と同じです。

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using System.Globalization;

namespace MvcCoreApp.Models
{
  // モデル（MVC5 用と同じ）
  public class Person2
  {
    public int PersonId { set; get; }

    [Display(Name = "名前")]
    public string Name { set; get; }

    [Display(Name = "メールアドレス")]
    public string Mail { set; get; }

    // int? 型にしないと未入力に対応できない
    [Display(Name = "年齢")]
    public int? Age { set; get; }
  }

  // カスタムモデルバインダ
  public class CustomModelBinder : IModelBinder
  {
    public Task BindModelAsync(ModelBindingContext context)
    {
      if (context == null)
      {
        throw new ArgumentNullException("context");
      }

      var model = new Person2();
      model.Name = PostedData(context, "Name");
      model.Mail = PostedData(context, "Mail");
      string age = PostedData(context, "Age");

      if (string.IsNullOrEmpty(age))
      {
        context.ModelState.AddModelError("Age", 
                                         "年齢は必須");
      }
      else
      {
        int intAge = 0;
        if (!int.TryParse(age, out intAge))
        {
          context.ModelState.AddModelError("Age", 
                                         "年齢は整数");
        }
        else
        {
          model.Age = intAge;
          if (intAge < 0 || intAge > 200)
          {
            context.ModelState.AddModelError("Age", 
                           "年齢は 0 ～ 200 の範囲");
          }
        }
      }

      if (string.IsNullOrEmpty(model.Name))
      {
        context.ModelState.AddModelError("Name", 
                                         "名前は必須");
      }
      else if (model.Name.Length < 2 || 
               model.Name.Length > 20)
      {
        context.ModelState.AddModelError("Name", 
                            "名前は 2 ～ 20 文字の範囲");
      }
      else if (model.Name.StartsWith("佐藤") && 
               model.Age < 20)
      {
        context.ModelState.AddModelError("", 
             "佐藤さんは二十歳以上でなければなりません");
      }

      if (string.IsNullOrEmpty(model.Mail))
      {
        context.ModelState.AddModelError("Mail", 
                                 "メールアドレスは必須");
      }
      else
      {
        bool isValidEmai = Regex.IsMatch(model.Mail,
            @"・・・正規表現（省略）・・・",
            RegexOptions.IgnoreCase, 
            TimeSpan.FromMilliseconds(250));

        if (!isValidEmai)
        {
          context.ModelState.AddModelError("Mail", 
                    "有効な Email 形式ではありません");
        }
      }

      context.Result = ModelBindingResult.Success(model);
      return Task.CompletedTask;
    }

    // ヘルパーメソッド
    // GetValue(key) メソッドが返す ValueProviderResult は
    // MVC5 と Core では別物。前者はクラスで後者は構造体。
    // 値を取得するには FirstValue プロパティを使う
    private static string PostedData(
        ModelBindingContext context, string key)
    {
      var result = context.ValueProvider.GetValue(key);
      context.ModelState.SetModelValue(key, result);
      return result.FirstValue;
    }
  }
}

Controller / Action Method

MVC5 の場合と同様に、モデルバインダをターゲットとなる型に関連付けるため、POST データを受けるアクションメソッドの引数に [ModelBinder(typeof(CustomModelBinder))] を付与します。

using System;
using Microsoft.AspNetCore.Mvc;
using MvcCoreApp.Models;

namespace MvcCoreApp.Controllers
{
  public class ValidationController : Controller
  {
    public IActionResult Create4()
    {
      return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create4(
      [ModelBinder(typeof(CustomModelBinder))] Person2 model)
    {
      if (!ModelState.IsValid)
      {
        return View(model);
      }

      return RedirectToAction("Index", "Home");
    }
  }
}