AJAX之四 Ajax控件工具集（下）-阿里云开发者社区

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">
<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>

具体属性为：

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	预订了一本，很期待~~

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”，当泛型比较复杂时，如“List”，处理时经常转换为“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属性表示给出提示的数据行数。

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

AJAX之四 Ajax控件工具集（下）

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

AJAX之四 Ajax控件工具集（下）

热门文章

最新文章

相关课程

相关电子书