🧪 ASP.NET – First Example – Create Your First Web App with Code, Explanation & Output
🧲 Introduction – Your First ASP.NET Web Forms Application
Creating your first ASP.NET Web Forms app is the best way to understand how server-side development works in the .NET ecosystem. With minimal setup, you can build a dynamic form that processes input, executes C# code on the server, and returns HTML to the browser.
🎯 In this guide, you’ll learn:
- How to create your first
.aspxpage - Add server controls like
TextBox,Button, andLabel - Write backend logic using C#
- View and understand the browser output
- Full code explanation step-by-step
🏗️ File Structure of an ASP.NET Page
ASP.NET Web Forms uses two key files:
| 📂 File | 📝 Purpose |
|---|---|
Default.aspx | Contains markup (HTML + ASP.NET controls) |
Default.aspx.cs | Code-behind file for handling server-side logic (C#) |
These two files work together using the CodeBehind model, where the UI and logic are separated but connected.
💻 Step-by-Step: ASP.NET Web Form to Convert Text to Uppercase
📄 Markup File – Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FirstWebApp._Default" %>
<html>
<head>
<title>ASP.NET First Example</title>
</head>
<body>
<form runat="server">
<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Convert" OnClick="btnSubmit_Click" />
<br /><br />
<asp:Label ID="lblOutput" runat="server" />
</form>
</body>
</html>
🔍 Code Explanation:
| 🧩 Line | 💬 Description |
|---|---|
<%@ Page ... %> | Declares the page as C# and links to the code-behind file |
<form runat="server"> | Makes the form process on the server (required for server-side logic) |
<asp:TextBox ... /> | Input field for user to enter text |
<asp:Button ... OnClick=... /> | Button that triggers backend C# method when clicked |
<asp:Label ... /> | Label to display output after form submission |
⚙️ Code-Behind File – Default.aspx.cs
protected void btnSubmit_Click(object sender, EventArgs e)
{
// 1. Read text from the textbox
string userInput = txtName.Text;
// 2. Convert text to uppercase
string result = userInput.ToUpper();
// 3. Show result in label
lblOutput.Text = "Output: " + result;
}
🔍 Line-by-Line Breakdown:
btnSubmit_Click: This method is executed when the button is clicked.txtName.Text: Retrieves the text the user typed into the input field.ToUpper(): Converts the string to uppercase using C# string method.lblOutput.Text: Displays the converted result on the page using a Label.
🖥️ Output in Browser
Before clicking the button:
[TextBox: "vaibhav"] [Convert Button]
After clicking the Convert button:
Output: VAIBHAV
ASP.NET sends the user input back to the server, processes it in C#, and re-renders the updated page.
🔁 What Happens Behind the Scenes?
- User accesses the
.aspxpage via browser - Page is compiled into a C# class by the ASP.NET runtime
- Server renders the form with TextBox and Button
- On button click, the page is posted back to the server
btnSubmit_Clickexecutes on the server- New HTML is generated with the output and returned to the browser
🧠 Key Takeaways from Your First ASP.NET App
- ASP.NET pages are compiled, not interpreted
- Controls like
TextBox,Button, andLabelare server-side objects - Postbacks allow the page to submit itself and retain state using ViewState
- You can handle events using C# methods in the code-behind file
- ASP.NET makes it easy to build interactive and dynamic web forms
❓ Frequently Asked Questions (FAQs)
❓ Can I use ASP.NET without Visual Studio?
✅ Yes, you can use lightweight editors like Visual Studio Code, but Visual Studio provides drag-and-drop support, IntelliSense, and debugging tools for easier development.
❓ How do I link .aspx and .cs files in ASP.NET?
✅ The directive <%@ Page ... CodeBehind="Default.aspx.cs" Inherits="..." %> connects the markup with its backend logic.
❓ Why do I need runat="server"?
✅ This attribute tells ASP.NET to treat the element as a server-side control that can be accessed in C#.
❓ What is the purpose of AutoEventWireup="true"?
✅ It allows the page to automatically associate events (like Page_Load) with their handlers in code-behind without manually wiring them.
❓ Can I build more complex logic in Default.aspx.cs?
✅ Absolutely. You can connect databases, perform validation, implement authentication, and more—just like any full-stack server-side technology.
Share Now :
