🧩 ASP.NET – Server Controls – Complete Beginner’s Guide with Detailed Explanation & Examples
🧲 Introduction – What Are Server Controls in ASP.NET?
In ASP.NET Web Forms, server controls are special HTML-like elements that run on the server instead of just the browser. These controls are programmable using C# or VB.NET, and allow you to build dynamic, interactive web pages without writing complex JavaScript or client-side code.
They are automatically converted into standard HTML and JavaScript when the page is rendered in a browser—but you can control them fully using server-side logic.
🎯 In this beginner-friendly guide, you’ll learn:
- What ASP.NET server controls are
- Why
runat="server"is required - Types of server controls with examples
- How to use server controls in
.aspx+.cs(code-behind) - Output preview and full explanation
🧠 What Are Server Controls?
Server controls are like HTML elements, but they are more powerful because:
- They are processed on the server, not in the browser directly
- You can set their properties, handle their events, and access them in C#
- Their state (e.g., input text) is automatically preserved between postbacks using ViewState
You must use runat="server" to tell ASP.NET that a control should be managed by the server.
🧱 Types of Server Controls
| 🔧 Control Type | 💬 Description |
|---|---|
| Standard Controls | Basic form elements like TextBox, Button, Label |
| Validation Controls | Used to check if input is valid (e.g., required, email format) |
| Data Controls | Display data from databases (e.g., GridView, Repeater) |
| Navigation Controls | Menu, SiteMapPath, TreeView |
| Login Controls | Ready-to-use login, register, and password reset components |
| Rich Controls | Calendar, AdRotator, FileUpload, etc. |
💻 Example – TextBox, Button, and Label Server Controls
We will create a form where:
- User types their name
- Clicks a button
- The name is shown in uppercase in a label
📄 Step 1: Markup File – ServerControls.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ServerControls.aspx.cs" Inherits="ServerControlDemo.ServerControls" %>
<html>
<body>
<form runat="server">
<h3>ASP.NET Server Controls Demo</h3>
<asp:Label ID="lblPrompt" runat="server" Text="Enter your name:" />
<br />
<asp:TextBox ID="txtName" runat="server" />
<br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<br /><br />
<asp:Label ID="lblResult" runat="server" Text="" ForeColor="Blue" />
</form>
</body>
</html>
🔍 Detailed Explanation of Each Control
| 🧩 Tag | 📘 What It Does |
|---|---|
<asp:Label ID="lblPrompt" ...> | Displays static text (prompt) on the screen |
<asp:TextBox ID="txtName" ...> | Accepts user input (name in this case) |
<asp:Button ID="btnSubmit" ...> | Submits the form and triggers the C# method btnSubmit_Click() |
<asp:Label ID="lblResult" ...> | Shows the final result (converted uppercase text) |
runat="server" | REQUIRED – tells ASP.NET this control will be processed on the server side |
OnClick="..." | Links the button click to a method in your C# code-behind file |
⚙️ Step 2: Code-Behind File – ServerControls.aspx.cs
public partial class ServerControls : System.Web.UI.Page
{
protected void btnSubmit_Click(object sender, EventArgs e)
{
// 1. Get text from TextBox
string name = txtName.Text;
// 2. Convert to uppercase
string upperName = name.ToUpper();
// 3. Display it in the result label
lblResult.Text = "Hello, " + upperName + "!";
}
}
🧠 Step-by-Step Code Explanation
| 🔢 Step | 🧠 What Happens in Code |
|---|---|
| 1 | txtName.Text gets the text entered by the user into the TextBox |
| 2 | ToUpper() converts the name to uppercase using C# |
| 3 | lblResult.Text sets the final output message to the label for display on the webpage |
🖥️ Output Example in Browser
- User sees this form:
Enter your name: [ ] [Submit] - User types:
vaibhavand clicks Submit - Page reloads and shows:
Hello, VAIBHAV!
✅ Benefits of Using Server Controls
| 💡 Feature | 📘 Why It Matters |
|---|---|
| Easy Event Handling | Server-side OnClick, TextChanged, etc. with C# methods |
| State Retention | Keeps values using ViewState across postbacks automatically |
| Integration | Works seamlessly with validators, database controls, etc. |
| Powerful UI Logic | Access properties (e.g., Text, ForeColor, Enabled) from code |
🧠 Real-World Use Cases
- Login/Registration forms
- Feedback forms with validation
- Admin panels with GridView and buttons
- User profile settings pages
- Contact Us forms with email submission
❓ Frequently Asked Questions (FAQs)
❓ Why is runat="server" required for controls in ASP.NET?
✅ Without runat="server", the control is just HTML. With it, ASP.NET turns it into a server-side object that you can access in C#.
❓ What is the difference between Label and Literal in ASP.NET?
✅ Label adds HTML encoding and formatting. Literal is better for raw HTML output (like custom formatting with <br/>).
❓ How does the Button know which function to call?
✅ Through the OnClick="btnSubmit_Click" attribute, which maps to a method with the same name in the .aspx.cs file.
❓ Can I set the color or style of a control from code?
✅ Yes. Example:
lblResult.ForeColor = System.Drawing.Color.Red;
Share Now :
