17.3 ASP.NET AJAX核心控件
将ASP.NET AJAX控件添加到ASP.NET网页上后，再浏览这些网页会自动将支持的客户端JavaScript脚本发送到浏览器以获得AJAX功能，本节将分别介绍这5种最核心的服务器控件以及它们的用法。
17.3.1 ScriptManager控件
ScriptManager控件是ASP.NET AJAX的核心，它提供处理页面上所有ASP.NET AJAX控件的支持，没有该控件的存在，其他ASP.NET AJAX就无法工作。
1．ScriptManager的结构
在支持ASP.NET AJAX的ASP.NET页面中，有且只能有一个ScriptManager控件来管理ASP.NET AJAX相关的控件和脚本。可以在ScriptManager控件中指定需要的脚本库，也可以通过注册JavaScript脚本来调用Web服务等。
一个ScriptManager的典型定义如下：
以上代码中Scripts、ProfileService、AuthenticationService等子标签都是可选的，这些子标签的意义如表17-2所示。
表17-2 ScriptManager子标签的含义
表17-2中使用最多的是Scripts标签。Scripts标签引用自定义的Javascript的语法为：
以上代码中第1行定义服务器脚本管理控件ScriptManager1。第2行～第4行定义Scripts标签。第3行定义ScriptReference标签来指定引用的Javascript脚本文件并设置属性Path获得脚本文件的路径。
Scripts标签引用的Javascript脚本文件可以超过一个，只要逐一应用<asp:ScriptReference>标签列出即可。如果引用的不是独立的Javascript文件，而是Javascript函数库中的某一个Javascript程序，则要使用<asp:ScriptReference>标签的另外两个属性Assembly和Name。示例代码如下：
上面的代码中第1行定义服务器脚本管理控件ScriptManager1。第2行～第4行定义Scripts标签。第3行定义ScriptReference标签来指定引用的Javascript脚本文件并设置属性Assembly获得脚本函数库的名称、设置属性Name获得Javascript脚本文件。
Services标签引用Web Service程序文件（*.asmx）的语法为：
以上代码中第1行定义服务器脚本管理控件ScriptManager1。第2行～第4行定义Services标签。第3行定义ScriptReference标签来指定引用的Web Service程序并设置属性Path获得Web Service程序的路径。
另外，ScriptManager还具有如表17-3所示的主要属性成员。
表17-3 ScriptManager的主要成员属性
（续表）
ScriptManager控件可以管理为执行部分页面的控件创建的资源，这些资源包括脚本、样式、隐藏区域和数组。ScriptManager控件包括脚本集合，在这个集合中包含了用于浏览器的脚本引用对象ScriptReference，可以以声明或者编程的方式添加这些脚本，然后通过脚本引用来访问这些脚本。
ScriptManager控件还包括了注册方法，使用这些方法可以以编程的方式来注册脚本和隐藏区域。
ScriptManager控件的服务集合包括了ServerReference对象，ServerReference对象绑定到每个注册到ScriptManager控件里Web服务。ASP.NET AJAX框架为每个服务集合的ServerReference对象生成了一个代理对象，这些代理对象和它们提供的方法可以让在客户端脚本调用Web服务变得简单。
也可以以编程方式把ServerReference对象注册到服务集合中，从而把Web服务注册到ScriptManager控件中，这样客户端就可以调用注册的Web服务。
另外需要关注一下ScriptMode，指定ScriptManager发送到客户端脚本的模式，有4种模式：Auto、Inheit、Debug和Release，默认值为Auto。
● Auto模式：会根据Web站点的Web.config配置文件来决定使用哪种模式，如果配置文件中的retail属性设置为true，则把Release模式的脚本发送到客户端，反之，则发送Debug脚本。
● Debug模式：若retail配置值不为true，则发送Debug模式的客户端脚本。
● Release模式：若retail配置值不为false，则发送Release模式的客户端脚本。
● Inherit模式：意义同默认值Auto的用法。
ScriptManager控件处理处理程序发生异常时可以单独使用，其他情况下需要和别的ASP.NET AJAX服务器控件配合才能达到效果。
2．调用Web服务
ScriptManager的一个主要作用是在客户端注册一些服务器端的代码，最常用的就是将Web Service注册在客户端，这样就可以在JavaScript脚本中实现对Web服务的调用。要在JavaScript中调用Web服务需要经过三个步骤：
（1）创建Web服务；
（2）在客户端注册Web服务；
（3）在JavaScript中引用服务的方法。
【实例17-2】调用Web服务
本实例演示使用ScriptManager控件在客户端调用Web服务，此Web服务实现网站欢迎用户的页面，具体实现步骤如下：
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例17-2”。
02 用右键单击网站名称。在弹出的快捷菜单中选择“添加”|“添加新项”菜单选项，在弹出的“添加新项”对话框中选择“已安装模板”下的“Visual C#”模板，并在模板文件列表中选中“Web服务”，然后在“名称”文本框输入该文件的名称WebService.asmx，最后单击“添加”按钮。
03 单击网站根目录下的文件夹App_Code中的WebService.cs文件。在其中添加关键代码如下：
上面的代码中第1行如果要允许使用ASP.NET AJAX从脚本中调用此Web服务必须添加这一属性。第2行定义一个名为WebMethod的属性，该属性用来标志方法可以被远程的客户端访问。第3行定义一个Welcome的方法，返回一个字符串对象，它有一个参数，就是用户输入的用户名。第5行判断如果用户没有输入用户名，则第6行设置username变量的值为“游客”。如果第8行判断用户输入了用户名，则第9行将用户名保存到username变量中。第11行～第13行在页面显示欢迎文本。第14行返回“欢迎”文本。
04 在网站根目录下添加一个名为Default.aspx的窗体文件。
05 单击Default.aspx文件，进入到“视图设计器”，切换到“源视图”，在<form>和</form>标记间添加如下代码：
上面的代码中第1行定义一个服务器脚本管理控件SmWelcome。第2行～第4行定义Services标签。其中，第3行定义ServiceReference标签来指定引用的Web Service程序并设置属性Path获得WebService.asmx文件的路径。第8行定义了一个HTML文本框控件iUserName获取用户输入的用户名。第9行定义一个HTML按纽控件btOk设置显示的文本和设置该控件的单击事件为OnbtOk_Click()。由于是HTML控件，所以这个事件的方法不是在aspx.cs文件中进行处理。
06 在“源视图”的<head>和</head>标记之间编写JavaScrip脚本代码：
上面的代码中第1行～第11行使用标记<script></script>定义标记之间的代码是Javascrip脚本代码。第2行定义处理按钮单击事件的方法OnbtOk_Click。第3行通过document.getElementById方法获取页面文本框用户输入的值。第4行调用WebService服务中的定义的Welcome方法，此方法比原来定义的多了一个参数，多的这个参数是第7行自定义的一个获得结果方法ShowMsg。第7行自定义一个获得结果的方法，它的参数result是WebService服务中Welcome方法的一个string类型的返回值。第9行将值赋给div标签rMsg显示。
07 按快捷键Ctrl＋F5运行程序，效果如图17-4所示。
图17-4 运行结果
17.3.2 UpdatePanel控件
局部更新是ASP.NET AJAX中最基本、最重要的技术。UpdatePanel可以用来创建丰富的局部更新Web应用程序，其强大之处在于不用编写任何客户端脚本就可以自动实现局部更新。
协调服务器和客户端以更新一个页面的指定部位，通常需要对ECMAScript（JavaScript）有很深刻的理解。然而，使用UpdatePanel控件可以让页面实现局部更新，而且不需要编写任何客户端脚本。此外，如果有必要的话，可以添加定制的客户端脚本以提高客户端的用户体验。当使用UpdatePanel控件时，页面上的行为具有浏览器独立性，并且能够减少潜在的客户端和服务器之间数据量的传输。
UpdatePanel控件能够刷新指定的页面区域，而不是刷新整个页面。整个过程是由服务器控件ScriptManager和客户端类PageRequestManager来进行协调的。当部分页面更新被激活时，控件能够被异步地传递到服务器端。异步的传递行为就像通常的页面传递行为一样，所产生的服务器页面执行和控制页面生命周期。然而，随着一个异步的页面传递，页面更新局限于被UpdatePanel控件包含和被标识为要更新的页面区域。服务器只为那些受到影响的浏览器元素返回HTML标记。在浏览器中，客户端类PageRequestManager执行文档对象模型（DOM）的操纵，以使用更新的标记来替换当前存在的HTML片段。
UpdatePanel控件用来控制页面的局部更新，这些更新依赖于ScriptManager的EnablePartialRendering属性，如果此属性设置为false，则局部更新将失去作用。一个UpdatePanel的定义可以包括如下部分
以上代码中UpdatePanel控件的各属性含义如表17-4所示。
表17-4 UpdatePanel主要属性
对于UpdatePanel控件而言，有两个重要的子标签：
● ContentTemplate子标签：在UpdatePanel控件的ContentTemplate标签中，开发人员能够放置任何ASP.NET控件，这些控件在ContentTemplate标签中，就能够实现页面无刷新的更新操作。可以毫不夸张的说这个标签是UpdatePanel控件最重要的组成部分。
● Triggers子标签：表示局部更新的触发器，包括两种触发器：
AsyncPostBackTrigge异步回传触发器：来指定某个控件的某个事件引发异步回传（asynchronous postback），即部分更新。属性有ControlID和EventName。分别用来指定控件ID和控件事件，若没有明确指定EventName的值，则自动采用控件的默认值，比如Button按钮就是Click单击事件。把ContorlID设为UpdatePanel外部控件的ID，可以使用外部控件控制UpdatePanel的更新。
PostBackTrigge不使用异步回传触发器：用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送。
了解了UpdatePanel的结构，现在来演示UpdatePanel控件在网页的AJAX应用上带来的便利。
【实例17-3】UpdatePanel控件的使用
本实例通过ASP.NET AJAX控件，使用GridView控件和DetailView控件实现数据库数据主细表不刷新页面的功能，数据库使用第7章中创建的db_news，具体实现步骤如下：
01 启动Visual Studio 2012，创建一个ASP.NET Web应用程序，命名为“实例17-3”。
02 在网站根目录下创建一个名为Default.aspx的窗体文件。
03 单击网站目录中的Default.aspx文件，打开“视图设计器”。进入到“源视图”，在<form>和</form>标记之间编辑关键代码如下：
上面的代码中第1行添加一个脚本管理控件ScriptManager1对页面中的AJAX控件进行管理。第2行～第14行添加一个服务器更新面板控件UpdatePanel1用于页面的局部更新。其中，第4行～第11行以及第12行分别在UpdatePanel11的子标签ContentTemplate内添加一个服务器列表控件GridView1和一个SqlDataSource1控件。
第15行～第26行添加一个UpdatePanel2控件用于页面的第二处局部更新。其中，第17行～第24行在UpdatePanel12的子标签ContentTemplate内添加一个服务器列表控件DetailView1。
04 在GridView1控件右上方有一个向右的黑色小三角，单击这个小按钮打开“GridView任务”列表，选择“自动套用格式”。弹出“自动套用格式”对话框，在左边的选择架构列表中选中“传统型”，最后，单击“确定”按钮。
05 在DetailView1控件右上方有一个向右的黑色小三角，单击这个小按钮打开“DetailView任务”列表，选择“自动套用格式”。弹出“自动套用格式”对话框，在左边的选择架构列表中选中“传统型”，最后，单击“确定”按钮。
06 单击网站根目录下的Default.aspx.cs文件，编写代码如下。
上面的代码中第1行处理GridView1控件的SelectedIndexChanged1事件。第2行将控件中选择行的数据项的索引作为DetailsView1的页面索引。
07 按快捷键Ctrl＋F5运行程序，如图17-5所示。
图17-5 运行结果1
08 选择GrieView控件中第三行数据，在DetailView控件中显示相应的详细信息，并且在程序运行时没有刷新页面，如图17-6所示。
图17-6 运行结果2
17.3.3 UpdateProgress控件
UpdateProgress控件帮助开发人员设计一个直观的用户界面，这个用户界面用来显示一个页面中的一个或多个UpdatePanel控件实现部分页面刷新的过程信息。如果一个部分页面刷新过程是缓慢的，就可以利用UpdateProgress控件提供更新过程的可视化的状态信息。此外在一个页面可以使用多个UpdateProgress控件，每个与不同的UpdatePanel控件相配合。此外，可以使用一个UpdateProgress控件与页面上的所有UpdatePanel控件相配合。
UpdateProgress结构非常简单，下面是一个使用的例子：
以上代码中，UpdateProgress控件的常用属性如表17-5所示。
表17-5 UpdateProgress控件的常用属性
属性AssociatedUpdatePanelID默认值为空字符串，也就是说UpdateProgress控件不与特定的UpdatePanel控件关联，因此，对于源于任何UpdatePanel控件的异步回送或来自充当面板触发器的控件的回送，都会导致UpdateProgress控件显示其ProgressTemplate内容。此外，可以将AssociatedUpdatePanelID属性设置为同一命名容器、父命名容器或页中的控件。
属性DynamicLayout为布尔值，如果动态呈现进度模板，则为true；否则为false。默认值为true。如果DynamicLayout属性为true，则在首次呈现页时，不会为进度模板内容分配空间。但在显示内容时，就可以根据需要进行动态更改，包含进度模板div元素的style属性将被设置为none。如果DynamicLayout属性为false，则会在首次呈现页时为进度模板内容分配空间，并且UpdateProgress控件是页面布局的物理组成部分，包含进度模板的div元素的style属性将设置为block，并且其可视性最初会设置为hidden。
属性ProgressTemplate默认值为null。必须为UpdateProgress控件定义模板。否则，在UpdateProgress控件的Init事件发生期间会引发异常。可通过将标记添加到ProgressTemplate元素，以声明方式指定ProgressTemplate属性。如果ProgressTemplate元素中没有标记，则不会为UpdateProgress控件显示任何内容。如果要动态创建UpdateProgress控件，则可以创建从ITemplate控件继承的自定义模板。在InstantiateIn方法中指定标记，然后将动态创建的UpdateProgress控件的ProgressTemplate属性设置为自定义模板的新实例。如果要动态创建UpdateProgress控件，则应在页的PreRender事件发生期间或发生之前进行创建。如果在页生命周期晚期创建UpdateProgress控件，则不显示进度。
UpdateProgress实际上是一个div，通过代码控制div的显示或隐藏来实现更新提示。在B/S应用程序中，如果需要大量的数据交换，则必须使用UpdateProgress，同时设计良好的等待界面，这样才能保证与用户的交互。
【实例17-4】UpdateProgress控件的使用
本实例使用通过UpdateProgress控件给用户一个等待的提示图片，当单击命令按钮时会显示，请求结束后就不再显示进度条信息，具体实现步骤如下：
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例17-4”。
02 在网站根目录下添加一个名为Default.aspx的窗体文件。
03 单击网站目录中的Default.aspx文件，进入到“视图设计器”。打开“源视图”，在<form>和</form>标记之间编辑关键代码如下：
上面的代码中第2行添加一个脚本管理控件ScriptManager1对页面中的AJAX控件进行管理。第4行～第12行定义一个服务器更新面板控件UpdatePanel。其中，第7行在UpdatePanel1的子标签ContentTemplate内添加一个服务器标签控件Label1用于显示当前系统的时间。第9行在UpdatePanel1的子标签ContentTemplate内添加一个服务器按钮控件用于发送请求并设置触发单击的事件cmdRefreshTime_Click。
第14行添加一个服务器更新进程控件updateProgress1。第18行在UpdateProgress1的子标签ProgressTemplate中添加一个图片标记img并设置图片的路径和等待时提示的文字。
04 单击网站根目录下的Default.aspx.cs文件，编写代码如下：
上面的代码中第1行定义处理按钮控件的单击事件的方法。第2行设置延时10s，以观看UpdateProgres1的效果。第3行将当前系统的时间显示在标签控件上。
05 按快捷键Ctrl＋F5运行程序，效果如图17-7所示，单击“向服务器申请刷新”按钮，出现等待的图片和提示文字。当请求结束后，显示如图17-8所示的请求结束时的系统时间。
图17-7 运行结果1
图17-8 运行结果2
17.3.4 Timer控件
定时器控件Timer属于无人管理自动完成任务的一种特殊控件。Timer控件的功能与大多数编程工具中提供的Timer一样，都是按照特定的时间间隔执行指定的代码，ASP.NET AJAX中的Timer也是如此。
Timer的结构比较简单，下面是一个使用的例子：
以上代码中，Timer控件的常用属性如表17-6所示。
表17-6 Timer控件的常用属性
Timer控件能够定时引发整个页面回送，当它与UpdatePanel控件搭配使用时，就可以定时引发异步回送并局部刷新UpdatePanel控件的内容。
Timer控件可以用在下列场合：
● 定期更新一个或多个UpdatePanel控件的内容，而且不需要刷新整个页面。
● 每当Timer控件引发回送时就运行服务器的代码。
● 定时同步地把整个页面发送到服务器。
Timer控件是一个将Javascript组件绑定在Web页面中的服务器控件。而这些Javascript组件经过在Interval属性中定义的间隔后启动来自浏览器的回送。而程序员可以在服务器上运行的代码中设置Timer控件的属性，这些属性都会被传送给Javascript组件。
在使用Timer控件时，页面中必须包含一个ScriptManager控件，这是ASP.NET AJAX控件的基本要求。
当Timer控件启动一个回送时，Timer控件在服务器端触发Tick事件，可以为Tick事件创建一个处理程序来执行页面发送回服务器的请求。
设置Interval属性以指定回送发生的频率，设置Enabled属性以开启或关闭Timer。
如果不同的UpdatePanel必须以不同的时间间隔更新，那么就可以在同一页面中包含多个Timer控件。另一种选择是，单个Timer控件实例可以是同一页面中多个UpdatePanel控件的触发器。
此外，Timer控件可以放在UpdatePanel控件内部，也可以放在UpdatePanel控件外部。当Timer控件位于UpdatePanel控件内部时，则JavaScript计时器组件只有在每一次回送完成时才会重新建立，也就是说，直到页面回送之前，定时器间隔时间不会从头计算，例如，若Timer控件的Interval属性设置为10s，但是回送过程本身却花了2s才完成，这样下一次的回送将发生在前一次回送被引发之后的12s。当Timer控件位于UpdatePanel控件之外时，当回送正在处理时，JavaScript计时器组件仍然会持续计时，例如，若Timer控件的Interval属性设置为10s，而回送过程本身花了2s完成，但下一次的回送仍将发生在前一次回送被引发之后的10s，也就是说用户在看到UpdatePanel控件的内容被更新8s后，又会看到UpdatePanel控件再度被刷新。
【实例17-5】Timer控件的使用
本实例利用Timer控件来定时刷新网页上的汇率值以及该汇率的生成时间。初始情况下，Timer控件每5s引发页面往返一次，从而更新一次UpdatePanel中的内容。用户可以选择5s、60s更新一次汇率值，或者根本不更新，具体实现步骤如下：
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例17-5”。
02 在网站根目录下添加一个名为Default.aspx的窗体文件。
03 单击网站目录中的Default.aspx文件，打开“视图设计器”，进入“源视图”，在<form>和</form>标记之间编辑关键代码如下：
上面的代码中第1行定义一个脚本管理控件ScriptManager1。第2行定义一个时间控件Timer1并设置Timer1触发事件Tick以及时间间隔为11s。第3行～第13定义一个更新面板控件StockPricePanel并设置更新模式属性。第5行在StockPricePanel的子标签Triggers内通过AsyncPostBackTrigger属性绑定Timer1控件来实现异步更新。第9行和第11行在StockPricePanel的子标签ContentTemplate中定义两个服务器标签控件，分别显示汇率的更新时间和更新后的价格。
第17、18和19行分别添加一个服务器单选按钮控件并设置它们各自的属性。第21行定义一个标签控件，显示页面的创建时间。
04 单击网站根目录下的Default.aspx.cs文件，编写代码如下：
上面的代码中第1行定义处理页面Page对象加载事件的Load方法。第2行将系统当前时间显示在标签控件Label1上。第4行定义处理Timer1控件Tick事件的方法。第5行调用自定义的GetStockPrice方法显示随机汇率值。第6行显示汇率时间。第8行自定义返回一个随机的汇率值的方法GetStockPrice。第9行通过random对象的NextDouble方法随机产生数字。第10行将数字转换成带人民币符号的数字。
第12行～第15行处理单选按钮RadioButton1选择事件的方法，将刷新间隔时间设置为5s。第16行～第19行处理单选按钮RadioButton2选择事件的方法，将刷新间隔时间设置为60s。第20行～第22行处理单选按钮RadioButton2选择事件的方法，设置为不刷新。
05 按快捷键Ctrl＋F5运行程序，效果如图17-9所示，用户选择不同的刷新频率，执行不同时间间隔的汇率值显示，同时实现页面无刷新状态。
图17-9 运行结果