JQuery post и ненавязчивая проверка ajax не работает mvc 4

Question

О возврате jquery, если состояние модели недействительно Я хочу показать сообщения об ошибках проверки, используя jquery unobtrusive validation. Я создал образец приложения. ViewModel в приложении, как показано ниже

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

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

и контроллер имеет следующие методы действий

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

Взгляды имеют следующие окна знак

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

И редактор шаблонов выглядит как

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

Я проверил <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> включены в страницу и <add key="UnobtrusiveJavaScriptEnabled" value="true" /> присутствует в файле веб-конфигурации

Answer 1

Вы вызываете свой пост через AJAX, так что вам нужно будет вручную вызвать $form.validate(); и проверить результат с $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) { 
      } 

     }); 

    } 
} 

Если это чисто клиентская сторона, ошибки будут содержаться в объекте проверки jQuery $form.validate().errorList, но вам придется выполнить ручную обработку, аналогичную тому, о чем я упоминал ниже.

Если вы хотите вернуть состояние модели на стороне сервера, вы можете добавить ошибки состояния модели в качестве пары ключевых значений в своем контроллере и вернуть их как json.

Вы можете использовать приведенный ниже метод для отображения сообщений.

Это находит все строки сообщения проверки достоверности с ключами состояния модели и добавляет к ним красное сообщение об ошибке. Обратите внимание, что вы можете настроить это, чтобы отображать много сообщений об ошибках против ключа.

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

Обновлено

Здесь выше адаптировано так что вы можете разобрать его вручную из Jquery ненавязчивых ошибок вместо:

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

Просто поп, что в заявлении еще и вы хорошо идти. :)