周进度控制和Timepicker控制

分享于 

6分钟阅读

Web开发

  繁體

介绍

我使用 ASP.NET MVC编写了一个控件来显示和编辑周日程。 大部分逻辑是以为代价的JavaScript和收费的CSS,所以我认为它不仅可以有趣,而且可以。 NET开发人员= )。

这里控件允许你为一周中的每一天设置工作时间。
工作时间可以有 3个可能的值:

  • 一天不是工作日;
  • 五小时全天候工作,工作时间长;
  • 工作时间 work工作星和完成工作的时间。

工作时间"绕着时钟"和"工时工时"可以有分 break。 例如午休时间的休息时间为 12: 00至 13:。 你可以使用这里控件轻松地 register。 中断的次数是无限的。

你可以在没有任何问题的情况下更改这里逻辑: 代码很容易阅读,我添加了很多注释。

这里控件的主要功能如下:

  • 模型在服务器端从XML向/反序列化序列化/反序列化
  • 要验证 XML,有一个的XSD模式
  • 用于禁用控制( 只读模式)的JavaScript函数:
  • 用于验证控件的JavaScript函数;
  • 为控制数据获取JSON格式的一个JavaScript函数。
  • 控件继承 jQuery UI 样式,因此你可以轻松地在 jQuery UI 主题之间进行 switch ;
  • 方便的timePicker控制
  • 有一个单独的对话框来编辑中断。 如果一个用户不想确认她的更改,她可以按"取消"并且更改不会影响;
  • 用户在周一设置工作时间时,将自动应用到从星期二到星期五的天数。 这是有用的,因为在实际生活中,这些日常有相同的工作时间,节省用户的时间。

使用代码

代码用 ASP.NET MVC编写,所以它有三个主要部分: 模型,视图和控制器 https://www.codeproject.com/script/Forums/Images/smiley_wink.gif

你可以从我的网站下载一个示例项目:
http://supperslonic.com/WebControls/WeeklySchedule

型号

WeekModel 类描述每周调度的模型。 此类支持Xml序列化和反序列化。

项目包含用于验证XML的XSD架构。 此外,WeekModel已经有了一个实现的equility操作。

 public class HomeController : Controller
 {
 public ActionResult Index()
 {
//Create a weekly schedule from an example xml-file
 XmlDocument xmlDocument = new XmlDocument();
 xmlDocument.Load(Server.MapPath("~/WeeklyScheduleExample.xml"));
 WeekModel week = WeekModel.GetRecord(xmlDocument.OuterXml);
 return View(week);
 }
 [HttpPost]
 public JsonResult Save(WeekModel weekModel)
 {
 XmlDocument xmlDocument = new XmlDocument();
 xmlDocument.LoadXml(weekModel.ToString());
 xmlDocument.Save(Server.MapPath("~/WeeklyScheduleExample.xml"));
 return Json("Ok");
 }
 }

这个模型的结构非常简单。 类 WeekModel 在一周中的每一天都有一个 DayOfTheWeek 类实例: 星期一,星期二,星期三。

每个 DayOfTheWeek 类包含:

  • 用于标识工作日名称的DayOfWeek enum 值;
  • 在工作日中标识工作时间的WorkingTime enum 值;
  • 仅为工作时间"workhours"填充的WorkHours -class ;
  • 列出可以是空的或者有无限个中断次数的breaks列表。 对于工作时间,"已经关闭"是空的。


视图

控件由 3个显示模板和 1编辑器模板组成。

显示模板:

  • Schedule - 客户端代码调用的主模板。 显示整个模型并为timePicker控件生成 Html ;
  • WorkingTime - 一个模板,它在内部用来显示每一天的工作时间;
  • Breaks - 在内部使用的模板,用于显示分隔符列表并允许编辑这里列表。

编辑器模板:

  • Time - 为时间生成输入控件。

所有这些模板都非常简单和小。

对于客户端支持,有两个. js 文件和两个. css 文件:

  • schedule.js
  • timePicker.js
  • schedule.css
  • timePicker.css

控制器

这里控件没有控制器,但是有一个扩展到 HtmlHelper 类,以便在视图中最小化逻辑并提供测试覆盖率: WeeklyScheduleHtmlHelper 类。

如何使用

使用显示模板在你查看的任何位置生成每周计划的HTML:

@model WeeklyScheduleExample.Models.WeekModel<html><head><title>Weekly Schedule Example</title><linkhref="@Url.Content("~/Content/css/schedule.css")"rel="stylesheet"type="text/css"/><linkhref="@Url.Content("~/Content/css/timePicker.css")"rel="stylesheet"type="text/css"/><linkhref="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="http://code.jquery.com/jquery-2.0.3.min.js"></script><scripttype="text/javascript"src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script><scripttype="text/javascript"src="@Url.Content("~/Content/js/schedule.js")"></script><scripttype="text/javascript"src="@Url.Content("~/Content/js/timePicker.js")"></script></head><body><divclass="main">@Html.DisplayForModel("Schedule")</div></body></html>

相关文章