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




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

第４回：ASP.NET AJAXを実際に使用する手順
著者：日立ソフトウェアエンジニアリング  宮崎 昭世   2007/4/20
1   2  3  4  次のページ
ASP.NET AJAXでUpdatePanelが使えないケース

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

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

   また、図1のように表示する際に綺麗に整列させる目的でTableタグを使う場合には対応できません。
UpdatePanelコントロールを単純に使うと対応できないページの例
図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/
この記事の評価をお聞かせください
 ボタンをクリックしますとウインドウが開きます。
 ご意見、ご要望にお応えします！ インプレスIT INSIDE
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コントロール

Think IT 過去人気記事

Think IT
注目おすすめ情報

Think IT人気ライター BEST 5

People
IT製品/サービス資料ダウンロード
    おすすめのホワイトペーパー情報を準備中です