asp.net - ajax AutoCompleteExtender による検証

Question

人がCity name Appearのリストに入力を開始すると、 がありますTextBox。これは正常に機能しますが、入力するだけでリストから選択しない場合、City Is Not Existを検証することを検証したいと思います。データベース内。私はAjaxを使用して検証したい.AutoCompleteExtenderTextBoxtextboxPostBackform

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>

次に、ターゲット TextBox に 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();
      }
 }

上記のコードの主なアイデアは、入力されたテキストに対して最初に提案された項目をチェックし、一致がない場合は、Web サービスまたはページ メソッドの Validate メソッドへの同期 AJAX 呼び出しを行うことです。そのメソッドには次のような署名が必要です。public bool Validate(string value)

ここで取得した XMLHttpSyncExecutor の PS コード: Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript