Question

I’m stumped by a seemingly simple problem. In my ASP.NET page, I have a table which has a few rows that need to be shown or hidden conditionally from the back end. Sounds simple, right?

What I tried is something like this in the front-end code:

<table>
  <tr>
    <td id="demorow1">
       <p>This row always shows up!</p>
    </td>
  </tr>
  <tr id="conditionalrow" runat="server">
    <td id="formoptionsrow">
      <!-- This row contains a number of form elements that should only SOMETIMES be shown, as determined by the back-end code. -->
    </td>
  </tr>
</table>

And in the code-behind file I just do this to hide the code:

conditionalrow.Style["display"] = "none";

This makes the row disappear as intended. I don’t mind that it’s just invisible, it won’t hurt anything. However, this has the side-effect of making several HTML form elements inside of conditionalrow gain ASP.NET’s convoluted IDs and NAMEs. This throws off a lot of Javascript functions related to the form that I don’t have time to change or rework right now. I need to be able to hide the form (or remove it from the code entirely) from the code behind file, but without changing the IDs and NAMEs of child elements.

I know there’s some kind of setting in the newer versions of ASP.NET that allows you to override ASP.NET’s ID reassignment. Unfortunately, I’m stuck with ASP.NET 2.0 and don’t have the option of using anything newer for this project. What do you recommend?

Answer 1

Instead of making the row a server side control, use a code block to give it an appropriate CSS class.

<tr class="<%:VisibilityClass%>">

Where, in your code behind you have a VisibilityClass string property that return the CSS class name:

public string VisibilityClass
{
  get 
  {
    if(shouldBeVisible)
      return "visible";

    return "hidden";
  }
}

You can also use functions if a property is not appropriate.