تقویم رویداد AJAX

 

در این مقاله نحوه ی ایجاد یک تقویم رویداد AJAX با استفاده از سورس باز DayPilot Lite برای کتابخانه ی MVC را خواهیم آموخت.

ما نمونه ی خودمان را با MVC 5 ، visualstudio ۲۰۱۲ و LocalDB SQL Server ایجاد خواهیم کرد.

ما تنها به ۸۰ خط کد برای تابعیت Drag&Drop کامل (ایجاد و حرکت دادن و تنظیم بندی رویداد ها) نیاز خواهیم داشت.

مراحل تقویم رویداد AJAX

سه گام ضروری خواهد بود :

  • Library : شامل DayPilot.Web.Mvc.dll و Script هایی در پروژه تان و افزودن ارجاع ها به آن.
  • View : یک MVC Razor View جدید ایجاد کنید و DayPilot Calendar widget را با استفاده از Html.DayPilotCalendar extension اضافه کنید.
  • Controller : یک کنترلر MVC ایجاد کنید که داده ها را تامین کند.

CSS Themes

از نسخه ی ۱.۴ به بعد DayPilot Lite هسته ی جاوا اسکریپت را با DayPilot Lite for JavaScript به اشتراک میگذارد.

DayPilot Lite for ASP.NET MVC 1.4 ، پشتیبانی کامل CSS Styling را معرفی میکند که شامل CSS Themes میشود.

شما همیچنین میتوانید Theme موردنظر خود را به صورت آنلاین در CSS theme designerایجاد کنید.

CSS Theme شبیه Google

 ساخت تقویم Ajax در ASP.NET MVC

Transparent CSS Theme

تقویم رویداد AJAX

CSS Theme سبز

تقویم رویداد AJAX

CSS Theme سفید

 تقویم کامل در MVC

CSS Theme سنتی

تقویم رویداد AJAX

۱ کتابخانه DayPilot.Web.Mvc

پکیج سورس باز DayPilot Lite برای MVC را میتوانید از لینک زیر دانلود کنید :

http://mvc.daypilot.org/download/

فایل های جاواسکریپت را از فولدر Scripts پکیج در پروژه ی خود کپی کنید.

Daypilot-all.min.js

DayPilot.Web.Mvc.dll را از فولدر Binary پکیج در پروژه ی خود کپی کنید.

DayPilot.Web.MVC.dll را به reference اضافه کنید.

 تاریخ نگار در MVC

۲ MVC View

یک View جدید ایجاد کنید.

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

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

کتابخانه های DayPilot Javascript را اضافه کنید :

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

کد راه اندازی تقویم تاریخ را اضافه کنید

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

به یاد داشته باشید که حداقل کد موردنیاز ، بسیار کوتاه است.

تنها نیاز دارد تا به انتهای کنترل MVC اشاره کند.

این کار استفاده از فراخوان AJAX داده های رویداد تقویم را پشتیبانی خواهد کرد.

فراموش نکنید که فضای نام DayPilot.Web.Mvc را به /Views/Web.Confighqhti اضافه کنید تا کمک کننده Html.DayPilotCalendar را شناسایی کند:

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

این کد تکمیلی MVC View جدید مان به همراه تقویم رویداد می باشد :

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


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

[/csharp[</pre>

۳ MVC Controller
<h3>یک کنترلر Mvc جدید ایجاد کنید.</h3>


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

یک Action handler جدید برای باطن تقویم ایجاد کنید. از طریق /Home/Backend قابل دسترسی خواهد بود :

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

این action کنترل را به یک مثال جدید از یک کلاس dpc سفارشی جدید پاس میدهد که مشتق شده از DayPilotCalendar می باشد :

  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();
  }
} 

ما داده های رویداد تقویم را از یک جدول MS SQL ساده با نام events با استفاده از کلاس های تولید شده ی LINQ به SQL با استفاده از ویژوال استودیو ۲۰۱۰ ویزارد ، بارگذاری میکنیم.

تقویم رویداد AJAX

ساختار جدول events بسیار ساده است :

تقویم رویداد AJAX

شمای دیتابیس :

  CREATE TABLE [dbo].[Event] (
    [id<]         INT          IDENTITY (1, 1) NOT NULL,
           VARCHAR (50) NOT NULL,
    [eventstart] DATETIME     NOT NULL,
    [eventend]   DATETIME     NOT NULL,
    CONSTRAINT [PK_Event] PRIMARY KEY CLUSTERED ([id] ASC)
);

میتوانید از شمای دیتابیس خودتان نیز استفاده کنید. در هر صورت واجب است که به DayPilotCalendar بگویید که از کدام فیلد استفاده کند. فیلد های زیر موردنیاز هستند :

Id (از DataIdField برای آدرس دهی این فیلد استفاده کنید)

Start (از DataStartField برای آدرس دهی این فیلد استفاده کنید)

End (از DataEndField برای آدرس دهی این فیلد استفاده کنید)

Text (از DataTextField برای آدرس دهی این فیلد استفاده کنید)

داده های رویداد ها را در خاصیت Events بارگذاری میکنیم و مشخص میکنیم که کدام فیلد ها را تقویم باید با استفاده از کد زیر استفاده کند :

// load data
Events = from ev in db.events select ev;

// field mapping
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";

فراخوانی متد Update() داده های رویداد تقویم را به کاربر میفرستد و نمایش را به روز رسانی میکند :

تقویم رویداد AJAX

در اینجا کد کامل مربوط به کنترلر Mvc قرار داده شده است که داده های رویداد تقویم به کاربر را با استفاده از AJAX تامین میکند.

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

namespace DayPilotCalendarMvc.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();
      }
    }
  }
}

۴ افزودن تابعیت AJAX Drag&Drop

استفاده از AJAX در MVC

به منظور دسترسی به تابعیت drag&drop (ایجاد ، حرکت دادن و تغییر سایز رویداد ها ) احتیاج داریم که خطوط زیر را به View مان اضافه کنیم :

@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 DayPilotCalendarMvc.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";
            }
        }
    }
}

۵ مبحث اضافی : مشاهده هفتگی

تقویم رویداد AJAX

تغییر دیدگاه به مشاهده ی هفتگی همانند افزودن یک خط کد به View ساده است :

ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,

به این قسمت میرود :

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
  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') });"
})

سایر viewtype های مورد پشتیبانی دیگر نظیر WorkWeek و Days (تعداد خاصی روز که توسط خاصیت Days تنظیم میشود)

Month View

استفاده از AJAX در MVC

موفق باشید !

 

تمامی نمونه سورس کد ها + رفرنس های استفاده شده ضمیمه شدن

[button color=”red” size=”medium” link=”http://mvc.daypilot.org/demo/Lite/” icon=”” target=”true”]مشاهده دمو[/button]

جزئیات فایل

زبان پروژه : C#&ASP.NET MVC
حجم فایل پیوست : 500 KB

دانلود فایل

دانلود با لینک مستقیم
پسورد فایل : www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط