ASP.NET4.0 Ajax 实例--DataView模板编程1
ASP.NET4.0中从本质上来讲变化最大的就要算是ASP.NET Ajax技术,这两年来MS一直在不断提高和完善ASP.NET Ajax的功能,变化最大的就是从UpdatePanel模式演化到客户端JS编码模式。在ASP.NET4.0中集成的Ajax框架,基本上可以让程序脱离第三方的Ajax组件,来实现较为完美的RIA应用程序。
在ASP.NET4.0中集成的Ajax功能大体上包括以下几点:
- 集成JQUERY
- 客户端数据库操作
- 客户端模板(客户端的网格)
- 更为丰富的Ajax控件
客户端的数据读写,基本上就是利用WCF实现,开发人员可以直接从JS中调用WCF再利用C#来实现,或者利用JS调用ADO.NET Data Service直接操作数据库。这些功能已经在前面的Blog中进行了说明,感兴趣的读者可以参考:
- http://www.cnblogs.com/warensoft/archive/2010/03/07/1680305.html(ASP.NET Ajax实例—Javascript直接调用服务器C#代码)
- http://www.cnblogs.com/warensoft/archive/2010/03/16/1686774.html(ASP.NET Ajax4.0+ADO.NET DataService 实现JS对数据操作)
本文重点为大家说明如何使用Template技术实现客户端DataView。
使用过ASP.NET的程序员一定对GridView十分有感觉,这个控件可以很快的实现在其他网页技术中较为麻烦的网格操作,再加上UpdatePanel,简直就是无敌了。但是这种DataView+UpdatePanel的MS Ajax模式也存在不少缺点:
- 布局模式比较死板
- 虽然页面不刷新,但是每一次更新的时候,即使改变一个字母,仍然要将整个GridView的Table从服务器上返回到Client的浏览器中,这是一点很显然违背了Ajax的基本思想---哪儿变了,就更新哪儿.
在ASP.NET4.0中我们可以使用客户端的DataView来代替GridView,利用JS和HTML来精确控制数据的更新,以此来提高系统运行速度和用户体验。模板编程的主要功能包括:
- 用户客户端代码代替GridView
- 利用客户端代码实现主-从模式功能
- 数据的双向绑定
下面,我们对这三点进行说明:
系统要求:
- VS2010
- ASP.NET Ajax Client Library,可以去CodePlex上下载最新版本,网址:http://ajax.codeplex.com/releases/view/35895,也可以通过CDN方式进行远程引用,本文能过CDN方式引用。
利用客户端代码代替GridView
我们来实现一个用户数据查找的功能
1.1 在网站中添加一个Ajax Enabled WCF Service:
1.2 修改WCF的代码MyService.cs,代码如下所示:
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data.SqlClient;
using System.Data;
[DataContract]
public class CustomerInfo
{
[DataMember]
public string CustomerID
{
get ;
set ;
}
[DataMember]
public string CompanyName
{
get ;
set ;
}
[DataMember]
public string ContactName
{
get ;
set ;
}
}
[ServiceContract(Namespace = "" )]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService
{
[OperationContract]
public List < CustomerInfo > GetUsers( string CustomerIDPattern)
{
List < CustomerInfo > result = new List < CustomerInfo > ();
using (SqlConnection con = new SqlConnection ( " server=.;database=northwind;uid=sa;pwd=sa " ))
{
con.Open();
var cmd = con.CreateCommand();
if (CustomerIDPattern != "" )
{
cmd.CommandText = " select CustomerID,CompanyName,ContactName from Customers where "
+ " CustomerID like '%'+@CustomerIDPattern+'%' " ;
cmd.Parameters.Add( " @CustomerIDPattern " , SqlDbType.NChar, 5 ).Value = CustomerIDPattern;
}
else
{
cmd.CommandText = " select CustomerID,CompanyName,ContactName from Customers where "
+ " CustomerID like '%' " ;
}
var reader = cmd.ExecuteReader();
while (reader .Read ())
{
result.Add( new CustomerInfo()
{
CustomerID = reader [ " CustomerID " ].ToString (),
CompanyName = reader[ " CompanyName " ].ToString (),
ContactName = reader [ " ContactName " ].ToString ()
});
}
reader.Close();
}
return result;
}
}
注意这里的返回值是一个List< CustomerInfo >的表,其中CustomerInfo是数据协议,是用来封装每一个Customer信息的数据结构。另外,规定,当传入的参数为空串时,返回所有的数据。
1.3 修改Default.ASPX,首先添加一个ScriptManager,并添加WCF服务的引用,代码如下:
< Services >
< asp:ServiceReference Path ="~/MyService.svc" />
</ Services >
</ asp:ScriptManager >
添加WCF引用的目的是在运行的时候可以生成JS代理类。
1.4 添加几个必要的CSS样式,代码如下所示:
.sys-template
{
display : none ;
}
.column
{
float : left ;
padding-top : 2px ;
width : 188px ;
height : 20px ;
color : Red ;
border-width : 1px ;
border-color : black ;
border-style : solid ;
overflow-y : hidden ;
}
</style>
1.5 添加DataView以及用于输入用户名的文本框,HTML代码如下所示:
< form id ="form1" runat ="server" >
< div >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
< Services >
< asp:ServiceReference Path ="~/MyService.svc" />
</ Services >
</ asp:ScriptManager >
用户名: < input id ="Text1" type ="text" />< input id ="Button1" type ="button" value ="查询" />
< div id ="dvUsers" class ="sys-template" style ="width: 575px;" >
< div class ="column" id ="colCustomerID" >
{binding CustomerID}
</ div >
< div class ="column" id ="colCompanyName" >
{binding CompanyName}
</ div >
< div class ="column" id ="colContactName" >
{binding ContactName}
</ div >
</ div >
</ form >
</ body >
上面代码中,名为“dvUsers”的DIV就是我们要的DataView,实际上客户端的DataView并没有什么固定的标签,使用任何的HTML标签都可以,并且我们要做的是利用HTML编写好网格中的一行(一个模板),在运行的时候Ajax框会自动利用服务器取回来的内容将这个DataView填充,并且自动重复。
另外ID为colCustomerID的DIV绑定到了CustomerID字段上,{binding CustomerID}就是用来绑定的,当然这里使用的是双向绑定。在后面的Blog中会对绑定方式作进一步说明。
1.6 修改ScriptManager,添加最新版本Ajax Client Library的CDN引用。代码如下:
< Services >
< asp:ServiceReference Path ="~/MyService.svc" />
</ Services >
< Scripts >
< asp:ScriptReference Path = " http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjax.js "
Name = " MicrosoftAjax.js " / >
< asp:ScriptReference Path = " http://ajax.microsoft.com/ajax/beta/0911/start.debug.js " / >
</ Scripts >
</ asp:ScriptManager >
这里请注意所引用的MicrosoftAjax.js,在其后面一定要标记Name属性值为MicrosoftAjax.js,目的是使用新版本的JS文件覆盖原有集成的文件。
1.7 添加加载时的是JS代码,如下所示:
window.onload = function () {
Sys.require(Sys.components.dataView, function (result) {
view = Sys.create.dataView($get( " dvUsers " ));
MyService.GetUsers( "" , GetUserCallback);
});
}
function GetUserCallback(result) {
dataview.set_data(result);
}
代码说明:
- 上面代码中的view是我们需要的DataView对象。
- window.onload说明这些操作一定要在页面加载完毕之后才可以执行,如果这些代码在window.onload之前执行,会因为ScriptManager还未来得急加载相关的JS文件而报错。
- Sys.require方法是利用上面所引用的start.debug.js来获取使用DataView时所需要的JS文件,当然你也可以通过直接引用MicrosoftAjaxTemplates.js来获取DataView,但是MS推荐使用Sys.require来获取。该函数第一个参数是一个数组变量,用来表示你所需要的组件,本例中只是获取了一个对象,如果想要获取多个对象,可以使用以下形式:Sys.require([Sys.components.dataView,Sys.components.adoNetDataContext],…)
- Sys.require的第二个参数是获取指定对象相关JS文件成功后的回调函数,一般会在这里做初始化控件的操作,在代码中,我们利用Sys.create.dataView函数给view对象初始化。
- 初始化DataView完毕后,就可以调用WCF服务获取数据了,这里要注意调用WCF服务都这种异步方式的,GetUserCallback函数是该WCF Service调用成功后的回调函数,返回值就是GetUserCallback函数中的参数。
- 在GetUserCallback函数中利用view的set_data函数就可以设置DataView的数据源了,基本操作方法和服务器端的GridView控件差不多。
1.8 现在就可以运行网页了,页面加载的时候会把所有用户的数据都显示出来。
1.9 为网页中的Button添加一个JS的Click事件,修改Button的HTML代码,如下所示:
添加一个JS函数Button1_onclick(),代码如下:
var CustomerIDPattern = $get( " Text1 " ).value;
MyService.GetUsers(CustomerIDPattern,GetUserCallback);
}
点击Button1时就从Text1中将用户名取出,然后将这个用户当作参数进行查询。
1.10 完整的HTML代码如下所示:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >
< style type ="text/css" >
.sys-template
{
display : none ;
}
.column
{
float : left ;
padding-top : 2px ;
width : 188px ;
height : 20px ;
color : Red ;
border-width : 1px ;
border-color : black ;
border-style : solid ;
overflow-y : hidden ;
}
</ style >
< script language ="javascript" type ="text/javascript" >
// <![CDATA[
function Button1_onclick() {
}
var dataview = null ;
window.onload = function () {
Sys.require(Sys.components.dataView, function (result) {
dataview = Sys.create.dataView($get( " dvUsers " ));
MyService.GetUsers( "" , GetUserCallback);
});
}
function GetUserCallback(result) {
dataview.set_data(result);
}
function Button1_onclick() {
var CustomerIDPattern = $get( " Text1 " ).value;
MyService.GetUsers(CustomerIDPattern,GetUserCallback);
}
// ]]>
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" EnableCdn ="True" >
< Services >
< asp:ServiceReference Path ="~/MyService.svc" />
</ Services >
< Scripts >
< asp:ScriptReference Path = " http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjax.js "
Name = " MicrosoftAjax.js " / >
< asp:ScriptReference Path = " http://ajax.microsoft.com/ajax/beta/0911/start.debug.js " / >
</ Scripts >
</ asp:ScriptManager >
用户名: < input id ="Text1" type ="text" />< input id ="Button1" type ="button" value ="查询" onclick ="return Button1_onclick()" />
< div id ="dvUsers" class ="sys-template" style ="width: 575px;" >
< div class ="column" id ="colCustomerID" >
{binding CustomerID}
</ div >
< div class ="column" id ="colCompanyName" >
{binding CompanyName}
</ div >
< div class ="column" id ="colContactName" >
{binding ContactName}
</ div >
</ div >
</ div >
</ form >
</ body >
</ html >
今天就聊到这儿,如何大家需要技术支援,请给我发Email:warensoft@foxmail.com