ASP.NET 4.0 Ajax 实例--DataView模板编程2
ASP.NET4.0 Ajax实例--DataView模板编程2
前一篇文章中向大家介绍了如何利用客户端代码实现DataView功能，下面我们来看看如何利用DataView实现主-从模式。
-
什么是主-从模式
想利用文字说明什么是主从模式，好像不太容易，不过通过下面的示意图说明，就比较方便，示意图如下：
上图中，左边是用户列表，右边是用户的详细信息，点击左边列表中的某一个用户名，右边就显示该用户的详细信息。这时左边就是"主"，右边就是"从"。
-
实现方法
实现主从模式（Master-Detail），可以有两种方法：
1. 绑定方式实现（自动）。
2. 代码方式实现（手动）。
一. 绑定方式的实现
利用绑定方式实现Master-Detail模式，代码量很少，开发速度快，缺点是灵活性差，因为很多情况下"从"数据是"主"数据经过运算后得到的，而不仅仅是简单的从数据库中将数据取出。因此绑定方式比较适合于直接数据显示（数据不需要经过加工就直接显示）实现过程如下：
1. 数据库设计
这里我们仍然使用Northwind数据库，我们关心的表如下图所示：
2. 和前一个Blog中的实现过程一样，我们需要添加一个WCF服务，在WCF服务中添加我们自己定义的数据访问逻辑，然后在JS里调用。和前面文章不同的是，这里我们使用EntityFramework来实现数据访问操作（在现实的工程开发中，建议大家使用EntityFramework+ADO.NET，千万不要使用LinqToSql速度太慢了）。
3. 添加EntityFramework实体类：
首先，在网站里添加新项，选择ADO.NET Entity Data Model，如下图所示：
然后，选择要映射的数据库，如下图所示：
最后，选择要映射的表，如下图所示：
生成的映射类视图，如下所示：
4. 添加一个Ajax Enabled WCF，并修改其代码，如下所示：
代码
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
NorthwindModel;
[DataContract]
public
class
CustomersInfo
{
[DataMember ]
public
string
CustomerID
{
get
;
set
;
}
[DataMember]
public
string
CompanyName
{
get
;
set
;
}
[DataMember]
public
string
ContactName
{
get
;
set
;
}
}
[DataContract]
public
class
OrdersInfo
{
[DataMember]
public
int
OrderID
{
get
;
set
;
}
[DataMember]
public
DateTime OrderDate
{
get
;
set
;
}
[DataMember]
public
string
ShipCountry
{
get
;
set
;
}
}
[ServiceContract(Namespace
=
""
)]
[AspNetCompatibilityRequirements(RequirementsMode
=
AspNetCompatibilityRequirementsMode.Allowed)]
public
class
NorthwindService
{
[OperationContract]
public
List
<
CustomersInfo
>
GetAllCustomers()
{
List
<
CustomersInfo
>
result
=
null
;
using
(NorthwindEntities context
=
new
NorthwindEntities ())
{
result
=
context.Customers
.Select(customer
=>
new
CustomersInfo()
{
CustomerID
=
customer .CustomerID ,
CompanyName
=
customer.CompanyName,
ContactName
=
customer .ContactName
}).ToList ();
}
return
result;
}
[OperationContract]
public
List
<
OrdersInfo
>
GetCustomerOrders(
string
customerID)
{
List
<
OrdersInfo
>
result
=
null
;
using
(NorthwindEntities context
=
new
NorthwindEntities())
{
result
=
context.Orders
.Where(order
=>
order.CustomerID
==
customerID)
.Select(order
=>
new
OrdersInfo()
{
OrderID
=
order.OrderID,
OrderDate
=
order.OrderDate.Value ,
ShipCountry
=
order .ShipCountry
}).ToList ();
}
return
result;
}
}
代码说明：
1. 该WCF中包括两个方法，GetAllCustomers获取全部用户信息，GetCustomerOrders获取指定用户的订单信息。
2. 返回值中的CustomersInfo类和OrdersInfo类已经自动被标记成DataContract，所以可以直接用去WCF的数据协议。
6. 设计页面，基本布局如下图所示：
如图可见，左面是一个DataView，当选中左面某一个Customer之后，名字高亮显示，右面显示这个用户的详细信息。首先要添加一些必要的CSS，代码如下所示 ：
代码
<style type="text/css">
.sys-template
{
display
:
none
;
}
.left
{
float
:
left
;
width
:
198px
;
height
:
193px
;
overflow-y
:
scroll
;
}
.right
{
float
:
left
;
width
:
331px
;
height
:
190px
;
}
.customerRow
{
width
:
100%
;
padding-top
:
2px
;
border-style
:
solid
;
border-color
:
Black
;
color
:
Blue
;
cursor
:
pointer
;
}
.selectedItem
{
background-color
:
Gray
;
}
</style>
代码说明：
1. sys-template：所有的DataView都要应用该样式，目的是控制其可见性
2. customerRow: 显示用户名称行的样式
3. selectedItem: 当某一个用户被选中时，所选中行的样式
7. 页面的HTML代码如下：
代码
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
EnableCdn
="True"
>
<
Services
>
<
asp:ServiceReference
Path
="~/NorthwindService.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
>
<
div
style
="width: 540px"
>
<
div
id
="divLeft"
class
="left"
>
<
div
id
="dvUserList"
class
="sys-template"
>
<
div
id
="colUserName"
class
="customerRow"
sys:command
="Select"
>
{binding CustomerID}
</
div
>
</
div
>
</
div
>
<
div
id
="divRight"
class
="right"
>
<
div
id
="dvUserDetails"
class
="sys-template"
>
<
div
>
<
span
>
CustomerID:
</
span
>
<
span
>
{binding CustomerID}
</
span
>
</
div
>
<
div
>
<
span
>
CompanyName:
</
span
>
<
span
>
{binding CompanyName}
</
span
>
</
div
>
<
div
>
<
span
>
ContactName:
</
span
>
<
span
>
{binding ContactName}
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
代码说明：
1. 和前一个Blog相同，在页面中添加了一个ScriptManager，在ScriptManager中添加了WCF的引用，以及ASP.NET Ajax Library的CDN引用，以便使用DataView控件。
2. ID为"divLeft"的DIV是左面的用户名列表区。
3. ID为"divRight"的DIV为右面的用户详细信息显示区。
4. 在"divLef"中包括一个ID为"dvUserList"的DIV，该DIV是我们使用的一个DataView,在该DataView中包括一个列，即：ID为"colCustomerID"的DIV，该列绑定到了CustomerID字段上。这里比较特殊的是，在"colCustomerID"中，我们添加了一个系统指令"sys:command="Select""，该标记的功能是：当鼠标点击这列的某一行时，该即被选定，同时该列的样式会改变成指定的样式（后面JS代码中体现），而且该DataView的selectedData属性将变成这一行所对就的记录。
5. 在"divRight"中包括一个ID为"dvUserDetails"的DIV，该DIV是用来显示用户详细信息的DataView。中间有三个列，分别绑定到CustomerID，CompanyName以及ContactName三个字段上。
8. 在页面上添加JS控制代码，如下所示：
代码
<
script
>
var
masterView
=
null
;
var
detailsView
=
null
;
window.onload
=
function
() {
Sys.require([Sys.components.dataView],
function
() {
masterView
=
Sys.create.dataView($get(
"
dvUserList
"
), {
selectedItemClass:
"
selectedItem
"
});
detailsView
=
Sys.create.dataView($get(
"
dvUserDetails
"
));
Sys.bind(detailsView,
"
data
"
, masterView,
"
selectedData
"
);
NorthwindService.GetAllCustomers(
function
(result) {
masterView.set_data(result);
});
});
}
<
/
script>
代码说明：
1. masterView和detailsView分另为主从两DataView
2. 在页面加载后（window.onload），通过Sys.require来加载相关的JS文件
3. 创建masterView时，在Sys.create.dataView函数的第二个参数中，指定了masterView中的seletedItemClass属性，即：指定当masterView中的某一行被选中时所应用的样式。
4. 利用Sys.Bind函数将两个DataView进行绑定，该函数中的第一个参数用来指定将数据绑定到谁，第二个参数指定将数据绑定到该对象的哪一个属性上。第三个参数是指定要绑定的数据的来源是哪个对象，第四个参数指定数据源对象中的哪个属性是用来获取数据的。
5. 最后调用WCF Service获取所有用户数据，并利用masterView的set_data函数来绑定主DataView。
9. 运行后的效果如下图所示：
在左面用户列表中选中一个用户，右面就会显示该用户的详细信息。
二． 代码方式实现
前面是通过绑定方式实现的主—从模式。下面将功能扩展，我们还需要在点击用户的时候查看该用户的订单信息，订单信息是和Customers表关联的表，我们是无法利用简单绑定来取值的，因此，需要手动编码来控制主从模式。现在我们将页面的HTML代码做一下修改，再添加一个新的DataView，用来显示用户的订单信息。
1. 新添加的DataView的HTML代码如下所示：
2. 修改主DataView "dvUserList"的HTML如下所示：
代码
<
div
id
="dvUserList"
class
="sys-template"
>
<
div
id
="colUserName"
class
="customerRow"
sys:command
="Select"
sys:CustomerID
={{CustomerID}}
>
{binding CustomerID}
</
div
>
</
div
>
代码说明：
这里为ID为"colUseName"的DIV添加了一个CustomerID属性，并将该属性绑定到CustomerID字段上。
3. 修改JS代码，如下所示：
代码
<
script
>
var
masterView
=
null
;
var
detailsView
=
null
;
var
ordersView
=
null
;
window.onload
=
function
() {
Sys.require([Sys.components.dataView],
function
() {
masterView
=
Sys.create.dataView($get(
"
dvUserList
"
), {
selectedItemClass:
"
selectedItem
"
,
onCommand: OnUserListCommand
});
detailsView
=
Sys.create.dataView($get(
"
dvUserDetails
"
));
ordersView
=
Sys.create.dataView($get(
"
dvOrdersView
"
));
Sys.bind(detailsView,
"
data
"
, masterView,
"
selectedData
"
);
NorthwindService.GetAllCustomers(
function
(result) {
masterView.set_data(result);
});
});
}
function
OnUserListCommand(sender) {
var
command
=
sender.get_commandName();
if
(command
==
"
Select
"
) {
var
customerID
=
sender.get_commandSource().CustomerID;
NorthwindService.GetCustomerOrders(customerID,
function
(result) {
ordersView.set_data(result);
});
}
}
<
/
script>
代码说明：
1. 代码中添加了一个ordersView对象，用来表示新添加的DataView。
2. 在masterView的时候多添加了一个属性：onCommand,该属性是一个回调函数指针，该指针指向了"OnUserListCommand"函数，当鼠标对"dvUserList"中的任意一行执行操作时，OnUserListCommand函数都将被调用。
3. 在"dvUserList"中，我们只设置了select命令（sys:command="Select"），在OnUserListCommand函数中，通过调用sender.get_commandName()函数，可以知道我们对哪一个列进行了操作，因此，我们只要关心这个操作是不是"Select"即可。
4. 通过sender.get_commandSource()可以获取我们所点击的那个DIV，之前我们已经在每一行的DIV中绑定了CustomerID字段，因此，可以通过sender.get_commandSource().CustomerID来获取被点击的那一行的CustomerID值。
5. 通过调用WCF中的GetCustomerOrders函数，就可以获取指定用户的订单信息了。
4. 运行效果如下所示：
5. 完整的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
>
<
script
>
var
masterView
=
null
;
var
detailsView
=
null
;
var
ordersView
=
null
;
window.onload
=
function
() {
Sys.require([Sys.components.dataView],
function
() {
masterView
=
Sys.create.dataView($get(
"
dvUserList
"
), {
selectedItemClass:
"
selectedItem
"
,
onCommand: OnUserListCommand
});
detailsView
=
Sys.create.dataView($get(
"
dvUserDetails
"
));
ordersView
=
Sys.create.dataView($get(
"
dvOrdersView
"
));
Sys.bind(detailsView,
"
data
"
, masterView,
"
selectedData
"
);
NorthwindService.GetAllCustomers(
function
(result) {
masterView.set_data(result);
});
});
}
function
OnUserListCommand(sender, args) {
var
command
=
sender.get_commandName();
if
(command
==
"
Select
"
) {
var
customerID
=
sender.get_commandSource().CustomerID;
NorthwindService.GetCustomerOrders(customerID,
function
(result) {
ordersView.set_data(result);
});
}
}
</
script
>
<
style
type
="text/css"
>
.sys-template
{
display
:
none
;
}
.left
{
float
:
left
;
width
:
198px
;
height
:
193px
;
overflow-y
:
scroll
;
}
.right
{
float
:
left
;
width
:
331px
;
height
:
190px
;
}
.customerRow
{
width
:
100px
;
padding-top
:
2px
;
border-style
:
solid
;
border-color
:
Black
;
border-width
:
1px
;
color
:
Blue
;
cursor
:
pointer
;
}
.selectedItem
{
background-color
:
Gray
;
}
</
style
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
EnableCdn
="True"
>
<
Services
>
<
asp:ServiceReference
Path
="~/NorthwindService.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
>
<
div
style
="width: 540px"
>
<
div
id
="divLeft"
class
="left"
>
<
div
id
="dvUserList"
class
="sys-template"
>
<
div
id
="colUserName"
class
="customerRow"
sys:command
="Select"
sys:CustomerID
={{CustomerID}}
>
{binding CustomerID}
</
div
>
</
div
>
</
div
>
<
div
id
="divRight"
class
="right"
>
<
div
id
="dvUserDetails"
class
="sys-template"
>
<
div
>
<
span
>
CustomerID:
</
span
>
<
span
>
{binding CustomerID}
</
span
>
</
div
>
<
div
>
<
span
>
CompanyName:
</
span
>
<
span
>
{binding CompanyName}
</
span
>
</
div
>
<
div
>
<
span
>
ContactName:
</
span
>
<
span
>
{binding ContactName}
</
span
>
</
div
>
</
div
>
用户订单：
<
div
id
="dvOrdersView"
class
="sys-template"
style
="width:400px"
>
<
div
style
="border-width:1px;border-style:solid;border-color:Black;"
>
<
span
>
{binding OrderID}
</
span
>
--
<
span
>
{binding OrderDate}
</
span
>
--
<
span
>
{binding ShipCountry}
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
代码
用户订单：
<
div
id
="dvOrdersView"
class
="sys-template"
style
="width:400px"
>
<
div
style
="border-width:1px;border-style:solid;border-color:Black;"
>
<
span
>
{binding OrderID}
</
span
>
--
<
span
>
{binding OrderDate}
</
span
>
--
<
span
>
{binding ShipCountry}
</
span
>
</
div
>
</
div
>
今天就聊到这儿，如何大家需要技术支援，请给我发Email：[email protected]