MVC 计划控件。
4.83/5 (16投票s)
MVC 计划控件。
引言
这两个是免费控件，**ScheduleCalendar** 和 **ScheduleGeneral**，旨在以表格形式显示计划事件。它们是所谓的甘特图的简单版本。它们没有高级功能，例如依赖项和里程碑，但另一方面，它们允许您为项目内容提供 lambda 表达式或局部视图，因此显示什么由您（开发人员）决定。
这些控件可用于各种应用程序：时间表、资源使用规划器、日历、事件调度程序、活动、预订、序列、项目管理等... 请参阅演示以获取一些示例。
例如，**ScheduleCalendar** 控件将这些数据
| 开始时间 | 结束时间 | 事件日期 | 任务 |
|---|---|---|---|
| 9:00 | 11:00 | 3/8/2013 | 历史 |
| 9:00 | 10:00 | 3/9/2013 | 数学 |
| 10:00 | 11:00 | 3/9/2013 | 生物学 |
| 11:00 | 12:00 | 3/9/2013 | 历史 |
| 9:00 | 10:00 | 3/10/2013 | 地质学 |
| 10:00 | 12:00 | 3/10/2013 | 数学 |
| 9:00 | 10:00 | 3/11/2013 | 经济 |
| 10:00 | 12:00 | 3/11/2013 | 文学 |
| 9:00 | 12:00 | 3/12/2013 | 体育 |
| 9:00 | 11:00 | 3/15/2013 | 历史 |
| 9:00 | 10:00 | 3/16/2013 | 数学 |
| 10:00 | 11:00 | 3/16/2013 | 生物学 |
| 11:00 | 12:00 | 3/16/2013 | 历史 |
| 9:00 | 10:00 | 3/17/2013 | 地质学 |
| 10:00 | 12:00 | 3/17/2013 | 数学 |
| 9:00 | 10:00 | 3/18/2013 | 经济 |
| 10:00 | 12:00 | 3/18/2013 | 文学 |
| 9:00 | 12:00 | 3/19/2013 | 体育 |
转换为此演示文稿
另一个控件是 **ScheduleGeneral**。在这里您可以提供自己的标题（您可以想到人物、资源或地点名称）。这是一个电视节目的示例
重叠事件将自动导致在表格中添加额外的行或列，从而使其能够正确显示。
重叠项目
这些控件至少需要 ASP.NET 4.0 和 MVC3。它们附带一个文档文件“documentation.chm”。
安装
安装控件
您可以以标准方式安装控件
- 在网站的应用程序根目录中创建一个“bin”文件夹（如果尚不存在）
- 将程序集文件 MvcSchedule.dll 复制到 bin 文件夹中
NuGet 包也可在 https://nuget.net.cn/packages/MvcSchedule 获取。
安装演示
我添加了一个带有简单演示文件集的 Visual Studio 项目。
使用控件
将控件添加到您的页面
将这些行添加到页面的顶部 (Razor 语法)
@using MvcSchedule;
@using MvcSchedule.Objects;
然后，在您希望显示进度表的位置调用以下 Html 助手
C#
@Html.ScheduleCalendarFor(Model,
m => m.StartTime,
m => m.EndTime,
m => m.EventDate,
m => m.Task,
new MvcScheduleCalendarOptions {
Layout = LayoutEnum.Vertical,
ItemCss = "item"
},
t => ((DateTime)t).ToString("hh:mm"),
d => ((DateTime)d).ToString("dd/MM"))
VB.NET
@Html.ScheduleCalendarFor(Model,
Function(m) m.StartTime,
Function(m) m.EndTime,
Function(m) m.EventDate,
Function(m) m.Task,
new MvcScheduleCalendarOptions With {
.Layout = LayoutEnum.Vertical,
.ItemCss = "item"
},
Function(d) DirectCast(d,DateTime).ToString("hh:mm"),
Function(t) DirectCast(t,DateTime).ToString("dd/MM"))
当然，对于通用版本，您使用 `ScheduleGeneralFor` 而不是 `ScheduleCalendarFor`。
模型应该是 IEnumerable 类型。
数据表达式
对于进度表上的每个项目，模型应提供表达式以提供开始值、结束值和自定义数据（通常是任务或事件的描述）。对于 ScheduleCalendar 控件，当 `TimeExpressionsContainDate==false` 时，您还需要一个日期表达式。对于 ScheduleGeneral 控件，您还需要一个标题表达式（用于在列/行标题上显示）。
您需要通过 Html 助手调用提供至少 3 个 lambda 表达式
ScheduleCalendar:
- `StartTimeExpression`：对于模型中的一个项目，产生事件开始时间的表达式
- `EndTimeExpression`：产生事件结束时间的表达式
- `DateExpression`：产生事件日期的表达式。此表达式应生成“DateTime”类型的结果（例外：当 `TimeExpressionsContainDate==true` 时，此表达式将被忽略，请参阅下文）。在垂直布局中，此表达式将用于列标题。在水平布局中，它将用于行标题。
ScheduleGeneral:
- `DataRangeStartExpression`：产生事件开始时间的表达式
- `DataRangeEndExpression`：产生事件结束时间的表达式
- `TitleExpression`：提供标题的表达式。您可以想到一些有用的标题字段：人名、地点、教室、资源等...）在垂直布局中，此表达式将用于列标题。在水平布局中，它将用于行标题。
1) 和 2) 可以被认为是时间表达式，但通常，任何可排序的表达式（例如整数）都可以。仅当 ScheduleCalendar 控件的 `TimeExpressionsContainDate==true` 时，它们才应包含日期和时间信息，并且当 `FullTimeScale=True` 时，它们至少应包含时间信息。
最后，您需要提供一种显示项目内容的方法。这可以通过两种方式完成（取决于您使用的 Html 助手的哪个重载）
- 通过提供 `ItemDisplayExpression`：提供实际项目中显示的内容的表达式。
- 通过提供 `ItemPartialViewName`：显示进度表上项目的局部视图的名称。
这允许您为项目提供各种丰富的内容。
选项
您可以提供一个包含各种选项的可选参数。对于日历控件，这是一个 MvcScheduleCalendarOptions 对象；对于通用控件，这是一个 MvcScheduleGeneralOptions 对象。
通过选项，您可以设置进度表不同部分的 css 样式。这些是样式
- `GeneralCss`：应用于整个进度表表格的样式类。
- `ItemCss`：应用于进度表项目的样式类。
- `AlternatingItemCss`：应用于交替进度表项目的样式类。当为 null 时，应用 ItemCss。
- `RangeHeaderCss`：应用于范围标题项目的样式类。对于日历，请使用 `TimeCss`。
- `TitleCss`：应用于标题项目的样式类。对于日历，请使用 `DateCss`。
- `BackgroundCss`：应用于背景单元格（无内容的单元格）的样式类。
一个重要的选项是 `FullTimeScale` 属性。当为 false（默认值）时，仅显示模型中出现的范围值。当为 true 时，显示连续的时间刻度（类似于 Outlook 日历）。对于 ScheduleGeneral 控件，这要求模型中的 `DataRangeStartExpression` 和 `DataRangeEndExpression` 表达式为 DateTime 类型。
下图显示了两种情况下的相同项目（午餐从 12:30 到 13:30）
|
|
|
|
当 `FullTimeScale` 为 true 时，您可以设置 3 个额外的选项
- `TimeScaleInterval`：一个整数值，表示间隔的分钟数（默认值 = 60）
- `StartOfTimeScale`：一个 timespan 值，设置时间刻度的开始时间（默认值 = 8:00）
- `EndOfTimeScale`：一个 timespan 值，设置时间刻度的结束时间（默认值 = 17:00）。此处允许的最高值为 24:00（午夜），应输入为“1.00:00”（一天，零小时和分钟）。
另外两个重要选项是 `IncludeEndValue` 和 `ShowValueMarks`。当 `IncludeEndValue` 为 `true` 时，将包含带有结束值的行。有时，这会产生更合乎逻辑的呈现。但是，当项目相邻时（例如：一个事件在上午 10:00 结束，另一个在同一时间开始），最好将 `IncludeEndValue` 设置为 `false`。否则，项目将显示为重叠。在这种情况下，您还可以将 `ShowValueMarks` 设置为 `true`，这将添加指示值的标记，并且值将显示在项目的中间。这两个的默认值都是 `false`。
下图显示了所有情况下的相同项目（午餐从 12:30 到 13:30）
IncludeEndvalue = False 和 ShowValueMarks = False
| 12:30 |
午餐从 12:30 到 13:30 |
| 13:00 | |
| 13:30 | |
| 14:00 |
IncludeEndValue = True (ShowValueMarks 被忽略)
| 12:30 |
午餐从 12:30 到 13:30 |
| 13:00 | |
| 13:30 | |
| 14:00 |
IncludeEndValue = False 和 ShowValueMarks = True
| 12:30 | ||
|
午餐从 12:30 到 13:30 |
||
| 13:00 | ||
| 13:30 | ||
| 14:00 | ||
对于 **ScheduleCalendar** 控件，您可以在 MvcScheduleCalendarOptions 参数上设置这些附加属性
- `NumberOfDays`：一次显示的天数。默认值为 7，使其成为周日历。
- `NumberOfRepetitions`：重复天数的次数（默认设置为重复 1 次）。当 NumberOfDays=7 时，这是将在控件中显示的周数。
- `StartDay`：日历开始的星期几。此属性仅在 NumberOfDays 属性设置为 7 时使用。默认值为星期一。
- `StartDate`：开始显示事件的日期。如果此日期与 StartDay 属性的星期几不相同，则控件将在所选日期之前的同一天开始显示。默认值为今天的日期。
- `TimeExpressionsContainDate`：当为 false（默认值）时，`DateExpression` 属性用于提取每个项目的日期。这意味着项目必须在同一天开始和结束。如果您的某些项目跨越午夜，您应该将 `TimeExpressionsContainDate` 设置为 true，并且您应该在 `StartTimeExpression` 和 `EndTimeExpression` 表达式中提供完整的日期和时间。在这种情况下，`DateExpression` 属性将被忽略。
**ScheduleGeneral** 控件在 MvcScheduleGeneralOptions 参数上具有两个附加属性
- `AutoSortTitles`：当为 true 时，即使标题在模型中未排序，它们也会自动排序。当为 false 时，您可以为标题提供自己的排序顺序，但请确保具有相同标题的项目分组在一起，并且对于每个标题，项目首先按 DataRangeStartExpression 排序，然后按 DataRangeEndExpression 排序。`AutoSortTitles` 的默认值为 true。
- `SeparateDateHeader`：当为 true 时，将添加额外的单元格范围以分组同一日期的所有事件。这要求 `DataRangeStartExpression` 和 `DataRangeEndExpression` 的类型为 `DateTime`。默认值为 false。
|
|
|
|
对于 ScheduleCalendar 和 ScheduleGeneral 控件，您可以使用 `Layout` 属性轻松地在垂直或水平布局之间切换。
提供格式
除了用于构建进度表的表达式之外，您还可以提供可选表达式来指示如何显示数据。
例如，您可以使用某个 DateTime 属性作为 `DataRangeStartExpression`，但您可以提供一个 `DataRangeDisplayExpression` 来以短日期格式格式化此属性。
对于 ScheduleGeneral 控件，这些是
- `DataRangeDisplayExpression` 用于显示范围开始和范围结束值。
- `TitleDisplayExpression` 用于显示标题值。
- `DateHeaderDisplayExpression` 用于显示日期标题值。
对于 ScheduleCalendar 控件，这些是
- `TimeDisplayExpression` 用于显示时间值。
- `DateDisplayExpression` 用于显示日期值。
演示页面
下载演示页面以获取显示如何使用进度表控件的示例。在每个示例中，您可以使用表单设置属性并添加项目。这些示例使用 SQL Server 数据库作为数据源。
- **demo1.aspx** 显示了一个日历示例。它还向您展示了如何使用链接按钮删除项目。
- **demo2.aspx** 显示了一个任务列表示例。它还向您展示了如何使用链接按钮编辑和删除项目。
- **demo3.aspx** 显示了一个电视节目表示例。
- **demo4.aspx** 显示了一个包含跨午夜项目的日历示例。
工作原理
我决定使用表格来显示所有项目，而不是图形。图形会给服务器带来沉重的负担，最重要的是：表格可以包含局部视图。通过使用局部视图，开发人员可以完全控制项目的内容。
我创建了一个 BaseSchedule 对象，其中包含 ScheduleGeneral 和 ScheduleCalendar 的通用代码。
首先，从模型中提取所有信息，以便为行和列标题创建列表。所有重复值都被删除，其余的按升序排序。
接下来，构建一个空的表格对象，具有正确的行数和列数。为了简单起见，表格始终以垂直布局构建，仅在需要时才转换为水平网页表格。
然后，添加标题项目（行标题和列标题）。
接下来，将计划的项目添加到表格主体。最困难的部分是计算每个项目的位置和跨度，合并相应的单元格，并检查项目是否不重叠。
最后，表格对象被转换为 HTML 表格。
未来
以下是一些未来改进的想法
- 提供对从右到左语言的支持
- 添加拖动支持以选择范围（Outlook 风格）
- 支持重复事件
如果有人决定扩展这些控件，或者有任何意见、错误报告或问题，那么很高兴能收到您的来信。
关注点
- MVC 控件
- HTML 助手
更新历史
版本 1.0.0
第一版