Button Controls

Button Controls

The Web controls family includes three types of button controls: Button, LinkButton, and ImageButton. Functionally, all three do exactly the same thing: they submit the form that hosts them to the server. The difference lies in their physical appearance. A Button control looks like a push button, a LinkButton looks like a hyperlink, and an ImageButton renders itself using an image you supply. Nearly every Web form uses one or more buttons to enable the user to submit the form to the server.

The following statements declare an instance of each control type in a Web form:

<asp:Button Text="Sort" RunAt="server" /> <asp:LinkButton Text="Sort" RunAt="server" /> <asp:ImageButton ImageUrl="sort.jpg" RunAt="server" />

The Text property specifies the text that appears on the face of a Button or LinkButton. ImageUrl identifies the image displayed by an ImageButton.

All three button controls fire two kinds of events when clicked: a Click event and a Command event. An OnClick attribute in the control tag wires a button to a Click handler. Click handlers for Button and LinkButton controls are prototyped this way:

void OnClick (Object sender, EventArgs e) { // Event handling code goes here }

But Click handlers for ImageButton controls are prototyped like this:

void OnClick (Object sender, ImageClickEventArgs e) { // Extract the click coordinates int x = e.X; int y = e.Y; }

The ImageClickEventArgs passed to an ImageButton s Click handler contains public fields named X and Y that specify where in the image the click occurred. X and Y are measured in pixels and represent distances from the image s upper left corner.

Using Command events rather than Click events affords the developer the opportunity to pass additional information via the control s CommandName and CommandArgument properties. The following example assigns the command name Sort and the command argument Asc to a Button control and toggles the command argument between Asc and Desc to perform alternating ascending and descending sorts:

<asp:Button Text="Sort"  OnCommand="OnSort" CommandName="Sort" CommandArgument="Asc" RunAt="server" /> . . . <script language="C#" runat="server"> void OnSort (Object sender, CommandEventArgs e) { if (e.CommandName == "Sort" && e.CommandArgument.ToString () == "Asc") { // TODO: Perform ascending sort SortButton.CommandArgument = "Desc"; } else if (e.CommandName == "Sort" && e.CommandArgument.ToString () == "Desc") { // TODO: Perform descending sort SortButton.CommandArgument = "Asc"; } } </script>

Command events are useful for overloading button controls and having them perform different actions based on the value of CommandArgument. They can also be used to connect multiple buttons to a single handler and have the handler respond differently depending on which button was clicked.