asp.net - 使用 ajax AutoCompleteExtender 进行验证

Question

当此人开始在 List 中输入City name Appear 时，我有一个TextBoxwith 。这工作正常，但现在我想验证他们是否只输入 a并且不从列表中选择一个，它验证 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 代码：使用同步 ASP.Net AJAX Web 服务调用和 Scriptaculous 来测试您的 JavaScript