ASP.NET AJAX のホームへ戻る

Webページを部分的に更新する (UpdatePanelUpdateProgress)

 

Sample2.aspxでは、DropDownListに商品カテゴリーテーブル、そしてGridViewに商品テーブルを連動させて表示します。DropDownListGridViewには、ASP.NET AJAXUpdatePanelを使用してWebページを部分的に更新します。UdatePanelを適用するとWebページが再ロードされないため、Webサーバー側で処理中であることをユーザーに認識させるために、UpdateProgressを使用して「処理中・・・」のメッセージを表示します。

 

ASP.NET AJAXでは、UpdatePanelModeプロパティがUpdateModeプロパティに変更になっています。プロパティの値には、Atlasと同様「Always」と「Conditional」が設定できます。UpdateModeのデフォルト値は「Always」です。

 

<aspAjax:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=" Conditional ">

</aspAjax:UpdatePanel>

 

AtlasTriggersコレクションには「ControlEventTrigger」と「ControlValueTrigger」がありましたが、ASP.NET AJAXでは「AsyncPostBackTrigger」に統一されました。また、新規に「PostBackTrigger」が追加されました。PostBackTriggerは、通常のポストバック(Webページ全体を再ロードする)をさせたいときに使用します。

 

<Triggers>

  <aspAjax:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />

<aspAjax:PostBackTrigger ControlID="DropDownList1" />

</Triggers>

 

ASP.NET AJAXUpdateProgessには、新規に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)

 

JavaScriptabortPB関数では、WebページのPageRequestManagerクラスのインスタンスを取得し、abortPostBackメソッドを実行してポストバック処理を中断させます(リスト5)

 

 

fig13

WebページのデザイナにDropDownListGridViewASP.NET AJAXのコントロールを配置

 

fig14

図 パーシャルポストバック処理中は「処理中」を表示する

 

リスト: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();

 

ASP.NET AJAX のホームへ戻る