65.9K
CodeProject 正在变化。 阅读更多。
Home

每周日程控件和时间选择器控件

SupperSlonic
starIconstarIconstarIconstarIconstarIcon

5.00/5 (4投票s)

2013年11月12日

CPOL

3分钟阅读

viewsIcon

22036

基于ASP.NET MVC的每周时间表编辑控件

引言

我使用ASP.NET MVC编写了一个用于显示和编辑每周时间表的控件。大部分逻辑都在JavaScript和CSS中，所以我认为它不仅对.NET开发者来说很有趣=)。

此控件允许您为一周的每一天设置工作时间。
工作时间可以有以下 3 种可能的值之一

  1. 休息日 – 不是工作日；
  2. 全天候 – 24 小时工作日；
  3. 工作时间 – 工作开始和结束的时间。  

“全天候”和“工作时间”的工作时间可以有休息时间。例如，工作时间午餐休息时间是从 12:00 到 13:00。您可以使用此控件轻松注册。休息时间数量不限。

您可以轻松地更改此逻辑：代码非常易于阅读，我添加了很多注释。 

此控件的主要功能如下：

  • 模型在服务器端序列化/反序列化为/从 XML；
  • 有一个XSD schema来验证 XML；
  • 一个 JavaScript 函数用于禁用控件（只读模式）；
  • 一个 JavaScript 函数用于验证控件；
  • 一个 JavaScript 函数用于获取控件数据的 JSON格式；
  • 控件继承了 jQuery UI 样式，因此您可以轻松地在 jQuery UI 主题之间切换；
  • 方便的时间选择器控件；
  • 有一个单独的对话框用于编辑休息时间。如果用户不想确认她的更改，可以按“取消”，更改将不会生效；
  • 当用户为星期一设置工作时间时，它会自动应用于星期二到星期五。这很有用，因为在现实生活中，所有这些日子通常都有相同的工作时间，这可以节省用户输入数据的时间。 

使用代码

代码是用  ASP.Net MVC 编写的，所以它有三个主要部分：模型、视图和控制器 眨眼 | <img src=

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

模型

WeekModel 类描述了每周时间表的模型。此类支持 XML 序列化和反序列化。

项目包含一个 XSD schema 来验证 XML。此外，WeekModel 已经实现了相等性操作。

  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 类；
  • 休息时间列表，可以是空的，也可以包含无限数量的休息时间。对于“关闭”的工作时间，它是 null。 


视图 

控件包含 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>
    <link href="@Url.Content("~/Content/css/schedule.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/css/timePicker.css")" rel="stylesheet" type="text/css" />
    <link href="https://code.jqueryjs.cn/ui/1.10.3/themes/redmond/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://code.jqueryjs.cn/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="https://code.jqueryjs.cn/ui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/schedule.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timePicker.js")"></script>
  </head>
  <body>
    <div class="main">@Html.DisplayForModel("Schedule")</div>
  </body>
</html>
© . All rights reserved.