Mike Eghtebas
asked on
How to make 3 buttons to work like toggle button - asp.net c#
I have 3 buttons (btn1, btn2, and btn3). How can I make these button function like toggle button does?
Thank you.
Here is starter code:
Optionally, add css to the following so that the radio buttons are replaced with just buttons.
Thank you.
Here is starter code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="toggleButton.aspx.cs" Inherits="toggleButton" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="style/masterPage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btn1" runat="server" Text="Button 1" />
<asp:Button ID="btn2" runat="server" Text="Button 2" />
<asp:Button ID="btn3" runat="server" Text="Button 3" />
</div>
</form>
</body>
</html>
css:
#btn1, #btn2, #btn3
{
Height:30px;
Width:103px;
margin: 2px auto 2px auto;
}
#btn1, #btn2, #btn3
{
background: #297cb3;
background-image: -webkit-linear-gradient(top, #297cb3, #47a1d9);
background-image: -moz-linear-gradient(top, #297cb3, #47a1d9);
background-image: -ms-linear-gradient(top, #297cb3, #47a1d9);
background-image: -o-linear-gradient(top, #297cb3, #47a1d9);
background-image: linear-gradient(to bottom, #297cb3, #47a1d9);
-webkit-border-radius: 6;
-moz-border-radius: 6;
-webkit-box-shadow: 1px 2px 4px #797999;
-moz-box-shadow: 1px 2px 4px #797999;
border-radius: 6px;
box-shadow: 1px 2px 4px #797999;
font-family: Arial;
color: #ffffff;
font-size: 16px;
padding: 7px;
border: solid #1f628d 0px;
text-decoration: none;
}
.buttonPressed /* this could be used for the pressed button if practical*/
{
background: #3476d9;
background-image: -webkit-linear-gradient(top, #3476d9, #2b53b8);
background-image: -moz-linear-gradient(top, #3476d9, #2b53b8);
background-image: -ms-linear-gradient(top, #3476d9, #2b53b8);
background-image: -o-linear-gradient(top, #3476d9, #2b53b8);
background-image: linear-gradient(to bottom, #3476d9, #2b53b8);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
box-shadow: 1px 2px 4px #797999;
font-family: Arial;
color: #ffffff;
font-size: 16px;
padding: 7px;
border: solid #1f628d 0px;
text-decoration: none;
}
#btn1:hover, #btn2:hover, #btn3:hover
{
background: red;/*#7bb9e0;*/
background-image: -webkit-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: -moz-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: -ms-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: -o-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: linear-gradient(to bottom, #7bb9e0, #4fa5db);
text-decoration: none;
}
Optionally, add css to the following so that the radio buttons are replaced with just buttons.
<asp:Panel ID="Panel1" GroupName="opt" runat="server">
abc
<asp:RadioButton ID="rb1" GroupName="opt" Checked="true" runat="server" />
<asp:RadioButton ID="rb2" GroupName="opt" runat="server" />
<asp:RadioButton ID="rb3" GroupName="opt" runat="server" />
</asp:Panel>
ASKER
If the toggle extender can take the shape and of the button and accept the .buttonPressed css setting, that will be wonderful. I am reading through it.
Mike
readioButton2.png
Mike
readioButton2.png
ASKER
After dropping and UpdatPanel from AJAX Extensions tab, I am trying to drag and drop ToggleButtonExtenders from AJAX Toolkit tab, but nothing happens? I am working in studio 2010 professional.
What could the problem be? Do I need to register or setup AJAX first?
Mike
What could the problem be? Do I need to register or setup AJAX first?
Mike
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
xuserx2000,
This was exiting because the disabled button usually change its appearance; but with the existing css I am using, its looks doesn't change at all.
All that matters is to have the appearance to change a bit. I tried with css removed, its appearance changes but not much. I think it instead of using a central css file, if I was possible to apply colors, themes etc via property sheet, we will experience considerable change in how it looks when a button is disabled.
I will try to see it I can give some good looks to the buttons via property sheet.
Another option will be to have an invisible label of some sort sitting on the buttons, id possible at all. Now upon click the button becomes invisible while the label (in different color) becomes visible. Or some other crazy solution like this.
Thanks,
Mike
This was exiting because the disabled button usually change its appearance; but with the existing css I am using, its looks doesn't change at all.
All that matters is to have the appearance to change a bit. I tried with css removed, its appearance changes but not much. I think it instead of using a central css file, if I was possible to apply colors, themes etc via property sheet, we will experience considerable change in how it looks when a button is disabled.
I will try to see it I can give some good looks to the buttons via property sheet.
Another option will be to have an invisible label of some sort sitting on the buttons, id possible at all. Now upon click the button becomes invisible while the label (in different color) becomes visible. Or some other crazy solution like this.
Thanks,
Mike
ASKER
xuserx2000,
You got it. This is what I will use. I tested the following code and it works fine:
You got it. This is what I will use. I tested the following code and it works fine:
if (Session["pressedButton"] != null)
{
string strButton = Session["pressedButton"].ToString();
Button btn = (Button)this.FindControl(strButton);
btn.BackColor = Color.Orange;
}
ASKER
Here is the limk for a folloup question:
https://www.experts-exchange.com/questions/28486190/reset-button-background-color-c.html
Thanks
https://www.experts-exchange.com/questions/28486190/reset-button-background-color-c.html
Thanks
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ToggleButton/ToggleButton.aspx