asp.net the use of Button, LinkButton and ImageButton three kinds of controls in the basic application _

The ASP.net framework contains three controls for submitting forms to the server side: Button, LinkButton, and ImageButton. These three controls have the same functionality, but each control has a different appearance interface.

This article takes you to learn how to use these three types of controls on a page. Then, learn how to associate client script and server-side button controls, and how to use the button control to upload a form to a page that is not the current page. Finally, learn how to handle command events for button controls.

First, use the button control

The button control is used to submit a form to the server side. For example, the page in Code Listing 1 contains a button control. Click the button control to update the time displayed by the label control (see Figure 1).

Code Listing 1 Showbutton.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:button id= "btnsubmit" text= "Submit" onclick= "btnSubmit_Click" runat= "server"/> <br/><br/>
<asp:label id= "Lbltime" runat= "Server"/>
</div>
</form>

Figure 1 Displaying the button control

The button control supports the following properties (incomplete list):

· accesskey--specifies a key that guides the button control.
· commandargument--is used to specify the command arguments passed to the command event.
· commandname--Specifies the command name to be passed to the command event.
· enable--is used to disable the button control.
· onclientclick--Specifies the client script that executes when the button is clicked.
· postbackurl--is used to set the form to be passed to a page.
· tabindex--Sets the tab order for the button control.
· text--is used to annotate the button control.
· usesubmitbehavior--is used to return forms using JavaScript.

The button control supports the following methods:

· Focus ()--lets you set the initial form focused to the button control.

The button control also supports the following two events:

· Raised when click--clicks the button control.
· Raised when command--clicks the button control. CommandName and CommandArgument passed on to this event.

Second, using the LinkButton control

The LinkButton control, like a button control, is used to pass the form back to the server side. However, unlike the button control, which generates a LinkButton control, it generates a link.

The Code Listing 2 contains a simple form. This form contains a LinkButton control that submits the form to the server side and displays the contents of the form field (see Figure 2).

Code Listing 2 Showlinkbutton.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:label id= "Lblfirstname" text= "Name:" associatedcontrolid= "txtFirstName" runat= "server"/> <br/ >
<asp:textbox id= "txtFirstName" runat= "Server"/><br/><br
<asp:label id= "Lbllastname" text= "last Name:" associatedcontrolid= "Txtlastname" runat= "Server"/><br/>
<asp:textbox id= "Txtlastname" runat= "Server"/><br/><br
<asp:linkbutton id= "Lnksubmit" text= "Submit" onclick= "Lnksubmit_click" runat= "Server"/><br/><br/ >
<asp:label id= "Lblresults" runat= "Server"/>
</div>
</form>

Figure 2 shows the LinkButton control

In the background, the LinkButton control uses JavaScript to conveys the table back to the server side. The LinkButton control generates such a hyperlink:

Copy Code code as follows:

<a id= "Lnksubmit" href= "Javascript:__dopostback" (' Lnksubmit ', ') ">Submit</a>

Click the LinkButton call to conveys the table back to the server-side JavaScript _dopostback () method. When a form is submitted, the values of all form fields are also passed back to the server side.

The LinkButton control supports the following properties (incomplete list):

· accesskey--specifies a key that guides the LinkButton control.
· commandargument--is used to specify the command arguments passed to the command event.
· commandname--Specifies the command name to be passed to the command event.
· enable--is used to disable the LinkButton.
· onclientclick--Specifies the client script that executes when the LinkButton is clicked.
· postbackurl--is used to set the form to be passed to a page.
· tabindex--Sets the tab order for the LinkButton control.
· text--is used to annotate LinkButton controls.

The button control supports the following methods:

· Focus ()--lets you set the initial form focused to the LinkButton control.

The button control also supports the following two events:

· Raised when click--clicks on the LinkButton control.
· Raised when command--clicks on the LinkButton control. CommandName and CommandArgument passed on to this event.

Third, use the ImageButton control

The ImageButton control is similar to a button and LinkButton control, which is used to conveys the table back to the server side. Just ImageButton controls always display pictures.

The page in Listing 3 contains a ImageButton control that puts a simple table conveys back to the server side (see Figure 3).

Code Listing 3 Showimagebutton.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:label id= "Lblfirstname" text= "Name:" associatedcontrolid= "txtFirstName" runat= "Server"/><br/ >
<asp:textbox id= "txtFirstName" runat= "Server"/><br/><br
<asp:label id= "Lbllastname" text= "last Name:" associatedcontrolid= "Txtlastname" runat= "Server"/><br/>
<asp:textbox id= "Txtlastname" runat= "Server"/><br/><br
<asp:imagebutton id= "btnsubmit" imageurl= "Submit.gif" alternatetext= "Submit Form" runat= "Server" onclick= " btnSubmit_Click "/><br/><br/>
<asp:label id= "Lblresults" runat= "Server"/>
</div>
</form>

Figure 3 shows the ImageButton control

The ImageButton control in Listing 3 contains the ImageUrl property and the AlternateText property. The ImageUrl property contains the path to the picture displayed by the ImageButton control. The AlternateText property is used to provide alternate text for a picture in a browser that displays only text.

Note: Accessibility standards require that each picture contain alternate text. Also, remember that some users turn off the browser's image features to get a faster online surfing experience.

Note that the Click event handler for the ImageButton control differs from the other two button controls. The second parameter passed to the event handler is an instance of the ImageClickEventArgs class. This class has the following two properties:

x--The X coordinate of the user when clicking on the picture.

y--the y-coordinate when the user clicks on the picture.

You can use the ImageButton control to create a simple image map. The page in Listing 4 contains a ImageButton control that displays a target picture. Click on the center of the target to display a success message (see Figure 4).

Code Listing 4 Imagebuttontarget.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:imagebutton id= "Btntarget" imageurl= "target.gif" runat= "Server" onclick= "Btntarget_click"/><br/> <br/>
<asp:label id= "Lblresult" runat= "Server"/>
</div>
</form>

Note: ImageButton can be used to create a server-side image map. People with disabilities cannot use server-side image maps. The best way to create ImageMap is to use the ImageMap control that creates the image map for the client. The ImageMap control is discussed in the next section of this chapter.

Figure 4 Retrieving X and y coordinates by ImageButton

The ImageButton control supports the following properties (incomplete list):

· accesskey--specifies a key that guides the ImageButton control.
· alternatetext--provides alternate text for the picture (accessibility requirements).
· descriptionurl--is used to provide links to pages that contain detailed descriptions of the picture (complex picture requirements are accessible).
· commandargument--is used to specify the command arguments passed to the command event.
· commandname--Specifies the command name to be passed to the command event.
· enable--is used to disable the ImageButton.
· generateemptyalternatetext--sets an empty string value for the AlternateText property.
· imagealign--is used to align images with other HTML elements in the page. Possible values are Absbottom, Absmiddle, Baseline, Bottom, left, middle, NotSet, right, Texttop, and top.
· imageurl--is used to specify the URL of a picture.
· onclientclick--Specifies the client script that executes when the ImageButton is clicked.
· postbackurl--is used to set the form to be passed to a page.
· tabindex--Sets the tab order for the ImageButton control.

The ImageButton control supports the following methods:

· Focus ()--lets you set the initial form focused to the ImageButton control.

The ImageButton control also supports the following two events:

· Raised when click--clicks on the ImageButton control.
· Raised when command--clicks on the ImageButton control. CommandName and CommandArgument were passed to this event.

The button control uses client script

All three button controls support the OnClientClick property. You can use this property to perform any client code that is required when you click a button. The page in Listing 5 shows how to use the OnClientClick property to display a confirmation dialog box (see Figure 5).

Code Listing 5 Buttononclientclick.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:button id= "Btndelete" text= "Delete Website" onclick= "Btndelete_click" onclientclick= "return Confirm" (' Are Sure? '); " runat= "Server"/><br/><br/>
<asp:label id= "Lblresult" runat= "Server"/>
</div>
</form>

Figure 5 shows the client confirmation dialog box

The button control in Listing 5 contains a OnClientClick property that executes a JavaScript script when the client clicks on the button. The script displays a confirmation dialog box. If the confirmation dialog returns false, then the button click event is canceled and the form containing the button will not be returned to the server side.

Like most asp.net controls, the button control supports extended properties and can handle other client events simply by adding arbitrary properties to the control. If the ASP.net framework does not recognize the properties declared on the control, the framework simply passes this property to the browser.

For example, the page in Listing 6 contains a control control with the onmouseover and onmouseout properties. Hover the mouse over the button and the text on the button will change.

Code Listing 6 Buttonexpando.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:button id= "btnsubmit" text= "Submit" onmouseover= "this.value= ' click here! '" onmouseout= "this.value= ' Submit '" runat= "Server"/>
</div>
</form>

Note: In Visual Web Developer, a green wavy line warning appears under extended properties, but this warning can be safely ignored.

V. Perform cross-page delivery

By default, clicking on a button control submits the page containing the control back to the page itself and reloads the same page. However, you can use the PostBackUrl property to submit the form data to other pages.

For example, code listing 7 contains a search form. The button in the page submits the page to the name Buttonsearchresult. Another page of ASPX. Code Listing 8 contains the buttonsearchresult.aspx page.

Code Listing 7 Buttonsearch.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:label id= "Lblsearch" text= "Search:" runat= "Server"/>
<asp:textbox id= "Txtsearch" runat= "Server"/>
<asp:button id= "btnsearch" text= "go!" Postbackurl= "buttonsearchresults.aspx" runat= "Server"/>
</div>
</form>

Code Listing 8 Buttonsearchresults.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:label id= "Lblsearch" runat= "Server"/>
</div>
</form>

In the Page_Load event handler in Listing 8, the PreviousPage property is used to get a reference to the previous page (the buttonsearch.aspx page in Listing 7). Second, the FindControl () method is used to get the txtsearch of the TextBox control from the previous page. Finally, the value entered in the TextBox is displayed in the label in the page.

As an alternative to getting a control from a previous page using the FindControl () method, you can expose the control through page properties. The page in Listing 9 exposes the textbox Txtsearch through the SearchString property. This page sends the form data to the buttonsearchresulttyped.aspx page in code listing 10.

Code Listing 9 Buttonsearchtyped.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:label id= "Lblsearch" text= "Search:" runat= "Server"/>
<asp:textbox id= "Txtsearch" runat= "Server"/>
<asp:button id= "btnsearch" text= "go!" Postbackurl= "buttonsearchresultstyped.aspx" runat= "Server"/>
</div>
</form>

Code List Ten Buttonsearchresulttyped.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:label id= "Lblsearch" runat= "Server"/>
</div>
</form>

Note that the page in Listing 10 contains a <%@ previouspagetype%> instruction. This instruction converts the value returned by the PreviousPage property to an instance of the Buttonsearchtyped class. Without this instruction, the PreviousPage property returns the previous page as an instance of the generic page class.

When you perform a cross-page submission, you can use either of the following two methods. The first method provides a weak type method for obtaining values from the previous page, and the second method provides a strongly typed method.

Six, specify the default button

You can use the DefaultButton property of the server-side form control to specify the default button for the form. Specify a default button to call this button by pressing the ENTER key on the keyboard.

For example, the page in Code listing 11 contains a simple search form. <form> label Setting the default button for the page is the btnsearch of the button control.

Code List One buttondefaultbutton.aspx

Copy Code code as follows:

<form id= "Form1" defaultbutton= "btnsearch" runat= "Server" >
<div>
<asp:label id= "Lblsearch" text= "Search:" associatedcontrolid= "Txtsearch" runat= "Server"/>
<asp:textbox id= "Txtsearch" runat= "Server"/>
<asp:button id= "btnsearch" text= "Search" onclick= "btnSearch_Click" runat= "Server"/>
<asp:button id= "Btncancel" text= "Cancel" runat= "Server"/> <asp:label id= "Lblresult" runat= "Server"/>
</div>
</form>

Open the page in Listing 11, enter the search term, hit the ENTER key on the keyboard, and the form will be submitted to the server side. Because the Btnsearch button is the default button on the page, clicking the Enter key on the keyboard will perform the btnSearch_Click () event handler.

Note: You can also specify a default button for the Panel control. The Panel control is discussed later in this chapter.

Vii. Handling Command Events

All three button controls support the Click event and command events. The difference between the two events is that you can pass a command name and a command parameter to the command event handler, not to the Click event handler.

For example, the page in Listing 12 contains two button controls and a BulletedList control. Click the first button and the BulletedList control displays the items in a positive order; Click the second button and the BulletedList control displays the items in reverse order (see Figure 6).

All two button controls contain CommandName and CommandArgument properties. In addition, the two button controls are equally associated with the Sort_command () event handler. The event handler checks the CommandName and CommandArgument properties when deciding how the elements of the BulletedList control will be sorted.

Code List buttoncommand.aspx

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<asp:button id= "BTNSORTASC" text= "sort ASC" commandname= "Sort" commandargument= "ASC" oncommand= "Sort_command" runat= "Server"/>
<asp:button id= "Btnsortdesc" text= "Sort DESC" commandname= "Sort" commandargument= "DESC" oncommand= "Sort_command" runat= "Server"/><br/><br/>
<asp:bulletedlist id= "bltgroceries" runat= "Server"/>
</div>
</form>

Figure 6 Handling Command events