ASP.NET Button Controls Explained – Button, LinkButton, ImageButton | BCA Sem 5

BCA Sem 5  |  Unit 1  |  ASP.NET Standard Controls

Button Controls in ASP.NET

Button, LinkButton & ImageButton — the 3 types of buttons every ASP.NET developer must know

BKNMU Junagadh NEP 2020 Web Forms Standard Controls Server Controls

In simple words: A Button in ASP.NET is a clickable control that triggers an action on the server — like submitting a form, saving data, or navigating to another page. ASP.NET gives you 3 types of button controls — each looking different but doing similar jobs.

📖 What are Button Controls in ASP.NET?

In plain HTML, a button is just <input type="button"> — it does nothing unless you write JavaScript. But in ASP.NET, button controls have runat="server" which means when you click them, they automatically send data to the server (called a PostBack) and run your C# code.

ASP.NET provides 3 standard button controls:

Click Me

asp:Button

A standard rectangular push button. Most commonly used in forms and actions.

Click Here →

asp:LinkButton

Looks like a hyperlink but works like a button — posts back to server on click.

🖼️ Image Button

asp:ImageButton

An image that acts as a button — click coordinates (X, Y) are also captured.

🎨 What They Look Like — Live Preview

Button Styles & Variations

Submit Save Delete Update

Cancel Disabled Click here to login → 🖼️ ImageButton

1️⃣ asp:Button — The Standard Button

The most commonly used button in ASP.NET. It renders as a standard HTML <input type="submit"> or <button> and triggers a PostBack when clicked.

Syntax:

<!-- Basic Button --> <asp:Button ID="btnSubmit" runat="server" Text="Submit Form" OnClick="btnSubmit_Click" />

Code-Behind (C#):

protected void btnSubmit_Click(object sender, EventArgs e) { // Code to run when button is clicked lblMessage.Text = "Form submitted successfully!"; }

All Important Properties of asp:Button:

Property	What It Does	Example Value
ID	Unique identifier for the button	"btnSubmit"
Text	Label shown on the button	"Submit", "Save"
OnClick	Name of the C# method to call on click	"btnSubmit_Click"
Enabled	Enable or disable the button	"true" / "false"
Visible	Show or hide the button	"true" / "false"
CausesValidation	Whether clicking triggers validation	"true" / "false"
ValidationGroup	Groups validators this button triggers	"LoginGroup"
PostBackUrl	Posts form data to a different page	"~/Result.aspx"
CommandName	Used with GridView rows — identifies command	"Edit", "Delete"
CommandArgument	Extra data passed with CommandName	"101" (row ID)
UseSubmitBehavior	Render as submit or regular button	"true" / "false"
OnClientClick	JavaScript to run before PostBack	"return confirm('Sure?')"
ToolTip	Hover tooltip text	"Click to submit"
CssClass	Apply CSS class for styling	"btn-primary"
Width / Height	Size of the button	"120px", "40px"

2️⃣ asp:LinkButton — The Hyperlink Button

The LinkButton looks exactly like an HTML hyperlink — blue underlined text — but when clicked, it does a PostBack to the server just like a regular button. Useful when you want a button that blends in with text.

Syntax:

<asp:LinkButton ID="lbtnLogin" runat="server" Text="Click here to Login" OnClick="lbtnLogin_Click" ForeColor="Blue" />

Code-Behind (C#):

protected void lbtnLogin_Click(object sender, EventArgs e) { // Redirect user after clicking link Response.Redirect("Login.aspx"); }

Important Properties of asp:LinkButton:

Property	What It Does	Example
Text	The clickable link text shown to user	"Click here"
ForeColor	Color of the link text	"Blue", "#2563eb"
Font-Underline	Whether link text is underlined	"true"
OnClick	Server-side click event handler	"lbtn_Click"
OnClientClick	JavaScript before PostBack	"return confirm('Sure?')"
CommandName	For use inside GridView/Repeater	"Delete"
PostBackUrl	Cross-page PostBack target	"~/Page2.aspx"

💡 Tip: Use LinkButton when you want a button inside a paragraph of text, or in navigation menus — it blends in naturally as a link but still runs your C# code on the server!

3️⃣ asp:ImageButton — The Image as Button

The ImageButton displays an image that the user can click — just like a regular button. The special feature is that it also captures the X and Y coordinates of exactly where the user clicked on the image.

Syntax:

<asp:ImageButton ID="imgBtn" runat="server" ImageUrl="~/images/submit.png" AlternateText="Submit Button" OnClick="imgBtn_Click" Width="120px" Height="40px" />

Code-Behind — Capturing Click Coordinates:

protected void imgBtn_Click(object sender, ImageClickEventArgs e) { // e.X and e.Y give the click coordinates int xPos = e.X; int yPos = e.Y; lblInfo.Text = "You clicked at X=" + xPos + ", Y=" + yPos; }

Important Properties of asp:ImageButton:

Property	What It Does	Example
ImageUrl	Path to the image file used as button	"~/images/btn.png"
AlternateText	Alt text shown if image fails to load	"Submit"
OnClick	Handler — receives ImageClickEventArgs (has X, Y)	"imgBtn_Click"
Width / Height	Size of the image button	"120px" / "40px"
ImageAlign	Alignment relative to surrounding content	"Middle", "Top"
OnClientClick	JavaScript before PostBack	"return confirm('OK?')"

🔍 Comparison — Button vs LinkButton vs ImageButton

asp:Button

• Looks like a standard push button
• Renders as <input type="submit">
• Best for forms & data submission
• Event: EventArgs e
• Most commonly used

asp:LinkButton

• Looks like a hyperlink
• Renders as <a href="javascript">
• Best for inline text buttons
• Event: EventArgs e
• Needs JavaScript enabled

asp:ImageButton

• Looks like an image
• Renders as <input type="image">
• Best for custom UI designs
• Event: ImageClickEventArgs e
• Captures X, Y coordinates

💻 Complete Working Example — All 3 Buttons Together

.aspx file:

<asp:Label ID="lblResult" runat="server" Text="Click any button below:" Font-Size="16px"/> <br /><br /> <!-- 1. Standard Button --> <asp:Button ID="btnNormal" runat="server" Text="Standard Button" OnClick="btnNormal_Click" /> <br /><br /> <!-- 2. Link Button --> <asp:LinkButton ID="lbtnLink" runat="server" Text="Click this LinkButton" OnClick="lbtnLink_Click" /> <br /><br /> <!-- 3. Image Button --> <asp:ImageButton ID="imgBtnGo" runat="server" ImageUrl="~/images/go.png" AlternateText="Go Button" OnClick="imgBtnGo_Click" />

.aspx.cs file (C# Code-Behind):

protected void btnNormal_Click(object sender, EventArgs e) { lblResult.Text = "✅ You clicked the Standard Button!"; } protected void lbtnLink_Click(object sender, EventArgs e) { lblResult.Text = "✅ You clicked the LinkButton!"; } protected void imgBtnGo_Click(object sender, ImageClickEventArgs e) { lblResult.Text = "✅ You clicked the ImageButton at X=" + e.X + ", Y=" + e.Y; }

⚠️ Bonus — Adding a Confirmation Dialog Before PostBack

Use OnClientClick to show a JavaScript confirm box before the button posts back:

<asp:Button ID="btnDelete" runat="server" Text="Delete Record" OnClick="btnDelete_Click" OnClientClick="return confirm('Are you sure you want to delete?');" />

⚠️ Important: If the user clicks Cancel in the confirm box, the PostBack is cancelled and your C# code does NOT run. Only clicking OK triggers the server-side event.

ℹ️ Note on CausesValidation: By default, all buttons trigger validation. If you have a "Cancel" button and don't want it to validate the form, set CausesValidation="false" on the Cancel button.

🔄 How Button Click Works — PostBack Flow

1

User Clicks the Button

Browser prepares the form data and sends an HTTP POST request to the server.

2

Page Life Cycle Starts

ASP.NET processes Page_Init → Page_Load with IsPostBack = true.

3

Button Click Event Fires

ASP.NET calls your C# event handler — e.g. btnSubmit_Click().

4

Page Renders & Responds

Updated HTML (with new label text etc.) is sent back to the browser.

📝 Quick Revision — Key Points for Exam

• ASP.NET has 3 button controls: Button, LinkButton, ImageButton.
• asp:Button = standard push button, renders as <input type="submit">.
• asp:LinkButton = looks like a hyperlink, works like a button — needs JavaScript.
• asp:ImageButton = image as button — captures X, Y click coordinates.
• All button controls require runat="server".
• Button click triggers a PostBack — sends form data to server.
• OnClick = server event  |  OnClientClick = JavaScript before PostBack.
• CausesValidation="false" skips form validation on click.
• ImageClickEventArgs is used for ImageButton — gives e.X and e.Y coordinates.
• PostBackUrl allows cross-page PostBack — post to a different page.
• CommandName + CommandArgument are used with buttons inside GridView/Repeater.