MVC5 Partial View с Ajax.Beginform ClientSide Validation не работает

Question

Таким образом, я провел последние 3 дня, прочитав и искал решение этой проблемы и не нашел ее. Поэтому я обращаюсь за помощью.

Ive получил довольно сложный вид, который имеет несколько частичных представлений, но концепция проста. Я нажимаю ссылку на «create» и открывает загрузочный модуль Modal, который заполняется частичным представлением. В этом частичном представлении я использую ajax.beginForm для публикации. Однако проверка на стороне клиента не работает. Кроме того, когда сервер отвечает с параметром modelstate.isvalid как false, сводка валидации также не отображается. Вот код ...

Это мой частичный вид, который загружается в модальных

@using (Ajax.BeginForm("CreateBox", 
           new AjaxOptions 
           { 
            HttpMethod = "post", 
            InsertionMode = InsertionMode.Replace, 
            UpdateTargetId = "myCellarLocations", 
            OnBegin="ValidateForm", 
            OnSuccess = "CloseBoxModal" 
           })) 
{ 
@Html.AntiForgeryToken() 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Create Box</h4> 
    </div> 
    <div class="modal-body"> 
     <div class="form-horizontal"> 
      @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
      @Html.HiddenFor(a => a.CellarLocationId) 
      <div class="form-group"> 
       @Html.LabelFor(model => model.DisplayValue, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-7"> 
        @Html.EditorFor(model => model.DisplayValue, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.DisplayValue, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <input type="submit" value="Create" class="btn btn-default" /> 
    </div> 

}

Вот мой код контроллера

[HttpGet] 
    [Route("Cellar/CreateBox/{Id?}")] 
    public ActionResult CreateBox(int id) 
    { 
     CreateBoxViewModel model = new CreateBoxViewModel(); 
     model.CellarLocationId = id; 

     return PartialView("_CreateBox", model); 
    } 

    [HttpPost] 
    [ValidateAntiForgeryToken] 
    [Route("Cellar/CreateBox/{Id?}")] 
    public ActionResult CreateBox(CreateBoxViewModel viewModel) 
    { 
     if (ModelState.IsValid) 
     { 
      var userId = User.Identity.GetUserId(); 

      //Create Box 
      Box box = new Box(); 
      box.CellarLocationId = viewModel.CellarLocationId; 
      box.DisplayValue = viewModel.DisplayValue; 
      vd.CreateBox(box); 

      //Get Cellar Locations 
      List<CellarLocation> model = vd.GetCellarLocationsByUserId(userId).ToList(); 
      return PartialView("_CellarLocations", model); 
     } 

     Response.StatusCode = (int)HttpStatusCode.BadRequest; 
     return PartialView("_CreateBox", viewModel); 

    } 

Вот скрипты на основной вид

function CloseBoxModal(data) { 
     alert("close"); 
     $("form").removeData("validator"); 
     $("form").removeData("unobtrusiveValidation"); 
     $.validator.unobtrusive.parse("form"); 
     $('#Box').modal('hide'); 
    } 



    function ValidateForm() { 
     alert("here"); 
     return $.validator.unobtrusive.parse($('form')); 
    } 

Мой WebConfig уже

<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

и у меня есть следующие в моих пучках включены

bundles.Add(new ScriptBundle("~/bundles/cbt").Include(
       "~/Scripts/jquery-{version}.js", 
       "~/Scripts/jquery-ui-{version}.js", 
       "~/Scripts/jquery.validate*", 
       "~/Scripts/jquery.unobtrusive*", 
       "~/scripts/custom-validators.js")); 

Может кто-то пожалуйста, скажите мне, что я делаю неправильно. Должен быть более простой и понятный способ проверки на стороне клиента в частичной форме просмотра и отображения ошибок проверки.

Answer 1

Так что я нашел ответ. Вам необходимо удалить данные и вызвать синтаксический анализ на валидаторе после загрузки содержимого в модальный.

function CreateBox(id) { 
     var url = "/Cellar/CreateBox"; // the url to the controller 
     $.get(url + '/' + id, function (data) { 
      $('#box-modal-content').html(data); 
      $('#Box').modal('show'); 
      $('#createBoxForm').removeData("validator"); 
      $('#createBoxForm').removeData("unobtrusiveValidation"); 
      $.validator.unobtrusive.parse('#createBoxForm'); 

     }); 
    }