四、例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 = " [url]http://tempuri.org/[/url]")] [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=" [url]http://schemas.microsoft.com/xml-script/2005[/url]"> <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部分），所以在其中涉及的许多概念和例子里面很可能存在一定的错误，真诚希望读者朋友能够帮助批评指正。
本文转自朱先忠老师51CTO博客，原文链接： http://blog.51cto.com/zhuxianzhong/59839
，如需转载请自行联系原作者
