c# - asp.net mvc + knockout : Showing validation result from server side logic

Question

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

没有 KnockOut.js 就很简单了:

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

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

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

更新 1:

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

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

3. 问题是:将我的错误列表绑定(bind)到 UI 元素的标准方法是什么？我是否需要迭代我的集合并将它们一一绑定(bind)？是否有任何插件可以将我的模型状态对象绑定(bind)到 ui？

(就像当您不使用 knockout 时，mvc 会处理它并将它们绑定(bind)到您的验证消息占位符。)

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. 创建 View 模型后，向其中添加错误:

    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();
                   });
               }
           });
   
       });
   };
   

这至少对我有效。希望对您有所帮助。