How_To_Create_Use_Toggle_Button

C# How to - Create and use a Toggle Button as a Web User Control
==============================================================
Part 1: Creating the Toggle Button as Web User Control.
1. Create the control by going to your Project and Add New Item -> Web User Control. (This needs to be
   a web project). Give the name WUC_ToggleButton.ascx to this control.
2. By now these files are created:
   WUC_ToggleButton.ascx  -> HTML kind of page
   WUC_ToggleButton.ascx.cs   -> where you add code
   WUC_ToggleButton.ascx.designer.cs  -> auto-generated - DO NOT touch this.
3. Double click on the WUC_ToggleButton.ascx file from Solution Explorer, then choose the Design tab.
   Open up Toolbox from View menu, and drag the Button from Toolbox, onto the design are of WUC_ToggleButton.ascx.
4. Go back to the Design view of WUC_ToggleButton.ascx and right click on the button. In the Properties panel,
   rename the button to btnToggle01.
5. Double click on th btnToggle01 and the following code will be added to the source file  WUC_ToggleButton.ascx.cs:
        protected void btnToggle01_Click(object sender, EventArgs e)
        {

        } 
6. Add the following sections of code to the WUC_ToggleButton.ascx.cs class:
********************************************************
        public event EventHandler eventToggle_On;
        public event EventHandler eventToggle_Off;

        // Toggle State
        public enum ToggleButtonState
        {
            On = 0,
            Off = 1,
        }
        public ToggleButtonState toggleState
        {
            get
            {
                if (ViewState["toggleState"] == null)
                    ViewState["toggleState"] = ToggleButtonState.On;
                return (ToggleButtonState)ViewState["toggleState"];
            }
            set { ViewState["toggleState"] = value; }
        }


        // Toggle parameters: Allow user to specify on, off labels as parameters via html link in Designer
        public string onText;
        public string offText;

        public string OnText
        {
            get { return onText; }
            set { onText = value; }
        }
        public string OffText
        {
            get { return offText; }
            set { offText = value; }
        }
********************************************************
There are 3 main sections above:
a) The Toggle State code enable us to design how the toggle operation should be carried out.
b) The Toggle Parameters enable allow the designer to specify text to describe the toggle states via the
HTML-like aspx design page (more details later). So the user of this WUC can specify "on/off", "show/hide"
to represent the states.
c) The EventHandler allow the WUC to pass control back to the main caller routine to execute specific code.

7. Add the code logic for the Click event for toggle button in WUC_ToggleButton.ascx.cs :
***********************       
        protected void btnToggle01_Click(object sender, EventArgs e)
        {
            if (this.toggleState == ToggleButtonState.On)
            {
                toggleState = ToggleButtonState.Off;
                btnToggle01.Text = this.OffText;
                if (eventToggle_On != null)
                {
                    eventToggle_On(this, new EventArgs());
                }
            }
            else
            {
                toggleState = ToggleButtonState.On;
                btnToggle01.Text = this.OnText;
                if (eventToggle_Off != null)
                {
                    eventToggle_Off(this, new EventArgs());
                }
            }
        }
***********************
Note that the Toggle action need only the switch of toggleState. The 2 extra features of this
Toggle button are:
1) Changing text on the button, as done using btnToggle01.Text
2) Passing the event via eventToggle_On/Off back to the caller, which must have registered the events.


8. If you look at the Source of WUC_ToggleButton.ascx, you will find these lines:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WUC_ToggleButton.ascx.cs" Inherits="WebMenu.WUC_ToggleButton" %>
&nbsp;<asp:Button ID="btnToggle01" runat="server" OnClick="btnToggle01_Click" Text="Button" />
       
Part 2: Using the Toggle Button Web User Control
1. Open the *.aspx file, example default.aspx, and go to Design view.
2. Drag and drop the WUC_ToggleButton.ascx from the Solution Explorer unto the design view.
3. Open up the default.aspx Source view and confirm the following lines are added automatically:
***********
<%@ Register Src="WUC_ToggleButton.ascx" TagName="WUC_ToggleButton" TagPrefix="uc1" %>
<uc1:WUC_ToggleButton ID="WUC_ToggleButtonA" runat="server"  />       
***********
4. In the Source view for Design.aspx, add the toggleState, OnText, OffText attributes as follows:
<uc1:WUC_ToggleButton ID="WUC_ToggleButtonA" runat="server" toggleState="On" OnText="Show" OffText="Hide" />       
toggleState - specifies the initial state of the button
OnText - lets the user define the text shown on button when state is On
OffText - lets the user define the text shown on button when state is Off.
5. The Toggle button also allow the caller page to specify what operations to perform by using event
handlers. To initialize the event handlers, in the Page_Load method of the caller default.aspx,
            WUC_ToggleButtonA.eventToggle_On +=new EventHandler(WUC_ToggleButtonA_eventToggle_On);
            WUC_ToggleButtonA.eventToggle_Off +=new EventHandler(WUC_ToggleButtonA_eventToggle_Off);
This adds two event handlers to the Toggle Button. The caller default.aspx can now define the methods below
to perform the desired operations:
private void WUC_ToggleButtonA_eventToggle_On(object sender, EventArgs ev)
private void WUC_ToggleButtonA_eventToggle_Off(object sender, EventArgs ev)

Part 3: Pass Data or information via Events from Toggle Button WUC back to the caller
1. Derive an EventArgs class to pass the desired information, eg:
   public class myEventArgs : EventArgs{
      public string message;
      public myEventArgs(string msg){ message = msg; }
   }
2. To use this new Event class, create a new delegate class to represent the new Event signature:
        public delegate void myEventHandler(object sender, myEventArgs e);
3. Use the new EventHandler in the WUC_ToggleButton.ascx.cs, instead of
        public event EventHandler eventToggle_On;  
   we now have
        public event myEventHandler eventToggle_On; 
4. The code for raising the events needs to submit the required two pieces of information as event parameters.
In part 1, step 7, in the btnToggle01_Click method, instead of: 
                if (eventToggle_On != null)
                {
                    eventToggle_On(this, new EventArgs());
                }
we have the following:
                if (eventToggle_On != null)
                {
myEventArgs eventInfo = new myEventArgs("some message");
                    eventToggle_On(this, eventInfo);
                }
5. In the caller code default.aspx.cs (part 2, step 5), the user defined method:
private void WUC_ToggleButtonA_eventToggle_On(object sender, EventArgs ev)
can be changed to
private void WUC_ToggleButtonA_eventToggle_On(object sender, myEventArgs ev)
Note that ev now has the message "some message" which can be accessed via:
    ev.message.