ノックアウトサーバーの検証エラーを表示

Question

私はノックアウトで新しいです。私はASP.NET MVCの私のプロジェクトでそれを使いたいです。しかし、私はサーバーから検証エラーを表示する方法を理解していません。

たとえば、ログインフォームとパスワードを入力する認証フォームがあります。クライアント側で必要な、または長さの検証。 しかし、フォームをサーバーに送信しても、サブミットされたログインが見つからない、またはパスワードが間違っているユーザーはどうしたらいいですか？ knockout.jsでサーバーの検証エラーを表示するにはどうすればよいですか？あなたのviewmodelにエラーメッセージを表し、それを行いますproperyを追加項目キー、エラーメッセージ

[HttpPost] 
public ActionResult MyAction(MyModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     ... 
    } 
    var errorList = ModelState.ToDictionary(
    kvp => kvp.Key, 
    kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).ToArray()); 
    return Json(errorList); 
} 

Answer 1

：

アップデート1

コントローラーのコード 例えば、それは辞書を返します。観察可能である。その後、ユーザーを認証するためのAjaxリクエストを行い、完了したら結果をJSON形式で取得し、その内容をそのobservableに入れます。また、リクエストが成功したかどうかを示す別のプロパティを追加して、エラーメッセージを表示させることもできます。

モデルは次のようになります。

var model = { 
    ... // your current properties 
    errorMsg : ko.observable(""), 
    isError: ko.observable(false) 
} 

使用visible必要なときに、エラーメッセージを表示するようにisErrorとの結合します。

次の例では

サンプル

あなたはAJAX結果とともに errorsオブジェクトを取得し、 setErrorsメソッドに渡します。 errorsの各メンバーは、フォームフィールドに対応しています。エラーメッセージは、プロパティが定義されている場合にのみ表示されます。これは異なります

var model = { 
 
    errors: { 
 
    user: ko.observable(), 
 
    email: ko.observable() 
 
    }, 
 
    setErrors: function(errors) { 
 
    this.errors.user(errors.user); 
 
    this.errors.email(errors.email); 
 
    } 
 
}; 
 

 
ko.applyBindings(model); 
 

 
// Get the results from AJAX and pass them as params: 
 
var ajaxResults = { 
 
    errors: { 
 
    user: "Username is not available", 
 
    email: "Incorrect email address" 
 
    } 
 
}; 
 

 
model.setErrors(ajaxResults.errors);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<form> 
 
    <input type="text" name="user"> 
 
    <span data-bind="visible: errors.user, text: errors.user"></span> 
 
    <br> 
 
    <input type="text" name="email"> 
 
    <span data-bind="visible: errors.email, text: errors.email"></span> 
 
</form>