帮酷LOGO
0 0 评论
文章标签:控制  日期时间  日期  WEB  Datetimepicker  web-control  

Sample Image - together.gif

DateTimePicker的日期选择示例

介绍

DateTimePicker Web控件与 Windows DateTimePicker 控件类似。 控件公开两个属性: SelectedDateFormatTypeSelectedDate 表示日期用户选择的日期,FormatType 表示日期字符串应该显示的格式。 演示所提供的演示显示了控件的用法。

背景

使用 DateTimePicker 之前,我想在开发 ASP.NET 复合服务器控件时,我将与你分享一些重要的问题:

需要的数据库:

这里复合控件派生自 System.Web.UI.WebControls.WebControl 大多数其他复合控件一样。 在开发复合控件时,通常不需要重写函数 CreateChildControls:

cal.VisibleMonthChanged +=new MonthChangedEventHandler(month_changed);
cal.SelectionChanged +=new System.EventHandler(date_changed);
Controls.Add(dArea);
Controls.Add(cal);base.CreateChildControls();

通常,复合控件使用的单个控件应添加到它的Controls Collection 中。 这有效于将这些组成控件放在控件树的自定义控件下,ASP.NET 框架为页生成。 控件树只不过是 ASP.NET 为页面创建的DOM结构的等效项。 图 below 展示了保存 DateTimePicker 控件的页面的控件树。

控制树结构

通过添加页上的跟踪来生成控件树信息,方法是添加 trace="true"" 对于 Page 指令,上面 图表表示页面上各个元素的层次结构。 向 Controls Collection 添加 TextBoxCalendar 控件使它们成为控件树层次结构中复合控件的子控件。 将组成控件添加到控件树中,确保单个控件的事件正确处理。 我们不必为他们的事件处理采取额外的措施。 我们所需要做的就是为需要捕获的事件添加事件处理程序。 对于你可能希望从子控件接收的事件,CreateChildControls 也是添加事件处理程序的最佳位置,如代码中所示。 但这些都有更多的东西。 什么时候执行 CreateChildControls的问题在成功的事件处理中非常重要。 这里是 INamingContainer的位置。

INamingContainer需要:

几乎所有复合控件都实现这里接口。 实现很简单,如下所示:

publicclass DateTimePicker : System.Web.UI.WebControls.WebControl.INamingContainer

INamingContainer 是一个 marker ( 空白) 接口,没有任何方法。 这里接口由控件实现时,ASP.NET 页框架在该控件下创建一个新的命名范围。 这确保子控件在控件的层次树中具有惟一的id。 这在控制树图中很明显。 控件实例的NAME 是 dtpickerTextBox的NAME 是 dtpicker_ctl0Calendar 控件的NAME 是 dtpicker_ctl0。 因为页面上没有它的他的控件可以使用 NAME dtpicker,所以我们可以确保 TextBoxCalendar的NAME 是唯一的。 当页面上有多个控件实例时,这里特性很重要。 需要注意的一点是,这种分层命名方案在事件路由中非常重要。 如果我们向子控件提供自己的to,那么我们将无法处理它们的事件。

e.g. cal.ID="mycalendar";

INamingContainer 还控制什么时候调用复合控件的CreateChildControls 方法。 考虑不使用 INamingContainer 接口实现的复合控件的ASP.NET 页面执行周期:

LoadPostData->OnLoad->RaisePostDataChanged->
Handle events->OnPrerender->CreateChildControls->
SaveViewState->Render->Dispose

现在,在实现 INamingContainer 时,将 上面 与以下内容进行比较:

OnInit-> LoadViewState->LoadPostData->RaisePostDataChanged->
CreateChildControls->OnLoad->Handle events->OnPrerender->
SaveViewState->Render->Dispose

ASP.NET 页执行周期表示到达IIS上的"aspx"页和页面呈现到浏览器之间的各种步骤。 每次请求页面时,这个循环会发生 换句话说,这会在第一次加载页面时发生。 在 上面 两个序列中,如果我们需要处理组成控件的事件,那么 INamingContainer 是很重要的。 在事件处理阶段的第一个序列中,子控件不是控件树的一部分,因这里只忽略该事件。 事件处理过程中,控制树中存在的控件是事件处理的候选者。因此,我们看到命名方案和控制树结构是事件处理和实现 INamingContainer 保证一切正常的中心。

需要 ViewState

正如我前面讨论的,每当页面请求到达服务器时,ASP.NET 页执行周期就会执行。 由于控件实例每次创建时都是从头创建的,因这里最后一次应保存页面的属性值。 这正是 ViewState 属性所要实现的。 ViewState 是一个字典对象,它存储 NAME 值对。 呈现页时,页面上每个控件的ViewState 均以一种形式呈现在页面上。 <输入 type=hidden> 你可以在浏览器的'查看源'中看到这里输入控件。 当页为 postback 时,输入字段中的数据用于重新创建 ViewState。 这在显示的页面执行周期中很明显。 在 OnInit 阶段,控制实例被创建( 构造),然后在 LoadViewState 阶段,每个控件都以隐藏控件形式保存。 因此 ViewState 帮助我们创建持久存储的效果。 我们只需要实现从 ViewState 返回值并将它的写入 ViewState的属性,如下所示:

publicstring SelectedDate
{get{return (string)ViewState["selecteddate"];
}set{
ViewState["selecteddate"]=value;
}
}
publicstring FormatType
{get{return (string)ViewState["format"];
}set{string val=(string)value;
ViewState["format"]=val.ToUpper();
}

SelectedDate 将以"mm/dd/yy". 格式输入 FormatType 可以是"长"或者"短"。 如果未指定 SelectedDate 或者以某种错误的格式给出,则当今日期为默认值。

DateTimePicker的工作

DateTimePicker 控件是一个复合控件,其中包含两个服务器端组件: TextBoxCalendar 控件。 它还包括一个客户端按钮控件。 文本框和按钮放在一个 table 中,而日历位于另一个中。 对另一个 table的需求来自于我们需要更改它的按钮点击和焦点更改的可以见性。 为了通过JavaScript实现这一点,我们需要通过一个ID来引用它。 无法将ID分配给 Calendar 控件,因为无法进行事件处理。 所以我们把它放在 table 中,改变外部 table的可见性。 所有控件同时呈现,但 Calendar ( 事实上外部的桌子)的可见性根据以下各项而有所不同:

  • 当加载包含 DateTimePicker的页面时,Calendar 是不可见的。
  • 当在由日期更改事件启动的postback 后加载页面时,Calendar 是不可以见的。
  • 当 postback 在由月更改事件启动的之后加载时,Calendar 是可见的。

当日历在页面加载时可见时,我们需要将它的z-Index 属性设置为一些高值,以实现 3D 效果( 日历将显示在它所重叠的控件上)。 但是,我们需要一个具有 OnLoad 事件的控件。 由于目前我们还没有使用这种控制,我只是生成一个虚拟 IFrame,并在 IFrame 事件的OnLoad 事件中进行内务处理。 还有一个输入隐藏控件,它指定 Calendar 是可视的还是其他的。 这里控件还有助于后退按钮处理。 我们不会查看JavaScript函数的细节。 你可以在 Render 方法中找到这些函数。 我已经对我最好的评论,并希望能够感觉到控件的工作方式。 既然我必须输出额外的控件及其支持JavaScript函数,那么现在你可能已经意识到为什么我在控件中重载了 Render 方法。 如果只在复合控件中呈现子服务器控件,则不需要呈现方法。 在这种情况下要记住的一点是,页面上可以有一个控件的多个实例。 因此,在 Render 方法中创建的HTML组件名称应该是唯一的:

通过将 this.UniqueID 附加到函数和组件名来生成名称,这是。 这里就是这样做的:

string uniqueID=this.UniqueID;string spanID="main"+uniqueID;string btnID=uniqueID+"btn";string tdID=uniqueID+"td;
string hidID=uniqueID+"_a1;

this.UniqueID 表示控件在页面中所给的NAME。 由于没有两个控件可以具有相同的NAME 组件,因此名称必须是唯一的。

实现设计时间支持

实现设计时支持涉及编写重写类的新类 System.ComponentModel.Design.ControlDesigner

需要重写的成员包括 GetDesignTimeHtmlAllowResize。 类实现的某些部分如下所示:

publicclass MyDesigner:ControlDesigner
{
 string width;
 publicoverridebool AllowResize
 {
 get {
 returntrue;
 }
 }
 publicoverridestring GetDesignTimeHtml()
 {
 string designTimeHtml;
 DateTimePicker controlDesigned=(DateTimePicker)this.Component;
 string dateDesignTime=controlDesigned.SelectedDate;
 string format=controlDesigned.FormatType;
 //some more. . .
 }

这是设计器调用的函数,用于获取表示设计视图中控件的"html"。 当控件放置在设计视图的页上,并且每次移动控件或者调整它的大小时调用这里函数。 设计器为从函数返回的HTML生成可视窗体。 component 属性返回对正在设计的控件实例的引用。 可能有一些属性,我们可能需要在设计时呈现这些属性。 这些值可以由 component 属性所指向的实例获得。

AllowResize 方法只返回 true 如果控件支持调整大小。 为了通知设计器 MyDesigner 是这里控件的设计器类,只需将以下属性添加到 DateTimePicker 类:

[Designer("DTPicker.MyDesigner")]publicclass DateTimePicker :

实现智能感知支持

在没有设计视图的情况下,of支持在创建一个aspx页时使用,换句话说,正在输入. aspx 页面的整个内容。

图 below 说明了对此控件的智能感知支持:

and支持是通过编写一个模式文件来定义控件可以拥有的属性和结束标记的各种元素。 ( 这里没有元素)。 我不会详细介绍编写模式文件的细节。 你可以在网上找到足够的样本。 唯一要记住的是,模式中公开的targetNamespace 应该与控件的名称空间相同。

DLL中的命名空间和架构文件的targetNamespace 都是 dtpicker。 这里控件的架构文件在下载部分中提供。

下一步是将架构文件复制到文件夹中:

C:Program FilesMicrosoft Visual Studio. NET 2003Common7Packagesschemasxml.

这是你所有服务器控件的架构所在的地方。

关于样本

下载中的DateTimePickerControl 代码是控件的项目文件夹。 下载后,编译项目以生成 DateTimePicker DLL。 如果要从设计视图中使用控件,只需将DLL添加到工具箱中。 属性 SelectedDateFormatType 可以从属性窗口中设置。

如果不使用设计视图,则在 ASP.NET 项目中添加对 DateTimePicker DLL的引用。 现在,添加以下内容 Register 指令。

<%@RegisterTagPrefix="dtp"Namespace="DTPicker"Assembly="DTPicker"%>

当在设计视图中添加控件的第一个实例时,该指令会自动添加到页中。 TagPrefix 由设计者生成的这个指令将是一些值,如"cc1","cc2"等。

控件的NAME 是 DateTimePicker,因此下面的标记表示我们的控件。

<dtp:DateTimePicker>

在设计视图中,你可能有 NAME <cc1:DateTimePicker> 或者类似于 TagPrefix

实现智能感知支持涉及将以下属性添加到控件的<HTML> 标记的页面。

<HTMLxmlns:dtp="DTPicker">

上面 行假定控件的TagPrefixdtp。 如果 TagPrefixcc1,则 HTML 标记将更改为:

<HTMLxmlns:cc1="DTPicker">

dtpicker 是架构文件的targetNamespace

下载部分提供了一个示例aspx页和代码页,作为控件使用的例子。



文章标签:WEB  控制  日期  web-control  日期时间  Datetimepicker  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语