asp.net mvc + knockout：显示服务器端逻辑的验证结果

Question

我想将验证结果从服务器传递到客户端并显示消息。

没有KnockOut.js就很简单了：

1. 调用验证逻辑。
2. 将验证结果添加到 ModelState。
3. 每件事都是自动挂钩的。 (Html.ValidationMessageFor)

使用 KnockOut 时应该怎么做？这里的最佳做法是什么？

我需要用我的 ViewModel 返回我的 ModelState 吗？如果是，我应该如何将它绑定到我的 ValidationMessage 占位符？有什么插件可以用吗？

更新 1：

1. 我知道如何使用客户端验证库（Ko 验证、jQuery 验证）这不是我的问题。

2. 我知道如何使用 Ajax 将模型状态返回给客户端。

3. 问题是：将错误列表绑定到 UI 元素的标准方法是什么？我需要迭代我的集合并一一绑定吗？有没有可以将我的模型状态对象绑定到ui的插件？

（就像您不使用敲除时一样，mvc 会处理它并将它们绑定到您的验证消息占位符。）

Answer 1

我也遇到了同样的问题。首先，我尝试实施此解决方案 (https://datatellblog.wordpress.com/2015/06/26/client-and-server-validation-with-web-api-and-knockout/)，但没有成功。

我的最终解决方案是这样的：

1. 将 ModelState 转换为 JS 数组：

   var modelState = null;
   modelState = @Html.Raw(Json.Encode(ViewData.ModelState.Where(k => k.Value.Errors.Any()).Select(t => new { Key = t.Key, Value = t.Value.Errors.Select(e => e.ErrorMessage) })));
   
   function getModelState() {
       return modelState;
   }
   

2. 创建视图模型后，将错误添加到其中：

    self.addErrors = function (data, modelState) {
       $(data).each(function (dataIndex, dataItem) {
           var itemModelState = $(modelState).filter(function (filterIndex) { return stringStartsWith(modelState[filterIndex].Key, "Addresses[" + dataIndex + "]") });
   
           $(itemModelState).each(function (index, item) {
               var field = item.Key.split(".")[1];
               if (field === "NumberOfPositions") {
                   $(item.Value).each(function (valueIndex, valueItem) {
                       var name = item.Key.replace("[", "\\[").replace("]", "\\]").replace(".", "\\.") + "_Error";
                       $("#" + name).text(valueItem);
                       $("#" + name).removeClass("field-validation-valid").addClass("field-validation-error").show();
                   });
               }
           });
   
       });
   };
   

这至少在我的情况下有效。希望对您有所帮助。