Solved

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

Posted on 2014-07-27
8
2,525 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 33

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 33

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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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 33

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 33

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 33

Author Comment

by:Mike Eghtebas
ID: 40227033
0

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

810 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