四、例2—数据库绑定
现在，我们来讨论更为复杂的数据库绑定的例子。根据我们前面的讨论，我们找到了使用DataSource的典型场所；在前面的例1中，我们使用了一种内存数据来模拟有状态的web服务。但是，在实际开发中，一般不这样使用。在本节中，我们要创建一个非常贴近于实际开发环境应用的例子。
1.创建工程
启动Visual Studio 2005并选用模板“ASP.NET AJAX CTP-Enabled Web Site”创建一个新的网站并命名为DatabaseBinding，最后选定Visual C#为内置语言。然后，稍微修改页面Default.aspx，最后的结果如下图4所示。
 |
| 图4：示例2的设计时刻页面 |
2.后台代码分析
下面是页面Default.aspx中HTML元素的定义部分。
列表6
<!--------------------------------------------------->
<div id="detailsView"></div>
<!--------------------------------------------------->
<input type="button" id="previousButton" value="Previous"
title="Go to previous row" style="width: 67px; height: 30px;" />
<span id="rowIndexLabel"></span>
<input id="nextButton" type="button" value="Next" title="Go to next row"
style="width: 67px; height: 30px;" />
<input type="button" id="addButton" value="Add" title="Create a new row"
style="width: 67px; height: 30px;" />
<input type="button" id="delButton" value="Delete"
title="Delete the current row" style="width: 67px; height: 30px;" />
<input type="button" id="saveButton" value="Save"
title="Save all pending changes" style="width: 67px; height: 30px;" />
<input type="button" id="refreshButton" value="Refresh"
title="Discard pending changes and get the latest data from the server"
style="width: 73px; height: 30px" />
<!--------------------------------------------------->
<div style="visibility:hidden;display:none" >
<div id="detailsTemplate" class="ListWindow">
Name: <input id="nameField" size="30" /><br />
Address:<br />
<textarea id="addressField" style="width: 428px;
height: 130px" rows="4" cols="4"></textarea><br />
</div>
<div id="emptyTemplate">
Loading Data...
</div>
</div>
|
根据图4中的布局和上面的代码，我们在此首先定义了两个导航按钮—previousButton和nextButton—它们都用于显示于客户端（而不是服务器端）的控件ItemView相应的数据源的数据记录间的导航。然后，我们定义了两个按钮(addButton，delButton)以实现对数据库中记录的修改操作。最后两个按钮—saveButton和refreshButton直接相应于MS AJAX客户端控件DataSource的save和load两个方法。之后，我们使用了一组HTML DIV元素来描述控件ItemView。在此，建议你把这里的对应关系与例一１中的控件ListView与HTML元素的对应关系加以比较。
3.创建一个连接到数据库的Web服务
(1)创建一个示例数据库—DataBind.mdf
右击工程并选定“添加新项”，然后选择模板“SQL数据库”，你可以容易地创建一个空的数据库—在此，我们命名它为DataBind.mdf。然后，我们把唯一的一个表（Employees）添加到其中。这个表中包含三个字段：Id(int，primary key)，Name(nvarchar(50)，not empty)和Address (nvarchar(50)，not empty)。同时，我们还创建了四个简单的存储过程：DeleteRecord，GetAllRecords，InsertRecord，UpdateRecord，它们相应于典型的数据库CRUD操作。因为我们的重点不在此，所以不再详细加以讨论。
(2)创建一个类—Employee
注意，这个类非常类似于第一个例子中的类Employees—充当数据库表格的OOP包装；具体地说，这是通过把它的修饰有属性DataObjectField的成员变量映射到定义于表格Employees中的字段实现的。
(3)两个帮助者类—SqlHelper(来自于MS AJAX示例中)和SqlTaskProvider
为了问题的简化和通用起见，我们创建了两个帮助者类。一个是SqlHelper（来自于随同MS AJAX发行的示例程序TaskList）；另一个是SqlTaskProvider。由于这些内容有些远离了本文的主题，所以，在此也不多解释，有兴趣的读者可详细研究本文所附源码。
现在，让我们来创建一个DataService（派生自Web Service）并使之与数据库相连接。
2.创建连接到数据库的DataService
下面，我们先列出这个DataService相关的MyDataService.asmx的关键代码：
列表7
//……(省略)
using System.ComponentModel;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Web.Script.Services;
using Microsoft.Web.Preview.Services;
using Demos.Employee;//defines class SqlTaskProvider
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyDataService : DataService
{
[WebMethod]
[DataObjectMethod(DataObjectMethodType.Delete)]
public void DeleteRecord(Employee emp)
{
if (emp.Name == null)
{
throw new AccessViolationException();
}
new SqlTaskProvider().DeleteRecord(emp);
}
[WebMethod]
[DataObjectMethod(DataObjectMethodType.Select)]
public List<Employee> GetAllRecords()
{
return new SqlTaskProvider().GetAllRecords();
}
[WebMethod]
[DataObjectMethod(DataObjectMethodType.Insert)]
public void InsertRecord(Employee emp)
{
if (emp.Name == null)
{
throw new AccessViolationException();
}
new SqlTaskProvider().InsertRecord(emp);
}
[WebMethod]
[DataObjectMethod(DataObjectMethodType.Update)]
public void UpdateRecord(Employee emp)
{
if (emp.Name == null)
{
throw new AccessViolationException();
}
new SqlTaskProvider().UpdateRecord(emp);
}
}
|
略微加以分析，你应该得如图5所示的调用关系图：
 |
| 图5：例2中各主要模块间的调用关系 |
接下来，让我们分析数据绑定是如何在客户端实现的。注意，这里我们仍然使用xml-script声明性方式。
4.客户端声明性编程
在此，非常类似于前一个例子，我们首先建立HTML元素与控件ItemView的模板间的映射关系：
列表8
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<dataSource id="EmployeeDataSource" serviceURL="MyDataService.asmx" >
</dataSource> <itemView id="detailsView">
<bindings>
<binding dataContext="EmployeeDataSource"
dataPath="data" property="data" />
<binding dataContext="EmployeeDataSource"
dataPath="isReady" property="element" propertyKey="enabled"/>
</bindings>
<itemTemplate>
<template layoutElement="detailsTemplate">
<textBox id="nameField">
<bindings>
<binding dataPath="Name"
property="text" direction="InOut"/>
</bindings>
</textBox>
<textBox id="addressField">
<bindings>
<binding dataPath="Address"
property="text" direction="InOut"/>
</bindings>
</textBox>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</itemView>
|
在此，有几处需要注意。首先，控件ItemView典型地用于显示一条记录—基于MS AJAX客户端数据绑定方案，而控件ListView却用于显示满足一定范围的一批记录。其次，控件ItemView使用了两个绑定：第一个绑定将把从DataSource返回的数据绑定到控件ItemView的data属性上，以确保ItemView控件能够从数据源取得它所要求的完整的数据；第二个绑定把ItemView控件的enabled属性绑定到DataSource的IsReady属性上。这意味着，当数据源还没有准备好时（例如数据源正在从服务器端读写数据），控件ItemView将被禁用。第三，我们使用了双向绑定技术，这意味着不仅源控件属性（dataContext属性指向的那个）的改变将更新目标控件相应的属性，而且反过来也如此。最后，我们还要注意，DataSource的改变将使数据变‘脏’—DataSource控件的isDirty属性将被置为true。
接下来，让我们看一下页面中使用的两个导航按钮的定义。
列表9
<button id="previousButton">
<click>
<invokeMethodAction target="detailsView" method="movePrevious" />
</click>
<bindings>
<binding dataContext="detailsView" dataPath="canMovePrevious"
property="element" propertyKey="disabled" transform="Invert" />
</bindings>
</button>
<label id="rowIndexLabel">
<bindings>
<binding dataContext="detailsView" dataPath="dataIndex"
property="text" transform="Add" />
</bindings>
</label>
<button id="nextButton">
<click>
<invokeMethodAction target="detailsView" method="moveNext" />
</click>
<bindings>
<binding dataContext="detailsView" dataPath="canMoveNext"
property="element" propertyKey="disabled" transform="Invert" />
</bindings>
</button>
|
在此，控件ItemView提供的一些方法和属性用于实现加载到其中的相邻记录之间的导航。如果用户正在浏览第一条记录，那么属性canMovePrevious被设置为false；否则为true。此外，我们还为按钮previousButton的click事件指定了一个相应的行为。至于按钮nextButton，情况与之一致。另外，我们通过dataIndex属性来读取当前记录的索引值并把它绑定到label控件。
现在，让我们来讨论最有趣也是最重要的与数据库相关的CRUD操作部分。
列表10
<button id="addButton">
<click>
<invokeMethodAction target="detailsView" method="addItem" />
</click>
<bindings>
<binding dataContext="EmployeeDataSource" dataPath="isReady"
property="element" propertyKey="disabled" transform="Invert" />
</bindings>
</button> <button id="delButton">
<click>
<invokeMethodAction target="detailsView" method="deleteCurrentItem" />
</click>
<bindings>
<binding dataContext="EmployeeDataSource" dataPath="isReady"
property="element" propertyKey="disabled" transform="Invert" />
</bindings>
</button> <button id="saveButton">
<click>
<invokeMethodAction target="EmployeeDataSource" method="save" />
</click>
<bindings>
<binding dataContext="EmployeeDataSource" dataPath="isDirtyAndReady"
property="element" propertyKey="disabled" transform="Invert" />
</bindings>
</button> <button id="refreshButton">
<click>
<invokeMethodAction target="EmployeeDataSource" method="load" />
</click>
<bindings>
<binding dataContext="EmployeeDataSource" dataPath="isReady"
property="element" propertyKey="disabled" transform="Invert" />
</bindings>
</button>
|
在此，当我们需要向数据集中添加新记录时，调用控件ItemView的addItem方法—此时数据源必须准备好。对于按钮delButton，情况也非常类似。当数据源准备好后，调用控件ItemView的方法deleteCurrentItem；否则按钮delButton被置为disabled。
对于按钮saveButton，情况则比较复杂。只有当数据源变‘脏’并且数据源已经准备好后，我们才能够保存数据。读者应该还记得在前面定义的那几个TextBox控件（它们位于ItemView控件的ItemTemplate模板内，并且都是进行双向的数据绑定）。所以，当用户更改任何一个TextBox控件中的内容时，ItemView控件的数据集将被自动更新，而且其数据源中的数据集也是如此。最后，数据源变‘脏’；同时，数据源也准备好，于是属性isDirtyAndReady被置为true—此时，按钮saveButton才会激活可用；否则不可用。
当你点击按钮refreshButton时，将再次发生一次SELECT查询，这又进一步触发所有绑定并把最新数据加载到当前页面中的控件内。请注意，这里的刷新操作是以AJAX方式（异步）实现的，因此，仅有控件ItemView被更新而不会产生整个页面的闪烁问题。
4.运行程序
如果没有什么问题的话，按下F5键，你将会看到如下图6所示的运行时刻快照。
 |
| 图6：例2的运行时刻快照 |
乍看这个屏幕，你会感觉它非常类似一个传统的桌面数据库应用程序的界面，但实际上其中显示的数据却是来自于一个远方的服务数据库！在此，我们再次领略了MS AJAX框架的威力。
五、总结
在本系列的这两篇文章中，我们深入剖析了微软ASP.NET Ajax中的数据绑定构架。因为本人也是这个框架的新手，而且这个框架也一直处于发展当中（特别是Futures CTP部分），所以在其中涉及的许多概念和例子里面很可能存在一定的错误，真诚希望读者朋友能够帮助批评指正。
