Microsoft ASP.NET 2.0 Ajax Extensions

以前はAtlasという名称で出ていたASP.NETのAjax フレームワークがMicrosoft ASP.NET 2.0 Ajax Extensionsという正式名称に変更されて、そのベータ版がリリースされた。
ASP.NET Ajax : Enhanced Interactivity and Responsiveness | Microsoft Docs

今やってる案件では、Atlasを利用しているので変わっているところがないか調べる理由で使ってみた。
まぁ、利用しているといってもUpdatePanelを使って、少しだけ画面遷移を減らしているぐらいで、AtlasのJavaScriptライブラリをごりごり使っているわけではないのでしれてるけど。

まずUpdatePanelの変更点は、

Trigger要素を追加するのにちゃんとしたデザイナがサポートされた（前は変なデザイナだった）
EnablePartialRenderingの初期値がtrueになった。（あたりまえ？）
MaintainScrollPositionOnPostbackをtrueにしても例外が出なくなった。（意味ないけど）
スマートタグがサポートされてない

動作的には特に変更点はないみたい。
あと、全般的に

ScriptManagerにカスタムエラーテンプレートを指定できない。（なんで？）
UpdateProgressがなくなっている。（正式リリースでサポート）
各種Validatorと互換性のある専用のValidator（Microsoft.Web.UI.Compatiblityの奴）が用意されている。

で、Ajax Extensionsだけでは、たいしたことはできないみたいなので、Ajax Control Toolkiもダウンロードしてきた。
CodePlex Archive
ここを見るとどんなコントロールがあるかわかるけど、かなりリッチ。
でも、業務アプリケーションではほとんど必要のないような機能ばかりなので、使えそうなものをピックアップしてみる。

ValidatorCalloutExtender

これはValidatorで検証した結果（ErrorMessage）を対象のコントロールの横にバルーンポップアップで表示するというもの。
使い方は簡単で、

Validatorを追加。
ValidatorCalloutExtenderを追加。
- TargetControlIDにValidatorのIDを指定する。

これだけで、検証時にバルーンポップアップを表示できる。
でも、バルーンポップアップはフォーカスのあるコントロールにしか表示できないので、全体のエラーメッセージを表示するためにValidationSummaryとの併用は必須やろうけど、ユーザへのインパクトはかなりでかい。

UpdatePanelAnimationExtender

で、衝撃を受けたのがこれ。UpdatePanelのデータ更新時と更新後でいろいろなアニメーションを追加できるコントロール。アニメーションなんて業務アプリケーションに必要ないやろと思ったが、こいつはアニメーションだけではない。
たとえば、よくある要件としてデータの追加時にボタン押下後、そのボタンや他のボタンを無効にして処理が終わればボタンを有効化するという処理が必要になる時がある。

まぁ、ボタンを有効化するのはポストバックして画面が更新されれば、勝手に元に戻るからいままではよかったが、UpdatePanelを使って、非同期に追加処理を行えば画面全体が更新されるわけではないので、ボタンをなんらかの方法で有効化する必要がある。でも非同期処理完了のイベントを受け取ることができないので、それができなかった。（あるかもしれんけどわからん）

で、それを簡単にコードレスで実現できるのが、UpdatePanelAnimationExtender。
使い方は、

UpdatePanelを追加する。あとボタンとそれに対するトリガー。

<asp:UpdatePanel runat="server" ID="updatePanel1">
  <ContentTemplate>
    <%-- なんか適当に入力コントロール --%>
  </ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" />
  </Triggers>
<asp:UpdatePanel>
<asp:Button runat="server" ID="button1" Text="追加" />
<asp:Button runat="server" ID="button2" Text="キャンセル" />

UpdatePanelAnimationExtenderを追加する。
- TargetControlIDにUpdatePanelのIDを指定する。
- Animationsタグでアニメーションを定義する。
- OnUpdatingで処理中のイベント、OnUpdatedで処理終了後のイベントを定義する。
- Sequence要素はコンテナでその中の処理を順次処理していく、Parallelも同様でこっちは平行処理する。
- EnableAction要素で指定したコントロールの有効状態を設定できる。AnimationTargetを指定しないとUpdatePanelに適用される。
- FadeOut要素はその名のとおり、指定した要素をフェードアウトさせる。ここでは要素を指定していないので、UpdatePanelをフェードアウトさせる。
- FadeIn要素はその逆。

<atlasToolkit:UpdatePanelAnimationExtender runat="server" ID="upa" TargetControlID="updatePanel1">
  <Animations>
    <OnUpdating>
      <Sequence>
        <Parallel Duration="0">
          <EnableAction AnimationTarget="button1" Enabled="false" />
          <EnableAction AnimationTarget="button2" Enabled="false" />
        </Parallel>
        <FadeOut Duration="0.5" Fps="20" />
      </Sequence>
    </OnUpdating>
    <OnUpdated>
      <Sequence>
        <FadeIn Duration="0" Fps="10" />
        <Parallel Duration="0">
          <EnableAction AnimationTarget="button1" Enabled="true" />
          <EnableAction AnimationTarget="button2" Enabled="true" />
        </Parallel>
      </Sequence>
    </OnUpdated>
  </Animations>
</atlasTooki:UpdatePanelAnimationExtender>

これを動かしてみると、

追加ボタンをクリック
追加ボタンとキャンセルボタンがほぼ同時に無効化される。
UpdatePanelがじょじょに消えていく。
処理が完了すると、UpdatePanelがじょじょに表示される。
追加ボタンとキャンセルボタンがほぼ同時に有効化される。

と、これだけの処理を簡単に実装できる。
他にも要素の色を変えたり、要素のサイズをスケール単位で変更したり、点滅させたりなど、かなりいろんなことができる。
う〜ん、すごい！