How to change the color of a button based on drop down list selection in ASP.net web forms?

Question

I have a drop down list with a few list items inside it and I have a button and I want to change the color of that button based on the drop down list selection. Every selection will give a different color to the button.

I have this selectedindexchange event but is not working:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (DropDownList1.SelectedItem.Text == "jim.rumdner@gmail.com")
    {
        Button1.BackColor = System.Drawing.Color.Blue;
    }
    else if (DropDownList1.SelectedItem.Text == "alon_gk@netvision.net.il")
    {
        Button1.BackColor = System.Drawing.Color.Green;
    }
    else if (DropDownList1.SelectedValue == "ohad_jl@internet-zahav.co.il")
    {
        Button1.BackColor = System.Drawing.Color.Red;
    }
    else if (DropDownList1.SelectedValue == "nirho_fg@walla.com")
    {
        Button1.BackColor = System.Drawing.Color.Yellow;
    }
    else if (DropDownList1.SelectedValue == "yidhj_ry@yahoo.com")
    {
        Button1.BackColor = System.Drawing.Color.White;
    }
    else if (DropDownList1.SelectedValue == "kit_ru@hotmail.com")
    {
        Button1.BackColor = System.Drawing.Color.Black;

    }

a drop down list:

<asp:DropDownList ID="DropDownList1" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" runat="server">
    <asp:ListItem value="blue">amir.tuchner@gmail.com</asp:ListItem>
    <asp:ListItem Value="Green">alon_gk@netvision.net.il</asp:ListItem>
    <asp:ListItem Value="Red">ohad_jl@internet-zahav.co.il</asp:ListItem>
    <asp:ListItem Value="yellow">nirho_fg@walla.com</asp:ListItem>
    <asp:ListItem Value="white">yidhj_ry@yahoo.com</asp:ListItem>
    <asp:ListItem Value="black">kit_ru@hotmail.com</asp:ListItem>
</asp::DropDownList>

And a button:

enter code here<asp:Button ID="Button1" runat="server" style="background-color:aqua" Text="Send and Receive" BackColor="#FF3399" />

What can I do to make it work?

Answer 1

In your DropDownList you have set the AutoPostBack property to true . So every time you change the selection, a postback to the server will be make.

This will force the page to reload.

But you have defined an inline style for your Button . Every inline style defined will override the styles you have made by your postback, because the page is rendered and then the styles will be applied.

In your CodeBehind, you check for DropDownList1.SelectedItem.Text and for some conditions you check for DropDownList1.SelectedValue .

Just update your code...

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{        
if (DropDownList1.SelectedItem.Text == "jim.rumdner@gmail.com")
        {
            Button1.BackColor = System.Drawing.Color.Blue;
        }
        else if (DropDownList1.SelectedItem.Text == "alon_gk@netvision.net.il")
        {
            Button1.BackColor = System.Drawing.Color.Green;
        }
        else if (DropDownList1.SelectedItem.Text == "ohad_jl@internet-zahav.co.il")
        {
            Button1.BackColor = System.Drawing.Color.Red;
        }
        else if (DropDownList1.SelectedItem.Text == "nirho_fg@walla.com")
        {
            Button1.BackColor = System.Drawing.Color.Yellow;
        }
        else if (DropDownList1.SelectedItem.Text == "yidhj_ry@yahoo.com")
        {
            Button1.BackColor = System.Drawing.Color.White;
        }
        else if (DropDownList1.SelectedItem.Text == "kit_ru@hotmail.com")
        {
            Button1.BackColor = System.Drawing.Color.Black;

        }
}

Instead of using a lot of if/else, you should use the switch statement adn check for the DropDownList1.SelectedValue ...

switch (DropDownList1.SelectedValue)
        {
            case "blue":
                Button1.BackColor = System.Drawing.Color.Blue;
                break;
            case "green":
                Button1.BackColor = System.Drawing.Color.Green;
                break;
            case "red":
                Button1.BackColor = System.Drawing.Color.Red;
                break;
            case "yellow":
                Button1.BackColor = System.Drawing.Color.Yellow;
                break;
            case "white":
                Button1.BackColor = System.Drawing.Color.White;
                break;
            case "black":
                Button1.BackColor = System.Drawing.Color.Black;
                break;
            default:
                Button1.BackColor = System.Drawing.Color.Gray;
                break;
        }

... this will make it easier to read and maintain. Finally, remove the inline style of your button.

<asp:Button ID="Button1" runat="server" Text="Send and Receive" BackColor="#FF3399"/>