全屏

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>

运行结果

Small Bakery Products

IdProductDescriptionPrice
1BreadBaked fresh every day2.99
2Strawberry CakeMade with organic strawberries9.99
3Apple PieSecond only to your mom's pie12.99
4Pecan PieIf you like pecans, this is for you10.99
5Lemon PieMade with the best lemons in the world11.99
6CupcakesYour kids will love these9.99




使用 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>

运行结果

Small Bakery Products

IdNameDescriptionPrice
1BreadBaked fresh every day2,99
5CupcakesYour kids will love these7,99
4Lemon PieMade with the best lemons in the world11,99
3Pecan PieIf you like pecans, this is for you12,99
2Strawberry CakeMade from organic strawberries9,99


分类导航
点击按住视频可拖动

缩小

关闭

  • 正在学习
  • 北京总部地址:北京市海淀区西三旗街道建材城西路中腾建华商务大厦东侧二层尚学堂
  • 咨询电话:400-009-1906 010-56233821
  • Copyright 2007-2015 北京尚学堂科技有限公司
  • 京ICP备13018289号-1 京公网安备11010802015183