第4回：ASP.NET AJAXを実際に使用する手順 (1/4)

TOP＞システム開発＞ ASP.NET AJAXでUpdatePanelが使えないケース

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

第４回：ASP.NET AJAXを実際に使用する手順
著者：日立ソフトウェアエンジニアリング宮崎昭世 2007/4/20

ASP.NET AJAXでUpdatePanelが使えないケース

   「第３回：ASP.NET AJAXを使ってWebページを作成する」では、UpdatePanel／UpdateProgressコントロールを使って画面遷移をともなわずに画面の表示内容を書き換えるWebページを作成しました。非常に簡単にAjaxのWebページの作成が可能なことが理解いただけたかと思います。

   ただし、UpdateProgressコントロールは複数のUpdatePanelコントロールと組み合わせた場合、意図しない時に「処理中」の表示が行われることがあります。

   また、図1のように表示する際に綺麗に整列させる目的でTableタグを使う場合には対応できません。

図1：UpdatePanelコントロールを単純に使うと対応できないページの例
（画像をクリックすると別ウィンドウに拡大図を表示します）

図1ではUpdatePanel内に含めたいコントロールが複数のカラムにまたがっています。そのため、前回説明した方法ではUpdatePanelコントロールを貼りつけることができないのです。

今回はこのような場合の対応方法について解説していきます。

今回試す内容の準備

まず、今回作成するページのレイアウトを作成します。Microsoft Visual Web Developer 2005 Express Editionを起動し、新しいWebサイトを作成します。テンプレートは「ASP.NET AJAX-Enabled Web Site」を選択し、場所と言語は任意で入力してください。

自動生成されたページ（Default.aspx）の<div>〜</div>タグ内に下記のコードを記述してください。

デザインブロックに追記するコード（Default.aspx）


		<table>

		   <tr>

		      <td>氏名</td>

		      <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>

		   </tr>

		   <tr>

		      <td>郵便番号</td>

		      <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

		<asp:Button ID="Button1" runat="server" Text="住所仮定" /></td>

		   </tr>

		   <tr>

		      <td>住所</td>

		      <td><asp:TextBox ID="TextBox3" runat="server" Width="300px"></asp:TextBox></td>

		   </tr>

		   <tr>

		      <td>電話番号</td>

		      <td><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>

		   </tr>

		   <tr>

		      <td></td>

		      <td><asp:Button ID="Button2" runat="server" Text="登録" />

		<asp:Button ID="Button3" runat="server" Text="キャンセル" /></td>

		   </tr>

		</table>

デザイン表示に切り替えたときに、図2のように表示されれば問題ありません。

図2：今回使用するページ

また、住所仮定ボタンのイベントハンドラに下記のコードを追加してください。

住所仮定ボタンのイベントハンドラのコード（C#）


		protected void Button1_Click(object sender, EventArgs e)

		{

		   if (TextBox2.Text == "1400001")

		   {

		      TextBox3.Text = "東京都品川区北品川";

		   }

		   else if (TextBox2.Text == "1400002")

		   {

		      TextBox3.Text = "東京都品川区東品川";

		   }

		}

これで、準備は完了です。

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/

INDEX
第4回：ASP.NET AJAXを実際に使用する手順
	ASP.NET AJAXでUpdatePanelが使えないケース
	UpdatePanelを使ってみる
	UpdateProgressを使ってみる
	ScriptManagerとScriptManagerProxyについて

試せばわかる！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コントロール

タイプ

連載

特集

第4回：ASP.NET AJAXを実際に使用する手順 (1/4)

人気記事トップ10

新着記事

企画広告も役立つ情報バッチリ！ Sponsored