在现代的工作环境中，合理安排工作时间是提高效率和员工满意度的关键。本文将介绍一个周工作计划控制的实现，它允许用户设置每周每天的工作时间。这个控制不仅可以用于.NET开发者，对于任何需要在Web应用中实现类似功能的开发者都是有价值的。 控制允许设置三种可能的工作状态：休息日、全天工作和指定工作小时。全天工作意味着一天24小时都在工作，而指定工作小时则允许用户设置具体的开始和结束时间。此外，还可以为工作小时设置休息时间，例如午餐休息时间从12:00到13:00。 用户可以轻松地通过这个控制添加休息时间，而且可以设置无限数量的休息。代码易于阅读，并且添加了大量的注释，使得逻辑可以轻松更改。 控制的主要特点包括： - 模型在服务器端序列化/反序列化为XML； - 有一个XSD模式来验证XML； - JavaScript函数来禁用控制（只读模式）； - JavaScript函数来验证控制； - JavaScript函数来获取控制数据的JSON格式； - 控制继承了jQuery UI样式，可以轻松切换jQuery UI主题； - 方便的时间选择器控制； - 有一个单独的对话框来编辑休息时间。如果用户不想确认她的更改，她可以按“取消”，更改将不会生效； - 当用户为周一设置工作时间时，它会自动应用到周二到周五。这在现实生活中非常有用，因为这些天通常有相同的工作时间，并且可以节省用户输入数据的时间。 代码是用ASP.Net MVC编写的，所以它有三个主要部分：模型、视图和控制器。 模型“WeekModel”类描述了周计划的模型。这个类支持XML序列化和反序列化。项目包含一个XSD模式来验证XML。此外，“WeekModel”已经实现了等值操作。 在控制器中，创建了一个示例XML文件的周计划。然后，通过视图返回这个模型。 视图控制由3个显示模板和1个编辑模板组成。显示模板包括： - 计划：主模板，由客户端代码调用。显示整个模型并为时间选择器控制生成Html； - 工作时间：内部使用的模板，用于显示每周每天的工作时间； - 休息：内部使用的模板，用于显示休息列表并允许编辑这个列表。 编辑模板： - 时间：生成时间输入控件。 所有这些模板都很简单且小巧。 对于客户端支持，有两个.js文件和两个.css文件： - schedule.js - timePicker.js - schedule.css - timePicker.css 虽然没有为这个控制创建控制器，但是有一个扩展到HtmlHelper类的扩展，以最小化视图中的逻辑并提供测试覆盖的能力。 要使用这个控制，只需在视图的任何地方生成周计划的HTML，使用显示模板即可。