Solved

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

Posted on 2014-07-27
8
2,379 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 25

Accepted Solution

by:
Ron M 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now