现在的位置: 首页 > 综合 > 正文

ASP.NET AJAX(控件扩展器、工具包详述)

2013年06月13日 ⁄ 综合 ⁄ 共 6832字 ⁄ 字号 评论关闭
文章目录

       如何构建自定义的 ASP.NET 控件,用以呈现使用 ASP.NET AJAX 客户端库的客户端 JavaScript 代码?

       实际上,UpdatePanel、UpdateProgress、Timer 正是这么做的。要实现这一设计很简单,只要添加向页面的 ScriptManager 注册自定义 JavaScript 的代码,然后呈现创建控件需要的基本 HTML 和 JavaScript 即可

       这样的方式可行,但通常冗长乏味且具有不必要的限制性。问题在于 ASP.NET AJAX 并不是仅仅只允许设计新的控件类型,它还允许设计可应用到无数控件上的效果。这些多目的的效果(如自动完成、拖放、动画、尺寸调整、展开和收叠、编辑等)代表了使用 ASP.NET AJAX 的最常见方式。

       因此,ASP.NET AJAX 鼓励使用另一种模型:控件扩展器。使用它为现有的控件增加 ASP.NET AJAX 特性,可以在不修改当前页面使用的控件集合的情况下为它增加 ASP.NET AJAX 效果

       ASP.NET 没有提供任何控件扩展器。不过,ASP.NET AJAX 控件工具包提供了。该工具包是大量控件和控件扩展器的集合,它们使用 ASP.NET AJAX 特性,但可以像普通的服务器控件那样被拖放到 Web 页面上

       ASP.NET AJAX 工具包最值得关注的一点是它以协作、开源模式开发,允许社区参与。ASP.NET AJAX 控件工具包完全免费并提供全部源代码,无论对那些希望为页面增加 Ajax 效果的开发人员还是希望构建自己的控件扩展器的开发人员而言,它都是很好的工具。

 

安装 ASP.NET AJAX 控件工具包

       要获取 ASP.NET AJAX 控件工具包,可以访问下面地址:

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

       几个下载选项的区别在于 .NET 版本号以及是否要包含源代码。我这里下载的是针对 .NET 4 设计且不含源代码的工具包。

       解压文件后,可以找到一个主要的程序集 AjaxControlToolkit.dll 以及一系列支持不同文化及本地化的较小的卫星程序集。另外,还可以看到一个 AjaxControlToolkitSampleSite.zip 文件,它包含大量示例网站(演示 ASP.NET Ajax Control Toolkit 所有的元素),以及包含了安装说明的 ReadMe.html 文件。

       如果要使用 ASP.NET AJAX 控件工具包开发,可直接将主程序集以及文化特定的子文件夹复制到 Web 应用程序的 Bin 目录。

       但把这些新组件加入到 VS 的工具箱则更好,下面是具体步骤:

  1. 确保控件工具包文件夹位于硬盘的某个永久位置。
  2. 在工具箱上为控件新建一个页签。(右击工具箱 -> 添加新页签 -> 输入如 "AJAX Toolkit”)
  3. 右击新页签某个空白区域,选择 “选择项目”
  4. 在选择工具箱对话框中,单击“浏览”找到控件工具包程序集

       现在可以在任意网站的任意页面里使用 ASP.NET AJAX 控件工具包里的组件了。第一次拖动组件时,VS 会把 AjaxControlToolkit.dll 程序集和本地化程序集一起复制到 Web 应用程序的 Bin 目录。

 

AutoCompleteExtender

       ASP.NET AJAX 控件工具包有很多有用的控件。这里简单的介绍其中的 AutoCompleteExtender 。

       ASP.NET 团队在 ASP.NET AJAX 变量开发中一直努力避免开发和现有控件重复的功能。例如,创建一个 AutoCompleteTextBox 服务器控件似乎很具有吸引力,但这样的实现可能会带来几个问题:

  • 必须把现有的 TextBox 控件替换为 AutoCompleteTextBox 控件才能使用这一功能,这是对现有页面的重大变化,且可能带来破坏
  • 如果已经扩展了 TextBox 控件或者使用了扩展了它的第三方控件,那么将不得不放弃这些功能
  • 如果有另一个基于 TextBox 的派生类,比如忽略了非数值按键的 NumericOnlyTextBox 实现的 ASP.NET AJAX 特性,你将不能同时使用这两个特性

       更好的解决方案是能够把动态特性添加到网站而不需要替换已在使用的控件。ASP.NET AJAX 利用另一个新的概念使之成为可能:控件扩展器。

 

       创建这个示例非常简单,一个自动完成的文本框提示功能,效果如下图:

image

 

       首先,将 ScriptManager 添加到页面。然后,添加一个普通的文本框:

Contact Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

       其次,添加一个 AutoCompleteExtender 控件。它扩展文本框使之具有自动完成的功能。技巧是建议列表从一个 Web 方法获取,而你需要创建这个方法。假设已经创建了一个叫做 AutoCompleteService 的Web 服务,其中有一个 GetNames()方法,它提供建议列表:

[WebService]

[System.Web.Script.Services.ScriptService]

public class AutoCompleteService : System.Web.Services.WebService

{

    [WebMethod]

    public List<string> GetNames(string prefixText, int count)

    { ... }

}

       下面是调用这个服务需要的标签:

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtName"

    ServicePath="~/AutoCompleteService.asmx" ServiceMethod="GetNames" MinimumPrefixLength="1">

</asp:AutoCompleteExtender>

       假定在 Web 表单顶部注册了命名空间(拖动组件至页面会自动注册):

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

       AutoCompleteExtender 使用 TargetControlID 属性关联相应的服务器控件。使用 ServicePathServiceMethod 属性指定服务和具体方法,使用 MinimumPrefixLength 属性限定等待用户输入特定数目的字母,然后才提供建议列表。如果列表很长,以至单个字符不能提供有效建议时,这个属性很有用。

 

       代码获取可能建议的完整列表,并缓存1小时以保证速度。下面是 Web 方法的完整代码:

[WebMethod]

public List<string> GetNames(string prefixText, int count)

{

    if (Context.Cache["NameList"] == null)

    {

        Context.Cache.Insert("NameList", QueryNames(), null,

            DateTime.Now.AddMinutes(60), TimeSpan.Zero);

    }

 

    List<string> names = Context.Cache["NameList"] as List<string>;

    int index = -1;

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

    {

        if (names[i].StartsWith(prefixText))

        {

            index = i;

            break;

        }

 

        // Give up if the search has passed to the next letter.

        // (This improves performance.)

        if (String.Compare(names[0], prefixText) == 1) // 序列中第一个字符串就已经大于用户输入

        {

            break;

        }

    }

 

    if (index == -1) // Give up if there isn't a match.

    {

        return new List<string>();

    }

 

    List<string> wordList = new List<string>();

    for (int i = index; i < (index + count); i++)

    {

        if (i > names.Count)

        {

            break;

        }

 

        if (!names[i].StartsWith(prefixText))

        {

            break;

        }

 

        wordList.Add(names[i]);

    }

 

    return wordList;

}

 

// Return a sorted NameList

public List<string> QueryNames()

{

    SqlConnection conn = new SqlConnection(

        WebConfigurationManager.ConnectionStrings["Northwind"].ConnectionString);

    SqlCommand cmd = new SqlCommand("select ContactName from Customers order by ContactName", conn);

    List<string> names = new List<string>();

    try

    {

        conn.Open();

        SqlDataReader reader = cmd.ExecuteReader();

        while (reader.Read())

        {

            names.Add(reader["ContactName"].ToString());

        }

        reader.Close();

    }

    catch (Exception ex)

    {

        throw new ApplicationException("Data execute error:" + ex.Message);

    }

    finally

    {

        conn.Close();

    }

    return names;

}

 

ASP.NET AJAX 控件工具包

       AutoCompleteExtender 只是 ASP.NET AJAX 控件工具包中众多控件中的一个。下面两张表详细列出了 ASP.NET AJAX 控件工具包中所有的控件扩展器和所有控件。

 

ASP.NET AJAX 控件工具包中的控件扩展器

AlwaysVisableControlExtender 能把控件固定在某一特定位置(如网页的左上角),即使用户滚动页面也是如此
AnimationExtender 强大而灵活的扩展器,可以单独或组合给大小调整、移动、淡出、颜色变化等添加动画
AutoCompleteExtender 根据用户的部分输入提供建议列表,列表内容完全由 Web 方法生成
CalendarExtender 显示一个弹出的日历,它可以被附加到文本框上,方便输入日期。用户选定某个日期后,该日期被插入到关联的控件中
CascadingDropDown 不必手工编码,就可以相应关联下拉列表
CollapsiblePanelExtender 展开或收叠页面上的面板。页面其余部分沿它们重新排列
ColorPickerExtender 显示一个弹出的颜色选择器,可以附加到文本框以方便选择颜色
ConfirmButtonExtender 截获 Button、LinkButton、ImageButton 控件的单击事件并显示一个确认消息。如果用户在确认框里选择取消操作,那么单击事件被取消
DragPanelExtender 使面板能够在页面上拖动
DropDownExtender 在鼠标移过的时候将几乎所有控件转变为下拉列表框内。比如,可以将它链接到一个 Label 控件。用户鼠标移动到它上面时,从列表中选择一个不同的条目(因此改变了标签中的文字),然后将鼠标移开(允许标签恢复到它本来的原始外观)
DropShadowExtender 为面板添加阴影效果。阴影可以是部分透明的。你可以控制其边界的大小弧度
DynamicPopulateExtender 用 Web 服务方法调用的结果替代某个控件的内容
FilteredTextBoxExtender 让你能够禁止输入某些字符到文本框。这意味着补充了验证,而不是代替它,因为恶意的用户可以篡改呈现的页面或禁用 JavaScript 对字符的过滤
HoverMenuExtender 这个扩展器能够在用户鼠标滑过控件时弹出内容
ListSearchExtender 让用户输入条目文本的前几个字母来搜索 ListBox 或 DropDownList 里面的内容。控件搜索条目并跳到匹配用户输入的第一个条目处
MaskedEditExtender 使用掩码限制用户能够输入文本框的内容。(掩码是一个定义固定长度文本模式的字符串,它提供提示字符帮助用户输入值。例如,电话号码掩码可能在文本框里显示(   )      -     。随着用户的输入,占位符被有效的数字字符取代,而非数字字符则被拒绝。)你可以结合 MaskedEditValidator 使用 MaskedEditExtender,确保用户不能篡改 js 代码并输入无效的值
ModalPopupExtender 让你能够创建模态对话框的效果,它可以把页面变暗、禁用控件并在最前面显示一个叠加面板
MultiHandleSliderExtender 能将一个TextBox 转化为一个滑动控件。这个滑动控件拥有超出标准 ASP.NET 服务器端等效控件的功能。最引人注目的是,它支持一个滑动轨道有多个锚点。这在使用滑动控件来标识一个值域时非常有用!
MutuallyExclusiveCheckBoxExtender 允许给多个 CheckBox 控件关联一个“键值”。当用户单击某个按这种方式扩展的复选框时,具有相同“键值”的复选框将自动取消或选中
NumericUpDownExtender 给文本框提供可配置的上下箭头按钮(在右边),这些按钮增大或减小文本框中的数值或日期
PagingBulletedListExtender 附加到一个 BulletedList 并让它能够支持客户端的分页功能,这样一个很长的列表可以分解为多个较小的区段
PasswordStrength 附加到文本框上,随着用户的输入,它评估文本框值的密钥强度,一般用作密码创建框的指导
PopupControlExtender 提供可显示在任意控件旁边的弹出内容
ResizableControlExtender 允许用户通过控件右下角可配置的手柄调整控件的大小
RoundedCornersExtender 围绕任意控件显示一个整洁、专业的外观
SliderExtender 把文本框转换为一个图形滑块,允许用户拖动轨道上的指针选择一个数值
SlideShowExtender 附加到一个 image 元素上,并让它显示一组图片。图片通过一个 Web 服务方法提供,幻灯片可以一直循环显示,也可以通过你创建的“播放”、“暂停”、“前进”、“后退”按钮控制
TextBoxWatermarkExtender 能够在 TextBox 控件为空时自动修改背景色并提供特定文字。例如,文本框可能包含写在淡蓝背景上的浅灰文字 EnterValue。光标进入文本框或在文本框中输入内容后,这些文字就会消失
ToggleButtonExtender 把普通的 ASP.NET 复选框变成图片复选框
UpdatePanelAnimationExtender 可以使用与 AnimationExtender 相同的动画。不过,它设计为配合 UpdatePanel 使用,并在更新进行时或面板被刷新时自动执行这些动画
ValidatorCalloutExtender 扩展 ASP.NET 验证控件的客户端逻辑,以便验证控件使用弹出验证提示指向含有非法输入的控件

 

ASP.NET AJAX 控件工具包中的控件

Accordion 这个控件堆叠多个内容面板,并允许用户每次只看到其中的一个。单击某个面板时,该面板展开,而其他面板收起(页头可见)。它的其他特性包括自动的淡入淡出效果以及对控件的大小进行限制(此时,如果控件的内容可见,较大的内容区域会出现滚动条)。
AsyncFileUpload 与 FileUpload Web 控件相似,但它异步执行工作,用户可以继续和页面交互(显然,页面回发或导航到新页面会中断异步文件的传输)。可以被配置为文件上传过程中显示其他控件。通常,第二个控件(通过 ThorbberID 属性)会显示一个简单的动画提示用户上传正在进行
ComboBox 这个控件受到了 Windows 组合列表框的启发,它提供一个下拉列表框并允许用户输入任意文本。

抱歉!评论已关闭.