ASP.NET Web Pages - WebGrid 帮助器


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


自己写的 HTML

在前面的章节中,您使用 Razor 代码显示数据库数据,所有的 HTML 标记都是手写的:

数据库实例
 
  @{ 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>
 


使用 WebGrid 帮助器

WebGrid 帮助器提供了一种更简单的显示数据的方法。

WebGrid 帮助器:

  • 自动创建一个 HTML 表格来显示数据
  • 支持不同的格式化选项
  • 支持数据分页显示
  • 支持通过点击列表标题进行排序
WebGrid 实例
 
  @{  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>