通过 jquery ajax 在 Web Api 中显示无效的 ModelState

Question

我正在使用带有 Knockoutjs 的 Web Api。我正在尝试弄清楚如何将无效模型状态的详细信息返回给用户。

这是在 VB 中，我非常抱歉，这不是我的错！！！ （在我理解的 vb 中，请随意给我很多减分）

好的，我们开始

所以我在我的模型上放了一个必填字段。

 <Required>
    Public Property test() As String
        Get
            Return m_test
        End Get
        Set(value As String)
            m_test = value
        End Set
    End Property
    Private m_test As String

在控制器中我有我的保存功能。

<HttpPost>
    Public Async Function Save(data As Origin_SingleOvrUndr_main_rewrite_vm) As Task(Of IHttpActionResult)
        If ModelState.IsValid Then
            Await Origin_SingleOvrUndr_main_rewrite_vmRepository.SaveDataAsync(data)
            Return Ok()
        Else
            Return BadRequest(ModelState)
        End If
    End Function

在我的 html 页面上，我正在调用 save。

this.saveData = function () {
                var data = ko.toJSON(self);
                $.ajax({
                    url: "api/VMOriginSingleOvrUndrMainRewrite",
                    type: "POST",
                    data: data,
                    datatype: "json",
                    processData: false,
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        alert('save successfull');
                    },
                    error: function (xhr, status, error) { 
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message);

                    },
                });
            }

所以我故意在帖子中省略了必填字段，以查看响应是什么。所以响应是（通过按 F12 并查看 IE11 中的响应正文）

{"Message":"The request is invalid.","ModelState":{"data.test":["The test field is required."]}}

但是网页上的警报只是显示。消息（请求无效）。

如何，在 jquery ajax 错误部分中，我可以让警报显示有关测试字段的部分是必需的吗？ （以及其中可能包含的任何其他消息？）

Answer 1

您可以使用名为errors 的observableArray，显示在您的ko 视图上。

这是一个 sn-p，其中视图和模型对应于错误。它获取原始响应，提取错误，并在视图中显示它们：

<div class="errors" data-bind="foreach: errors">
   <div>
     <p data-bind="text:prop"></p>
     <ul data-bind="foreach: errors">
        <li data-bind="text: $data"></li>
     </ul>
   </div>
</div>

// see http://knockoutjs.com/documentation/observableArrays.html for info on removeAll
var vm = { errors: ko.observableArray([]) }


var r = {"Message":"The request is invalid.","ModelState":{"data.test":["The test field is required."]}};

vm.errors.removeAll();

for(p in r.ModelState) { 
  if (r.ModelState.hasOwnProperty(p)) { 
    vm.errors.push({prop: p, errors: r.ModelState[p]}); 
  }
}

ko.applyBindings(vm);

.errors {
  border: solid red 1px;
  border-radius: 10px 2px 2px;
  background-color: #FF8;
  color: #D10;
  padding: 10px;
  font-family: 'Segoe UI', 'Arial';
  }

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

<div class="errors" data-bind="foreach: errors">
   <div>
     <b>Errors for <!-- ko text: prop --><!-- /ko -->:</b>
     <ul data-bind="foreach: errors">
        <li data-bind="text: $data"></li>
     </ul>
   </div>
</div>