ASP.NET Visible Property

Visible determines if an element is present. It hides or shows various elements in the HTML using the C# language. It is possible to do this on the server before the page is sent.

This C# article details the use of the Visible property in ASP.NET.

Markup example

Here we look at information about the Visible property in ASP.NET. This property can completely remove an HtmlGenericControl or an HTML element with an ID set. You can use it within the markup or code-behind. Note that each tag in the following markup has runat="server" set.

Markup used for the example [ASPX]

<ul>
    <li>
	<span runat="server" id="FeaturedCountSpan1" />
	featured articles focusing on C# and .NET programming
    </li>

    <li runat="server" id="CategoryListItem1">
	<span runat="server" id="CategoryCountSpan1" /> <b>
	<a runat="server" id="CategoryLink1"/></b> articles similar to this one
    </li>

    <li runat="server" id="RssListItem1">
	An <a runat="server" href="~/Feed.aspx">RSS feed</a>
	<img src="~/FeedIcon4.png" runat="server" alt="RSS feed"
	    width="12" height="12" />
	that is kept up-to-date
    </li>
</ul>

Implement code-behind

We need to use code-behind in the .cs file to change the visibility of the elements that have runat="server" and an ID. In ASP.NET, the element ID is used for the code-behind and not for the CSS. So don't try to add CSS rules for ASP.NET ID properties.

Code-behind statements [C#]

/// <summary>
/// Use code-behind to manipulate ASP.NET elements programmatically.
/// We reference elements by their ID set in the aspx page.
/// Every element used must be runat="server".
/// </summary>
private void SetBottomList()
{
    FeaturedCountSpan1.InnerHtml = "50";

    if (_isRoot == false)
    {
	CategoryCountSpan1.InnerHtml = countCat.ToString();
	CategoryLink1.InnerHtml = categoryName;
	CategoryLink1.HRef = ResolveUrl("~/") + "#" + categoryId;

	RssListItem1.Visible = false;
    }
    else
    {
	CategoryListItem1.Visible = false;
	BottomSiteLink1.HRef = null;
    }
}

Output HTML

What HTML will the code output? The following is what the above code-behind could roughly produce when used with the first markup. The page is the root page so its CategoryListItem1 element was completely erased by setting Visible = false.

Page output [HTML]

<ul>

    <li>
	<span id="ctl00_FeaturedCountSpan1">50</span>
	featured articles focusing on C# and .NET programming
    </li>

    <li id="ctl00_RssListItem1">
	An <a href="feed">RSS feed</a>
	<img src="FeedIcon4.png" alt="RSS feed" width="12" height="12" />
	that is kept up-to-date
    </li>

</ul>

Summary

We saw how the Visible property can make pages much more flexible and object-oriented. ASP.NET has the capability of being object-oriented. It can treat runat server elements with an ID set as proper objects and manipulate them easily. This is core to the principles of ASP.NET and a useful thing to understand.