Silverlight DataGrid使用WCF RIA Service实现Load-on-demand的数据加载
2010-12-09 11:09
621 查看
在Windows或者ASP.NET Web应用程序中,我们经常可以看到在Grid控件上通过Load-on-demand的方式来提高系统性能,提升用户体验。
所谓Load-on-demand就是在最初表格数据加载时只加载当前表格中用户可以看到的行数,当用户向下滚动或拖拽纵向滚动条时,再将需要显示的数据通过某种方式动态加载进来。
那么对于Silverlight,我们可以使用DataGrid通过WCF RIA Service来实现这个功能。
1. WCF RIA Service
我们将会使用WCF Service来提供数据,并且将这个WCF Service host到ASP.Net应用程序中。
- 定义数据对象
使用DataContract和DataMember来标识数据对象以及对象属性,这样就可以通过WCF Service来传递这个数据结构了,注意需要添加System.Runtime.Serialization.dll。
- 添加Silverlight enabled WCF Service
在WebApplciation工程中添加一个新的Item,选取”Silverlight enabled WCF Service”,命名为”EmployeeService.svn”.
在PepoleService.svn.cs中添加如下代码:
注意在上面一步添加完WCF Service后,会在Web.config文件中添加关于Service的配置信息:
关于如何Host WCF Service到IIS,可以参考MSDN文章:Hosting and Consuming WCF Services。
2. Load-on-demand数据加载
- 在Silverlight工程中添加Service引用
如下图通过给Silverlight工程添加Service reference来操作WCF Service:
- 从WCFService中获取数据
将WCF Service引入后,IDE会自动生成EmployeeServiceClient类,通过这个代理我们就可以使用Service上的方法了。
通过如下代码可以从WCF Service获得Employee数据:
- 在DataGrid上实现数据的Load-on-demand
Silverlight DataGrid提供了一个事件:LoadingRow,该事件会在某一个Row第一次被显示的时候被触发。通过这个事件我们就可以实现数据的按需加载,在这个事件中我们可以拿到该Row的RowIndex,如果发现当前将要显示的Row已经接近末尾(当前定义为距离末尾小于5),那么就需要向服务器端请求数据。
示例代码:
运行程序,拖动ScrollBar到底部,你会发现DataGrid会自动加载数据。
您可以通过这里下载全部示例代码。
该程序中不满意的地方就是ScrollBar的Thumb button会随着加载数据的增多而变小,如果您有更好的方式我们可以继续探讨。
所谓Load-on-demand就是在最初表格数据加载时只加载当前表格中用户可以看到的行数,当用户向下滚动或拖拽纵向滚动条时,再将需要显示的数据通过某种方式动态加载进来。
那么对于Silverlight,我们可以使用DataGrid通过WCF RIA Service来实现这个功能。
1. WCF RIA Service
我们将会使用WCF Service来提供数据,并且将这个WCF Service host到ASP.Net应用程序中。
- 定义数据对象
[DataContract] public class Employee { [DataMember] public int ID { get; set; } [DataMember] public string Name { get; set; } [DataMember] public string Department { get; set; } [DataMember] public double Salary { get; set; } }
使用DataContract和DataMember来标识数据对象以及对象属性,这样就可以通过WCF Service来传递这个数据结构了,注意需要添加System.Runtime.Serialization.dll。
- 添加Silverlight enabled WCF Service
在WebApplciation工程中添加一个新的Item,选取”Silverlight enabled WCF Service”,命名为”EmployeeService.svn”.
在PepoleService.svn.cs中添加如下代码:
[OperationContract] public List GetEmployeeData(int startRow, int endRow) { List employees = new List(); for (int i = startRow; i < endRow; i++) { employees.Add(new Employee() { ID = i, Name = string.Format("Name {0}", i), Department = string.Format("Department {0}", i), Salary = i * 100.0 }); } return employees; }
注意在上面一步添加完WCF Service后,会在Web.config文件中添加关于Service的配置信息:
关于如何Host WCF Service到IIS,可以参考MSDN文章:Hosting and Consuming WCF Services。
2. Load-on-demand数据加载
- 在Silverlight工程中添加Service引用
如下图通过给Silverlight工程添加Service reference来操作WCF Service:
- 从WCFService中获取数据
将WCF Service引入后,IDE会自动生成EmployeeServiceClient类,通过这个代理我们就可以使用Service上的方法了。
通过如下代码可以从WCF Service获得Employee数据:
public partial class Page : UserControl { private ObservableCollection _employees; private void GetData(int startRow, int endRow) { EmployeeServiceClient proxy = new EmployeeServiceClient(); proxy.GetEmployeeDataCompleted += new EventHandler(proxy_GetDataCompleted); proxy.GetEmployeeDataAsync(startRow, endRow); } private void proxy_GetDataCompleted(object sender, GetEmployeeDataCompletedEventArgs e) { foreach (Employee employee in e.Result) { this._employees.Add(employee); } } }
- 在DataGrid上实现数据的Load-on-demand
Silverlight DataGrid提供了一个事件:LoadingRow,该事件会在某一个Row第一次被显示的时候被触发。通过这个事件我们就可以实现数据的按需加载,在这个事件中我们可以拿到该Row的RowIndex,如果发现当前将要显示的Row已经接近末尾(当前定义为距离末尾小于5),那么就需要向服务器端请求数据。
示例代码:
private void Page_Loaded(object sender, RoutedEventArgs e) { this._startRowIndex = 0; this._employees = new ObservableCollection(); this.peopleDataGrid.ItemsSource = _employees; GetData(this._startRowIndex, this._pageSize); } private void peopleDataGrid_LoadingRow(object sender, DataGridRowEventArgs e) { if (this._isLoading || this._employees.Count < _pageSize) { return; } if (this._employees.Count - 5 < e.Row.GetIndex()) { this.GetData(this._startRowIndex, this._startRowIndex + this._pageSize); } }
运行程序,拖动ScrollBar到底部,你会发现DataGrid会自动加载数据。
您可以通过这里下载全部示例代码。
该程序中不满意的地方就是ScrollBar的Thumb button会随着加载数据的增多而变小,如果您有更好的方式我们可以继续探讨。
相关文章推荐
- Silverlight DataGrid使用WCF RIA Service实现Load-on-demand的数据加载
- Silverlight DataGrid使用WCF RIA Service实现Load-on-demand的数据加载
- Silverlight DataGrid使用WCF Service实现Load-on-demand的数据加载
- Silverlight DataGrid使用WCF Service实现Load-on-demand的数据加载
- [Silverlight入门系列]Prism中TreeView真正实现MVVM模式和Expanded发生时异步动态加载子节点(WCFRiaService)
- SilverLight使用WCF RIA SERVICE实现对数据库的操作 (添加,删除,更新)
- 笔记-SILVERLIGHT使用WCF RIA SERVICE查询数据
- 笔记-Silverlight使用WCF RIA SERVICE实现CUD
- Silverlight中,使用ADO.NET Entity,WCF RIA,动态加载指定数据库的实现。
- 稳扎稳打Silverlight(57) - 4.0通信之WCF RIA Services: 概述, 通过 DomainDataSource 实现数据的添加、查询、更新和删除操作
- 稳扎稳打Silverlight(57) - 4.0通信之WCF RIA Services: 概述, 通过 DomainDataSource 实现数据的添加、查询、更新和删除操作
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 使用Fiddler解析WCF RIA Service传输的数据
- 稳扎稳打Silverlight(57) - 4.0通信之WCF RIA Services: 概述, 通过 DomainDataSource 实现数据的添加、查询、更新和删除操作
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 稳扎稳打Silverlight(57) - 4.0通信之WCF RIA Services: 概述, 通过 DomainDataSource 实现数据的添加、查询、更新和删除操作
- 发布Silverlight项目自动生成模板,自动生成Silverlight调用RIA Service实现数据增删查改
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 在IIS部署Silverlight应用和WCF RIA Services,出现异常:未能加载文件或程序集“System.ServiceModel.DomainServices.Hosting, Ver