如何与dhtmlxScheduler建立一个房间预订日历:介绍
{A},我描述了如何整合{A2的}到ASP.NET MVC应用程序并创建一个事件日历,在线管理和编辑事件。这一次,我决定继续这个系列,并告诉你如何延长日历功能实现会议室预订系统。
在本教程中,我将解释如何添加调度系统的多用户功能,允许不同的用户同时在日历的变化。一个会议室预订系统,我们要建立的,看起来像这样:
{S0的}
在本教程结束时,我们会得到一个现成的使用事件调度中的应用,使最终用户添加,删除,编辑,移动不同房间之间的事件。我要继续我以前的教程,所以如何整合日历,你可以学习到ASP.NET MVC应用程序{A3的}。设定目标
之前,我将介绍如何扩展的日历功能,我们需要定义我们的房间预订程序的功能列表:只有授权用户可以创建事件他/她创建的,用户只能编辑事件过期的事件不能被编辑每个事件可以从列表中只分配到一个房间用户可以看到事件所分配的房间(房间观点)用户可以看到在一个星期之内的所有事件(一星期议程视图)不同的颜色由不同用户创建的事件
清单是不淡,但大多数的要求可以通过使用dhtmlxScheduler扩展和标准的ASP.NET MVC解决方案实现。入门
在前面的教程中,我描述了如何使用dhtmlxScheduler 2.6,但最近的新版本3.0已经发布。此更新包括一些错误修正和一些新功能,我们需要在我们的应用程序。
,所以刚开始时,下载{A4纸}的dhtmlxScheduler的最新版本。你下载安装包后,从"代码库"文件夹复制到您的项目文件夹"脚本"(如果你正在使用v.2.6,新文件将覆盖旧)的内容。
新的功能,我们将使用我们的预订申请:
简单的事件颜色(为每个用户创建的事件设置不同的颜色)本周议程观点(可以让最终用户看到当前的一周之内的所有事件)数据库的结构和。NET会员
我们的数据库存储提供的酒店房间,并有访问系统的用户信息。因此,让我们创建我们的数据库中的表间与后列:room_id?房间的ID吗?标题??房间的名称
为了不手动创建用户的基础设施,我们将使用内置的ASP.NET成员实用程序(了解更多关于{A5的})。我们需要做的是:运行在ASP.NET SQL Server注册工具(将Aspnet_regsql.exe)(找到的细节{A6的})。该工具自带NET框架下可以找到:,C:\ WINDOWS \ Microsoft.NET \框架\ \ aspnet_regsql.exe的。
运行工具,用下面的键:aspnet_regsql.exe -E -S <servername> -d <databasename> -A m
,它会创建多个表(和数据库,如果它尚不存在):aspnet_Applicationsaspnet_Membershipaspnet_SchemaVersionsaspnet_Users
所有这些表使用ASP.NET成员提供其功能。我们只应该加入到"颜色"一栏编辑表aspnet_Users。用户的事件颜色的颜色??
为了简化事情,让我们重命名映射表aspnet_User的用户和离开只是列,我们将使用,这是:用户ID用户名颜色自订授权相关的控制器和视图。
我们将使用一个标准的MVC项目所产生的控制器和意见。所以你不需要创建任何新的文件,你只需要改变现有的一点点:改变重定向AccountController.cs,路径删除默认的CSS处理
用户和房间与事件联系起来,我们添加两个列的表事件:room_id??一个房间表的外键user_id的??为aspnet_Users表的外键
(创建所需要的所有的表,并添加缺少的列)当您完成,别忘了刷新MyEvents.dbml。
如果你不想手动编辑数据库,你可以从包中使用的数据库示例文件。它包含所有需要的表和列。
{S}用户身份验证
认证所需的所有条件的规定,所以我们可以将此功能添加到我们的日历。对于这一点,我们需要做三件事:
添加到Web.config文件中的设置:{C}
MyCalendarConnectionString是在同一文件中设置ConnectionString属性的名称。所产生的意见和控制器准备使用,不需要任何修正。这是没有必要,我们的应用程序将免费注册,所以我们可以从Logon.aspx中删除的登记环节和相关的"行动"从控制器。
在我们的示例中,我们使用一个数据库,它包含两个测试用户。你可以用下面的用户名/密码对登录:测试/测试用户/用户添加Index.aspx文件登录的链接。查看/日历/的Index.aspx:...
<div class="dhx_cal_navline">
<div class="" style="removed420px;height:23px;">
<% Html.RenderPartial("LogOnUserControl"); %></div>
...
所有这些步骤后,我们会得到一个工作日历系统,其中包含了用户登录表单。在月视图中,我们的日历会看起来像这样:
{S2的}用户上网安全
提供用户访问控制(根据我们的要求),我们需要对客户端和服务器端添加一些检查。
检查服务器端需要提供应用程序的安全性。客户端进行检查,不影响应用程序的安全性,没有他们,我们可以做的,但它会使我们的系统缓慢。因此,我们将定义客户端检查,以提供更好的性能和实时的用户体验。
客户端规则的意见/日历/的Index.aspx??{体C3}
我们将添加服务器端相同的规则。如果用户未被授权编辑的事件,或一个用户名不匹配的名称当前用户,然后改变不会被保存和"错误"将被退回。控制器/ CalendarController.cs{的C4}
现在,我们需要包括持有人的数据饲料事件有关的信息和传递的Index.aspx控制器所需的模型视图。查看/日历/ Data.aspx的{C5的}
此外,我们将指定的财产的事件'颜色'。从这一刻起,每个用户创建的事件将在适当的颜色着色。
过期事件,不能编辑,将显示灰色为禁用。查看/日历/ Data.aspx的{5233}
CalendarModel的是一个类,它包含有关当前用户的信息和可用客房(创建一个可用房间列表是我们下一步)。
这是如何看起来像我们的活动日程表。在月视图中,我们可以看到不同的颜色显示由创建它们的用户事件。显示旧的事件在灰色,不能进行编辑。
{S3的}
这些变化后,我们已经达到我们的主要目标,并创建了一个多用户的事件日历。用户可以看到所有的事件,但他们只能编辑,他们创建的事件。日程视图和房间查看
要按照我们在开始设置的要求,我们现在将添加显示由房间的事件,并查看当前的一周之内的所有事件的能力。
要看到当前一周内发生的事件列表,我们可以使用的的dhtmlxScheduler周日程视图。我们需要添加相应的脚本和按钮Index.aspx文件。查看/日历/的Index.aspx{C7-}
下面的图片显示了我们预定的日历将在本周日程视图看。我们可以看到,每星期分配的事件列表。
{四至}
若要显示由指定的房间里的事件,我们将使用的单位dhtmlxScheduler视图。让我们把在Index.aspx文件进行必要的修改:{C8的}
此外,我们应该添加JavaScript代码来配置日历中的新观点。查看/日历/的Index.aspx:scheduler.locale.labels.units_tab = 'Rooms';
scheduler.locale.labels.section_room = "Room:";
//a list of rooms
var rooms = [<% for(var i =0; i < Model.Rooms.Count; i++){ %>
现在,我们可以看到房间号码的事件。鉴于此,允许用户检查每个房间的可用性,并找到最好的地方,并为每个活动的时间。
{五}提供更好的用户体验
为了简化用户交互日历,我们将添加能够选择一个房间号码,直接从日历事件灯箱。为了实现这一目标,我们将定义事件的细节,我们自己配置的形成,而不是在Index.aspx文件的默认之一:{C10的}
我们的自定义事件灯箱,现在有一个额外的选择框与房间号码:
{六}
为了给用户提供更多有关事件的信息,我们可以添加房间号码的事件描述。点击添加/日历/的Index.aspx:{C11的}
,这里是我们的房间预订日历的最后一眼:
{S0的}
如果您遵循本教程的所有步骤,你现在有一个多用户的日历,使最终用户能够方便地预订会议室和安排房间之间的事件。