Chapter 11: WebPages The WebGrid
The WebGrid Helper! 🌟 (We’re following the W3Schools menu exactly: “WebPages WebGrid” at https://www.w3schools.com/asp/webpages_webgrid.asp).
This lesson comes right after Helpers and Databases, because WebGrid is the most popular built-in helper for showing database (or any list) data in a beautiful, interactive HTML table — without writing tons of <table>, <tr>, <td> code by hand.
Think of it as upgrading from “manual drawing” (like the loop we did in Databases lesson) to a smart, automatic table generator with built-in superpowers.
Why Use WebGrid? (Teacher Motivation Speech)
In the Databases lesson, we did this:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<table> <tr><th>Id</th><th>Name</th>...</tr> @foreach(var row in db.Query(...)) { <tr><td>@row.Id</td><td>@row.Name</td>...</tr> } </table> |
It works, but:
- Lots of repetitive HTML
- No sorting (click column to sort? No)
- No paging (10 rows per page? Manual work)
- No styling classes easy to apply
- No custom formatting (currency, links, images in cells)
WebGrid fixes all that with one object + one method call.
Key superpowers (straight from W3Schools):
- Automatically creates HTML <table>
- Supports sorting by clicking column headers
- Supports paging (First / Previous / Next / Last buttons)
- Easy styling (CSS classes for table, header, rows, alternating rows)
- Custom columns (change header text, format values, add links/images)
- AJAX support (optional — update grid without full page reload)
Perfect for product lists, user lists, reports, search results.
1. Basic WebGrid – Hello World Version
Assume we have the SmallBakery.sdf database from before, with Product table.
File: ProductsGrid.cshtml
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@{ Layout = "~/Shared/_Layout.cshtml"; // optional, but nice var db = Database.Open("SmallBakery"); var query = "SELECT * FROM Product ORDER BY Name"; // initial order var data = db.Query(query); // Create the grid object var grid = new WebGrid(data); } <h1>Our Bakery Products - Using WebGrid</h1> <div id="gridContainer"> @grid.GetHtml() </div> |
What happens?
- new WebGrid(data) → takes your query result (IEnumerable<dynamic>)
- @grid.GetHtml() → magic! Renders full <table> with:
- Column headers from property names (Id, Name, Description, Price)
- Clickable headers → sorts automatically (asc/desc toggle)
- All rows displayed
Browser shows a plain but functional table. Already better than manual loop!
2. Adding Paging, Styling, and Custom Columns (Real-World Power)
Now let’s make it beautiful and useful.
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
@{ var db = Database.Open("SmallBakery"); var data = db.Query("SELECT Id, Name, Description, Price FROM Product"); var grid = new WebGrid( source: data, rowsPerPage: 5, // show 5 rows per page defaultSort: "Name", // start sorted by Name canPage: true, // enable paging canSort: true // enable sorting ); } <h1>Bakery Products Grid</h1> @grid.GetHtml( tableStyle: "table table-bordered table-hover", // Bootstrap classes (if you have Bootstrap CSS) headerStyle: "bg-primary text-white", alternatingRowStyle: "table-light", rowStyle: "table-active", selectedRowStyle: "table-info", columns: grid.Columns( grid.Column("Id", header: "ID", canSort: false), // disable sort on ID grid.Column("Name", header: "Product Name"), grid.Column("Description", header: "Details"), grid.Column("Price", header: "Price (₹)", format: @<text>@item.Price.ToString("C")</text>) // currency format ) ) <!-- Pager (navigation) --> @grid.Pager( paginationStyle: "pagination justify-content-center", firstText: "« First", previousText: "‹ Prev", nextText: "Next ›", lastText: "Last »" ) |
Breakdown – important parts:
- Constructor params:
- rowsPerPage: 5 → paging every 5 items
- defaultSort: “Name” → initial sort column
- canPage, canSort → turn features on/off
- GetHtml(…) params (most powerful part):
- Style classes → apply CSS (e.g., Bootstrap for nice look)
- columns: grid.Columns(…) → custom columns array
- Column(“Name”, header: “Product Name”) → rename header
- format: @<text>…</text> → Razor block to format cell (currency, links, images, etc.)
- canSort: false → disable sorting on some columns
- @grid.Pager(…) → renders navigation bar (First/Prev/Next/Last)
3. Even More Advanced – Custom Cell Content
Want a “View Details” link or image in a column?
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
columns: grid.Columns( grid.Column("Name", header: "Product"), grid.Column("Price", format: @<text><strong>₹@item.Price.ToString("N2")</strong></text>), grid.Column(header: "Action", format: @<text> <a href="~/Product/Details/@item.Id" class="btn btn-sm btn-primary">View</a> </text>) ) |
→ Last column has clickable buttons/links — dynamic per row!
4. Quick Reference Table (Your Cheat Sheet)
| Feature/Param | Purpose | Example Value |
|---|---|---|
| new WebGrid(source) | Create grid from data | data from db.Query() |
| rowsPerPage | Items per page | 10 |
| defaultSort | Initial sort column | “Name” |
| GetHtml() | Render the table | — |
| columns | Custom column defs | grid.Columns(…) |
| format | Cell content template | @<text>@item.Price:C</text> |
| Pager() | Render paging controls | With custom text/icons |
| tableStyle etc. | CSS classes for look | “table table-striped” |
5. Teacher Tips & 2026 Notes
- WebGrid was amazing in 2010–2015 — automatic sorting/paging saved hours!
- In ASP.NET Core Razor Pages today → use <table> + JavaScript libraries (DataTables.net, ag-Grid) or Blazor components — no direct WebGrid equivalent, but concepts transfer.
- For AJAX paging/sorting → set ajaxUpdate: true and wrap in <div id=”grid”> (old WebMatrix had jQuery support).
- Always use parameters in SQL to avoid injection — WebGrid doesn’t change that rule.
Summary – Closing the Board
ASP.NET Web Pages – The WebGrid Helper = automatic, feature-rich HTML table from data:
- new WebGrid(data) → create
- GetHtml(…) → render with styles, paging, sorting, custom columns
- Saves you from manual <tr><td> hell
- Makes database results look professional fast
This is why people loved Web Pages for small-to-medium sites — quick grids without heavy frameworks.
Next class?
- Want a full example with search form + filtered WebGrid?
- How to make editable grid (inline edit)?
- Or move to WebPages Charts (graphs from data)?
Tell me — you’re mastering this tutorial series beautifully in Hyderabad! Keep going strong! 🚀🇮🇳
