第10章 Web Pages 进阶

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();							 // 输出结果}

注意:

  1. DataBindTable 方法中,xField 设置 X 轴显示数据,Y 轴数据系统会自动绑定 
  2. 如果查询结果有多列,数据系统会自动绑定所有数据 
  3. 所以一般查询两列数据绑定,即 X 轴和 Y 轴数据 

总结 

1、WebGrid 以表格的形式显示数据源的数据,每列表示一个字段,而每行表示一条记录。自动化程度高,可以在不编写代码的情况下实现分页和排序等功能 

2、WebGrid 的分页排序属性如下 :

  • rowsPerPage:控制每页显示的行数(默认值为 10)
  • canPage:启用或禁用数据分页
  • pageFieldName:页码的查询字符串的字段名称 

3、Write 方法会直接输出一张图片显示在页面中,如果要在 Img 标签中显示图片,则需要先使用 Save 方法保存后,再使用 img 标签加载图片 

给TA打赏
共{{data.count}}人
人已打赏
.NET

第9章 初识 Web Pages

2022-8-23 16:28:37

.NET

在.NET 应用中使用文件系统

2022-8-24 10:55:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索