您当前的位置: 首页 >  .net

寒冰屋

暂无认证

  • 4浏览

    0关注

    2286博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

DayPilot——10分钟内用于ASP.NET MVC的AJAX每月事件日历

寒冰屋 发布时间:2020-03-21 12:28:28 ,浏览量:4

目录

1.项目设置(00:00:00-00:03:00)

2. ASP.NET MVC视图(00:03:00-00:04:00)

3.茶歇(00:04:00-00:05:00)

4. ASP.NET MVC控制器(00:05:00-00:05:30)

5.加载日历事件(00:05:30-00:08:00)

6.拖放日历事件移动(00:08:00-00:10:00)

CSS主题(1.4版)

透明CSS日历主题

Google类CSS日历主题

绿色CSS日历主题

传统CSS日历主题

事件自定义(1.5版)

相关计划文章和项目

用于ASP.NET MVC 1.3的开源DayPilot Lite引入了AJAX每月事件日历。在本文中,我们将看到如何设置项目,创建新的ASP.NET MVC视图和控制器,如何加载日历,拖放日历事件移动,CSS主题和事件自定义。

  • 下载示例项目 -ASP.NET MVC 4,Visual Studio 2010(311 kB)[codeproject.com]
  • 下载示例项目 -ASP.NET MVC 5,Visual Studio 2012(268 kB)[codeproject.com]
  • 下载适用于ASP.NET MVC 1.5二进制文件的DayPilot Lite +源代码 [daypilot.org]
  • 现场演示 [daypilot.org]

用于ASP.NET MVC 1.3的开源DayPilot Lite引入了AJAX每月事件日历。

它补充了现有的每日事件日历:

以及每周事件日历:

也可以看看:

  • 80行代码的ASP.NET MVC的AJAX事件日历(计划程序) [codeproject.com]

还有一个适用于JavaScript/HTML5/jQuery [javascript.daypilot.org] 的独立事件日历/时间表(适用于JavaScript的DayPilot Lite):

有关将DayPilot for JavaScript与ASP.NET MVC和PHP后端一起使用的详细信息,请参阅HTML5事件日历(开放源代码)教程。

1.项目设置(00:00:00-00:03:00)

下载用于ASP.NET MVC开源软件包的DayPilot Lite。下载包很小,因此您不会花太多时间下载它。

将DayPilot JavaScript文件从程序包的Scripts文件夹复制到您的项目(Scripts/DayPilot):

  • daypilot-all.min.js

将DayPilot.Web.Mvc.dll从包的Binary文件夹复制到您的项目(Bin)。

添加对DayPilot.Web.Mvc.dll的引用:

2. ASP.NET MVC视图(00:03:00-00:04:00)

创建一个新的MVC视图(Views/Home/Index.cshtml):

@{ ViewBag.Title = "AJAX Monthly Event Calendar for ASP.NET MVC"; }
AJAX Monthly Event Calendar for ASP.NET MVC

添加DayPilot JavaScript库:

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

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})

您会看到所需的最少代码很短。它仅需指向后端MVC控制器(“~/Home/Backend”),该控制器将使用AJAX调用提供日历事件数据。

不要忘记将DayPilot.Web.Mvc命名空间添加到/Views/Web.config中,以便它识别Html.DayPilotMonth帮助程序:


  
    
      
        ...
        
      
    
  

这是带有事件日历的新MVC视图的完整代码:

@{ ViewBag.Title = "AJAX Monthly Event Calendar for ASP.NET MVC"; }

AJAX Monthly Event Calendar for ASP.NET MVC



@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})
3.茶歇(00:04:00-00:05:00)

现在您可以煮咖啡了。但不要在一分钟内喝完,它太热了!我们几分钟后再去喝咖啡。

4. ASP.NET MVC控制器(00:05:00-00:05:30)

创建一个新的ASP.NET MVC控制器(Controllers/HomeController.cs):

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

为日历后端添加一个新的动作处理程序。可以通过/Home/Backend访问。

public ActionResult Backend()
{
  return new Dpm().CallBack(this);
}
5.加载日历事件(00:05:30-00:08:00)

该操作会将控制权传递给派生自DayPilotMonth类的自定义类Dpm的新实例:

class Dpm : DayPilotMonth
{
  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();
  }
}

我们已使用Visual Studio 2010向导(DataClasses1.dbml)生成的LINQ to SQL类从名为events的简单MS SQL表中加载了日历事件数据。

“Event”表包含四个字段(id,text,eventstart,eventend):

DayPilotMonth使用Data*Field属性将表字段映射到必填字段:

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

调用Update()将在客户端刷新日历事件数据。

以下是使用AJAX将日历事件数据提供给客户端的MVC控制器的完整代码:

using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Month;

namespace DayPilotMonthLiteMvc4.Controllers
{
  public class HomeController : Controller
  {

    public ActionResult Index()
    {
      return View();
    }

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

    class Dpm : DayPilotMonth
    {
      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();
      }
    }
  }
}

了解有关事件加载的更多信息[doc.daypilot.org]。

6.拖放日历事件移动(00:08:00-00:10:00)

为了启用拖放事件移动,我们需要添加EventMoveHandling到配置中:

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  EventMoveHandling = DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
})

控制器也必须扩展。它将处理EventMove事件并更新数据库:

class Dpm : DayPilotMonth
{
  // ...
  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();
  }
  // ...
}

了解有关事件移动的更多信息[doc.daypilot.org]。

CSS主题(1.4版)

用于ASP.NET MVC 1.4的DayPilot Lite提供了对CSS主题的支持[doc.daypilot.org]。包括以下主题。

透明CSS日历主题

Google类CSS日历主题

绿色CSS日历主题 传统CSS日历主题

事件自定义(1.5版)

从1.5 SP3版本开始,用于ASP.NET MVC的DayPilot Lite支持事件自定义 [doc.daypilot.org]。您可以使用OnBeforeEventRender事件处理程序在服务器端自定义事件。

例:

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.BackgroundColor = "#FFE599";
  e.BorderColor = "#F1C232";
  e.FontColor = "#000";
}

您还可以根据事件数据对象的自定义字段来更改事件属性:

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Html += " owner:" + e.DataItem["owner"];  // accessing the "owner" field 
                                              // from the data source
  e.BackgroundColor = (string) e.DataItem["color"];
}

可以自定义的属性:

  • Html
  • CssClass
  • BackgroundColor
  • BorderColor
  • FontColot
  • ToolTip
相关计划文章和项目
  • 80行代码的ASP.NET MVC的AJAX事件日历(计划程序) [codeproject.com]
  • jQuery的事件日历(ASP.NET MVC) [kb.daypilot.org]
  • ASP.NET MVC和jQuery的每月活动日历(开源)[code.daypilot.org]
  • HTML5事件日历(开源) [code.daypilot.org]
  • AngularJS事件日历(开源) [code.daypilot.org]
  • 使用EWS(ASP.NET)从Exchange Server(Office 365)加载日历约会 [code.daypilot.org]
关注
打赏
1665926880
查看更多评论
立即登录/注册

微信扫码登录

0.1661s