深入剖析微软ASP.NET Ajax中的数据绑定构架下篇之二(3)

2007-07-03 15:32 朱先忠 51CTO.com 我要评论(0) 字号：T | T

在上篇中，我们已经分析了微软ASP.NET Ajax（以后简称为“MS AJAX”）中的数据绑定构架并给出了一个简单的示例。在本篇中，我们将继续探讨MS AJAX中的数据绑定构架的实际应用，并将给出两个不同的更为高级的案例分析。

AD：

接下来，让我们看一下页面中使用的两个导航按钮的定义。

列表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所示的运行时刻快照。