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

【51CTO.com独家特稿】四、例2—数据库绑定

现在，我们来讨论更为复杂的数据库绑定的例子。根据我们前面的讨论，我们找到了使用DataSource的典型场所；在前面的例1中，我们使用了一种内存数据来模拟有状态的web服务。但是，在实际开发中，一般不这样使用。在本节中，我们要创建一个非常贴近于实际开发环境应用的例子。

1.创建工程

启动Visual Studio 2005并选用模板“ASP.NET AJAX CTP-Enabled Web Site”创建一个新的网站并命名为DatabaseBinding，最后选定Visual C#为内置语言。然后，稍微修改页面Default.aspx，最后的结果如下图4所示。

498)this.style.width=498;'' onmousewheel = ''javascript:return big(this)'' class=fit-image onmousewheel="javascript:return big(this)" src="/files/uploadimg/20070703/1549080.gif" onload="javascript:if(this.width>498)this.style.width=498;">

图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）并使之与数据库相连接。