Проблема проверки в частичном представлении добавлена ​​с помощью jquery ajax

Question

Я прочитал много сообщений, но не смог решить мою проблему.

У меня есть представление, которое имеет кнопку добавления на свой клик. Я показываю частичный вид, что частичный вид имеет форму для добавления записей, которые не проверяют клиентскую сторону. Я использую проверку jquery, и я добавил файлы js в основном представлении, в котором открывается частичный вид.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 

Мой Вид:

<div id="Div1"> 
    <a id="lnkAdd"> 
     <div>Add</div> 
    </a> 
</div> 

$("#lnkAdd").click(function() { 
     $.ajax({ 
      url: '@Url.Action("MethodName", "ControllerName")', 
     type: "POST", 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(xhr.status); 
       alert(thrownError); 
      } 
    }).done(function() { 
    }).success(function (dv) { 
     $("#Div1").html(dv); 
    }) 
    }); 

Контроллер:

[Authorize] 
    public PartialViewResult MethodName() 
    { 
     return PartialView("_PartialViewName"); 
    } 

Parital Вид:

<div id="UsersDiv"> 

<div class="grid-background" style="border: 1px solid #8dc2f5;"> 

    @using (Html.BeginForm("AddRecord", "ControllerName")) 
    { 
     <div class="form-bg" style="border: 0px; margin-top: 0px; width: 966px;"> 
    <div class="form-field-bg"> 
     @Html.LabelFor(m => m.FirstName) 
     @Html.TextBoxFor(m => m.FirstName, new { @class = "label-class" }) 
     @Html.ValidationMessageFor(m => m.FirstName, "", new { @class = "validation-class" }) 
    </div> 

    <input type="submit" value="Save" id="btnSaveUsers" name="AddRecord" class="signup-button" /> 
    } 

Answer 1

Валидаторы подключаются только при инициировании события document.ready, для динамического содержимого их необходимо вручную активировать.

Изменение обработчика успеха этого:

.success(function (dv) { 
    $("#Div1").html(dv); 

    $("form").data("validator", null); 
    $.validator.unobtrusive.parse($("form")); 
}) 

Answer 2

Вы можете проверить модель на стороне сервера и добавлять ошибки на стороне клиента

public PartialViewResult _CreateSupplier() 
     { 
      return PartialView(new Supplier()); 
     } 

    [HttpPost] 
    public JsonResult _CreateSupplier(Supplier model) 
    { 
    //Validation 
    return Json(new 
        { 
         status = transactionStatus, 
         modelState = ModelState.GetModelErorrs() 
        }, JsonRequestBehavior.AllowGet); 
    } 

Форма пост метод JQuery

$('#create-supplier').submit(function (e) { 
    e.preventDefault(); 
    var $form = $(this); 
    if (!ModelIsValid($form)) 
     return; 
    AjaxPost($form.serialize(), '@Url.Action("_CreateSupplier")', function (result) { 
     if (result.status == 0) { 
      $form[0].reset(); 
      //Success 
      var grid = $("#gridSupplier").data("kendoGrid"); 
      grid.dataSource.read(); 
     } else if (result.status == 1) 
      AddFormErrors($form, result); 
     else if (result.status == 2) 
      //error; 
    }); 
}); 

Checking метод модели действителен и если недопустимое добавление ошибок в форму

function ModelIsValid(form) { 
    var validator = $(form).validate(); // obtain validator 
    var anyError = false; 
    form.find("input").each(function() { 
     if (!validator.element(this)) { // validate every input element inside this step 
      anyError = true; 
     } 
    }); 

    if (anyError) 
     return false; // exit if any error found  
    return true; 
} 

function AddFormErrors(form, errors) { 
    for (var i = 0; i < errors.modelState.length; i++) { 
     for (var j = 0; j < errors.modelState[i].errors.length; j++) { 
      var val = $(form).find("[data-valmsg-for='" + errors.modelState[i].key + "']"); 
      if (val.html().length > 0) { 
       $(form).find("[for='" + errors.modelState[i].key + "']").html(errors.modelState[i].errors[j]); 
      } else { 
       val.html('<span for="' + errors.modelState[i].key + '" generated="true" class="" style="">' + errors.modelState[i].errors[j] + '</span>'); 
      } 
     } 
    } 
} 

Ajax пост метод:

function AjaxPost(postData, url, callback) { 
    $.ajax({ 
     url: url, 
     type: 'POST', 
     data: postData, 
     dataType: 'json', 
     success: function (result) { 
      if (callback) callback(result); 
     } 
    }); 
} 

И последнее C# метод расширения, который проверяет возвращает модель ошибки состояния

public static IEnumerable<object> GetModelErorrs(this ModelStateDictionary modelState) 
     { 
      return modelState.Keys.Where(x => modelState[x].Errors.Count > 0) 
       .Select(x => new { 
       key = x, 
       errors = modelState[x].Errors.Select(y => y.ErrorMessage).ToArray() 
       }); 
     } 

Answer 3

Вы включили файл JQuery?

<script src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")" type="text/javascript"></script> 

Answer 4

Я установил добавление кода ниже после оказания частичной

@Scripts.Render("~/bundles/jqueryval")