MVC Ajaxによるサーバー属性の検証

Question

MVCフォームからAjax投稿を行って検証エラーを表示したいと考えています。すべてのサーバー検証は正常に動作していますが、私がajax投稿を使用して投稿すると、検証エラーを表示するページを取得できません。私はstackoverflow上の他の答えを見てきましたが、彼らは回旋状に見え、この問題は何千回も解決されているに違いないと思われます。ここで

public class Card_TextViewModel:IValidatableObject 
     { 
      [Key] 
      [Required] 
      [StringLength(15, MinimumLength = 2)] 
      [Display(Name = "Product Code")] 
      [DataType(DataType.Text)] 
      public string Prod_Code { get; set; } 
      [Required] 
      [DataType(DataType.MultilineText)] 
      [Display(Name = "Page 1 Text")] 
      public string Page1Text { get; set; } 
      [Required] 
      [DataType(DataType.MultilineText)] 
      [Display(Name = "Inside Text")] 
      public string InsideText { get; set; } 
      [Display(Name = "User Name")] 
      [DataType(DataType.Text)] 
      public string UserName { get; set; } 
      [Display(Name = "Export Date")] 
      public DateTime? ExportDate { get; set; } 

      public IList<Card_Text> Card_Text { get; set; } 

      public IEnumerable<ValidationResult> Validate(ValidationContext validationContext) 
      { 
       if(!string.IsNullOrEmpty(Prod_Code)) 
       { 
        if(string.IsNullOrWhiteSpace(Prod_Code.Substring(0,1))) 
        { 
         yield return new ValidationResult("The product code cannot start with a space", new[] { "Prod_Code" }); 
        } 
       } 
      } 
     } 

は私のAPIコードです：ここで

は、私のC＃のサーバーサイドビューモデルである

 public async Task<ActionResult> CreateAddExtra([Bind(Include = "Prod_Code,Page1Text,InsideText")] Card_TextViewModel viewModel) 
     { 
      try 
      { 
       if (!Request.IsAjaxRequest()) 
        return Json(new { success = false, message = "Request ajax request only" }); 

       if (!ModelState.IsValid) 
        return Json(new { success = false, message = "Invalid data" }); 

       Card_Text card_Text = await db.Card_Text.FindAsync(viewModel.Prod_Code); 

       if (card_Text != null) 
        return Json(new { success = false, message = string.Format("The product code {0} already exists", viewModel.Prod_Code) }); 

       card_Text = Mapper.Map<Card_TextViewModel, Card_Text>(viewModel); 
       card_Text.UserName = User.Identity.Name; 

       db.Card_Text.Add(card_Text); 

       if (await db.SaveChangesAsync() == 0) 
        return Json(new { success = true, message = string.Format("Error creating product code {0}", viewModel.Prod_Code) }); 

       return Json(new { success = true }); 
      } 
      catch (Exception exp) 
      { 
      } 

      return Json(new { success = false }); 
     } 

上記すべて正常に動作していると何の問題は、ここに投稿javascriptのではありませんCreateAddExtra（）

(function() { 
     $(document).ready(function() { 
      var successCount = 0; 

      var addCreate = function() { 
       var url = "https://localhost:44393/Card_Text/CreateAddExtra"; 
       var data = $("#create").serialize(); 

       $.post(url, data) 
        .done(function (data, textStatus, jqXHR) { 
         if (data.success === true) { 
          successCount++; 
          $('#successCount').text(successCount); 

         } else { 
          $.validator.unobtrusive.parse(document); 

          /*would like the unobtrusive javascript to display any valide errors that occurred on the post back, which are store in MVC ModelState 
How do we activate unobtrusive javascript? 
*/ 
        } 
       }); 

      return false; 
     }; 

//just event for a button press 
     $("#add").click(addCreate); 
    }); 
})(); 

そして、ここでは、MVCのHTMLページのコードです：

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "create" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

    <hr /> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.Prod_Code) 
     @Html.EditorFor(model => model.Prod_Code, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.Prod_Code, "", new { @class = "text-danger" }) 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.Page1Text) 
     @Html.EditorFor(model => model.Page1Text, new { htmlAttributes = new { @class = "form-control", rows = 10, columns = 40 } }) 
     @Html.ValidationMessageFor(model => model.Page1Text, "", new { @class = "text-danger" }) 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.InsideText) 
     @Html.EditorFor(model => model.InsideText, new { htmlAttributes = new { @class = "form-control", rows = 10, columns = 40 } }) 
     @Html.ValidationMessageFor(model => model.InsideText, "", new { @class = "text-danger" }) 
    </div> 

    <div class="form-group"> 
     <input type="submit" value="Create" class="btn btn-primary" /> 
     <input type="submit" id="add" value="Add" class="btn btn-primary" /> 
     @Html.ActionLink("Back to List", "Index", "Card_Text", null, new { id = "recordCount", @class = "btn btn-default" }) 
    </div> 

    <div> 
     <span>Records added:</span> 
     <span id="successCount" class="text-danger">0</span> 
    </div> 
} 

ポストバックに致命的なエラーが発生した場合、どうやって控えめなjavascriptをアクティブにしてユーザーにエラーを表示できますか？お時間

Answer 1

ため

おかげで私は、Ajaxの呼び出しでモデル状態のエラーを処理するための簡単な手法を示し、このlinkからこのスニペットを得ました。

$(function() { 
    // hijax the form 
    $("form").submit(function (e) { 
     var $form = $(this); 
     var validator = $form.data("validator"); 

     if (!validator || !$form.valid()) 
      return; 

     e.preventDefault(); 

     $.ajax({ 
      url: "@Url.Action("index")", 
      type: "POST", 
      data: $form.serialize(), 
      statusCode: { 
       400: function(xhr, status, err) {       
        var errors = $.parseJSON(err); 
        validator.showErrors(errors); 
       } 
      }, 
      success: function() { 
       // just reload the page for now 
       location.reload(true); 
      } 
     }); 
    }); 

});