AJAX之四 Ajax控件工具集

[学习目标]

F 理解并掌握ScriptManager控件的使用

F 了解ScriptManager控件的使用

F 理解并掌握Timer控件的使用

F 理解并掌握UpdatePanel控件的使用

F 理解并掌握UpdateProgress控件的使用

【本章简介】

在上一章中，我们学习了Asp.Net AJAX的核心组件UpdatePanel、ScriptManager等。最后我们通过使用AutoComplete控件，用很少的代码就实现了自动完成功能。我们发现在Asp.Net的AJAX解决方案中，通过控件方式极大地提高了传统了AJAX效果的开发效率。

在这一章中，我们将继续介绍其他一些重要的Asp.Net AJAX扩展控件，包括Accordion、CollapsiblePanel、Rating、Calendar、ModalPopup、Tabs等。

本章的下面几节将介绍这些控件工具集，及如何在Asp.Net程序中使用它们。

4.1 Accordion控件

4.1.1 Accordion控件简介

Accordion控件是用来实现菜单折叠效果的控件。它常用来做导航菜单和分组数据的展示等，如我们的QQ、MSN等面板效果都可以用Accordion控件来实现。Accordion控件可以看成是一组面板，但每次只能显示一个面板，如图4-1所示。一个面板可以分为标题和内容两部分，如图4-2所示。

图4-1 菜单折叠效果图4-2 一次只能显示一个面板

Accordion控件的属性非常多，这里只介绍其模板和主要的属性。

属性	描述
SelectedIndex	默认选择的面板索引
HeaderCssClass	整个菜单的标题样式
ContentCssClass	菜单的内容样式
AutoSize	内容的显示方式，主要有None、Limit和Fill三种，其中None表示可以被无限地拉伸和收缩。
Panes	Pane是Accordion控件的内容所在，里面只能包括AccordionPane控件。可以由多个Panes和AccordionPane。
HeaderTemplate	标题模板
ContentTemplate	内容模板

4.1.2 Accordion控件的使用

Accordion控件用来实现菜单效果的方法，一般分为如下两种。

n 实现静态菜单效果。

n 动态生成Accordion菜单。

1.静态菜单效果

我们可以使用多个AccordionPane,分别指定它们的Header和Content属性即可实现。代码如程序清单4-1所示：

程序清单4-1:Accordion实现静态菜单

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="_Default"%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"TagPrefix="cc1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Accordion静态菜单效果</title>

.headerBg{cursor:hand;width:160px;height:30px;color:#ffffff;font-weight:bold;background-image:url(ajaxmenubg.gif);line=height:30px}

</style>

</head>

<body>

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

<cc1:Accordion ID="Accordion1"runat="server"HeaderCssClass="headerBg">

<Panes>

<cc1:AccordionPane ID="AccordionPane1"runat="server">

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane2"runat="server">

设计效果如图4-1所示。Panes有两个AccordionPane控件，其中AccordionPane有两个模板：Header和Content,对应有两个样式：HeaderCssClass和ContentCssClass。Header模板用来显示面板的标题部分，Content模板用来加载面板的内容部分。

2.Accordion动态菜单

前面我们实现了静态菜单，在实际应用中是不能满足需要的。我们往往需要把数据库中的数据动态展示出来。

根据静态菜单，我们设计两个主从表如图4-2所示

protected void Page_Load(objectsender, EventArgs e)

{

if (!IsPostBack)

{

ShowInfo();

}

protected voidShowInfo()

{

//得到所有分类信息

using (SqlConnectionconn = new SqlConnection())

{

conn.ConnectionString = "server=.;database=MyOffice;uid=sa;pwd=123456";

conn.Open();

string selSql = "select* from Kind";

SqlDataAdapter sda = newSqlDataAdapter(selSql, conn);

DataTable dt = new DataTable();

sda.Fill(dt);

for (int i = 0; i< dt.Rows.Count; i++)

{

//实例化一个AccordionPane控件

AccordionPaneap = new AccordionPane();

Label lblKind = new Label();

lblKind.Text = dt.Rows[i]["KName"].ToString();

//添加子标签；首先，得到父类别的id

int id = Convert.ToInt32(dt.Rows[i]["Id"]);

string selSql2 = string.Format("select * from ChildInfo where KId={0}",id);

sda= new SqlDataAdapter(selSql2,conn);

DataTable dt2 = new DataTable();

sda.Fill(dt2);

for (int j = 0; j< dt2.Rows.Count; j++)

{

HyperLink hlinkBookMenu=newHyperLink();

hlinkBookMenu.Text = dt2.Rows[j]["CIName"].ToString()+"<br>";

ap.ContentContainer.Controls.Add(hlinkBookMenu);

}

ap.HeaderContainer.Controls.Add(lblKind);

Accordion1.Panes.Add(ap);

}

4.2 CalendarExtender控件

CalendarExtender控件是日历控件，它解决了传统Asp.Net日历控件的三大问题。

①、不能实现日历控件和TextBox的智能绑定。

②、选定日期后无法自动隐藏。

③、选定日期后需要刷新页面。

语法如下：

<cc1:CalendarExtender ID="CalendarExtender1"runat="server"

TargetControlID="txtTransDate" Format="yyyy-MM-dd"

CssClass="cssCdar" PopupButtonID="imgBtnDate">

</cc1:CalendarExtender>

具体属性含义如下：

n TargetControlID:与日历绑定的TextBox控件ID。

n Format:日历显示的日期格式。

n CssClass:日历的样式。

n PopupButtonID:通过选择按钮，方便单击按钮时弹出日历

示例效果如图4-3所示：

图4-3：CalendarExtender控件示例

通过案例，我们会看到，CalendarExtender控件，已经智能的绑定到TextBox上了，客户端代码不在此赘述。

4.3 CollapsiblePanel控件

CollapsiblePanelExtender控件可以把一个控件折叠到另一个控件中。使用两个Panel服务器控件时，可以提供一种很好的方式，控制Asp.Net页面上的区域问题。

常用属性如下表所示：

属性	描述
TargetControlID	被显示或隐藏的Panel的ID
CollapsedSize	折叠后的尺寸
ExpandedSize	展开后的尺寸
Collapsed	默认Panel是否处于折叠状态
ExpandControlID	激发伸展效果的控件ID
CollapseControlID	激发折叠效果的控件ID
AutoCollapse	失去焦点时是否自动折叠
AutoExpand	失去焦点时是否自动展开
ScrollContents	Panel内是否显示滚动条
CollapsedText	折叠后显示的文本信息
ExpandedText	展开后显示的文本信息
ImageControldID	使用图片实现折叠和展示时图片的ID
ExpandedImage	实现展开时使用的图片路径
CollapsedImage	实现折叠时使用的图片路径
ExpandDirection	展开方向，有水平和垂直两种。

图4-6：单击过第一章之后

CollapsiblePanelExtender控件还可以实现细调展开和折叠。比如，在上述案例基础上，设计一个标签用来控制Panel2的展开和折叠,用户单击Label控件，不仅Panel2会展开和折叠，Label标签也会随之改变，这样程序更为人性化。代码段如程序清单4-3所示：

程序清单4-3：使用标签展开和折叠Panel控件

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"runat="server"

TargetControlID="Panel2" Collapsed=true ExpandControlID="Label1"

CollapseControlID="Label1" CollapsedText="展开" ExpandedText="折叠">

</cc1:CollapsiblePanelExtender>

4.4 Tabs控件

4.4.1 Tabs控件简介

Tabs是选项卡控件，可以在一个页面上显示多个选项卡。实现的效果如图4-7所示：

图4-7:Tabls控件实现的选项卡效果

语法格式如下：

<cc1:TabContainer ID=＂TabContainer1＂ runat=＂server＂ActiveTabIndex=＂2＂ Width=＂500px＂>

<cc1:TabPanel runat=server HeaderText="注册用户" ID="TabPanel1">

</cc1:TabPanel>

<cc1:TabPanel runat=server HeaderText="用户管理" ID="TabPanel2">

</cc1:TabPanel>

<cc1:TabPanel runat=server HeaderText="部门人员" ID="TabPanel3">

</cc1:TabPanel>

</cc1:TabContainer>

其中：

n ActiveTabIndex:默认显示的选项卡索引。

n …：该部分只能放TabPanel控件（选项卡面板）。

n HeaderText:表示选项卡的标题。

n HeaderTemplate:选项卡的标题模板。

n ContentTemplate:选项卡的内容模板，和DataList控件的模板类似，可以放置任何控件和内容。

4.4.2 Tabs控件的使用

在Web页面上添加一个ScriptManager和一个TabContainer控件，修改TabContainer代码。可以在<ContentTemplate></ContentTemplate>内放置控件或代码。

4.5 ModalPopup控件

4.4.1 ModalPopup控件简介

正如它的名字所示，ModalPopup控件显示模式弹出窗口。所谓模式弹出窗口，即当一个模式弹出窗口弹出时，再关闭它之前，无法将焦点转移到其他窗口。图图4-8所示，另存为对话框就是典型的模式窗口。

在互联网上，模式窗口同样有着广泛的应用。例如，我们在没有登录的情况下浏览论坛，如果想要回帖，常常会遇到“用户需要先登录”的提示窗口。ModalPopup控件能够实现在Web上弹出模式窗口的功能。

ModalPopup控件的使用语法格式如下：

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

TargetControlID="btnSelect" PopupControlID="Panel" DropShadow=true OkControlID="btnOK" CancelControldID="btnCancel"Drag="true"PopupDragHandleControlID="Panel2"BackgroundCssClass="bgcss"

X="250" Y="250">

</cc1:ModalPopupExtender>

其中，具体ModalPopupExtender 的属性和方法如下表所示：

属性	描述
TargetControlID	用来控制弹出窗口的控件ID
PopupControlID	要弹出的控件ID
DropShadow	弹出的控件是否有阴影效果
OkCantrolID	确定按钮的ID
CancelControlID	取消按钮的ID
Drag	是否允许拖曳
PopupDragHandleControlID	允许拖曳的控件ID
BackgroundCssClass	弹出控件后其他部分的样式
X	水平坐标，距页面左边缘的距离
Y	垂直坐标，距页面上边缘的距离
方法	描述
Show()	模式窗口的显示效果
Hide()	模式窗口的隐藏效果

案例代码如程序清单4-4所示：

程序清单4-4：利用ModalpopupExtender来实现弹出窗口,页面颜色改变

<%@ Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>

<%@ Register Assembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>

<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>模态窗口登录案例</title>

.content{background-color:gray;filter:alpha(opacity=50);opacity:0.5;}

.popup{border:solid;background-color:yellow;width:200px;}

</style>

</head>

<body>

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

<asp:Panel ID="ContentPanel1"runat="server"Width="713px">

<p>

<span style="color: #717171">五百年前，一个至死不渝的爱情故事，发生在这片荒漠之中，紫霞仙子与至尊宝的爱情，就像《罗密欧与朱丽叶》一样经典。直至许多年后的今天，又一个惊天动地、波澜壮阔、激情感人的爱情故事，将再次发生在这片荒漠之中……<br />

</span><span style="color: #717171">湛蓝的天空中漂浮着朵朵白云，还隐约泛着一片彩</span></p>

</asp:Panel>

<div>

<asp:Panel ID="Panel1" runat="server" Height="89px" Width="220px" CssClass="popup">

用户：<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox><br />

密码：<asp:TextBox ID="TextBox2"runat="server"></asp:TextBox><br />

<asp:Button ID="btnOk" runat="server" Text="登录" Width="101px" />

<asp:Button ID="btnCancel" runat="server" Text="取消" Width="98px" /></asp:Panel>

<br />

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" Width="64px">我也要读</asp:HyperLink>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"PopupControlID="Panel1"TargetControlID="HyperLink1"

OkControlID="btnOk" BackgroundCssClass="content" CancelControlID="btnCancel">

</cc1:ModalPopupExtender>

</div>

</form>

</body>

</html>

程序运行效果如图4-9所示，

当单击我也要读的时候，会出现如图4-10所示，出来ModalpopupExtender的模式窗口的提示,方便用户登录或取消。

4.6 Rating控件

我们在浏览网站的时候，经常看到评价打分功能，传统的实现方式都是输入或选择数字等，现在Asp.Net为我们提供了一个Rating控件，它用来实现登记效果非常方便。

语法格式如下：

<cc1:Rating ID="Rating1" runat="server" AutoPostBack="True" Height="22px"

StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar"

EmptyStarCssClass="emptyRatingStar">

</cc1:Rating>

具体属性为：

n CurrentRating：当前默认的等级。

n MaxRating：最大等级。

n StarCssClass：等级星的样式。

n EmptyStarCssClass：未被选中的等级星的显示样式。

n FilledStarCssClass：选中的等级星的显示样式。

n WatingStarCssClass：更改等级星选中状态时的显示样式。

n OnChanged：等级变化时触发的事件。

运行效果如图 4-11 所示：

这里Rating控件使用很多CSS类定义它在各种状态的外观和行为。除了CSS类属性（StarCssClass、WaitingStarCssClass、FilledStarCssClass和EmptyCssClass）之外，还可以知道等级对齐、等级项数（默认为5）、宽度、当前等级等。

如果Rating投票要和数据库关联，可以设计表如下所示：

Id	BookId	Rating	Comment
1	3701	4	作者的Blog早已体现出深厚实力
2	2809	2	预订了一本，很期待~~

读者可以根据数据库，修改CurrentRating的值，从而显示不同等级的书籍。

4.6 AutoCompleteExtender控件

终端用户在文本框中输入搜索关键字后， AutoCompleteExtender 控件可以帮助找到他们需要的信息。与 GoogleSuggest 产品一样，一旦开始在文本框中输入字符，就会从数据存储中获得匹配所输入内容的结果。

为了完成类似的任务，可以创建一个仅包含ScriptManager控件、AutoCompleteExtender控件和文本框控件的新页面。

语法如下：

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"TargetControlID="txtKeyWord"ServiceMethod="GetKeyWords"ServicePath=""MinimumPrefixLength="1"EnableCaching=trueCompletionSetCount="10">

</cc1:AutoCompleteExtender>

具体属性为：

n TargetControlID：要实现自动完成功能的控件ID。

n ServicePath：Web Service的路径。

n ServiceMethod：要使用的Web Service的方法。

n MinimumprefixLength：用户输入多少个字母才出现提示。

n EnableCaching：是否启用缓存。

n CompletionSetCount：提示数据的行数

4.6.1：创建数据表

这样，我们可以用来在自己的项目中实现用关键字搜索功能，比如数据库表SearchKeywords的数据信息如图4-13所示，我们下面只能提示的功能。

4.6.2：创建WebService

在项目中新建WebService文件夹，添加一个Web Service文件,命名为KeyWordsWebService.asmx，文件的后台隐藏代码如程序清单4-5所示：

程序清单4-5 KeyWordsWebService.asmx

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Data;

using System.Collections.Generic;

using System.Data.SqlClient;

///<summary>

///利用WebService来实现关键字职能提示功能。

///</summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService()]

public class KeyWordsWebService : System.Web.Services.WebService {

publicKeyWordsWebService () {

//如果使用设计的组件，请取消注释以下行

//InitializeComponent();

}

[WebMethod]

publicstring[] GetKeyWords(stringprefixText,int count)

{

//根据关键字和现实行数，返回查询的结果。

stringconStr = "server=.;database=BookShop;uid=sa;pwd=123456";

stringcmdStr = "Select KeyWord from SearchKeyWordswhere KeyWord like'" + prefixText + "%'";

using(SqlConnection conn = newSqlConnection(conStr))

{

SqlCommandcomm = new SqlCommand(cmdStr,conn);

conn.Open();

SqlDataReadersdr = null;

List<string> results = newList<string>(count);

sdr =comm.ExecuteReader(CommandBehavior.CloseConnection);

while(sdr.Read())

{

results.Add(sdr["KeyWord"].ToString());

}

returnresults.ToArray();

}

其中，需要说明的是：

n [System.Web.Script.Services.ScriptService()]是Web Service专门为AJAX订制的特性。

在Asp.Net AJAX中调用Web Service时必须加此特性。

n 要调用的Web Service方法的两个参数名称和类型是固定的，返回类型必须是string[]类型。

由于WebService的SOAP协议对于泛型序列化的支持不够好，客户端只能默认处理简单的泛型，如“List<int>”，当泛型比较复杂时，如“List<string>”，处理时经常转换为“string[]”。

程序运行效果如图4-14所示，在文本框输入值，会实现类似googleSuggest的效果。

安全警告：防止SQL注入。加入在查询字符串中后面加上’ Or 2>1,整个Sql语句看上去将会是SelectKeyWord from SearchKeyWords where KeyWord like ‘’Or2>1%’

这将返回整个表的前10条记录，而不是匹配一些特殊字母的前10个记录。除了这些，还有更危险的利用办法。可以先用过滤检查prefixText,在发现任何不被允许的字符时退出。

@ 本章总结

1. Accordion控件用来实现菜单折叠效果，可以用来生成静态和动态菜单。

2. Calendar控件用来实现与文本框的智能绑定。

3. CollapsiblePanel控件用来实现面板折叠效果。

4. Tabs控件用来做简单选项卡。用ActiveTabIndex属性来设置默认选项的索引，主要通过添加TabPanel实现。

5. ModalPopup控件用来实现弹出式模式窗口。

6. Rating控件用来实现等级效果。

7. AutoCompleteExtender用来实现自动搜索完成功能。

& 课后练习

1. 以下不属于Accordion控件属性或模板的是（）

A. Panes

B. HeaderTemplate

C. ContentTemplate

D. ImageControlID

2. 以下关于Accordion控件的描述错误的是（）

A. 可以用来实现菜单折叠效果

B. 可以和数据库绑定，动态生成菜单

C. 可以同时展开多个AccordionPane面板

D. 一个Accordion控件可以包括多个AccordionPane控件

3. 以下关于CollapsiblePanel控件不正确的是（）

A. TargetControlID表示要实现折叠效果的控件ID

B. ExpandControlID表示激发展开效果时控件的ID

C. CollapseControlID表示激发折叠效果时控件的ID

D. ImageControlID表示要实现折叠效果的控件ID

4. 以下不属于Calendar控件与传统的Asp.Net 日历控件相比的优势的是（）

A. 能实现日历控件和TextBox的智能绑定

B. 可以设置任意显示格式，时间显示详细到秒，甚至毫秒

C. 选定日期后可以自动隐藏

D. 选定日期后不需要刷心页面

5. 以下关于Tabs控件描述错误的是（）

A. 可以用来实现简单选项卡功能

B. ActiveTabIndex属性设置为1，表示默认选项卡式第一个选项

C. TabPanel控件必须出现在TabContainer中

D. 每个TabPanel控件有一个HeaderText

6. 以下关于在Asp.Net AJAX页面中调用Web Service的描述正确的是（）

A. 只能调用本地Web Service，不能调用异地Web Service

B. 必须为被调用方法添加[System.Web.Script.Services.ScriptService()]特性

C. 在使用Asp.Net AJAX模板的项目中调用本项目的Web Service，也必须添加Web引用

D. Web Service不能在使用Asp.Net AJAX模板的项目中使用

7. 以下关于AutoComplete控件的描述错误的是（）

A. ServicePath属性表示要调用Web Service路径

B. ServiceMethod属性指定的方法，其参数和返回类型是固定的。

C. MinimumPrefixLength属性表示给出提示的数据行数。

它可以用来实现面板折叠效果。