ASP.NET Visible Property

Your ASP.NET site is dynamic, and you need to hide or show various elements in the HTML using the C# language. Do this on the server before the page is sent. Here we use the Visible property in ASP.NET to simplify our dynamic site, using the C# programming language.

Using Visible markup

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.

<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>

Implementing 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.

/// <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

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 CategorListItem1 element was completely erased by setting Visible = false.

<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

Here 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 very useful thing to understand.

(Do not copy this page.)