Chapter 16: Web Pages Examples
WebPages Examples
This page is not a single lesson with new theory — it’s a collection of ready-to-run mini-examples that demonstrate almost everything you’ve learned so far in the WP Tutorial track.
W3Schools provides two separate tracks here:
- Examples in C# (using .cshtml files with C# Razor syntax — most common and recommended today)
- Examples in VB (using .vbhtml files with VB.NET Razor syntax — still supported, but less used now)
Both languages do the same things — the differences are mostly in syntax (C# uses ; and {} more like JavaScript/Java, VB uses End If, no ;, etc.).
The page groups examples into categories like:
- Basic Web Pages
- Forms Examples
- Objects Examples
- Files Examples
- Databases Examples
- Helpers Examples (WebGrid, Chart, etc.)
- And more…
Each example has:
- A short description
- “Try it Yourself” button → opens editor with code
- Separate tabs/links for C# version and VB version
Since the page itself doesn’t embed all code inline (it links to individual “showfile” pages), I’ll act as your teacher and walk you through key representative examples from the main categories — with both C# and VB side-by-side where meaningful differences exist.
1. Basic Examples – Hello World + Date/Time
Goal: Show simple Razor output, server time.
C# version (Default.cshtml or similar)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@{ // C# code block var message = "Hello from Hyderabad!"; } <!DOCTYPE html> <html> <body> <h1>Hello Web Pages World!</h1> <p>@message</p> <p>Current server time: @DateTime.Now.ToString("dddd, MMMM dd, yyyy - hh:mm tt")</p> </body> </html> |
VB version (same file but .vbhtml extension)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@Code ' VB code block Dim message = "Hello from Hyderabad!" End Code <!DOCTYPE html> <html> <body> <h1>Hello Web Pages World!</h1> <p>@message</p> <p>Current server time: @Now.ToString("dddd, MMMM dd, yyyy - hh:mm tt")</p> </body> </html> |
Differences:
- C#: Uses @{ … } and ends statements with ;
- VB: Uses @Code … End Code, no ;, Dim for variables
- Date: C# uses DateTime.Now, VB uses shortcut Now
2. Forms Example – Simple Input + Greeting
Goal: Postback form, read input.
C# version
|
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 |
@{ var name = ""; var submitted = false; if (IsPost) { name = Request["username"]; submitted = true; } } <!DOCTYPE html> <html> <body> @if (submitted) { <h2>Hello, @name!</h2> } else { <form method="post"> Your name: <input type="text" name="username" /> <input type="submit" value="Greet Me" /> </form> } </body> </html> |
VB version
|
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 |
@Code Dim name = "" Dim submitted = False If IsPost Then name = Request("username") submitted = True End If End Code <!DOCTYPE html> <html> <body> @If submitted Then @<h2>Hello, @name!</h2> Else @<form method="post"> Your name: <input type="text" name="username" /> <input type="submit" value="Greet Me" /> </form> End If </body> </html> |
Key differences:
- VB uses If … Then … End If (multi-line) or @If … Then @<tag> Else @<tag> End If
- No ; in VB
- String concatenation in VB often uses & (but here not needed)
3. Database + WebGrid Example (Popular One)
Goal: Show products from DB in sortable/paged grid.
C# version (from Databases + WebGrid lessons)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@{ var db = Database.Open("SmallBakery"); var data = db.Query("SELECT * FROM Product ORDER BY Name"); var grid = new WebGrid(data, rowsPerPage: 5, canPage: true, canSort: true); } <h1>Products</h1> @grid.GetHtml( columns: grid.Columns( grid.Column("Name"), grid.Column("Price", format: @<text>@item.Price.ToString("C")</text>) ) ) |
VB version — almost identical, but syntax adjusted:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@Code Dim db = Database.Open("SmallBakery") Dim data = db.Query("SELECT * FROM Product ORDER BY Name") Dim grid = New WebGrid(data, rowsPerPage:=5, canPage:=True, canSort:=True) End Code <h1>Products</h1> @grid.GetHtml( _ columns:=grid.Columns( _ grid.Column("Name"), _ grid.Column("Price", format:=Function(item) item.Price.ToString("C")) _ ) _ ) |
Differences:
- VB uses := for named parameters
- New WebGrid(…)
- Function(item) instead of @<text>…</text> for format (VB lambda)
4. Layout + PageData Sharing Example
_Layout.cshtml (shared)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- C# or VB same --> <!DOCTYPE html> <html> <head> <title>@Page.Title</title> </head> <body> <header>My Site</header> @RenderBody() <footer>© @DateTime.Now.Year</footer> </body> </html> |
Content page (C#)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
@{ Layout = "~/_Layout.cshtml"; Page.Title = "Home Page"; } <h1>Welcome!</h1> |
Content page (VB)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
@Code Layout = "~/_Layout.cshtml" Page.Title = "Home Page" End Code <h1>Welcome!</h1> |
→ Page.Title is dynamic property bag — same in both languages.
5. Teacher Summary & Advice (2026 Style)
- C# is dominant — 90%+ of examples/jobs/tutorials use C# (cleaner, more modern ecosystem)
- VB still works — great if you come from Classic ASP/VBA background, but learn C# for future
- W3Schools provides parallel examples so you can switch languages easily
- All Razor rules ( @, @{ }, IsPost, Request, Database.Open, WebGrid, etc.) are identical — only language syntax changes
The “Examples” page is your playground — click “Try it Yourself” on each one, switch between C#/VB tabs, edit and run instantly.
Which example do you want to dive deeper into next?
- A full login/register flow in both languages?
- Chart or WebMail with C# vs VB differences?
- Or ready to move to modern ASP.NET Core Razor Pages?
Your call, Webliance — you’re doing fantastic! 🚀🇮🇳 Happy coding! 😊
