私が持っているTextBox
人が市名でTextBox
一覧に入力を始める.Thisが正常に動作表示されますが、今、私は、彼らはちょうどtextbox
を入力し、いずれかを選択していない場合ことを検証したい場合AutoCompleteExtender
とリストから、都市がデータベースに存在しないことが検証されます。 Ajaxを使用せずに検証するPostBack
最終提出前form
。検証とAJAX AutoCompleteExtender
6
A
答えて
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)
P.S.ここで取られたXMLHttpSyncExecutorのコード:Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript
関連する問題
- 1. AutoCompleteExtender AJAX質問
- 2. AjaxツールキットAutoCompleteExtender
- 3. AJAX Toolkit * PAGE *サービスのAutoCompleteExtender?
- 4. WebサービスのないAJAX AutoCompleteextender
- 5. Symfony2 AJAX検証
- 6. Validate AutoCompleteExtender
- 7. AJAXライブメール検証(PHP)
- 8. rails webアプリケーションコントロールパネルとajaxタブと検証
- 9. jQuery Ajaxの検証とDataAnnotationsの属性
- 10. ajaxとレールによるライブ検証3
- 11. MVC 2 jQueryの検証とajaxのフォーム
- 12. Rails3 Ajaxフォーム(jquery)とモデルの検証
- 13. AJAXでフォームのjQuery検証
- 14. rails jquery ajaxフォームの検証
- 15. Struts ajaxフォームの検証
- 16. Yii - 検証付きAjaxフォーム
- 17. AJAXでの認証の検証Laravel 5.2
- 18. AutoCompleteExtenderの使い方
- 19. のYii私は形でAjaxの検証を有効にしようとしているAjaxの検証
- 20. HTML5検証とPHP検証
- 21. XML検証とJava検証
- 22. Ajax AutoCompleteExtenderを使用してみませんか?
- 23. チェックボックスを使ってAJAX AutoCompleteExtenderをカスタマイズする
- 24. より多くのパラメータを持つAjax AutoCompleteExtender
- 25. JQuery/Ajaxフォームの検証 - フォームの検証とajaxが検証しない限りフォームを送信しない方法
- 26. AJAX検証アイデア - ValidationSummary&ValidationMessageで完了
- 27. ユーザー名検証のためのJQuery .ajax()
- 28. ajaxでcodeigniterのフォームを検証する
- 29. ajaxの検証でrecaptchaでエラー
- 30. 検証はMVC 3.0でAjaxを