Programming ASP.NET

Javascript validator Javascripts

Main Page

↑

5.4 Button Controls

Buttons are controls that post the form back to the server, enabling server-side processing to commence. There are three types of button controls:

Button

LinkButton

ImageButton

In addition to the properties, methods, and events inherited along with all the other ASP controls, all three button types have the following two events:

Click: Raised when 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: 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

The code in Example 5-5 and Example 5-6 creates a web page containing three buttons, one of each type. Each button performs the same task: transferring control to another web page. Example 5-5 shows the C# code, and Example 5-6 shows the same code in VB.NET.

In order for the code in Example 5-5 and Example 5-6 to work correctly, you must have a target web page to link to. This can be any valid .htm, .asp or .aspx file. In these examples, the target page is hard-coded as TargetPage.aspx, located in the ProgAspNet virtual directory. In addition, you will need an image file for the ImageButton. These examples use a file called "Dan at vernal pool.jpg," also located in the ProgAspNet virtual directory, but you can use any .jpg file you want.

Example 5-5. Buttons in C#, csASPButtons.aspx

<%@ Page Language="C#" %>
<script runat="server">
   void btnLink_Click(Object Source, EventArgs E)
   {
      Response.Redirect("//localhost/progaspnet/TargetPage.aspx");
   }

   void imgLink_Click(Object Source, ImageClickEventArgs E)
   {
      Response.Redirect("//localhost/progaspnet/TargetPage.aspx");
   }
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Buttons</h2>
      
      <asp:button
         id="btnLink" 
         text="Link to Target Page" 
         onClick="btnLink_Click" 
         toolTip="Click here to go to Target Page."
         runat="server" />

      <asp:imageButton
         id="imgLink" 
         imageURL="Dan at vernal pool.jpg "
         alternateText="Link to Target Page" 
         onClick="imgLink_Click" 
         toolTip="Click here to go to Target Page."
         runat="server" />

      <asp:linkButton
         id="lnkLink" 
         text="LinkButton to Target Page" 
         onClick="btnLink_Click" 
         Font-Name="Comic Sans MS Bold"
         Font-Size="16pt"
         toolTip="Click here to go to Target Page."
         runat="server" />
   </form>
   </body>
</html>

Example 5-6. Buttons in VB.NET, vbASPButtons.aspx code

<%@ Page Language="VB" %>
<script runat="server">
   Sub btnLink_Click(ByVal Sender as Object, _
                    ByVal e as EventArgs)
      Response.Redirect("//localhost/progaspnet/TargetPage.aspx")
   End Sub

   Sub imgLink_Click(ByVal Sender as Object, _
                    ByVal e as ImageClickEventArgs)
      Response.Redirect("//localhost/progaspnet/TargetPage.aspx")
   End Sub
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Buttons</h2>
      
      <asp:button
         id="btnLink" 
         text="Link to Target Page" 
         onClick="btnLink_Click" 
         toolTip="Click here to go to Target Page."
         runat="server" />

      <asp:imageButton
         id="imgLink" 
         imageURL=" Dan at vernal pool.jpg "
         alternateText="Link to Target Page" 
         onClick="imgLink_Click" 
         toolTip="Click here to go to Target Page."
        runat="server" />

      <asp:linkButton
         id="lnkLink" 
        text="LinkButton to Target Page" 
        onClick="btnLink_Click" 
        Font-Name="Comic Sans MS Bold"
        Font-Size="16pt"
        toolTip="Click here to go to Target Page."
        runat="server" />
    </form>
   </body>
 </html>

Figure 5-3. Button controls

Figure 5-3 shows the web page that results from running the example code. The System.Web.UI.WebControls namespace offers three kinds of button-like ASP controls:

Button

This is the standard button that we discussed previously. The interesting thing about the Button control in Example 5-5 and Example 5-6 is that the onClick event handler calls the btnLink_Click method, which navigates to a new web page using:

Response.Redirect("//localhost/progaspnet/TargetPage.aspx");

The string in quotes can be any valid URL.

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, note that the event handler uses an ImageClickEventArgs event argument, which is slightly different than the event handlers for the Button and LinkButton controls.

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 (that is, the text is colored and underlined). 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 from your browser resulting from Example 5-5 or Example 5-6, an excerpt of which is shown in Example 5-7. Remember, this source code is output by ASP.NET, not written by you.

Example 5-7. Browser source segment from csASPButtons.aspx

<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="/progaspnet/Dan at vernal pool.jpg" alt="Link to Target Page" border="0" />

<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>

<script language="javascript">
<!--
    function _  _doPostBack(eventTarget, eventArgument) {
        var theform = document.ctrl0
        theform._  _EVENTTARGET.value = eventTarget
        theform._  _EVENTARGUMENT.value = eventArgument
        theform.submit(  )
    }
// -->
</script>