asp.net：ajax.netリクエストのキャンセル

ユーザビリティの観点から、ユーザーがタイムラプス応答を待つつもりがない場合、ユーザーにアクションをキャンセルする機能を提供することは常に良い形と考えられていました。 Ajaxリクエストも例外ではありません。 この短い記事では、長い時間がかかったり、何らかの理由でフリーズした場合に、ajax.netでリクエストをキャンセルする機会をユーザーに簡単に与える方法のオプションの1つを示します。

AjaxControlToolkit. ajax- UpdatePanel.



まず、AjaxControlToolkitコンポーネントを使用して、次のコードを宣言します。

< asp：UpdateProgress ID = "upg1" runat = "server" AssociatedUpdatePanelID = "up1" DisplayAfter = "100" >

< ProgressTemplate >

< table style = "padding：5px; 境界線：1pxのグレー、 背景：黄色; フォントサイズ：10px;

font-family：Verdana; " >

< tr >

< td >

< asp：Image ID = " Image1 " runat = "server" ImageUrl = "〜/ img / ctrls / p.gif" > </ asp：Image >

</ td >

< td >

更新、お待ちください...   < 入力 タイプ = "ボタン" id = "resetButton" onclick = "resetPostBack（）"

値 =「キャンセル」 />

</ td >

</ tr >

</ 表 >

</ ProgressTemplate >

</ asp：UpdateProgress >

< cc1：AlwaysVisibleControlExtender ID = "UpdateProgress1_AlwaysVisibleControlExtender"

runat = "server" Enabled = "True" TargetControlID = "upg1" >

</ cc1：AlwaysVisibleControlExtender >

*このソースコードは、 ソースコードハイライターで強調表示されました。

ここでは、UpdatePanel up1に対して、サーバーへのajaxリクエスト中に情報を表示するエクステンダーが宣言されています。 次に、エクステンダーに対して別のエクステンダーが宣言され、すべてのコンテンツの上にhtmlコードが表示されます。 DisplayAfterプロパティによって、htmlブロックをレンダリングする必要がある期間が示されることに注意してください。

. div, table , , , css. , , css-.



キャンセルボタンの場合、リクエストをキャンセルするメインジョブを実行するjavascript-following関数を定義します。





このコードブロックは、ページに配置するか、外部ファイルに取り込むことができます。

PageRequestManager.isInAsyncPostBack() MSDN : « , , PageRequestManager postback."



これで、長いリクエストの場合、ユーザーはシンプルでわかりやすいアクションでリクエストをキャンセルできます。