ASP.NET Core MVCアプリケーションでデータ検証と注釈を実現する

※本ブログの内容は、下記英語版のブログを翻訳したものです。
≫ Enabling JQuery Unobtrusive Validation and Data Annotation in MVC FlexGrid

データ検証はデータの整合性を保持する不可欠な要素であり、ASP.NET MVCのデータ注釈機能で、モデルで定義された検証がビューに簡単に伝達されます。本記事では、ASP.NET Core MVCアプリケーションでデータ注釈とjQueryの控えめなデータ検証を使用してFlexGridに入力されるデータを検証する方法を紹介します。

≫ ComponentOne Studio for ASP.NET MVCのダウンロードはこちら

MVCのデータ注釈とjQueryの控えめなデータ検証の使用方法

「C1 ASP.NET Core MVC アプリケーション (.NET Framework)」テンプレートを使ってASP.NET Core MVCプロジェクトを作成し、「FlexValidation」という名前を付けます。プロジェクトを作成するとき標準の「ASP.NET Webアプリケーション」テンプレートを使用することができますが、C1コントロールを使用するためにいくつかの追加手順を実行する必要があります。

モデルクラスの作成

「モデル」フォルダにUserInfoというモデルクラスを作成します。DataAnnotations名前空間をインポートする必要があります。

このモデルクラスにどのように属性が適用されるかを見てみましょう。たとえば、「Email」フィールドでは「Required」と「EmailAddress」属性が設定されています。ユーザーが「Email」フィールドを入力するとき、このフィールドは入力必須になり、フィールドの値が正しい形式のEメールアドレスであることをチェックします。

using System.ComponentModel.DataAnnotations;
public class UserInfo
{
public int Id { get; set; }
[Required]
[RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessage = "The username must be alphanumeric and contains 4 to 10 characters.")]
public string Name { get; set; }
[Required]
[EmailAddress]
public string Email { get; set; }
[Required]
[MinLength(6)]
[MaxLength(16)]
public string Password { get; set; }
[Required]
[Compare("Password")]
public string ConfirmPassword { get; set; }
[Required]
[MinLength(8)]
[MaxLength(11)]
public string Phone { get; set; }
[Required]
public string Country { get; set; }
[Required]
public string Industry { get; set; }
[Required]
public DateTime Birthdate { get; set; }
[Required]
public string FavoriteColor { get; set; }
[Required]
[MinLength(2)]
[MaxLength(3)]
public string[] Skills { get; set; }
}

UserInfoオブジェクトのリストを返すためにUserDataクラスを作成します。

 public class UsersData
{
public static List<UserInfo> Users
{
get
{
return new List<UserInfo>()
{
new UserInfo(){Id=1, Name="John", Email="John@gmail.com", Phone="1424685445", Country="Albania", Industry="Computers", Birthdate= DateTime.Parse("2001/1/1")},
new UserInfo(){Id=2, Name="Mary", Email="Mary@gmail.com", Phone="1296479754", Country="American", Industry="Electronics", Birthdate= DateTime.Parse("1985/3/2")},
new UserInfo(){Id=3, Name="David", Email="David@gmail.com", Phone="1217654653", Country="Australia", Industry="Telecom", Birthdate= DateTime.Parse("1999/3/1")},
new UserInfo(){Id=4, Name="Sunny", Email="Sunny@gmail.com", Phone="1756456786", Country="Bosnia", Industry="Internet", Birthdate= DateTime.Parse("1989/4/3")},
new UserInfo(){Id=5, Name="James", Email="James@gmail.com", Phone="1209687543", Country="Botswana", Industry="Accounting", Birthdate= DateTime.Parse("1994/3/2")},
new UserInfo(){Id=6, Name="Maria", Email="Maria@gmail.com", Phone="1543578643", Country="Bahrain", Industry="Accounting", Birthdate= DateTime.Parse("1998/4/2")},
new UserInfo(){Id=7, Name="Michael", Email="Michael@gmail.com", Phone="1215457467", Country="Argentina", Industry="Finance", Birthdate= DateTime.Parse("2003/2/2")},
new UserInfo(){Id=8, Name="Michelle", Email="Michelle@gmail.com", Phone="1534357546", Country="Bulgaria", Industry="Finance", Birthdate= DateTime.Parse("2001/1/1")}
};
}
}
}

コントローラーの追加

［コントローラー］フォルダを右クリックして、［追加］→［コントローラー］を選択します。［コントローラーの追加］ダイアログが表示されます。コントローラーの名前としてUserInfoControllerを設定し、［MVC 5 コントローラー -空］テンプレートを選択します。

コントローラーに以下のコードを追加して、CRUDメソッドを作成します。

 public partial class UserController : Controller
{
private static List<UserInfo> users = UsersData.Users;
public ActionResult UserInfo()
{
return View(users);
}
public ActionResult GridUpdateUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData)
{
return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
var resultItem = users.Find(u => u.Id == item.Id);
var index = users.IndexOf(resultItem);
users.Remove(resultItem);
users.Insert(index, item);
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult<UserInfo>
{
Error = error,
Success = success,
Data = item
};
}, () => users));
}
public ActionResult GridCreateUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData)
{
return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
users.Add(item);
item.Id = users.Max(u => u.Id) + 1;
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult<UserInfo>
{
Error = error,
Success = success,
Data = item
};
}, () => users));
}
public ActionResult GridDeleteUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData)
{
return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
var resultItem = users.Find(u => u.Id == item.Id);
users.Remove(resultItem);
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult<UserInfo>
{
Error = error,
Success = success,
Data = item
};
}, () => users));
}
}

ビューの追加

「ビュー］フォルダにUserInfoフォルダを追加します。
UserInfoフォルダにて、Index.cshtmlという名前でビューを追加します。
以下のコードのようにFlexGrid コントロールを初期化します。

@using FlexValidation.Models
@model List<UserInfo>
<c1-flex-grid id="flexGrid" auto-generate-columns="false" allow-add-new="true" allow-delete="true" height="400px">
<c1-flex-grid-column binding="Id" is-read-only="true"></c1-flex-grid-column>
<c1-flex-grid-column binding="Name"></c1-flex-grid-column>
<c1-flex-grid-column binding="Email"></c1-flex-grid-column>
<c1-flex-grid-column binding="Phone"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Industry"></c1-flex-grid-column>
<c1-flex-grid-column binding="Birthdate"></c1-flex-grid-column>
<c1-items-source source-collection="Model"
                     create-action-url="@Url.Action("GridCreateUserInfo")"
                     delete-action-url="@Url.Action("GridDeleteUserInfo")"
                     update-action-url="@Url.Action("GridUpdateUserInfo")">
</c1-items-source>
</c1-flex-grid>

データ検証を正常に行うために以下のjQueryのスクリプトファイルが必要です。

jquery.js
jquery.validate.js
jquery.validate.unobtrusive.js

上記のファイルはwwwroot/jsフォルダ下のlibフォルダに配置されますので、別途追加する必要がありません。

アプリケーションを実行して/userInfoに移動します。

フィールドを編集して検証の動作を確認します。

f:id:ComponentOne_JP:20161111175910p:plain

MVC FlexGridでのデータ検証

jQueryの控えめなデータ検証は、FlexGridとMVCの入力コントロールでサポートされており、HTMLヘルパーとタグヘルパーの両方で利用可能です。控えめな検証機能はjQueryに依存しますが、コントロール自体は外部依存関係なしに使用できます。

＼この記事をシェアする／