Question

I have a few scattered <p> elements on the aspx page which I am grouping together using a class like so – <p class="instructions" runat="server">

In my code behind, using C# I want to hide these elements, using something like
instructions.Visible = false;

However I realize I can only do this in codebehind if I use ID but this will result in invalid HTML/CSS Selector since you can’t have multiple ID’s with the same ID name…

Alternatively is there another way to group the controls if not by class?

EDIT: I can’t use JavaScript, so the selection must be done in C# codebehind/ASP.NET

Answer 1

Aside from grouping all of the controls in a single container control, there is no easy way to find a group of controls given some property in ASP.NET server-side code.

On the client side, you could use something like jQuery to find these elements and hide them:

$(".instructions").hide();

I would probably do this in response when the page is fully loaded:

$(document).ready(function() { 
   $(".instructions").hide(); 
});

One downside to hiding elements in Javascript is that if there’s enough data it may take a second and cause content to flicker. Another difference is that hiding content client-side does not remove it from the DOM – the content is there just hidden. Hiding controls server-side prevents their content from even being emitted to the HTML.

Doing the same thing in C# is a bit harder – it requires recursively traversing the control tree and looking for elements in the Control collection that match. This is a common enough operation that a utility function is useful. C# iterator syntax (yield return) is helpful in making this clean:

// utility method to recursively find controls matching a predicate
IEnumerable<Control> FindRecursive( Control c, Func<Control,bool> predicate )
{
    if( predicate( c ) )
        yield return c;

    foreach( var child in c.Controls )
    {
        if( predicate( c ) )
            yield return c;
    }

    foreach( var child in c.Controls )
        foreach( var match in FindRecursive( c, predicate ) )
           yield return match;
}

// use the utility method to find matching controls...
FindRecursive( Page, c => (c is WebControl) && 
                          ((WebControl)c).CssClass == "instructions" );

Hiding the controls now is relatively easy:

foreach( WebControl c in FindRecursive( Page, c => (c is WebControl) && 
                           ((WebControl)c).CssClass == "instructions" ) )
{
    c.Visible = false;
}