Chapter 2.1-The Button Web Control : Chapter 2.1-The Button Web Control 1
Slide 2 : Button Fundamentals
Introduction
A button is an object (usually rectangular) the visitor of a web page clicks to initiate a
command action. To support buttons on an ASP.NET web site, the .NET Framework
provides the Button control that is implemented by the Button class of the
System.Web.UI.WebControls namespace of the System.Web.dll assembly.
Creating a Button
If you are working in Microsoft Visual Studio,to visually add a button, drag the Button object from the Standard section of the Toolbox and drop it on the form.
To manually add a button, create an tag in the form. Here is an example:
<%@ Page Language="C#" %>
Exercise
2
This would produce: : This would produce: 3
Slide 4 : Characteristics of a Button
The Caption of a Button
At a minimum, a button should inform a web user what it is meant for. To provide this
information, assign a string to the Text attribute of the tag. Here is an example:
<%@ Page Language="C#" %>
Exercise
This would produce: 4
Slide 5 : 5
Slide 6 : Clicking a Button
A button is supposed to be clicked to initiate its action. When this is done, the control fires
The Click event. You can implement this event which is of type EventArgs. If you create
the method manually, assign the name of the method to the OnClick attribute. This can
be done as follows:
<%@ Page Language="C#" %>
Exercise
Code Behind File
Protected void ButtonWasClicked(object sender, EventArgs e)
{ } 6
Slide 7 : In the same way, you can add as many buttons as you want to a web page and write
code for the Click event of each. Here are examples:
<%@ Page Language="C#" %>
Exercise
7
Slide 8 : In the Code Behind :
private void VerifyClicked(object sender, EventArgs e)
{
}
private void SendClicked(object sender, EventArgs e)
{
}
private void RetrieveClicked(object sender, EventArgs e)
{
}
Code on the Client Side
Normally, when a visitor clicks a button, the values are sent to the server. Sometimes, you will want some code to be processed in the browser of the web page visitor. To support this, the tag is equipped with an attribute named OnClientClick.
Before executing code on the client side, you must identify what code it is. In most cases, it may bee a JavaScript function you want to call. If that function is already defined, you can simply call it and assign it to this attribute. Here is an example: 8
Slide 9 : <%@ Page Language="C#" %>
Exercise
This would produce: 9
Slide 10 : 10
Slide 11 : If the code you want to execute is not yet defined, you can write your own function to take
Care of it. Here is an example:
<%@ Page Language="C#" %>
Exercise
This would produce: 11
Slide 12 : 12
Slide 13 : Commanding a Button
If you add many buttons to a web page, you can write code for the Click event of each. As an alternative, you can create a common command code that all buttons can use. To support this, the Button class is equipped with an event named Command. If you are working in Microsoft Visual Studio, click a button on the form. Press and hold Ctrl, then click each of the other buttons. Release Ctrl. In the Events section of the Properties window, double-click Command and write the code for the event.
If you are working manually, to start, write the code for the event. Here is an example:
<%@ Page Language="C#" %>
Exercise
13
Slide 14 : After writing the code, you must associate the event to the buttons. To support this, the
tag is equipped with an attribute named OnCommand. Assign the name
of the event to this attribute. Here are examples:
Code Behind:
private void ButtonCommanded(object sender, CommandEventArgs e)
{ }
<%@ Page Language="C#" %>
Exercise
14
Slide 15 : The Command Name of a Button
To actually handle the Command event, in the procedure of the event, you must write code that includes a conditional statement that will help you identify what actual control was clicked. To identify each control, the tag is equipped with an attribute named CommandName. You must first create a name.
If you are working visually, to create a name for a button, click that button on the form. In the Properties section of the Properties window, click CommandName and type a name, any name of your choice. You should type the same name for each button that will share this name. If you are working manually, add a CommandName attribute to each button. Make sure that each button that will belong to a group uses the same name. Here are examples:
<%@ Page Language="C#" %>
Exercise
15
Slide 16 : Notice that the first and the third buttons use the same command name. After specifying
the names, in the event, you would use a conditional statement to identify the group of
controls by name and take the necessary action. 16