ASP.NET AJAXでリッチクライアントWebアプリケーションを作成する（後編）

コーディング不要で既存資産もAJAX化 最強のAJAXフレームワーク

ScriptManagerコントロールとScriptManagerProxyコントロール

　これらのコントロールは、通常意識することはないのですが、ASP.NET AJAXを使用する上で非常に重要な役割を持っています。AJAXではその名の通り、JavaScriptから制御することで非同期通信を行うのですが、その処理をこのScriptManagerコントロールやScriptManagerProxyコントロールが制御してくれていますので、ASP.NET AJAXではJavaScriptのコードを記述することなく非同期通信を行うことが可能です。

　なお、ScriptManagerコントロールは1ページに1つしか定義することができません。ユーザーコントロールなどを使用する場合は、ScriptManagerProxyコントロールを使用しなければならないので、注意が必要です。

　ScriptManagerコントロールは、ASP.NET AJAXをインストールするとVisual Studioに追加される、[ASP.NET AJAX - Enabled Web Application] プロジェクトテンプレート（図5）を使用すると、自動的に定義されます。以降のサンプルは、このプロジェクトを使用して構築していきます。

図5　［ASP.NET AJAX - Enabled Web Application］ プロジェクトテンプレート

表1　ScriptManager/ScriptManagerProxyコントロールで使用できる主なプロパティ

プロパティ	意味
EnablePartialRendering	非同期更新処理を実行するかどうかを指定します。UpdatePanelを使用していても、このプロパティに"false"を指定すると通常のポストバック動作が行われます。

UpdatePanelコントロール

　このコントロールは、AJAX処理を行いたいコントロールを含めることで、パネル内のみ部分的に更新処理を行えるようになります（図6）。

図6　UpdatePanelサンプルデザインビュー

　ASP.NET 2.0 AJAX Extensionsはその名の通り、ASP.NETを拡張するコントロールです。そのため、このUpdatePanelコントロールも標準のASP.NETコントロールをAJAX化する形で使用します。これによって、既存のASP.NET資産を容易にAJAXに拡張することが可能です（リスト1）。

リスト1　既存のコントロールをUpdatePanelコントロールで拡張

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <asp:Label ID="Label2" runat="server" BorderStyle="None"
        Font-Bold="True" Font-Italic="True" Font-Size="Large"
        Text="AJAXコントロール" Width="194px"></asp:Label>
<br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
&nbsp;
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click"
            Text="決定" /><br />
    <asp:Label ID="TextView2" runat="server"></asp:Label>
</asp:UpdatePanel>

　サンプルを実行すると、UpdatePanelを使用していないコントロールでは通常のWebアプリケーションと同様に全体ポストバックが発生し、ページの履歴も残っています（図7）。

図7　標準アプリケーションとして実行

　まったく同じコントロールをUpdatePanelコントロールの中に入れるだけで、全体ポストバックではなく、AJAXの部分更新となり、ページの履歴も残らなくなります（図8）。

図8　AJAXアプリケーションとして実行

　UpdatePanelはUpdateModeプロパティがデフォルトで「Always」に設定されているため、プログラムからUpdatePanelの更新タイミングを制御したい場合は「Conditional」に設定し、UpdatePanleのUpdateメソッドを使用して更新します（リスト2）。

リスト2　サンプルのUpdatePanelを手動で更新した場合

protected void Button2_Click(object sender, EventArgs e)
{
    TextView2.Text = TextBox2.Text;
    UpdatePanel1.Update;  // UpdatePanel1の更新
}

表2　UpdatePanelコントロールで使用できる主なプロパティ

プロパティ	意味
UpdateMode	更新モード設定（Always | Conditional）
Triggers	トリガーを宣言（UpdateModeを「Conditional」に設定した場合のみ）

UpdateProgressコントロール

　UpdatePanelコントロールを使用した場合、Webページが部分的に更新されるため、ブラウザのステータスに進捗状況が表示されません。そのため、サーバ処理中であることを判断できるように、処理中であることを表示するUpdateProgressコントロールを使用します。

　UpdateProgressコントロールのAssociatedUpdatePanelIDプロパティに対応するUpdatePanelを指定することで（リスト3）、対応するUpdatePanelでポストバックが発生した際に任意のテキストや画像を表示することができます（図9）。

リスト3　対応するUpdatePanelを指定

<asp:UpdateProgress ID="UpdateProgress1" runat="server"
    AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
    しばらくお待ちください...<br />
    <asp:Image ID="Image1" runat="server"
        ImageUrl="~/images/ajax-loader.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>

図9　UpdateProgressコントロールの表示

表3　UpdateProgressコントロールで使用できる主なプロパティ

プロパティ	意味
AssociatedUpdatePanelID	対応するUpdatePanelを設定
DisplayAfter	UpdateProgressが表示されるまでの時間（ミリ秒）を設定（デフォルト値：500）

Timerコントロール

　ここまでは、イベント発生をトリガとして部分更新を行うUpdatePanelコントロールを紹介してきましたが、Webアプリケーションを構築する上で、一定間隔で自動更新したい状況があるかもしれません。その場合には、このTimerコントロールを使用します。

　なお、TimerコントロールはUpdatePanelの外でも使用することができますが、その場合は全体がポストパックされてしまいますので、注意が必要です。

　以下のサンプルは、5秒ごとにテキストボックスの値を変更するだけの処理です（リスト4、図10）。

リスト4　5秒後に処理を実行

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:TextBox ID="TextBox1" runat="server" Width="437px">
        TimerSample</asp:TextBox>
    <asp:Timer ID="Timer1" runat="server" Interval="5000"
               OnTick="Timer1_Tick">
    </asp:Timer>
    </ContentTemplate>
</asp:UpdatePanel>

図10　一定間隔で処理を実行

表4　Timerコントロールで使用できる主なプロパティ

プロパティ	意味
Interval	タイマーの間隔（ミリ秒）を設定（デフォルト値：60000）

まとめ

　冒頭でも説明した通り、ASP.NET AJAXはASP.NET 2.0 AJAX ExtensionsをコアにASP.NET AJAX Control ToolkitやASP.NET Featuresといったコンポーネントが存在します。ASP.NET 2.0 AJAX Extensionsを使用すると、既存のコントロールはすべてAJAXに対応できるようになるため、単独でも素晴らしい能力を発揮しますが、これらのコンポーネントを組み合わせることで、実現の難しかったAJAXアプリケーションの開発がさらに容易になります。

　本稿では、ASP.NET 2.0 AJAX Extensionsのコントロールしか紹介しませんでしたが、ASP.NET AJAX Control Toolkitなども機会があれば紹介していきたいと思います。