[学习目标]
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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Accordion静态菜单效果</title> <style type="text/css"> .headerBg{cursor:hand;width:160px;height:30px;color:#ffffff;font-weight:bold;background-image:url(ajaxmenubg.gif);line=height:30px} </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1"runat="server"/> <div style="text-align:center;width:18%"> <cc1:Accordion ID="Accordion1"runat="server"HeaderCssClass="headerBg"> <Panes> <cc1:AccordionPane ID="AccordionPane1"runat="server"> <Header>人事管理</Header> <Content><br /> <b>机构信息</b><br /><br /> <b>用户信息</b><br /><br /> </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2"runat="server"> <Header>日程管理</Header> <Content><br /> <b>个人日程</b><br /><br /> <b>部门日程</b><br /><br /> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </div> </form> </body> </html>
设计效果如图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); } } }
