C# ASP.Net Server Control 4.0: Button, LinkButton and ImageButton

Sanjoli Gupta
12y
100k
0
1
100
Article

Introduction
In our daily programming life, we almost always use Button, LinkButton and ImageButton controls in ASP.Net. So, I am going to explain what these controls are and how can we use them effectively.

Button Control:
Displays a push button control on the Web page. The Push button can be a command button or a submit button. A command button has a command name and permits us to create multiple buttons on a page. When a command button is clicked, we can also implement an event handler to control the actions to be performed. A Submit button does not have a command name and when the button is clicked, it posts the web page back to the server. When a submit button is clicked, we can also implement an event handler to control the actions to be performed.
Some of the important properties of a button control are:
CausesValidation: This indicates whether validation will be performed when this button will be clicked. Here, the Value can be set as true or false.
PostBackUrl: This specifies the URL of the page to post to from the current page when a button is clicked.
ValidationGroup: It enables you to specify which validators on the page are called when the button is clicked. If no validation groups are established, a button click calls all of the validators that are on the page.
OnClientClick: Attach a client side (JavaScript) event that will fire when this button will be clicked.
OnClick: Raises the Click event of the Button control.

Note:
In spite of whether the JavaScript is enabled or not, this button will work if the property for user SubmitBehavior is set to true and if this property is set to false and JavaScript is disabled then this control will not work at all.

LinkButton Control
The LinkButton control is used to create a hyperlink-style button on the Web page. This control looks like a Hyperlink control but almost has the functionality of the Button control. Despite being a hyperlink, you can't specify the target URL. There is no UserSubmitBehavior property like the Button control with this control.
Some of the important properties of LinkButton Control are:
CausesValidation: This indicates whether validation will be performed when this button will be clicked. Here, the Value can be set as true or false.
PostBackUrl: This Specifies the URL of the page to post to from the current page when the LinkButton control is clicked.
ValidationGroup: The group of controls for which the LinkButton control causes validation when it posts back to the server.
OnClick: Attach a server side method that will fire when this button will be clicked.
OnClientClick: Attach a client side (JavaScript) method that will fire when this button will be clicked.

Note:
Usually, this control is used to give a uniform look and feel throughout the page or site if you are using a hyperlink. Also if you have less space and want to show a control that can fire a server-side event; placing a Button control will not work as this takes more space as well as its look and feel is completely different than the LinkButton control.

ImageButton
Its like an ASP Button control, the only difference is, you have the ability to place your own image as a button. You use an image Button when you want your button to look different than the plain rectangular button. Any image can be a button!. Some of the important properties of an ImageButton Control are:
ImageUrl: Gets or Sets the location of the image to display as button control.
CausesValidation: This indicates whether validation will be performed when this button will be clicked. Here, the Value can be set as true or false.
PostBackUrl: This Specifies the URL of the page to post to from the current page when the LinkButton control is clicked.
OnClick: Attach a server side method that will fire when this button will be clicked.
OnClientClick: Attach a client side (JavaScript) method that will fire when this button will be clicked.

How to create an image button?
To create an image, you first add an image. You can add an image button visually or manually. Here is an example: <%@ Page Language="C#" %> html> Setting the Image button properties visually. Manually, in the Solution Explorer, right-click to the Project->add new folder->rename it as images->add some images into it. After that, when we insert the imageButton tool from the toolbox into our design window form, then go to the properties of the ImageButton by pressing F4. In this one the property called ImageUrl will show you some of the images that you have inserted before, then select any of them and click Ok.

The following .aspx Code example demonstrates how to design Button, LinkButton and ImageButton controls:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="buttons.aspx.cs" Inherits="buttons" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click"
        style="z-index: 1; left: 23px; top: 56px; position: absolute" Text="click!" />
    <asp:LinkButton ID="LinkButton1" runat="server" EnableTheming="True"
        onclick="LinkButton1_Click"
        style="z-index: 1; left: 24px; top: 194px; position: absolute"
        ToolTip="Link to another page">LinkButton</asp:LinkButton>
    <p style="height: 669px">
        <asp:ImageButton ID="ImageButton1" runat="server"
            ImageUrl="~/images/smiley-guy.jpg" onclick="ImageButton1_Click"
            style="z-index: 1; left: 16px; top: 294px; position: absolute; height: 80px;
width: 88px; right: 1177px; bottom: 421px" />
        <asp:TextBox ID="TextBox1" runat="server"
            style="z-index: 1; left: 20px; top: 383px; position: absolute"></asp:TextBox>
    </p>
    <p> </p>
    </form>
</body>
</html>

.aspx.cs Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class buttons : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Button1.Text = "You clicked the button!";
    }
    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Response.Redirect("default.aspx");//move to the next link i.e default.aspx
    }
    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
       TextBox1.Text="keep smiling";
    }
}