Jquery post i dyskretna walidacja ajaxów nie działa mvc 4

Question

Odwołanie jquery jeśli stan modelu jest niepoprawny Chcę pokazać komunikat o błędzie walidacji za pomocą dyskretnego sprawdzania jquery. Stworzyłem przykładową aplikację. ViewModel w aplikacji jest jak poniżej

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

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

a kontroler posiada następujące metody działania

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

Widoki mają następujące narzuty

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

A redaktor szablon wygląda jak

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

Sprawdziłem <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> są zawarte na stronie oraz <add key="UnobtrusiveJavaScriptEnabled" value="true" /> jest obecny w pliku web config

Answer 1

Telefonujesz swój post za pośrednictwem AJAX więc trzeba będzie ręcznie wywołać $form.validate(); i sprawdzić wynik z $form.valid():

function SaveCity() { 

    $.validator.unobtrusive.parse($form); 
     $form.validate(); 
     if ($form.valid()) { 

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

     }); 

    } 
} 

Jeśli strona jest czysto po stronie klienta, błędy będą zawarte w obiekcie walidacji jquery $form.validate().errorList, ale będziesz musiał wykonać ręczne przetwarzanie podobne do tego, o czym wspomnę poniżej.

Jeśli chcesz przywrócić stan modelu po stronie serwera, możesz dodać błędy stanu modelu jako parę wartości klucza w kontrolerze i zwrócić je jako json.

Możesz użyć poniższej metody, aby wyświetlić komunikaty.

Spowoduje to wyszukanie wszystkich komunikatów sprawdzania poprawności za pomocą kluczy błędów stanu modelu i dodanie do nich czerwonego komunikatu o błędzie. Pamiętaj, że możesz dostosować to, aby wyświetlać wiele komunikatów o błędach w odniesieniu do klucza.

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

Updated

Oto powyżej dostosowany więc można go analizować ręcznie z jQuery dyskretne błędów zamiast:

 $.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(); 
     }); 

Wystarczy włożyć że w oświadczeniu innego i jesteś dobry iść. :)