Pour empêcher la publication a échoué: isValid = "undefined"

Question

J'ai le code pour empêcher la publication, mais a échoué. Fondamentalement, j'ai un bouton asp.net.

<asp:Button ID="btnSave" runat="server" Text="SaveChanges" OnClick="btnSave_Click" 
     CssClass="saveButton" ValidationGroup="answer" OnClientClick="return ValidateUserNameBeforeSubmitting();" /> 

Et le service Web d'appel ajax.

function ValidateUserName() { 
     $.ajax({ type: "POST", 
      url: "../UserNameWebService.asmx/ValidateUserName", 
      data: "{'strUsername': '" +JSON.stringify($("#<%=TextUserName.ClientID%>").val()) + "'}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 

      async: false, 
      success: function (data) { 
       return data.d; 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(xhr.status); 
       alert(thrownError); 
      } 
     }); 
    } 


    function ValidateUserNameBeforeSubmitting() { 
     var isValid = ValidateUserName(); 
     return isValid; 
    } 

Le service Web retournera une valeur booléenne et ce sera le cas lorsque j'interviendrai dans le code. Cependant, quand je suis entré dans le code javascript, j'ai trouvé que "isValid" n'est pas une valeur booléenne. C'est "indéfini". Pourquoi?

Merci.

Answer 1

Ajax est asynchrone.

var isValid = ValidateUserName();

cette ligne exécute, mais la fonction que vous appelez n'a pas de retour (donc undefined)

si vous souhaitez accéder à une variable retournée de ajax, il doit être dans le gestionnaire de succès.

function ValidateUserName() { 
    var returnValue; 
    $.ajax({ type: "POST", 
     ... 
     async: false, 
     success: function (data) { 
      returnValue = data.d; 
     }, 
     ... 
    }); 
    return returnValue; 
} 

Answer 2

isValid est définie parce que ValidateUserName() ne retourne pas vraiment quoi que ce soit.

Modifier l'appel ajax à ce

function ValidateUserName() { 

     var results = $.ajax({ type: "POST", 
     url: "../UserNameWebService.asmx/ValidateUserName", 
     data: "{'strUsername': '" +JSON.stringify($("#<%=TextUserName.ClientID%>").val()) + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 

     async: false 
    }); 

    return results; 
    //or results.d; if thats what you need for the boolean 
} 

Lorsque la ajax est marqué comme async:false le résultat de l'appel ajax contient votre résultat. Plutôt que étant passé à une fonction de réussite

Answer 3

Scope une variable de retour de sorte que tous les chemins de retour et assurez-vous que votre appel ajax retour bool:

function ValidateUserName() { 
    var result = false; //default 
    $.ajax({ type: "POST", 
     url: "../UserNameWebService.asmx/ValidateUserName", 
     data: "{'strUsername': '" +JSON.stringify($("# <%=TextUserName.ClientID%>").val()) + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     async: false, 
     success: function (data) { 
      result = data.d; //make sure this is a bool 
      //result = Boolean(data.d); //use this if returning a string, not recommended though 
      alert(result); //are you a bool? 
     }, 
     error: function (xhr, ajaxOptions, thrownError) {    
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 

    return result; 
} 


function ValidateUserNameBeforeSubmitting() { 
    var isValid = ValidateUserName(); 
    return isValid; 
}