ASP.NET Event Calendar in MVC3 Razor

In this article you'll learn how the current syntax used in Scheduler .NET can be simplified with ASP.NET MVC3 view engine called Razor.

DHTMLX Scheduler .NET can be implemented either in C# or Visual Basic. Razor uses C# or Visual Basic syntax and allows writing HTML with C# or Visual Basic in the same page. We'll choose C# for this project.

Razor syntax used in Scheduler .NET:

1 . '@' character precedes the code and is added inside the HTML markup

2 . ASP.NET tags are omitted

You can skip reading the tutorial and download the package right now:

Create a new ASP.NET MVC3 project in Microsoft Visual Studio 2010 and proceed with the following steps:

1 . Copy DHTMLX .dll file to your project's bin folder, then go to References -> Add reference and choose the mentioned library reference

2 . Copy Scheduler scripts to your project's Scripts folder

3 . Set up a database by right-clicking on "Your_project_name" (e.g. mySchedulerApp) -> Add -> Add ASP.NET Folder -> App_Data -> Add New Item and name it "Sample.mdf"

4 . Add a new table and name it "Event". It should have the following columns: id (number), text (nvarchar(250)), start_date (datetime), end_date (datetime). Set the primary key to id and enable the identity column

You can also create a table using the following query:

CREATE TABLE [dbo].[Events](
  [id] int IDENTITY(1,1) NOT NULL,
  [text] nvarchar(250) NULL,
  [start_date] datetime NOT NULL,
  [end_date] datetime NOT NULL,
  PRIMARY KEY (id)
)

Now you need to add necessary model, view and controller:

• Set up a data model by creating a new LINQ to SQL database, name it "Sample.dbml" and add "Event" table to it
• Create a controller and name it "BasicScheduler". Use the code below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
using mySchedulerApp.Models;
 
using DHTMLX.Scheduler;
using DHTMLX.Scheduler.Data;
using DHTMLX.Common;
 
 
namespace mySchedulerApp.Controllers
{
    public class BasicSchedulerController : Controller
    {
        public ActionResult Index()
        {
            var scheduler = new DHXScheduler(this); //initializes dhtmlxScheduler
            scheduler.LoadData = true;// allows loading data
            scheduler.EnableDataprocessor = true;// enables DataProcessor in order to enable implementation CRUD operations
            return View(scheduler);
        }
 
        public ActionResult Data()
        {//events for loading to scheduler
            return new SchedulerAjaxData(new SampleDataContext().Events);
        }
 
        public ActionResult Save(Event updatedEvent, FormCollection formData)
        {
            var action = new DataAction(formData);
            var context = new SampleDataContext();
 
            try
            {
                switch (action.Type)
                {
                    case DataActionTypes.Insert: // your Insert logic
                        context.Events.InsertOnSubmit(updatedEvent);
                        break;
                    case DataActionTypes.Delete: // your Delete logic
                        updatedEvent = context.Events.SingleOrDefault(ev => ev.id == updatedEvent.id);
                        context.Events.DeleteOnSubmit(updatedEvent);
                        break;
                    default:// "update" // your Update logic
                        updatedEvent = context.Events.SingleOrDefault(
                        ev => ev.id == updatedEvent.id);
                        UpdateModel(updatedEvent);
                        break;
                }
                context.SubmitChanges();
                action.TargetId = updatedEvent.id;
            }
            catch (Exception a)
            {
                action.Type = DataActionTypes.Error;
            }
            return (new AjaxSaveResponse(action));
        }
    }
}

The Controller should contain 3 main actions:

1) Index() - defines scheduler configuration

2) Data() - loads data (events) to the scheduler

3) Save() - defines Create/Update/Delete logic

• Generate the view. Add a new Razor view "Index.cshtml" to get an event calendar with the same functionality as in ASP.NET views, but with a reduced and simplified coding:

@{
    Layout = null;
}
<!DOCTYPE html >
<html>
    <head >
           <title>Index</title>
           <style type="text/css">
               html, body
               {
                   height:100%;
                   padding:0px;
                   margin:0px;
               }
           </style>
    </head >
    <body>
           @Html.Raw(Model.Render())
 
    </body>
</html>

To render the view, remember to change the default route in Global.asax.cs as follows:

// Parameter defaults
new { controller = "BasicScheduler", action = "Index", id = UrlParameter.Optional }

The event calendar is ready to use. You can check it now and get a free trial or download the demo package: