时间选择器 Ajax 扩展控件

• 下载 ASP.NET 2.0 源代码文件 - 324.38 KB
• 下载 ASP.NET 3.5 源代码文件 - 158.53 KB

引言

时间选择器是一个 Ajax 扩展控件，可用于输入时间。它试图填补 Ajax Control Toolkit 中此类控件的空白。

扩展控件可用于增强 ASP.NET Web 服务器控件的客户端功能。您不能单独使用扩展控件。而是将它们附加到另一个 ASP.NET Web 服务器控件。通过将扩展控件的 TargetControlID 属性设置为要扩展的服务器控件的 ID 来将扩展控件附加到 Web 服务器控件。

库下载包含

• 帮助文件
• 二进制文件
• 带演示应用程序的源代码

本文包含 Framework 2.0 和 Framework 3.5 的源代码和二进制文件。

背景

在为一个项目工作时，我遇到了用户以类似日历控件选择日期的方式输入时间的需求。我知道 Microsoft 没有提供任何现成的此类控件，于是开始寻找其他方案。有一些不错的解决方案可用，但大多数都使用了客户端脚本（Jquery/JavaScript）。

这时我偶然发现了这两篇文章

• 颜色选择器
• Pain Controls 时间选择器

由于我对 ASP.NET 的经验很少，我决定将其作为一个学习机会，基于以上两个示例来构建这样一个控件。
我的目标是构建一个易于使用/配置、功能强大并且类似于 Ajax Control Toolkit 日历控件的控件。

Using the Code

如何使用该控件

1. 向控件程序集 Ajaxified.dll 添加引用。还将程序集添加到工具箱。TimePicker 控件将添加到工具箱。
2. 添加一个您需要扩展以充当时间选择器的文本框控件。从工具箱拖动 TimePicker 控件。它将在页面上添加以下页面指令和控件。

<%@ Register TagPrefix="Ajaxified" Assembly="Ajaxified" Namespace="Ajaxified" %>

最终的标记将是

<asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
<Ajaxified:TimePicker ID="TimePicker1" runat="server" TargetControlID="TextBox1">
</Ajaxified:TimePicker>	

Time Picker 控件公开以下属性

属性名称	类型	注释
CloseOnSelection	布尔值	指定选择特定时间后弹出窗口是否自动关闭。默认值为 false。
MinuteStep	Int32	指定两个值之间的分钟间隔。默认值为 15 分钟。
OnClientShowing	字符串	弹出窗口开始打开时的客户端事件。
OnClientShown	字符串	弹出窗口完全打开后的客户端事件。
OnClientHiding	字符串	弹出窗口开始关闭时的客户端事件。
OnClientHidden	字符串	弹出窗口完全关闭后的客户端事件。
OnClientSelectionChanged	字符串	完成时间选择时的客户端事件。
CssClass	字符串	控件的 CSS 类名。
HeaderCssClass	字符串	标题部分的 CSS 类名。
TitleCssClass	字符串	标题文本的 CSS 类名。
TabCssClass	字符串	上下午选项卡的 CSS 类名。
ItemCssClass	字符串	项单元格的 CSS 类名。
SelectedItemCssClass	字符串	选中项单元格的 CSS 类名。
SelectedTabCssClass	字符串	选中选项卡的 CSS 类名。

说明这些属性用法的标记

<asp:TextBox ID="TextBox2" runat="server" Text=""></asp:TextBox>
<Ajaxified:TimePicker runat="server" TargetControlID="TextBox2" 
   	  CssClass="timepicker"
           HeaderCssClass="header" 
           TitleCssClass="title" 
           ItemCssClass="item" 
           SelectedItemCssClass="selecteditem"
           TabCssClass="tab" 
           SelectedTabCssClass="selectedtab" 
           OnClientShowing="clientShowing"
           OnClientShown="clientShown" 
           OnClientHiding="clientHiding" 
           OnClientHidden="clientHidden"
           OnClientSelectionChanged="selectionChanged" 
           MinuteStep="10" 
           CloseOnSelection="true">
</Ajaxified:TimePicker>

以及处理事件

<script language="javascript" type="text/javascript">
    function clientShowing(sender) {
        //sender is reference to the timepicker object
    }
    function clientShown(sender) {
        //sender is reference to the timepicker object
    }
    function clientHiding(sender) {
        //sender is reference to the timepicker object
    }
    function clientHidden(sender) {
        //sender is reference to the timepicker object
    }
    function selectionChanged(sender) {
        alert(sender._selectedTime);
    }
</script>

样式

控件的基本布局定义如下，如图所示：

每个部分都有一个 CssName 属性用于处理控件的所有样式需求。如果用户未指定这些属性，控件将呈现为如图所示的默认样式。建议仅调整颜色和字体方案以保持布局一致性。演示应用程序包含一个样式表，说明如何覆盖控件的默认样式。

部分名称	CSS 属性名称
CssClass	整个控件
HeaderCssClass	标题
TitleCssClass	标题文本
TabCssClass	上午/下午选项卡
ItemCssClass	项单元格
SelectedItemCssClass	选中的项单元格
SelectedTabCssClass	选中的选项卡

验证

该控件还能够进行基本输入验证。

如果用户输入无效的时间格式，控件将提供视觉提示，如图所示，表明存在问题。

关注点

这次练习对我来说非常有价值，尤其是在客户端脚本方面。我学到的最重要的一点是如何以面向对象的方式使用 JavaScript。不过，在不同浏览器中测试时也遇到了一些小问题。

我在 IE8、Firefox 4 和 Chrome 上测试了该组件。在 IE7.0 中使用时存在布局问题，但这个练习的重点是创建一个扩展控件，而不是学习跨浏览器问题。所以我就留下了它。

参考文献

• 颜色选择器
• Pain Controls 时间选择器
• 花哨的时间选择器

感谢这些作者提供了如此好的示例。