Solved

How to make 3 buttons to work like toggle button - asp.net c#

Posted on 2014-07-27
8
2,591 Views
Last Modified: 2014-07-29
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
Comment
Question by:Mike Eghtebas
8 Comments
 
LVL 15

Expert Comment

by:Ess Kay
ID: 40223136
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40223148
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40223194
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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 7

Assisted Solution

by:Raghu Mutalikdesai
Raghu Mutalikdesai earned 150 total points
ID: 40223731
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
 
LVL 25

Accepted Solution

by:
Ron Malmstead earned 350 total points
ID: 40225840
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40226053
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
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 40226093
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40227033
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question