Validierung mit AJAX AutoCompleteExtender

Question

Ich habe ein TextBox mit AutoCompleteExtender, wenn die Person in der TextBox Liste mit Namen der Stadt beginnt die Eingabe erscheinen.Dieses funktioniert gut, aber jetzt mag ich, dass überprüfen, ob sie ein textbox geben Sie einfach und wählen Sie nicht ein von der Liste, die es bestätigt, dass Stadt nicht in der Datenbank existiert. Ich mag validieren es Ajax zu verwenden und ohne PostBack vor dem endgültigen Absenden von form.

Answer 1

hinzufügen js Datei mit Inhalt unten und fügen Sie Scrips Sammlung Verweis darauf ToolkitScriptManager der hinzufügen:

Type.registerNamespace('Sjax'); 

Sjax.XMLHttpSyncExecutor = function() { 
    Sjax.XMLHttpSyncExecutor.initializeBase(this); 

    this._started = false; 
    this._responseAvailable = false; 
    this._onReceiveHandler = null; 
    this._xmlHttpRequest = null; 

    this.get_aborted = function() { 
     //Parameter validation code removed here... 
     return false; 
    } 

    this.get_responseAvailable = function() { 
     //Parameter validation code removed here... 
     return this._responseAvailable; 
    } 

    this.get_responseData = function() { 
     //Parameter validation code removed here... 
     return this._xmlHttpRequest.responseText; 
    } 

    this.get_started = function() { 
     //Parameter validation code removed here... 
     return this._started; 
    } 

    this.get_statusCode = function() { 
     //Parameter validation code removed here... 
     return this._xmlHttpRequest.status; 
    } 

    this.get_statusText = function() { 
     //Parameter validation code removed here... 
     return this._xmlHttpRequest.statusText; 
    } 

    this.get_xml = function() { 
     //Code removed 
    } 

    this.executeRequest = function() { 
     //Parameter validation code removed here... 
     var webRequest = this.get_webRequest(); 

     if (webRequest === null) { 
      throw Error.invalidOperation(Sys.Res.nullWebRequest); 
     } 

     var body = webRequest.get_body(); 
     var headers = webRequest.get_headers(); 
     var verb = webRequest.get_httpVerb(); 

     var xmlHttpRequest = new XMLHttpRequest(); 
     this._onReceiveHandler = Function.createCallback(this._onReadyStateChange, { sender: this }); 
     this._started = true; 
     xmlHttpRequest.onreadystatechange = this._onReceiveHandler; 
     xmlHttpRequest.open(verb, webRequest.getResolvedUrl(), false); // False to call Synchronously 

     if (headers) { 
      for (var header in headers) { 
       var val = headers[header]; 

       if (typeof (val) !== "function") { 
        xmlHttpRequest.setRequestHeader(header, val); 
       } 
      } 
     } 

     if (verb.toLowerCase() === "post") { 
      if ((headers === null) || !headers['Content-Type']) { 
       xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
      } 

      if (!body) { 
       body = ''; 
      } 
     } 

     this._started = true; 
     this._xmlHttpRequest = xmlHttpRequest; 
     xmlHttpRequest.send(body); 
    } 

    this.getAllResponseHeaders = function() { 
     //Parameter validation code removed here... 
     return this._xmlHttpRequest.getAllResponseHeaders(); 
    } 

    this.getResponseHeader = function (header) { 
     //Parameter validation code removed here... 
     return this._xmlHttpRequest.getResponseHeader(header); 
    } 

    this._onReadyStateChange = function (e, args) { 
     var executor = args.sender; 

     if (executor._xmlHttpRequest && executor._xmlHttpRequest.readyState === 4) { 
      //Validation code removed here... 

      executor._responseAvailable = true; 

      executor._xmlHttpRequest.onreadystatechange = Function.emptyMethod; 
      executor._onReceiveHandler = null; 

      executor._started = false; 

      var webRequest = executor.get_webRequest(); 
      webRequest.completed(Sys.EventArgs.Empty); 

      //Once the completed callback handler has processed the data it needs from the XML HTTP request we can clean up 
      executor._xmlHttpRequest = null; 
     } 
    } 

} 

Sjax.XMLHttpSyncExecutor.registerClass('Sjax.XMLHttpSyncExecutor', Sys.Net.WebRequestExecutor); 

Auf einer Seite:

<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1"> 
     <Scripts> 
      <asp:ScriptReference Path="~/XMLHttpSyncExecutor.js" /> 
     </Scripts> 
</ajaxToolkit:ToolkitScriptManager> 

Dann fügen Sie CustomValidator für Ziel TextBox und Funktion unten für die Kundenvalidierung:

<asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" /> 
<asp:CustomValidator runat="server" ID="myTbCustomValidator" ControlToValidate="myTextBox" 
     Text="*" Display="Dynamic" ValidateEmptyText="false" ClientValidationFunction="validateTextBox" 
     OnServerValidate="ValidateTextBox" /> 

function validateTextBox(sender, args) { 
     if (args.Value.length > 0) { 

      var extender = $find("AutoCompleteEx"); // AutoComplete extender's BehaviorID 

      if (extender._completionListElement) { 
       var children = extender._completionListElement.childNodes; 
       var length = extender._completionListElement.childNodes.length; 
       for (var i = 0; i < length; i++) { 
        if (children[i].innerHTML == args.Value) { 
          args.IsValid = true; 
          return; 
        } 
       } 
      } 

      var request = new Sys.Net.WebRequest(); 

      request.set_url('<%= ResolveClientUrl("~/AutoComplete/AutoComplete.asmx/Validate") %>'); 
      var body = Sys.Serialization.JavaScriptSerializer.serialize({ value: args.Value }); 
      request.set_body(body); 
      request.set_httpVerb("POST"); 
      request.get_headers()["Content-Type"] = "application/json; encoding=utf-8"; 
      request.add_completed(function (eventArgs) { 
       var result = Sys.Serialization.JavaScriptSerializer.deserialize(eventArgs.get_responseData()); 
       args.IsValid = result.d; 
      }); 
      var executor = new Sjax.XMLHttpSyncExecutor(); 
      request.set_executor(executor); 
      request.invoke(); 
     } 
} 

Der Grundgedanke des obigen Codes besteht darin, vorgeschlagene Einträge zunächst auf eingegebenen Text zu prüfen, und wenn keine Übereinstimmung besteht, dann synchronen AJAX-Aufruf zur Validate-Methode des Web-Service oder der Seitenmethode durchzuführen. Das Verfahren sollte eine solche Signatur haben: public bool Validate(string value)

P. S. Code für XMLHttpSyncExecutor hier genommen: Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript