ASP.Net + jQuery + jQuery 유효성 검사 플러그인 + UpdatePanel + nyroModal - 각 필드에서 성공적으로 실행되었습니다!

StackOverflow https://stackoverflow.com/questions/850777

문제

사용자가 가격(숫자)으로 채우는 입력 필드 목록이 포함된 양식이 있습니다.jQuery 유효성 검사 플러그인이 그에 따라 유효성을 검사할 수 있도록 CSS 클래스를 "필수" 및 "번호"로 설정했습니다.모든 것이 완벽하게 잘 작동하고 있습니다.각 필드가 숫자가 아니거나 값이 누락된 경우 등의 경우 오류가 표시됩니다.

이 전체 양식은 실제로 nyroModal(jQuery 플러그인) 모델 팝업 창 안에 있습니다.하지만 그것은 중요하지 않습니다. 상관없이 단지 .aspx 웹 양식일 뿐입니다.내 양식은 본질적으로 2단계 프로세스이기 때문에 그 안에 UpdatePanel을 사용하고 모든 것을 그 안에 넣었습니다.사용자가 양식의 첫 번째 '페이지'에서 완료해야 하는 몇 가지 기본 단계가 있습니다.이것이 검증되고 작동하면 UpdatePanel 내의 일부 요소를 숨기거나 표시하여 사용자에게 양식의 다음 '페이지'를 표시합니다. 이는 위에서 설명한 가격 텍스트 상자 입력 필드입니다.

양식 유효성을 검사하기 위한 트리거 포인트로 ImageButton을 사용하고 있습니다.기본적으로 ImageButton을 그대로 두면 .Net은 포스트백을 실행합니다. 제 경우에는 AJAX 포스트백이 모두 UpdatePanel 내에서 발생하기 때문입니다.다시 한 번 원합니다.나는 명백한 이유로 보기 흉한 전체 포스트백을 원하지 않습니다.

많은 내용을 읽은 후에 jQuery가 양식의 유효성을 성공적으로 검사했는지 여부에 따라 .Net이 포스트백을 수행하려고 할 때 가로챌 수 있도록 javascript에서 .Net의 PageRequestManager에 연결하는 방법이 필요했습니다.그래서 내 논리는 다음과 같습니다.기본적으로 포스트백을 허용하지 않지만 jQuery가 양식의 유효성을 성공적으로 검사하면 이제 포스트백이 허용된다는 변수를 설정한 다음 다음에 포스트백이 발생하려고 시도하면 통과됩니다.따라서 사용자에게 성공을 표시합니다.

이것은 모두 합리적으로 잘 작동하지만 마지막 문제가 하나 있습니다.

전체 양식이 아닌 각 개별 필드에서 유효성 검사가 성공한 후 jQuery 유효성 검사 플러그인의 유효성 검사({success}) 옵션이 잘못 실행되는 것 같습니다.즉.가격 입력 필드 중 하나에 숫자를 입력하면 이 성공 옵션이 실행되고 cancelPostback 변수가 false로 설정됩니다. 이는 검증되지 않은 필드라도 이제 양식이 제출된다는 의미입니다. 유효한.전체 양식이 검증된 후에만 이 verify({success}) 옵션이 실행될 것으로 예상했습니다.

내가 이것을 잘못 해석한 걸까요? 실제로는 의도한 대로 수행되고 있습니까?그렇다면 어떻게 전체 양식이 검증된 경우에만 cancelPostback 변수를 true로 설정할 수 있습니까?

통찰력이나 알림을 보내주셔서 감사합니다.

유효성 검사를 구현하고 .Net 포스트백 이벤트를 가로채는 jQuery 코드는 다음과 같습니다.

<script type="text/javascript">
    // By default, don't allow Postback until we've successfully validated our form on the client-side.
    var cancelPostback=true;

    // Every single time the page loads, including every single AJAX partial postback
    function pageLoad()
    {
        // Reset the value to say that "We don't allow Postbacks at this stage"..
        cancelPostback=true;

        // Attach client-side validation to the main form
        $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } });

        // Grab a reference to the Page Request Manager
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(onEachRequest);

        alert("Page Load");
    }

    // Our own custom method to be attached to each new/future page request..
    function onEachRequest(sender, args)
    {
        alert("About to cancel? " + cancelPostback);
        // Check to see if we need to Cancel this Postback based on Conditional Logic within this page..
        args.set_cancel(cancelPostback);
    }
</script>
도움이 되었습니까?

해결책

잠수함 및 InvalidHandler 옵션을 살펴 보는 것이 좋습니다. 하나 또는 다른 하나는 당신이 원하는 것을 위해 일해야합니다. 가장 좋은 방법은 기본적으로 Postbacks를 허용하고 InvalidHandler에서 CancelPostBack을 True로 설정하는 것입니다. 또는 __dopostback을 직접 호출하는 자신의 잠수함을 작성하고 ImageButton을 통해 제출물을 대체 할 수 있습니다.

다른 팁

IE를 제외한 모든 브라우저가 jQuery Validator의 Submithandler () 함수 전에 "OneachRequest"기능을 발사하고 있었기 때문에 솔루션에 문제가있었습니다. 사전 설정 변수에 의존하지 않고 유효성 검사가 실패하면 Postback을 간단히 취소하는 더 우아한 솔루션을 생각해 냈습니다.

  Sys.Application.add_init(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(onEachRequest);
  }); 

  function onEachRequest(sender, args) {
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) {
      args.set_cancel(!$('#aspnetForm').valid());
    }
  }

신속한 도움을 주신 tvanfosson에게 감사드립니다.

알겠습니다 업데이트:

나는 점점 더 많은 링크를 따라갔고 결국 "성공"에 대한 문서를 찾았습니다.플러그인 자체 홈 페이지의 문서는 형편없으며 많은 주요 기능이 생략되어 있습니다. :) 그러나 공식 jQuery 페이지에서는 "더 좋습니다"."성공" 옵션은 개별 필드가 성공적으로 검증될 때마다 실행됩니다.그래서 그것은 의도적으로 작동하고 있었고 전체 양식이 유효할 때만 실행될 것이라고 잘못 가정하고 있었습니다.

나는 당신의 validHandler 아이디어를 시도했습니다.나는 이 아이디어를 좋아했다.내가 직면한 한 가지 문제는 ImageButton의 포스트백이 항상 먼저 실행되므로 validHandler 코드가 실행되기 전에 다시 게시되기 시작한다는 것입니다.따라서 포스트백은 계속 진행되고 그 이후에는validHandler가 향후 포스트백을 비활성화하여 불행하게도 잘못된 순서로 실행되었습니다.하지만 그 외에도 완벽한 솔루션이라는 다른 모든 징후를 보여주었습니다.

그런 다음 submitHandler 방식을 시도하는 다른 방법으로 갔다.그 반대.다시 말하지만, 포스트백이 다시 먼저 실행되지만 차단되고 submitHandler가 향후 포스트백을 허용하지만 이미 너무 늦어서 이 포스트백이 누락되었기 때문에 일부 순서 문제가 발생했습니다.이동하려면 버튼을 두 번 다시 클릭해야 합니다.

그래서 솔직하게 말하면 그다지 나쁘지 않은 최종 세미-클러지 솔루션은 다음과 같습니다.

이 줄을 다음과 같이 변경했습니다.// 클라이언트 측 확인 $ ( "#< %= form1.clientId %>")에 클라이언트 측 유효성 검사를 첨부하십시오.function() { PreventPostback = false;__doPostBack('UpdatePanel1', '');} });

보시다시피 먼저 PreventPostback 변수를 전환한 다음 수동으로 새 포스트백을 시작합니다. 첫 번째 포스트백이 이미 차단되어 사라졌기 때문입니다.따라서 이 수동 __doPostBack 호출은 PreventPostback의 새 값을 고려하여 새 포스트백이 시작되도록 합니다.

ImageButton 뒤에서 이벤트 메서드를 제거하고 페이지가 다시 게시될 때만 호출되는 "DoPostBackLogic()"이라는 서버 측 코드에 새 메서드를 만들었습니다. 이 메서드는 이 유효성 검사 논리에서 나온 것임에 틀림없습니다. 내 양식에서 발생할 수 있는 유일한 포스트백입니다.그러면 모든 숨기기/표시/저장 논리가 거기에서 발생합니다.즉, __doPostBack을 수동으로 호출할 때 간단히 UpdatePanel의 ID를 사용할 수 있으며 특정 ImageButton 등을 모방하는 것에 대해 걱정할 필요가 없습니다.

이렇게 하면 완벽하게 작동합니다.포스트백은 기본적으로 비활성화되어 있으며 양식이 유효하면 포스트백이 허용되지만 새 값이 적용되도록 포스트백이 수동으로 트리거됩니다.

따라서 이것은 본질적으로 두 번째 솔루션입니다. 경청하고 공유해 주셔서 다시 한 번 감사드립니다!:)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top