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应用程序中。

-         定义数据对象

?
[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会随着加载数据的增多而变小,如果您有更好的方式我们可以继续探讨。 



本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/449304,如需转载请自行联系原作者

相关文章
|
Web App开发 JavaScript 前端开发

热门文章

最新文章