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

转载于:https://www.cnblogs.com/tedzhao/archive/2010/12/07/Silverlight_DataGrid_Load-on-demand.html