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

در این مقاله نحوه ی ایجاد یک تقویم رویداد AJAX با استفاده از سورس باز DayPilot Lite برای کتابخانه ی MVC را خواهیم آموخت. ما نمونه ی خودمان را با MVC 5 ، ویژوال استودیو ۲۰۱۲ و LocalDB SQL Server ایجاد خواهیم کرد.

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

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

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

1-ajax-event-calendar-in-mvc

Transparent CSS Theme

2-ajax-event-calendar-in-mvc

CSS Theme سبز

3-ajax-event-calendar-in-mvc

CSS Theme سفید

4-ajax-event-calendar-in-mvc

CSS Theme سنتی

5-ajax-event-calendar-in-mvc

۱ کتابخانه 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 اضافه کنید.

6-ajax-event-calendar-in-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>

 ۳ MVC Controller

یک کنترلر Mvc جدید ایجاد کنید.

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 با استفاده از ویژوال استودیو ۲۰۱۰ ویزارد ، بارگذاری میکنیم.

7-ajax-event-calendar-in-mvc

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

8-ajax-event-calendar-in-mvc

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

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() داده های رویداد تقویم را به کاربر میفرستد و نمایش را به روز رسانی میکند :

9-ajax-event-calendar-in-mvc

در اینجا کد کامل مربوط به کنترلر 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

10-ajax-event-calendar-in-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";
            }
        }
    }
}

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

11-ajax-event-calendar-in-mvc

تغییر دیدگاه به مشاهده ی هفتگی همانند افزودن یک خط کد به 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

12-ajax-event-calendar-in-mvc

 

دانلود سورس کد
پسورد : csharpoop.com
پیش نمایش

تقویم رویداد AJAX برای MVC
امتیاز دهید

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *