Buttons are controls that post the form back to the server, enabling server-side processing to commence. There are three types of button controls:
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 (i.e., 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 (i.e., 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. Figure 5-3 shows the web page that results from running the example code.
Tip
In order for the code in Example 5-5 and Example 5-6 to work correctly, you need to 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#, csASButtons.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>
The System.Web.UI.WebControls namespace offers three kinds of button-like ASP controls:
- Button
This is the standard button that we have seen earlier. 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
Textattribute, but there is anAlternateTextattribute, 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, i.e., 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>