Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3128
  • Last Modified:

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:

<%@ 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;
}

Open in new window


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>

Open in new window

0
Mike Eghtebas
Asked:
Mike Eghtebas
2 Solutions
 
Ess KayEntrapenuerCommented:
ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behavior of the CheckBox is unaffected.
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ToggleButton/ToggleButton.aspx
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
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
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Raghu MutalikdesaiSenior Manager in a leading IT Services companyCommented:
I recommend you read through the complete tutorial of AJAX toolkit. This is the link: http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/getting-started/get-started-with-the-ajax-control-toolkit-cs.

There are 3 steps in sequence. These appear in the left side tree view of the help:
1. Get Started with the AJAX Control Toolkit
2. Using AJAX Control Toolkit Controls and Control Extenders
3. Creating a Custom AJAX Control Toolkit Control Extender

In the Step 2, navigate to "Using AJAX Control Toolkit Control Extenders" section. This section describes how to extend a normal button's behavior. This should be your starting point.
0
 
Ron MalmsteadInformation Services ManagerCommented:
Why not just use some basic code behind logic?


private void btn1_Click(object sender, EventArgs e)
{
      btn1.enabled = false;
      btn2.enabled = true;
      btn3.enabled = true;

}

private void btn2_Click(object sender, EventArgs e)
{
      btn1.enabled = true;
      btn2.enabled = false;
      btn3.enabled = true;

}

private void btn3_Click(object sender, EventArgs e)
{
      btn1.enabled = true;
      btn2.enabled = true;
      btn3.enabled = false;

}
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
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
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
xuserx2000,

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;
        }

Open in new window

0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now