如何从代码后面隐藏共享相同CSS类的HTML元素？

Question

I'm creating a wizard using an ASP.NET MultiView control. On each of the views, I have a HTML table row containing the navigation buttons for the wizard ("Previous", "Next",...).

<tr class="rowNavButtons">.. Nav buttons go here ..</tr>

On the summary view of my wizard, I have an "Edit" button that will navigate to a specific view. I would like to hide the < tr > (containing the nav buttons) when in Edit mode.

The issue is that I have multiple instances of that Nav row in my MultiView, and I cannot assign an ID for each one of them. They do share a CSS class.

Is there a way to access all of the HTML elements that share the same CSS class? Is there another way to group HTML elements?

I've already took a look at the solutions described here : I cannot use JavaScript or jQuery, and the C# solution is generating a "System.StackOverflowException" lol Also, that thread is 4 yrs old so I was hoping there might be a newer solution :)

Thanks!

Answer 1

Give that row attribute runat="server"

<tr runat="server" class="rowNavButtons">.. Nav buttons go here ..</tr>

then you can access it server side. For example, assuming this is one and only such row within a View, and you need to locate it in the active View of the MultiView - you can do something like this:

HtmlTableRow tr = MultiView1.GetActiveView().Controls.OfType<HtmlTableRow>.Single();
tr.Visible = false;

But frankly - it's a hack. Do this on client side. If you cannot use jQuery - do it in plain JS, it's not much more complicated.