代码改变世界

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

2007-09-13 09:36  Jacky_Xu  阅读(342)  评论(0)  编辑  收藏  举报
一、上篇中的示例回顾

在上篇中，为了熟悉MS AJAX在客户端的数据绑定技术，我们给出了一个简单的例子AJAXCTPDev311。其实，这个例子中还有许多重要的特征值得我们作深入分析：

◆提供了一个创建基本的MS AJAX数据绑定应用程序的典型框架；

◆在创建这个例子时，我们选用了“ASP.NET AJAX CTP-Enabled Web Site”模板；其实，你还可以选择普通的“ASP.NET AJAX-Enabled Web Site”模板，但是你必须手工地添加对程序集Microsoft.Web.Preview.dll（这个程序集提供对xml-script声明方式编程和数据绑定技术的支持）的引用；

◆无论创建什么样的MS AJAX应用程序，MS AJAX服务器端控件ScriptManager在整个MS AJAX框架中都起着核心作用。典型情况下，我们都要显式地指定我们要使用的WEB服务相应的*.asmx文件和所使用的程序集。下面我们再次列出这部分的相关代码：

<asp:ScriptManager ID="ScriptManager1" runat="server" >

<Services>

<asp:ServiceReference Path="BookDataService.asmx" />

</Services>

<Scripts>

<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />

</Scripts>

</asp:ScriptManager>

◆控件ListView（以及控件ItemView，我们将在第三个例子中使用之）提供了一组现成的模板，而典型情况下这些内容又进一步与一组HTML div元素相关联（它们的内部又可以进一步包含基本的HTML元素，例如button，textbox，span，hyperlink等）。值得注意的是，为了熟练掌握ListView和ItemView两个MS AJAX高级控件，你必须细致分析这些元素与这两个控件中各种模板的对应关系；

◆声明性编程是MS AJAX新提供的一种客户端编程技术，我们将在后面的部分对之作更为深入的讨论； 

◆下面的框图大致概括了我们所使用的几个关键部件间的关系：

图1：几个关系部件间的关系图

在此，请注意：第一，位于ListView、DataSource和WebService处的数据形式是不同的；第二，在实际开发情况下，WebService一般以数据库数据的形式提供数据（我们将在第三个例子中使用这种情形）；

◆在本例中，我们使用了一个特别类型的WebService—DataService来实现从服务器端为客户端的ListView控件提供数据；

◆我们在本例中直接从客户端调用了WebService方法—这是MS AJAX带给我们的巨大变化。

在接下来的部分中，我们将详细更为细致地分析MS AJAX框架提供的xml-script编程（也即声明性编程）思路。

二、MS Ajax中的声明性编程

除了使用直接的JavaScript编程方式外，MS AJAX还提供了另一种实例化客户端类型的方式—声明性编程模式（其实在ASP.NET中已经提供了类似的实现方式）。注意，为了使用这种方式进行编程，你必须从微软Ajax站点下载Futures CTP包并且添加一个到脚本文件PreviewScript.js（包含在程序集Microsoft.Web.Preview中）的引用。有关这种ASP.NET AJAX 1.0声明性编程的更为细致的讨论，你可以参考Alessandro Gallo的xml-script声明性编程教程。但是，即使这里的教程也只是提及了有关xml-script编程的基本知识；因此，要想精通这种声明性编程，我的意见是，一方面你应该深入研磨伴随MS AJAX发行的示例程序—TaskList；更深一步的话，应该是深入研究文件PreviewScript.js中的有关xml-script语法的解析器部分（这是xml-script编程的优点吗？）。

在此，我们仅列出使用声明性编程的基本步骤，具体应用请参考后面的有关例子：

◆按通常方式设计你的WEB页面—定义相应的HTML元素；

◆创建MS AJAX客户端控件以关联于这些HTML元素；

◆操纵这些MS AJAX客户端控件，进而间接控制相应的HTML元素。

为了进一步简化声明性编程，MS AJAX不仅引入了大量的客户端控件（例如Label，Button，InputControl，TextBox，Image，HyperLink，CheckBox，Select，ItemView，ListView，等等），而且还新创建了许多高级概念（例如Action，Behavior，数据绑定等）。

根据本人的理解，使用声明性编程至少存在两个理由：通过配置相应的XML元素或标签来简化单纯的JavaScript脚本式编程（毕竟有大量的WEB开发人员对JavaScript并不深入了解）；这也是适应未来编程模式的要求—通过把应用程序的设计与实现分离开来从而简化程序的开发，而且简化系统的维护、更新、国际化、第三方开发、重编译，乃至系统的发布。尽管存在种种优点，但由于这种新模式编程刚刚开始（在其它系统下大概也是如此），所以，也存在一些相关的困难，例如调试问题，尚未出现现成的高级IDE工具来简化这种XML声明式编程。

三、例1—把HTML ListView控件绑定到一个Web服务

(一)设计WEB页面

首先，请注意这个例子与第一部分的那个例子存在很大的相似之处。但是，在此我们将详细分析第一个例子中所没有涉及到的许多问题。现在，请启动Visual Studio 2005并选择模板“ASP.NET AJAX CTP-Enabled Web Site”创建一个新的网站并命名为ListEmployees。下图2展示了这个例子的设计时刻界面。

图2：示例程序的设计时刻界面

在这个例子中，我们将仍然使用一个ListView控件来显示一个雇员列表信息；所有这些都是在系统启动后自动完成的。现在，根据前面分析的步骤开始进行操作。

1.设计WEB页面

列表2

  <div id="searchResults">

</div>

<div style="visibility:hidden;display: none;">

<div id="searchResults_layoutTemplate">

<div id="searchResults_itemTemplate" >

&nbsp; &nbsp;<span id="searchResults_ID"></span> 
         &nbsp;&nbsp;&nbsp;&nbsp;

<span id="searchResults_Name"></span>&nbsp;&nbsp;

<span id="searchResults_Address"></span>

</div>

<div id="searchResults_separatorTemplate" 
         class="TaskSeparator">

</div>

</div>

<div id="NoDataTemplate">Waiting...</div>

</div>

在此，我们首先使用了一个固定行（通过一个div块包装）用作下面将列出雇员记录数据的头标题部分。然后，我们构建相应于MS AJAX客户端控件ListView的各种模板的HTML元素。注意，我们也使用了separatorTemplate模板来分离相邻的两条记录。正如在第一部分中所提到的，控件ListView是以AJAX异步的方式来显示记录数据的。为此，我们也使用了emptyTemplate模板—NoDataTemplate以便当数据正从WebService处加载时给用户一种友好的提示。

2.创建相应的MS AJAX客户端控件

在此，我们只创建了一个MS AJAX客户端控件ListView来匹配HTML元素（一组div元素）并使其每一个模板相应于不同的div元素。此外，我们还定义了三个label元素以匹配上面的三个span元素。

(二)创建Web服务

右击工程并且选择“添加新项”，然后创建一个新的Web服务，并命名为EmployeeDataService.asmx。注意，我们还要使这个Web服务派生自DataService，然后创建四个相应于典型的数据库操作CRUD的WebMethod。下面展示了相应的关键代码：

列表3

//……

using System.ComponentModel;

using System.Web.Script.Services;

using Microsoft.Web.Preview.Services;

//……

[ScriptService]

public class EmployeeDataService : DataService

{

static List _data;

static int _nextId;

static object _dataLock = new object();

private static List Data

{

get

{

if (_data == null)

{

lock (_dataLock)

{

if (_data == null)

{

_data = new List();

_data.Add(new Employees(0， 
"John Smitch"，"1970 Napa Ct."));

_data.Add(new Employees(1， 
"Mary Smitch"，"9833 Mt. Dias Blv."));

_data.Add(new Employees(2， 
"Mike Jodan"，"7484 Roundtree Drive"));

_data.Add(new Employees(3， 
"Ronald Adina"，"9539 Glenside Dr"));

_data.Add(new Employees(4， 
"Blue Yonder Airlines"，"1226 Shoe St."));

_data.Add(new Employees(5， 
"Milton Albury"，"1399 Firestone Drive"));

_data.Add(new Employees(6， 
"Phyllis Allen"，"5672 Hale Dr."));

_data.Add(new Employees(7， 
"Stanley Alan"，"6387 Scenic Avenue"));

_data.Add(new Employees(8， "Alexander Berger"，
"8713 Yosemite Ct."));

_nextId = 9;

}

}

}

return _data;

}

}

[WebMethod]

[DataObjectMethod(DataObjectMethodType.Delete)]

public void DeleteRecords(int id)

{

foreach (Employees row in _data)

{

if (row.Id == id)

{

lock (_dataLock)

{

_data.Remove(row);

}

break;

}

}

}

[WebMethod]

[DataObjectMethod(DataObjectMethodType.Select)]

public Employees[] SelectRecords()

{

return EmployeeDataService.Data.ToArray();

}

[WebMethod]

[DataObjectMethod(DataObjectMethodType.Insert)]

public Employees InsertRecords(string name， string Address)

{

Employees newRow;

lock (_dataLock)

{

newRow = new Employees(_nextId++， name， Address);

_data.Add(newRow);

}

return newRow;

}

[WebMethod]

[DataObjectMethod(DataObjectMethodType.Update)]

public void UpdateRecords(Employees updateRow)

{

foreach (Employees row in _data)

{

if (row.Id == updateRow.Id)

{

row.Name = updateRow.Name;

row.Address = updateRow.Address;

break;

}

}

}

}

public class Employees

{

private int _id;

private string _name;

private string _address;

[DataObjectField(true， true)]

public int Id

{

get { return _id; }

set { _id = value; }

}

[DataObjectField(false)]

[DefaultValue("")]

public string Name

{

get { return _name; }

set { _name = value; }

}

[DataObjectField(false)]

[DefaultValue("")]

public string Address

{

get { return _address; }

set { _address = value; }

}

public Employees()

{

_id = -1;

}

public Employees(int id， string name， string address)

{

_id = id;

_name = name;

_address = address;

}

}

注意，在这个例子中，为了简化问题，我们使用了一个内存数据源以实现对有状态的WEB服务的模拟，但在实际开发中这一般是不推荐使用的。

接下来，让我们深入探讨那个“神秘”的DataService。

(三)关于DataService的讨论

在写本文时，我细致地使用关键字“DataService”搜索了整个因特网但却得到极少的几篇与这个主题相关的文章（例如这一篇http://forums.asp.net）。所以，我们的主要参考资料就是随同MS AJAX框架发行的几个例子。此外，我还使用VS2005中的对象浏览器和反射工具搜索到了有关的一少部分信息。现在，我把它们粘合在一起，谈谈自己对这个“神秘”的DataService的理解。

首先，尽管最近你可以从WEB或者是MS AJAX所附教程中非常容易地找到大量的从ASP.NET AJAX框架的客户端JavaScript中消费普通WEB服务相关的操作技巧，但是有关于直接从客户端JavaScript消费派生自DataService的WEB服务方面的内容却实在不多。根据本人的粗浅研究，DataService应该主要使用于如下的典型场所下：当我们使用高级客户端控件ItemView，ListView，而且其数据源来自于WEB服务提供的数据库，并且要求进行数据库相关的典型操作时（例如CRUD）；而在其它情况下，我们一般选用普通的WebService。微软是否针对ListView/ItemView特别设计了DataService？通过进一步使用.NET对象浏览器和Lutz Roeder的高级.NET Reflector工具（提示：这是一个相当优秀的工具，借助于它你可以获取类DataService的全部源码）剖析程序集—Microsoft.Web.Preview.dll，我们还注意到DataService派生自WebService，而且只对外暴露了两个Web方法：

列表4

public DataTable GetData(object parameters， string loadMethod);

public DataTable SaveData(ChangeList changeList， 
object parameters，string loadMethod);

通过进一步分析位于文件PreviewScript.js内的Sys.Preview.Data.DataSource.save和Sys.Preview.Data.DataSource.load的源码，我们会很容易发现：

1、方法save要求DataSource的serviceType属性必须为类型Sys.Preview.Data.ServiceType.DataService；之后，方法save被转向调用类DataService的方法SaveData；

2、对于方法load则存在两种情况：当DataSource的serviceType属性为类型DataService时，方法load被转向调用类DataService的方法GetData；而当DataSource的属性serviceType不属于类型DataService时（例如为Handler），系统将创建一个普通的代理，然后把方法load转发到Sys.Net.WebRequest()。当我们使用.NET Reflector来进一步研究类DataService的方法SaveData和GetData时，我们发现了更为有趣的事情—了解DataSource的loadMethod属性的意义以及数据库CRUD操作如何响应于你的DataService的Delete(DeleteRecords)，Insert(InsertRecords)，Select(SelectRecords)和Update(UpdateRecords)方法的，还蕴含了更多的秘密……

【作者注】极力推荐你研究一下类DataService的实现源码，你将会发现许多有用的东西。

借助于新引入的属性—DataObjectMethod和DataObjectField(你可以参考MSDN中两个类DataObjectFieldAttribute和DataObjectMethodAttribute作进一步研究)，我们可以很容易地实现我们的目标—提供为控件DataSource所使用的属性和方法（如Fill，Select，Update，Insert和Delete等操作）。所有这些都可以在下一节中通过轻松的xml-script声明式编程来实现。

(四)实现绑定

现在，我们来看一下如何使用xml-script声明性方式来实现对于控件ListView的数据绑定。下面是相应于前面HTML元素定义部分的xml-script代码部分。

列表5

<script type="text/xml-script">

<page xmlns="http://schemas.microsoft.com/xml-script/2005">

<components>

<dataSource id="EmployeeDataSource" 

serviceURL="EmployeeDataService.asmx" >

</dataSource>

<listView id="searchResults" 

itemTemplateParentElementId="searchResults_layoutTemplate" >

<bindings>

<binding dataContext="EmployeeDataSource" 

dataPath="data" property="data" />

</bindings>

<layoutTemplate>

<template layoutElement="searchResults_layoutTemplate" />

</layoutTemplate>

<itemTemplate>

<template layoutElement="searchResults_itemTemplate">

<label id="searchResults_ID">

<bindings>

<binding dataPath="Id" transform="Add" 

property="text" />

</bindings>

</label>

<label id="searchResults_Name">

<bindings>

<binding dataPath="Name" property="text" />

</bindings>

</label>

<label id="searchResults_Address">

<bindings>

<binding dataPath="Address" property="text" />

</bindings>

</label>

</template>

</itemTemplate>

<separatorTemplate>

<template 

layoutElement="searchResults_separatorTemplate" />

</separatorTemplate>

<emptyTemplate>

<template layoutElement="NoDataTemplate" />

</emptyTemplate>

</listView>

<application>

<load>

<invokeMethodAction target="EmployeeDataSource" 

method="load" />

</load>

</application>  

</components>

</page>

</script>

在上面代码的第一行，我们定义了一个将用于后面相应控件的dataSource。注意，在此虽然没有显式声明，但是dataSource控件的ServiceType属性已经被置为DataService。接下来，我们开始具体的数据绑定，使用属性dataContext指定控件ListView的数据源，使用属性dataPath指定源绑定属性，使用属性property指定目标的被绑定属性。接下来，我们开始把数据源的属性Id绑定到标签searchResults_ID的text属性上，把数据源的属性Name绑定到标签searchResults_Name的text属性上，把数据源的属性Address绑定到标签searchResults_Address的text属性上。在第一个绑定中，我们引入了一种Add类型的转换器（还有许多转换器，请参考位于文件PreviewScript.js内的类Sys.Preview.BindingBase的代码部分）。另外，由于控件DataTable暴露的DataIndex属性值是从0开始的，通过使用Add类型转换器可以自动导致其值加１，这更适合于大多数用户的习惯。最后的块部分告诉系统自动调用数据源的EmployeeDataSource的load方法。在此为什么使用load以及这个load方法背后又隐藏着什么机理呢？请详细参考前面有关DataService的讨论。

观看运行结果

毋庸多言，请观看图3中的运行时刻结果快照吧！

图3：示例1的运行时刻快照

在此，当示例程序启动时，数据绑定自动发生；之后，客户端控件ListView把相应于服务器端的数据展示到客户端屏幕上。