The WebGrid in ASP.NET Web Pages (Razor) is a simple but powerful helper used to display tabular data with paging, sorting, and custom formatting. It’s especially useful for showing data from a database in a clean, interactive HTML table.

? WebPages WebGrid in ASP.NET (Razor)

? 1. Setup: Add WebGrid Helper

Make sure your page has access to the WebGrid helper.

@using System.Web.Helpers

?? 2. Example: Display Data from Database

@{    var db = Database.Open("YourDatabase");    var data = db.Query("SELECT * FROM Products");    var grid = new WebGrid(source: data, canPage: true, canSort: true);}@grid.GetHtml()

• canPage: Enables pagination.

• canSort: Enables column sorting.

? 3. Customize Grid Columns

@grid.GetHtml(    tableStyle: "table",    headerStyle: "header",    alternatingRowStyle: "alt",    columns: grid.Columns(        grid.Column("ProductID", "ID"),        grid.Column("ProductName", "Name"),        grid.Column("Price", "Price", format: @<text>$@item.Price</text>),        grid.Column("Actions", format: @<text>            <a href="edit.cshtml?id=@item.ProductID">Edit</a>        </text>)    ))

• grid.Column("FieldName", "HeaderText"): Defines a column.

• format:: Allows custom HTML or formatting.

?? 4. Style with CSS

<style>    .table { border-collapse: collapse; width: 100%; }    .header { background-color: #333; color: white; }    .alt { background-color: #f2f2f2; }    td, th { padding: 8px; border: 1px solid #ccc; }</style>

? 5. Sorting & Paging Example

You don’t need to code anything — it’s built in:

@grid.GetHtml(    columns: grid.Columns(        grid.Column("ProductID"),        grid.Column("ProductName")    ))

Clicking column headers automatically sorts. Paging shows below the table.

? 6. Data Source: SQL with Parameters

@{    var db = Database.Open("YourDB");    var category = Request["category"];    var data = db.Query("SELECT * FROM Products WHERE Category = @0", category);    var grid = new WebGrid(source: data);}@grid.GetHtml()

? 7. Security Note

• Always parameterize queries to prevent SQL injection.

• Avoid directly printing user input inside format: — always encode if necessary.

? Summary

Let me know if you want a full CRUD example with WebGrid and SQL database integration!