WebGrid - One of many useful ASP.NET web helpers.
This section introduces you to the use of WebGrid helper in detail.
In the previous chapters, you used Razor code to display database data. All HTML markup was handwritten:
@{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>The WebGrid helper provides an easier way to display data.
WebGrid helper:
Automatically create an HTML table to display data
Supports different formatting options
Support data paging display
Supports sorting by clicking on the list title
@{ 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>In the next section, you will learn about the use of Chart helper.