AJAX事件日历

原文地址：http://www.codeproject.com/Articles/404647/AJAX-Event-Calendar-Scheduler-for-ASP-NET-MVC-3-in

在线演示：

   日程视图

  周日程视图

  只需要80行代码就能创建事件，调整大小，移动。

  需要3个步骤：

    1 库：包括DayPilot.Web.Mvc.dll 和脚本 在你的项目里为他们添加引用。

 2 视图：创建一个新的MVC Razor视图以及添加DayPilot 日历小部件， DayPilotCalendar 扩展

  3 控制：创建一个MVC控制器，来提供数据

   步骤1

 下载DayPilot Lite for ASP.NET MVC open-source package.

将DayPilot的脚本复制到你的项目文件中

 将DayPilot.Web.Mvc.dll包复制到你的项目里（BIN）

再添加引用

  步骤2

   MVC视图

  2.1  创建一个新的ASP.NET MVC view

   @{ViewBag.Title=''ASP.NET MVC Razor Event Calendar";}

 <h2>ASP.NET MVC Razor Event Calendar</h2>

 2.2  添加DayPilot 脚本 类库：

    <script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

  2.3 添加事件日历初始化代码

  @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig{  BackendUrl = Url.Content("~/Home/Backend"),})

  2.4  在配置文件中  添加 DayPilot.Web.Mvc 命名空间

   <configuration>  <system.web.webPages.razor>    <pages pageBaseType="System.Web.Mvc.WebViewPage">      <namespaces>        ...        <add namespace="DayPilot.Web.Mvc"/>      </namespaces>    </pages>  </system.web.webPages.razor></configuration>

  2.5 以下是完整的代码：

  @{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }<h2>ASP.NET MVC Razor Event Calendar</h2><script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig{  BackendUrl = Url.Content("~/Home/Backend"),})

 

 步骤3

 MVC控制器（共34行代码）

   3.1创建一个新的MVC控制器

 public class HomeController : Controller{  public ActionResult Index()  {    return View();  }}

  3.2 添加一个新的操作接口为日历的后端。实现其的可访问性

public ActionResult Backend(){  return new Dpc().CallBack(this);}

 3.3这个动作将会传递控制一个新的实例

class Dpc : DayPilotCalendar{  protected override void OnInit(InitArgs e)  {    var db = new DataClasses1DataContext();    Events = from ev in db.events select ev;    DataIdField = "id";    DataTextField = "text";    DataStartField = "eventstart";    DataEndField = "eventend";    Update();  }}

3.4

添加一个 .dbml文件

   创建一个事件表结构

 表中的字段映射到数据文件的属性中

DataIdField = "id";DataTextField = "text";DataStartField = "eventstart";DataEndField = "eventend";

调用Update()将会向客户端发送日历事件数据

 以下是完整的MVC控制器代码

using System;using System.Linq;using System.Web;using System.Web.Mvc;using DayPilot.Web.Mvc;using DayPilot.Web.Mvc.Events.Calendar;namespace DayPilotCalendarMvc3.Controllers{  public class HomeController : Controller  {    public ActionResult Index()    {      return View();    }    public ActionResult Backend()    {      return new Dpc().CallBack(this);    }    class Dpc : DayPilotCalendar    {      protected override void OnInit(InitArgs e)      {        var db = new DataClasses1DataContext();        Events = from ev in db.events select ev;        DataIdField = "id";        DataTextField = "text";        DataStartField = "eventstart";        DataEndField = "eventend";        Update();      }    }  }}

 

步骤4

 添加AJAX 拖动函数

 @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig{  BackendUrl = Url.Content("~/Home/Backend"),  EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,  EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,  TimeRangeSelectedJavaScript = "dpc.timeRangeSelectedCallBack(start,         end, null, { name: prompt('New Event Name:', 'New Event') });"})

 

 

using System;using System.Linq;using System.Web.Mvc;using DayPilot.Web.Mvc;using DayPilot.Web.Mvc.Enums;using DayPilot.Web.Mvc.Events.Calendar;namespace DayPilotCalendarMvc3.Controllers{    public class HomeController : Controller    {        public ActionResult Index() { return View();        }        public ActionResult Backend()        {            return new Dpc().CallBack(this);        }        class Dpc : DayPilotCalendar        {            DataClasses1DataContext db = new DataClasses1DataContext();            protected override void OnInit(InitArgs e)            {                Update(CallBackUpdateType.Full);            }            protected override void OnEventResize(EventResizeArgs e)            {                var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();                toBeResized.eventstart = e.NewStart;                toBeResized.eventend = e.NewEnd;                db.SubmitChanges();                Update();            }            protected override void OnEventMove(EventMoveArgs e)            {                var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();                toBeResized.eventstart = e.NewStart;                toBeResized.eventend = e.NewEnd;                db.SubmitChanges();                Update();            }            protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)            {                var toBeCreated = new Event {eventstart = e.Start,                                              eventend = e.End, text = (string) e.Data["name"]};                db.Events.InsertOnSubmit(toBeCreated);                db.SubmitChanges();                Update();            }            protected override void OnFinish()            {                if (UpdateType == CallBackUpdateType.None)                {                    return;                }                Events = from ev in db.Events select ev;                DataIdField = "id";                DataTextField = "text";                DataStartField = "eventstart";                DataEndField = "eventend";            }        }    }}