1. Computing
Examining Control-Passing ASP.NET Web Controls: Button, ImageButton and LinkButton
There are several web controls that enable passing of control back to the Web Server. This chapter explores web buttons - specific components that allow users to indicate that they are finished with the Web Form (post the data) or want to perform a particular command (on the server). Learn about ASP.NET's Button, LinkButton and ImageButton web controls.
 Win prizes by sharing code!
Do you have some Delphi code you want to share? Are you interested in winning a prize for your work?
Delphi Programming Quickies Contest
 Join the Discussion
"Post your views and comments to this chapter of the free Asp.Net Delphi Programming Course"
Discuss!
 Related Resources
• A Beginner's Guide to Asp.Net Programming for Delphi developers.TOC
 Elsewhere on the Web
• Free Web server controls
• About HTML
• About JavaScript

Welcome to the thirteenth chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
Learn about ASP.NET's Button, LinkButton and ImageButton web controls.

In the Introduction to Web Server Controls chapter, we've divided ASP.NET Web Server controls into several categories. A group with most controls was titled Intrinsic controls - those rendered to simple HTML elements. Starting with this chapter we'll explore most common components found in this group. Event though many of the Web Server components are designed to replace the standard set of HTML controls, they provide a richer set of functionality.

Our discussion of the most common controls found in the System.Web.UI.WebControls namespace will take the "behavior and functionality" route; it's easier and more meaningful to present and introduce various Web Controls by their "task" and by the offered functionality: Control-passing controls, text input controls, text display controls, containers, etc.

We start of by the most commonly used: buttons.

Passing control to server
The final step in working with any kind of Web Form is posting data back to the server to enable data and command processing. There are three button-like controls with the main purpose of causing the post back to the Server.

Button, ImageButton, LinkButton
When any of the Button, ImageButton or LinkButton controls are clicked, the result is that the Web Form gets posted back to the server - to enable server side processing of data in various events that get raised. Here's a quick view of the difference between these types of Web Server controls:

  • Button control renders as an <input type="submit"> HTML element. The Text property determines the text on the button face.
  • ImageButton control renders as an <input type="image"> HTML element. The ImageUrl property determines the location of an image to use.
  • LinkButton control renders as an <a> element. The LinkButton control has the same appearance as a HyperLink control, but has the same functionality as a Button control.

All the buttons share two common events: Click and Command. Whenever a user clicks any of the above button type components, both events are triggered. The Click event provides only the source of the event (the clicked button), where Command event provides more data to event handling procedure. A CommandName and CommandArgument can be assigned to a button control.

All the buttons share several common properties:

  • CommandName is a string value that will be returned as the CommandName property of the CommandEventArgs argument
  • CommandArgument is a System.Object (or TObject) value that will be returned as the CommandArgument property of the CommandEventArgs argument
  • CausesValidation is boolean value that indicates whether any validation controls are checked when the button is clicked. We'll be discussing this property in more details in the coming chapters

To better present the way you work with any of the button-type components, we'll now set up a simple example.

"Who clicked" example
Having an empty Web Form, drop three Button controls (you decide whether you'll use a Button, ImageButton or a LinkButton) on it. Let's name the first button "AddButton", the second "AddMoreButton" and last "RemoveButton" - to name the button you assign a string value to its ID property. If you have used the Button component, let the Text property be the same as the ID property.
Using the Object Inspector assign the string "ADD" to the CommandName property of the AddButton and AddMoreButton. Set "1" for the CommandArgument of the "AddButton" and "10" for the "AddMoreButton". For the last button, RemoveButton, set the string value "REMOVE" for CommandName (leave CommandArgument property for this button empty).

If you switch to the "aspx" (html) view, you should see a section like:

  <asp:button id=AddButton
    runat="server" text="AddButton"
    commandargument="1" commandname="ADD">
  </asp:button>
  <asp:button id=AddMoreButton
    runat="server" text="AddMoreButton"
    commandargument="10" commandname="ADD">
  </asp:button>
  <asp:button id=RemoveButton
    runat="server" text="RemoveButton"
    commandname="REMOVE">
  </asp:button>

Now, select the "AddButton" and create an event handling procedure for its Command event by using the Object Inspector (select the "Events" tab and double click the right column next to the Command event). This should result in:

procedure TWebForm2.AddButton_Command(
    sender: System.Object; 
    e: System.Web.UI.WebControls.CommandEventArgs);
begin
// code goes here
end;

The Command event takes two parameters: Sender of type System.Object and e of type CommandEventArgs.

Let's now share this event handling procedure with the rest two buttons. One way is to use the Object Inspector to associate an event with an existing event handler.

Sharing an event handler in Delphi

Once set, this action will create a new line in the InitializeComponent procedure (located inside the "Designer Managed Code" region)

Another way (we use for the second button) is to add the following code in the Page_Load procedure:

procedure TWebForm2.Page_Load(...
  Include(AddMoreButton.Command, AddButton_Command);
...

We now have a situation where all three button share the same Command event handling procedure.

Finally, add a Label component (ID = 'btnLabel') on a form - we'll use it to provide the result of the button click processing back to the user.

Here's the source of the Command event handler:

procedure TWebForm2.AddButton_Command(
   sender: System.Object; 
   e: System.Web.UI.WebControls.CommandEventArgs);
var
  Output : string;
begin
  Output := '';
  if e.CommandName = 'ADD' then
  begin
    if e.CommandArgument.ToString = '1' then
      Output := Output + 'Command: ADD 1 '
    else if e.CommandArgument.ToString = '10' then
      Output := Output + 'Command: ADD 10'
    else
      Output := Output + 'Command: ADD ??';
  end;

  if e.CommandName = 'REMOVE' then
    Output := Output + 'Command: REMOVE';

  btnLabel.Text := Output;
end;

Run the project, once the Web Form is displayed, click any of the buttons. If you clicked the "AddMoreButton", the text displayed in the btnLabel component is "Command: ADD 10".

Click or Command or both or none
There is NO need to assign either a Click or Command event handler for a button to cause a postback. Every button on a web form, when clicked will pass the control to the server, this causes the page to be processed and any pending events to be raised in server-based code. For example, if you have a TextBox control on a form and you have provided code for its Changed event - this event will be processed if ANY button was clicked and the text was changed (no matter if you have actually provided code for button's Click or Command events).

If you have assigned code for both the Click and the Command events, BOTH events will be raised when the button is clicked. Click event handler will be executed first.

The signature of the Click event handler looks like:

procedure TWebForm2.AddMoreButton_Click(
  sender: System.Object; 
  e: System.EventArgs);
begin
  // code here
end;

Sender is the Object that raised the event; e of type EventArgs contains any event data. In case of the Click event, e equals to EventArgs.Empty (event with no event data).

The signature of the Command event handler looks like:

procedure TWebForm2.AddButton_Command(
  sender: System.Object; 
  e: System.Web.UI.WebControls.CommandEventArgs);
begin
  // code here
end;

CommandEventArgs type parameter for Command event caries additional event data. As shown in the example above, the CommandName and CommandArgument parameters of the CommandEventArgs type can be used to process event's data.

Buttons as child components
Within some rich Web Server controls, like DataGrid or DataList, you handle a Button Click or a Command event differently than when it is standing alone on a form. The term "event bubbling" is used to describe in what way a container control controls handling of events raised by its child buttons (and other event-raising controls). We'll deal with event bubling in some of the future chapters.

To the next chapter: A Beginner's Guide to ASP.NET Programming for Delphi developers
That's it for today, in the next chapter we'll continue to explore Web Controls. Stay tuned!

If you need any kind of help at this point, please post to the Delphi Programming Forum where all the questions are answered and beginners are treated as experts.

A Beginner's Guide to ASP.NET Programming for Delphi developers: Next Chapter >>
>> Understanding the TextBox ASP.NET control

Related Video
Adobe Photoshop Web Button

©2014 About.com. All rights reserved.