●Webページを部分的に更新する (UpdatePanel、UpdateProgress)
Sample2.aspxでは、DropDownListに商品カテゴリーテーブル、そしてGridViewに商品テーブルを連動させて表示します。DropDownListとGridViewには、ASP.NET AJAXのUpdatePanelを使用してWebページを部分的に更新します。UdatePanelを適用するとWebページが再ロードされないため、Webサーバー側で処理中であることをユーザーに認識させるために、UpdateProgressを使用して「処理中・・・」のメッセージを表示します。
ASP.NET AJAXでは、UpdatePanelのModeプロパティがUpdateModeプロパティに変更になっています。プロパティの値には、Atlasと同様「Always」と「Conditional」が設定できます。UpdateModeのデフォルト値は「Always」です。
<aspAjax:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=" Conditional ">
</aspAjax:UpdatePanel>
AtlasのTriggersコレクションには「ControlEventTrigger」と「ControlValueTrigger」がありましたが、ASP.NET AJAXでは「AsyncPostBackTrigger」に統一されました。また、新規に「PostBackTrigger」が追加されました。PostBackTriggerは、通常のポストバック（Webページ全体を再ロードする）をさせたいときに使用します。
<Triggers>
<aspAjax:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
<aspAjax:PostBackTrigger
ControlID="DropDownList1" />
</Triggers>
ASP.NET AJAXのUpdateProgessには、新規にDisplayAfterプロパティが追加されました。このプロパティには、ミリセカンド(ms)の単位でUpdateProgressが適用される時間を設定します。たとえば、Webページがポストバックしてから0.5秒後に「処理中・・・」のメッセージを表示するには「500」を設定します。
<aspAjax:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="500">
<ProgressTemplate>
<b>処理中です...</b>
</ProgressTemplate>
</aspAjax:UpdateProgress>
UpdateProgressには、このほかにWebサーバー側のポストバック処理を中断させる機能も追加されました。ポストバック処理を中断させるには、<ProgressTemplate>…</ProgressTemplate>にボタンを追加して、onclickイベントにJavaScriptの関数(abortPB)を設定します(リスト4)。
JavaScriptのabortPB関数では、WebページのPageRequestManagerクラスのインスタンスを取得し、abortPostBackメソッドを実行してポストバック処理を中断させます(リスト5)。
図WebページのデザイナにDropDownList、GridViewとASP.NET AJAXのコントロールを配置
図 パーシャルポストバック処理中は「処理中…」を表示する
リスト：Sample2.aspx
<aspAjax:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<aspAjax:ScriptReference Path="~/Sample2/Sample2.aspx.js" />
</Scripts>
</aspAjax:ScriptManagerProxy>
<aspAjax:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="500">
<ProgressTemplate>
<b>処理中です...</b>
<input id="btnAbort" type="button" value="中断" onclick="abortPB();" />
</ProgressTemplate>
</aspAjax:UpdateProgress>
<aspAjax:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server"
:::
</asp:DropDownList>
</ContentTemplate>
</aspAjax:UpdatePanel>
<aspAjax:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
:::
</asp:GridView>
</ContentTemplate>
<Triggers>
<aspAjax:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</aspAjax:UpdatePanel>
リスト：Sample2.aspx.js
function abortPB() {
var obj = Sys.WebForms.PageRequestManager.getInstance();
if (obj.get_isInAsyncPostBack()) {
obj.abortPostBack();
}
}
if(typeof(Sys) !== "undefined")
Sys.Application.notifyScriptLoaded();