10.1 WebGrid 数据绑定
10.1.1 WebGrid 简介
在项目操作过程中，用表格来显示数据代码的复杂度相对较高。所以需要一种类似于服务器控件 GridView 可以进行绑定的控件
WebGrid帮助器就提供了一种简单的数据显示方式，其支持如下功能
- 自动建立显示数据的 HTML 表格
- 支持不同的格式化选项
- 支持数据分页
- 支持点击列标题进行排序
10.1.2 WebGrid 常用属性
WebGrid 以表格的形式显示数据，列表示一个字段，每行表示一条记录
可以在不编写代码的情况下实现分页和排序等功能
属性 ： 类型 ： 描述
- source ：IEnumerable<dynamic> ：要呈现的数据
- columnNames ：IEnumerable<string>：筛选呈现的列
- rowsPerPage ：int ：控制每页显示的行数（默认为 10）
- selectionFieldName ： string ：所选行号的查询字符串字段名称
- sortFieldName ：string ：排序列的查询字符串字段名称
- pageFieldName ：string ：页码的查询字符串字段名称
- defaultSort ：string ：页码的查询字符串字段名称
- canPage ：bool ：启用或禁用数据分页
- canSort：bool ：启用或禁用数据排序
- sortDirectionFieldName ： string ：排序方向的查询字符串字段名称
10.1.2 用法
创建 WebGrid 对象并赋值数据源
语法：
var webgrid = new WebGrid( 传递数据源 );
把数据源以表格形式输出
语法：
webgrid.GetHtml();
注意：数据源的赋值可以直接把集合传递进去，也可以使用属性的方式进行赋值 var webgrid = new WebGrid(source：数据源 );
示例：在页面中定义一个集合，使用 WebGrid 来显示集合中的数据
// 创建 webgrid 对象
var webgrid = new WebGrid(list);
// 输出表格显示数据
@webgrid.GetHtml()
@{
List<ProductModel> list = new List<ProductModel>() {
new ProductModel(){ ProductID="001", ProductName="C# 书籍 ", ProductPrice=100},
new ProductModel(){ ProductID="002", ProductName="Java 书籍 ", ProductPrice=100},
new ProductModel(){ProductID="003", ProductName="jQuery 书籍 ", ProductPrice=150},
new ProductModel(){ProductID="004", ProductName="HTML5 书籍 ", ProductPrice=180;
}
10.2 WebGrid分页操作
10.2.1 WebGrid 的分页排序属性
属性 ： 类型 ： 描述
- rowsPerPage：int ：控制每页显示的行数（默认值为 10）
- canPage ：bool ：启用或禁用数据分页
- pageFieldName ：string ：页码的查询字符串的字段名称
实现对数据的分页操作
- 找到 WebGrid 对象，设置开启分页canPage，并且设置每页的显示数(rowsPerPage)
- 找到页面中 WebGrid 的输出代码 GetHtml()，设置每列显示中文标头
示例：
@webgrid.GetHtml(
columns:
webgrid.Columns(
webgrid.Column("ProductID", " 商品编号 "),
webgrid.Column("ProductName", " 商品名称 "),
webgrid.Column("ProductPrice", " 商品价格 ")))
打开浏览器运行页面，效果如图
注意：WebGrid在默认情况下是开启分页的，我们可以不用设置 canPage，默认每页显示数为一页显示 10条记录，如果少于 10条，则不显示分页；如果大于 10 条，则开启分页显示
10.3 Chart 数据绑定
10.3.1 Chart简介
表格可以按照文字的方式显示数据列表，但在浏览时直观性不是太强
在 WebPages 中提供了 Chart 图形报表完成图表操作
Chart 帮助器可以创建不同类型的多种格式的图表图像。有面积图、条形图、柱形图、折线图和饼图等标准图表,也可以创建像股票图表这样专业的图表
10.3.2 创建Chart对象
创建 Chart 对象并设置宽度和高度
语法：
var myChart = new Chart(width: 600, height: 400)
10.3.2 Chart 的常用属性和方法
Chart 显示的数据可以是来自一个数组、一个数据库或者一个文件的数据
Chart 的常见属性
属性 ： 类型 ： 描述
- FileName ：String ：获取或设置图表名称
- Height ：Int ：获取或设置图表高度
- Width ：Int ：获取或设置图表宽度
Chart 的常见方法实现设置标题、图标和输出图片格式功能，代码如下
var myChart = new Chart(width: 600, height: 400)
.AddTitle(" 月销售额 ")
.AddSeries(chartType: "column",
xValue: new[] { "1 月 ", "2 月 ", "3 月 ", "4 月 ", "5 月 " },
yValues: new[] { "200", "600", "400", "500", "300" })
.Write(format:"jpeg");
注意： Write() 方法会直接输出一张图片显示在页面中，如果要在 <img> 标签中显示图片，则需要先使用 Save() 方法保存后再 使用 <img> 标签加载图片。
10.4 Chart 数据库绑定
10.4.1 Chart 数据库绑定的使用
前面使用静态数据进行添加操作，实际开发过程中我们常需要从数据库中获取数据，则需要使用 DataBindTable 方法进行绑定
语法：
@{
var db = Database.Open("sqlcon"); // 打开数据库
var dbdata = db.Query("select name, price from product"); // 查询数据得到结果集
var mychart = new Chart(width: 600, height: 400) // 新建图表对象
.AddTitle(" 价格表 ") // 添加标题
.DataBindTable(dataSource: dbdata, xField: "name") // 绑定数据
.Write(); // 输出结果}
注意：
- DataBindTable 方法中，xField 设置 X 轴显示数据，Y 轴数据系统会自动绑定
- 如果查询结果有多列，数据系统会自动绑定所有数据
- 所以一般查询两列数据绑定，即 X 轴和 Y 轴数据
总结
1、WebGrid 以表格的形式显示数据源的数据，每列表示一个字段，而每行表示一条记录。自动化程度高，可以在不编写代码的情况下实现分页和排序等功能
2、WebGrid 的分页排序属性如下 ：
- rowsPerPage：控制每页显示的行数（默认值为 10）
- canPage：启用或禁用数据分页
- pageFieldName：页码的查询字符串的字段名称
3、Write 方法会直接输出一张图片显示在页面中，如果要在 Img 标签中显示图片，则需要先使用 Save 方法保存后，再使用 img 标签加载图片
