WebSurfer's Home

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

ASP.NET Core MVC と Ajax ライブラリ

by WebSurfer 2020年3月6日 21:10

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

Ajax で部分ビューを表示

同じことが 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 下のフォルダに配置します。

jquery.unobtrusive-ajax.js を配置

(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 で部分ビューの呼出・表示」を見てください。

Tags: , , ,

CORE

IValidatableObject を継承したカスタムモデル

by WebSurfer 2020年2月28日 15:31

IValidatableObject インターフェイスを継承したカスタムモデルを使って検証を行う方法を備忘録として書いておきます。

IValidatableObject を継承したクラスで検証

先の記事「CustomValidation 属性」で書いたモデルレベルの検証と同等な機能を実装してみます。

マイクロソフト公式解説書「プログラミング Microsoft ASP.NET MVC」によると "IValidatableObject インターフェイスを実装すると、クラスレベルで CustomValidation 属性を使用するのと機能的には同じになります"、"クラスレベルの検証を実装するにあたって、クラスレベルで IValidatableObject インターフェイスと CustomValidation 属性のどちらを利用するかは、完全にあなた次第です" とのことです。

ただし、"モデルにデータアノテーションも追加されている場合、有効な状態でないプロパティが存在すると、Validate メソッドが呼び出されなくなります。IValidatableObject インターフェイスを利用する場合は、問題が起きないよう、データアノテーションを完全に削除することをお勧めします" との注記があります。

ということは、データアノテーションによるクライアント側での検証ができなくなるということで、あまり使い道はなさそうな気がしますが。

コードは以下の通りです。.NET Framework MVC5 と ASP.NET Core 3.1 MVC で同じコードが使えます。

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
using System.Globalization;

namespace MvcCoreApp.Models
{
  // IValidatableObject インターフェイス利用
  public class CustomValidationModel : IValidatableObject
  {
    public int PersonId { set; get; }

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

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

    // int? にしないと未入力では Validate メソッドが動かない。
    // int, int? どちらも "1.0" とか入力された場合は Validate
    // メソッドが動かない。モデルバインドされる際に例外がスロ
    // ーされ Validate メソッドに制御が飛ばないのだと思われる
    [Display(Name = "年齢")]
    public int? Age { set; get; }

    // 検証を行う Validate メソッド
    public IEnumerable<ValidationResult> Validate(
                                ValidationContext context)
    {
      var model = 
        context.ObjectInstance as CustomValidationModel;

      if (model == null)
      {
        throw new NullReferenceException();
      }

      if (string.IsNullOrEmpty(model.Name))
      {
        yield return new ValidationResult(
            "名前は必須", new string[] { "Name" });
      }
      else if (model.Name.Length < 2 ||
               model.Name.Length > 20)
      {
        yield return new ValidationResult(
            "名前は 2 ~ 20 文字の範囲",
            new string[] { "Name" });
      }

      if (string.IsNullOrEmpty(model.Mail))
      {
        yield return new ValidationResult(
            "メールアドレスは必須",
            new string[] { "Mail" });
      }
      else
      {
        bool isValidEmai = Regex.IsMatch(model.Mail,
            @"・・・正規表現(省略)・・・",
            RegexOptions.IgnoreCase,
            TimeSpan.FromMilliseconds(250));

        if (!isValidEmai)
        {
          yield return new ValidationResult(
              "有効な Email 形式ではありません",
              new string[] { "Mail" });
        }
      }

      if (model.Age == null)
      {
        yield return new ValidationResult(
            "年齢は必須", new string[] { "Age" });
      }
      else if (model.Age < 0 || model.Age > 200)
      {
        yield return new ValidationResult(
            "年齢は 0 ~ 200 の範囲",
            new string[] { "Age" });
      }
      else if (!string.IsNullOrEmpty(model.Name) && 
               model.Name.StartsWith("佐藤") && 
               model.Age < 20)
      {
        yield return new ValidationResult(
            "佐藤さんは二十歳以上でなければなりません",
            new string[] { "" });
      }
    }
  }
}

.NET Framework MVC5 と ASP.NET Core 3.1 MVC でコードは同じものが使えますが、動作は若干異なります。主な違いは以下の通りです。

  1. Age プロパティを int 型にすると、MVC5 の場合 input 要素に data-val="true" data-val-number="フィールド 年齢 には数字を指定してください。 " data-val-required="年齢 フィールドが必要です。" という検証属性が付与される。Core には data-val-number 属性の設定はない。
  2. Age プロパティを int? 型 (null 許容) にすると、MVC5 の場合 input 要素に検証属性 data-val="true" data-val-number="フィールド 年齢 には数字を指定してください。" が付与される。Core の場合は検証属性は何も付与されない。
  3. さらに、type 属性には "number" と設定されるが、IE, Chrome, Firefox いずれも "1.0" というような整数としては不正な文字列を入力できる。 その場合、クライアント側の検証はパスしてしまう。 POST すると、MVC5 の場合は Validate メソッドに制御が飛ぶが、Core の場合はモデルバインドしようとする際に例外がスローされるようで Validate メソッドには制御が飛ばない。

    ただし、Validate メソッドに制御が飛んでも、Validate メソッドで設定したエラーメッセージはどこかで上書きされ "値 '1.0' は 年齢 に対して無効です。" となる。理由不明。

Tags: , ,

Validation

CustomValidation 属性

by WebSurfer 2020年2月25日 16:09

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

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;
      }
    }
  }
}

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

Tags: , ,

Validation

About this blog

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

Calendar

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

View posts in large calendar