Button Control
In ASP.NET, there are 3 types of button controls:
- Button This is the standard HTML Submit button.
- LinkButton This button looks like a hyperlink on the client. It requires client-side JavaScript support.
- ImageButton This button displays an image on the client.
| Property | Description |
|---|---|
| Text | Gets or sets the text displayed on the button or the link in case of a LinkButton. Not available for ImageButton. |
| CommandName | Passed to Command event when button is clicked. |
| CommandArgument | Passed to Command event when button is clicked. |
| CausesValidation | By default, True. If False, the form submitted by the button is not validated. |
| AlternativeText | Gets or sets the text displayed on the ImageButton when the browser does not support images. |
| ImageAlign | Aligns image on ImageButton. Can take the values: AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, Top |
| ImageURL | Specifies URL of image to be used for ImageButton. |
| Method | Description |
| OnClick | Raises Click event. |
| OnCommand | Raises Command event. |
| Event | Description |
| Click | Raised when button is clicked and the form is submitted to the server. |
| Command | This event is also raised when button is clicked. Passes additional information through CommandName and CommandArgument properties. |
Example 1: Button Control Event
<script runat="server">
protected void Button_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
btn.Text = (Int32.Parse(btn.Text) + 1).ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Button Counters</title>
</head>
<body>
<form id="form1" runat="server">
<div>
First Counter: <asp:Button id="Button1" Text="0"
OnClick="Button_Click" Runat="server" />
<br /><br />
Second Counter: <asp:Button id="Button2" Text="0" OnClick="Button_Click" Runat="server" />
</div>
</form>
</body>
</html>
The Command event is also raised when a button is clicked. The difference between the two events is that you can pass additional information as values of the CommandName and CommandArgument properties.
Suppose you have two buttons on a form, Credit and Debit. You wish to pass the amount to be credited when the Credit button is clicked and the amount to be debited when the Debit button is clicked. Example shows you how to handle the Command event.
Example 2: Handling Command Event of Button Control
<script runat="server">
protected void Submit_click(Object sender, CommandEventArgs e)
{
int intAmt = Convert.ToInt32(e.CommandArgument);
if (e.CommandName == "Credit")
lblOutput.Text = (Convert.ToInt32(lblOutput.Text) + intAmt).ToString();
else
lblOutput.Text = (Convert.ToInt32(lblOutput.Text) - intAmt).ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Button Counters</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Button id="Credit" text="Credit 100" CommandName="Credit" CommandArgument="100" OnCommand="Submit_click" runat="server"/>
<p>
<asp:Button id="Debit" text="Debit 100" CommandName="Debit" CommandArgument="100" OnCommand="Submit_click" runat="server"/>
<p>
<asp:Label id="lblOutput" text="500" runat="server" />
</form>
</body>
</html>
Example 3: Using ImageButton and LinkButton Controls
<script runat="server">
protected void ImageButton_click(Object sender, ImageClickEventArgs e)
{
lblMsg.Text = "You have clicked an ImageButton control.";
}
protected void LinkButton_click(Object sender, EventArgs e)
{
lblMsg.Text = "You have clicked a LinkButton control.";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Button Counters</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ImageButton id="btnImageButton" text="Click" ImageURL="web.jpg" OnClick="ImageButton_click" runat="server"/>
<p>
<asp:LinkButton id="btnLinkButton" text="Click" OnClick="LinkButton_click" runat="server"/>
<p>
<asp:Label id="lblMsg" runat="server" />
</form>
</body>
</html>
Example 4: ImageButton Control Event
<script runat="server">
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
int x = e.X, y = e.Y;
Label1.Text = x + " " + y;
if ((x >= 190 && x<= 230) && (y>= 190 && y<= 230))
Label1.Text = "u hit the target! Bulls eye. Score = 100";
else
if ((x>=140 && x<=280) &&(y>=140 && y<=280))
Label1.Text = "u miss the target! Score = 80";
else
if ((x >= 95 && x <= 325) && (y >= 95 && y <= 325))
Label1.Text = "u miss the target! Score = 60";
else
Label1.Text = "Score = 0";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Hit Target</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Hit Target.jpg" onclick="ImageButton1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
Exercise:
- Create a menu image