Asp.NET 4.0 ajax实例--DataView 模板编程1
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;
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服务的引用，代码如下：
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
<
Services
>
<
asp:ServiceReference
Path
="~/MyService.svc"
/>
</
Services
>
</
asp:ScriptManager
>
添加WCF引用的目的是在运行的时候可以生成JS代理类。
1.4 添加几个必要的CSS样式，代码如下所示：
代码
<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>
1.5 添加DataView以及用于输入用户名的文本框，HTML代码如下所示：
代码
<
body
>
<
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引用。代码如下：
代码
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
<
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代码，如下所示：
代码
var
view
=
null
;
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代码，如下所示：
<
input
id
="Button1"
type
="button"
value
="查询"
onclick
="return Button1_onclick()"
/>
添加一个JS函数Button1_onclick()，代码如下：
function
Button1_onclick() {
var
CustomerIDPattern
=
$get(
"
Text1
"
).value;
MyService.GetUsers(CustomerIDPattern,GetUserCallback);
}
点击Button1时就从Text1中将用户名取出，然后将这个用户当作参数进行查询。
1.10 完整的HTML代码如下所示：
代码
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default.aspx.cs
"
Inherits
=
"
_Default
"
%>
<!
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：[email protected]