TOPシステム開発> 第3回:Webアプリケーション開発と簡単Ajax化 (3/3)




今こそ聞きたいVisual Studio 2008の基礎の基礎

今こそ聞きたいVisual Studio 2008の基礎の基礎

第3回:Webアプリケーション開発と簡単Ajax化

著者:マイクロソフト 馬田 隆明

公開日:2008/02/19(火)

エラーの表示とデバッグ

実際のアプリケーション開発では、前述のようなエラー状態から「どれだけ素早く復旧できるか」そして「原因を調べられるか」が問題となります。この点についてもVS2008の機能は役立ちます。

例えばVS2008はデバッグの際に、エラーの原因のヒントを与えてくれます。さらにデバッグ中にコードの変数などにマウスオーバーすると、その変数の中身などを確認できます。

今回発生したエラーの原因は「配列に格納するデータが何もなかった(対応する日付のデータがなく、配列がnullだった)」ことに起因します。このためリスト4のように、最後のTextBoxを配列の処理に適した形に書き換えることで解決できます。

リスト4ではforeachにより、date配列に格納された変数を順次テキストボックスに表示させるようにしています。実際に実行してみると、今度は他の日付をクリックしてもエラーが表示されないはずです。

これで簡単な伝言板Webアプリケーションが完成しました。1日に複数の予定を組み入れるなど、まだまだ作り込む必要はありますが、機能強化はここまでにして説明を続けていきます。

さて、本記事のテーマは「Ajaxアプリケーション」なので、ここまでに完成しているWebアプリケーションをAjax化していきましょう。といってもVS2008であれば、単にドラッグ&ドロップだけで作業を完了させることができます。

図3:アプリケーションをAjax化
図3:アプリケーションをAjax化
(画像をクリックすると別ウィンドウに拡大図を表示します)

リスト4:foreachを使った表示
foreach (var s in date)
TextBox1.Text = s;

掲示板アプリケーションをAjax化

ページのデザイナの画面に戻り、ツールボックスの「AJAX Extensions」から「ScriptManager」をページの先頭にドラッグ&ドロップします。さらに同じカテゴリにある「UpdatePanel」コントロールをその下に設置します。

UpdatePanelコントロールの中に「Calendar」と「TextBox」をドラッグ&ドロップで移動し、実行します。すると先ほどまでと同様の画面が表示され、カレンダーも一見同じように動作します。しかし、日付クリック時にページ全体の更新がかからないほか、ブラウザの「戻る」ボタンが利用できないことがわかるでしょう。

つまり、上記の変更によってテキストボックスの中身だけが部分的に更新できるようになったのです。このようにVS2008では、従来のWebアプリケーション資産を活用し、簡単にAjax対応を行うことができます。

さらにVS2008上で詳細なデザインも可能です。Calendarをクリックし、さらにスマートタグの「(?)」をクリックして「オートフォーマット」からデザインを変更します。またTextBoxをクリックした上で「表示 → スタイルの管理 → 新しいスタイル」メニューを選択し、「枠線」の「border-style」を変更してみましょう。最後にダイアログ右上の「新しいスタイルをドキュメントの選択範囲に適用する」を選択し、OKボタンをクリックします。

このようにスタイルを適応するだけでTextBoxの枠線が変化し、随分と印象が違う画面に変更することもできます。これらの機能によって、VS2008ではスタイルの管理や適用を容易に行うことが可能です。

今回はASP.NETアプリケーションの開発を通じて、さまざまな機能を体験しました。実践を通して、Webアプリケーション開発の基礎からVS2008の最新機能までを理解できたことと思います。

次回はVS2008を使ったWPFアプリケーションの開発について解説します。


前のページ  1  2  3


マイクロソフト株式会社 馬田 隆明
著者プロフィール
マイクロソフト株式会社  馬田 隆明
2007年、マイクロソフト株式会社に入社。Visual StudioプロダクトマネージャとしてVisual StudioやPopflyのマーケティングに携わる。両製品を通して、開発者層の拡大と最新技術の普及に尽力する。


この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。

INDEX
第3回:Webアプリケーション開発と簡単Ajax化
  リッチなコンテンツの普及によりWeb開発のハードルが上がった
  コードビハインドで明瞭さを保持する
エラーの表示とデバッグ
今こそ聞きたいVisual Studio 2008の基礎の基礎
第1回 再発見Visual Studioの魅力
第2回 4つのアプリケーションを開発してみる
第3回 Webアプリケーション開発と簡単Ajax化
第4回 WPFで作るWindowsアプリケーション
関連記事
Visual Studio 2008が変える!デジタルワークスタイル像
次世代データアクセステクノロジー
チーム開発ここまできた、個人からチームの生産性向上へ