Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Question regarding Visible=false and display:none;

Tags:

html

c#

asp.net

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:-

  1. should I comment it out from my page?
  2. Should I set its property Visible=false"
  3. Should I set display:none?

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>
like image 353
Infinity Avatar asked Aug 02 '11 04:08

Infinity


3 Answers

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?)

like image 106
cHao Avatar answered Sep 21 '22 09:09

cHao


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.

like image 39
Petar Ivanov Avatar answered Sep 21 '22 09:09

Petar Ivanov


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.

like image 25
Peyman Avatar answered Sep 19 '22 09:09

Peyman