ASP.NET 4.0 时间选择器用户控件

下载 testTimePicker.zip - 1.23 MB

引言

此项目仅在 IE9, ASP.NET 4.0 上进行了测试。时间选择器用户控件是专门为内联网网站开发的，因此不需要跨浏览器兼容性。用户控件是用 VB.NET 编写的。

本文展示了如何创建一个自定义 Ajax 时间选择器扩展器用户控件并将其添加到 ASP.NET 应用程序中。我没有时间编写 Ajax TimeExtender，所以我决定使用 Ajax Popup Extender 和 Datalist 控件快速创建一个可重用的时间选择器。我基于 Farhan Ejaz 的文章创建了用户控件样式，该文章与我的 ASP.NET 4.0 Web 应用程序不兼容。我从 rperetz 的文章中获得了使用现有 Ajax 控件构建时间选择器的想法。

背景

由于我开始将现有项目升级到 Dotnet 4.0，并且发现我现有的控件与 Framework 4.0 不兼容，因此我需要一个快速的时间选择器控件。我惊讶地发现现有的 Ajax 控件工具包不包含时间选择器控件。在互联网上搜索并没有找到任何令人满意的时间选择器，所以我决定编写一个快速的自定义用户控件。不幸的是，vb.net 命名空间在添加用户控件时无法很好地配合使用，因此每次添加控件时都必须对 Inherits 行进行编辑。有一些很好的文章解释了如何将用户控件转换为服务器控件，但我没有时间研究这个选项。

使用代码

从本文顶部的链接下载项目文件。仅当您已经安装了 Visual Studio 2010 或更高版本时，才打开该项目。该项目是自包含的，包含运行演示所需的所有文件和图像。

如果仅将用户控件添加到现有项目，请记住将 ascx 页面中的 Inherits 行更改为项目的根命名空间。

将时间选择器控件添加到父页面

1. 将用户控件目录复制到 Web 项目中。
2. 编辑用户控件的 aspx 页面中的 Inherits 行，以指向项目的根命名空间。这通常是您的 VB.NET 项目的名称。
3. 编译项目。
4. 添加代码以在父页面上注册用户控件。
5. 将 Ajax 脚本管理器控件和 Update Panel 拖到父页面上。
6. 在父页面上添加一个文本框。
7. 使用标记前缀添加时间选择器扩展控件。如果正确添加到项目中，Intellisense 应该会显示该控件。
8. 将时间选择器的 TargetControlID 设置为文本框 ID。
9. 设置时间选择器控件的属性。
10. 编译并运行该项目。

<%@ Register Src="CustomControls/TimeExtender.ascx" TagName="TimeExtender" TagPrefix="cc1" %> 

<asp:textbox runat="server" id="txtStartTime" />

<ccl:timeextender runat="server" targetcontrolid="txtStartTime" id="TimeExtender1">

时间选择器控件 ASCX 源代码

用户控件主页通过简单地向 ascx 页面添加一个图像按钮、PopupControlExtender 和 Datalist 来创建。 Datalist 由一个包含时间的 dataview 填充。 MinuteInterval 属性允许时间选择器显示不同的时间间隔。 ShowAMandPM 属性允许 TimePicker 仅显示 AM 或 PM 或两者都显示。当前时间通过单击标题中的时间来选择。请注意，ASCX 页面上没有 Ajax 脚本管理器或 Update Panel，因为父页面处理这些功能。

<asp:ImageButton ID="ibtnShowPicker" 
    ImageUrl="btnTimeExtenderBlue.gif"
    OnClientClick="return false;"
    CssClass="btnTimeExtender_Style"
    runat="server" /> 

     <asp:DataList ID="datalistTimes"       
        RepeatDirection="Horizontal"
        RepeatColumns="4"
        OnItemDataBound="datalistTimes_OnItemDataBound"
        CssClass="Datalist_ControlStyle"
        HeaderStyle-CssClass="Datalist_HeaderStyle"
        ItemStyle-CssClass="Datalist_ItemStyle"
        runat="server" >

        <HeaderTemplate> 
            <div class="Datalist_HeaderLeft">      
            </div>
            <div class="Datalist_HeaderCenter">
            <asp:LinkButton ID="lbtnHeaderTime"
                OnCommand="lbtnHeaderTime_OnCommand"
                ToolTip="click to select current time"
                runat="server" />
            </div>
            <div class="Datalist_HeaderRight">
            <asp:LinkButton ID="lbtnHeaderAM" 
                Text="AM" 
                OnCommand="lbtnHeaderAM_OnCommand"  
                CommandArgument="am"
                runat="server" />
            <asp:LinkButton ID="lbtnHeaderPM" 
                Text="PM" 
                OnCommand="lbtnHeaderPM_OnCommand"
                CommandArgument="pm"
                runat="server" />
            </div>          
        </HeaderTemplate>
       
        <ItemTemplate>
        <asp:LinkButton ID="lbtnTime" 
            CommandName="second" 
            OnCommand="lbtnTime_Onclick" 
            CommandArgument='<%# Eval("Time") %>' 
            Text='<%# Eval("Time") %>'
            runat="server"/>         
        </ItemTemplate>
    </asp:DataList>  
   

时间选择器控件代码隐藏

代码隐藏通过将时间添加到 Dataset 并使用 Dataset 作为数据源来填充 Datalist 控件。 Linkbutton 控件显示时间，允许捕获点击事件。时间使用 Popup 控件的注释返回到父控件。 必须添加一个特殊的例程 (SetParentControlValue) 才能在显示时间按钮时填充父控件。文本框和标签是代码中设置的唯一控件。必须在代码隐藏中添加其他控件，以便它们可以与时间选择器一起使用。

结论

可以像时间选择器控件一样，从现有的 Ajax 控件创建其他 Ajax 控件。这种技术加快了开发速度，但在将自定义 控件添加到现有项目时会导致额外的工作。必须将自定义用户控件中的所有文件复制到项目中，并且根命名空间必须设置为项目的命名空间。