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
BasePage.zip
(0,81 KB)