AJAX之四 Ajax控件工具集

[学习目标]@H_502_3@

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

F了解ScriptManager控件的使用@H_502_3@

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

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

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

【本章简介】@H_502_3@

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

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

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

4.1 Accordion控件

4.1.1 Accordion控件简介@H_502_3@

@H_502_3@

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

@H_502_3@

.@H_502_3@

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

@H_502_3@

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

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

4.1.2 Accordion控件的使用@H_502_3@

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

n实现静态菜单效果。@H_502_3@

n动态生成Accordion菜单。@H_502_3@

1.静态菜单效果@H_502_3@

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

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

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

@H_502_3@

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

@H_502_3@

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

<html xmlns="http://www.w3.org/1999/xhtml">@H_502_3@

<head runat="server">@H_502_3@

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

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

</style>@H_502_3@

</head>@H_502_3@

@H_502_3@

<body>@H_502_3@

<form id="form1" runat="server">@H_502_3@

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

<div style="text-align:center;width:18%">@H_502_3@

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

<Panes>@H_502_3@

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

<Header>人事管理</Header>@H_502_3@

<Content><br />@H_502_3@

<b>机构信息</b><br /><br />@H_502_3@

<b>用户信息</b><br /><br />@H_502_3@

</Content>@H_502_3@

</cc1:AccordionPane>@H_502_3@

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

<Header>日程管理</Header>@H_502_3@

<Content><br />@H_502_3@

<b>个人日程</b><br /><br />@H_502_3@

<b>部门日程</b><br /><br />@H_502_3@

</Content>@H_502_3@

</cc1:AccordionPane>@H_502_3@

</Panes>@H_502_3@

</cc1:Accordion>@H_502_3@

 </div>@H_502_3@

</form>@H_502_3@

</body>@H_502_3@

</html>@H_502_3@

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

@H_502_3@

2.Accordion动态菜单@H_502_3@

@H_502_3@

前面我们实现了静态菜单，在实际应用中是不能满足需要的。我们往往需要把数据库中的数据动态展示出来。@H_502_3@ 根据静态菜单，我们设计两个主从表如图4-2所示

@H_502_3@

protected void Page_Load(objectsender, EventArgs e)@H_502_3@

{@H_502_3@

if (!IsPostBack)@H_502_3@

{@H_502_3@

ShowInfo();@H_502_3@

}@H_502_3@

@H_502_3@

protected voidShowInfo()@H_502_3@

{ @H_502_3@

//得到所有分类信息@H_502_3@

using (sqlConnectionconn = new sqlConnection())@H_502_3@

{@H_502_3@

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

conn.Open();@H_502_3@

string selsql = "select* from Kind";@H_502_3@

sqlDataAdapter sda = newsqlDataAdapter(selsql,conn);@H_502_3@

DataTable dt = new DataTable();@H_502_3@

sda.Fill(dt);@H_502_3@

@H_502_3@

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

{ @H_502_3@

//实例化一个AccordionPane控件@H_502_3@

AccordionPaneap = new AccordionPane();@H_502_3@

Label lblKind = new Label();@H_502_3@

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

@H_502_3@

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

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

@H_502_3@

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

sda= new sqlDataAdapter(selsql2,conn);@H_502_3@

DataTable dt2 = new DataTable();@H_502_3@

sda.Fill(dt2);@H_502_3@

@H_502_3@

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

{ @H_502_3@

HyperLink hlinkBookMenu=newHyperLink();@H_502_3@

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

ap.ContentContainer.Controls.Add(hlinkBookMenu);@H_502_3@

@H_502_3@

}@H_502_3@

ap.HeaderContainer.Controls.Add(lblKind);@H_502_3@

@H_502_3@

Accordion1.Panes.Add(ap);@H_502_3@

}@H_502_3@

4.2 CalendarExtender控件

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

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

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

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

语法如下：@H_502_3@

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

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

CssClass="cssCdar" PopupButtonID="imgBtnDate">@H_502_3@

</cc1:CalendarExtender>@H_502_3@

具体属性含义如下：@H_502_3@

nTargetControlID:与日历绑定的TextBox控件ID。@H_502_3@

nFormat:日历显示的日期格式。@H_502_3@

nCssClass:日历的样式。@H_502_3@

nPopupButtonID:通过选择按钮，方便单击按钮时弹出日历@H_502_3@ 示例效果如图4-3所示：

@H_502_3@

图4-3：CalendarExtender控件示例@H_502_3@

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

4.3 CollapsiblePanel控件

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

常用属性如下表所示：@H_502_3@

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

@H_502_3@

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

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

@H_502_3@

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

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

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

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

</cc1:CollapsiblePanelExtender>@H_502_3@

@H_502_3@

4.4 Tabs控件

4.4.1 Tabs控件简介@H_502_3@

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

@H_502_3@

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

语法格式如下：@H_502_3@

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

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

</cc1:TabPanel>@H_502_3@

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

</cc1:TabPanel>@H_502_3@

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

</cc1:TabPanel>@H_502_3@

</cc1:TabContainer>@H_502_3@

其中：@H_502_3@

nActiveTabIndex:默认显示的选项卡索引。@H_502_3@

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

nHeaderText:表示选项卡的标题。@H_502_3@

nHeaderTemplate:选项卡的标题模板。@H_502_3@

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

4.4.2 Tabs控件的使用@H_502_3@

@H_502_3@

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

@H_502_3@

4.5 ModalPopup控件

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

@H_502_3@

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

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

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

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

X="250" Y="250">@H_502_3@

</cc1:ModalPopupExtender>@H_502_3@

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

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

@H_502_3@

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

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

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

@H_502_3@

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

@H_502_3@

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

<html xmlns="http://www.w3.org/1999/xhtml">@H_502_3@

<head runat="server">@H_502_3@

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

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

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

</style>@H_502_3@

</head>@H_502_3@

<body>@H_502_3@

<form id="form1" runat="server">@H_502_3@

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

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

<p>@H_502_3@

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

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

</asp:Panel>@H_502_3@

@H_502_3@

<div> @H_502_3@

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

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

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

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

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

<br />@H_502_3@

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

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

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

</cc1:ModalPopupExtender>@H_502_3@

</div>@H_502_3@

@H_502_3@

</form>@H_502_3@

</body>@H_502_3@

</html>@H_502_3@

@H_502_3@

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

@H_502_3@

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

@H_502_3@

4.6 Rating控件

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

语法格式如下：@H_502_3@

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

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

EmptyStarCssClass="emptyRatingStar">@H_502_3@

</cc1:Rating>@H_502_3@

具体属性为：@H_502_3@

nCurrentRating：当前默认的等级。@H_502_3@

nMaxRating：最大等级。@H_502_3@

nStarCssClass：等级星的样式。@H_502_3@

nEmptyStarCssClass：未被选中的等级星的显示样式。@H_502_3@

nFilledStarCssClass：选中的等级星的显示样式。@H_502_3@

nWatingStarCssClass：更改等级星选中状态时的显示样式。@H_502_3@

nOnChanged：等级变化时触发的事件。@H_502_3@ 运行效果如图 4-11 所示：

@H_502_3@

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

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

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

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

@H_502_3@

4.6AutoCompleteExtender控件

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

@H_502_3@

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

语法如下：@H_502_3@

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

</cc1:AutoCompleteExtender>@H_502_3@

具体属性为：@H_502_3@

nTargetControlID：要实现自动完成功能的控件ID。@H_502_3@

nServicePath：Web Service的路径。@H_502_3@

nServiceMethod：要使用的Web Service的方法。@H_502_3@

nMinimumprefixLength：用户输入多少个字母才出现提示。@H_502_3@

nEnableCaching：是否启用缓存。@H_502_3@

nCompletionSetCount：提示数据的行数@H_502_3@

4.6.1：创建数据表@H_502_3@

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

@H_502_3@

4.6.2：创建WebService@H_502_3@

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

@H_502_3@

程序清单4-5 KeyWordsWebService.asmx@H_502_3@

using System;@H_502_3@

using System.Web;@H_502_3@

using System.Collections;@H_502_3@

using System.Web.Services;@H_502_3@

using System.Web.Services.Protocols;@H_502_3@

using System.Data;@H_502_3@

using System.Collections.Generic;@H_502_3@

using System.Data.sqlClient;@H_502_3@

@H_502_3@

///<summary>@H_502_3@

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

///</summary>@H_502_3@

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

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]@H_502_3@

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

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

@H_502_3@

publicKeyWordsWebService () {@H_502_3@

@H_502_3@

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

//InitializeComponent();@H_502_3@

}@H_502_3@

@H_502_3@

[WebMethod]@H_502_3@

publicstring[] GetKeyWords(stringprefixText,int count)@H_502_3@

{@H_502_3@

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

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

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

using(sqlConnection conn = newsqlConnection(conStr))@H_502_3@

{@H_502_3@

sqlCommandcomm = new sqlCommand(cmdStr,conn);@H_502_3@

conn.Open();@H_502_3@

sqlDataReadersdr = null;@H_502_3@

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

sdr =comm.ExecuteReader(CommandBehavior.CloseConnection);@H_502_3@

@H_502_3@

while(sdr.Read())@H_502_3@

{@H_502_3@

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

}@H_502_3@

@H_502_3@

returnresults.ToArray();@H_502_3@

}@H_502_3@

@H_502_3@

} @H_502_3@

}@H_502_3@

@H_502_3@

其中，需要说明的是：@H_502_3@

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

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

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

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

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

@H_502_3@

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

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

@H_502_3@

@本章总结@H_502_3@

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

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

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

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

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

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

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

& 课后练习@H_502_3@

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

A.Panes@H_502_3@

B.HeaderTemplate@H_502_3@

C.ContentTemplate@H_502_3@

D.ImageControlID@H_502_3@

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

D.每个TabPanel控件有一个HeaderText@H_502_3@

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

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

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

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

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

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

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

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

C.MinimumPrefixLength属性表示给出提示的数据行数。@H_502_3@ 它可以用来实现面板折叠效果。

AJAX之四 Ajax控件工具集

4.1 Accordion控件

4.2 CalendarExtender控件

4.3 CollapsiblePanel控件

4.4 Tabs控件

4.5 ModalPopup控件

4.6 Rating控件

4.6AutoCompleteExtender控件

猜你在找的Ajax相关文章