🎛️ ASP.NET UI Controls & Layout Management

Estimated reading: 4 minutes 44 views

🛠️ ASP.NET – Custom Controls – Create Reusable UI Components in Web Forms (Beginner’s Guide)

🧲 Introduction – What Are ASP.NET Custom Controls?

ASP.NET Custom Controls are user-defined, reusable UI components that encapsulate markup and logic into a single unit. Unlike Web User Controls (.ascx), custom controls are compiled into .DLL files and can be used across multiple web applications.

They are ideal for scenarios where you want to:

Reuse UI + logic in many projects
Package controls into a standalone library
Reduce repetitive code in large applications

🎯 In this guide, you’ll learn:

The difference between User Controls and Custom Controls
How to create a simple ASP.NET Custom Control in C#
How to render output and respond to events
Full code walkthrough with output and beginner explanations

📂 File Structure – How ASP.NET Custom Controls Are Organized

📁 File	📘 Purpose
`CustomHelloControl.cs`	C# class that defines your custom control behavior
`Default.aspx`	Page where you use the custom control
`Default.aspx.cs`	Code-behind file to interact with the control (optional)

📄 Step 1: Create a Custom Control – `CustomHelloControl.cs`

We’ll now create a simple custom control that includes a TextBox and a Button. When the user enters their name and clicks the button, it shows a greeting.

💡 This control inherits from CompositeControl to combine multiple child controls.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControlDemo
{
    public class CustomHelloControl : CompositeControl
    {
        private TextBox txtName;
        private Button btnGreet;
        private Label lblMessage;

        protected override void CreateChildControls()
        {
            // TextBox
            txtName = new TextBox();
            txtName.ID = "txtName";
            this.Controls.Add(txtName);

            // Button
            btnGreet = new Button();
            btnGreet.ID = "btnGreet";
            btnGreet.Text = "Say Hello";
            btnGreet.Click += new EventHandler(btnGreet_Click);
            this.Controls.Add(btnGreet);

            // Label
            lblMessage = new Label();
            lblMessage.ID = "lblMessage";
            this.Controls.Add(lblMessage);
        }

        private void btnGreet_Click(object sender, EventArgs e)
        {
            lblMessage.Text = "Hello, " + txtName.Text + "!";
        }
    }
}

🔍 Beginner-Friendly Explanation:

🧩 Code Part	📘 What It Does
`CompositeControl`	Base class that lets us group multiple controls (like TextBox, Button)
`CreateChildControls()`	This method builds and adds the controls dynamically
`btnGreet.Click += ...`	Hook up the event handler for button click
`lblMessage.Text = ...`	Updates the label with the greeting message

⚙️ Step 2: Register and Use the Control in `Default.aspx`

Once the control is built and compiled (usually into a DLL), you can use it in a web page like this:

<%@ Register TagPrefix="cc" Namespace="CustomControlDemo" Assembly="App_Code" %>

<html>
<body>
  <form runat="server">
    <h3>🛠️ Custom Control Demo</h3>
    <cc:CustomHelloControl ID="MyHelloControl" runat="server" />
  </form>
</body>
</html>

🔍 Markup Breakdown:

Tag	📘 Explanation
`<%@ Register ... %>`	Registers your custom control with ASP.NET
`TagPrefix="cc"`	Prefix you use in the control tag (`cc:`)
`Namespace="CustomControlDemo"`	Matches the C# namespace where your control is defined
`Assembly="App_Code"`	Where the control is located (in App_Code folder by default)
`<cc:CustomHelloControl ... />`	Usage of your custom control on the page

🖥️ Output Preview in Browser

[ TextBox: Enter name ] [Say Hello]

After entering “Vaibhav” and clicking the button:

Hello, Vaibhav!

✅ Everything is rendered by the server as standard HTML and behaves like native Web Forms controls.

📌 Summary – Recap & Takeaways

🔍 Key Learnings:

ASP.NET Custom Controls are reusable C# classes for UI logic and rendering
Unlike .ascx user controls, they are compiled and more portable
You can build them using CompositeControl to group elements like buttons and labels
Register them using the <%@ Register %> directive and use them in any page
Perfect for shared libraries, enterprise-grade UI components, and scalability

✅ These controls are ideal when you want to:

Create a shared control library (DLL)
Package UI logic + markup in one reusable file
Use the same component across different projects or applications

❓ Frequently Asked Questions (FAQs)

❓ What is the difference between a Custom Control and a User Control?
✅ A User Control (.ascx) is easier to create but not compiled or reusable across multiple projects. A Custom Control is compiled into a DLL and can be used anywhere.

❓ Where do I put the custom control file?
✅ Usually in the App_Code folder if you’re not using a separate class library. In large projects, it’s common to put it in a class library project and compile it to a DLL.

❓ How do I handle events from custom controls?
✅ Just like in regular controls. Inside CreateChildControls(), wire up events using controlName.Click += handler.

❓ Can I add CSS to custom controls?
✅ Yes. You can set styles programmatically (btnGreet.CssClass = "myButton") or add raw HTML if needed.

« Previous Next »

Share Now :