コントロールに初期値を設定すると入力した値が反映されない - シンプルなポストバックの利用 - ASP.NET

ASP.NETのWebフォームでコントロールに初期値を設定すると、UIで値を変更したにもかかわらず値が反映されないことがあります。

現象の再現

問題となる現象を再現してみます。

UI

以下のUIを準備します。WebフォームにLabe, TextBox, Buttonを1つずつ配置します。

default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="SimplePostback._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
      <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
      <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" style="height: 21px" /><br />
    
    </div>
    </form>
</body>
</html>

コード

以下のコードを記述します。
default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace SimplePostback
{
  public partial class _default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      TextBox1.Text = "くじら";
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Label1.Text = TextBox1.Text;
    }
  }
}

解説

Page_Load

ページのLoadイベントが発生した際に、テキストボックスの値を"くじら"で初期化します。

Button1_Click

ボタンがクリックされた際に、テキストボックスに入力された文字をラベルに表示します。
ページ表示時にテキストボックスが"くじら"で初期化されているが、テキストボックスの値を変更してボタンをクリックすると変更した値がラベルに表示される動作を期待しています。

実行結果

プロジェクトを実行します。下図の画面が表示されます。


テキストボックスの"くじら"を"ペンギン"に変えます。変更後[Button]を押します。


ページが切り替わりますが、ラベルには"くじら"の文字列が表示されます。テキストボックスの値も"くじら"に初期化されてしまっています。


他のワードでも同様の結果となります。


原因

ボタンがクリックされるとページが切り替わりますが、このときLoadイベントのコードが実行されテキストボックスの値が"くじら"に初期化されてしまうため、テキストボックスの内容を変更してもページ再読み込み時にはテキストボックスの内容は"くじら"に戻されてしまいます。そのため、ButtonのClickイベントのコードの実行時にはテキストボックスの内容は"くじら"になっているため、常にラベルに"くじら"が表示されてしまいます。

対策

ASP.NETのWebフォームで普通の動作でページが読み込まれた場合と、ボタンなどのクリックにより同じページが再読み込みされた場合の違いが判別できれば対処可能です。ASP.NETではページのIsPostBackプロパティの値をチェックすることで、単にページが読み込まれたのか、ボタンなどの押下によりページが読み込まれたかの判別ができます。

IsPostBackプロパティ

意味
trueボタンが押された場合などポストバックによるページの読み込みです
false通常のページ読み込みです

対策したプログラム

コード

default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace SimplePostback
{
  public partial class _default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (IsPostBack == false) {
        TextBox1.Text = "くじら";
      }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Label1.Text = TextBox1.Text;
    }
  }
}

解説

protected void Page_Load(object sender, EventArgs e)
{
  if (IsPostBack == false) {
    TextBox1.Text = "くじら";
  }
}
IsPostBackの値を確認し、IsPostBackがfalseの場合のみTextBoxの内容を初期化します。ボタンが押された場合のページ読み込みなどポストバックでのページ読み込みの際はテキストボックスは初期化されません。

実行結果

プロジェクトを実行します。下図の画面が表示されます。


テキストボックスの"くじら"の文字を"ぺんぎん"に変更します。変更後[Button]をクリックします。


ページが切り替わり、Labelに"ぺんぎん"が表示されます。テキストボックスに入力した値も"ぺんぎん"のまま保持されています。


テキストボックスの文字を別のものに変えてみます。


[Button]をクリックするとテキストボックスに入力した文字列がLabelに反映されました。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2020-02-04
作成日: 2013-05-29
iPentec all rights reserverd.