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>
JavaScript
でTextBox1
のコントロールを参照しようとしますが、取得できずにスクリプトエラーになってしまいます。
JavaScript
で参照したい場合はdisplay:none
で非表示にする必要があります。
<div>
<input type="text" id="TextBox1" runat="server" style="display:none;">
</div>
<script>
alert(document.getElementById('TextBox1').value); // OK
</script>