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;


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 bin folder, then go to References -> Add reference and choose the mentioned library reference;
  2. Copy Scheduler scripts to your project 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, text, start_date, end_date with int, nvarchar(250), datetime and datetime Data Types correspondingly. Set primary key to id and enable the identity column;
The other option is to 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)
)
  1. Set up a data model by creating a new LINQ to SQL database,  name it “Sample.dbml” and add “Event” table to it;
  2. Create a controller and name it “BasicScheduler”. Use the code written in this tutorial;
  3. 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!

Check it now, get a free trial!

free download

Feel free to leave a comment below and share the article with your friends, if you find it useful.