驗證與阿賈克斯AutoCompleteExtender

Question

我有一個TextBox與AutoCompleteExtender當人開始輸入在TextBox列表與城市的名字出現。這工作正常，但現在我想驗證，如果他們只需鍵入textbox和不選擇一個從它驗證該城市不存在的列表中在數據庫中。 我想驗證它使用Ajax而沒有PostBack最終提交form之前。

Answer 1

添加新的js文件與下面的內容，並加於它參考ToolkitScriptManager的Scrips集合：

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); 

在一個頁面：

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

然後，添加的CustomValidator爲目標TextBox和使用功能以下用於客戶驗證：

<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(); 
     } 
} 

上面代碼的主要思想是首先檢查輸入文本中的建議項目，如果沒有任何說明，則對Web服務或頁面方法的Validate方法執行同步AJAX調用。該方法應該有這樣的簽名：public bool Validate(string value)

P.S.此處採用的XMLHttpSyncExecutor代碼：Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript