ASP 4.0 Command Button
In the previous Lab, Submit Button Control | Lab #006 we learned how to use submit button and handle its click event. In this lab, we will use three Command Buttons and use Command Event to handle the button click. ASP 4.0 supports grouping the buttons and wiring it to a single event handling routine. We can assign a text string to the CommandText property. Command Event handling routine receives the argument CommandEventArgs and we can enquire the CommandText property on this object to know the event producer and take relevant action. Now, we will proceed with the Lab.
1: Create Web Form with Command Buttons
In this step, we will create three command buttons. We will also learn how to read aspx file and assign properties in the property window. Sub-Steps are below:
1) Open 05_ASP4_Control project which we created in the previous two Labs. Create a new WebForm called 03_CommandButton.aspx. In this web form, add three button controls. Set the Text properties for the controls as Cut, Copy and Paste.
2, 3) Go to source view and set the button control properties as shown. The marker two shows that you must set
ID and
Text property for the controls.
4) In ASP web form, you can also type free text and format it just like how we format text in word. Type the text as shown. You should move to design view to add the text at correct location.
5) Highlight the text created in previous step.
6) Change font size to x-large.
7) You can see the text appears bigger now.
8) Switch to source view from the design view. Check the style tag and visual studio created style called style1. This style can be reused.
9) Observe the text entered appears in the span tag. One can also notice how the style tag is referred here.
10) Drag and drop the Label below the Free Text and set a bigger font style with blue color.
11) Set properties shown here in the property window. Or you can directly type the property attributes in the aspx file itself. Note: do not forget to set the ID as lblOutput.
Note: From the next lab onwards, the form design will be shared via this Aspx file.
2: Handle Command Event
In this step, we will assign a CommandName for all three buttons and then handle the Command Event. Now go through the sub-steps for this lab:
1) Set CommandName property for the button controls. You can either edit it in the aspx file or use the property window.
2) Select all three ASP 4.0 button controls.
3) Switch to the Events list in the Properties window.
4) Next to the
Command Event, type the function name as Clipboard_Command (Note, the function name can be anything you want) and hit the enter in the keyboard.
5) Switch to the Source view of the aspx file. Notice the entry
oncommand mapped to the handler function Clipboard_Command. Moreover, all the buttons refer the same handler function.
6) This is the empty handler function created by the visual studio.
3: Handle Command Event
In this Major step, we write code in the Command Event Handler function and learn how to write a single handler function for more than one button.
1) In the handler function, we form a switch case. The switch expression tests the
CommandName property of the
CommandEventArgs e.
2) All the case match statements test the CommandName property string assigned to the button controls (Refer 2:1)
3) When a match occurs, we set the Label control with the command name of the button. In actual world, we will make the relevant function call to perform the command task. Say for example, copying the content to clipboard.
4) Run the web application and click on the copy button from the displayed web page.
5) Notice the Clicked command is displayed.
Code Reference
03_CommandButton.aspx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="03_CommandButton.aspx.cs" Inherits="_03_CommandButton" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1 { font-size: x-large; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnCut" runat="server" Text="Cut" CommandName="Cut" oncommand="Clipboard_Command" /> <asp:Button ID="btnCopy" runat="server" Text="Copy" CommandName="Copy" oncommand="Clipboard_Command" /> <asp:Button ID="btnPaste" runat="server" Text="Paste" CommandName="Paste" oncommand="Clipboard_Command" /> <br /> <br /> <span class="style1">You Clicked the Button</span><br /> <asp:Label ID="lblOutput" runat="server" Font-Bold="True" Font-Names="Arial Black" Font-Size="Large" ForeColor="Blue" Text="Label"></asp:Label> </div> </form> </body> </html> |
03_CommandButton.aspx.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _03_CommandButton : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Clipboard_Command(object sender, CommandEventArgs e) { switch (e.CommandName) { case "Cut": lblOutput.Text = "Cut"; break; case "Copy": lblOutput.Text = "Copy"; break; case "Paste": lblOutput.Text = "Paste"; break; } } } |
Summary
In this Lab, we learned how to assign single handler function for the multiple command buttons.
Categories: ASP 4.0
Tags: Command Event, CommandEventArgs, CommandName Property, oncommand
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.