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




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

第4回:ASP.NET AJAXを実際に使用する手順

著者:日立ソフトウェアエンジニアリング  宮崎 昭世   2007/4/20
1   2  3  4  次のページ
ASP.NET AJAXでUpdatePanelが使えないケース

   「第3回: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/



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

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コントロール