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控件的属性非常多，这里只介绍其模板和主要的属性。
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); } } } 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> 具体属性含义如下： nTargetControlID:与日历绑定的TextBox控件ID。 nFormat:日历显示的日期格式。 nCssClass:日历的样式。 nPopupButtonID:通过选择按钮，方便单击按钮时弹出日历 示例效果如图4-3所示：
图4-3：CalendarExtender控件示例 通过案例，我们会看到，CalendarExtender控件，已经智能的绑定到TextBox上了，客户端代码不在此赘述。 4.3 CollapsiblePanel控件CollapsiblePanelExtender控件可以把一个控件折叠到另一个控件中。使用两个Panel服务器控件时，可以提供一种很好的方式，控制Asp.Net页面上的区域问题。 常用属性如下表所示：
图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> 其中： nActiveTabIndex:默认显示的选项卡索引。 n…：该部分只能放TabPanel控件（选项卡面板）。 nHeaderText:表示选项卡的标题。 nHeaderTemplate:选项卡的标题模板。 nContentTemplate:选项卡的内容模板，和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 的属性和方法如下表所示：
案例代码如程序清单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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>模态窗口登录案例</title> <style type="text/css"> .content{background-color:gray;filter:alpha(opacity=50);opacity:0.5;} .popup{border:solid;background-color:yellow;width:200px;} </style> </head> <body> <form id="form1" runat="server"> <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> 具体属性为： nCurrentRating：当前默认的等级。 nMaxRating：最大等级。 nStarCssClass：等级星的样式。 nEmptyStarCssClass：未被选中的等级星的显示样式。 nFilledStarCssClass：选中的等级星的显示样式。 nWatingStarCssClass：更改等级星选中状态时的显示样式。 nOnChanged：等级变化时触发的事件。 运行效果如图 4-11 所示：
这里Rating控件使用很多CSS类定义它在各种状态的外观和行为。除了CSS类属性（StarCssClass、WaitingStarCssClass、FilledStarCssClass和EmptyCssClass）之外，还可以知道等级对齐、等级项数（默认为5）、宽度、当前等级等。 如果Rating投票要和数据库关联，可以设计表如下所示：
读者可以根据数据库，修改CurrentRating的值，从而显示不同等级的书籍。
4.6AutoCompleteExtender控件终端用户在文本框中输入搜索关键字后， AutoCompleteExtender 控件可以帮助找到他们需要的信息。与 GoogleSuggest 产品一样，一旦开始在文本框中输入字符，就会从数据存储中获得匹配所输入内容的结果。
为了完成类似的任务，可以创建一个仅包含ScriptManager控件、AutoCompleteExtender控件和文本框控件的新页面。 语法如下： <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"TargetControlID="txtKeyWord"ServiceMethod="GetKeyWords"ServicePath=""MinimumPrefixLength="1"EnableCaching=trueCompletionSetCount="10"> </cc1:AutoCompleteExtender> 具体属性为： nTargetControlID：要实现自动完成功能的控件ID。 nServicePath：Web Service的路径。 nServiceMethod：要使用的Web Service的方法。 nMinimumprefixLength：用户输入多少个字母才出现提示。 nEnableCaching：是否启用缓存。 nCompletionSetCount：提示数据的行数 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属性表示给出提示的数据行数。 它可以用来实现面板折叠效果。（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |