MVC 3, (dao cạo) tải một phần với xác nhận

Question

Xin chào, tôi đang giả mạo thuật sĩ ajax với MVC 3 (dao cạo). Một điều kỳ lạ tôi nhận thấy là khi bạn trả lại một phần khung nhìn để UpdateTargetId cắm khung nhìn vào nhưng không thêm/áp dụng JavaScript không phô trương. Nếu tôi tải chế độ xem một phần bên ngoài khối ajax, ví dụ:

@Html.Partial("Company") 

Nó hoạt động hoàn hảo vì vậy tôi không thiếu bất kỳ thư viện chuẩn nào và Cấu hình web của tôi hoàn toàn tốt.

Vì vậy, tại thời điểm này tôi chút bối rối.

Quan điểm của tôi là như sau:

@using(Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea" })){ 

    <div id="stepArea"></div> 
    <input id="btnSubmit" type="submit" value="submit" /> 
} 

Bộ điều khiển:

public ActionResult Step(FormCollection formCollection) 
{ 
    if (this.Request.IsAjaxRequest()) 
    { 
     switch ((TempData["step"] as string)) 
     { 
      case "Company": 
       TempData["step"] = "Person"; 
       return PartialView("Company"); 

      case "Person": 
       TempData["step"] = "Pay"; 
       return PartialView("Person"); 

      case "Settlement": 
       return PartialView("Pay"); 

      default: 
       TempData["step"] = "Company"; 
       return PartialView("UserType"); 
     } 
    } 
    return View(); 
} 

Câu hỏi của tôi là có thể xác nhận từ giao diện phần được initalised/thực hiện từ làm mới một phần?

Answer 1

Sau khi đọc một vài diễn đàn và thực hiện một số thử nghiệm. mảnh cuối cùng của câu đố, khiến xác thực hoạt động sau khi trả lại một phần xem. jquery.validate.unobtrusive not working with dynamic injected elements

<script type="text/javascript"> 

    function validateAjaxForm() { 
     $("form").removeData("validator"); 
     $("form").removeData("unobtrusiveValidation"); 
     $.validator.unobtrusive.parse("form"); 
     return $('#form').valid(); 
    } 
</script> 


@{ Html.EnableClientValidation(true); } 
@using (Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea", OnBegin = "return validateAjaxForm();" }, new { id = "form" })) 
{ 
    <div id="stepArea"></div> 
    <input id="btnSubmit" type="submit" value="submit" /> 
} 

hoạt động hoàn hảo.

Answer 2

Thử khởi tạo FormContext nếu nó rỗng trong chế độ xem của bạn. Điều này sẽ thêm các thuộc tính "dữ liệu-val- *" xác thực không phô trương vào các điều khiển được tạo

@{ 
    if (Html.ViewContext.FormContext == null) 
    { 
     Html.ViewContext.FormContext = new FormContext(); 
    } 
} 

Answer 3

Có một vấn đề lớn với giải pháp Nickz, khiến tôi kéo tóc ra cho đến khi tôi tìm được cách giải quyết khác.

// forces creation of a new validator, which in turn causes 
    // an extra submit event handler to be attached!!! 
    $("form").removeData("validator"); 
    $("form").removeData("unobtrusiveValidation"); 
    $.validator.unobtrusive.parse("form"); 

Khi bạn làm điều đó, mỗi khi bạn gọi $.validator.unobtrusive.parse(), một xử lý sự kiện mới sẽ được gắn liền với trình sự kiện của hình thức, trong khi để xử lý sự kiện cũ còn nguyên vẹn. Điều này có nghĩa là khi bạn chạy mã trên nhiều lần, trình xác thực sẽ chạy không cần thiết nhiều lần khi sự kiện gửi được kích hoạt. Điều này gây ra vấn đề hiệu suất nghiêm trọng đối với tôi. Vì vậy, tôi đã kết thúc viết một lựa chọn tùy chỉnh để phương pháp parse() mà tôi đặt tên updateParse:

$.extend($.validator.unobtrusive, { 
    updateParse: function (selector) { 
     /// <summary> 
     /// Custom alternative for the built in method $.validator.unobtrusive.parse() which can updates an existing validator. 
     /// Use this only when a validator has not yet been initialized, i.e. when $.validator.unobtrusive.parse() 
     /// has not yet been called before. 
     /// This is intended for use after you dynamically add/remove/modify validatable elements to a form via AJAX. 
     /// Parses all the HTML elements in the specified selector. It looks for input elements decorated 
     /// with the [data-val=true] attribute value and enables validation according to the data-val-* 
     /// attribute values. 
     /// </summary> 
     /// <param name="selector" type="String">Any valid jQuery selector.</param> 
     var $forms = $(selector) 
      .parents("form") 
      .andSelf() 
      .add($(selector).find("form")) 
      .filter("form"); 

     $(selector).find(":input[data-val=true]").each(function() { 
      $.validator.unobtrusive.parseElement(this, true); 
     }); 

     $forms.each(function() { 
      var form = $(this); 
      var info = form.data("unobtrusiveValidation"); 
      if (info) { 
       var validator = form.data("validator"); 
       if (validator) { 
        validator.settings.rules = info.options.rules; 
       } 
       else { 
        throw "validator not yet initialized for this form yet -- use $.validator.unobtrusive.parse() instead"; 
       } 
      } 
     }); 
    } 

này sẽ cập nhật các quy tắc xác nhận của đối tượng validator hiện có, thay vì buộc việc tạo ra một validator mới trong khi thêm một phụ nộp xử lý sự kiện. Trong tùy chọn của tôi, phương pháp parse() chỉ hoạt động khi trình xác thực đã tồn tại.