Silverlight DataGrid使用WCF RIA Service实现Load-on-demand的数据加载

在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应用程序中。
-         定义数据对象

1. [DataContract]
   
2. public class Employee
   
3. {
   
4.         [DataMember]
   
5.         public int ID { get; set; }
   
6. 
   
7.         [DataMember]
   
8.         public string Name { get; set; }
   
9. 
   
10.         [DataMember]
    
11.         public string Department { get; set; }
    
12. 
    
13.         [DataMember]
    
14.         public double Salary { get; set; }   
    
15. }
    
16. 
    

复制代码

使用DataContract和DataMember来标识数据对象以及对象属性，这样就可以通过WCF Service来传递这个数据结构了，注意需要添加System.Runtime.Serialization.dll。  
-         添加Silverlight enabled WCF Service在WebApplciation工程中添加一个新的Item，选取”Silverlight enabled WCF Service”，命名为”EmployeeService.svn”.
在PepoleService.svn.cs中添加如下代码：

1. [OperationContract]
   
2. public List<Employee> GetEmployeeData(int startRow, int endRow)
   
3. {
   
4.             List<Employee> employees = new List<Employee>();
   
5.             for (int i = startRow; i < endRow; i++)
   
6.             {
   
7.                 employees.Add(new Employee()
   
8.                 {
   
9.                     ID = i,
   
10.                     Name = string.Format("Name {0}", i),
    
11.                     Department = string.Format("Department {0}", i),
    
12.                     Salary = i * 100.0
    
13.                 });
    
14.             }
    
15. 
    
16.             return employees;
    
17. }

复制代码

注意在上面一步添加完WCF Service后，会在Web.config文件中添加关于Service的配置信息：

1. <system.serviceModel>
   
2.       <behaviors>
   
3.             <serviceBehaviors>
   
4.                 <behavior name="Silverlight.Web.EmployeeServiceBehavior">
   
5.                       <serviceMetadata httpGetEnabled="true"/>
   
6.                       <serviceDebug includeExceptionDetailInFaults="false"/>
   
7.                  </behavior>
   
8.             </serviceBehaviors>
   
9.       </behaviors>
   
10.    
    
11.       <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>   
    
12.       <services>
    
13.             <service behaviorConfiguration="Silverlight.Web.EmployeeServiceBehavior" name="Silverlight.Web.EmployeeService">
    
14.                   <endpoint address="" binding="basicHttpBinding" contract="Silverlight.Web.EmployeeService" />
    
15.                   <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
    
16.             </service>
    
17.       </services>
    
18. </system.serviceModel>

复制代码

关于如何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数据：

1. public partial class Page : UserControl
   
2. {
   
3.       private ObservableCollection<Employee> _employees;
   
4. 
   
5.       private void GetData(int startRow, int endRow)
   
6.       {
   
7.             EmployeeServiceClient proxy = new EmployeeServiceClient();
   
8.             proxy.GetEmployeeDataCompleted += new EventHandler<GetEmployeeDataCompletedEventArgs>(proxy_GetDataCompleted);
   
9. 
   
10.             proxy.GetEmployeeDataAsync(startRow, endRow);
    
11.        }
    
12. 
    
13.       private void proxy_GetDataCompleted(object sender, GetEmployeeDataCompletedEventArgs e)
    
14.       {
    
15.             foreach (Employee employee in e.Result)
    
16.             {
    
17.                 this._employees.Add(employee);
    
18.             }
    
19.       }
    
20. }

复制代码

-         在DataGrid上实现数据的Load-on-demandSilverlight DataGrid提供了一个事件：LoadingRow，该事件会在某一个Row第一次被显示的时候被触发。通过这个事件我们就可以实现数据的按需加载，在这个事件中我们可以拿到该Row的RowIndex，如果发现当前将要显示的Row已经接近末尾（当前定义为距离末尾小于5），那么就需要向服务器端请求数据。

  

示例代码：

1. private void Page_Loaded(object sender, RoutedEventArgs e)
   
2. {
   
3.             this._startRowIndex = 0;
   
4.             this._employees = new ObservableCollection<Employee>();
   
5.             this.peopleDataGrid.ItemsSource = _employees;
   
6. 
   
7.             GetData(this._startRowIndex, this._pageSize);
   
8. }
   
9. 
   
10. private void peopleDataGrid_LoadingRow(object sender, DataGridRowEventArgs e)
    
11. {
    
12.             if (this._isLoading || this._employees.Count < _pageSize)
    
13.             {
    
14.                 return;
    
15.             }
    
16. 
    
17.             if (this._employees.Count - 5 < e.Row.GetIndex())
    
18.             {
    
19.                 this.GetData(this._startRowIndex, this._startRowIndex + this._pageSize);
    
20.             }
    
21. }

复制代码

运行程序，拖动ScrollBar到底部，你会发现DataGrid会自动加载数据。您可以通过这里下载全部示例代码。该程序中不满意的地方就是ScrollBar的Thumb button会随着加载数据的增多而变小，如果您有更好的方式我们可以继续探讨。