自定义Ajax时间选择器控件的实现

在升级现有项目到.NET 4.0的过程中,发现现有的时间选择器控件与新框架不兼容。因此,决定开发一个时间选择器用户控件,专门用于内部网,因此不需要跨浏览器兼容性。这个用户控件是用VB.NET编写的。

本文将展示如何在ASP.NET应用程序中创建并添加自定义Ajax时间选择器扩展用户控件。由于时间紧迫,没有编写Ajax TimeExtender,而是决定使用Ajax Popup Extender和Datalist控件快速创建一个可重用的时间选择器。这个用户控件的风格是基于Farhan Ejaz的文章,但与ASP.NET 4.0 Web应用程序不兼容。从rperetz的文章中得到了使用现有Ajax控件构建时间选择器的灵感。

背景:需要一个快速的时间选择器控件,因为开始将现有项目升级到Dotnet 4.0,发现现有的控件与框架4.0不兼容。令惊讶的是,现有的Ajax Control Tool Kit并没有包含时间选择器控件。在网上搜索没有找到满意的时间选择器,所以决定编写一个快速的自定义用户控件。不幸的是,vb.net命名空间在添加用户控件时并不友好,每次添加控件时都必须修改Inherits行。有一些好的文章解释了如何将用户控件转换为服务器控件,但没有时间研究这个选项。

使用方法:从本文顶部的链接下载项目文件。只有在已经安装了Visual Studio 2010或更高版本的情况下才能打开项目。项目是自包含的,包含了运行演示所需的所有文件和图像。 如果只是将用户控件添加到现有项目中,请记得更改ascx页面中的Inherits行,使其指向项目的根命名空间。

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

ASP.NET代码: <%@ 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由包含时间的数据视图填充。MinuteInterval属性允许时间选择器显示不同的时间间隔。ShowAMandPM属性允许时间选择器仅显示AM或PM或两者都显示。通过点击标题中的时间来选择当前时间。请注意,ASCX页面上没有Ajax Script Manager或Update Panel,因为父页面处理这些功能。

ASP.NET代码: <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>

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485