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 = FalseTextBox1のコントロールはレスポンスされないので実際の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>