How do I set a table background programmatically while running an asp.net page?

Question

I have an aspx page that has one background color as the default. I need to be able to change it programmatically when a certain option of a radio button is selected. I tried setting the ID field of the table, but I can't seem to access it in my C# code behind file.

My original table is:

<table id="tblSheet" runat="server" style="border-color: #FF9900; border-style: solid; 
border-width:  thin; width:100%; background-color: #99ccff;" cellspacing="4" 
cellpadding="1">

I don't see the id in my intellisense, though.

Edit:
Now that I can see my table in my code behind, I'm trying to actually change the background color. Here is the code for my radiobuttonlist:

<asp:RadioButtonList ID="rdoStatus" runat="server" AutoPostBack="true"
RepeatDirection="Horizontal" Visible="true"   
OnSelectedIndexChanged="rdoStatus_OnSelectionChanged">
<asp:ListItem Value="181001" Text="Open"/>
<asp:ListItem Value="181002" Text="Closed" />
<asp:ListItem Value="181003" Text="Pending" />
</asp:RadioButtonList>

I'm hitting the breakpoint I set in the event handler, but the background color is not changing on postback. If the item chosen is Pending, then I want to change the background color to something different. If they change the radio button to Open Or Closed, then I want to make sure the background color is the default.

Edit 2:
The code in my event handler is very simple:

if (rdoStatus.SelectedValue == "181003")
{
  tblSheet.BgColor = "#ff9a9a";
}
else
{
  tblSheet.BgColor = "#99ccff";
}

Answer 1

Place runat="server" in the table tag

Once you've done that you'll be able to access the table programmatically.

To change the background color directly, try:

if (rdoStatus.SelectedValue == "181003")
    {
      tblSheet.Style.Add("background-color", "#ff9a9a");
    }
    else
    {
      tblSheet.Style.Add("background-color", "#99ccff");
    }

if you're using stylesheets you can, try this:

if (rdoStatus.SelectedValue == "181003")
{
  tblSheet.CssClass = "default_color"
}
else
{
  tblSheet.CssClass = "other color"
}

Answer 2

First of all you cannot see the Table because there is no runat="server" attribute of table which allows you to see ID, second of all you won't be able to change a colour of the table even if you see the Table in your code. Even if you will access table's attributes and set a colour there it won't help you either because you will need to post back again to see the change.

What you need to do is to use Update panel and use a variable instead of #FF9900, this way default colour will be Red or whatever colour it is and on check event of checkbox you will change the value to Green or other colour.

Answer 3

Are you triggering the postback that will make this change directly from the radio button?
Is this the only thing that changes at this time?

If the answer to both of those is "yes", you should consider doing this all in javascript instead and skipping the postback entirely:

<input type="radio" value="..." name="..." id="..."
    onclick="document.getElementById('tblSheet').style.backgroundColor = '#99ccff';" />

The reasoning here is that postbacks are incredibly slow compared to keeping everything on the client, and they also hurt the ability of your web app to scale as easily (more work on the server is, of course, bad for scalability). So it's faster for the user and less work for your server.

However, you need to be careful to also not lose functionality for users that have javascript disabled when moving work off the server. But if this postback was already triggered by your radio button then you were already dependent on javascript for this feature.

Answer 4

Like Joel told, JavaScript is a better solution if you only need to change colors but and if you transform your table into a server control (using runat=server in your table or another server control) don't forget to use an embedded code block in getElementById to retrieve the table id because ASP.NET rename id's when it renders the page.

In Joel's example it will look like:

<input type="radio" value="..." name="..." id="..."    onclick="document.getElementById('<% =tblSheet.ClientID%>').style.backgroundColor = '#99ccff';" />

Answer 5

I got it working!
I changed the table to the following (I removed the background-color):

<table id="tblSheet" runat="server" style="border-color: #FF9900; border-style: solid; 
border-width: thin; width:100%;" cellspacing="4" cellpadding="1">

Then in my code behind I set the background color in the Page_Load when it's not a postback:

tblSheet.Bgcolor = "#99ccff";

Voila! The radiobuttonlist and event handler are the same as in the question. The postback was changing the color back to the original. Thanks for everyone's help!