WebApiを使用したクライアント側の検証

Question

WebApiを介して返されるオブジェクトに対してクライアント側の検証を実行しようとしています。私はエンティティ編集画面にwebapiを介してエンティティを送信します。私はノックアウトを使用してオブジェクトをフィールドにバインドします。

私はすでにすべてのサーバー側の検証を処理するアクションフィルターを持っています。 ドメインモデルのデータアノテーションを複製しなくても、クライアント側の検証をどのように組み込むことができますか？

Answer 1

私はHTTP APIを作成するときに、モデルオブジェクト（DTO、リクエストモデルなど）を.NETクライアント用に配布できる別のアセンブリに配置します。

は、次のクラスを考えてみましょう：

public abstract class UserUpdateRequestModel { 

    [Required] 
    [StringLength(50)] 
    public string Name { get; set; } 

    [Required] 
    [EmailAddress] 
    [StringLength(320)] 
    public string Email { get; set; } 
} 

これは私が私のAPIで使用するものです。

public UserDto PutUser(Guid key, UserUpdateRequestModel requestModel) { 

    // Do something here 
} 

あなたが生成するために、例えば、あなたのASP.NET MVCのクライアントアプリケーションでこの同じモデルを使用することができますASP.NET MVCとしての属性data-の属性を持つHTML入力は、データアノテーションの検証属性に基づいたものを生成する方法を持っています。

Answer 2

WebApiでは、モデル検証の失敗からクライアント側のバリデーターに戻ってくるエラーを接続するための小さな「グルー」コードが必要です。

モデルに

function extractErrors(jqXhr, validator) { 
    var data = JSON.parse(jqXhr.responseText), // parse the response into a JavaScript object 
     errors = {}; 

    $.each(data.ModelState, function (key, value) { 
     var pieces = key.split('.'); 
     key = pieces[pieces.length - 1]; 
     errors[key] = value 
    }); 

    validator.showErrors(errors); // show the errors using the validator object 
} 

、いつものように注釈を付ける：ビューで

[Required] 
[Display(Name = "Group Name")] 
public string Name { get; set; } 

を、ValidationMessageForタグを追加します。

@Html.EditorFor(m => m.Name) 
@Html.ValidationMessageFor(m => m.Name)