What is Page Architecture in ASP.NET? Code-Behind Model | BCA Sem 5

BCA Sem 5  |  Unit 1  |  ASP.NET

Page Architecture in ASP.NET

How is an ASP.NET Web Form page actually built and structured inside?

BKNMU Junagadh NEP 2020 Web Forms Code-Behind Model

In simple words: Page Architecture in ASP.NET means how an ASP.NET page is structured internally — what files are involved, how they connect, and how the page processes a request from start to finish. Think of it like the blueprint of a building — it shows how every part fits together.

📖 What is Page Architecture?

Every ASP.NET Web Form page is not just a single file — it is a combination of multiple files and layers working together. The way these files are organized, connected, and processed is called Page Architecture.

Understanding page architecture helps you know:

• Where to write your design/UI code
• Where to write your business logic/C# code
• How the browser, server, and database communicate
• Why ASP.NET separates design from logic

🔀 Two Coding Models in ASP.NET

📄 Single-File Model

• HTML + C# code both in one .aspx file
• Code goes inside <script runat="server"> tag
• Simple for small pages
• Hard to manage for large projects
• Less organized — not recommended

📂 Code-Behind Model

• Design in .aspx file
• Logic in separate .aspx.cs file
• Clean separation of UI and code
• Easier to maintain & debug
• ✅ Recommended & most widely used

ℹ️ Remember: The Code-Behind Model is the standard approach in ASP.NET Web Forms and is what you will use in all your BCA Sem 5 practicals. Always prefer it over the single-file model.

🗂️ The 4 Key Files in ASP.NET Page Architecture

ASP.NET Web Form — Complete File Structure

📄 Default.aspx  —  Presentation Layer (UI)

Contains: HTML markup, <asp:> server controls
Role: What the user SEES — layout, forms, buttons
Directive: <%@ Page Language="C#" CodeFile="Default.aspx.cs" %>

⚙️ Default.aspx.cs  —  Logic Layer (Code-Behind)

Contains: C# event handlers, business logic, DB calls
Role: What happens when user clicks/submits
Class: public partial class _Default : System.Web.UI.Page

🔧 Default.aspx.designer.cs  —  Auto-Generated File

Contains: Auto-generated control declarations
Role: Links server controls to code-behind
Note: DO NOT edit this file manually — Visual Studio manages it

🔑 Web.config  —  Configuration File

Contains: Connection strings, app settings, security rules
Role: Global settings for the entire application
Format: XML-based configuration

🏗️ ASP.NET Page Architecture — Layer by Layer

1

Browser Layer (Client)

The user opens a browser and types a URL or clicks a link. The browser sends an HTTP request to the server. This is the entry point of the whole process.

2

IIS Web Server Layer

Internet Information Services (IIS) receives the request and checks the file extension. If it's .aspx, it hands it over to the ASP.NET engine for processing.

3

ASP.NET Runtime Layer

The ASP.NET engine kicks in. It parses the .aspx file, creates the Page object, runs the Page Life Cycle (Init → Load → Render → Unload), and calls the code-behind class.

4

Code-Behind Layer (.aspx.cs)

Your C# logic runs here — loading data from the database, validating input, running business rules. This layer uses ADO.NET to connect to SQL Server if needed.

5

HTML Output Layer (Response)

After processing, ASP.NET converts all server controls into plain HTML and sends the final HTML page back to the browser, which displays it to the user.

📋 The @Page Directive — The Header of Every .aspx File

Every .aspx file starts with a special line called the @Page Directive. It gives ASP.NET important instructions about how to process that page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Attribute	What It Does	Common Values
Language	Programming language used in this page	"C#" or "VB"
AutoEventWireup	Automatically connects events like Page_Load to handlers	"true" (default)
CodeFile	Links this .aspx to its code-behind file	"Default.aspx.cs"
Inherits	The class name in the code-behind file	"_Default"
MasterPageFile	Links to a master page for shared layout	"~/Site.master"
Title	Sets the browser tab title of the page	"Home Page"
Trace	Enables trace output for debugging	"true" / "false"

🔗 How .aspx and .aspx.cs Connect — Partial Classes

One important concept in ASP.NET Page Architecture is Partial Classes. The .aspx page and the .aspx.cs code-behind file are actually two halves of the same class — joined together by the partial keyword in C#.

// Default.aspx.cs — Code-Behind File public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Runs every time the page loads lblWelcome.Text = "Welcome to ASP.NET Page Architecture!"; } protected void btnSubmit_Click(object sender, EventArgs e) { // Runs when user clicks the Submit button lblResult.Text = "Form submitted successfully!"; } }

<!-- Default.aspx — Presentation File --> <%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Label ID="lblWelcome" runat="server" /> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> <asp:Label ID="lblResult" runat="server" />

💡 Key Point — Partial Classes: The partial keyword means the class is split across two files (.aspx and .aspx.cs). At compile time, ASP.NET combines them into one single class. This is why controls defined in .aspx can be accessed directly in .aspx.cs without any extra imports!

🔄 How ASP.NET Processes a Page Request — Step by Step

1

Browser Sends HTTP Request

User types http://mysite.com/Default.aspx — browser sends request to server.

2

IIS Receives & Routes Request

IIS sees the .aspx extension and passes it to the ASP.NET ISAPI filter.

3

ASP.NET Compiles the Page

First time only — ASP.NET parses the .aspx + .aspx.cs + .designer.cs files and compiles them into a .dll file stored in the bin folder.

4

Page Life Cycle Executes

The compiled page class runs through all life cycle stages: Init → Load → Event Handling → PreRender → Render.

5

HTML is Generated & Sent

All <asp:> server controls are converted to plain HTML. The complete HTML page is sent back to the browser as an HTTP Response.

6

Browser Renders the Page

The browser receives the HTML + CSS + JS and displays the final web page to the user.

💾 ViewState — The Hidden Hero of Page Architecture

One of the biggest features of ASP.NET page architecture is ViewState. HTTP is a stateless protocol — meaning the server forgets everything after each request. ViewState solves this by saving the state of all controls in a hidden field.

<!-- ViewState is stored as a hidden field in the page HTML --> <input type="hidden" name="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcwMjFkZA==" />

Feature	Details
What it is	A hidden field that stores the state of all server controls
Where it is stored	Inside the HTML page as __VIEWSTATE hidden input
When it is used	On postback — to restore textbox values, dropdown selections etc.
How to disable it	EnableViewState="false" on the control or page directive
Downside	Increases page size — can slow down page load for large data

📝 Quick Revision — Key Points for Exam

• Page Architecture = how an ASP.NET page is structured and processed.
• Two models: Single-File (design + code in .aspx) and Code-Behind (separate .aspx + .aspx.cs).
• Code-Behind model is recommended — clean separation of UI and logic.
• 4 key files: .aspx (UI), .aspx.cs (logic), .designer.cs (auto), Web.config (settings).
• @Page Directive is the first line of every .aspx — links it to code-behind via CodeFile and Inherits.
• Partial Classes: .aspx and .aspx.cs are two halves of the same class — joined at compile time.
• ASP.NET compiles pages into .dll files stored in the bin folder.
• ViewState saves control states as a hidden field (__VIEWSTATE) to maintain state across postbacks.
• 5-layer architecture: Browser → IIS → ASP.NET Runtime → Code-Behind → HTML Response.