Chapter 1: Web Pages Intro
First: What exactly is ASP.NET Web Pages?
ASP.NET Web Pages is a simple, beginner-friendly programming model created by Microsoft (around 2010–2012) for building dynamic websites using the ASP.NET platform.
Think of it as the “easy mode” version inside the big ASP.NET family.
- You write one file per page (very similar to PHP or Classic ASP)
- You mix HTML + CSS + JavaScript directly with server-side code
- The server-side language is C# (most common) or VB.NET
- It uses Razor syntax (the clean @ symbol way) instead of the old ugly <% … %> tags from Classic ASP
Key idea from Microsoft & W3Schools:
“Web Pages provides an easy way to combine HTML, CSS, and server code.”
It’s designed so that if you already know HTML and a little bit of programming (or even just Classic ASP / PHP), you can start making dynamic pages very quickly — without learning complex things like controllers, models, or full MVC right away.
Microsoft officially calls it a lightweight way to build web pages, and they used to recommend a free tool called WebMatrix (now discontinued, but the ideas live on in newer tools).
File extension → .cshtml (C# + HTML) or .vbhtml (VB.NET + HTML)
Current status in 2026 — It’s legacy-ish. Microsoft encourages ASP.NET Core Razor Pages instead (very similar but modern, faster, cross-platform). But many old tutorials (especially W3Schools) still teach classic ASP.NET Web Pages because it’s excellent for learning the basics.
Why did Microsoft make it? (The teacher story part)
In the late 2000s:
- Classic ASP → too old, insecure, slow
- ASP.NET Web Forms → powerful but felt “heavy” and drag-and-drop style
- ASP.NET MVC → great but had a learning curve (separate files for Model/View/Controller)
So they created Web Pages as a bridge:
- Feels like PHP / Classic ASP (one file = one page)
- But uses modern .NET (C#/VB, better security, helpers)
- Perfect for small sites, personal projects, students, or people migrating from PHP
W3Schools says it best: “Similar to PHP and Classic ASP” — that’s why it’s so approachable.
Core feature: Razor syntax — the magic that makes it nice
Razor is the markup syntax that lets you embed C# (or VB) inside HTML cleanly.
Rules (super important — write these down!):
- Server code block → @{ … } (C#) or @Code … End Code (VB)
- Inline output → just use @ before a variable or expression
- Every C# statement ends with ;
- Case-sensitive in C#
- Files end with .cshtml
Example 1 – Your very first “Hello Web Pages” page
File: Hello.cshtml
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@{ // This is a C# code block (runs on server) var message = "Hello from Hyderabad! 🌟"; var currentTime = DateTime.Now.ToString("dddd, MMMM dd, yyyy hh:mm tt"); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My First Web Pages Site</title> </head> <body> <h1>Welcome to ASP.NET Web Pages</h1> <p>@message</p> <p>Server time right now: @currentTime</p> <p>Simple math: 15 + 27 = @(15 + 27)</p> </body> </html> |
What happens?
- Everything in @{ … } runs first on the server
- @message → replaced with the string
- @currentTime → replaced with actual time
- @(15 + 27) → calculates and shows 42
Browser sees only clean HTML — no @ or C# code.
Example 2 – Handling a form (real dynamic page)
File: Greeting.cshtml
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@{ var submitted = false; var userName = ""; if (IsPost) { // ← IsPost checks if form was sent userName = Request["txtName"]; // ← Request gets form field submitted = true; } } <!DOCTYPE html> <html> <body> <h2>Tell me your name!</h2> @if (submitted) { <h3 style="color: green;">Hello, @userName! Nice to meet you 😊</h3> <p>Length of your name: @(userName.Length) characters</p> } else { <form method="post"> <label>Your name: </label> <input type="text" name="txtName" /> <input type="submit" value="Say Hello" /> </form> } </body> </html> |
Key points here:
- IsPost → built-in property (true after submit)
- Request[“txtName”] → gets the input value (like Classic ASP)
- @if (…) { … } → Razor’s way to do conditionals
- Everything stays in one file — super simple!
Example 3 – Layouts (reusable header/footer – very powerful)
Web Pages lets you create a _Layout.cshtml file (note the underscore — special name).
_Layout.cshtml (in Shared folder usually)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>@RenderSection("title", required: false)</title> <link href="~/css/site.css" rel="stylesheet" /> </head> <body> <header> <h1>My Awesome Website</h1> <nav>Home | About | Contact</nav> </header> <main> @RenderBody() <!-- ← where your page content goes --> </main> <footer>© 2026 Webliance Learner</footer> </body> </html> |
Then in any content page (e.g. Index.cshtml):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
@{ Layout = "~/_Layout.cshtml"; // ← link to layout } @section title { Home Page } <h2>Welcome!</h2> <p>This content appears in the @RenderBody() section of the layout.</p> |
Now every page automatically gets header, nav, footer — clean and DRY (Don’t Repeat Yourself).
Quick comparison table (so it sticks in your mind)
| Feature | Classic ASP (old) | ASP.NET Web Pages | Modern ASP.NET Core Razor Pages |
|---|---|---|---|
| File extension | .asp | .cshtml / .vbhtml | .cshtml |
| Server language | VBScript | C# or VB.NET | C# (mainly) |
| Syntax | <% Response.Write() %> | @{ } and @ | Same Razor @ syntax |
| One file = one page? | Yes | Yes | Yes |
| Modern / Supported? | Legacy (almost dead) | Legacy (but great learning) | Current & recommended |
| Platform | Windows only | Windows (old .NET) | Windows + Linux + macOS |
| Learning curve | Easy | Easy | Easy–medium |
Final teacher advice (2026 edition)
If you’re on W3Schools right now:
- Do the WP Tutorial track → it’s excellent for understanding Razor, forms, databases, helpers, grids, security, etc.
- Examples are in both C# and VB — pick C# (it’s the future)
But after you finish:
- Move to ASP.NET Core Razor Pages (free on Microsoft Learn or YouTube)
- Same ideas (Razor, one file per page), but faster, secure, runs anywhere, and has better tools (Visual Studio Code / Visual Studio 2022)
Questions for next class?
- Want a full login/register example from WebPages Security?
- Database connection with SQL?
- Difference between @helper vs partial views?
- Or shall we see why _PageStart.cshtml is useful?
Just say the word — I’m ready with more code and explanations! 🚀
Keep coding, Webliance — you’re doing great! 🇮🇳
