ASP.NET Outlook 像时间字段

分享于 

8分钟阅读

Web开发

  繁體

介绍

我公司的服务几乎完全是基于服务的,主要涉及到现场技术人员。 我们有一个内部的e 业务门户,用于跟踪呈现给客户端的服务。 我通常从技术人员那里收到的投诉对于进入服务电话来说是多么令人烦恼。 我给每个时间段都呈现三个落差: 每一个小时,分钟和 上午/下午。 我已经听到了足够的抱怨;是时候做一些事情了。 几乎所有我在"网络"上找到的时间选择器都基于相同的概念或者一个具有屏蔽输入的文本。 我发现这些都很烦人,因为从字段到字段的移动有时很繁琐,而输入常常太严重。

我最喜欢的Outlook 特性之一是在约会和任务中使用的时间选取器。 它是一个在失去焦点时应用逻辑的文本框。 它只需要你可以抛出的任何东西,并以格式计算时间( 例如 )。 3:45.我决定复制这个行为,并将它的包含在 ASP.NET 2.0 web控件中。 标准 TextBox 控件提供了 99%个我需要完成的操作,因这里我从这一个开始,并开始编码。

背景

确定该控件必须接受以下任何输入:

  • 3:45 PM
  • 1:45a
  • 230a
  • 545p
  • 1843
  • 23
  • 21:30

我尝试了两次才成功。 我首先尝试解析冒号位置的输入,分别读取每一个小时和分钟,然后搜索'a'或者'p'。 但是,当输入不完全按照预期的方式使用时,这样做是非常麻烦的。

通过将文本输入拆分为两个组件,我的final 实现将处理这里问题: 数字组件和文本组件。 我使用下面的客户端 JavaScript ( 完整的JavaScript源代码在 App_GlobalResourcesOutlookTimeField.txt 中找到。) 实现这里功能:

客户端实现

function UpdateTime(sender) 
{ 
. . .
 var numericPart = '';
 var characterPart = '';
 var i;
 var current;
 // Break the text input into numeric and // character parts for easier parsing for(i = 0; i <text.length; i++) 
 { 
 current = text.charAt(i); 
 if(IsNumeric(current))
 numericPart = numericPart + current;
 if(IsCharacter(current))
 characterPart = characterPart + current;
 }
. . .
}function IsNumeric(text) 
{
 var validChars = '0123456789';
 return (validChars.indexOf(text)> -1) 
}function IsCharacter(text) 
{
 var validChars = 
 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
 return (validChars.indexOf(text)> -1) 
}

拆分文本后,找出用户想要的是相对简单的。 首先,如果 characterPart 包含A 或者A,将它的视为( 除非小时大于 12 )。 否则,默认为 PM。第二,根据 numericPart 中输入的字符数,分割小时和分钟,根据以下算法:

...if(numericPart.length> = 4) 
{
 hour = numericPart.substring(0, 2);
 minute = numericPart.substring(2, 4);
} elseif(numericPart.length == 3) 
{ 
 hour = numericPart.substring(0, 1);
 minute = numericPart.substring(1, 3);
} elseif(numericPart.length == 2) 
{ 
 hour = numericPart.substring(0, 2);
 minute = '00'; 
} elseif(numericPart.length == 1) 
{ 
 hour = numericPart.substring(0, 1);
 minute = '00'; 
} else 
{ 
 // Just use the current hourvar d = new Date();
 hour = d.getHours(); 
 minute = '00';
} 
...

接下来,应用一些 24-hour 逻辑:

...if(hour> 12) 
{
 if(hour <= 24) 
 {
 hour -= 12;
 dayPart = 'PM';
 } 
 else 
 {
 // If the hour is still> 12 then the // user has inputed something that doesn't// exist, so just use current hour hour = (new Date()).getHours(); 
 if(hour> 12) 
 { 
 hour -= 12;
 dayPart = 'PM';
 } 
 else 
 { 
 dayPart = 'AM';
 }
 }
} if(hour == 0) 
{
 hour = 12;
 dayPart = 'AM';
}
...

客户端只需更新发送文本框的发送文本值: sender.value = hour + ':' + minute + ' ' + dayPart;

服务器端实现

服务器端代码真的不太多。 首先,重写 Render 方法,将 onBlur 事件添加到 TextBox:

protectedoverridevoid Render(HtmlTextWriter writer) 
{ 
 writer.AddAttribute(BLUR_ATTRIBUTE, "UpdateTime(this);");
 base.Render(writer);
}

其次,重写 OnPreRender 方法以插入客户端脚本:

protectedoverridevoid OnPreRender(EventArgs e) 
{
 base.OnPreRender(e);
 if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), 
 SCRIPT_KEY)) 
 {
 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
 SCRIPT_KEY, Resources.ControlResources.OutlookTimeField, true);
 }
}

最后,创建一个新属性,该属性返回具有相应时间的TimeSpan 结构:

public TimeSpan Time
{
 get 
 {
 if (string.IsNullOrEmpty(Text))
 return TimeSpan.Zero;
 elsereturn TimeSpanHelper.GetTimeSpan(Text);
 }
 set 
 { 
 Text = TimeSpanHelper.ConvertTimeSpanToString(value); 
 }
}

我不会进入转换到 TimeSpan 结构的代码,因为它是相对简单的。 你可以在 App_CodeTimeSpanHelper.cs 中找到我的实现。

使用代码

它实质上与使用任何它的他web控件相同,但是为了充分使用它:

...<%@RegisterTagPrefix="mbc"Namespace="Mbccs.WebControls"%>...<mbc:OutlookTimeFieldrunat="server"ID="startTime"AutoCompleteType="None"/>...

Points of Interest

  • OutlookTimeFieldAutoCompleteType 属性设置为 None,以防止任何浏览器。
  • 为了简单,我还没有在独立DLL中实现这里web控件,因为有大量的文章进行这种操作。
  • 如果你输入虚假数据( 控件不是格式的) 并尝试回发,我将故意抛出 FormatException ( 这不是 Bug )。 如果要阻止这里操作,应执行以下操作:
  • 使用在 App_CodeTimeSpanHelper.cs 中找到的正则表达式添加 RegularExpressionValidator
  • 捕获异常并应用一些自定义逻辑,可能使用默认日期或者当前日期。

确认

感谢 Alfredo Pinto提供到 VB.NET.的端口

历史记录

  • 11 2005年12月 --原始版本已经发布
  • 23 2005年12月 --文章更新
  • 9 2006年01月 --项目已经移动
  • 10 2007年10月 -- VB.Net 源下载和确认部分添加

asp  asp-net  时间  OUT  LIKE  字段  
相关文章