jQuery Validator.showErrors MVC ViewModel ModelState

Question

Fondamentalmente sto riscontrando problemi con gli errori di stato del modello restituiti dal controller (WebApi). Utilizzo di MVC4, jQuery e knockout. Spero che tu possa vedere quello che sto cercando di ottenere dal sotto - grazie in anticipo.

Vista: -

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

ko viewmodel fare il/inviare posta: -

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 (notare il ModelState essere rimandato)

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

markup resa: -

Firebug risposta: -

Ora, so che il validatore cercherà di trovare un elemento con il nome 'model.CostCode' non solo "CostCode" come appare nel markup, ma ho provato a impostare il nome dell'id & in "model.CostCode" per farlo corrispondere, ma non fa alcuna differenza. Penso che ci sia un problema con la mia funzione extractErrors.

Se io hardcode un messaggio di errore del validatore funziona bene

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

A proposito, questo è un modo accettabile di mostrare messaggi di convalida lato server o sono io ad abbaiare contro l'albero sbagliato con tutto questo? Qualsiasi suggerimento/commento molto benvenuto grazie.

Answer 1

Ad una ipotesi, poiché non ci hai mostrato l'output da console.log (errori), stai producendo un array di elementi di errore, ma nell'esempio di lavoro, hai appena un hashtable che è digitato su il nome del campo.

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

vs

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

Così il vostro messaggio di errore è un array, mentre l'esempio di lavoro non è. quindi è necessario cambiare il metodo di extractErrors per analizzare i dati, piuttosto che semplicemente copiando sopra:

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

Questo è un po 'hacky, ma dovrebbe arrivare sulla strada giusta!