O'Reilly logo

Programming ASP.NET, 3rd Edition by Dan Hurwitz, Jesse Liberty

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Button Controls

Buttons are controls that post the form back to the server, enabling server-side processing to commence. There are three types of ASP.NET Button controls, all members of the System.Web.UI.WebControls namespace:

Button

This is the standard button.

LinkButton

The LinkButton control is sort of a cross between a standard button and a HyperLink control (described in the next section). A LinkButton appears to the user as a hyperlink (i.e., the text is colored and underlined).

HiddenFieldDemo

Figure 4-3. HiddenFieldDemo

ImageButton

The ImageButton control performs the same function as the standard button, except that an image bitmap takes the place of the button on the browser UI. For the ImageButton control, there is no Text attribute but there is an AlternateText attribute, which specifies what text to display on non-graphical browsers.

In addition, the event handler uses an ImageClickEventArgs event argument, which is different than the event handlers for the Button and LinkButton controls. This event argument exposes two fields (not used in this example) containing the X and Y coordinates of the location where the user clicked on the image. These fields could be used to implement your own image map type of functionality.

In addition to all the properties, methods, and events inherited from WebControl, all three button types have the following two events:

Click

This event is raised when the control is clicked and no command name is associated with the button (that is, no value has been assigned to the Button control's CommandName property). The method is passed an argument of type EventArgs.

Command

This event is raised when the control is clicked and a command name is associated with the button (that is, a command name has been assigned to the Button control's CommandName property). The event is passed an argument of type CommandEventArgs, which has the following two members:

CommandName

The name of the command

CommandArgument

An optional argument for the command

All three types of Button controls implement the IButtonControl interface, new to Version 2.0 of ASP.NET. This interface requires the Click and Command events, plus properties such as Text and CausesValidation, among others, which will be described shortly. It is the IButtonControl interface that causes a control to act like a button.

This next example, ButtonDemo, creates a web page containing a Button, a LinkButton, and an ImageButton. Each button performs the same task: transferring control to another web page. The content file is shown in Example 4-8.

Example 4-8. Default.aspx for ButtonDemo web site

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"
         Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Buttons</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <h1>Button Controls</h1>

       <asp:Button ID="btnLink" runat="server"
                   Text="Link To Target Page"
                   ToolTip="Click here to go to the target page."
                   OnClick="btnLink_Click" />
       <asp:ImageButton ID="imgLink" runat="server"
                   AlternateText="Link to Target Page"
                   ImageUrl="Dan at Vernal Pool.jpg"
                   ToolTip="Click here to go to the target page."
                   OnClick="imgLink_Click" />
       <asp:LinkButton ID="lnkLink" runat="server"
                   ToolTip="Click here to go to the target page."
                   Font-Name="Comic Sans MS Bold"
                   Font-Size="16pt"
                   OnClick="btnLink_Click">
          LinkButton To Target Page
       </asp:LinkButton>
    </div>
    </form>
</body>
</html>

The button Click event handlers from the code-behind file are shown in Example 4-9.

Example 4-9. Click event handlers for ButtonDemo web site

protected void btnLink_Click(object sender, EventArgs e)
{
   Response.Redirect("//localhost/websites/TargetPage.aspx");
}
 
protected void imgLink_Click(object sender, ImageClickEventArgs e)
{
   Response.Redirect("//localhost/websites/TargetPage.aspx");
}

The resulting web page is shown in Figure 4-4.

ButtonDemo web site

Figure 4-4. ButtonDemo web site

Tip

For the code in the ButtonDemo web site to work correctly, you must have a target web page to which to link. This can be any valid .htm, .asp, or .aspx file. In this example, the target page is hardcoded as TargetPage.aspx, located in the Websites virtual directory. In addition, you will need an image file for the ImageButton control. This example uses a file called Dan at vernal pool.jpg, located in the web site directory, but you can use any image file you want.

The big difference between a LinkButton control and a standard Button control is that the LinkButton's functionality is implemented using client-side scripting. This is readily apparent if you look at the source code rendered to your browser resulting from the ButtonDemo web page, an excerpt of which is shown in Example 4-10. Remember, this source code is output by ASP.NET, not written by you.

Example 4-10. Browser source excerpt from ButtonDemo web page

<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
function _  _doPostBack(eventTarget, eventArgument) {
    if (theForm.onsubmit == null || theForm.onsubmit()) {
        theForm._  _EVENTTARGET.value = eventTarget;
        theForm._  _EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// --->
</script>
 
<input type="submit" name="btnLink" value="Link to Target Page"
   id="btnLink" title="Click here to go to Target Page." />
 
<input type="image" name="imgLink" id="imgLink"
   title="Click here to go to Target Page."
   src="Dan%20at%20Vernal%20Pool.jpg" alt="Link to Target Page"
   style="border-width:0px;"/>
 
<a id="lnkLink" title="Click here to go to Target Page."
   href="javascript:_  _doPostBack('lnkLink','')"
   style="font-family:Comic Sans MS Bold;font-size:16pt;">
   Link to Target Page</a>

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required