SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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] プロジェクトテンプレート
図5 [ASP.NET AJAX - Enabled Web Application] プロジェクトテンプレート
表1 ScriptManager/ScriptManagerProxyコントロールで使用できる主なプロパティ
プロパティ意味
EnablePartialRendering非同期更新処理を実行するかどうかを指定します。UpdatePanelを使用していても、このプロパティに"false"を指定すると通常のポストバック動作が行われます。

UpdatePanelコントロール

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

図6 UpdatePanelサンプルデザインビュー
図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 標準アプリケーションとして実行
図7 標準アプリケーションとして実行

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

図8 AJAXアプリケーションとして実行
図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コントロールの表示
図9 UpdateProgressコントロールの表示
表3 UpdateProgressコントロールで使用できる主なプロパティ
プロパティ意味
AssociatedUpdatePanelID対応するUpdatePanelを設定
DisplayAfterUpdateProgressが表示されるまでの時間(ミリ秒)を設定(デフォルト値: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 一定間隔で処理を実行
図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なども機会があれば紹介していきたいと思います。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET AJAXでリッチクライアントWebアプリケーションを作成する連載記事一覧
この記事の著者

松原 晋啓(マツバラ ノブアキ)

アーティサン株式会社 取締役副社長 兼 CRM事業部長(CRMエバンジェリスト)リベルダージ合同会社 社長 兼 最高経営責任者(ドローンインストラクター)SE、アーキテクト、コンサルタント、エバンジェリスト(Microsoft MVP for Dynamics CRM)、マイクロソフトのソリューションスペシャリスト(Dynamics CRM製品担当)を経て、現在はDynamics CRMを専門に扱うデリバリーチームを...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1470 2008/07/14 19:32

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング