Question

当这个人开始输入带有城市名称的TextBox列表时，我有一个AutoCompleteExtender TextBox。这样可以正常运行但现在我想验证一下，如果他们只是输入a textbox并且不从列表中选择一个验证该城市不存在的数据库。我想在PostBack的最终提交之前使用Ajax和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>

然后，为目标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();
      }
 }

上面代码的主要思想是首先检查输入文本的建议项目，如果没有任何可靠性，则执行同步AJAX调用验证Web服务或页面方法的方法。该方法应该有这样的签名：public bool Validate(string value)

P.S。 XMLHttpSyncExecutor的代码取自Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript

使用ajax AutoCompleteExtender验证

1 个答案: