Jquery post e non invadente convalida Ajax non funziona mvc 4

Question

Sul postback jQuery se lo stato del modello non è valido Voglio mostrare i messaggi di errore di convalida utilizzando jquery validazione non invadente. Ho creato un'applicazione di esempio. Il ViewModel nell'applicazione è come qui sotto

public class CityModel 
{ 
    public int Id { get; set; } 

    [Display(Name = "City")] 
    [Required(ErrorMessage = "City is required")] 
    public string City { get; set; } 
} 

e il controller ha i seguenti metodi di azione

public ActionResult City() 
    { 
     var cities = GetCities(); 

     return View(cities); 
    } 

    [HttpPost] 
    public ActionResult SaveCity(CityModel cityModel) 
    { 
     if (ModelState.IsValid) 
     { 
      //Save City 
      return null; 
     } 
     else 
     { 
      return View(); 
     } 
    } 

public List<CityModel> GetCities() 
    { 
     var citiesList = new List<CityModel> 
     { 
      new CityModel() {Id = 1, City = "London"}, 
      new CityModel() {Id = 2, City = "New York"} 
     }; 
     return citiesList; 
    } 

I punti di vista hanno le seguenti ricarichi

@model List<CityModel> 
<h2>Cities</h2> 

@Html.ValidationSummary(true) 
@using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "frmSite", name = "frmSite" })) 
{ 
@Html.EditorForModel() 

<input type="submit" name="Sumbit" onclick=" SaveCity(); return false; " /> 
} 

<script> 
function SaveCity() {  
    $.ajax({ 
     type: "POST", 
     url: "/Home/SaveCity", 
     contentType: "application/html; charset=utf-8", 
     data: { 
      Id: $('.cityId').val(), 
      City: $('.cityName').val() 
     }, 
     success: function (data) { 
     } 

    }); 
} 
</script> 

E l'editor modello si presenta come

@model CityModel 
<table class="table"> 
    <tr> 
     <td> 
      @Html.TextBoxFor(x => x.Id, new {@class = "cityId"}) 
     </td> 
    </tr> 
    <tr> 
     <td> 
      @Html.TextBoxFor(x => x.City, null, new {@class = "cityName"}) 
      @Html.ValidationMessageFor(x => x.City) 
     </td> 
    </tr> 
</table> 

Ho controllato il <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> sono inclusi nella pagina e <add key="UnobtrusiveJavaScriptEnabled" value="true" /> è presente nel file di configurazione Web

Answer 1

Si sta chiamando tuo post tramite la tecnologia AJAX per cui sarà necessario chiamare manualmente $form.validate(); e testare il risultato con $form.valid():

Se è puramente lato client, gli errori saranno contenuti all'interno dell'oggetto di validazione jquery $form.validate().errorList ma sarà necessario eseguire alcune elaborazioni manuali simili a quelle che menzionerò di seguito.

Se si desidera restituire lo stato del modello sul lato server, è possibile aggiungere gli errori di stato del modello come coppia di valori chiave nel controller e restituirli come json.

È possibile utilizzare il seguente metodo per visualizzare i messaggi.

Questo trova tutti i messaggi di convalida con le chiavi di errore dello stato del modello e aggiunge loro il messaggio di errore rosso. Si prega di notare che si potrebbe voler adattare questo per visualizzare molti messaggi di errore contro una chiave.

public doValidation(e) 
{ 
     if (e.data != null) { 
      $.each(e.data, function (key, value) { 
       $errorSpan = $("span[data-valmsg-for='" + key + "']"); 
       $errorSpan.html("<span style='color:red'>" + value + "</span>"); 
       $errorSpan.show(); 
      }); 
     } 
} 

Aggiornato

Ecco l'sopra adattata in modo da poter analizzare manualmente dalla jQuery errori discreti invece:

 $.each($form.validate().errorList, function (key, value) { 
      $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']"); 
      $errorSpan.html("<span style='color:red'>" + value.message + "</span>"); 
      $errorSpan.show(); 
     }); 

semplicemente pop che in una dichiarazione d'altro e si sono buoni andare. :)