If I set some control's property Visible="false", I cant see the control in the HTML generated of my aspx page. But when I use display:none in style tag for that control, I see the control as greyed out in the HTML. Why is that?
Also, If I find some control that is not needed on the page anymore:-
What would be the best approach keeping in mind the time constraint and page's heaviness?
Below is the HTML that was generated of my test page:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<form id="form1" action="testvisibility.aspx" method="post" name="form1">
<div>
<input id="__VIEWSTATE" type="hidden" value="/wEPDwUKMTY2NDk3NDQzNQ9kFgICAw9kFgQCBw8PFgIeB1Zpc2libGVoZGQCCQ8WAh4Fc3R5bGUFDWRpc3BsYXk6bm9uZTtkZEjYzMWMovvrGmuSrQHwc5ZXgqXCrf+lekz1GgsdjUd+" name="__VIEWSTATE">
</div>
<div>
visiblelabel::
<span id="visiblelabel">visiblelabel</span>
<br>
labelwithvisiblefalseonaspx::
<br>
labelwithdisplaynoneonaspx::
<div style="display: none;">
<span id="labelwithdisplaynoneonaspx">labelwithdisplaynoneonaspx</span>
</div>
<br>
labelwithvisiblefalseonserverside::
<br>
labelwithdisplaynoneonserverside::
<div id="divforlabelwithdisplaynoneonserverside" style="display: none;">
<span id="labelwithdisplaynoneonserverside">labelwithdisplaynoneonserverside</span>
</div>
<br>
</div>
</form>
</body>
</html>
If you want to dynamically show or hide the control via Ajax/etc, or if the control contains information your page needs, set display:none
in CSS.
If you don't want to render the control at all in certain situations, set Visible="false"
. Since it keeps the control's HTML out of the page, it makes for slightly smaller pages -- but if you want to show the control via Ajax/etc, this won't work.
If you don't want to render the control at all, period, don't comment it out -- remove it altogether. All controls, visible or not, still require processing, so Visible=false is wasting CPU (and possibly causing side effects) if you never intend to render the control. And you really don't want lots of commented-out stuff floating around; it just makes maintenance harder. You can always get it back from your revision control if you find you do need it later. (You are using SVN/Git/CVS/something, right?)
The Visible
property is a property on the control - when set to false the control doesn't render at all. This is much better then setting display:none
, in which case the control is rendered with a display:none
style, so that the browser won't display it.
The display:none
can be useful if you don't want the control to be visible, but it contains some data that you want to use on the client (through Javascript, say). In such a case setting the Visible
property to false won't work.
I can't say which one is better, it's depend on situation. If you want to use that control in client site (i.e. wants to access the control by JavaScript) , you have to set the display to none. But if you don't need it in client-side its better to set the visible to false.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With