Since ASP.NET 1.0 you had the ability to toggle the visibility of any HTML tag with the runat=”server” attribute.
The only prerequisite is to add the runat=”server” and ID attributes, but that is not always possible or desirable.
If you add elements dynamically to the DOM tree using JavaScript it is impossible and if you have a lot of elements to toggle individually it may not be desirable.
A way to accomplish the visibility toggle of non-server elements is to use JavaScript to do the trick, but we also want to be able to do it server-side from the code-behind.
It can be done by adding a few methods to the Page, master page, user controls or a custom base page.
We need a method to show elements and one to hide elements and then a private method to write out the correct JavaScript.
From the code-behind we can then call the methods to show and hide UI elements as shown in the following code snippets.
HideElements("name", "email");
ShowElements("name");
The JavaScript being generated from the above code snippets looks like this:
<script type="text/javascript">
<!--
document.getElementById('name').style.display='block';
document.getElementById('email').style.display='none';
// -->
</script>
The Code
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
RegisterScript();
}
/// <summary>
/// Displays a hidden element on the page.
/// </summary>
/// <param name="id">The Id's of the elements to show.</param>
protected virtual void ShowElements(params string[] id)
{
foreach (string s in id)
{
Elements[s] = true;
}
}
/// <summary>
/// Hides a hidden element on the page.
/// </summary>
/// <param name="id">The Id's of the elements to hide.</param>
protected virtual void HideElements(params string[] id)
{
foreach (string s in id)
{
Elements[s] = false;
}
}
/// <summary>
/// Writes the JavaScript to the page if any elements
/// have been added to the collection.
/// </summary>
private void RegisterScript()
{
if (ViewState["Elements"] != null && Elements.Count > 0)
{
StringBuilder sb = new StringBuilder();
foreach (string key in Elements.Keys)
{
string display = Elements[key] ? "block" : "none";
sb.AppendFormat("document.getElementById('{0}').style.display='{1}';{2}", key, display, "n");
}
ClientScript.RegisterStartupScript(this.GetType(), "toggleelements", sb.ToString(), true);
}
}
/// <summary>
/// The collection of elements to show or hide.
/// </summary>
private Dictionary<string, bool> Elements
{
get
{
if (ViewState["Elements"] == null)
ViewState["Elements"] = new Dictionary<string, bool>();
return ViewState["Elements"] as Dictionary<string, bool>;
}
}
Implementation
Download the BasePage.cs below and add it to the App_Code folder.
Then make sure that the pages where you want this functionality inherits from BasePage instead of System.Web.UI.Page.
That’s all you need to do to make it work. You can also take the method used in the BasePage.cs and add them manually to the page, master page or user control.
Download
Tag:
Add to 
Bookmark Murdok:
Mads Kristensen currently works as a Senior Developer at Traceworks located
in Copenhagen, Denmark. Mads graduated from Copenhagen Technical Academy with a multimedia degree in
2003, but has been a professional developer since 2000. His main focus is on ASP.NET but is responsible for Winforms, Windows- and
web services in his daily work as well. A true .NET developer with great passion for the simple solution.
