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

时间: 2024-09-27 14:12:02

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

silverlight 和wcf ria service 常见错误解决方法

1.向数据库教程添加数据时页面提示缺少对象,调试状态提示出错,无法更新entityset"*****",因为它有一个definingquery,而<modificationfunctionmapping>元素中没有支持当前操作的<insertfunction>元素" 解决办法:因为所操作的表没有添加主键,添加主键后刷新edm就可以了. 2.页面提示"iis已经设置了访问权限...",页面提示"note fond"

使用Fiddler解析WCF RIA Service传输的数据

原文 http://www.cnblogs.com/wintersun/archive/2011/01/05/1926386.html     使用Fiddler 2 解析WCF RIA Service传输的数据,您需要安装一个PlugIn.下载解压后,放在Inspectors文件中.重新启动Fiddler,你就会看到WCF Binary的选项.       下面的场景是,点一个Button根据ID查询数据,UI如下图:            Server端Code,ItemContext是Do

easyui datagrid 大数据加载效率慢,优化解决方法(推荐)_jquery

在使用easyui datagrid途中发现加载数据的效率真的不是一般的差.经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受. 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句代码 $(_1e0).html(_1e4.join("")); 改为: $(_1e0)[0].

更强悍的Silverlight: WCF RIA Services

如果你安装了 VS 2010 的 Silverlight 4 开发工具,会发现一项重量级的安装项目,WCF RIA Services,用于Silverlight数据访问服务,比WCF和ADO.NET Data Service和Web服务都要简单. 在一个三层架构的应用程序中,中间层介于表示层和数据层之间,你所写的业务逻辑和数据验证都将在中间层出现.创建拥有良好用户体验的RIA应用,你需要客户端和服务端有着相同的业务规则,因此在客户端和服务端保证同步的中间层变得至关重要.WCF RIA Servi

Consuming Hidden WCF RIA Services

 原文 http://codeseekah.com/2013/07/05/consuming-hidden-wcf-ria-services/ A Silverlight application made it to my desk yesterday, an application that consumed a remote WCF RIA service running on a Microsoft IIS. The service did not provide a public API

Datagrid加载和提交时候自动出现BusyIndicator并绑定

BusyIndicator和DataGrid搭配使用的效果就是当Datagrid加载数据或者提交的时候自动灰掉并出现"Please wait..."进度条,这是一个非常普通的需求,因为从服务器端加载和提交数据谁也不知道需要耗时多久,很多其他的框架比如ExtJS都有很好的支持.在Silverlight中也是很方面的,就是将需要等待载入的控件(这里是DataGrid),作为BusyIndicator 的子控件即可.需要注意的是BusyIndicator自动绑定ViewModel的IsBus

easyui-easyUI先提交form表单做条件查询返回的结果加载到datagrid中,应该怎么做?

问题描述 easyUI先提交form表单做条件查询返回的结果加载到datagrid中,应该怎么做? 我是这么写的,但是这样form表单提交不到后台去,不知道怎么做 $('#tt').datagrid({ pageNumber : curr url : $('#bas').val() + '/showUser.action' onLoadSuccess : function() { } onLoadError : function() { $('#tt').datagrid('appendRow'

服务器端动态加载DataGrid控件并设置其属性

datagrid|datagrid控件|动态|服务器|加载|datagrid|datagrid控件|服务器|加载 DataGrid在Asp.net编程中占有非常重要的地位,对于浏览器中大批量数据的呈现,DataGrid几乎不可缺少.常用的设置DataGrid属性的方法都是在前台由Asp语句实现,这样显然不适合DataGrid的动态加载,通过后台C#代码实现前台的功能显得非常重要,下面就通过一个实例来说明其设置方法.同其它动态加载服务器控件的方法一样,要在客户端浏览器上呈现DataGrid,必须要

解决用jquery load加载页面到div时,不执行页面js的问题

 这篇文章主要介绍了解决用jquery load加载页面到div时,不执行页面js的问题.需要的朋友可以过来参考下,希望对大家有所帮助 jquery代码:    代码如下: $(function(){ $("#test").load("${contextPath}/notepad/toCreate.do"); }    加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不