jQuery Validator.showErrors MVC ViewModel ModelState答案

【问题标题】：jQuery Validator.showErrors MVC ViewModel ModelStatejQuery Validator.showErrors MVC ViewModel ModelState
【发布时间】：2013-07-15 19:05:04
【问题描述】：

基本上，我无法显示从控制器 (WebApi) 返回的模型状态错误。使用 MVC4、jQuery 和淘汰赛。希望您能从下面看到我想要实现的目标 - 在此先感谢。

查看：-

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

进行发布/提交的淘汰视图模型：-

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

控制器：-

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

    }

ActionFilterAttribute（注意返回的模型状态）

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

渲染标记：-

萤火虫回应：-

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

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

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

顺便说一句，这是显示服务器端验证消息的一种可接受的方式，还是我用这一切来找错树？非常欢迎任何指针/cmets 谢谢。

【问题讨论】：

现在可以添加图片了。

标签： jquery validation asp.net-mvc-4 knockout.js modelstate

【解决方案1】：

猜测一下，由于您没有向我们展示 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];    
}

这有点老套，但它应该能让你走上正确的道路！

【讨论】：