ASP.NET Web Pages WebGrid
May 12, 2021
ASP.NET
Table of contents
ASP.NET Web Pages
- WebGrid Helper
WebGrid - One of ASP.NET many useful web helpers.
This section gives you a detailed description of how to use the WebGrid Helper.
Write your own HTML
In the previous section, you used Razor code to display database data, and all HTML tags were handwritten:
The database instance
@{
var db = Database.Open("SmallBakery");
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<html>
<body>
<h1>Small Bakery Products</h1>
<table>
<tr>
<th>Id</th>
<th>Product</th>
<th>Description</th>
<th>Price</th>
</tr>
@foreach(var row in db.Query(selectQueryString))
{
<tr>
<td>
@row.Id
</td>
<td>
@row.Name
</td>
<td>
@row.Description
</td>
<td align="right">
@row.Price
</td>
</tr>
}
</table>
</body>
</html>
Run an instance . . .
Use the WebGrid helper
The WebGrid Helper provides an easier way to display data.
WebGrid Helper:
-
Automatically create an HTML table to display the data
-
Different formatting options are supported
-
Support for data pedding
-
Supports sorting by clicking on the list title
WebGrid instance
@{
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<html>
<head>
<title>Displaying Data Using the WebGrid Helper</title>
</head>
<body>
<h1>Small Bakery Products</h1>
<div id="grid">
@grid.GetHtml()
</div>
</body>
</html>
Run an instance . . .
In the next section, you'll see how the Chart helper is used.