[ThinkIT] 第3回：ASP.NET AJAXを使ってWebページを作成する (1/4)

TOP＞システム開発＞一足先にOrcasの世界を体験する

試せばわかる！Ajax開発環境ASP.NET AJAX

第３回：ASP.NET AJAXを使ってWebページを作成する
著者：日立ソフトウェアエンジニアリング宮崎昭世 2007/3/29

1 2 3 4 次のページ

一足先にOrcasの世界を体験する

2007年3月12日から15日にマイクロソフト本社のあるレドモンドで開催された「MVP Global Summit」に筆者も参加してきました。NDA（秘密保持契約）を結んだうえでの参加であるため、内容には触れられないのですが、数多くのセッションが開かれ、ASP .NETについてのセッションにも参加してきました。

次バージョンのVisual Studio（コードネーム：Orcas）には、ASP.NET AJAXを含む開発支援機能が含まれますので、本連載で一足先にOrcasの世界を体験してみましょう。

今回作成するWebページのイメージ

前回は、Ajaxについての解説とASP.NET AJAXのインストールを行いました。今回は、ASP.NET AJAXのサーバ中心モデルを使って簡単なWebページを作成します。作成するWebページは図1のようなイメージです。

図1：今回作成するWebページのイメージ
（画像をクリックすると別ウィンドウに拡大図を表示します）

各ボタンのクリック時の動作は表1の通りです。

ボタン	動作内容
住所仮定	郵便番号を入力しクリックすることにより、住所欄に対応する住所を表示する
登録	ボタンクリック時に処理中であることがわかるような表示を行う。処理完了時には、この表示は消える

表1：ボタンクリック時の動作

   通常のWebページであれば、ボタンをクリックした際にページ全体のリフレッシュが行われます。今回作成するのは、ページ全体のリフレッシュをせずに表1の動きを実現するWebページです。

   図1は「住所仮定」ボタンと「登録」ボタンをクリックした後の画面です。赤線で囲まれた部分からも「進む」と「戻る」ボタンが有効になっていないことが確認できると思います。

   それでは、「第2回：ASP.NET AJAXのインストール」で構築した環境で、早速Webページを作成していきましょう。

ASP.NET AJAXのプロジェクト作成

まず、Microsoft Visual Web Developer 2005 Express Editionを起動し、新しいWebサイトを作成します。図2に示す作成の「Webサイト」をクリックしてください。

図2：Microsoft Visual Web Developer 2005 Express Edition起動画面
（画像をクリックすると別ウィンドウに拡大図を表示します）

「新しいWebサイト」ウィンドウが開きますので、「テンプレート」から「ASP.NET AJAX-Enabled Web Site」を選択し、「場所」に作成するフォルダを指定します。「言語」は「Visual Basic」または「Visual C#」を選択可能です。本連載では「Visual C#」を選択します。

図3：新しいWebサイトウィンドウ
（画像をクリックすると別ウィンドウに拡大図を表示します）

「OK」ボタンを押すとWebサイトが作成されます（図4）。

図4：新しいページ
（画像をクリックすると別ウィンドウに拡大図を表示します）

ここまでは、通常のASP.NETによるWebサイトの作成と同様の操作です。

図4の作成されたページをよく見てみると、「<asp:ScriptManager>」という見慣れないタグが記載されていることに気づくのではないでしょうか。このようにASP.NET AJAXのインストールによって追加されたテンプレートを利用すると、ASP.NET AJAXを使ったWebサイトの作成が簡単に行えるように準備がされています。

1 2 3 4 次のページ

著者プロフィール
日立ソフトウェアエンジニアリング株式会社宮崎昭世
仕事ではWindows環境におけるアプリケーション開発の標準化・技術教育などを担当する。Webアプリケーション開発では、個人で作成したC言語のCGIプログラムからはじまり、Perl、ASP、Javaなどを経て現在はASP.NETを主に利用している。

Microsoft MVP for Visual Developer - ASP/ASP.NET
https://mvp.support.microsoft.com/
profile=6C540032-3FD0-43B0-98EF-3690158D4EE6

kogumaブログ
http://koguma.cocolog-nifty.com/koguma/

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします！インプレスIT INSIDE

INDEX
第3回：ASP.NET AJAXを使ってWebページを作成する
	一足先にOrcasの世界を体験する
	コントロールの配置
	イベントハンドラの記述
	登録ボタンの追加

試せばわかる！Ajax開発環境ASP.NET AJAX
第1回	マイクロソフトキーマンが語る〜ASP.NET AJAXはこうしてうまれた
第2回	ASP.NET AJAXのインストール
第3回	ASP.NET AJAXを使ってWebページを作成する
第4回	ASP.NET AJAXを実際に使用する手順
第5回	ASP.NET AJAXのExtenderコントロール

Think IT 過去人気記事

Think IT人気ライター BEST 5

IT製品/サービス資料ダウンロード

Think IT 過去人気記事

Think IT人気ライター BEST 5

テクノロジーメディア