Solved

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

Posted on 2014-07-27
8
2,785 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

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!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

691 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