Home

Web Control: The Button

 

Buttons 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 either Microsoft Visual Studio or Microsoft Visual Web Developer, 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 <asp:Button> tag in the form. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>
<title>Exercise</title>
</head>
<body>

<form id="frmExercise" runat="server">
  <asp:Button id="btnExercise" runat="server"></asp:Button>
</form>

</body>
</html>

This would produce:

Button

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#" %>
<html>
<head>
<title>Exercise</title>
</head>
<body>

<form id="frmExercise" runat="server">
  <asp:Button id="btnExercise" Text="Exercise" runat="server"></asp:Button>
</form>

</body>
</html>

This would produce:

Button

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#" %>
<html>
<head>

<script runat="server">
private void ButtonWasClicked(object sender, EventArgs e)
{
}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmExercise" method="post" runat="server">
  <asp:Button id="btnExercise"
              Text="Exercise"
	      OnClick="ButtonWasClicked"
	      runat="server"></asp:Button>
</form>

</body>
</html>

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#" %>
<html>
<head>

<script runat="server">
private void VerifyClicked(object sender, EventArgs e)
{
}

private void SendClicked(object sender, EventArgs e)
{
}

private void RetrieveClicked(object sender, EventArgs e)
{
}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:Button id="btnVerify"
              Text="Verify"
	      OnClick="VerifyClicked"
	      runat="server"></asp:Button></li>
    <li><asp:Button id="btnSend"
              Text="Send"
	      OnClick="SendClicked"
	      runat="server"></asp:Button></li>
    <li><asp:Button id="btnRetrieve"
              Text="Retrieve"
	      OnClick="RetrieveClicked"
	      runat="server"></asp:Button></li>
  </ul>
</form>

</body>
</html>

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 <asp:Button> 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:

<%@ Page Language="C#" %>
<html>
<head>

<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{

}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmTimeSheet" method="post" runat="server">
  <asp:Button ID="btnTimeSheet"
OnClientClick="JavaScrip:window:alert('Make sure you submit your time sheet');"
	    Text="Time Sheet"
	    runat="server" />
</form>

</body>
</html>

This would produce:

On Client Click

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#" %>
<html>
<head>

<script language="JavaScript" type="text/javascript">
function ShowMessageBox()
{
    JavaScrip:window:alert('The time sheet you submited is not complete');
}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmTimeSheet" method="post" runat="server">
  <asp:Button ID="btnTimeSheet"
              OnClientClick="ShowMessageBox()"
	      Text="Time Sheet"
	      runat="server" />
</form>

</body>
</html>

This would produce:

On Client Click

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 either Microsoft Visual Studio or Microsoft Visual Web Developer, 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#" %>
<html>
<head>

<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{
}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:Button id="btnVerify"
              Text="Verify"
	      runat="server"></asp:Button></li>
    <li><asp:Button id="btnSend"
              Text="Send"
	      runat="server"></asp:Button></li>
    <li><asp:Button id="btnRetrieve"
              Text="Retrieve"
	      runat="server"></asp:Button></li>
  </ul>
</form>

</body>
</html>

After writing the code, you must associate the event to the buttons. To support this, the <asp:Button> tag is equipped with an attribute named OnCommand. Assign the name of the event to this attribute. Here are examples:

<%@ Page Language="C#" %>
<html>
<head>

<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{
}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:Button id="btnVerify"
	            Text="Verify"
		    OnCommand="ButtonCommanded"
	      	    runat="server"></asp:Button></li>
    <li><asp:Button id="btnSend"
              	    Text="Send"
		    OnCommand="ButtonCommanded"
	      	    runat="server"></asp:Button></li>
    <li><asp:Button id="btnRetrieve"
              	    Text="Retrieve"
		    OnCommand="ButtonCommanded"
	      	    runat="server"></asp:Button></li>
  </ul>
</form>

</body>
</html>
 
 
 
 

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 <asp:Button> 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#" %>
<html>
<head>

<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{

}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:Button id="btnVerify"
	            Text="Verify"
		    CommandName="first"
		    OnCommand="ButtonCommanded"
	      	    runat="server"></asp:Button></li>
    <li><asp:Button id="btnSend"
              	    Text="Send"
		    CommandName="something"
		    OnCommand="ButtonCommanded"
	      	    runat="server"></asp:Button></li>
    <li><asp:Button id="btnRetrieve"
              	    Text="Retrieve"
		    CommandName="first"
		    OnCommand="ButtonCommanded"
	      	    runat="server"></asp:Button></li>
  </ul>
</form>

</body>
</html>

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.

Creating a Submit Button

Normally, a button is an intermediary control. A web page visitor uses the other controls on a form, then clicks the button. That's where the button plays its role, and that's when you must intervene.

A submit button is one that is implicitly configured to send the values of the form to the server that would take over in processing them, as opposed to a scenario where the values would be processed by the browser (also called the client). To create a submit button, the <asp:Button> tag is equipped with a Boolean attribute named UseSubmitBehavior. Its default behavior is True. This means that you don't have to write code for the button. On the other hand, if you want to handle the click event yourself, set this property to False. If you do this, when the web page is generated, the server would add the client-side code to it. As a result, this:

<%@ Page Language="C#" %>
<html>
<head>
<title>Exercise</title>
</head>
<body>

<form id="frmExercise" method="post" runat="server">
  <asp:Button id="btnExercise"
              Text="Exercise"
              UseSubmitBehavior="False"
	      runat="server"></asp:Button>
</form>

</body>
</html>

would produce this:

<html>
<head>
<title>Exercise</title>
</head>
<body>
 
<form name="frmExercise" method="post" action="exercise.aspx" id="frmExercise">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE"
 id="__VIEWSTATE" value="/wEPDwUJMjI4MTU0NDAyZGTWj/v0HSNU5v6ZCxY12ZELsX3V2A==" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['frmExercise'];
if (!theForm) {
    theForm = document.frmExercise;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<div>
  <input type="hidden"
	 name="__EVENTVALIDATION"
	 id="__EVENTVALIDATION"
	 value="/wEWAgLVxM1/Au6Su5EK2vUgSIgbHGO7Qj9mH+vWTQkeumQ=" />
</div>
  <input type="button"
	 name="btnExercise"
	 value="Exercise"
	 onclick="javascript:__doPostBack('btnExercise','')"
	 id="btnExercise" />
</form>
 
</body>
</html>
 
 
   
 

Home Copyright © 2009-2015, FunctionX, Inc.