2013-07-17 48 views
6

基本上我無法顯示從控制器(WebApi)返回的模型狀態錯誤。使用MVC4,jQuery和淘汰賽。希望你能從下面看到我正在努力實現的目標 - 事先感謝。jQuery Validator.showErrors MVC ViewModel ModelState

查看: -

<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(注意ModelState中被送回)

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

呈現的標記: -

enter image description here

螢火蟲回答: -

enter image description here

現在,我知道了驗證器就會嘗試找到名爲 'model.CostCode' 元素而不僅僅是'CostCode',因爲它出現在標記中,但我已經嘗試將Id &名稱設置爲'model.CostCode'以匹配,但它沒有任何區別。我認爲我的extractErrors函數有問題。

如果我硬編碼的錯誤消息的驗證工作正常

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

enter image description here

順便說一句,這是顯示服務器端驗證消息的一種可接受的方式還是我找錯了樹所有這些?任何指針/評論非常歡迎,謝謝。

+0

現在你可以添加圖像。 – nemesv

回答

4

由於您沒有向我們顯示console.log(錯誤)的輸出,因此您正在生成一個錯誤項的數組,但在工作示例中,您只是擁有一個哈希表字段名稱。

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

VS

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

所以你的錯誤信息是一個數組,而工作的例子並不。 所以,你需要改變你的extractErrors方法分析數據,而不僅僅是複製過來:

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

這是一個小哈克,但它應該讓你在正確的道路上!

+0

謝謝保羅 - 那真棒,就像一個魅力。 – renz