ASP.NET Web Pages - WebGrid 帮助器

WebGrid - 众多有用的 ASP.NET Web 帮助器之一。

自己编写 HTML

在前面的章节，我们通过使用 razor 代码来显示数据库中的数据，并且亲自编写所有 HTML 标记：

Database 实例

  1. @{
  2. var db = Database.Open("SmallBakery"); 
  3. var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
  4. }
  5. <html> 
  6. <body> 
  7. <h1>Small Bakery Products</h1> 
  8. <table> 
  9. <tr>
  10. <th>Id</th> 
  11. <th>Product</th> 
  12. <th>Description</th> 
  13. <th>Price</th> 
  14. </tr>
  15. @foreach(var row in db.Query(selectQueryString))
  16. {
  17. <tr> 
  18. <td>@row.Id</td> 
  19. <td>@row.Name</td> 
  20. <td>@row.Description</td> 
  21. <td align="right">@row.Price</td> 
  22. </tr> 
  23. }
  24. </table> 
  25. </body> 
  26. </html>

使用 WebGrid 帮助器

使用 WebGrid 帮助器来显示数据是更简单的方法。

WebGrid 帮助器：

  • 自动建立显示数据的 HTML 表格
  • 支持不同的格式化选项
  • 支持数据分页
  • 支持点击列标题进行排序

WebGrid 实例

  1. @{ 
  2. var db = Database.Open("SmallBakery") ; 
  3. var selectQueryString = "SELECT * FROM Product ORDER BY Id"; 
  4. var data = db.Query(selectQueryString); 
  5. var grid = new WebGrid(data); 
  6. }
  7. <html> 
  8. <head> 
  9. <title>Displaying Data Using the WebGrid Helper</title> 
  10. </head> 
  11. <body> 
  12. <h1>Small Bakery Products</h1> 
  13. <div id="grid"> 
  14. @grid.GetHtml()
  15. </div> 
  16. </body> 
  17. </html>