样品

Question

我是淘汰赛的新手。我想在我的ASP.NET MVC项目中使用它。但我不明白如何从服务器显示验证错误。

例如，我们有一个带登录名和密码输入的身份验证表单。我可以在客户端进行必要或长度验证。但是当我向服务器提交表单但未找到提交登录名或密码错误的用户时，我该怎么办？如何使用knockout.js显示服务器验证错误？

更新1

控制器代码例如，它将返回字典：项密钥，错误消息

[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

添加一个代表错误消息的属性到您的viewmodel并使其可观察。然后执行你的ajax请求来验证用户，当它完成后，你应该得到JSON格式的结果，你把它放在那个observable中。您还可以添加另一个属性来指示请求是否成功，并使用它来显示错误消息。

该模型可能如下所示：

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

使用visible绑定isError以在需要时显示错误消息。

样品

在下面的示例中，您将获得errors对象以及AJAX结果，并将其传递给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>

淘汰赛显示服务器验证错误

1 个答案:

样品