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 Visible="false">
Error Message

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!

ModalPopupExtender .Show() Caveat

I’ll admit it… I don’t mind AJAX.NET.  In fact, I like a lot of the toolkit controls they provide.  Because I am “chained” to .NET and DotNetNuke, I don’t much of a choice when it comes to bleeding-edge technology.

One thing I tend to use frequently is the ModalPopupExtender.  I had a requirement to show the modal popup when the page loads.  Easy enough, I just instansiate the code and in the onLoad code-behind do mpe.Show().

However, this didn’t work It gave me an ugly error.  After sifting through a bunch of unhelpful forum posts online, I came across this issue in the AJAX Control Toolkit issue tracker.  Reading through the description, you notice that the problem has to do with the fact that there is a missing semi-colon if you try to invoke the modal through server-side on a page with validation.

Because the modal I was programming would not need the validation on the page, I simply turned off validation when the modal was invoked.  This worked like a charm.  If you require validation with the modal, I strongly suggest you check out the issue tracker page.