버튼 - JavaScript 함수가 true를 반환하는 경우에만 포스트 백 수행

Question

ASP.NET에 버튼이 있습니다. 사용자가 버튼을 클릭 할 때 미리 검증을하고 싶기 때문에 유효성 검증 메소드가 true를 리턴 할 경우에만 포스트 백이 발생합니다.

내 생각은 단추의 OnClientClick 논리를 사용하는 것이 었습니다. OnClientClick = "return false;"라고 말하면 true를 반환하는 동안 다시 게시하지 않습니다. 그러나 jQuery 메서드가 반환하는 경우에도 포스트 백을 생성하지 않으므로 작동하지 않습니다.

현재 내가 가진 :

마크 업 :

<asp:Button runat="server" ID="ReplyBtn" OnClientClick="return ValidateInput();" OnClick="ReplyBtn_Click" CssClass="btn-large btn-success" 
    Text="Answer" /> 

자바 스크립트 : 그러니까 기본적으로

function ValidateInput() { 
     var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim(); 
     var options = { 
      type: "POST", 
      url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback", 
      data: '{"content":"' + value + '"}', 
      async: false, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult); 

       if (msg.ReplyToPostFeedbackResult) { 
        return false; 
       } else { 
        return true; 
       } 

      }, 
      error: function() { 
       return true; 
      } 
     }; 
     $.ajax(options); 
     return false; 
    } 

    function stripHtml(str) { 
     return $('<div />', { html: str }).text(); 
    } 

,이 코드 문제점은 무엇입니까? 다시 게시하기 전에 단추에 대한 유효성 검사를 수행하려면 어떻게해야합니까?

Answer 1

ajax 객체의 응답을 사용하고 있지 않으므로 함수가 무조건 false을 반환합니다. 예를 들어 유효성 검사가 성공하면 서버 측 스크립트가 "OK"텍스트를 반환한다고 가정합니다. 당신은 이런 식으로 뭔가를 시도 할 수 :

function ValidateInput() { 
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim(); 
    var options = { 
     type: "POST", 
     url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback", 
     data: '{"content":"' + value + '"}', 
     async: false, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult); 
     } 
    }; 
    var resp = $.ajax(options); 
    return (resp.status==200 && resp.responseText == "OK"); 
} 

이상적를, 당신은 무조건 성공 처리기에서 다시 게시 자신을 false를 반환하고, 트리거되어 어떻게 할 것인지.

Answer 2

당신이 묻는 것에 100 %가 아니지만 Ajax 요청에서 true를 반환한다고 기대할 때도 함수가 항상 false를 반환한다는 것이 문제라고 생각하십니까?

위에서 언급했듯이 비동기를 실행하는 ajax가 작동하지 않게되지만 async를 false로 설정하는 것처럼 보입니다.

문제는 귀하의 반품입니다.

return true; ajax 함수 내부는 전체 함수가 아니라 ajax 호출의 성공 함수에서 반환됩니다.

내가하는 일을 성취하기위한 최선의 방법이라고 생각하지 않지만 이미 가지고있는 코드를 기반으로 생각하면 내가 필요하다고 생각하는 것입니다.

function ValidateInput() { 
    var replayToPost = false; 
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim(); 
    var options = { 
     type: "POST", 
     url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback", 
     data: '{"content":"' + value + '"}', 
     async: false, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult); 

      if (msg.ReplyToPostFeedbackResult) { 
       replayToPost = false; 
      } else { 
       replayToPost = true; 
      } 

     }, 
     error: function() { 
      return true; 
     } 
    }; 
    $.ajax(options); 
    return replyToPost; 
} 

Answer 3

ajax 함수에서 반환 된 결과는 성공 또는 오류 메서드에서 반환되므로 ValidateInput() 메서드로 넘어갈 수 없습니다. Ajax 호출 범위를 벗어난 변수를 선언 한 다음 그 결과를 반환해야합니다.

function ValidateInput() { 
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim(); 
    var result = false; 

    $.post("../../Services/ForumOperationService.svc/ReplyToPostFeedback", '{"content":"' + value + '"}', function (msg) { 
      $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult); 
      if (!msg.ReplyToPostFeedbackResult){ 
       result = true; 
      } 
    }); 

    return result; 
}