Visible=”false” vs. display:none;

I find that when you are a new programmer or a programmer using a technology for the first time, there are a few gotchas’ that could make or break your learning experience.  When learning the power of .NET, especially after developing primarily in PHP,  the differences between Visible=”false” and display:none; was a huge gotcha for me.   I figured I’d help you realize what exactly the differences are and when you should use one or the other.  Take the source code:

<asp:Panel style="display:none;">
Error Message
</asp:Panel>

and

<asp:Panel Visible="false">
Error Message
</asp:Panel>

If you were to render both of these, you would see the screen the same thing: nothing.  However, if you look at the source of both of them, you will realize that the former will appear in the source but the latter will not.  That’s because in the first example, command display:none is CSS, which is client-side and in the second example, “Visible” is a server-side. On more complex pages, they are very much different.

When to use the display:none;

Let’s say you have a form in which you want to hide some elements of it, entirely for user experience (perhaps you want to hide the address field in case it is optional). If you used Visible = false, the button would have to postback, run back-end code to change the visible=”true” and render back to the browser the entire page. This exercise taxes the server, and is not an optimal user experience. It would be nicer to open the box via javascript.  if you used style:none; on an element, you would just need to run display:block; in order to show it.

When to use Visible=”false”

If you will never need access to the element via Javascript, then this is the better function to use.  This way, the element will never get rendered, and therefore keep the precious bandwidth of your pages to a minimum.  Also, maybe you want to run server-side code when you restore the address field. In this case, it is better to use Visible=”false”

I hope this helps you better understand the differences between the two types of hiding elements in .NET.  If you have any questions, let me know!