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：warensoft@foxmail.com
