zukucode
主にWEB関連の情報を技術メモとして発信しています。

ASP.NET Visible=Falseとdisplay:noneの違いと注意点

ASP.NETでコントロールを非表示にするには、VisibleプロパティをFalseに設定する方法か、display:noneのスタイルを適用させる方法の2つの方法がよく使用されます。

TextBox1.Visible = False
TextBox1.style.add("display", "none")

違い

Visible = Falseを指定した場合、そのコントロールはレスポンス自体されなくなります。

一方でdisplay:noneを指定した場合、レスポンスはされますが、display:noneのスタイルにより非表示の(見えない)状態となります。

注意点

Visible = Falseを指定した場合はレスポンス自体されないので、JavaScriptの処理を行う場合は注意が必要です。

例えば以下のようにTextBox1の値を表示したいとします。

<div>
  <input type="text" id="TextBox1" runat="server">
</div>
<script>
alert(document.getElementById('TextBox1').value);
</script>

このとき、サーバー処理でVisible = Falseを指定したとします。

TextBox1.Visible = False

TextBox1のコントロールはレスポンスされないので実際のhtmlは以下のようになります。

<div>

</div>
<script>
alert(document.getElementById('TextBox1').value); // エラー
</script>

JavaScriptTextBox1のコントロールを参照しようとしますが、取得できずにスクリプトエラーになってしまいます。

JavaScriptで参照したい場合はdisplay:noneで非表示にする必要があります。

<div>
  <input type="text" id="TextBox1" runat="server" style="display:none;">
</div>
<script>
alert(document.getElementById('TextBox1').value); // OK
</script>

関連記事