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

在Windows或者ASP.NET Web应用程序中，我们经常可以看到在Grid控件上通过Load-on-demand的方式来提高系统性能，提升用户体验。

所谓Load-on-demand就是在最初表格数据加载时只加载当前表格中用户可以看到的行数，当用户向下滚动或拖拽纵向滚动条时，再将需要显示的数据通过某种方式动态加载进来。

 

那么对于Silverlight，我们可以使用DataGrid通过WCF Service来实现这个功能。

 

1.      WCF 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
   
   <
   
   Employee
   
   >
   
    GetEmployeeData(
   
   int
   
    startRow, 
   
   int
   
    endRow)
{
            List
   
   <
   
   Employee
   
   >
   
    employees 
   
   =
   
    
   
   new
   
    List
   
   <
   
   Employee
   
   >
   
   ();
            
   
   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的配置信息：

  
  

   
   <
   
   system.serviceModel
   
   >
   
   
      
   
   <
   
   behaviors
   
   >
   
   
           
   
    <
   
   serviceBehaviors
   
   >
   
   
                
   
   <
   
   behavior 
   
   name
   
   ="Silverlight.Web.EmployeeServiceBehavior"
   
   >
   
   
                      
   
   <
   
   serviceMetadata 
   
   httpGetEnabled
   
   ="true"
   
   />
   
   
                      
   
   <
   
   serviceDebug 
   
   includeExceptionDetailInFaults
   
   ="false"
   
   />
   
   
                 
   
   </
   
   behavior
   
   >
   
   
            
   
   </
   
   serviceBehaviors
   
   >
   
   
      
   
   </
   
   behaviors
   
   >
   
   
    
      
   
   <
   
   serviceHostingEnvironment 
   
   aspNetCompatibilityEnabled
   
   ="true"
   
   />
   
       
      
   
   <
   
   services
   
   >
   
   
            
   
   <
   
   service 
   
   behaviorConfiguration
   
   ="Silverlight.Web.EmployeeServiceBehavior"
   
    name
   
   ="Silverlight.Web.EmployeeService"
   
   >
   
   
                  
   
   <
   
   endpoint 
   
   address
   
   =""
   
    binding
   
   ="basicHttpBinding"
   
    contract
   
   ="Silverlight.Web.EmployeeService"
   
    
   
   />
   
   
                  
   
   <
   
   endpoint 
   
   address
   
   ="mex"
   
    binding
   
   ="mexHttpBinding"
   
    contract
   
   ="IMetadataExchange"
   
    
   
   />
   
   
            
   
   </
   
   service
   
   >
   
   
      
   
   </
   
   services
   
   >
   
   

   
   </
   
   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数据：

  
  

   
   public
   
    
   
   partial
   
    
   
   class
   
    Page : UserControl 
{
      
   
   private
   
    ObservableCollection
   
   <
   
   Employee
   
   >
   
    _employees;

      
   
   private
   
    
   
   void
   
    GetData(
   
   int
   
    startRow, 
   
   int
   
    endRow) 
      {
            EmployeeServiceClient proxy 
   
   =
   
    
   
   new
   
    EmployeeServiceClient();
            proxy.GetEmployeeDataCompleted 
   
   +=
   
    
   
   new
   
    EventHandler
   
   <
   
   GetEmployeeDataCompletedEventArgs
   
   >
   
   (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
   
   <
   
   Employee
   
   >
   
   ();
            
   
   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会随着加载数据的增多而变小，如果您有更好的方式我们可以继续探讨。