通过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页面上，我正在调用保存。

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

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

这是与错误对应的视图和模型的代码片段。 它采用原始响应，提取错误，并在视图中显示它们：

<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>