0

I have made a user control (.ascx) consisting of a div containing six buttons. It has a string attribute "selectedButton" containing the value of the ID of one of the buttons.

What i would like to do is to be able to change the backcolor of the button whose ID corresponds to the selectedButton attribute when the page loads.

Right now I'm doing a switch in the ascx.cs on the value of the selectedButton attribute, like so :

switch (selectedButton)
{
  case "Button1":
  Button1.BackColor = System.Drawing.ColorTranslator.FromHtml("#00CC00");
  break;
  //etc...
}

It works, but that doesn't seem very efficient, nor is it dynamic should i ever have more buttons.

I've tried putting this in the ascx source :

<script type="text/javascript">
    var sb = document.getElementById("<%=this.selectedButton %>");
    sb.BackColor = System.Drawing.ColorTranslator.FromHtml("#00CC00");
</script>

But without any results.

Thanks in advance.

Streltsov
  • 417
  • 1
  • 6
  • 14

4 Answers4

1

The answer depends on what the selectedButton contains. If it contains server-side ID (and from your code snippet that seems to be the case), than you can use FindControl in code behind:

Button button = this.FindControl(selectedButton) as Button;
if (button != null)
{
    button.BackColor = System.Drawing.ColorTranslator.FromHtml("#00CC00");
}

If however selectedButton contains client-side ID (the one that ASP.NET generates for each control), then you should go with some javascript:

<script type="text/javascript">
    var sb = document.getElementById("<%= this.selectedButton %>");
    sb.style['background-color'] = '#00CC00';
</script>
Andrei
  • 55,890
  • 9
  • 87
  • 108
  • The first part of your answer is exactly what i was searching for. I'm starting with ASP.Net and thus the notions of server-side and client-side are still a little foggy. It works great, thanks a lot ! – Streltsov Mar 14 '13 at 16:02
  • @PrimsFr, you might want to check out a thing or two about request life cycle and page life cycle - these are basics of webdev and ASP.NET. – Andrei Mar 14 '13 at 16:17
0

You are trying to mix serverside with clientside code. That won't work.

If you want this to be changed on the client without the roundtrip back to the server, use pure javascript. This means you cannot use this.selectedButton, System.Drawing.ColorTranslator or any other C# code here.

Use a pure javascript solution instead to change the color, you will find plenty on how to that.

magnattic
  • 12,638
  • 13
  • 62
  • 115
0

try this:

<script type="text/javascript">
    var sb = document.getElementById("<%=this.Button1.ClientID %>");
    sb.style.backgroundColor =  "<%= System.Drawing.ColorTranslator.FromHtml("#00CC00") %>)";
</script>

Found that here: http://forums.asp.net/t/1320687.aspx/1

But this SO post is what I was actually looking for: Passing ASP.NET client IDs in to a javascript function

They use uniqueID but from memory, ClientID is the correct solution.

Community
  • 1
  • 1
Mike C.
  • 3,024
  • 2
  • 21
  • 18
  • I believe it has worked, and will continue to work. Well, you have to concatenate properly, which I don't believe I've done here, let me update it. – Mike C. Mar 14 '13 at 15:52
  • 1
    Ok then, I would love to see how you execute the second line of pure C# in a js interpreter. – magnattic Mar 14 '13 at 15:54
  • @atticae good point. I also focused on the first line and didn't even notice that the second line was c# ;-) – jbl Mar 14 '13 at 15:57
  • oh is that what your comment was about. Yeah that's not going to work. I'm just talking about clientID part. You are completely correct. – Mike C. Mar 14 '13 at 15:57
0

use clientClick to invoke a method to change the color and pass the clientId value , with .style.background = color; using javascript, here more information How do I change the background color with JavaScript?

Community
  • 1
  • 1
Byron
  • 301
  • 5
  • 21