使用ajax的AutoCompleteExtender进行验证

Question

我有一个带有AutoCompleteExtender的TextBox，当用户开始在TextBox中输入时，城市名称列表会出现。这个功能很好用，但现在我想验证一下，如果他们只是在TextBox中输入，而没有从列表中选择一个城市，那么它会验证数据库中是否存在该城市。 在最终提交form之前，我想使用Ajax进行验证，而不需要PostBack。

- Neha

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 调用 web 服务或页面方法的 Validate 方法。该方法应具有以下签名：public bool Validate(string value) P.S. XMLHttpSyncExecutor 的代码取自此处：使用同步 ASP.Net AJAX Web 服务调用和 Scriptaculous 测试您的 JavaScript

- Yuriy Rozhovetskiy