Command Event of an asp.net button control

Suggested Videos:
Part 12 - CheckBox Control
Part 13 - HyperLink Control
Part 14 - Button, LinkButton and ImageButton Controls

ASP.NET button control exposes 2 events - Click and Command events. In Part 14, we have discussed about the click event. In this session we will discuss about the Command event. When the Button is clicked, both the events are raised. Click event happens before the Command event. 

To prove this drag and drop a button control onto the webform
1. Double click the Button control. This will automatically generate the click event handler in the code behind file
2. To generate the command event handler, right click the button control and select properties. Click the events icon, in the properties window. Double click on the command event. The event handler for the command event should now be generated.

If you are following along with me. At this stage the HTML for the button control in the aspx page, should look as shown below.
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" 
    CommandName="Button1" oncommand="Button1_Command" />

Please copy and paste the following code in the code behind file.
protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write("Button1 Click event handled <br/>");
}
protected void Button1_Command(object sender, CommandEventArgs e)
{
    Response.Write("Button1 Command event handled <br/>");
}



When you click the Button now, you should see the following output. This proves that when a button is clicked, first the Click event and then the Command event is fired.
Button1 Click event handled 
Button1 Command event handled 

The click event handler and the command event handlers, are attached to the respective Click and Command events in the HTML using onclick and oncommand attributes. The event handlers can also be attached programatically as shown below.
protected void Page_Load(object sender, EventArgs e)
{
    Button1.Click += new EventHandler(Button1_Click);
    Button1.Command += new CommandEventHandler(Button1_Command);
}

Note: Eventhandlers can be associated to the events of a control in 2 ways.
1. Declaratively at design time in the HTML
2. Programatically using delegates



If you have multiple button controls on a webform, and if you want to programmatically determine which Button control is clicked, we can make use of Command event, along with CommandName and CommandArgument properties. Command event, makes it possible to have a single event handler method responding to the click event of multiple buttons. The command event, CommandName and CommandArgument properties are extremely useful when working with data-bound controls like Repeater, GridView, DataList. We will discuss about Repeater, GridView, and DataList in a later video session.

Let's understand this with an example. Consider the HTML below. Here we have 4 buttons. Notice that all the button controls have the same command event handler method - oncommand="CommandButton_Click". Also, notice the CommandName and CommandArgument properties. We will later use these properties, in the code behind to determine which button is clicked.
<asp:Button ID="PrintButton" runat="server" Text="Print" oncommand="CommandButton_Click" CommandName="Print"/>

<asp:Button ID="DeletButton" runat="server" Text="Delete" oncommand="CommandButton_Click" CommandName="Delete"/>

<asp:Button ID="Top10Button" runat="server" Text="Show Top 10 Employees" oncommand="CommandButton_Click" 
    CommandName="Show" CommandArgument="Top10"/>

<asp:Button ID="Bottom10Button" runat="server" Text="Show Bottom 10 Employees" oncommand="CommandButton_Click" 
    CommandName="Show" CommandArgument="Bottom10"/>
        
<asp:Label ID="OutputLabel" runat="server"></asp:Label>

Copy and Paste the following code in your code behind file. The CommandEventArgs object, has the CommandName and CommandArgument properties, that are used to programatically determine which button the user has clicked.
protected void CommandButton_Click(object sender, CommandEventArgs e)
{
    switch (e.CommandName)
    {
        case "Print":
            OutputLabel.Text = "You clicked Print Button";
            break;
        case "Delete":
            OutputLabel.Text = "You clicked Delete Button";
            break;
        case "Show":
            if (e.CommandArgument.ToString() == "Top10")
            {
                OutputLabel.Text = "You clicked Show Top 10 Employees Button";
            }
            else
            {
                OutputLabel.Text = "You clicked Show Bottom 10 Employees Button";
            }
            break;
        default:
            OutputLabel.Text = "We don't know which button you clicked";
            break;
    }
}

Note: All the 3 button controls - Button, LinkButton and ImageButton, expose Command event, the CommandName and CommandArgument properties.

No comments