🎛️ ASP.NET UI Controls & Layout Management

Estimated reading: 5 minutes 66 views

🔘 ASP.NET Basic Controls – Learn TextBox, Button, Radio, DropDown with Code & Output

🧲 Introduction – What Are ASP.NET Basic Controls?

ASP.NET Basic Controls are prebuilt server-side form components like TextBox, Button, Label, CheckBox, RadioButton, and DropDownList. These controls help developers build interactive, dynamic forms where user inputs can be processed and handled using C# code on the server.

🎯 In this beginner-focused guide, you’ll learn:

What basic ASP.NET Web Forms controls are
How to build a simple form using basic controls
How to connect your UI to server-side logic using C#
Full working code with output previews and beginner-friendly explanations

📂 ASP.NET Web Forms File Structure

ASP.NET Web Forms follows a two-file model:

📁 File Name	📘 Role
`BasicControls.aspx`	Markup/UI file – where you define controls
`BasicControls.aspx.cs`	Code-behind file – where your C# logic lives

📄 Step 1: Markup File – `BasicControls.aspx`

This is the file where you design the form layout. You’ll define ASP.NET controls like TextBox, Button, and DropDownList using ASP syntax.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BasicControls.aspx.cs" Inherits="ControlDemo.BasicControls" %>

<html>
<body>
  <form id="form1" runat="server">

    <h3>🔘 ASP.NET Basic Controls Demo</h3>

    <!-- TextBox -->
    <asp:Label ID="lblName" runat="server" Text="Enter your name:" /><br />
    <asp:TextBox ID="txtName" runat="server" /><br /><br />

    <!-- RadioButton -->
    <asp:Label ID="lblGender" runat="server" Text="Select Gender:" /><br />
    <asp:RadioButton ID="rbMale" runat="server" GroupName="Gender" Text="Male" />
    <asp:RadioButton ID="rbFemale" runat="server" GroupName="Gender" Text="Female" /><br /><br />

    <!-- CheckBox -->
    <asp:CheckBox ID="chkAgree" runat="server" Text="I agree to the terms" /><br /><br />

    <!-- DropDownList -->
    <asp:Label ID="lblCountry" runat="server" Text="Choose your country:" /><br />
    <asp:DropDownList ID="ddlCountry" runat="server">
      <asp:ListItem Text="India" />
      <asp:ListItem Text="USA" />
      <asp:ListItem Text="Canada" />
    </asp:DropDownList><br /><br />

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

    <!-- Result Label -->
    <asp:Label ID="lblResult" runat="server" ForeColor="Blue" />

  </form>
</body>
</html>

🔍 Beginner Explanation of Each Control

🔧 Control	📘 What It Does
`TextBox`	Collects user input (name)
`RadioButton`	Lets user choose one gender
`CheckBox`	Lets user agree or disagree
`DropDownList`	Allows choosing one country from a list
`Button`	Triggers the C# backend logic
`Label`	Displays output message
`GroupName="Gender"`	Makes Male/Female radio buttons part of one group

⚙️ Step 2: Code-Behind File – `BasicControls.aspx.cs`

This file contains the C# logic that executes when the user clicks the “Submit” button.

public partial class BasicControls : System.Web.UI.Page
{
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // 1. Get name from TextBox
        string name = txtName.Text;

        // 2. Get selected gender
        string gender = rbMale.Checked ? "Male" : rbFemale.Checked ? "Female" : "Not selected";

        // 3. Get selected country
        string country = ddlCountry.SelectedItem.Text;

        // 4. Check agreement status
        string agreement = chkAgree.Checked ? "Agreed" : "Did not agree";

        // 5. Show result
        lblResult.Text = $"Hello, {name}!<br/>Gender: {gender}<br/>Country: {country}<br/>Agreement: {agreement}";
    }
}

🔍 Line-by-Line Explanation

txtName.Text: Gets the name entered by the user
rbMale.Checked: Checks if “Male” radio button is selected
ddlCountry.SelectedItem.Text: Retrieves the selected country
chkAgree.Checked: Returns true if the box is checked
lblResult.Text: Displays a personalized result message on the page

🖥️ Output Example in Browser

🔹 On Page Load:

Enter your name:  [           ]
Select Gender:    ( ) Male   ( ) Female
[ ] I agree to the terms
Choose your country: [India ▼]
[Submit Button]

🔹 After submitting:

Hello, Vaibhav!
Gender: Male
Country: Canada
Agreement: Agreed

📌 Summary – Recap

ASP.NET Basic Controls are essential building blocks for creating interactive forms in Web Forms. These controls are simple to implement and allow you to:

🔍 Key Learnings:

Use controls like TextBox, Label, RadioButton, CheckBox, and DropDownList
Access control values using C# in the code-behind file
Use server-side events (like OnClick) to process user input
Display real-time responses using Label and Text properties

✅ These controls are ideal for login forms, feedback forms, surveys, or any page that collects user data.

❓ Frequently Asked Questions (FAQs)

❓ Why do I need runat="server"?
✅ Without it, the control will behave like a plain HTML element. runat="server" lets ASP.NET process it on the server and expose it to C#.

❓ What is the purpose of GroupName in RadioButton?
✅ It groups radio buttons so only one can be selected at a time.

❓ How does ASP.NET remember values after clicking the button?
✅ ASP.NET uses ViewState to automatically preserve control values across postbacks.

❓ Can I access dropdown or checkbox values using C#?
✅ Yes! Use .SelectedItem.Text for dropdowns and .Checked for checkboxes.

« Previous Next »

Share Now :