button color doesnt change once clicked

I have a button called Button1, and I have the following code-behind:

string CS = ConfigurationManager.ConnectionStrings["EasyRozMoney_ConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
    con.Open();
    SqlCommand cmd = new SqlCommand("spTaskPerformed", con);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@TaskId", lblTaskId.Text);
    cmd.Parameters.AddWithValue("@Email", Session["Email"].ToString());
    cmd.ExecuteNonQuery();
    Button1.BackColor = Color.Red;
    Button1.Enabled = false;
    lblTaskPerformed.Text = "Task Completed Successfully.";
}

Everything else works fine.The button gets disabled too but it doesn't change its background color. Any suggestions?

Answer

April 21, 2014

KyleMit

Update:

The inline style on your button is preventing the background color from showing up.

Here's why:

Consider the following ASPX code:

<pre><code><asp:Button runat="server" ID="Button1" Text="Click Me!" <b>style="background-color: yellow;"</b>/> </code></pre>

This will render the following HTML:

<pre><code><input type="submit" id="MainContent_Button1" value="Click Me!" <b>style="background-color: yellow;"</b>> </code></pre>

When we add a BackColor in the code behind, it prepends an inline style into the element's style attribute. Which produces this HTML:

<pre><code><input type="submit" id="MainContent_Button1" value="Click Me!" <b>style="background-color:Red;background-color: yellow;"></b> </code></pre>

So it inserts the red color, but then the original color immediately overrides it.

To solve this, in your ASPX, use the BackColor property instead of using the background-color inline style tag. Like this:

<pre><code><asp:Button ID="Button1" runat="server" Text="Submit" <b>BackColor="#CC6600"</b> <strike>style="background-color:#CC6600;"</strike>/> </code></pre>

ASP.NET will know how to properly override this when new colors are applied.

Original:

If you had to do this in JavaScript, You can use RegisterStartupScript to send dynamic javascript code to the browser, but I suspect something else is at issue.

var script = "document.getElementById('" + Button1.ClientID + "').style.backgroundColor = 'red';";
ScriptManager.RegisterStartupScript(this, typeof(Page), "changecolor", script, true);