ASP .NET Web Formの魅力

2011年3月9日(水)
ナオキ(監修:山田祥寛)

AJAXを簡単実現ASP.NET AJAX

数年前まではAJAXと言うと、「先進的で面白いけど難しい」というイメージを持たれている方が多かったのではないでしょうか。ASP.NETでも、もちろんAJAXの機能は盛り込まれています。ASP.NET基本の開発思想である「細かい仕組みを知らずとも簡単にWebアプリケーションを開発する」という部分を活かしてAJAXを簡単に実現するサーバーコントロール群やクライアントサイドスクリプトライブラリが提供されました。

図4:ASP.NET AJAXの構成(クリックで拡大)

ASP.NET AJAXは、主にサーバーサイドとクライアントサイドの機能に分かれています。ASP.NET AJAX ExtensionsはASP.NET標準に搭載されているサーバーコントロール、ASP.NET AJAX Control ToolkitはMicrosoftとコミュニティが共同で開発したサーバーコントロール群です。クライアントサイドでは、Microsoft Ajax LibraryというMicrosoft提供のスクリプトライブラリもありますが、現在のASP.NETでは、クライアントサイドのAJAX実装にはjQueryを使用する事が推奨されています。Visual Studio 2010にもjQueryは統合されていますので、これからASP.NET開発をされる方は合わせて、jQueryの学習も必要になるでしょう。

今回はサーバーサイドで実現できるASP.NET AJAXに絞ってご紹介します。

基本的にASP.NET AJAXのサーバーコントロールはAJAX機能を内包しているのですが、単体で使えるものから、既存のサーバーコントロールにAJAXの機能を付加するコントロールなど様々なものがあります。これらは、JavaScriptにほぼ触れる事なくAJAX機能を利用できる優れものです。

今回はすぐに使えるAJAX機能にフォーカスしてサンプルをご紹介します。

すぐに使えるASP.NET AJAX!

極論を言うと、ASP.NET AJAXにおいて重要なサーバーコントロールは以下の2つだけです。

  • ScriptManager:ASP.NET AJAXにおけるJavaScriptを管理するコントロール
  • UpdatePanel:AJAXによる部分更新を可能にするパネルコントロール

この2つさえ押さえれば、ASP.NETアプリケーションをすぐにAJAXによる部分更新に対応できます。

以下は、ボタンをクリックするとHello, ASP.NET XXXという文字列を表示するサンプルです。この際、通常はポスト通信されてページ全体が再描画されますが、ここでScriptManager、UpdatePanelコントロールを使用するとAJAXによる部分更新が実現できます。手順は以下の通りです。

  1. ツールボックスのAJAX ExtensionsタブからScriptManagerコントロールをページの最上部に配置
  2. UpdatePanelをページ内に貼り付けて、TextBox、Button、LabelコントロールをUpdatePanel内に配置

配置イメージは図5の通りです。

図5:サンプルのフォームレイアウト

あとは、ボタンクリックイベントにHello, ASP.NET XXXという文字列を表示するコードを記載するだけです。配置したコントロールのプロパティなどの設定は特にありません。実行すると非同期でポストバックを発生するため、UpdatePanel内のコントロールだけ部分更新されます。Internet Explorerの場合はタブに全体更新を示すプログレスが表示されない事が確認できます。JavaScriptを知らずともAJAXの恩恵を受けられる。これが、ASP.NET AJAXの魅力です。

最後にデータ駆動アプリケーションに最適な、動的データについてご紹介します。

著者
ナオキ(監修:山田祥寛)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています