मान्यता के साथ ajax AutoCompleteExtender

Question

मैं एक TextBoxAutoCompleteExtender साथ जब व्यक्ति के साथ शहर का नाम TextBox सूची में टाइप शुरू होता दिखाई देते हैं .यह ठीक काम करता है लेकिन अब मैं मान्य करने के लिए है कि अगर वे सिर्फ एक textbox में टाइप करें और किसी एक का चयन नहीं करना चाहते सूची से यह मान्य करता है कि डेटाबेस डेटाबेस में मौजूद नहीं है। मैं इसे form के अंतिम सबमिट से पहले अजाक्स का उपयोग करके PostBack के बिना सत्यापित करना चाहता हूं।

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 जोड़ सकते हैं और फ़ंक्शन का उपयोग करें ग्राहक सत्यापन के लिए नीचे:

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

ऊपर दिए गए कोड का मुख्य विचार पहले से दर्ज किए गए टेक्स्ट के लिए सुझाए गए आइटमों की जांच करना है और यदि कोई सेवा नहीं है तो सिंक्रोनस AJAX कॉल करने के लिए वेब सेवा या पृष्ठ विधि की विधि मान्य करें। उस विधि में ऐसे हस्ताक्षर होना चाहिए: public bool Validate(string value)

पीएस XMLHttpSyncExecutor के लिए कोड यहां लिया गया: Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript