jquery - jQuery Validator.showErrors MVC ViewModel ModelState

基本上，我无法显示从 Controller (WebApi)返回的模型状态错误。使用MVC4，jQuery和 knockout 。希望您能从下面看到我要实现的目标-预先感谢。

看法:-

<div class="editor-field">
        @Html.TextBoxFor(model => model.CostCode,
                new
                {
                    placeholder = "cost/budget code",
                    data_bind = "value: CostCode"
                })
    </div>
    <div>
        @Html.ValidationMessageFor(model => model.CostCode)
    </div>

删除 View 模型进行发布/提交:-

if (validator.valid())
    {
        console.log('is valid');
        $.ajax({
            url: '/api/Booking/CompleteBooking',
            type: 'POST',
            dataType: 'json',
            data: ko.mapping.toJS(self),
            error: function (jqXHR) {
                extractErrors(jqXHR, validator);
            },
            success: function (data) {
                console.log(data);
            }
        });
    }

function extractErrors(jqXhr, validator)
{
    var data = $.parseJSON(jqXhr.responseText),
    errors = { };

    $.each(data.ModelState, function (i, item) {
       errors[i] = item;
    });

    console.log(errors);
    validator.showErrors(errors);
}

Controller :-

 [ModelValidationFilter]
    public HttpResponseMessage CompleteBooking(AdditionalBookingInfoViewModel model)
    {
        return new HttpResponseMessage(HttpStatusCode.OK);

    }

ActionFilterAttribute(注意正在发送回的modelstate)

public class ModelValidationFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(HttpActionContext actionContext)
    {
        if (!actionContext.ModelState.IsValid)
        {
            actionContext.Response =
                actionContext.Request.CreateErrorResponse(HttpStatusCode.BadRequest, actionContext.ModelState);
        }
    }
}

呈现的标记:-



Firebug响应:-

现在，我知道验证器将尝试查找名称为'model.CostCode'的元素，不仅是标记中显示的'CostCode'，而且我尝试将Id和名称设置为'model.CostCode'以匹配但这没有任何区别。我认为我的extractErrors函数有问题。

如果我对错误消息进行硬编码，则验证程序可以正常工作

validator.showErrors({
    "CostCode" : "Test test test!"
 });

顺便说一句，这是显示服务器端验证消息的一种可接受的方式，还是我将所有这些都弄错了？任何指针/评论都非常欢迎，谢谢。

最佳答案

猜测一下，因为您没有向我们显示console.log(errors)的输出，所以您正在生成错误项的数组，但是在工作示例中，您仅具有一个键在字段名称上的哈希表。

{
    0: { 'model.CostCode': ['Please enter a valid cost code.'] }
}

与

{
    "CostCode" : "Test test test!"
}

因此，您的错误消息是一个数组，而工作示例不是。
因此，您需要更改您的extractErrors方法来解析数据，而不是仅将其复制过来:

for(var key in data.ModelState)
{
    errors[key.replace('model.', '')] = data.ModelState[key][0];
}

那有点小巧，但是它应该可以让您走上正确的道路!